/* =========================================================================
   ELANIO - sistema visual (LMC)
   Fuente unica de color, radio, espacio y tipografia. Cerrado por J el 06/10/2026.
   Regla dura: ningun hex fuera de :root. Todo componente consume estas variables.
   Plano: sin sombras ni degradados. Radio maximo 4 px. Sin CDN: fuentes en fonts/.
   ========================================================================= */

:root {
  /* --- Superficies y tinta (tokens de web lmc/public/assets/styles.css) --- */
  --bg: #ffffff;
  --panel: #f7f8f9;
  --line: #e6e8eb;
  --ink: #1f2328;
  --ink-soft: #5c6470;
  --on-ink: #ffffff;          /* texto sobre relleno de tinta (grado A) */

  /* --- Acento: solo accion y aviso. Texto en acento SIEMPRE --accent-ink --- */
  --accent: #ff4b00;          /* rellenos, reglas, puntos, foco. Con texto encima: tinta */
  --accent-ink: #d63f00;      /* texto en acento (enlaces, titulos de aviso, cifras de alerta) */
  --sel: #fff1eb;             /* fila seleccionada */

  /* --- Graficos --- */
  --chart-contratado: #9aa1ab;
  --chart-serie2: #3d5a80;
  --chart-exceso: var(--accent);
  --chart-umbral: var(--ink);
  --chart-rejilla: var(--line);

  /* --- Tipografia (woff2 locales, ver @font-face) --- */
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --fs-micro: 12px;           /* rotulos en mayusculas, leyendas */
  --fs-tabla: 13px;
  --fs-ui: 14px;
  --fs-titulo-sec: 14px;      /* titulo de seccion (mayusculas) */
  --fs-titulo: 20px;          /* titulo de pagina (mayusculas) */
  --fs-kpi: 24px;             /* cifra de tarjeta KPI (mono) */
  --fs-wordmark: 17px;
  --tracking-titulo: .06em;
  --tracking-wordmark: .16em;

  /* --- Radio (maximo 4 px) y espacio --- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 3px;
  --r-3: 4px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* --- Geometria --- */
  --fila-min: 36px;
  --fila: 40px;
  --fila-max: 44px;
  --header-h: 56px;
  --nav-w: 216px;
  --panel-w: 480px;
  --regla-w: 48px;            /* regla naranja bajo titulos: 48 x 3 px */
  --regla-h: 3px;
  --buho-w: 44px;             /* buho del header: 44 x 31 px */
  --buho-h: 31px;
  --wordmark-h: 12.27px;      /* wordmark.svg (caja 0,722 em: mayuscula 0,698 + rebase de la O) a 17 px */
  --punto: 8px;               /* punto de cierre < 5 dias */
  --ancho-min: 1280px;        /* escritorio primero */
}

/* --- IBM Plex (SIL OFL 1.1, fonts/OFL.txt). Copia de mochuelo_v2.0/frontend/fonts --- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/IBMPlexSans-Bold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/IBMPlexMono-Bold.woff2") format("woff2"); }

/* =========================================================================
   Base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
img { max-width: 100%; }
.lockup-muestra { width: 360px; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Todo dato (euros, %, fechas, expedientes, CPV, NIF, DIR3) va en mono */
.dato, .num, code, kbd, samp, time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.num { text-align: right; white-space: nowrap; }

.suave { color: var(--ink-soft); }
.oculto-accesible {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Titulos: Plex Sans 700, mayusculas, .06em, regla naranja 48 x 3 debajo --- */
.titulo, .titulo-sec {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-titulo);
  line-height: 1.2;
}
.titulo { font-size: var(--fs-titulo); }
.titulo-sec { font-size: var(--fs-titulo-sec); }
.titulo::after, .titulo-sec::after {
  content: "";
  display: block;
  width: var(--regla-w);
  height: var(--regla-h);
  margin-top: var(--sp-2);
  background: var(--accent);
}
.rotulo {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-titulo);
  color: var(--ink-soft);
}

/* =========================================================================
   Estructura de aplicacion: cabecera + navegacion lateral + principal
   Escritorio primero (min. 1280 px). En movil solo ficha y avisos (ver @media al final).
   ========================================================================= */
.app {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  grid-template-rows: auto var(--header-h) minmax(0, 1fr);
  min-width: var(--ancho-min);
  min-height: 100vh;
}

/* --- Cabecera: buho en tinta 44x31 + wordmark 17 px | cliente en ink-soft --- */
.cabecera {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.marca { display: flex; align-items: center; gap: var(--sp-3); color: var(--ink); }
.marca:hover { text-decoration: none; }
.marca-buho { width: var(--buho-w); height: var(--buho-h); flex: none; }
.marca-wordmark { height: var(--wordmark-h); width: auto; flex: none; }
.cabecera-sep { width: 1px; height: var(--sp-5); background: var(--line); flex: none; }
.cabecera-cliente { color: var(--ink-soft); font-weight: 500; white-space: nowrap; }
.cabecera-fin { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); color: var(--ink-soft); white-space: nowrap; }
.cabecera-fin a { color: var(--ink); }

/* --- Navegacion lateral --- */
.nav {
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: var(--sp-4) var(--sp-3);
}
.nav-grupo + .nav-grupo { margin-top: var(--sp-5); }
.nav-grupo .rotulo { display: block; padding: 0 var(--sp-3) var(--sp-2); }
.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--fila-min);
  padding: 0 var(--sp-3);
  border-radius: var(--r-1);
  color: var(--ink);
  font-weight: 500;
}
.nav-item:hover { background: var(--line); text-decoration: none; }
.nav-item[aria-current="page"] { background: var(--ink); color: var(--on-ink); }
.nav-cuenta { font-family: var(--font-mono); font-size: var(--fs-micro); }

.nav { grid-row: 3; grid-column: 1; }
.principal { grid-row: 3; grid-column: 2; padding: var(--sp-5); min-width: 0; }
.principal > * + * { margin-top: var(--sp-5); }
.cabeza-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); }
.cabeza-pagina p { color: var(--ink-soft); margin-top: var(--sp-3); }
.cabeza-pagina > .acciones { flex: none; flex-wrap: nowrap; }
/* Enlaces de consulta (documentos, origen): en tinta subrayados; el acento queda para accion y aviso */
.lista-docs a, .enlace-tinta { color: var(--ink); text-decoration: underline; }

/* --- Banda MAQUETA (rotulado obligatorio de datos ilustrativos) --- */
.banda-maqueta {
  grid-column: 1 / -1;
  padding: var(--sp-1) var(--sp-5);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-micro);
  color: var(--ink-soft);
}
.maqueta {
  display: inline-block;
  padding: 0 var(--sp-1);
  border: 1px dashed var(--ink-soft);
  border-radius: var(--r-1);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-titulo);
  color: var(--ink-soft);
  line-height: 18px;
  white-space: nowrap;
  vertical-align: middle;
}

/* =========================================================================
   Botones
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--fila-min);
  padding: 0 var(--sp-4);
  border: 1px solid var(--ink);
  border-radius: var(--r-2);
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { text-decoration: none; background: var(--panel); }
/* Primario: acento con texto en TINTA (blanco sobre el acento no llega a 4,5:1) */
.btn-primario { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn-primario:hover { background: var(--accent); border-color: var(--ink); }
.btn-texto { border-color: transparent; background: transparent; padding: 0 var(--sp-2); }
.btn-texto:hover { background: var(--line); }
.btn-peq { height: 28px; padding: 0 var(--sp-3); font-size: var(--fs-tabla); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink-soft);
  cursor: not-allowed;
}
.acciones { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* =========================================================================
   Formularios
   ========================================================================= */
.campo { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.campo-etiqueta { font-size: var(--fs-tabla); font-weight: 600; color: var(--ink); }
.campo-ayuda { font-size: var(--fs-micro); color: var(--ink-soft); }
.entrada, .selector {
  height: var(--fila-min);
  padding: 0 var(--sp-3);
  border: 1px solid var(--ink-soft);
  border-radius: var(--r-1);
  background: var(--bg);
  color: var(--ink);
  min-width: 0;
}
.entrada::placeholder { color: var(--ink-soft); opacity: 1; }
.entrada:focus, .selector:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--ink); }
.entrada-num { font-family: var(--font-mono); text-align: right; }
.entrada[aria-invalid="true"] { border-color: var(--accent); }
/* Error de campo: texto en tinta (vale sobre blanco y sobre panel) + punto de acento */
.campo-error { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-micro); font-weight: 600; color: var(--ink); }
.campo-error::before { content: ""; width: var(--punto); height: var(--punto); border-radius: var(--r-3); background: var(--accent); flex: none; }
.casilla { display: inline-flex; align-items: center; gap: var(--sp-2); }
.casilla input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }

/* --- Barra de filtros --- */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.filtros .campo-busqueda { flex: 1 1 260px; }
.chips { display: flex; gap: var(--sp-1); }
.chip-filtro {
  height: var(--fila-min);
  min-width: var(--fila-min);
  padding: 0 var(--sp-2);
  border: 1px solid var(--ink-soft);
  border-radius: var(--r-1);
  background: var(--bg);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}
.chip-filtro[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* =========================================================================
   Grados A / B / C y punto de cierre (< 5 dias). Sin rojo ni verde semanticos.
   ========================================================================= */
.grado-celda { display: inline-flex; align-items: center; gap: 6px; }
.grado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1;
}
.grado-a { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.grado-b { background: var(--bg); border-color: var(--ink); color: var(--ink); }
.grado-c { background: transparent; color: var(--ink-soft); }
.punto { width: var(--punto); height: var(--punto); border-radius: var(--r-3); background: var(--accent); flex: none; }
.punto-vacio { background: transparent; }
.grado-grande { width: 40px; height: 36px; font-size: 18px; }

/* =========================================================================
   Cita de PCAP: chip con pagina + texto literal
   ========================================================================= */
.cita { display: flex; align-items: flex-start; gap: var(--sp-2); }
.cita-chip {
  flex: none;
  padding: 0 var(--sp-1);
  border: 1px solid var(--ink);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 18px;
  white-space: nowrap;
  color: var(--ink);
}
.cita-texto {
  padding-left: var(--sp-2);
  border-left: 2px solid var(--line);
  font-size: var(--fs-tabla);
  color: var(--ink);
}
.cita-texto::before { content: "\00AB"; }
.cita-texto::after { content: "\00BB"; }

/* =========================================================================
   Tabla densa (13 px, filas de 40 px)
   ========================================================================= */
.tabla-marco { border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-tabla); }
.tabla th {
  height: var(--fila-min);
  padding: 0 var(--sp-3);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: var(--tracking-titulo);
  color: var(--ink-soft);
  white-space: nowrap;
}
.tabla th.num { text-align: right; }
.tabla td {
  height: var(--fila);
  padding: var(--sp-1) var(--sp-3);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: var(--panel); }
.tabla tbody tr[aria-selected="true"] td { background: var(--sel); }
.tabla td a { color: var(--ink); }
.tabla .orden::after { content: " \2193"; color: var(--ink); }
.tabla .apretada { width: 1%; white-space: nowrap; }
.recorta { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* anchos de columna (colgroup); la columna sin clase absorbe el resto */
.w-84 { width: 84px; } .w-160 { width: 160px; } .w-170 { width: 170px; } .w-100 { width: 100px; } .w-104 { width: 104px; } .w-130 { width: 130px; } .w-180 { width: 180px; }
.w-56 { width: 56px; } .w-64 { width: 64px; } .w-72 { width: 72px; } .w-76 { width: 76px; } .w-92 { width: 92px; } .w-96 { width: 96px; } .w-108 { width: 108px; } .w-118 { width: 118px; } .w-124 { width: 124px; } .w-136 { width: 136px; } .w-140 { width: 140px; } .w-150 { width: 150px; } .w-152 { width: 152px; } .w-190 { width: 190px; } .w-220 { width: 220px; }
.tabla-pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--line);
  background: var(--panel);
  font-size: var(--fs-tabla);
  color: var(--ink-soft);
}
.fuerte { font-weight: 700; }
.celda-doble { line-height: 1.25; }

/* =========================================================================
   Panel deslizante (derecha). Plano: borde, sin sombra.
   ========================================================================= */
.panel-lateral {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--panel-w);
  overflow-y: auto;
  background: var(--bg);
  border-left: 1px solid var(--ink);
}
.panel-lateral-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.panel-lateral-cuerpo { padding: var(--sp-4) var(--sp-5); }
.panel-lateral-cuerpo > * + * { margin-top: var(--sp-5); }
.panel-lateral-pie { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); }
/* Sin JavaScript: el panel del radar se abre con radar.html#ficha-rapida (:target) y se cierra con "#" */
.panel-objetivo { display: none; }
.panel-objetivo:target { display: block; }
.panel-incrustado { position: static; width: auto; max-width: var(--panel-w); border: 1px solid var(--ink); border-radius: var(--r-3); }

/* --- Lista de definiciones compacta (ficha) --- */
.datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); font-size: var(--fs-tabla); }
.datos dt { color: var(--ink-soft); }
.datos dd { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }

/* =========================================================================
   Tarjeta de indicador
   ========================================================================= */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.kpi { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg); }
.kpi-valor {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-kpi);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.kpi-nota { display: block; margin-top: var(--sp-1); font-size: var(--fs-micro); color: var(--ink-soft); }
.kpi-alerta { border-top: 3px solid var(--accent); }
.kpi-alerta .kpi-valor { color: var(--accent-ink); }

/* =========================================================================
   Palanca: deslizador + entrada numerica
   ========================================================================= */
.palancas-grupo { padding: var(--sp-4) 0; border-top: 1px solid var(--line); }
.palancas-grupo:first-of-type { border-top: 0; padding-top: 0; }
.palancas-grupo > * + * { margin-top: var(--sp-3); }
/* la legend flota dentro del grupo para no partir el filete superior del fieldset */
.palancas-grupo legend { float: left; width: 100%; margin-bottom: var(--sp-2); }
.palancas-grupo legend + * { clear: both; }
.palanca { display: grid; grid-template-columns: minmax(0, 1fr) 72px 44px; align-items: center; gap: var(--sp-1) var(--sp-2); }
.palanca-etiqueta { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-tabla); font-weight: 600; }
.palanca-etiqueta .suave { font-weight: 400; font-family: var(--font-mono); font-size: var(--fs-micro); white-space: nowrap; }
.palanca input[type="range"] { width: 100%; margin: 0; accent-color: var(--accent); height: 20px; }
.palanca .entrada { width: 100%; height: 32px; padding: 0 var(--sp-2); }
.palanca-unidad { font-size: var(--fs-micro); color: var(--ink-soft); font-family: var(--font-mono); }

/* =========================================================================
   Tarjeta de cuello de botella
   ========================================================================= */
.cuello {
  padding: var(--sp-4);
  border: 1px solid var(--ink);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-3);
  background: var(--bg);
}
.cuello-rotulo { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-titulo); color: var(--accent-ink); }
.cuello-recurso { margin-top: var(--sp-1); font-size: 18px; font-weight: 700; }
.cuello-cifras { display: flex; gap: var(--sp-6); margin-top: var(--sp-3); }
.cuello-cifras .kpi-valor { font-size: 20px; }
.cuello p { margin-top: var(--sp-3); font-size: var(--fs-tabla); }

/* =========================================================================
   Avisos (accion / atencion). Acento solo en el filete y en el titulo.
   ========================================================================= */
.aviso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-1);
  background: var(--bg);
}
.aviso-icono { width: 16px; height: 16px; margin-top: 2px; color: var(--accent-ink); }
.aviso-titulo { font-weight: 700; color: var(--accent-ink); }
.aviso-cuerpo { grid-column: 2; font-size: var(--fs-tabla); }
.aviso-cuerpo a { color: var(--accent-ink); font-weight: 600; }
.aviso-info { border-left-color: var(--ink); }
.aviso-info .aviso-titulo, .aviso-info .aviso-icono { color: var(--ink); }
.aviso-info .aviso-cuerpo a { color: var(--ink); text-decoration: underline; }
.avisos > * + * { margin-top: var(--sp-2); }

/* =========================================================================
   Graficos: barras apiladas contratado / recomendado / exceso, umbral 100 %
   Escala comun 0-125 %: el umbral cae en el 80 % del carril.
   ========================================================================= */
.grafico { position: relative; padding-top: var(--sp-5); }
.grafico-fila {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr) 72px;
  align-items: center;
  gap: var(--sp-3);
  height: var(--fila);
  font-size: var(--fs-tabla);
}
.grafico-carril { position: relative; height: 18px; display: flex; }
.grafico-capa { position: absolute; top: var(--sp-5); bottom: 0; left: calc(184px + var(--sp-3)); right: calc(72px + var(--sp-3)); pointer-events: none; }
.rejilla { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--chart-rejilla); }
.umbral { position: absolute; top: -6px; bottom: 0; width: 0; border-left: 2px dashed var(--chart-umbral); z-index: 2; }
.umbral-rotulo { position: absolute; top: -22px; transform: translateX(-50%); font-family: var(--font-mono); font-size: var(--fs-micro); white-space: nowrap; }
.grafico-eje { position: relative; height: 20px; margin-left: calc(184px + var(--sp-3)); margin-right: calc(72px + var(--sp-3)); font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-soft); }
.grafico-eje span { position: absolute; top: var(--sp-1); transform: translateX(-50%); }
.seg { height: 100%; position: relative; z-index: 1; }
.seg-contratado { background: var(--chart-contratado); }
.seg-recomendado { background: var(--chart-serie2); }
.seg-exceso { background: var(--chart-exceso); }
.grafico-valor { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.grafico-valor.exceso { color: var(--accent-ink); font-weight: 700; }
.leyenda { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-micro); color: var(--ink-soft); }
.leyenda span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.muestra { width: 12px; height: 12px; flex: none; }
.muestra-umbral { width: 14px; height: 0; border-top: 2px dashed var(--chart-umbral); }

/* --- Barras de recursos (requerido frente a disponible) --- */
.recurso + .recurso { margin-top: var(--sp-3); }
.recurso-cabeza { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-tabla); }
.recurso-carril { position: relative; height: 10px; margin-top: var(--sp-1); background: var(--line); }
.recurso-uso { height: 100%; background: var(--chart-serie2); }
.recurso-uso.exceso { background: var(--chart-exceso); }

/* =========================================================================
   Bloques y rejillas de pagina
   ========================================================================= */
.bloque { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg); }
.bloque > * + * { margin-top: var(--sp-4); }
.bloque-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.dos-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); }
.simulador { display: grid; grid-template-columns: 304px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.simulador-derecha > * + * { margin-top: var(--sp-5); }
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-5); align-items: start; }
.ficha-principal > * + *, .ficha-lateral > * + * { margin-top: var(--sp-5); }
.ficha-titulo { font-size: 18px; font-weight: 700; line-height: 1.3; }
.migas { font-size: var(--fs-tabla); color: var(--ink-soft); }
.migas a { color: var(--ink); text-decoration: underline; }
.etiquetas { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-tabla); color: var(--ink-soft); }
.etiquetas .dato { color: var(--ink); }
.estado { font-weight: 600; }
.estado-no { font-weight: 700; color: var(--accent-ink); }
.estado-revisar { font-weight: 600; color: var(--ink-soft); }
.solo-movil { display: none; }

/* --- Muestras de tokens (componentes.html) --- */
.paleta { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); }
.paleta figure { border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; font-size: var(--fs-micro); }
.paleta figcaption { padding: var(--sp-2); }
.paleta-color { height: 48px; border-bottom: 1px solid var(--line); }
.c-bg { background: var(--bg); } .c-panel { background: var(--panel); } .c-line { background: var(--line); }
.c-ink { background: var(--ink); } .c-ink-soft { background: var(--ink-soft); } .c-accent { background: var(--accent); }
.c-accent-ink { background: var(--accent-ink); } .c-sel { background: var(--sel); } .c-contratado { background: var(--chart-contratado); }
.c-serie2 { background: var(--chart-serie2); }
.fondo-tinta { background: var(--ink); color: var(--on-ink); padding: var(--sp-5); border-radius: var(--r-3); }
.fondo-tinta > * + * { margin-top: var(--sp-3); }
.nota-oscura { font-size: var(--fs-micro); color: var(--on-ink); }
.muestrario > section { padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.muestrario > section > * + * { margin-top: var(--sp-4); }
.fila-demo { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.nota { font-size: var(--fs-micro); color: var(--ink-soft); }

/* =========================================================================
   Acceso
   ========================================================================= */
.acceso { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) 480px; }
.acceso-marca { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-6); padding: var(--sp-6); background: var(--panel); border-right: 1px solid var(--line); }
.acceso-lockup { width: 360px; max-width: 100%; height: auto; }
.acceso-lema { max-width: 560px; font-size: 18px; line-height: 1.5; }
.acceso-form { display: flex; flex-direction: column; justify-content: center; padding: var(--sp-6); }
.acceso-form form > * + * { margin-top: var(--sp-4); }
.acceso-form .btn { width: 100%; }

/* =========================================================================
   Informe A4 imprimible
   ========================================================================= */
.informe { background: var(--panel); }
.hoja {
  width: 210mm;
  min-height: 297mm;
  margin: var(--sp-5) auto;
  padding: 14mm 14mm 12mm;
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.hoja-cabeza { display: flex; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--ink); }
.hoja-pie { margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-soft); }
.hoja .tabla { font-size: 11px; }
.hoja .tabla th { font-size: 10px; height: 28px; padding: 0 var(--sp-2); }
.hoja .tabla td { height: 30px; padding: var(--sp-1) var(--sp-2); }
.hoja .kpis { gap: var(--sp-2); }
.hoja .kpi { padding: var(--sp-2) var(--sp-3); }
.hoja .kpi-valor { font-size: 18px; }
.hoja .titulo { font-size: 18px; }
.hoja .cita-texto, .hoja .aviso-cuerpo { font-size: 11px; }
@page { size: A4; margin: 0; }
/* --- Aplicacion (W5): estados que las maquetas no tenian --- */
.nav-item[aria-disabled="true"] { color: var(--ink-soft); cursor: default; }
.nav-item[aria-disabled="true"]:hover { background: transparent; }
.cabecera-fin form { display: inline; }
.qr { display: block; width: 232px; height: 232px; border: 1px solid var(--line); }
.tabla-mas { text-align: center; }
/* Sin banda de maqueta la primera fila de la rejilla queda vacia: la cabecera va siempre en la segunda. */
.app > .cabecera { grid-row: 2; }
.ficha-titulo + .etiquetas { margin-top: var(--sp-2); }

@media print {
  .informe { background: var(--bg); }
  .hoja { margin: 0; border: 0; break-after: page; }
  .tabla tr { break-inside: avoid; }
}

/* =========================================================================
   Movil (< 768 px): solo ficha y avisos legibles
   ========================================================================= */
@media (max-width: 767px) {
  .app { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .principal { grid-column: 1; }
  .nav, .solo-escritorio, .cabecera-cliente, .cabecera-sep { display: none; }
  .solo-movil { display: block; }
  .cabecera { padding: 0 var(--sp-4); }
  .banda-maqueta { padding: var(--sp-1) var(--sp-4); }
  .principal { padding: var(--sp-4); }
  .ficha, .dos-col { grid-template-columns: minmax(0, 1fr); }
  .ficha-lateral { order: -1; }  /* en movil: avisos, plazos e importes antes que las tablas */
  .cabeza-pagina { flex-direction: column; align-items: flex-start; }
  .tabla-movil thead { display: none; }
  .tabla-movil, .tabla-movil tbody, .tabla-movil tr, .tabla-movil td { display: block; width: 100%; }
  .tabla-movil tr { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
  .tabla-movil td { height: auto; padding: var(--sp-1) var(--sp-3); border: 0; }
  .tabla-movil td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-family: var(--font-sans); font-size: var(--fs-micro); color: var(--ink-soft); }
  .tabla-movil .num { text-align: left; }
  .tabla-movil .recorta { max-width: none; white-space: normal; }
  .acceso { grid-template-columns: minmax(0, 1fr); }
  .acceso-marca { padding: var(--sp-5) var(--sp-4); border-right: 0; border-bottom: 1px solid var(--line); gap: var(--sp-4); }
  .acceso-lockup { width: 240px; }
  .acceso-lema { font-size: var(--fs-ui); }
  .acceso-form { padding: var(--sp-5) var(--sp-4); }
}