/* Guíate Alem - Panel de Administración (Soporte Modo Claro y Oscuro) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  --primary: #0037b0;
  --primary-hover: #002c8c;
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --text-main: #0f172a;
  --border-color: #e2e8f0;
}

/* MODO OSCURO */
html.dark, body.dark {
  --bg-main: #090d16;
  --bg-card: #131b2e;
  --text-main: #f8fafc;
  --border-color: #1e293b;
  background-color: #090d16 !important;
  color: #f8fafc !important;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-main);
  color: var(--text-main);
  transition: background-color 0.25s ease, color 0.25s ease;
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Modo oscuro selectores tailwind helper */
.dark .bg-white {
  background-color: #131b2e !important;
  border-color: #1e293b !important;
}
.dark .bg-slate-50 {
  background-color: #0b1120 !important;
  border-color: #1e293b !important;
}
.dark .bg-slate-100 {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}
.dark .text-slate-900 {
  color: #f8fafc !important;
}
.dark .text-slate-800 {
  color: #f1f5f9 !important;
}
.dark .text-slate-700 {
  color: #cbd5e1 !important;
}
.dark .text-slate-600 {
  color: #94a3b8 !important;
}
.dark .border-slate-200, .dark .border-slate-100 {
  border-color: #1e293b !important;
}
.dark input, .dark select, .dark textarea {
  background-color: #0b1120 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

/* Phone Mockup Frame */
.phone-mockup-frame {
  width: 360px;
  height: 720px;
  background: #000000;
  border-radius: 46px;
  padding: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 2px #334155, 0 0 0 8px #0f172a;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 36px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  scrollbar-width: none;
}
.dark .phone-screen {
  background: #0b1120 !important;
}
.phone-screen::-webkit-scrollbar {
  display: none;
}

.phone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 22px;
  background: #000000;
  border-radius: 20px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
.phone-notch .camera-lens {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1e293b;
  border: 1px solid #334155;
}
.phone-notch .speaker {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: #1e293b;
}

/* Animación sutil de botón pendiente de guardar (ROJO) */
@keyframes pulseSubtle {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.95; }
}
.animate-pulse-subtle {
  animation: pulseSubtle 1.8s infinite ease-in-out;
}