/* Páginas internas (reportar, observatorio, ruta segura, acceso, panel) con los tokens de la portada nueva. */
body { background: var(--negro); color: var(--hueso); }
.pagina { padding-block: clamp(7rem, 12vw, 9rem) var(--aire-seccion, 5rem); }
.pagina h1 { font: 800 clamp(2.4rem, 6vw, 4.8rem)/0.98 var(--letra-titulo); text-transform: uppercase; letter-spacing: -0.03em; margin: 0 0 1rem; }
.pagina h1 span { color: var(--gris); display: block; }
.pagina h2 { font: 800 clamp(1.6rem, 3vw, 2.4rem)/1 var(--letra-titulo); text-transform: uppercase; letter-spacing: -0.02em; }
.pagina h3 { font: 700 1.2rem/1.2 var(--letra-titulo); margin: 0 0 0.5rem; }
.pagina p { max-width: 62ch; color: var(--gris); }
.pagina p b { color: var(--hueso); }
.suave { color: var(--gris); }
.oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Formularios */
.formulario { display: grid; gap: 1rem; max-width: 40rem; margin-top: 1.5rem; }
.campo { display: grid; gap: 0.35rem; }
.campo label { font-size: 0.875rem; font-weight: 600; }
.campo input, .campo textarea, .campo select { font: inherit; color: inherit; background: var(--carbon-2); border: 1px solid var(--raya-oscura);
  border-radius: var(--radio-s); padding: 0.85rem 1rem; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--naranja); outline: none; }
.campo textarea { min-height: 9rem; resize: vertical; }
.boton-sec { background: transparent; color: var(--hueso); border: 1px solid var(--raya-oscura); }
.aviso { padding: 1rem; border-radius: var(--radio-s); font-size: 0.95rem; border: 1px solid var(--raya-oscura); }
.aviso[hidden] { display: none; }
.aviso-ok { border-color: var(--naranja-claro); }
.aviso-error { border-color: var(--naranja); background: rgba(255, 107, 26, 0.12); }

/* Mapa */
.mapa-caja { height: 460px; border-radius: var(--radio-m); overflow: hidden; margin-top: 1.5rem; border: 1px solid var(--raya-oscura); }
a.mr-btn { display: grid; place-items: center; text-decoration: none; }

/* Observatorio */
.graficas { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.grafica { margin: 0; background: var(--carbon); border: 1px solid var(--raya-oscura); border-radius: var(--radio-m); padding: 1.5rem;
  display: flex; flex-direction: column-reverse; gap: 1rem; }
.grafica figcaption b { display: block; font: 700 1.2rem/1.2 var(--letra-titulo); color: var(--hueso); }
.grafica figcaption span { font-size: 0.875rem; color: var(--gris); }
.grafica svg { width: 100%; height: auto; }
.grafica .barra { fill: #3a3a3f; }
.grafica .barra-alta { fill: var(--naranja); }
.grafica .fondo-barra { fill: var(--carbon-2); }
.grafica .valor { fill: var(--hueso); font: 700 14px var(--letra-texto); }
.grafica .eje { fill: var(--gris); font: 13px var(--letra-codigo); }
.grafica-dato { flex-direction: column; justify-content: space-between; }
.dato-grande { font: 800 4.5rem/1 var(--letra-titulo); color: var(--naranja); letter-spacing: -0.04em; }

/* Acceso y panel */
.edt { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; margin-top: 2rem; }
.rama { background: var(--carbon); border: 1px solid var(--raya-oscura); border-radius: var(--radio-m); padding: 1.5rem; }
.arbol-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.nodo { background: var(--carbon); border: 1px solid var(--raya-oscura); border-radius: var(--radio-s); padding: 1.25rem; }
.nodo small { display: block; font: 600 0.75rem/1.3 var(--letra-texto); color: var(--naranja-claro); margin-bottom: 0.5rem; }
.rama-detalle { margin-top: 2.5rem; }
.rama-detalle h2 .etiqueta { display: block; margin-bottom: 0.5rem; }
.paquetes { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.92rem; color: var(--gris); }
.paquetes li { margin-bottom: 0.3rem; }
.seccion-panel { margin-top: 5rem; scroll-margin-top: 3.5rem; }

/* Panel: quién entró y navegación entre secciones (misma pastilla de la cabecera del sitio).
   Cada enlace se esconde si su sección no está a la vista: lo decide la API, no esta hoja. */
.ui .panel-cabeza__sesion { color: var(--gris); }
.ui .panel-cabeza__sesion b { color: var(--hueso); font-weight: 600; overflow-wrap: anywhere; }
.ui .panel-cabeza__aviso { max-width: 40rem; margin-top: 1.25rem; }
.panel-nav { margin-top: 1.5rem; }
.panel-nav ul { display: inline-flex; gap: 0.15rem; max-width: 100%; padding: 0.25rem; overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--raya-oscura); border-radius: 999px; background: var(--carbon); }
.panel-nav li { flex: none; }
.panel-nav a { display: grid; place-items: center; min-height: var(--ui-toque); padding: 0 1rem; border-radius: 999px; color: #d5d2ca;
  font-weight: 500; white-space: nowrap; transition: background-color 0.2s, color 0.2s; }
.panel-nav a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.panel-nav a:focus-visible { outline-offset: -2px; border-radius: 999px; }
#panel-contenido:has(#chats[hidden]) [data-para="chats"],
#panel-contenido:has(#avisos[hidden]) [data-para="avisos"],
#panel-contenido:has(#cuenta[hidden]) [data-para="cuenta"] { display: none; }

@media (max-width: 760px) {
  .panel-nav a { padding-inline: 0.8rem; font-size: 0.875rem; }
}

/* Leyenda bajo los mapas: dice si los puntos son de ejemplo o de dónde salen */
.leyenda-puntos { margin: 0.75rem auto 0; max-width: 390px; font-size: var(--t-chico); color: var(--gris); text-align: center; }
.mapa-caja + .leyenda-puntos { max-width: none; text-align: left; }
.leyenda-puntos--aviso { color: var(--naranja-claro); }
.formulario .boton { justify-content: center; padding-inline: 1.5rem; background: var(--naranja); color: var(--tinta); }
.formulario .boton:hover { background: var(--naranja-claro); }