@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root {
  --azul: #27499b;
  --azul-osc: #1d3573;
  --gris: #f4f6fa;
  --rojo: #c0392b;
  --ambar: #b9770e;
  --verde: #2e8b57;
  --borde: #e3e7ef;
}

* { box-sizing: border-box; }

/* Tipografía: Inter Bold (700) titulares · Regular (400) cuerpo · Light (300) títulos menores */
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  margin: 0;
  background: var(--gris);
  color: #222;
  line-height: 1.45;
}
h1, h2 { font-weight: 700; }
h3 { font-weight: 300; }

/* Prosa: justificada, con guiones automáticos y ancho de lectura cómodo */
.hero p, .disclaimer, .principios li, .flags-glossary dd,
.card.full > p, .card.full li, .conf-detalle, .detalle-conf {
  text-align: justify;
  hyphens: auto;
  line-height: 1.6;
}
.card.full > p, .card.full li { max-width: 85ch; }

/* ---- header ---- */
header { background: var(--azul); color: #fff; }

/* Migas de pan: ubicación actual + volver siempre visible */
.migas { background: var(--azul-osc); }
.migas-inner {
  max-width: 1200px; margin: 0 auto; padding: 8px 20px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px;
}
.miga {
  color: #fff; text-decoration: none; background: #ffffff1f;
  padding: 4px 12px; border-radius: 99px; white-space: nowrap;
}
.miga:hover { background: #ffffff38; }
.miga.actual { background: #fff; color: var(--azul); font-weight: 600; }
.migas .sep { color: #ffffff80; }
.header-inner {
  max-width: 1200px; margin: 0 auto; padding: 18px 20px 10px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
}
.brand h1 { margin: 0; font-size: 24px; }
.tagline { margin: 2px 0 0; opacity: .85; font-size: 13px; }
.org-picker { font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.org-picker select {
  font-size: 14px; padding: 6px 10px; border-radius: 8px; border: none; max-width: 340px;
}
nav {
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  display: flex; gap: 4px; overflow-x: auto;
}
nav a {
  color: #fff; text-decoration: none; padding: 10px 14px; font-size: 14px;
  border-radius: 8px 8px 0 0; white-space: nowrap; opacity: .85;
}
nav a:hover { background: var(--azul-osc); opacity: 1; }
nav a.activo { background: var(--azul-osc); opacity: 1; font-weight: 600; }

/* Sub-nav "En esta página": anchors internos, visualmente distinto del nav global */
.subnav {
  background: #fff; border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 50;
}
.subnav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  display: flex; gap: 2px; align-items: center; overflow-x: auto; font-size: 13px;
}
.subnav .lbl { color: #888; margin-right: 8px; white-space: nowrap; }
.subnav a {
  color: #444; text-decoration: none; padding: 10px 12px; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.subnav a:hover { color: var(--azul); }
.subnav a.activo { color: var(--azul); font-weight: 600; border-bottom-color: var(--azul); }

#volverArriba {
  position: fixed; right: 18px; bottom: 18px; width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid var(--azul-osc); background: var(--azul);
  color: #fff; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s;
  z-index: 60; display: flex; align-items: center; justify-content: center;
}
#volverArriba.visible { opacity: .9; pointer-events: auto; }
#volverArriba:hover { opacity: 1; }

/* ---- layout ---- */
main { max-width: 1200px; margin: 0 auto; padding: 8px 20px 40px; }
section, .card[id] { scroll-margin-top: 56px; }
.contexto-pagina { font-size: 13px; color: #555; margin: 14px 0 0; }
h2 { border-bottom: 2px solid var(--azul); padding-bottom: 6px; margin: 38px 0 16px; }
section:first-child h2 { margin-top: 24px; }
.hint { font-size: 13px; color: #666; line-height: 1.5; }
.disclaimer {
  background: #fff8e6; border: 1px solid #f0dfa8; border-radius: 8px; padding: 12px 16px;
  margin: 14px 0 18px;
}

.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 12px; margin: 16px 0;
}
.kpi {
  background: #fff; border-radius: 10px; padding: 12px 16px;
  box-shadow: 0 1px 4px #0002; min-width: 0;
}
.kpi .v {
  font-size: 21px; font-weight: 700; color: var(--azul);
  overflow-wrap: anywhere; line-height: 1.2;
}
.kpi .v .unidad { font-size: 13px; font-weight: 600; color: #7a8db5; }
.kpi .l { font-size: 12px; color: #666; margin-top: 3px; line-height: 1.35; }
.kpi.alerta .v { color: var(--rojo); }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.card {
  background: #fff; border-radius: 10px; padding: 18px 22px;
  box-shadow: 0 1px 4px #0002; margin: 0 0 18px;
}
.card.full { grid-column: 1 / -1; }
.card h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }

/* ---- tablas ---- */
.table-wrap {
  background: #fff; border-radius: 10px; box-shadow: 0 1px 4px #0002;
  overflow: auto; max-height: 560px;
}
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde);
  vertical-align: top;
}
th { background: var(--gris); position: sticky; top: 0; z-index: 1; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { background: #e3eaf8; color: var(--azul); }
.sort-ind { font-size: 10px; color: var(--azul); margin-left: 3px; }
tr:hover td { background: #f0f4ff; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td a { color: var(--azul); }
.vacio { color: #999; font-style: italic; }
.personas { color: #777; }
.dudoso { color: var(--rojo); }

/* Celdas largas: 3 líneas + "ver más" (el botón lo agrega aplicarClamp solo si desborda) */
.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp.open { display: block; -webkit-line-clamp: unset; }
.ver-mas {
  border: none; background: none; padding: 0; margin-top: 2px;
  color: var(--azul); font-size: 12px; cursor: pointer; text-decoration: underline;
}

.pill {
  background: #e8edf9; border-radius: 99px; padding: 1px 9px; font-size: 11px;
  white-space: nowrap; display: inline-block;
}
.pill.flag { background: #fdecea; color: var(--rojo); }
.pill.warn { background: #fff4e0; color: var(--ambar); }
.pill.low { background: #eceff4; color: #5a6b8c; }

/* ---- toolbar / paginación ---- */
.toolbar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0;
  font-size: 13px;
}
.toolbar input[type="search"] {
  flex: 1 1 260px; max-width: 420px; padding: 8px 12px;
  border: 1px solid var(--borde); border-radius: 8px; font-size: 14px;
}
.toolbar select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--borde); }
.result-count { color: #666; margin-left: auto; }

.pager { display: flex; gap: 6px; align-items: center; margin: 12px 0; font-size: 13px; }
.pager button {
  border: 1px solid var(--borde); background: #fff; border-radius: 8px;
  padding: 6px 12px; cursor: pointer; font-size: 13px;
}
.pager button:disabled { opacity: .4; cursor: default; }
.pager button:not(:disabled):hover { background: #e8edf9; }

/* ---- glosario de flags ---- */
.principios li { margin-bottom: 9px; font-size: 14px; }
.roadmap { margin: 12px 0; max-width: 85ch; }
.roadmap li { margin-bottom: 10px; font-size: 14px; line-height: 1.55; }
.flags-glossary { margin: 0; }
.flags-glossary > div {
  margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--gris);
}
.flags-glossary > div:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.flags-glossary dt { font-weight: 600; font-size: 14px; }
.flags-glossary dd { margin: 4px 0 0; font-size: 13px; color: #444; }

/* ---- acciones / footer ---- */
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.btn {
  display: inline-block; padding: 9px 18px; border-radius: 8px; font-size: 14px;
  text-decoration: none; color: var(--azul); background: #e8edf9; border: 1px solid #cdd8f0;
}
.btn:hover { background: #dbe4f7; }
.btn.primary { background: var(--azul); color: #fff; border-color: var(--azul-osc); }
.btn.primary:hover { background: var(--azul-osc); }

/* ---- conflictos: tabla verificable ---- */
tr.sev-grave td:first-child { box-shadow: inset 4px 0 var(--rojo); }
tr.sev-medio td:first-child, tr.sev-amplio td:first-child { box-shadow: inset 4px 0 var(--ambar); }
tr.sev-bajo td:first-child { box-shadow: inset 4px 0 #b9c4d8; }
.tipo-caso { color: #888; }
.detalle-conf { min-width: 280px; }
.verif-celda { white-space: nowrap; }
.verif-celda .btn-verif { display: block; margin: 2px 0; width: fit-content; }
.btn-verif {
  font-size: 12px; padding: 3px 9px; border-radius: 6px; text-decoration: none;
  background: #e8edf9; color: var(--azul); border: 1px solid #cdd8f0; white-space: nowrap;
}
.btn-verif:hover { background: #dbe4f7; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--borde); background: #fff; border-radius: 99px;
  padding: 5px 14px; font-size: 13px; cursor: pointer;
}
.chip:hover { background: #eef2fb; }
.chip.activo { background: var(--azul); color: #fff; border-color: var(--azul-osc); }

/* ---- portada: hero + badge beta ---- */
.beta {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  background: var(--ambar); color: #fff; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 9px; border-radius: 99px;
}
.hero {
  background: #fff; border-radius: 12px; box-shadow: 0 1px 4px #0002;
  padding: 22px 26px; margin-top: 20px;
}
.hero h2 { border: none; margin: 0 0 8px; padding: 0; }
.hero p { font-size: 15px; max-width: 75ch; margin: 10px 0; }
.hero-beta {
  font-size: 13px !important; color: #666;
  border-top: 1px dashed var(--borde); padding-top: 12px;
}

/* ---- portada: tarjetas de región ---- */
.cards-region {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px; margin: 16px 0;
}
.card-region {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--borde); transition: box-shadow .15s, transform .15s;
}
.card-region:hover { box-shadow: 0 4px 14px #0003; transform: translateY(-2px); }
.card-region h3 { color: var(--azul); margin-bottom: 6px; }
.card-region p { margin: 4px 0; font-size: 13px; color: #555; }
.card-region .ver-region { color: var(--azul); font-size: 13px; font-weight: 600; }
.conflictos-mini { display: flex; gap: 6px; }

.link-claro { color: #fff; opacity: .85; }
.link-claro:hover { opacity: 1; }

.icono { vertical-align: -2px; flex-shrink: 0; }
h1 .icono, h2 .icono { vertical-align: -2px; margin-right: 2px; }

td small { color: #888; display: inline-block; }

footer {
  border-top: 1px solid var(--borde); background: #fff;
  text-align: center; font-size: 12px; color: #888; padding: 18px 20px;
  line-height: 1.8; margin-top: 32px;
}
footer p { margin: 2px 0; }

.ok { color: var(--verde); }

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
  .result-count { margin-left: 0; }
}