/* SICEM: nucleo comun. Fuentes, tokens (claro y oscuro) y el armazon con el menu lateral.
   Lo cargan todas las pantallas de administracion (Layout::head) y el modulo de Mapa (Layout::integrarModulo).
   El color de marca (--marca y su escala) lo pone Tema::css() en cada pagina. */

/* 1. Fuentes ---------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* 2. Tokens ----------------------------------------------------------------- */
:root {
  color-scheme: light;
  /* Marca (respaldo; la pagina trae la del tema) */
  --marca: #047857; --marca-fuerte: #03664A; --marca-sobre: #FFFFFF; --marca-texto: #047857;
  --marca-50: #F2F8F5; --marca-100: #E3F1EB; --marca-200: #C5E1D5; --marca-300: #8EC2AB;
  --fondo: #EDF1F3; --anillo: rgba(4,120,87,.32); --logo-alto: 52px;

  /* Neutros */
  --superficie: #FFFFFF; --superficie-2: #F8FAFC; --superficie-3: #F1F4F8;
  --borde: #E3E8EF; --borde-fuerte: #CBD3DE; --regla: #EDF1F5;
  --tinta: #152039; --texto: #334155; --tenue: #5B6577; --sutil: #6B7484;

  /* Estados (texto, fondo suave, tinta) */
  --exito: #15803D;   --exito-suave: #DCFCE7;   --exito-tinta: #14532D;
  --aviso: #B45309;   --aviso-suave: #FEF3C7;   --aviso-tinta: #78350F;
  --peligro: #B91C1C; --peligro-suave: #FEE2E2; --peligro-tinta: #7F1D1D;
  --info: #1D4ED8;    --info-suave: #DBEAFE;    --info-tinta: #1E3A8A;
  --neutro-suave: #EEF2F6; --neutro-tinta: #334155;
  /* Rellenos con texto blanco encima (botones, etiquetas llenas): sirven igual en claro y oscuro */
  --exito-relleno: #15803D; --peligro-relleno: #B91C1C; --aviso-relleno: #B45309; --info-relleno: #1D4ED8;

  /* Graficas: estados fijos y serie categorica (paleta validada para daltonismo) */
  --estado-bien: #0CA30C; --estado-aviso: #FAB219; --estado-serio: #EC835A; --estado-critico: #D03B3B; --estado-neutro: #A3ADBB;
  --serie-1: #2A78D6; --serie-2: #EB6834; --serie-3: #1BAF7A; --serie-4: #EDA100;
  --serie-5: #E87BA4; --serie-6: #008300; --serie-7: #6250D6; --serie-8: #E34948;
  --graf-rejilla: #EDF1F5; --graf-eje: #CBD3DE;

  /* Tipo: una familia; escala 12 13 14 16 18 20 24 30 */
  --fuente: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --fs-1: 12px; --fs-2: 13px; --fs-3: 14px; --fs-4: 16px; --fs-5: 18px; --fs-6: 20px; --fs-7: 24px; --fs-8: 30px;

  /* Forma y espacio (base 4) */
  --r-panel: 16px; --r-control: 10px; --r-chico: 8px; --r-pastilla: 999px;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px;
  --menu-ancho: 252px; --control-alto: 38px;
  --sombra-flota: 0 16px 40px -12px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .06);
  --sombra-suave: 0 1px 2px rgba(15, 23, 42, .05);

  /* Movimiento */
  --t-rapida: 120ms; --t-media: 200ms; --t-lenta: 320ms;
  --curva: cubic-bezier(.2, .8, .2, 1); --curva-salida: cubic-bezier(.4, 0, 1, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --superficie: #17181B; --superficie-2: #1D1F23; --superficie-3: #25282D;
  --borde: #2A2D33; --borde-fuerte: #3C4048; --regla: #222429;
  --tinta: #F3F5F8; --texto: #D5DAE1; --tenue: #9AA3B2; --sutil: #8A93A2;

  --exito: #4ADE80;   --exito-suave: #12291A;   --exito-tinta: #86EFAC;
  --aviso: #FBBF24;   --aviso-suave: #2B2210;   --aviso-tinta: #FCD34D;
  --peligro: #F87171; --peligro-suave: #2D1616; --peligro-tinta: #FCA5A5;
  --info: #60A5FA;    --info-suave: #14213D;    --info-tinta: #93C5FD;
  --neutro-suave: #24272C; --neutro-tinta: #D5DAE1;

  --estado-neutro: #5E6775;
  --serie-1: #3987E5; --serie-2: #D95926; --serie-3: #199E70; --serie-4: #C98500;
  --serie-5: #D55181; --serie-6: #008300; --serie-7: #9085E9; --serie-8: #E66767;
  --graf-rejilla: #26292E; --graf-eje: #3C4048;

  --sombra-flota: 0 18px 44px -12px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .4);
  --sombra-suave: none;
}

/* Base minima del menu (las paginas sin sicem.css, como el modulo de Mapa, tambien lo usan) */
.sidebar, .barra-movil { font-family: var(--fuente); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
.sidebar *, .sidebar *::before, .sidebar *::after, .barra-movil *, .barra-movil *::before { box-sizing: border-box; }
.sidebar a, .barra-movil a { text-decoration: none; }
.sidebar :focus-visible, .barra-movil :focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* 4. Armazon y menu ----------------------------------------------------------- */
.dashboard-container { display: block; min-height: 100vh; }
.main-content {
  margin-left: var(--menu-ancho); width: auto; max-width: none; min-height: 100vh;
  padding: var(--e-8) clamp(16px, 3vw, 40px) var(--e-10); background: transparent;
}
.main-content > :first-child { margin-top: 0; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 1040; width: var(--menu-ancho); height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--superficie); border-right: 1px solid var(--borde); box-shadow: none; transform: none;
}
.menu-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); padding: var(--e-5) var(--e-5) var(--e-3); }
.menu-marca { display: inline-flex; align-items: center; max-width: 100%; min-height: var(--logo-alto); }
.menu-marca:hover { text-decoration: none; }
.marca-logo { display: block; height: var(--logo-alto); width: auto; max-width: 190px; object-fit: contain; object-position: left center; }
.marca-logo--oscuro { display: none; }
:root[data-theme="dark"] .marca-logo--claro { display: none; }
:root[data-theme="dark"] .marca-logo--oscuro { display: block; }
.marca-logo--placa { background: #FFFFFF; border-radius: var(--r-chico); padding: 4px 8px; box-sizing: content-box; }
.menu-cerrar { display: none; }

.menu-nav { flex: 1 1 auto; overflow-y: auto; padding: var(--e-1) var(--e-3) var(--e-4); overscroll-behavior: contain; }
.sidebar .nav-menu, .sidebar .nav-sub ul { list-style: none; margin: 0; padding: 0; }
.sidebar .nav-item { margin: 0 0 2px; }
.sidebar .nav-section { margin: var(--e-5) 0 var(--e-1); padding: 0 var(--e-3); }
.sidebar .nav-section-title { font-size: var(--fs-1); font-weight: 500; color: var(--sutil); letter-spacing: 0; text-transform: none; }
.sidebar .nav-link {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px var(--e-3);
  border-radius: var(--r-chico); color: var(--texto); font-size: var(--fs-3); font-weight: 450; line-height: 1.3;
  transition: background-color var(--t-rapida) ease, color var(--t-rapida) ease;
}
.sidebar .nav-link i { flex: none; width: 18px; font-size: 17px; text-align: center; color: var(--tenue); transition: color var(--t-rapida) ease; }
.sidebar .nav-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .nav-link:hover { background: var(--superficie-3); color: var(--tinta); text-decoration: none; transform: none; }
.sidebar .nav-link:hover i { color: var(--tinta); }
.sidebar .nav-link:active { background: var(--borde); }
.sidebar .nav-link.active, .sidebar .nav-link[aria-current="page"] {
  background: var(--marca-100); color: var(--marca-texto); font-weight: 600; box-shadow: none;
}
.sidebar .nav-link.active i, .sidebar .nav-link[aria-current="page"] i { color: var(--marca); }
.sidebar .nav-item--modulo > .nav-link:not(.active) { color: var(--tinta); font-weight: 600; }
.sidebar .nav-item--modulo > .nav-link:not(.active) i { color: var(--marca); }
.sidebar .nav-sub { margin: 2px 0 var(--e-2); }
.sidebar .nav-sub .nav-link { padding-left: 40px; min-height: 32px; font-size: var(--fs-3); }
.sidebar .nav-sub .nav-link::before {
  content: ""; position: absolute; left: 21px; top: 0; bottom: 0; width: 1px; background: var(--borde);
}
.sidebar .nav-sub .nav-link.active::before { background: var(--marca); width: 2px; left: 20px; top: 6px; bottom: 6px; border-radius: 2px; }
.sidebar .nav-externo { margin-left: auto; font-size: 12px !important; width: auto !important; opacity: .7; }

.menu-pie { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-3) var(--e-3) var(--e-4); border-top: 1px solid var(--borde); }
.menu-usuario { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.menu-usuario .avatar {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--marca-100); color: var(--marca-texto); font-size: 13px; font-weight: 650; letter-spacing: .02em;
}
.menu-usuario__texto { display: grid; min-width: 0; line-height: 1.25; }
.menu-usuario__texto strong { color: var(--tinta); font-size: var(--fs-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-usuario__texto small { color: var(--tenue); font-size: var(--fs-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-acciones { display: flex; gap: 2px; flex: none; }
.menu-accion {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--r-chico);
  background: transparent; color: var(--tenue); font-size: 17px; cursor: pointer; overflow: hidden;
  transition: background-color var(--t-rapida) ease, color var(--t-rapida) ease, transform var(--t-rapida) var(--curva);
}
.menu-accion:hover { background: var(--superficie-3); color: var(--tinta); text-decoration: none; }
.menu-accion:active { transform: scale(.94); }
.tema-icono { position: absolute; transition: transform var(--t-lenta) var(--curva), opacity var(--t-media) ease; }
.tema-icono--sol { opacity: 0; transform: rotate(-90deg) scale(.6); }
:root[data-theme="dark"] .tema-icono--luna { opacity: 0; transform: rotate(90deg) scale(.6); }
:root[data-theme="dark"] .tema-icono--sol { opacity: 1; transform: none; }

.barra-movil, .menu-velo { display: none; }
/* Pantallas de carga viejas: ya no se muestran (la pagina carga directo) */
#preloader { display: none !important; }
/* Cambio de tema: el modo nuevo se abre en circulo desde el boton (sicem.js) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

@media (max-width: 991.98px) {
  .main-content { margin-left: 0; padding: var(--e-5) var(--e-4) var(--e-8); }
  .barra-movil {
    position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: var(--e-2);
    height: 56px; padding: 0 var(--e-2) 0 var(--e-1); padding-top: env(safe-area-inset-top);
    background: color-mix(in srgb, var(--superficie) 92%, transparent); border-bottom: 1px solid var(--borde);
    -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  }
  .barra-movil__boton {
    display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-control);
    background: transparent; color: var(--tinta); font-size: 22px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .barra-movil__boton:active { background: var(--superficie-3); }
  .barra-movil__titulo { flex: 1 1 auto; min-width: 0; color: var(--tinta); font-size: var(--fs-4); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra-movil__marca { display: flex; align-items: center; padding-right: var(--e-2); }
  .barra-movil__marca .marca-logo { height: 28px; max-width: 110px; }
  .sidebar {
    width: min(86vw, 320px); transform: translateX(-102%); box-shadow: var(--sombra-flota);
    transition: transform var(--t-lenta) var(--curva); visibility: hidden;
  }
  body.menu-abierto .sidebar { transform: none; visibility: visible; }
  .menu-cerrar {
    display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--r-control);
    background: transparent; color: var(--tenue); font-size: 20px; cursor: pointer;
  }
  .menu-velo {
    display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(15, 23, 42, .42);
    opacity: 0; pointer-events: none; transition: opacity var(--t-media) ease;
  }
  .menu-velo[hidden] { display: block !important; }
  body.menu-abierto .menu-velo { opacity: 1; pointer-events: auto; }
  body.menu-abierto { overflow: hidden; }
  .sidebar .nav-link { min-height: 44px; }
}