/* ==========================================================================
   PLATAFORMA EBF — hoja de estilos
   Tokens copiados de marketing/Sistema_Identidad_EBF/assets/ebf-tokens.css
   (v1.0). Si cambia la identidad, se cambia allí y se copia aquí.
   Solo modo claro: el logo no puede ir sobre fondo oscuro (manual § 1.2).
   ========================================================================== */
:root {
  color-scheme: light;
  --ebf-azul: #00ABCE;          /* solo acento: filete, barra activa, datos */
  --ebf-negro: #201E20;
  --ebf-azul-texto: #00738D;    /* enlaces y texto en color (5,47:1) */
  --ebf-azul-oscuro: #005768;
  --ebf-azul-suave: #E6F6FA;
  --ebf-azul-borde: #B8E3EE;
  --ink-1: #201E20; --ink-2: #4A4A4C; --ink-3: #6E6F72; --ink-4: #9A9C9E;
  --sup-pagina: #FFFFFF; --sup-alterna: #F7F8F9; --sup-cita: #F2F4F5;
  --regla-fina: #E3E5E7; --regla-fuerte: #C9CCCE;
  --estado-bueno: #1F8A4C;
  --estado-aviso: #C98A00;      /* solo icono: como texto no llega a 3:1 */
  --estado-aviso-texto: #8A5F00;
  --estado-critico: #C2342F;
  --serie-1: #0089A8; --serie-2: #E2691F;
  --tipo-titulo: "Jost", "Century Gothic", "Segoe UI", Arial, sans-serif;
  --tipo-texto: "Inter", "Segoe UI", Arial, Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--sup-pagina); color: var(--ink-1);
  font-family: var(--tipo-texto); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ebf-azul-texto); text-underline-offset: 2px; }
a:hover { color: var(--ebf-azul-oscuro); }
img { max-width: 100%; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tenue { color: var(--ink-3); }
.sub { display: block; font-size: 12px; color: var(--ink-3); }
.neg { color: var(--estado-critico); }
.pos { color: var(--estado-bueno); }

/* ---- Estructura -------------------------------------------------------- */
.marco { display: flex; flex-wrap: wrap; min-height: 100vh; }
.lateral {
  flex: 1 1 248px; max-width: 272px; border-right: 1px solid var(--regla-fina);
  display: flex; flex-direction: column; padding: 32px 0 24px;
}
.lateral .logo { padding: 0 24px 40px; }
.lateral .logo img { width: 184px; height: auto; display: block; }
.menu { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
.menu a, .menu span {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px;
  font-size: 14px; color: var(--ink-2); text-decoration: none; border-left: 3px solid transparent;
}
.menu a:hover { color: var(--ink-1); background: var(--sup-alterna); }
.menu a[aria-current="page"] { color: var(--ink-1); font-weight: 500; border-left-color: var(--ebf-azul); background: var(--sup-alterna); }
.menu span { color: var(--ink-3); cursor: default; }
.menu svg { flex: none; }
.menu-rotulo { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 32px 24px 8px; }
.yo { margin-top: auto; padding: 24px 24px 0; border-top: 1px solid var(--regla-fina); font-size: 13px; }
.yo strong { display: block; font-weight: 500; }
.yo a { margin-right: 12px; }
.contenido { flex: 999 1 560px; min-width: 0; padding: 40px 56px 64px; }
.ancho { max-width: 1120px; }
@media (max-width: 860px) {
  .lateral { max-width: none; flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--regla-fina); padding: 20px 0 16px; }
  .lateral .logo { padding-bottom: 16px; }
  .menu { flex-direction: row; flex-wrap: wrap; }
  .menu-rotulo, .menu-futuro { display: none; }
  .yo { margin-top: 12px; padding-top: 12px; }
  .contenido { padding: 24px 16px 48px; }
}

/* ---- Tipografía ------------------------------------------------------- */
h1 { font-family: var(--tipo-titulo); font-weight: 400; font-size: 34px; line-height: 1.15; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h2.rotulo, .rotulo {
  font-family: var(--tipo-texto); font-size: 12px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--regla-fina);
  padding-bottom: 8px; margin: 0 0 16px;
}
.antetitulo { margin: 0 0 4px; font-size: 13px; color: var(--ink-3); }
.etiqueta { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.nota { font-size: 12px; color: var(--ink-3); max-width: 72ch; margin: 12px 0 0; }
.migas { margin: 0 0 16px; font-size: 13px; color: var(--ink-3); }

.cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 1px solid var(--regla-fina); padding-bottom: 24px; }
.cabecera-dato { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; color: var(--ink-2); }
.separador { color: var(--regla-fuerte); }

/* ---- Estado: siempre icono + etiqueta, nunca solo color --------------- */
.estado { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.estado svg { flex: none; }
.estado.bien { color: var(--estado-bueno); }
.estado.aviso { color: var(--estado-aviso-texto); }
.estado.aviso svg { stroke: var(--estado-aviso); }
.estado.critico { color: var(--estado-critico); }
.estado.neutro { color: var(--ink-3); font-weight: 400; }

.caja-aviso { border-left: 3px solid var(--estado-aviso); background: #FBF6EA; padding: 14px 18px; margin: 0 0 24px; font-size: 14px; max-width: 900px; }
.caja-aviso.critico { border-left-color: var(--estado-critico); background: #FBEDEC; }
.caja-aviso.info { border-left-color: var(--ebf-azul); background: var(--ebf-azul-suave); }
.caja-aviso p { margin: 4px 0 0; }

/* ---- Cifras ----------------------------------------------------------- */
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--regla-fina); }
.cifras > div { padding: 24px 24px 28px; border-left: 1px solid var(--regla-fina); min-width: 0; }
.cifras > div:first-child { border-left: 0; padding-left: 0; }
.cifras.con-filete { border-top: 1px solid var(--regla-fuerte); }
.cifra { font-size: 32px; line-height: 1.05; font-variant-numeric: tabular-nums; margin-top: 10px; overflow-wrap: anywhere; }
.cifra small { font-size: 18px; color: var(--ink-3); }
.cifra-pie { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
@media (max-width: 860px) {
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .cifra { font-size: 26px; }
}

/* ---- Columnas --------------------------------------------------------- */
.columnas { display: flex; flex-wrap: wrap; gap: 48px 56px; margin-top: 48px; }
.col-ancha { flex: 3 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 48px; }
.col-estrecha { flex: 2 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 48px; }
section { min-width: 0; }

/* ---- Tablas ----------------------------------------------------------- */
.desliza { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tabla th { text-align: left; font-weight: 600; color: var(--ink-2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--regla-fuerte); padding: 8px 12px; white-space: nowrap; }
table.tabla td { border-bottom: 1px solid var(--regla-fina); padding: 12px; vertical-align: top; }
table.tabla th:first-child, table.tabla td:first-child { padding-left: 0; }
table.tabla th:last-child, table.tabla td:last-child { padding-right: 0; }
table.tabla th.num { text-align: right; }
table.tabla tbody tr:last-child td { border-bottom: 1px solid var(--regla-fuerte); }
table.tabla tr.total td { font-weight: 600; }
table.filas-vivas tbody tr:hover td { background: var(--sup-alterna); }
table.tabla.compacta td { padding: 8px 12px; }

dl.datos { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr); gap: 10px 24px; margin: 0; font-size: 14px; }
dl.datos dt { color: var(--ink-3); font-size: 13px; }
dl.datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.lista-estado { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.lista-estado li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--regla-fina); }

/* ---- Barras ----------------------------------------------------------- */
.barras-h { display: flex; flex-direction: column; gap: 14px; font-size: 13px; }
.barras-h .fila { display: flex; justify-content: space-between; gap: 12px; }
.barras-h .pista { height: 8px; background: var(--sup-cita); margin-top: 6px; }
.barras-h .pista div { height: 8px; background: var(--serie-1); }

.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; height: 72px; }
.semana div { background: var(--ebf-azul); min-height: 2px; }
.semana div.sin-dato { background: var(--sup-cita); height: 72px; }
.semana-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 8px; font-size: 11px; color: var(--ink-3); text-align: center; }

.grafico { display: flex; gap: 12px; }
.grafico .eje { display: flex; flex-direction: column; justify-content: space-between; height: 194px; margin-top: 33px; line-height: 14px; font-size: 11px; color: var(--ink-3); text-align: right; width: 64px; font-variant-numeric: tabular-nums; }
.grafico .area { flex: 1; min-width: 0; }
.grafico .lienzo { position: relative; height: 220px; border-bottom: 1px solid var(--regla-fuerte); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; }
.grafico .rejilla { position: absolute; left: 0; right: 0; border-top: 1px solid var(--regla-fina); }
.grafico .barra { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.grafico .barra span { font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.grafico .barra div { width: 40px; max-width: 70%; background: var(--serie-1); }
.grafico .barra.actual span { color: var(--ink-1); font-weight: 600; }
.grafico .etiquetas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 8px; font-size: 12px; color: var(--ink-2); text-align: center; }

/* ---- Formularios y botones ------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 0 18px; font: inherit; font-size: 14px; text-decoration: none; cursor: pointer;
  color: #FFFFFF; background: var(--ebf-azul-texto); border: 1px solid var(--ebf-azul-texto); border-radius: 0;
}
.boton:hover { color: #FFFFFF; background: var(--ebf-azul-oscuro); border-color: var(--ebf-azul-oscuro); }
.boton.secundario { color: var(--ink-1); background: #FFFFFF; border-color: var(--regla-fuerte); }
.boton.secundario:hover { background: var(--sup-alterna); color: var(--ink-1); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton-texto { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--ebf-azul-texto); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 32px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; margin: 24px 0 0; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo.crece { flex: 1 1 300px; }
.campo label, .campo legend { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 0; }
input[type=text], input[type=search], input[type=email], input[type=password], select {
  min-height: 44px; padding: 0 14px; font: inherit; font-size: 14px; color: var(--ink-1);
  background: #FFFFFF; border: 1px solid var(--regla-fuerte); border-radius: 0; max-width: 100%;
}
input:focus, select:focus, .boton:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--ebf-azul-texto); outline-offset: 2px; }
.casilla { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); min-height: 32px; }
.casilla input { width: 16px; height: 16px; accent-color: var(--ebf-azul-texto); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.segmentos { display: flex; flex-wrap: wrap; }
.segmentos a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 13px; color: var(--ink-2); text-decoration: none; border: 1px solid var(--regla-fuerte); margin-left: -1px; }
.segmentos a:first-child { margin-left: 0; }
.segmentos a[aria-current="true"] { color: #FFFFFF; background: var(--ink-1); border-color: var(--ink-1); position: relative; }
.formulario { display: grid; gap: 16px; max-width: 520px; }
.formulario .campo input, .formulario .campo select { width: 100%; }

/* ---- Interruptor «Cliente activo» ------------------------------------- */
.form-interruptor { margin: 0; display: inline-flex; }
.interruptor { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; background: none; border: 0; font: inherit; font-size: 14px; color: var(--ink-1); cursor: pointer; }
.pista-interruptor { position: relative; width: 40px; height: 22px; border: 1px solid var(--regla-fuerte); background: var(--sup-cita); border-radius: 11px; transition: background .15s; flex: none; }
.pista-interruptor span { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; border: 1px solid var(--regla-fuerte); transition: left .15s; }
.interruptor[aria-checked="true"] .pista-interruptor { background: var(--ebf-azul-texto); border-color: var(--ebf-azul-texto); }
.interruptor[aria-checked="true"] .pista-interruptor span { left: 20px; border-color: var(--ebf-azul-texto); }
.interruptor:hover .pista-interruptor { border-color: var(--ebf-azul-texto); }
@media (prefers-reduced-motion: reduce) { .pista-interruptor, .pista-interruptor span { transition: none; } }
@media print { .interruptor .pista-interruptor { display: none; } }

/* ---- Pestañas --------------------------------------------------------- */
.pestanas { overflow-x: auto; margin-top: 32px; border-bottom: 1px solid var(--regla-fina); }
.pestanas nav { display: flex; }
.pestanas a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; margin-right: 28px; font-size: 14px; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.pestanas a:hover { color: var(--ink-1); }
.pestanas a[aria-current="page"] { color: var(--ink-1); font-weight: 500; border-bottom-color: var(--ebf-azul); }

/* ---- Paginación ------------------------------------------------------- */
.paginacion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; font-size: 13px; color: var(--ink-2); }
.paginas { display: flex; }
.paginas a, .paginas span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--regla-fuerte); margin-left: -1px; text-decoration: none; color: var(--ink-2); }
.paginas a[aria-current="page"] { color: var(--ink-1); background: var(--sup-alterna); font-weight: 500; }

/* ---- Bloques en directo ---------------------------------------------- */
.en-directo[aria-busy="true"] { color: var(--ink-3); font-size: 13px; padding: 24px 0; }
.cargando { display: inline-flex; align-items: center; gap: 10px; }
.cargando::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--regla-fuerte); border-top-color: var(--ebf-azul-texto); border-radius: 50%; animation: gira 0.9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cargando::before { animation: none; } }

/* ---- Acceso ----------------------------------------------------------- */
.acceso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.acceso-caja { width: 100%; max-width: 400px; }
.acceso-caja img { width: 220px; height: auto; display: block; margin-bottom: 48px; }
.acceso-caja h1 { font-size: 27px; margin-bottom: 24px; }
.acceso-caja .formulario { max-width: none; }

.pie { margin-top: 64px; padding-top: 16px; border-top: 1px solid var(--regla-fina); font-size: 11px; color: var(--ink-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }

/* ---- Impresión / PDF -------------------------------------------------- */
.solo-impresion { display: none; }
@media print {
  @page { size: A4; margin: 20mm 20mm 20mm 25mm; }
  body { font-size: 10.5pt; }
  .lateral, .pestanas, .filtros, .acciones, .no-imprimir, .paginacion { display: none !important; }
  .solo-impresion { display: block; }
  .contenido { padding: 0; }
  .columnas { gap: 24px; }
  a { color: var(--ink-1); text-decoration: none; }
  section, tr { break-inside: avoid; }
}