/* ============================================================================
   Tema 1 — diseño de interfaz alternativo (ver Ajustes -> Apariencia).
   Todo va bajo [data-ui-tema="tema1"] (atributo puesto por web/tema.js en <html>)
   para no tocar en nada el diseño "Clásico" cuando este tema no está activo.
   Lo usan tanto el ERP (web/index.html) como el portal de clientes (web/portal/index.html).

   Dos partes:
   1) Colores y formas: pisa variables de tokens.css con la paleta clara + verde lima.
   2) El riel lateral: en escritorio es un riel angosto de solo íconos que se expande
      con un botón (ver compartido/railTema1.js), con transición animada. En celular
      sigue el comportamiento normal de "menú hamburguesa" que ya existía (no se toca).
   ============================================================================ */

[data-ui-tema="tema1"]{
  --bg:#f2f4ee; --panel:#ffffff; --ink:#14161a; --rail:#ffffff;
  --accent:#c6f135; --accent-ink:#3c4a08; /* texto legible sobre fondos claros con este acento */
  --ok:#16a34a; --warn:#d97706; --danger:#e11d48;
  --vz-1:#c6f135; --vz-2:#6c63ff; --vz-3:#ff7a59; --vz-4:#22b8cf;
  --radius:22px; --radius-sm:14px;
  --on-accent:var(--ink); --rail-active:var(--ink); --rail-active-ink:#ffffff; --hero-a:var(--ink); --hero-b:var(--accent);
  --shadow:0 1px 2px rgba(15,15,20,.04), 0 24px 48px -28px rgba(15,15,20,.18);
}

/* --- Ajustes de contraste puntuales: el acento lima es muy claro, así que los
   elementos que antes ponían texto blanco sobre --accent necesitan texto oscuro. --- */
[data-ui-tema="tema1"] .btn.primary{ color:var(--on-accent) }
[data-ui-tema="tema1"] .btn.primary:hover{ color:#fff }
/* El ERP marca el ítem activo con .nav.active; el portal de clientes con [aria-current="page"] */
[data-ui-tema="tema1"] .nav.active,
[data-ui-tema="tema1"] .nav[aria-current="page"]{ background:var(--rail-active); color:var(--rail-active-ink); font-weight:600 }
[data-ui-tema="tema1"] .nav.active::before,
[data-ui-tema="tema1"] .nav[aria-current="page"]::before{ display:none }
[data-ui-tema="tema1"] .nav-n{ background:var(--rail-active); color:var(--rail-active-ink) }
/* Portal de clientes: su .btn base (distinto al del ERP) y la marca "C" también van con acento de fondo */
[data-ui-tema="tema1"] .btn{ color:var(--on-accent) }
[data-ui-tema="tema1"] .brand .mark{ color:var(--on-accent) }

/* --- Tarjetas y botones: un poco más de aire y sombra más suave y difusa --- */
[data-ui-tema="tema1"] .card,
[data-ui-tema="tema1"] .kpi{ border:1px solid color-mix(in srgb, var(--ink) 5%, transparent) }
[data-ui-tema="tema1"] .btn{ border-radius:12px }

/* ============================================================================
   Riel lateral animado (solo escritorio; en celular sigue el menú hamburguesa normal)
   ============================================================================ */
@media (min-width:901px){
  [data-ui-tema="tema1"] .app{
    grid-template-columns: 92px 1fr;
    transition: grid-template-columns .32s cubic-bezier(.4,0,.2,1);
  }
  [data-ui-tema="tema1"] .app.rail-expanded{ grid-template-columns: 252px 1fr }

  [data-ui-tema="tema1"] .rail{
    position:sticky; top:0; height:100vh; margin:14px 0 14px 12px;
    border-radius:26px; box-shadow:var(--shadow); border:1px solid color-mix(in srgb, var(--ink) 5%, transparent);
    padding:16px 10px; overflow-x:hidden;
  }

  /* Botón que expande/contrae — ver compartido/railTema1.js (lo inserta después de la marca).
     Va en el flujo normal (no flotando encima del borde) para que nunca quede tapado. */
  [data-ui-tema="tema1"] .rail-toggle{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:40px; height:32px; margin:2px auto 14px; border-radius:10px; padding:0;
    background:var(--panel-2); border:1px solid var(--line-strong); color:var(--muted);
    transition:transform .32s cubic-bezier(.4,0,.2,1), background .15s, color .15s;
  }
  [data-ui-tema="tema1"] .rail-toggle svg{ width:14px; height:14px; flex-shrink:0 }
  [data-ui-tema="tema1"] .rail-toggle:hover{ background:var(--accent-soft); color:var(--accent-ink) }
  [data-ui-tema="tema1"] .app.rail-expanded .rail-toggle{ transform:rotate(180deg) }

  /* Colapsado: solo íconos, tamaño fijo (44x44) para que nunca dependa de que el texto
     "se recorte" — font-size:0 apaga cualquier texto suelto sin tocar el marcado ni el
     ícono (el ícono mide por su width/height propios, no por font-size). */
  [data-ui-tema="tema1"] .app:not(.rail-expanded) .nav{
    width:44px; height:44px; margin:0 auto; padding:0; gap:0;
    justify-content:center; font-size:0; white-space:nowrap; overflow:hidden;
  }
  /* El logo normal (que puede ser ancho, un logotipo) se cambia por el ícono cuadrado — el que se
     suba aparte en Ajustes -> Apariencia para esto, o si no hay, el logo normal centrado y más
     grande. Ver "brand-colapsado" en web/js/app.js y web/portal/app.js. */
  [data-ui-tema="tema1"] .app:not(.rail-expanded) .brand{ display:none }
  [data-ui-tema="tema1"] .app:not(.rail-expanded) .brand-colapsado{
    display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; margin:2px auto 4px;
  }
  /* El logo (subido o el ícono vectorial de fábrica) llena el cuadro; la "C" de respaldo del
     portal (sin ningún logo subido) se dibuja aparte, no depende de la regla .brand .mark original
     (esa no aplica aquí — este ícono ya no está dentro de .brand). */
  [data-ui-tema="tema1"] .app:not(.rail-expanded) .brand-colapsado svg,
  [data-ui-tema="tema1"] .app:not(.rail-expanded) .brand-colapsado img{ width:100%; height:100%; object-fit:contain }
  [data-ui-tema="tema1"] .app:not(.rail-expanded) .brand-colapsado .mark{
    width:100%; height:100%; border-radius:12px; background:var(--ink); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px;
  }
  /* Sin secciones abiertas en modo ícono: en vez de listar cada módulo suelto (quedaba una barra
     larguísima), se ve UN ícono por grupo (Comercial, Operativo, Mesa de ayuda…) — al hacer clic
     se abre el riel ya con ese grupo desplegado (ver compartido/railTema1.js). */
  [data-ui-tema="tema1"] .app:not(.rail-expanded) .rail .group{ display:none }
  [data-ui-tema="tema1"] .app:not(.rail-expanded) .grp-body{ display:none !important }
  [data-ui-tema="tema1"] .app:not(.rail-expanded) .grp-toggle{
    display:flex; width:44px; height:44px; margin:0 auto; padding:0; gap:0;
    justify-content:center; font-size:0; white-space:nowrap; overflow:hidden;
  }
  [data-ui-tema="tema1"] .app:not(.rail-expanded) .grp-toggle .chev{ display:none }
  [data-ui-tema="tema1"] .app:not(.rail-expanded) .grp-toggle .grp-icon{ display:block; width:18px; height:18px }
  [data-ui-tema="tema1"] .app:not(.rail-expanded) .nav-group{ padding-top:6px; margin-top:4px; border-top:1px solid var(--line) }
  [data-ui-tema="tema1"] .app:not(.rail-expanded) .nav-group:first-of-type{ border-top:0; margin-top:0 }

  /* Expandido: como el diseño clásico, con texto y secciones normales */
  [data-ui-tema="tema1"] .app.rail-expanded .nav{ width:auto; height:auto; margin:0; gap:10px; font-size:13px; white-space:normal; overflow:visible; justify-content:flex-start; padding:9px 10px }
  [data-ui-tema="tema1"] .app.rail-expanded .brand .mark{ width:34px; height:34px }
}
@media (max-width:900px){
  [data-ui-tema="tema1"] .rail-toggle{ display:none } /* en celular manda el menú hamburguesa existente */
}

/* Burbuja con el nombre del módulo al pasar el mouse sobre un ícono (riel contraído) — ver
   compartido/railTema1.js. Va fija respecto a la ventana (no dentro del riel) para que nunca
   quede recortada por su overflow, sin importar qué tan angosto esté el riel. */
[data-ui-tema="tema1"] .rail-tip{
  position:fixed; z-index:200; transform:translateY(-50%);
  background:var(--tip); color:var(--tip-ink); font-size:12.5px; font-weight:600; line-height:1;
  padding:7px 12px; border-radius:8px; white-space:nowrap; pointer-events:none; box-shadow:var(--shadow);
}