/* ================================================================
   Patrón visual Suite LeanCP v1 (CSS compartido)
   Aprobado 23 abr 2026 sobre Avance. Aplica a TODAS las apps Suite.
   Referencia: .claude/rules/patron-visual-suite.md
   ================================================================ */

/* === TOKENS DE LAYOUT (fuente única; las apps pueden override) ====
   Centralizados aquí para que toda app y el CSS compartido usen var()
   en vez de px mágicos. Bloque D (responsive fluido): el sidebar es
   fluido por clamp; rail/topbar quedan como offset estándar. */
:root {
    --topbar-h: 56px;                          /* alto del topbar universal */
    --rail-w: 48px;                            /* ancho del rail lateral */
    --sidebar-w: clamp(240px, 22vw, 360px);    /* sidebar fluido (BETO, paneles) */

    /* === TOKENS NORTE DE DISEÑO (2026-07-03, Empresa/Marca/norte-diseno-suite.md) ===
       Aditivos: las apps migran gradualmente; sus :root pueden override. */
    /* Spacing — grid 4px estricto */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
    /* Radios */
    --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-full: 999px;
    /* Superficies — elevación tonal sobre #0A0A0A (sombras solo en overlays) */
    --bg: #0A0A0A;
    --surface-1: rgba(255,255,255,.035);
    --surface-2: rgba(255,255,255,.06);
    --surface-foco: rgba(255,255,255,.10);
    --borde-1: rgba(255,255,255,.09);
    --borde-2: rgba(255,255,255,.12);
    --sombra-overlay: 0 8px 24px rgba(0,0,0,.45);
    /* Semánticos anti-sol (señal crítica de campo: alta luminancia, nunca azul puro) */
    --ok: #3FB950; --warn: #D9A100; --danger: #F85149; --info: #4493F8;
    /* Marca en producto: oro = SOLO acción/estado */
    --oro: #C9A227; --oro-dim: rgba(201,162,39,.14);
    /* Motion — solo transform/opacity */
    --speed-fast: .1s; --speed-base: .15s;
    /* Touch targets de campo */
    --tap-min: 48px; --tap-movil: 56px;
}

/* === RAIL LATERAL =============================================== */
.side-rail {
    position: fixed;
    left: 0; top: var(--topbar-h, 56px); bottom: 0;
    width: var(--rail-w, 48px);
    background: var(--surface, #141414);
    border-right: 1px solid var(--border, #232323);
    display: flex; flex-direction: column; align-items: center;
    padding: 10px 0;
    gap: 2px;
    z-index: 40;
    font-family: 'Inter', sans-serif;
}
.side-rail .rail-item {
    width: 36px; height: 36px;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: var(--text-muted, #808080);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    position: relative;
    transition: background 0.15s, color 0.15s;
}
.side-rail .rail-item:hover { background: var(--surface2, #1a1a1a); color: var(--text, #f5f5f5); }
.side-rail .rail-item.active { background: rgba(201, 162, 39, 0.14); color: var(--oro, #C9A227); }
.side-rail .rail-item.active::before {
    content: ''; position: absolute;
    left: -10px; top: 20%; bottom: 20%;
    width: 2px;
    background: var(--oro, #C9A227);
    border-radius: 1px;
}
.side-rail .rail-item[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 46px; top: 50%; transform: translateY(-50%);
    background: var(--surface3, #202020);
    color: var(--text, #f5f5f5);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.76rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    border: 1px solid var(--border, #232323);
    z-index: 99;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}
.side-rail .rail-item:hover[data-tooltip]::after { opacity: 1; }
.side-rail .rail-divider {
    width: 24px; height: 1px;
    background: var(--border, #232323);
    margin: 6px 0;
}
.side-rail .rail-bottom {
    margin-top: auto;
    display: flex; flex-direction: column; gap: 2px;
}

/* === SHIFT CONTENT RIGHT WHEN RAIL ACTIVE ========================= */
.with-rail { padding-left: var(--rail-w, 48px); }
.with-rail .tab-nav { display: none; }

/* === GUARD ANTI-SCROLL-HORIZONTAL (todo tamaño, no solo mobile) ====
   Layout fluido: el scroll horizontal vive en contenedores internos
   (Gantt, tablas con overflow propio), nunca en el body. Evita cortes
   y barras horizontales indeseadas a cualquier zoom/tamaño. */
html, body { max-width: 100vw; overflow-x: hidden; }

/* Hide any duplicated 9-dots or brand inside the app header
   (topbar universal ya los tiene, suite-topbar.js es la fuente única) */
.with-rail .app-switcher-btn,
.with-rail .header-brand,
.with-rail .switcher-btn { display: none !important; }

/* === HEADER CONTROLS STANDARD (dark) ============================= */
/* Estos estilos complementan — no reemplazan — los del header de cada app. */
.suite-theme-toggle {
    background: var(--surface2, #1a1a1a);
    border: 1px solid var(--border, #232323);
    color: var(--text-muted, #808080);
    cursor: pointer;
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    font-size: 1rem;
    flex-shrink: 0;
}
.suite-theme-toggle:hover {
    border-color: var(--oro, #C9A227);
    color: var(--oro, #C9A227);
    background: var(--surface3, #202020);
}
.suite-cloud-sync {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(201, 162, 39, 0.15);
    border: 1px solid var(--oro, #C9A227);
    color: var(--oro, #C9A227);
    padding: 4px 10px;
    border-radius: 20px;
    display: none;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.suite-cloud-sync .spin { animation: suiteSpin 1s linear infinite; }
@keyframes suiteSpin { 100% { transform: rotate(360deg); } }
.suite-header-clock {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: var(--oro, #C9A227);
    background: var(--surface2, #1a1a1a);
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--border, #232323);
    display: flex; align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.suite-clock-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green, #4ade80);
    animation: suitePulse 2s infinite;
    flex-shrink: 0;
}
@keyframes suitePulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.suite-header-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--text-muted, #808080);
    background: var(--surface2, #1a1a1a);
    padding: 5px 10px;
    border-radius: 6px;
    flex-shrink: 0;
}

/* === OVERFLOW MENU "Acciones ▾" ================================== */
.header-overflow {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
.header-overflow-btn {
    background: var(--surface2, #1a1a1a);
    border: 1px solid var(--border, #232323);
    color: var(--text, #f5f5f5);
    padding: 7px 14px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.header-overflow-btn:hover {
    border-color: var(--oro, #C9A227);
    color: var(--oro, #C9A227);
}
.header-overflow-menu {
    position: absolute;
    right: 0; top: calc(100% + 4px);
    background: var(--surface, #141414);
    border: 1px solid var(--border, #232323);
    border-radius: 8px;
    min-width: 220px;
    padding: 4px;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    display: none;
}
.header-overflow.open .header-overflow-menu { display: block; }
.header-overflow-menu button,
.header-overflow-menu a {
    display: block;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text, #f5f5f5);
    font-size: 0.82rem;
    cursor: pointer;
    border-radius: 5px;
    font-family: inherit;
    text-decoration: none;
    box-sizing: border-box;
}
.header-overflow-menu button:hover,
.header-overflow-menu a:hover {
    background: var(--surface2, #1a1a1a);
    color: var(--oro, #C9A227);
}
.header-overflow-menu .sep {
    height: 1px;
    background: var(--border, #232323);
    margin: 4px 0;
}

/* === LIGHT THEME (activado con body.light-theme) ================== */
/* Override de variables comunes para darle función al botón 🌓.
   Sprint Convergencia 2026-07-03: !important reemplazado por especificidad
   NATURAL del selector — SIN duplicar la clase (ver nota de ajuste abajo).
   body.light-theme (elemento+clase) ya tiene especificidad (0,1,1), mayor
   que :root (0,1,0) de cualquier app. Efecto:
   (a) apps SIN paleta light propia (bitacora, costos: solo definen :root
       dark, sin body.light-theme propio) siguen recibiendo esta light
       canónica — (0,1,1) > (0,1,0), gana sin depender del orden de carga;
   (b) apps CON paleta light propia en su <style> inline (cargado DESPUÉS
       de este link — ver contrato de carga), usando el MISMO selector
       "body.light-theme" (un solo nivel, ej. Avance), quedan EN EMPATE de
       especificidad (0,1,1) == (0,1,1) → desempata el orden de la cascada
       → la regla local (posterior en el documento) gana. Ya no hay
       !important que la pise sin importar el orden.
   AJUSTE vs plan original: se descartó "body.light-theme.light-theme"
   (doble clase) — cuenta 2 clases → especificidad (0,2,1), MÁS específica
   que el body.light-theme plano de Avance (0,1,1). Eso haría que el shared
   ganara SIEMPRE sobre la paleta local de Avance sin importar el orden,
   rompiendo el efecto (b) pedido. El selector plano sin duplicar es el que
   realmente logra "empate de especificidad, desempate por orden". */
body.light-theme {
    --bg: #F5F5F5;
    --bg2: #FFFFFF;
    --bg-secondary: #FFFFFF;
    --surface: #FFFFFF;
    --surface2: #F0F0F0;
    --surface3: #E5E5E5;
    --panel: #FFFFFF;
    --panel2: #F5F5F5;
    --panel3: #EEEEEE;
    --border: #D0D0D0;
    --border-hover: #B0B0B0;
    --border-strong: #B0B0B0;
    --line: #E0E0E0;
    --line-soft: #EEEEEE;
    --line-strong: #C0C0C0;
    --text: #1A1A1A;
    --text-primary: #1A1A1A;
    --text-secondary: #555555;
    --text-muted: #6A6A6A;
    --text-dim: #999999;
    --muted: #6A6A6A;
    --dim: #999999;
    --oro-dim: rgba(201, 162, 39, 0.20);
    --oro-soft: rgba(201, 162, 39, 0.12);
    color-scheme: light;
}
body.light-theme input,
body.light-theme select,
body.light-theme textarea,
body.light-theme button {
    color-scheme: light;
}
/* Suavizar el topbar universal (fondo oscuro) cuando estamos en light.
   Mismo criterio: especificidad natural (body + clase + header/div +
   selector de atributo = (0,2,2)) en vez de !important — ya sobra para
   ganarle a la regla propia del topbar .lean-topbar{} (0,1,0); el topbar
   es inyectado por suite-topbar.js y ninguna app define su propia regla
   competidora para .lean-topbar, así que no hace falta el truco de clase
   doblada aquí (a diferencia del bloque de variables de arriba). */
body.light-theme > header[class*="lean-topbar"],
body.light-theme > div[class*="lean-topbar"] {
    background: #141414;
    color: #F5F5F5;
}

/* === MOBILE FALLBACK ============================================= */
@media (max-width: 700px) {
    .side-rail { display: none; }
    .with-rail { padding-left: 0 !important; }
    .with-rail .tab-nav { display: flex; }
    /* NO restaurar brand/switcher duplicados — el topbar universal sigue visible en mobile */
    /* Header controls priorizados en mobile: reloj y fecha se ocultan, solo theme + Acciones */
    .suite-header-clock,
    .suite-header-date { display: none !important; }
    .suite-theme-toggle { width: 30px; height: 30px; font-size: 0.9rem; }
    .header-overflow-btn { padding: 6px 10px; font-size: 0.78rem; }
    .header-overflow-menu { right: 0; left: auto; min-width: 200px; max-width: calc(100vw - 24px); }
    .suite-cloud-sync { display: none !important; }
}
/* Prevenir scroll horizontal global en mobile */
@media (max-width: 700px) {
    html, body { overflow-x: hidden; max-width: 100vw; }
}