/* ==========================================================================
   MaxService Portal — Design System
   Tokens de LAYOUT (espaciado, radios, tipografia, sombras) + los
   primitivos del shell (header fijo, sidebar colapsable, hub de
   tarjetas). Los tokens de COLOR viven en static/css/tema.css desde
   2026-08-06 (kit visual, 6 temas con selector) -- este archivo consume
   var(--bg)/var(--surface)/var(--accent)/etc. en vez de definir los
   suyos propios, para que el shell reaccione al tema elegido. Unica
   excepcion: el sidebar se deja como riel oscuro FIJO (mismo navy de
   siempre), ver el bloque ".app-sidebar" mas abajo.
   Pensado para extenderse: nuevas paginas usan templates/_base.html
   y estas mismas variables, en vez de reinventar estilos por modulo.
   ========================================================================== */

:root{
  /* Tipografia -- Sora se usa con moda, solo titulos/numeros grandes
     (ver .font-display en tema.css), el resto de la interfaz va en
     Inter. JetBrains Mono sigue para cifras tabulares en los modulos. */
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --font-display:'Sora','Inter',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  --fs-11:11px; --fs-12:12.5px; --fs-14:14px; --fs-16:16px; --fs-20:20px; --fs-28:28px;

  /* Espaciado (base 4px) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* Forma */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px;

  /* Borde "fuerte" (hover de tarjetas/botones de icono) -- computado
     desde --border en vez de un hex a mano, asi se recalcula solo con
     cada tema (regla del kit: nunca escribir un color a mano). */
  --border-strong: color-mix(in srgb, var(--border) 45%, var(--text) 55%);

  /* Sombra -- deliberadamente sutiles, sin "glow"; tenidas del color de
     texto del tema en vez de un rgba(16,24,40,...) fijo, para que el
     tinte de la sombra tambien seleccione modo oscuro/claro solo. */
  --shadow-xs: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent);
  --shadow-sm: 0 2px 6px color-mix(in srgb, var(--text) 7%, transparent);
  --shadow-md: 0 8px 24px color-mix(in srgb, var(--text) 11%, transparent);

  /* Layout */
  --header-h:60px;
  --sidebar-w:236px;
  --sidebar-w-collapsed:68px;

  --transition:160ms cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
/* Zoom de la interfaz (2026-08-27, pedido de Marcelo: "yo siempre trabajo
   con la pagina al 90% de zoom en chrome porque siento que se ve mejor").
   Se aplica en el portal para que todos lo vean asi y no dependa de que
   cada uno se acuerde de ajustar el navegador.

   Se usa `zoom` y no `transform: scale()` a proposito: scale deja el hueco
   del tamano original, rompe los elementos fijos y descuadra las barras de
   desplazamiento. `zoom` es literalmente lo mismo que hace el navegador.

   OJO: esto REEMPLAZA el zoom manual. Quien tenga Chrome en 90% va a ver
   81% -- hay que volver el navegador a 100%. */
:root{ --zoom-ui:0.9; }
html{
  zoom:var(--zoom-ui);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body{
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--text);
  font-size:var(--fs-14);
  line-height:1.5;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.num{font-variant-numeric:tabular-nums; text-align:right;}
::selection{background:var(--accentSoft);}

/* -------------------------------------------------------------------- */
/* Shell: header fijo + sidebar + contenido                              */
/* -------------------------------------------------------------------- */

.app-shell{
  display:grid;
  /* minmax(0,1fr): una tabla ancha no puede estirar la columna del contenido
     y correr la pagina entera de lado (norma 10, 2026-09-29). */
  grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  grid-template-rows:var(--header-h) 1fr;
  grid-template-areas:"header header" "sidebar main";
  min-height:100vh;
  transition:grid-template-columns var(--transition);
}
.app-shell.sidebar-colapsada{grid-template-columns:var(--sidebar-w-collapsed) minmax(0,1fr);}

/* Header */
.app-header{
  grid-area:header;
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4);
  padding:0 var(--sp-5);
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.app-header .brand{position:relative; display:flex; align-items:center; height:34px;}
.app-header .brand .brand-mark{
  position:absolute; left:0; top:50%;
  display:flex; align-items:center;
  opacity:0; transform:translateY(-50%) rotate(-160deg) scale(.6);
  transition:opacity .3s ease, transform .4s cubic-bezier(.34,1.4,.64,1);
  pointer-events:none;
}
.app-header .brand .brand-mark img{width:30px; height:30px; display:block; border-radius:50%;}
.app-header .brand .brand-full{
  display:flex; align-items:center;
  opacity:1; transform:translateX(0);
  transition:opacity .3s ease .05s, transform .35s cubic-bezier(.4,0,.2,1) .05s;
}
.app-header .brand .brand-full img{height:22px; width:auto; display:block;}

/* Logo segun el tema (2026-08-11, cierra el pendiente que quedo anotado el
   2026-08-07). El PNG normal tiene el "ma" y el circulo casi negros: sobre
   los temas de fondo oscuro se perdia. Antes se probo ponerle una placa
   blanca detras, no gusto y se revirtio; la solucion definitiva es un
   segundo archivo pensado para fondo oscuro (Logo_MS_Sitio.png, que trae el
   "ma" en blanco) y dejar que el CSS elija.
   Se listan tambien 'dark' y 'telar', que hoy no estan en el selector pero
   siguen definidos en tema.css: si se reactivan, ya funcionan. */
.app-header .brand .brand-full .logo-oscuro{display:none;}
[data-theme="cordillera"] .app-header .brand .brand-full .logo-claro,
[data-theme="dark"] .app-header .brand .brand-full .logo-claro,
[data-theme="telar"] .app-header .brand .brand-full .logo-claro{display:none;}
[data-theme="cordillera"] .app-header .brand .brand-full .logo-oscuro,
[data-theme="dark"] .app-header .brand .brand-full .logo-oscuro,
[data-theme="telar"] .app-header .brand .brand-full .logo-oscuro{display:block;}
.app-shell.sidebar-colapsada .app-header .brand .brand-mark{
  opacity:1; transform:translateY(-50%) rotate(0deg) scale(1); pointer-events:auto;
}
.app-shell.sidebar-colapsada .app-header .brand .brand-full{
  opacity:0; transform:translateX(-8px); pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .app-header .brand .brand-mark, .app-header .brand .brand-full{transition:none;}
}

.header-toggle{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--radius-sm);
  border:1px solid transparent; background:transparent; color:var(--textDim);
  cursor:pointer;
}
.header-toggle:hover{background:var(--surfaceAlt); color:var(--text);}
#btn-toggle-sidebar-movil{display:none;}

.header-right{display:flex; align-items:center; gap:var(--sp-3);}
.icon-btn{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface); color:var(--textDim);
  cursor:pointer;
}
.icon-btn:hover{border-color:var(--border-strong); color:var(--text);}
.icon-btn .dot-badge{
  position:absolute; top:3px; right:4px; width:10px; height:10px; border-radius:50%;
  background:var(--ok); border:2px solid var(--surface);
}

/* Campanita -- "Requiere atencion" para todos, y ediciones de Metas para
   el administrador (2026-08-28). Los avisos usan las mismas clases .aviso
   que el panel del inicio: la misma tarea tiene que verse igual en los dos
   lados. */
.notif-wrap{position:relative;}
#notif-dot{background:var(--urgent);}
.notif-panel{
  position:absolute; top:calc(100% + 8px); right:0; width:360px; max-width:calc(100vw - 32px);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-md); z-index:60; overflow:hidden;
}
.notif-panel-header{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); font-size:12.5px; font-weight:700; color:var(--text);
  border-bottom:1px solid var(--border); background:var(--surfaceAlt);
}
.notif-panel-header + .notif-panel-header,
#notif-tareas + .notif-panel-header{border-top:1px solid var(--border);}
.notif-resumen{font-size:11px; font-weight:500; color:var(--textDim); text-align:right;}
#notif-tareas{max-height:300px; overflow-y:auto;}

/* El aviso dentro de la campana: mismo contenido que en el inicio, sin la
   tarjeta alrededor -- aca las filas ya van separadas por la linea del
   panel y el marco doble se veia apretado. */
#notif-tareas .aviso{
  border:none; border-bottom:1px solid var(--border); border-radius:0;
  padding:var(--sp-3) var(--sp-4); background:none;
}
#notif-tareas .aviso:last-child{border-bottom:none;}
#notif-tareas .aviso:hover{background:var(--surfaceAlt);}

/* El numero de la campana. Cuenta AVISOS (lineas), que es lo que se ve al
   abrirla -- no la suma de documentos, que es lo que dice el badge del
   menu lateral. */
.icon-btn .num-badge{
  position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--urgent); color:#fff;
  font-size:10.5px; font-weight:700; line-height:17px; text-align:center;
  border:2px solid var(--surface); font-variant-numeric:tabular-nums;
}
#notif-lista{max-height:360px; overflow-y:auto;}
.notif-item{
  display:block; padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border);
  transition:background .1s;
}
.notif-item:last-child{border-bottom:none;}
.notif-item:hover{background:var(--surfaceAlt);}
.notif-item.nuevo{background:var(--okSoft); box-shadow:inset 3px 0 0 var(--ok);}
.notif-item.nuevo:hover{background:color-mix(in srgb, var(--ok) 12%, var(--okSoft));}
.notif-item-top{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-2); font-size:12.5px;}
.notif-item-top b{color:var(--text); font-weight:600;}
.notif-hora{color:var(--textDim); font-size:11px; flex:none; font-variant-numeric:tabular-nums;}
.notif-item-sub{margin-top:2px; font-size:11.5px; color:var(--textDim);}
.notif-vacio{padding:var(--sp-5) var(--sp-4); text-align:center; color:var(--textDim); font-size:12.5px;}
.notif-panel-footer{
  display:block; text-align:center; padding:var(--sp-3) var(--sp-4); font-size:12px; font-weight:600;
  color:var(--accent); border-top:1px solid var(--border); background:var(--surfaceAlt);
}
.notif-panel-footer:hover{background:var(--accentSoft);}

.user-chip{display:flex; align-items:center; gap:var(--sp-2); padding-left:var(--sp-2); border-left:1px solid var(--border);}
.user-chip .avatar{
  width:30px; height:30px; border-radius:50%;
  background:var(--accentSoft); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px; flex:none;
}
.user-chip .meta{display:flex; flex-direction:column; line-height:1.25;}
.user-chip .nombre{font-weight:600; font-size:12.5px; color:var(--text);}
.user-chip .rol{font-size:11px; color:var(--textDim);}
.user-chip a.salir{font-size:11px; color:var(--textDim); font-weight:600;}
.user-chip a.salir:hover{color:var(--urgent);}

/* Sidebar -- reactivo al tema (2026-08-06, corregido tras feedback de
   Marcelo: "lino no cambia el menu lateral" -- la primera version lo
   dejaba como riel oscuro fijo para no alterar el look de hoy en
   "light", pero eso se ve mal apenas el resto del shell si cambia de
   tema. Ahora usa var(--surface)/var(--text) como el resto del kit --
   en el tema "light" esto SI cambia respecto al sidebar navy de
   siempre (pasa a blanco con borde), es la consecuencia esperada de
   que el selector de temas alcance tambien al sidebar. */
.app-sidebar{
  grid-area:sidebar;
  background:var(--surface);
  color:var(--text);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  /* Si no cabe, se desplaza. Antes comprimia a sus hijos y el buscador se
     veia achatado sin que nada lo explicara. */
  overflow-y:auto;
  padding:var(--sp-4) var(--sp-2);
  gap:var(--sp-1);
  overflow-y:auto;
  transition:width var(--transition);
  /* Fijo bajo el header (mismo mecanismo que ya usaba el menu movil), con
     su propio scroll -- la columna del grid sigue reservando el ancho
     (var(--sidebar-w), es un largo fijo, no depende del contenido) asi que
     .app-main no se mueve aunque el sidebar salga del flujo normal. */
  position:fixed; top:var(--header-h); left:0; bottom:0;
  width:var(--sidebar-w);
  z-index:30;
}
.app-shell.sidebar-colapsada .app-sidebar{width:var(--sidebar-w-collapsed);}
.sidebar-grupo{margin-top:var(--sp-4);}
.sidebar-grupo:first-child{margin-top:0;}
.sidebar-grupo .titulo{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--textDim); padding:0 var(--sp-3); margin-bottom:var(--sp-1);
  white-space:nowrap; overflow:hidden;
}
.sidebar-colapsada .sidebar-grupo .titulo{opacity:0; height:0; margin:0; overflow:hidden;}

.nav-item{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:8px var(--sp-3);
  border-radius:var(--radius-sm);
  color:var(--textDim); font-size:13px; font-weight:500;
  white-space:nowrap; overflow:hidden;
}
.nav-item svg{flex:none; width:18px; height:18px; opacity:.85;}
.nav-item:hover{background:var(--surfaceAlt); color:var(--text);}
.nav-item.activo{background:var(--accentSoft); color:var(--accent);}
.nav-item.activo svg{opacity:1; color:var(--accent);}
.nav-item .label{overflow:hidden; text-overflow:ellipsis;}
.sidebar-colapsada .nav-item .label{display:none;}
.nav-badge{
  margin-left:auto; flex:none; background:var(--urgent); color:#fff;
  font-size:10.5px; font-weight:700; line-height:1; border-radius:999px;
  padding:3px 6px; min-width:16px; text-align:center;
}
.sidebar-colapsada .nav-item .nav-badge{display:none;}
.sidebar-colapsada .nav-item{justify-content:center;}
.sidebar-colapsada .sidebar-grupo{margin-top:var(--sp-2);}

.nav-item-fila{display:flex; align-items:stretch; gap:2px;}
.nav-item-fila .nav-item{flex:1; min-width:0;}
.nav-expandir{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:26px; background:none; border:none; color:var(--textDim); cursor:pointer;
  border-radius:var(--radius-sm);
}
.nav-expandir:hover{background:var(--surfaceAlt); color:var(--text);}
.nav-expandir svg{width:13px; height:13px; transition:transform var(--transition);}
.nav-con-hijos.abierto .nav-expandir svg{transform:rotate(90deg);}
.nav-subitems{display:none; flex-direction:column; padding-left:29px; margin-top:1px; gap:1px;}
.nav-con-hijos.abierto .nav-subitems{display:flex;}
.nav-subitem{
  display:block; padding:6px var(--sp-3);
  border-radius:var(--radius-sm);
  color:var(--textDim); font-size:12.5px; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-left:2px solid var(--border);
}
.nav-subitem:hover{background:var(--surfaceAlt); color:var(--text);}
/* Con el submenu desplegado, el numero de arriba sobra: lo que resumia
   esta a la vista repartido. Va con !important porque el valor lo escribe
   el JS en el style del elemento, y si no, la regla no le gana. */
.nav-con-hijos.abierto > .nav-item-fila .nav-badge{display:none !important;}
.nav-subitem{display:flex; align-items:center; gap:var(--sp-2);}
.nav-subitem .label{flex:1; min-width:0;}
/* El desglose NO va en pastilla roja. El rojo en el portal significa "esto
   necesita atencion ahora" -- es el mismo rojo del badge de arriba y el del
   punto "alta" de Requiere atencion. Cuatro pastillas rojas seguidas se
   leen como cuatro alarmas, cuando en realidad es UN numero repartido en
   cuatro. Aca el dato es cuanto le toca a cada ficha, no una urgencia
   distinta por fila, asi que va como numero y no como alarma. */
.nav-subitem .nav-badge{
  background:none; color:var(--textDim); font-weight:600; font-size:11.5px;
  padding:0; min-width:0; font-variant-numeric:tabular-nums;
}
.nav-subitem:hover .nav-badge, .nav-subitem.activo .nav-badge{color:var(--text);}
.nav-subitem.activo{background:var(--accentSoft); color:var(--accent); border-left-color:var(--accent);}
.sidebar-colapsada .nav-con-hijos .nav-expandir, .sidebar-colapsada .nav-subitems{display:none !important;}

.sidebar-footer{margin-top:auto; padding:var(--sp-3) var(--sp-3) var(--sp-4); border-top:1px solid var(--border);}
.sidebar-footer-txt{font-size:10.5px; color:var(--textDim); margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sidebar-colapsada .sidebar-footer{opacity:0;}

/* Selector de tema, dentro del riel -- ver templates/_base.html +
   static/js/theme.js. Reusa .menu/.capa-cierre de componentes.css
   (regla del kit: todo menu flotante lleva su capa de cierre). */
.theme-switch{position:relative;}
.theme-switch-btn{
  display:flex; align-items:center; gap:8px; width:100%;
  background:none; border:none; padding:6px 4px; cursor:pointer;
  color:var(--textDim); font-size:11.5px; font-family:inherit;
  border-radius:var(--radius-sm);
}
.theme-switch-btn:hover{background:var(--surfaceAlt); color:var(--text);}
/* La miniatura: fondo del tema, una superficie encima con dos lineas de
   texto y el punto de acento. En 34x24 no cabe mas, y con eso ya se ve lo
   unico que hay que decidir: si el tema es claro u oscuro y de que color
   es su acento. */
.theme-vista{
  width:34px; height:24px; flex:none; border-radius:5px; overflow:hidden;
  background:var(--v-bg); border:1px solid var(--border);
  display:flex; align-items:center; padding:3px; gap:3px;
}
.theme-vista .vp-panel{
  width:16px; flex:none; height:100%; border-radius:3px; background:var(--v-surface);
  display:flex; flex-direction:column; justify-content:center; gap:2px; padding:0 2px;
}
.theme-vista .vp-linea{height:2px; border-radius:1px; background:var(--v-text); opacity:.75;}
.theme-vista .vp-linea.corta{width:60%; opacity:.4;}
.theme-vista .vp-acento{
  width:7px; height:7px; border-radius:50%; background:var(--v-accent); flex:none;
  margin-left:2px;
}
#theme-switch-menu button{display:flex; align-items:center; gap:9px;}
#theme-switch-menu button .theme-vista{margin:0;}
.theme-switch-btn .theme-vista{margin-right:2px;}
.sidebar-colapsada .theme-switch-nombre{display:none;}
.sidebar-colapsada .theme-switch-btn{justify-content:center;}
/* .app-sidebar tiene overflow-y:auto para su propio scroll -- un menu
   position:absolute (el default de .menu en componentes.css) queda
   recortado por ese overflow aunque tenga z-index alto (bug real,
   reportado por Marcelo: "queda tapada la interfaz para seleccionar
   temas"). position:fixed con coordenadas calculadas en JS (ver
   theme.js) escapa de ese recorte. */
#theme-switch-menu{position:fixed;}

/* Contenido */
.app-main{
  grid-area:main; padding:var(--sp-6) var(--sp-8) var(--sp-16); max-width:1400px; width:100%; margin:0 auto;
  min-width:0;
  /* 2026-09-29: se quito el `color-scheme:light` forzado que habia aca
     (2026-08-06). Se puso porque los modulos sin migrar tenian inputs con
     fondo blanco escrito a mano; ahora todos usan .campo con tokens, y ese
     light forzado era justamente lo que dejaba los desplegables claros con
     letra blanca en los temas oscuros (Marcelo, 2026-09-29). */
}

.sidebar-overlay{display:none; position:fixed; inset:var(--header-h) 0 0 0; background:color-mix(in srgb, var(--text) 35%, transparent); z-index:45;}

@media (max-width: 900px){
  .app-shell{grid-template-columns:0 minmax(0,1fr);}
  .app-shell.sidebar-abierta{grid-template-columns:var(--sidebar-w) minmax(0,1fr);}
  .app-sidebar{position:fixed; top:var(--header-h); bottom:0; left:0; width:var(--sidebar-w); z-index:50;
    transform:translateX(-100%); transition:transform var(--transition);}
  .app-shell.sidebar-abierta .app-sidebar{transform:translateX(0); box-shadow:var(--shadow-md);}
  .app-main{padding:var(--sp-5);}
  .user-chip .meta{display:none;}
  #btn-toggle-sidebar{display:none !important;}
  #btn-toggle-sidebar-movil{display:flex !important;}
  .app-shell.sidebar-abierta .sidebar-overlay{display:block;}
}

/* -------------------------------------------------------------------- */
/* Hub: saludo + tarjetas de modulo                                     */
/* -------------------------------------------------------------------- */

.hub-header{margin-bottom:var(--sp-8);}
.hub-header h1{font-family:var(--font-display); font-size:var(--fs-28); font-weight:700; color:var(--text); letter-spacing:-.015em;}
.hub-header p{font-size:var(--fs-14); color:var(--textDim); margin-top:var(--sp-1);}

.hub-seccion{margin-bottom:var(--sp-10);}
.hub-seccion .titulo-seccion{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--textDim); margin-bottom:var(--sp-3);
}

.grid-tarjetas{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--sp-4);}

.tarjeta-modulo{
  display:flex; flex-direction:column; gap:var(--sp-3);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--sp-5);
  box-shadow:var(--shadow-xs);
  transition:box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.tarjeta-modulo:hover{box-shadow:var(--shadow-sm); border-color:var(--border-strong); transform:translateY(-1px);}
.tarjeta-modulo .fila-top{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-2);}
.tarjeta-modulo .icono{
  width:38px; height:38px; border-radius:var(--radius-sm);
  background:var(--accentSoft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.tarjeta-modulo .icono svg{width:20px; height:20px;}
.tarjeta-modulo h3{font-size:var(--fs-16); font-weight:600; color:var(--text); letter-spacing:-.005em;}
.tarjeta-modulo p.desc{font-size:12.5px; color:var(--textDim); line-height:1.5; flex:1;}

.estado-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; padding:3px 8px; border-radius:var(--radius-pill);
  white-space:nowrap;
}
.estado-badge .punto{width:6px; height:6px; border-radius:50%; flex:none;}
.estado-badge.ok{background:var(--okSoft); color:var(--ok);}
.estado-badge.ok .punto{background:var(--ok);}
.estado-badge.error{background:var(--urgentSoft); color:var(--urgent);}
.estado-badge.error .punto{background:var(--urgent);}
.estado-badge.cargando{background:var(--surfaceAlt); color:var(--textDim);}
.estado-badge.cargando .punto{background:var(--textDim);}

.tarjeta-modulo .pie{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); padding-top:var(--sp-2); border-top:1px solid var(--border); margin-top:auto;}
.tarjeta-modulo .pie .meta-txt{font-size:11px; color:var(--textDim);}
.tarjeta-modulo .pie .ir{font-size:12px; font-weight:600; color:var(--accent); display:flex; align-items:center; gap:4px;}
.tarjeta-modulo:hover .pie .ir{color:var(--ok);}
.tarjeta-modulo.deshabilitada{opacity:.55; pointer-events:none;}

.chip-proximamente{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--textDim); background:var(--bg); border:1px dashed var(--border-strong);
  border-radius:var(--radius-pill); padding:2px 8px;
}

/* ===== KPI del inicio =============================================== */
.kpis-inicio{margin-bottom:26px;}
.kpis-cab{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:10px;
}
.kpis-alcance{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--textDim,#5B6779);
}
.kpis-nota{font-size:11px; color:var(--textDim,#5B6779);}
.kpis-fila{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
}
.kpi-c{
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:14px 16px; display:flex; flex-direction:column;
}
.kpi-et{
  font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--textDim,#5B6779);
}
.kpi-val{
  font-family:var(--font-display,'Sora',sans-serif); font-size:24px;
  font-weight:700; line-height:1.15; margin-top:6px;
  font-variant-numeric:tabular-nums; color:var(--text);
}
.kpi-sub{font-size:11.5px; color:var(--textDim,#5B6779); margin-top:3px;}
.kpi-barra{
  display:block; height:4px; border-radius:999px; margin-top:9px;
  background:var(--surfaceAlt); overflow:hidden;
}
.kpi-barra > span{display:block; height:100%; border-radius:999px;}
.kpi-cargando{
  grid-column:1/-1; color:var(--textDim,#5B6779); font-size:13px;
  justify-content:center; align-items:center; min-height:60px;
}

/* ===== Requiere atencion (inicio) =================================== */
/* Una tarjeta por aviso, como en la maqueta: punto de color, titulo, linea
   de detalle y el destino a la derecha. Sin el bloque gris alrededor -- las
   tarjetas ya se separan solas del fondo. */
.atencion{margin-bottom:28px;}
.atencion-cab{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}
.atencion-titulo{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--textDim,#5B6779);
}
.atencion-total{font-size:11px; color:var(--textDim,#5B6779);}
.atencion-cuerpo{display:flex; flex-direction:column; gap:8px;}
.aviso{
  display:flex; align-items:center; gap:12px; padding:11px 14px;
  border-radius:10px; background:var(--surface);
  border:1px solid var(--border); text-decoration:none; color:inherit;
  transition:border-color 160ms;
}
.aviso:hover{border-color:var(--accent,#1F3864);}
.aviso:focus-visible{outline:2px solid var(--accent,#1F3864); outline-offset:2px;}
.aviso-punto{flex:none; width:8px; height:8px; border-radius:50%;}
.aviso-punto.alta{background:var(--urgent);}
.aviso-punto.media{background:var(--warn);}
.aviso-punto.baja{background:var(--accent);}
.aviso-txt{flex:1; min-width:0;}
.aviso-titulo{display:block; font-size:13px; font-weight:600; color:var(--text);}
.aviso-detalle{display:block; font-size:11.5px; color:var(--textDim,#5B6779); margin-top:1px;}
.aviso-destino{
  flex:none; font-size:11.5px; font-weight:600; color:var(--accent,#1F3864);
}
.atencion-vacio, .atencion-cargando, .atencion-error{
  font-size:13px; color:var(--textDim,#5B6779); margin:0;
  padding:11px 14px; background:var(--surface);
  border:1px solid var(--border); border-radius:10px;
}
.atencion-error{color:var(--urgent); border-color:var(--urgent);}

/* ===== Ver como otra persona ======================================== */
/* La franja NO se puede pasar por alto a proposito: creer que ves un
   problema real cuando en realidad estas viendo la vista de otro es peor
   que no tener la funcion. */
.franja-suplantando{
  position:sticky; top:0; z-index:9999;
  display:flex; align-items:center; justify-content:center; gap:16px;
  background:var(--warn); color:#fff; padding:7px 16px;
  font-size:13px; font-weight:500;
}
.franja-suplantando a{
  color:#fff; text-decoration:underline; font-weight:600; white-space:nowrap;
}
.vercomo-wrap{position:relative;}
.vercomo-panel{
  position:absolute; right:0; top:calc(100% + 8px); width:330px; z-index:1000;
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; box-shadow:0 8px 26px rgba(16,32,54,.14); overflow:hidden;
}
.vercomo-header{
  padding:10px 14px; font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--textDim,#5B6779);
  border-bottom:1px solid var(--border);
}
#vercomo-buscar{
  width:100%; border:none; border-bottom:1px solid var(--border);
  padding:10px 14px; font:inherit; font-size:13px; outline:none;
  background:transparent; color:inherit;
}
#vercomo-lista{max-height:320px; overflow-y:auto;}
.vercomo-item{
  display:block; padding:9px 14px; text-decoration:none; color:inherit;
  border-bottom:1px solid var(--border);
}
.vercomo-item:last-child{border-bottom:none;}
.vercomo-item:hover{background:var(--surfaceAlt);}
.vercomo-nombre{display:block; font-size:13px; font-weight:600;}
.vercomo-meta{display:block; font-size:11.5px; color:var(--textDim,#5B6779); margin-top:1px;}
.vercomo-vacio{padding:14px; font-size:12.5px; color:var(--textDim,#5B6779);}
.vercomo-pie{
  padding:8px 14px; font-size:11.5px; color:var(--textDim,#5B6779);
  background:var(--surfaceAlt); border-top:1px solid var(--border);
}
.vercomo-roles{display:flex; flex-direction:column; padding:4px;}
.vercomo-rol{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left; font:inherit; font-size:12.5px; font-weight:500;
  background:none; border:none; border-radius:7px; padding:9px 10px;
  cursor:pointer; color:inherit; text-transform:capitalize;
}
.vercomo-rol:hover{background:var(--surfaceAlt);}
.vercomo-cuenta{
  font-family:var(--font-mono,monospace); font-size:11px; font-weight:700;
  color:var(--textDim,#5B6779); background:var(--surfaceAlt);
  border-radius:999px; padding:1px 8px;
}
.vercomo-volver{
  display:block; width:100%; text-align:left; font:inherit; font-size:11.5px;
  font-weight:600; color:var(--textDim,#5B6779); background:var(--surfaceAlt);
  border:none; border-bottom:1px solid var(--border);
  padding:8px 14px; cursor:pointer;
}
.vercomo-volver:hover{color:var(--accent,#1F3864);}

/* ===== Buscador de modulos (barra lateral) ========================== */
.buscar-modulo{
  /* Mismo ancho e insets que los .nav-item de abajo: la barra ya tiene su
     propio padding, asi que aca va 0 en horizontal.

     `flex:none` NO es decorativo. La barra es un flex en columna y su
     contenido desborda, asi que flexbox le quitaba altura al unico hijo que
     podia comprimir: este. Se veia achatado, y al escribir -- cuando el
     filtro escondia modulos y la barra dejaba de desbordar -- volvia a su
     tamano. Sin esta linea la altura de abajo es solo una sugerencia. */
  flex:none;
  display:flex; align-items:center; gap:var(--sp-3, 10px);
  height:42px; padding:0 var(--sp-3, 12px);
  margin:0 0 14px; border-radius:var(--radius-sm, 9px);
  background:var(--surfaceAlt, #EEF2F7); border:1px solid var(--border, #D8DFE9);
  color:var(--textDim,#5B6779);
}
.buscar-modulo svg{width:18px; height:18px; flex:none; opacity:.85;}
.buscar-modulo input{
  flex:1; min-width:0; border:none; background:none; outline:none;
  font:inherit; font-size:13.5px; color:var(--text,#16202E);
}
.sidebar-colapsada .buscar-modulo{padding:0; justify-content:center;}
.sidebar-colapsada .buscar-modulo input{display:none;}
.buscar-modulo input::placeholder{color:var(--textDim,#5B6779);}
.buscar-modulo:focus-within{border-color:var(--accent,#1F3864);}
.buscar-vacio{
  padding:10px 18px; font-size:12px; color:var(--textDim,#5B6779);
}

/* ===== Uso frecuente (inicio) ======================================= */
.frecuente{margin-bottom:26px;}
.frecuente-cab{display:flex; align-items:baseline; gap:10px; margin-bottom:12px;}
.frecuente-titulo{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--textDim,#5B6779);
}
.frecuente-nota{font-size:11px; color:var(--textDim,#5B6779);}
.frecuente-chips{display:flex; flex-wrap:wrap; gap:10px;}
.chip-frecuente{
  display:inline-flex; align-items:center; padding:7px 13px;
  border-radius:999px; border:1px solid var(--border);
  background:var(--surface); color:var(--textDim,#5B6779);
  font-size:12.5px; font-weight:500; white-space:nowrap; text-decoration:none;
  transition:border-color 160ms, color 160ms;
}
.chip-frecuente:hover{border-color:var(--accent,#1F3864); color:var(--accent,#1F3864);}
.chip-frecuente:focus-visible{outline:2px solid var(--accent,#1F3864); outline-offset:2px;}

.aviso-mas{
  align-self:flex-start; margin-top:2px; font:inherit; font-size:12.5px;
  font-weight:600; color:var(--accent,#1F3864); background:none;
  border:none; padding:6px 2px; cursor:pointer;
}
.aviso-mas:hover{text-decoration:underline;}
.aviso-mas:focus-visible{outline:2px solid var(--accent,#1F3864); outline-offset:2px;}
.chip-frecuente{gap:8px; padding-left:10px;}
.chip-frecuente svg{
  width:15px; height:15px; flex:none; color:var(--accent,#1F3864);
}

/* La matriz de permisos NO tiene su CSS aca (2026-09-02).
   Hasta hoy vivia en este archivo una copia del PRIMER diseño -- el que tenia
   los roles como filas -- y cuando la matriz se rehizo con los roles como
   columnas, esa copia quedo pisando a la nueva: `.matriz thead th.mz-rol`
   (0,2,2) le gana a `th.mz-rol` (0,1,1), asi que las 12 columnas de rol
   heredaban `min-width:210px` y `left:0` de un diseño que ya no existe. La
   pantalla se veia rota y el CSS nuevo era correcto.
   Su CSS vive en admin/templates/admin/panel.html, junto a la unica pantalla
   que la usa. Si algun dia se comparte, mover el bloque ENTERO, no copiarlo:
   dos copias de un mismo diseño se desincronizan y la que gana es la que
   tiene mas especificidad, no la mas nueva. */

/* ===================================================================== */
/* Barra de iconos del menu (2026-09-29, en pruebas). Ver _base.html y     */
/* static/js/barra.js. Solo tokens del tema: los temas del selector siguen */
/* funcionando. En modo barra, "sidebar-colapsada" esconde el panel.      */
/* ===================================================================== */
.app-shell.barra-modo{--sidebar-w:292px; --sidebar-w-collapsed:57px;}
/* align-items:stretch explicito: otra regla del kit le da center al menu y la
   columna de iconos quedaba a media altura, con el panel mas alto que la pantalla. */
.app-sidebar.menu-riel{flex-direction:row; align-items:stretch; padding:0; gap:0; overflow:hidden;}
.barra-riel{width:56px; flex:none; height:100%; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:var(--sp-3) 0; border-right:1px solid var(--border); background:var(--surfaceAlt); overflow-y:auto;}
.barra-ic{width:40px; height:40px; flex:none; border-radius:10px; border:0; background:none; color:var(--textDim);
  display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative;}
.barra-ic svg{width:20px; height:20px;}
.barra-ic:hover{background:var(--surface); color:var(--text);}
.barra-ic.activo{background:var(--accentSoft); color:var(--accent);}
.barra-ic[aria-pressed="true"]{background:var(--accentButton); color:var(--accentText);}
.barra-ic:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.barra-punto{position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%;
  background:var(--ok); box-shadow:0 0 0 2px var(--surfaceAlt);}
.barra-punto.alerta{background:var(--urgent);}
.barra-sep{width:24px; height:1px; background:var(--border); margin:4px 0;}
.barra-espacio{flex:1;}
.barra-panel{flex:1; min-width:0; min-height:0; height:100%; display:flex; flex-direction:column; gap:var(--sp-1);
  padding:var(--sp-4) var(--sp-2); overflow-y:auto;}
.barra-panel .barra-cat{display:none; margin-top:var(--sp-2);}
.barra-panel .barra-cat.actual,
.barra-panel.todo .barra-cat,
.barra-panel.buscando .barra-cat{display:block;}
.barra-panel:not(.todo) .barra-inicio{display:none;}
.barra-panel.buscando .barra-inicio{display:block;}
/* Todo el menu: titulos de categoria visibles (el problema del menu de hoy
   es que se pierden), con una linea que separa cada grupo. */
.barra-panel.todo .barra-cat + .barra-cat{border-top:1px solid var(--border); padding-top:var(--sp-2);}
.barra-panel.todo .barra-titulo{font-size:13.5px; padding:6px var(--sp-3) 4px;}
.barra-titulo{font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--text);
  padding:4px var(--sp-3) var(--sp-2); letter-spacing:-.01em;}
.barra-panel.buscando .barra-titulo{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--textDim);}
.app-shell.barra-modo.sidebar-colapsada .barra-panel{display:none;}
.menu-riel .sidebar-footer{margin-top:auto;}
.barra-clasico{display:block; font-size:11px; color:var(--textDim); text-decoration:underline; padding:6px var(--sp-3);}
.barra-clasico:hover{color:var(--text);}
/* Modulo sin permiso: se ve el nombre, bloqueado y sin enlace (2026-09-29). */
.nav-item.bloqueado{opacity:.5; cursor:not-allowed;}
.nav-item.bloqueado:hover{background:none; color:var(--textDim);}
.nav-item.bloqueado .candado{width:13px; height:13px; margin-left:auto; opacity:.9;}
.sidebar-colapsada .nav-item.bloqueado .candado{display:none;}