/* ============================================================
   TECPORT RAG — TOKENS DE DISEÑO (capa portable a móvil)
   ------------------------------------------------------------
   Este archivo es la ÚNICA fuente de verdad de colores, radios,
   tipografías, sombras y zonas seguras. En la fase Android/iOS
   estos tokens se traducen 1:1 a un theme nativo o de Capacitor:
   nada de style.css debería definir colores en crudo.
   ============================================================ */

:root {
  /* ---------- anclas de marca (independientes del tema) ---------- */
  --navy:        #143a5e;
  --navy-deep:   #0f2c47;
  --navy-700:    #1d4d77;
  --orange:      #ED7D22;
  --orange-soft: #f6a25a;
  --orange-deep: #d96d16;
  --blue:        #1f6fc7;
  --blue-bright: #3d8be0;

  /* ---------- radios ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* ---------- tipografías ---------- */
  --ui:    'Hanken Grotesk', system-ui, sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;

  /* ---------- sombras ---------- */
  --shadow-sm: 0 1px 2px rgba(15,28,45,.06), 0 1px 3px rgba(15,28,45,.05);
  --shadow-md: 0 4px 14px rgba(15,28,45,.10), 0 2px 6px rgba(15,28,45,.06);
  --shadow-lg: 0 18px 50px rgba(15,28,45,.18), 0 6px 18px rgba(15,28,45,.10);

  --ease: cubic-bezier(.4,.1,.2,1);

  /* ---------- zonas seguras (notch / barra de gestos / Dynamic Island) ----------
     Requiere viewport-fit=cover en el meta viewport. En navegador de
     escritorio valen 0px, así que son inofensivas fuera del móvil. */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);

  /* Objetivo táctil mínimo recomendado (Android Material / iOS HIG) */
  --tap: 44px;

  /* ---------- apilamiento (única fuente de verdad de z-index de capas) ----------
     Dos niveles y solo dos: las VISTAS de sección (hub→agente, admin, troubleshooting,
     "próximamente") son mutuamente excluyentes y comparten --z-view; el hub queda por
     debajo y se oculta cuando hay una vista activa. Los DIÁLOGOS legítimos (selector de
     etiquetas, confirmaciones) van en --z-dialog, siempre por encima. Prohibido fijar
     z-index en línea: si algo necesita apilarse, usa uno de estos dos tokens. */
  --z-view:   1000;
  --z-dialog: 2000;
  /* Control de tema flotante global: por encima de todas las capas (vistas y diálogos). */
  --z-float:  3000;

  /* ---------- primitiva de icon-button del sidebar (independiente del tema) ----------
     Una sola fuente para área de impacto, radio, glifo y ritmo vertical. La usan
     el logo (colapsado), el toggle de colapso, "Nueva conversación", "Documentos"
     y el avatar, de modo que todos compartan geometría idéntica. */
  --sb-btn-size:   40px;   /* área de impacto uniforme */
  --sb-btn-radius: 10px;   /* radio uniforme */
  --sb-btn-icon:   20px;   /* tamaño del glifo interior */
  --sb-gap:        8px;    /* ritmo vertical único entre items del grupo superior */
}

/* ================= TEMA CLARO (por defecto) ================= */
:root, [data-theme="light"] {
  --bg:         #eef1f5;
  --bg-grad:    radial-gradient(1200px 600px at 80% -10%, #e4ebf3 0%, #eef1f5 55%);
  --app:        #f7f9fb;
  --surface:    #ffffff;
  --surface-2:  #f3f6f9;
  --surface-3:  #eaeff4;
  /* sidebar (tema claro): superficies CLARAS como el hub/main; navy/naranja de acento */
  --sidebar:    var(--surface);
  --sidebar-2:  var(--surface);
  --sidebar-tx: var(--text);
  --sidebar-tx-dim: var(--text-3);
  --sidebar-active: var(--surface-3);
  --sidebar-border: var(--border);
  --sidebar-line:   var(--border);
  --sidebar-soft:   var(--surface-2);
  /* superficies de marca dentro del sidebar (tokenizadas: style.css ya no las fija en crudo) */
  --sidebar-cta:    linear-gradient(135deg, var(--navy-700) 0%, var(--navy) 100%);
  --sidebar-card:   var(--surface-2);
  /* DEPRECADO: el avatar usa ahora --sb-avatar-bg (navy de marca). Se mantiene
     apuntando a la paleta para que cualquier uso residual no vuelva al naranja. */
  --sidebar-avatar: var(--user-grad);
  /* placa del logo: transparente en claro (logo navy sobre sidebar blanco se ve solo) */
  --sidebar-plaque: transparent;
  /* estados e identidad de los icon-buttons del sidebar (claro) */
  --sb-hover:     var(--sidebar-soft);     /* tinte de fondo en hover */
  --sb-active:    var(--sidebar-active);   /* resaltado persistente del item activo */
  --sb-focus:     rgba(31,111,199,.55);    /* anillo de foco-visible (azul de marca) */
  --sb-divider:   var(--sidebar-line);     /* divisor 1px de baja opacidad */
  --sb-avatar-bg: var(--user-grad);        /* avatar dentro de la paleta (navy de marca, no naranja) */
  --sb-tip-bg:    var(--navy-deep);        /* fondo del tooltip en modo colapsado */
  --sb-tip-tx:    #ffffff;

  --text:       #14253b;
  --text-2:     #45586e;
  --text-3:     #6f8197;
  --text-faint: #97a6b8;

  --border:     #e2e8ef;
  --border-2:   #d2dbe5;
  --hairline:   rgba(20,37,59,.08);

  --primary:    var(--navy);
  --primary-tx: #ffffff;
  --accent:     var(--orange);
  --link:       var(--blue);

  --user-grad:  linear-gradient(135deg, #1d4d77 0%, #143a5e 100%);
  --user-tx:    #ffffff;

  --code-bg:    #eef2f6;
  --code-tx:    #1d4d77;
  --code-bd:    #dce4ec;
  --cite-bg:    rgba(31,111,199,.08);
  --cite-bd:    rgba(31,111,199,.2);
  --cite-hover: rgba(31,111,199,.16);
  --cite-tx:    #577490;
  --cite-tx-strong: #2c5f8a;

  --accent-solid:    var(--navy);
  --accent-solid-tx: #ffffff;

  --paper:      #fbfaf7;
  --paper-2:    #f4f1ea;
  --paper-line: rgba(20,37,59,.07);
  --paper-tx:   #20303f;
  --spine:      linear-gradient(90deg, rgba(20,37,59,0) 0%, rgba(20,37,59,.05) 42%, rgba(20,37,59,.08) 50%, rgba(20,37,59,.05) 58%, rgba(20,37,59,0) 100%);
  --watermark:  .05;
  --heading:    var(--navy);

  /* ---------- estados semánticos (éxito / peligro / aviso) ---------- */
  --ok:         #1b8f57;
  --ok-bg:      rgba(27,143,87,.1);
  --ok-bd:      rgba(27,143,87,.3);

  --danger:        #c0392b;
  --danger-bg:     rgba(192,57,43,.08);
  --danger-bg-hov: rgba(192,57,43,.16);
  --danger-bd:     rgba(192,57,43,.35);
  --danger-solid:  #c0392b;
  --danger-solid-hov: #a93226;

  --warn:       #a05a14;
  --warn-bg:    rgba(237,125,34,.1);
  --warn-bd:    rgba(237,125,34,.35);

  --reader-bar:    var(--navy);
  --reader-bar-tx: #ffffff;
  --reader-close-bg: #ffffff;
  --reader-close-tx: var(--navy);

  --toggle-track: var(--surface-3);
  --toggle-knob:  #ffffff;
  --toggle-icon:  var(--orange);

  /* ---------- botones de acción homogeneizados (default / primary / warn; danger reusa --danger-*) ---------- */
  --btn-tx:       var(--text-2);
  --btn-bg:       var(--surface-2);
  --btn-bd:       var(--border-2);
  --btn-bg-hov:   var(--surface-3);

  --btn-primary-tx:     var(--primary);
  --btn-primary-bg:     rgba(20,58,94,.08);
  --btn-primary-bd:     rgba(20,58,94,.30);
  --btn-primary-bg-hov: rgba(20,58,94,.15);

  --btn-warn-tx:     var(--warn);
  --btn-warn-bg:     var(--warn-bg);
  --btn-warn-bd:     var(--warn-bd);
  --btn-warn-bg-hov: rgba(237,125,34,.18);
}

/* ================= TEMA OSCURO · zinc minimal ================= */
[data-theme="dark"] {
  --bg:         #09090b;
  --bg-grad:    none;
  --app:        #0d0d10;
  --surface:    #18181b;
  --surface-2:  #27272a;
  --surface-3:  #3f3f46;
  /* sidebar ligeramente diferenciado del fondo + borde visible */
  --sidebar:    #121214;
  --sidebar-2:  #0d0d10;
  --sidebar-tx: #f4f4f5;
  --sidebar-tx-dim: #a1a1aa;
  --sidebar-active: #27272a;
  --sidebar-border: #27272a;
  --sidebar-line:   rgba(255,255,255,.1);
  --sidebar-soft:   rgba(255,255,255,.05);
  --sidebar-cta:    linear-gradient(135deg, #3f3f46 0%, #27272a 100%);
  --sidebar-card:   rgba(255,255,255,.04);
  --sidebar-avatar: var(--user-grad); /* DEPRECADO: ver --sb-avatar-bg */
  /* placa del logo: blanca en oscuro (el logo navy necesita fondo claro para verse) */
  --sidebar-plaque: #fff;
  /* estados e identidad de los icon-buttons del sidebar (oscuro) */
  --sb-hover:     var(--sidebar-soft);
  --sb-active:    var(--sidebar-active);
  --sb-focus:     var(--blue-bright);
  --sb-divider:   var(--sidebar-line);
  --sb-avatar-bg: var(--user-grad);
  --sb-tip-bg:    #27272a;
  --sb-tip-tx:    #f4f4f5;

  --text:       #f4f4f5;
  --text-2:     #a1a1aa;
  --text-3:     #a1a1aa;
  --text-faint: #71717a;

  --border:     #27272a;
  --border-2:   #3f3f46;
  --hairline:   #27272a;

  --primary:    #f4f4f5;
  --primary-tx: #09090b;
  --accent:     var(--orange);
  --link:       #6cb0f5;

  --user-grad:  linear-gradient(135deg, #27272a 0%, #18181b 100%);
  --user-tx:    #f4f4f5;

  --code-bg:    #27272a;
  --code-tx:    #e4e4e7;
  --code-bd:    #3f3f46;
  --cite-bg:    #27272a;
  --cite-bd:    #3f3f46;
  --cite-hover: #3f3f46;
  --cite-tx:    #a1a1aa;
  --cite-tx-strong: #e4e4e7;

  --paper:      #121214;
  --paper-2:    #161618;
  --paper-line: rgba(255,255,255,.06);
  --paper-tx:   #f4f4f5;
  --spine:      linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 44%, rgba(0,0,0,.34) 50%, rgba(0,0,0,.22) 56%, rgba(0,0,0,0) 100%);
  --watermark:  .05;
  --heading:    #f4f4f5;

  --accent-solid:    #f4f4f5;
  --accent-solid-tx: #09090b;

  /* ---------- estados semánticos (variantes legibles en oscuro) ---------- */
  --ok:         #4cd394;
  --ok-bg:      rgba(46,167,113,.15);
  --ok-bd:      rgba(46,167,113,.3);

  --danger:        #e57373;
  --danger-bg:     rgba(229,115,115,.1);
  --danger-bg-hov: rgba(229,115,115,.2);
  --danger-bd:     rgba(229,115,115,.35);
  --danger-solid:  #c0392b;
  --danger-solid-hov: #a93226;

  --warn:       #f0a35e;
  --warn-bg:    rgba(237,125,34,.12);
  --warn-bd:    rgba(237,125,34,.35);

  --reader-bar:    #18181b;
  --reader-bar-tx: #f4f4f5;
  --reader-close-bg: #3f3f46;
  --reader-close-tx: #f4f4f5;

  --toggle-track: #27272a;
  --toggle-knob:  #52525b;
  --toggle-icon:  #ffd27a;

  /* ---------- botones de acción homogeneizados ---------- */
  --btn-tx:       var(--text-2);
  --btn-bg:       var(--surface-2);
  --btn-bd:       var(--border-2);
  --btn-bg-hov:   var(--surface-3);

  --btn-primary-tx:     var(--blue-bright);
  --btn-primary-bg:     rgba(61,139,224,.12);
  --btn-primary-bd:     rgba(61,139,224,.40);
  --btn-primary-bg-hov: rgba(61,139,224,.18);

  --btn-warn-tx:     var(--warn);
  --btn-warn-bg:     var(--warn-bg);
  --btn-warn-bd:     var(--warn-bd);
  --btn-warn-bg-hov: rgba(237,125,34,.20);
}