/* app/estilos.css
   Hoja compartida por index.html, plantilla.html y rotacion.html.
   La paleta DR-13 (navy/teal, heredada del proyecto de evaluación) vive AQUÍ y en
   ningún otro lado: nav.js la consume vía var(--navy)/var(--teal) con fallback.
   Buildless: se enlaza con <link rel="stylesheet" href="estilos.css">. */

:root {
  --navy: #1a2b4a; --teal: #00a6a8; --red: #b42318;
  --ink: #172033; --muted: #667085; --line: #d8dee8; --bg: #f5f7fa; --white: #fff;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--ink); background: var(--bg); line-height: 1.5;
}
main { padding: 32px 28px; max-width: 1180px; }
h1 { color: var(--navy); font-size: 24px; margin: 0 0 4px; }
.sub { color: var(--muted); font-size: 14px; margin: 0 0 6px; }
/* .sub--home compensa la ausencia de .horizonte en index.html.
   Los tableros usan .sub (6px) + .horizonte (18px) = ~24px; la portada solo tiene .sub
   seguido de .tiles, así que necesita 26px completos para espaciado equivalente. */
.sub--home { margin: 0 0 26px; }
.horizonte { font-size: 12px; color: var(--muted); font-style: italic; margin: 0 0 18px; }

/* ---- Tiles de KPI ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 16px; }
.tile { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 10px; padding: 18px; }
.tile--alerta { border-left-color: var(--red); }
.tile--alerta .tile__value { color: var(--red); }
.tile__label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.tile__value { font-size: 30px; font-weight: 700; color: var(--navy); margin-top: 6px; }
.tile__note { font-size: 12px; color: var(--muted); margin-top: 4px; }
.estado-ok { color: #067647; }
.estado-error { color: var(--red); }
/* Encabezado de un grupo de tiles fuera de un panel (p. ej. "Tramos de control"). */
.grupo-titulo { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 8px 0 12px; }

/* ---- Paneles de gráfica ---- */
.panel { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.panel h2 { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
.chart { height: 300px; }
.chart--alto { height: 380px; }
.spark { height: 34px; margin-top: 6px; }

/* ---- Breadcrumb del drill-down (DR-21) ---- */
.crumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: #eef2f7; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; margin-bottom: 16px; font-size: 13px;
}
.crumb__item { background: none; border: none; padding: 2px 4px; font: inherit; color: var(--navy); cursor: pointer; border-radius: 4px; }
.crumb__item:hover { background: rgba(0, 166, 168, .16); }
.crumb__item.is-actual { color: var(--teal); font-weight: 700; cursor: default; }
.crumb__item.is-actual:hover { background: none; }
.crumb__sep { color: #9aa4b5; }
.crumb__hint { color: var(--muted); font-style: italic; margin-left: auto; }

/* ---- Avisos y mensajes ---- */
.aviso { background: #fff8e6; border: 1px solid #f0d68a; border-radius: 6px; padding: 8px 10px; font-size: 12px; color: #7a5c00; margin-top: 10px; }
.oculto-n { color: var(--muted); font-size: 13px; font-style: italic; padding: 24px 0; }
.msg { margin-top: 22px; font-size: 14px; }
.msg.err { color: var(--red); font-weight: 600; }

/* ---- Compensación (Fase 2) ---- */
.comp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 8px 0 24px; }
.comp-card { background: #fff; border: 1px solid #e3e8f0; border-radius: 10px; padding: 16px; }
.comp-card--click { cursor: pointer; transition: box-shadow .12s, border-color .12s; }
.comp-card--click:hover { border-color: var(--teal, #00a6a8); box-shadow: 0 2px 12px rgba(0,166,168,.15); }
.comp-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.comp-card__label { font-weight: 700; color: var(--navy, #1a2b4a); font-size: 14px; }
.comp-card__cur { font-size: 11px; letter-spacing: .06em; color: #7f8aa0; background: #f0f3f8; padding: 2px 7px; border-radius: 999px; }
.comp-card__value { font-size: 26px; font-weight: 800; color: var(--navy, #1a2b4a); margin: 6px 0 2px; }
.comp-card__note { font-size: 12px; color: #7f8aa0; }
.comp-card__box { height: 90px; margin-top: 6px; }
.comp-tabla-wrap { overflow-x: auto; }
.comp-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.comp-tabla th, .comp-tabla td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #eef1f6; }
.comp-tabla th { color: var(--navy, #1a2b4a); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.comp-tabla th.num, .comp-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
.masa-total { font-size: 18px; font-weight: 800; color: var(--navy, #1a2b4a); margin: 2px 0 10px; }