/* El formato del aplicativo de Baqueira (app.baqueira.ec), para la plataforma dentro de su área Financiero
   (2026-10-14). Se carga encima de panel.css solo en el servidor del aplicativo (servidor.tema: aplicativo); en la
   PC de Mauricio no existe.

   Casi todo es redefinir las variables de panel.css: si Dirección cambia la paleta, se cambia solo este archivo.
   El aplicativo es solo claro: «html:root» pesa más que el «:root» del modo oscuro de panel.css, así que este tema
   manda también con el sistema en oscuro. La cabecera, el logo, las iniciales y «Cerrar sesión» son los del
   aplicativo (base.html no los pinta con este tema). El menú también: con servidor.menu: aplicativo no hay menú
   lateral (las pestañas de Financiero son el menú); sin esa clave, el menú lateral se ve como el panel de Dirección.
   Los entregables (PDF, dashboards) tienen sus propias plantillas y no cambian. */
html:root {
  --fondo: #FFFFFF; --papel: #FFFFFF; --tinta: #0B293D; --texto: #0B1B2B; --tenue: #5B6576;
  --linea: #EDF0F4; --barra: #F8FAFC; --barra-texto: #0B293D; --barra-tenue: #334155; --barra-linea: #EDF0F4;
  --acento: #0B293D; --sobre-acento: #FFFFFF;
  --realce: #CBD5E1; --realce-suave: #F1F4F8; --realce-tinta: #0B293D;
  --ok: #15803D; --ok-suave: #ECFDF3; --warn: #B45309; --warn-suave: #FFF7E8;
  --bad: #B91C1C; --bad-suave: #FEF2F2; --neutro-suave: #F1F4F8; --fila-dudosa: #FFFBF2; --fila-alterna: #F8FAFC;
  --letra: "Libre Franklin", ui-sans-serif, system-ui, sans-serif;
  --titulos: "Raleway", "Libre Franklin", ui-sans-serif, system-ui, sans-serif;
  --cifras: "Libre Franklin", ui-sans-serif, system-ui, sans-serif;
  --ancho-menu: 264px;
  color-scheme: light;
}

body.tema-aplicativo { font: 400 14px/1.5 var(--letra); font-variant-numeric: tabular-nums; }
.tema-aplicativo h1 { font: 600 34px/1.15 var(--titulos); color: #0B293D; letter-spacing: -.01em; }
.tema-aplicativo h2 { font-family: var(--titulos); font-weight: 600; }
.tema-aplicativo h3 { font-weight: 600; }
.tema-aplicativo .eyebrow, .tema-aplicativo th { font-weight: 600; color: #8A93A2; }

/* El menú lateral, como el panel lateral de Dirección: 264 px, fondo #F8FAFC, ítem activo #E8EEF4 */
.tema-aplicativo .lateral { border-right: 1px solid var(--linea); padding: 16px 12px; gap: .25rem; }
.tema-aplicativo .lateral-marca { display: none; }
.tema-aplicativo .lateral-nav { gap: 2px; }
.tema-aplicativo .lateral-nav a { color: #334155; font-weight: 400; font-size: 14px; padding: 8px 12px; border-radius: 12px; }
.tema-aplicativo .lateral-nav a:hover { color: #0B293D; background: #EEF2F6; }
.tema-aplicativo .lateral-nav a.activo { color: #0B293D; background: #E8EEF4; font-weight: 500; }
.tema-aplicativo .lateral a:focus-visible { outline-color: #0B293D; }
.tema-aplicativo .lateral-grupo,
.tema-aplicativo .lateral-nav a.lateral-grupo { margin: 16px 0 4px; padding: 0 12px; font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: #8A93A2; }
.tema-aplicativo .lateral-nav a.lateral-grupo:hover,
.tema-aplicativo .lateral-nav a.lateral-grupo.activo { color: #0B293D; background: none; }
.tema-aplicativo .globo { background: #E8EEF4; color: #0B293D; font-weight: 600; }

/* Un solo menú, el del aplicativo (Rafael, 2026-10-14): con servidor.menu: aplicativo, base.html no pinta el menú
   lateral ni su botón (el aplicativo arma sus pestañas con /menu.json) y el contenido ocupa todo el ancho */
.app.menu-del-aplicativo { grid-template-columns: minmax(0, 1fr); }

/* Sin la barra de arriba: queda solo el botón que muestra u oculta el menú */
.tema-aplicativo .alternar-tema { margin: 16px 0 0 24px; width: 2.1rem; height: 2.1rem; border-color: var(--linea);
  border-radius: 10px; color: #5B6576; }
.tema-aplicativo .alternar-tema:hover { background: #F1F4F8; border-color: var(--linea); }
.tema-aplicativo .contenido { padding-top: 1rem; }

/* Tarjetas, pestañas y botones del aplicativo: bordes suaves y botones tipo píldora */
.tema-aplicativo .bloque, .tema-aplicativo .kpi, .tema-aplicativo .proceso, .tema-aplicativo .decision,
.tema-aplicativo .generacion, .tema-aplicativo .fotos-form { border-radius: 16px; }
.tema-aplicativo .aviso-banda { border-radius: 12px; }
.tema-aplicativo .pestanas { border-radius: 12px; background: #F1F4F8; }
.tema-aplicativo .pestanas a { border-radius: 9px; font-weight: 500; }
.tema-aplicativo .pestanas a.activo { box-shadow: 0 1px 2px rgba(11, 41, 61, .08); }
.tema-aplicativo .boton, .tema-aplicativo button.boton { border-radius: 999px; font-weight: 600; padding: .5rem 1.1rem; }
.tema-aplicativo .boton.chico { padding: .35rem .8rem; }
.tema-aplicativo .boton.secundario { background: #F1F4F8; color: #0B293D; }
.tema-aplicativo .boton:hover { filter: none; background: #13405E; }
.tema-aplicativo .boton.secundario:hover { background: #E8EEF4; }
.tema-aplicativo .chip { border-radius: 999px; font-weight: 600; }
.tema-aplicativo input, .tema-aplicativo select, .tema-aplicativo textarea { border-radius: 10px; }
.tema-aplicativo .kpi-v, .tema-aplicativo .resumen-decisiones .numero { font-weight: 600; }

/* La pantalla de entrar dentro del aplicativo («sin acceso», o la que pide un pase nuevo): sin el logo blanco de la
   plataforma, que no se ve sobre el fondo claro (el logo es el de la cabecera del aplicativo), y el aviso con el color
   de aviso del aplicativo, que se lee sobre blanco */
.tema-aplicativo .entrar-marca { display: none; }
.tema-aplicativo .entrar-aviso { color: var(--warn); background: var(--warn-suave); border-color: #F5D9A8; border-radius: 12px; }