/* ============================================================================
   tokens.css — fuente única de tokens de diseño de MarkTrack
   ----------------------------------------------------------------------------
   Se carga ANTES que cualquier otra hoja en todas las plantillas. Las hojas de
   página no deben redefinir estos nombres en su :root (antes cada una tenía
   su propia copia con valores distintos: --glass-bg .04 vs .055, --t2 .65 vs
   .72, --primary indefinido en home y #3B82F6 en los editores).

   Tema: el claro de xplagiax_appcli2. MarkTrack era "dark glass" (degradado
   oscuro, barra casi negra, texto blanco); appcli2 usa el degradado claro, la
   barra blanca translúcida con iconos azules y modales blancos con tinta azul
   marino. Origen de los valores:
   · Marca, señales de integridad, movimiento, fondo y barra: appcli2,
     static/css/app_style_1.css (:root, body y .nav-rail).
   · Tinta, bordes y superficies blancas: appcli2, static/css/settings_modal.css
     (--sm-t1 #1a2240, --sm-t2 #4b5a7a, --sm-border #e4e9f2, --sm-bg #f4f7fc).
   · Tipografía: appcli2 user_base.html (Work Sans; Inter 600 en la marca).
   El texto que va sobre glass —fondo de luminancia media, no blanco— usa la
   misma tinta azul marino un punto más oscura que en appcli2 para no bajar de
   4,5:1; dentro de las superficies blancas recupera los valores de appcli2.
   ========================================================================== */

:root {
  /* ── Marca (appcli2) ─────────────────────────────────────────────────── */
  --brand-primary:        #1621ff;
  --brand-gradient-start: #1621ff;
  --brand-gradient-end:   #007AFF;
  --brand-gradient:       linear-gradient(135deg, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 100%);
  --brand-gradient-hover: linear-gradient(135deg, #2a34ff 0%, #1a8bff 100%);
  --brand-link:           #2c36ff;
  /* Enlaces y acentos de TEXTO: azul 800. Sobre glass (luminancia ~.4–.6)
     #1621ff o #007AFF bajan de 3:1; #1e40af se mantiene por encima de 4,5:1.
     El degradado de marca se reserva para superficies con texto blanco
     encima (7,8:1 sobre #1621ff). */
  --brand-text:           #1e40af;
  --brand-glow:           rgba(22, 33, 255, .35);
  --brand-ring:           rgba(0, 122, 255, .45);

  /* Alias que usan los componentes compartidos con appcli2
     (pages/miniprogress.css) y los editores (.btn-apply-card). */
  --primary:              var(--brand-primary);

  /* ── Señales de integridad (appcli2) ─────────────────────────────────── */
  --ai-color:             #f43f5e;
  --human-color:          #10b981;
  --neutral:              #64748b;
  /* Las mismas señales como TEXTO sobre claro (tono 800). */
  --ok-text:              #065f46;
  --warn-text:            #78350f;
  --err-text:             #991b1b;
  --violet-text:          #5b21b6;

  /* ── Fondo y barra de navegación (appcli2, app_style_1.css: body y
     .nav-rail) ────────────────────────────────────────────────────────── */
  --app-bg:               radial-gradient(circle at 12% 12%, #7a96b2 0%, #bad2f7 40%, #8789a0 80%, #ecebea 100%);
  --nav:                  #ffffffa2;
  --nav-ico:              rgb(18, 70, 211);
  --nav-ico-hover:        #60a5fa;
  --nav-ico-active:       #1d4ed8;
  --nav-tip-bg:           rgba(0, 102, 255, 0.65);

  /* ── Tipografía (appcli2) ────────────────────────────────────────────── */
  --font-ui:              'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-brand:           'Inter', var(--font-ui);

  /* ── Texto (tinta azul marino de appcli2) ────────────────────────────── */
  --t1:                   #1a2240;
  --t2:                   #2f3b5c;
  --t3:                   #3d4a68;
  --t4:                   rgba(26, 34, 64, .72);  /* rótulos menores, placeholder, deshabilitado */

  /* ── Glass claro ─────────────────────────────────────────────────────── */
  --glass-bg:             rgba(255, 255, 255, .28);
  --glass-bdr:            rgba(255, 255, 255, .55);
  --glass-hi:             rgba(255, 255, 255, .80);
  /* Rellenos y líneas de componentes, de más sutil a más marcado. Sobre
     glass son blancos; dentro de las superficies blancas (abajo) pasan a
     tinta, porque un relleno blanco no se ve sobre blanco. */
  --fill-1:               rgba(255, 255, 255, .16);
  --fill-2:               rgba(255, 255, 255, .26);
  --fill-3:               rgba(255, 255, 255, .38);
  --fill-4:               rgba(255, 255, 255, .52);
  --fill-5:               rgba(255, 255, 255, .68);
  --line-1:               rgba(255, 255, 255, .30);
  --line-2:               rgba(255, 255, 255, .45);
  --line-3:               rgba(255, 255, 255, .60);
  --line-4:               rgba(255, 255, 255, .78);
  --well:                 rgba(26, 34, 64, .08);   /* pistas de barras de progreso, huecos */
  --scroll-thumb:         rgba(26, 34, 64, .18);
  --scroll-thumb-hover:   rgba(26, 34, 64, .32);
  --accent:               rgba(80, 200, 140, .18);
  --accent-bdr:           rgba(80, 200, 140, .45);

  /* ── Superficies opacas: modales, menús y popovers (blancos en appcli2) ─ */
  --surface:              #ffffff;
  --surface-2:            #f4f7fc;
  --surface-bdr:          #e4e9f2;
  --surface-shadow:       0 24px 64px rgba(6, 76, 219, .12), 0 4px 16px rgba(26, 34, 64, .08);

  /* ── Movimiento (appcli2) ────────────────────────────────────────────── */
  --es:                   cubic-bezier(0.4, 0, 0.2, 1);      /* estándar */
  --ee:                   cubic-bezier(0.34, 1.56, 0.64, 1); /* con rebote */
  --motion-fast:          0.2s;
  --motion-normal:        0.3s;
  --motion-slow:          0.5s;

  /* ── Foco visible ────────────────────────────────────────────────────── */
  --focus-ring:           0 0 0 3px var(--brand-ring);
}

/* Superficies blancas opacas. Cada componente pinta su fondo con
   var(--surface); aquí solo se ajustan los tokens que heredan sus hijos.
   .mt-surface marca las cajas de modal con estilos en línea (sin clase
   propia) de las plantillas.
   :where() deja la especificidad en 0, así que cualquier regla del
   componente sigue mandando. */
:where(.modal-box, .wv-modal, .wv-del-modal, .folder-modal-box, .cp-modal, .upload-panel,
       .offcanvas, .plus-dropdown, .ctx-menu, .wv-dd-menu, .mt-modal-content, #hwCardMenu,
       #extReqModal, .pi-help-modal-card, .modal-content, .ai-modal, .upgrade-modal, .logout-modal-panel,
       .registration-modal, .context-menu-glass, .user-dropdown-menu, .ql-picker-options,
       .toast, .annotation-popover, .mention-dropdown, .review-notif-dropdown,
       .invite-notif-dropdown, .editor-find-bar, .cd-modal, .ks-modal, .qbt-toolbar,
       .qbt-dropdown-menu, .progress-tooltip, .cache-banner, .notif-dropdown,
       select option, .mt-surface) {
  --t2:          #4b5a7a;
  --t3:          #5b6886;
  --t4:          #66738f;
  --fill-1:      rgba(26, 34, 64, .025);
  --fill-2:      rgba(26, 34, 64, .04);
  --fill-3:      rgba(26, 34, 64, .06);
  --fill-4:      rgba(26, 34, 64, .085);
  --fill-5:      rgba(26, 34, 64, .12);
  --line-1:      rgba(26, 34, 64, .07);
  --line-2:      rgba(26, 34, 64, .10);
  --line-3:      rgba(26, 34, 64, .14);
  --line-4:      rgba(26, 34, 64, .22);
  --well:        rgba(26, 34, 64, .06);
  --glass-bg:    var(--surface-2);
  --glass-bdr:   var(--surface-bdr);
  --glass-hi:    var(--surface);
  color: var(--t1);
}

/* Foco de teclado visible y coherente en controles que no definen el suyo.
   :focus-visible no se activa con el ratón, así que no altera el clic. */
:where(a, button, [role="button"], input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-gradient-end);
  outline-offset: 2px;
}

/* Preferencia de movimiento reducido del sistema: se respetaba solo en el
   loader de bienvenida. Anula animaciones y transiciones en toda la app sin
   ocultar estados (los elementos llegan a su estado final al instante). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}