/* ════════════════════════════════════════════════════════════════════
   KONOOS OS · tokens.css
   Foundations · refined for the bold iteration
   ════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark light;

  /* Brand */
  --k-brand-green:      #00CC22;
  --k-brand-green-deep: #00B050;
  --k-brand-blue:       #0081E2;
  --k-grad-h: linear-gradient(90deg,  #00CC22 0%, #00B050 54%, #0081E2 100%);
  --k-grad-v: linear-gradient(180deg, #00CC22 0%, #00B050 54%, #0081E2 100%);
  --k-grad-r: radial-gradient(circle at 30% 30%, #00CC22 0%, #00B050 50%, #0081E2 100%);
  --k-grad-soft: linear-gradient(135deg, rgba(0,204,34,0.16), rgba(0,129,226,0.16));

  /* Dark chrome */
  --k-c-bg-0:    #0A0A0B;
  --k-c-bg-1:    #121214;
  --k-c-bg-2:    #1A1A1D;
  --k-c-bg-3:    #222226;
  --k-c-bg-4:    #2A2A2F;
  --k-c-border:        rgba(255,255,255,0.07);
  --k-c-border-strong: rgba(255,255,255,0.14);
  --k-c-border-muted:  rgba(255,255,255,0.04);
  --k-c-fg:        #F2F2F4;
  --k-c-fg-muted:  #B5B5BB;
  --k-c-fg-subtle: #85858C;
  --k-c-fg-dim:    #888892;  /* WCAG AA ≥4.5:1 sobre --k-c-bg-1, -2 y -3 (5.33 / 4.95 / 4.52): timestamps, subs y pistas de las capas */
  --k-c-fg-ghost:  #3A3A40;

  /* Light workspace */
  --k-w-bg-0:    #F7F8FA;
  --k-w-bg-1:    #FFFFFF;
  --k-w-bg-2:    #F1F3F5;
  --k-w-bg-3:    #E8EBEE;
  --k-w-border:        rgba(15,23,42,0.09);
  --k-w-border-strong: rgba(15,23,42,0.18);
  --k-w-border-muted:  rgba(15,23,42,0.05);
  --k-w-fg:        #0A0A0B;
  --k-w-fg-muted:  #3A3A40;
  --k-w-fg-subtle: #5A5A62;
  --k-w-fg-dim:    #85858C;

  /* Status colors */
  --k-success: #00B050; --k-success-fg: #3DDB55; --k-success-bg: rgba(0,204,34,.12);
  --k-warning: #FFB020; --k-warning-fg: #FFC75A; --k-warning-bg: rgba(255,176,32,.12);
  --k-danger:  #FF4757; --k-danger-fg:  #FF6B7A; --k-danger-bg:  rgba(255,71,87,.12);
  --k-info:    #0081E2; --k-info-fg:    #3DA0EE; --k-info-bg:    rgba(0,129,226,.12);
  --k-purple:  #8B5CF6; --k-purple-fg:  #A78BFA; --k-purple-bg:  rgba(139,92,246,.12);

  /* Paleta de oficinas (--sys-*): color de identidad de cada system, no del chrome.
     Los mismos nombres y valores viven en legal/, sitios/arbentor y las plantillas
     SEC de MO, y los emiten services/data (rows.php) y el IDE de BO en línea. */
  --sys-back:  #FF8C42;
  --sys-mid:   #5A8AC9;
  --sys-front: #E26A9A;
  --sys-org:   #9B7FE0;
  --sys-loom:  #3FB950;
  --sys-builder: #17B0C4;

  /* Type */
  --k-font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --k-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --k-fs-micro: 10px;
  --k-fs-label: 11px;
  --k-fs-meta:  12px;
  --k-fs-body:  13px;
  --k-fs-h3:    15px;
  --k-fs-h2:    18px;
  --k-fs-h1:    22px;
  --k-fs-display: 28px;

  --k-lh-tight: 1.25;
  --k-lh-base:  1.5;

  /* Space */
  --k-s-1: 4px;
  --k-s-2: 8px;
  --k-s-3: 12px;
  --k-s-4: 16px;
  --k-s-5: 20px;
  --k-s-6: 24px;
  --k-s-7: 32px;
  --k-s-8: 40px;

  /* Chrome */
  --k-header-h:    44px;
  --k-rail-db-x:   320px;

  --k-h-btn-sm: 26px;
  --k-h-btn:    30px;
  --k-h-btn-lg: 36px;
  --k-h-row:    32px;

  /* Radii */
  --k-r-1: 3px;
  --k-r-2: 5px;
  --k-r-3: 7px;
  --k-r-4: 10px;
  --k-r-5: 14px;
  --k-r-full: 999px;

  /* Elevation */
  --k-elev-1: 0 1px 2px rgba(0,0,0,.3);
  --k-elev-2: 0 2px 8px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04);
  --k-elev-3: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
  --k-elev-4: 0 16px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  --k-elev-w-1: 0 1px 2px rgba(15,23,42,.06);
  --k-elev-w-2: 0 4px 12px rgba(15,23,42,.08), 0 0 0 1px rgba(15,23,42,.04);
  --k-elev-w-3: 0 12px 32px rgba(15,23,42,.12), 0 0 0 1px rgba(15,23,42,.06);

  /* Motion */
  --k-m-fast:   120ms;
  --k-m-base:   220ms;
  --k-m-slow:   420ms;
  --k-ease-std:  cubic-bezier(.4,0,.2,1);
  --k-ease-out:  cubic-bezier(0,0,.2,1);
  --k-ease-spring: cubic-bezier(.5,1.5,.5,1);

  /* Icons */
  --k-ic-xs: 12px;
  --k-ic-sm: 14px;
  --k-ic-md: 16px;
  --k-ic-lg: 18px;

  /* Z */
  --k-z-popover: 40;
  --k-z-tooltip: 50;
  --k-z-overlay: 80;
  --k-z-modal:   100;
  --k-z-tweaks:  130;
  --k-z-banco:   99999;   /* «Comparar modelos» de NOOS: sobre todo el shell, bajo koverlay-host (100000) */

  /* IDE v7 chrome (wires7 §4.9 · exploración 2) — valores del design system del
     mockup (.design/IDE v7/css/tokens.css). No existían en el shell real; los usan
     el menubar (§4.10), las capas de celular (§4.15) y el interior de NOOS (§4.5). */
  --k-stroke:     1px;
  --k-stroke-2:   2px;
  --k-hit:        44px;   /* blanco de toque mínimo (pointer: coarse) · ✕/Volver de capas §4.15 */
  --k-hit-min:    24px;   /* blanco mínimo con mouse (WCAG 2.5.8), en cualquier densidad */
  --k-fs-min-tactil: 12px; /* letra mínima en celular y táctil (4158: nada bajo 12 px) */
  --k-c-hover:    rgba(255,255,255,.06);
  --k-c-active:   rgba(255,255,255,.10);
  --k-brand-glow: 0 0 0 3px rgba(0,176,80,.28);
  --k-emp-max:    260px;  /* ancho máx del nombre de empresa en la menubar */
  --k-usr-max:    200px;  /* ancho máx del chip de usuario */
  --k-drop-w:     340px;  /* ancho base de la caja de búsqueda / desplegables */
  --k-av-lg:      96px;   /* foto y QR grandes de la tarjeta del usuario §4.14 */
  --k-nw-w:       420px;  /* ventana de NOOS flotante §4.5 */
  --k-nw-h:       560px;
  --k-nw-dock-w:  min(400px, 40vw);   /* NOOS acoplada a la izquierda o a la derecha */
  --k-dialog-w:   420px;  /* diálogo centrado del shell (cambios sin guardar §4.4) */
  --k-mapa-w:     920px;  /* Mapa y ramabar §4.6 */
  --k-mapa-col-1: 260px;
  --k-mapa-col-3: 260px;
  --k-ramabar-w:  300px;
  --k-arb-neutra: #8E9A8F;             /* glifo neutro de toda pantalla del Mapa */
  --k-scrim:      rgba(10,10,11,.55);
  /* ── Suelo (wires7-spec §4.7) · valores de .design/IDE v7/css/tokens.css ── */
  --k-suelo-h:     56px;
  --k-itembar-w:   340px;
  --k-gap-xs:      2px;
  --k-gap-sm:      3px;
  --k-eyes-w:      68px;
  --k-eyes-svg-w:  50px;
  --k-eyes-svg-h:  26px;
  --k-ab-w:        68px;
  --k-ab-ic:       24px;
  --k-ab-fs:       12px;
  --k-acerca-w:    320px;
  --k-logo-acerca: 40px;
  --k-ver-pad-x:   6px;
  /* ── Fidelidad a la maqueta · menubar y sus capas ── */
  --k-card-w:     400px;   /* tarjeta del usuario */
  --k-bc-logo:    40px;    /* iniciales de la empresa sin logo, en la tarjeta */
  --k-bc-logo-area: 6400;  /* superficie (px², sin unidad) del logo de la empresa en la tarjeta: tarjeta.js lo normaliza por área */
  --k-bc-logo-h:  72px;    /* alto máximo del logo de la empresa en la tarjeta */
  --k-bc-logo-w:  176px;   /* ancho máximo del logo de la empresa en la tarjeta */
  --k-bc-strip:   4px;     /* franja de marca arriba de la tarjeta */
  --k-qr:         112px;   /* tope de la foto y del QR de la tarjeta (se ajustan al ancho de la tarjeta) */
  --k-hora-w:     64px;    /* columna «qué es» de los resultados de búsqueda */
  --k-led:        8px;     /* LED de estado de Konoos */
  --k-ring-w:     3px;     /* halo del LED */
  --k-est-w:      360px;   /* capa «Estado de Konoos» */
  --k-bar-h:      18px;    /* alto de las barras horarias de la capa «Estado de Konoos» */
  --k-focus:      0 0 0 2px var(--k-info);   /* anillo de foco (maqueta), solo con teclado */
  --k-fs-campo-tactil: 16px; /* campo de texto en celular: iOS amplía la página bajo 16 px */
  /* ── Fidelidad a la maqueta · suelo, iconbar e itembar ── */
  /* ── Fidelidad a la maqueta · Mapa, ramabar, NOOS y Propio ── */
  --k-nw-flot-w:   400px;  /* NOOS flotante como la pinta la maqueta (datos.js S.nw 400×520) */
  --k-nw-flot-h:   520px;
  --k-banco-max-w: 1400px; /* ancho máximo de «Comparar modelos» (noos.js, .k-nw-banco) */
  --k-btn-grad:       linear-gradient(90deg, #00872F 0%, #0068B8 100%);  /* botón principal de la maqueta */
  --k-btn-grad-hover: linear-gradient(90deg, #007A2A 0%, #005CA3 100%);
  --k-btn-fg:         #FFFFFF;
  /* botón de marca .k-button (P-01, brief 4147): primario AA, blanco encima 4,66:1 medido */
  --k-btn-primary-bg:    #00872F;
  --k-btn-primary-hover: #007A2A;
  --k-btn-primary-fg:    #FFFFFF;
  --k-btn-sec-border:    rgba(0,112,42,.45);
  --k-btn-sec-fg:        var(--k-success-ink);
  --k-btn-sec-hover:     rgba(0,176,80,.08);
  --k-btn-danger-hover:  #A81A27;
  --k-ctl-bg-off:        var(--k-w-bg-2);       /* control deshabilitado */
  --k-ctl-fg-off:        var(--k-w-fg-subtle);
  --k-mp-pl-h:     16px;   /* etiqueta de oficina (BO · MO · FO · OO) de cada fila del Mapa, §4.6 */
  --k-mp-crumb-max: 180px; /* un paso de la ruta plegada arriba del Mapa v2 */
  --k-ct-q-w:      112px;  /* buscador en la cabecera de la lista de un contenedor (itembar, X5) */
  --k-ct-q-w-cel:  96px;   /* el mismo buscador en celular, junto a la ✕ de 44 px */
  /* ── Fidelidad a la maqueta · Mi día (El Despacho, §4.12) ── */
  --k-success-ink: #00702A;   /* texto de estado sobre papel claro */
  --k-warning-ink: #8A5A00;
  --k-danger-ink:  #C3202F;
  --k-info-ink:    #005FA8;
  --k-w-hover:     rgba(15,23,42,.04);
  --k-lift:        translateY(-1px);
  --k-linea-h:     132px;     /* alto de «Su línea del día» */
  --k-dia-cielo:   linear-gradient(180deg, rgba(0,204,34,.07) 0%, rgba(0,129,226,.05) 60%, rgba(247,248,250,0) 100%);
  --k-urg-alta:    var(--k-danger);
  --k-urg-media:   var(--k-warning);
  --k-urg-baja:    var(--k-info);
  /* ── Fidelidad a prod · carga de un documento del workspace (§4.4) ──
     Velo y desenfoque: los de #preload0 de prod (2dc94a35:cshell/css/workspace.css:3160-3161). */
  --k-carga-velo:       rgba(15,23,42,.35);
  --k-carga-velo-solo:  rgba(15,23,42,.62);   /* sin backdrop-filter: tapa más, el contenido no se lee a medias */
  --k-carga-blur:       2px;
  --k-carga-iso-w:      112px;   /* isotipo con las pupilas */
  --k-carga-orbita:     14px;    /* radio del círculo de cada pupila, en unidades del viewBox 621×336 */
  --k-carga-ciclo:      2.4s;    /* una vuelta de las pupilas */
  --k-carga-desfase:    -.6s;    /* la segunda pupila va a destiempo */
  --k-carga-parpadeo:   5.6s;    /* ciclo del parpadeo ocasional */
  /* ── Anfitrión de una pantalla Back-Office (cshell/bo_host.php, chrome-bo-host.css) ── */
  --k-boh-cab-min:   280px;   /* ancho de la cabecera antes de que las acciones bajen de fila */
  --k-boh-ruta-gap:  5px;     /* separación entre los pasos de la ruta (kicker) */
  --k-boh-gate-w:    560px;   /* caja del ejecutor sin confirmar */
  --k-boh-acento:    3px;     /* borde de aviso a la izquierda de esa caja */
  /* ── Página BO (cshell/pagina_bo.php, chrome-pagina-bo.css; ide-menu-arbol-spec §13.5.7) ── */
  --k-pbo-menu-w:    260px;   /* columna de vistas del editor «Organizar en vistas» */
  --k-pbo-riel-w:    56px;    /* riel de tipos (DS 02_sidebar, colapsado); 48px en celular */
  --k-pbo-panel-w:   280px;   /* panel de elementos del tipo activo */
  --k-pbo-cab-h:     64px;    /* alto de la cabecera; 56px en celular */
  --k-pbo-logo-h:    40px;    /* alto del logo del tenant en su baldosa; 30px en celular */
  --k-pbo-logo-w:    160px;   /* ancho máximo de ese logo; 92px en celular */
  --k-pbo-acento:    3px;     /* barra de acento del tipo y del elemento activos */
}

/* Density · compact */
:root[data-density="compact"] {
  --k-fs-label: 10px;
  --k-fs-meta:  11px;
  --k-fs-body:  12px;
  --k-fs-h3:    14px;
  --k-fs-h2:    16px;
  --k-fs-h1:    20px;
  --k-s-3: 10px;
  --k-s-4: 12px;
  --k-s-5: 16px;
  --k-s-6: 20px;
  --k-h-btn-sm: 24px;
  --k-h-btn:    28px;
  --k-h-row:    28px;
  --k-lh-base: 1.4;
  --k-header-h: 40px;
}

/* Density · comfortable */
:root[data-density="comfortable"] {
  --k-fs-label: 12px;
  --k-fs-meta:  13px;
  --k-fs-body:  14px;
  --k-fs-h3:    16px;
  --k-fs-h2:    20px;
  --k-fs-h1:    24px;
  --k-s-3: 14px;
  --k-s-4: 18px;
  --k-s-5: 24px;
  --k-s-6: 32px;
  --k-h-btn:    36px;
  --k-h-btn-lg: 44px;
  --k-h-row:    40px;
  --k-lh-base: 1.55;
  --k-header-h: 52px;
}

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