/* ============================================================
   QUIRÓN — DESIGN SYSTEM V2
   "Editorial clínica premium: silenciosa, respirable, cálida."
   ------------------------------------------------------------
   ESTE ARCHIVO ES LA ÚNICA FUENTE DE VERDAD VISUAL.
   Prohibido definir colores, tamaños, radios o sombras
   fuera de estos tokens. Ver DISENO.md para las reglas.
   Reemplaza a design-system.css (mantiene aliases legacy).
   ============================================================ */

/* ── FUENTES ──
   Inter   → panel del psicólogo (interfaz profesional)
   Nunito  → app del paciente (cálida, legible en móvil)
   Fraunces → SOLO títulos editoriales grandes de la app del
              paciente (saludo, título de tarea). Es la firma
              tipográfica "revista premium". Usar con moderación. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');

:root {

  /* ════════════════════════════════════════
     1. COLOR — PALETA ÚNICA Y DEFINITIVA
     ════════════════════════════════════════ */

  /* Fondos "papel premium" */
  --color-bg:            #F7F3EA;   /* fondo general, papel cálido */
  --color-surface:       #FFFFFF;   /* tarjetas y superficies */
  --color-surface-warm:  #FBF8F1;   /* sidebars, paneles secundarios */
  --color-surface-rose:  #F5EDE9;   /* salmón tenue — alternancia visual (info-blocks, etc.) */

  /* Tinta */
  --color-text:          #10213D;   /* texto principal (navy tinta) */
  --color-text-soft:     #6E7A8E;   /* texto secundario */
  --color-text-faint:    #98A2B3;   /* placeholders, metadatos */
  --color-border:        rgba(16, 33, 61, .12);
  --color-border-strong: rgba(16, 33, 61, .22);

  /* Primario institucional (navy). Botones principales, header. */
  --color-primary:       #10213D;
  --color-primary-hover: #172F52;
  --color-primary-soft:  #EEF3F8;   /* fondos de estado selected/hover */

  /* ⚡ ACENTO ON — azul eléctrico de marca.
     REGLA DE ORO: vive ÚNICAMENTE en (a) el símbolo .brand-on
     y (b) el instante de activación (.btn-on.active, progreso
     completado). NUNCA en links, chips, badges, headers ni
     fondos. Es el único punto de energía de un sistema calmo. */
  --color-on:            #1E88F5;
  --color-on-soft:       #EAF5FF;

  /* Azul calmo — el azul de uso general de la interfaz
     (links, selección, focus, info). Desaturado, contemplativo. */
  --color-accent:        #5B7E9F;
  --color-accent-soft:   #E7EEF4;

  /* Semánticos — UNA sola variante de cada uno */
  --color-success:       #5F8A68;   /* sage terapéutico */
  --color-success-soft:  #DFEBDF;
  --color-danger:        #B0524A;   /* terracota apagado, no rojo eléctrico */
  --color-danger-soft:   #F7E6E3;
  --color-warning:       #B98935;   /* ámbar roto */
  --color-warning-soft:  #F2E6CF;

  /* ── 4 TONOS CLÍNICOS (por función, no por diagnóstico) ──
     Única fuente de color categórico en todo el sistema.
     Se aplican con sutileza: borde fino o fondo soft,
     nunca como chip saturado. */
  --tone-emotion:        #F1D1C8;   /* procesamiento emocional */
  --tone-emotion-deep:   #B96D61;
  --tone-reflection:     #DDE8EA;   /* reflexión / distanciamiento */
  --tone-reflection-deep:#587278;
  --tone-action:         #DFEBDF;   /* conductual / activación */
  --tone-action-deep:    #5F8A68;
  --tone-learning:       #F2E6CF;   /* psicoeducación / claridad */
  --tone-learning-deep:  #B98935;

  /* Identidad semántica de Brújula Emocional.
     Estos tokens están limitados a superficies con data-emotion-family.
     El tono profundo mantiene contraste sobre blanco y sobre su fondo soft. */
  --emotion-family-anger:          #914B42;
  --emotion-family-anger-soft:     #F8E8E4;
  --emotion-family-fear:           #466A8C;
  --emotion-family-fear-soft:      #E8F0F7;
  --emotion-family-sadness:        #685A8E;
  --emotion-family-sadness-soft:   #EEEAF6;
  --emotion-family-rejection:      #526960;
  --emotion-family-rejection-soft: #E8EFEC;
  --emotion-family-joy:            #80601D;
  --emotion-family-joy-soft:       #F8EFCF;
  --emotion-family-social:         #3E7378;
  --emotion-family-social-soft:    #E4F1F1;
  --emotion-family-mixed:          #596274;
  --emotion-family-mixed-soft:     #EEF0F3;

  /* ════════════════════════════════════════
     2. TIPOGRAFÍA
     ════════════════════════════════════════ */
  --font-panel:    'Inter', system-ui, sans-serif;
  --font-patient:  'Nunito', system-ui, sans-serif;
  --font-display:  'Fraunces', Georgia, serif;  /* solo títulos grandes app paciente */

  /* Escala única (no usar otros tamaños) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-chat: 15px;   /* texto conversacional app paciente (burbujas + input) */
  --input-chat-max-h: 148px;  /* ~6 líneas de --text-chat con padding; encima activa scroll */
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-display: 34px;   /* títulos Fraunces */

  /* Pesos permitidos: 400, 500, 600, 700 (800 solo Nunito brand) */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --leading-tight:  1.25;
  --leading-normal: 1.55;

  /* ════════════════════════════════════════
     3. GEOMETRÍA Y ESPACIO
     ════════════════════════════════════════ */
  --radius-xs:   8px;     /* inputs, chips */
  --radius-sm:   12px;    /* botones, elementos menores */
  --radius-md:   16px;    /* cards, modales — EL radio del sistema */
  --radius-lg:   22px;    /* burbujas de chat, app shell */
  --radius-full: 999px;

  /* Escala de espaciado (múltiplos de 4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;    /* respiración estándar interna de cards */
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-breathing: var(--space-5);

  /* ════════════════════════════════════════
     4. ELEVACIÓN — 4 niveles, nada más
     ════════════════════════════════════════ */
  --shadow-1: 0 1px 2px rgba(16,33,61,.04), 0 4px 14px rgba(16,33,61,.05);  /* reposo */
  --shadow-2: 0 2px 4px rgba(16,33,61,.05), 0 10px 28px rgba(16,33,61,.08); /* hover / flotante */
  --shadow-3: 0 18px 44px rgba(16,33,61,.10);                               /* shell, dropdown */
  --shadow-modal: 0 24px 64px rgba(16,33,61,.22);
  --shadow-focus: 0 0 0 4px rgba(91,126,159,.18);    /* anillo de foco (azul calmo) */
  --shadow-on: 0 0 14px rgba(30,136,245,.30);        /* halo del símbolo ON */

  /* ════════════════════════════════════════
     5. MOVIMIENTO — breve y funcional
     ════════════════════════════════════════ */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   140ms;
  --dur-normal: 220ms;
  --dur-slow:   320ms;

  /* ════════════════════════════════════════
     ALIASES LEGACY (retrocompatibilidad)
     ════════════════════════════════════════ */
  --font-main:      var(--font-panel);
  --primary:        var(--color-primary);
  --green-on:       var(--color-success);
  --green-on-soft:  var(--color-success-soft);
  --bg:             var(--color-bg);
  --card:           var(--color-surface);
  --text-main:      var(--color-text);
  --text-soft:      var(--color-text-soft);
  --border:         var(--color-border);
  --surface:        var(--color-surface);
  --surface-alt:    var(--color-surface-warm);
  --color-emotion:       var(--tone-emotion-deep);
  --color-emotion-soft:  var(--tone-emotion);
  --color-info:          var(--color-accent-soft);
  --color-info-border:   var(--color-accent);
  --shadow-soft:    var(--shadow-1);
  --shadow-card:    var(--shadow-2);
  --transition-fast:   var(--dur-fast) ease-out;
  --transition-normal: var(--dur-normal) ease-out;
  --radius-chat:    var(--radius-lg);
}

/* Brújula: un mismo family_id siempre resuelve al mismo par accent/soft. */
[data-emotion-family="ira_limite"] {
  --emotion-family-accent: var(--emotion-family-anger);
  --emotion-family-surface: var(--emotion-family-anger-soft);
}
[data-emotion-family="miedo_amenaza"] {
  --emotion-family-accent: var(--emotion-family-fear);
  --emotion-family-surface: var(--emotion-family-fear-soft);
}
[data-emotion-family="tristeza_perdida"] {
  --emotion-family-accent: var(--emotion-family-sadness);
  --emotion-family-surface: var(--emotion-family-sadness-soft);
}
[data-emotion-family="rechazo_distancia"] {
  --emotion-family-accent: var(--emotion-family-rejection);
  --emotion-family-surface: var(--emotion-family-rejection-soft);
}
[data-emotion-family="alegria_bienestar"] {
  --emotion-family-accent: var(--emotion-family-joy);
  --emotion-family-surface: var(--emotion-family-joy-soft);
}
[data-emotion-family="social_vinculo_mirada"] {
  --emotion-family-accent: var(--emotion-family-social);
  --emotion-family-surface: var(--emotion-family-social-soft);
}
[data-emotion-family="no_estoy_seguro_mezcla"] {
  --emotion-family-accent: var(--emotion-family-mixed);
  --emotion-family-surface: var(--emotion-family-mixed-soft);
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-panel);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

body.app-paciente { font-family: var(--font-patient); }

h1, h2, h3 { line-height: var(--leading-tight); margin: 0 0 var(--space-3); }
h1 { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
h2 { font-size: var(--text-xl);  font-weight: var(--weight-semibold); }
h3 { font-size: var(--text-lg);  font-weight: var(--weight-semibold); }

/* Título editorial (app paciente): saludo y títulos de tarea */
.display-title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 550;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

a { color: var(--color-accent); }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

/* ============================================================
   ÍCONOS — Lucide, nunca emojis
   Uso: <i data-lucide="calendar"></i> + lucide.createIcons()
   ============================================================ */
.icon, [data-lucide] {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
  color: currentColor;
  flex-shrink: 0;
}
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }

/* Contenedor de ícono con tono clínico (ej. tarjetas de tarea) */
.icon-tile {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-surface-warm);
  border: 1px solid var(--color-border);
  color: var(--color-text-soft);
}
.icon-tile.tone-emotion    { background: var(--tone-emotion);    color: var(--tone-emotion-deep);    border-color: transparent; }
.icon-tile.tone-reflection { background: var(--tone-reflection); color: var(--tone-reflection-deep); border-color: transparent; }
.icon-tile.tone-action     { background: var(--tone-action);     color: var(--tone-action-deep);     border-color: transparent; }
.icon-tile.tone-learning   { background: var(--tone-learning);   color: var(--tone-learning-deep);   border-color: transparent; }

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: 10px 18px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: transform var(--dur-fast) ease-out,
              background var(--dur-fast) ease-out,
              box-shadow var(--dur-fast) ease-out,
              border-color var(--dur-fast) ease-out;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1.5px solid var(--color-border-strong);
}
.btn-secondary:hover { border-color: var(--color-primary); }

.btn-ghost { background: transparent; color: var(--color-text-soft); }
.btn-ghost:hover { background: var(--color-primary-soft); color: var(--color-text); }

.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger-ghost { background: var(--color-danger-soft); color: var(--color-danger); }

/* Botón ON — el único lugar (junto a .brand-on) donde vive el azul eléctrico */
.btn-on {
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  display: grid; place-items: center;
  border: none; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-premium),
              background var(--dur-normal) var(--ease-premium),
              box-shadow var(--dur-normal) var(--ease-premium);
}
.btn-on.active {
  background: var(--color-on);
  box-shadow: var(--shadow-on);
}
.btn-on:active { transform: scale(1.05); }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: var(--space-5);
}
.card-interactive { cursor: pointer;
  transition: transform var(--dur-fast) ease-out, box-shadow var(--dur-fast) ease-out; }
.card-interactive:hover  { box-shadow: var(--shadow-2); }
.card-interactive:active { transform: scale(.99); }
.card-compact { padding: var(--space-4); }

/* Acento clínico de una card: borde izquierdo fino, nunca fondo saturado */
.card.tone-emotion    { border-left: 3px solid var(--tone-emotion-deep); }
.card.tone-reflection { border-left: 3px solid var(--tone-reflection-deep); }
.card.tone-action     { border-left: 3px solid var(--tone-action-deep); }
.card.tone-learning   { border-left: 3px solid var(--tone-learning-deep); }

/* ============================================================
   FORMULARIOS
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.field label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.input, .textarea, select.input {
  width: 100%;
  padding: 10px 14px;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  transition: border-color var(--dur-fast) ease-out, box-shadow var(--dur-fast) ease-out;
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-faint); }
.input:focus, .textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--shadow-focus); }

/* ============================================================
   BADGES Y CHIPS
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.badge-success { background: var(--color-success-soft); color: var(--color-success); }
.badge-danger  { background: var(--color-danger-soft);  color: var(--color-danger); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); }

/* ============================================================
   MODAL — definición única para todo el sistema
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(16,33,61,.40);
  display: grid; place-items: center;
  z-index: 2000;
}
.modal {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  padding: var(--space-6);
  width: min(520px, calc(100vw - 32px));
  animation: modalIn var(--dur-normal) var(--ease-premium);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   TOAST — con entrada/salida animada
   ============================================================ */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  z-index: 3000;
  animation: toastIn var(--dur-normal) var(--ease-premium);
}
.toast-exito { background: var(--color-success); }
.toast-error { background: var(--color-danger); }
.toast.hiding { animation: toastOut var(--dur-normal) ease-in forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toastOut { to   { opacity: 0; transform: translate(-50%, 8px); } }

/* ============================================================
   SKELETON LOADER — reemplaza los "Cargando..."
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg,
    rgba(16,33,61,.06) 25%, rgba(16,33,61,.10) 50%, rgba(16,33,61,.06) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-xs);
  animation: shimmer 1.4s infinite;
  min-height: 14px;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ============================================================
   HEADER Y MARCA
   ============================================================ */
header.app-header {
  height: 56px;
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center;
  gap: var(--space-5);
  padding: 0 var(--space-5);
}

/* Logo Quirón — la "o" es el símbolo de encendido.
   Usar SIEMPRE este markup en TODAS las pantallas (incluida login):
   <span class="brand-logo">Quir<span class="brand-on">o</span>n</span> */
.brand-logo {
  font-family: var(--font-patient);
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
  display: inline-flex; align-items: center;
  letter-spacing: .01em;
}
.brand-on {
  width: .86em; height: .86em;
  display: inline-block; position: relative;
  margin: 0 .04em;
  border: .13em solid var(--color-on);
  border-top-color: transparent;
  border-radius: 50%;
  color: transparent;
  filter: drop-shadow(0 0 5px rgba(30,136,245,.34));
}
.brand-on::before {
  content: "";
  position: absolute; left: 50%; top: -.19em;
  width: .16em; height: .50em;
  border-radius: var(--radius-full);
  background: var(--color-on);
  transform: translateX(-50%);
}
/* Variante para fondos claros (login, app paciente) */
.brand-logo.on-light { color: var(--color-text); }
.brand-tagline {
  font-size: 0.55rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
.brand-tagline.on-light { color: var(--color-text-soft); }

.nav-link {
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: 7px 14px;
  border-radius: var(--radius-xs);
  transition: background var(--dur-fast) ease-out, color var(--dur-fast) ease-out;
}
.nav-link:hover  { color: #fff; background: rgba(255,255,255,.08); }
.nav-link.active { color: #fff; background: rgba(255,255,255,.14); }

/* ============================================================
   APP DEL PACIENTE — shell y piezas clave
   ============================================================ */
.mobile-shell {
  height: 100dvh;
  max-width: 430px;
  margin: 0 auto;
  background: var(--color-bg);
  box-shadow: var(--shadow-3);
  display: flex; flex-direction: column;
}

.task-header {
  position: sticky; top: 0;
  background: rgba(251,248,241,.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 100;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.step-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  animation: cardIn var(--dur-normal) var(--ease-premium);
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   VARIANTES SEMÁNTICAS DE BOTÓN
   ============================================================ */
.btn-success {
  background: var(--color-success);
  color: #fff;
}
.btn-success:hover {
  filter: brightness(1.06);
}