/* Páginas de seguridad, legales y estado del sitio (SID-189). La base (colores, barra, botones, pie, preguntas)
   es la de la portada, en css/sitio.css; aquí solo va lo propio de estas páginas. */

/* Cabecera: el mismo fondo suave de la portada, con espacio para la barra fija. */
.cabecera { padding: 128px 0 56px; border-bottom: 1px solid var(--linea); background:
  radial-gradient(820px 460px at 4% 0%, color-mix(in srgb, var(--azul-vivo) 13%, transparent), transparent 62%),
  radial-gradient(760px 460px at 96% 18%, color-mix(in srgb, var(--turquesa-vivo) 14%, transparent), transparent 62%),
  linear-gradient(180deg, var(--niebla), var(--fondo)); }
.cabecera h1, .cabecera .subtitulo { max-width: 760px; }
.migas { font-size: 14px; color: var(--pizarra); margin-bottom: 18px; }
.migas a { color: var(--pizarra); }
.migas a:hover { color: var(--tinta); }
.cabecera h1 { font-size: clamp(34px, 4.6vw, 52px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; margin: 18px 0 16px; }
.cabecera .subtitulo { max-width: 680px; }
.version { margin-top: 14px; font-size: 14px; color: var(--pizarra); }
.version:empty { display: none; }

/* Indicador de estado */
.estado-chico { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 10px 16px; border-radius: 99px; background: var(--papel); border: 1px solid var(--linea); font-weight: 600; font-size: 15px; color: var(--tinta); text-decoration: none; box-shadow: 0 8px 20px -14px rgba(16,32,90,.35); }
.punto { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--pizarra); flex: none; }
.punto.operativo { background: #16A34A; box-shadow: 0 0 0 4px color-mix(in srgb, #16A34A 22%, transparent); }
.punto.mantenimiento { background: #2563EB; }
.punto.degradado { background: #D97706; }
.punto.interrupcionparcial, .punto.interrupcion { background: #DC2626; }

/* Cuerpo: índice a la izquierda en pantallas grandes. */
.cuerpo { display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr); padding: 56px 0 96px; }
@media (min-width: 980px) { .cuerpo { grid-template-columns: 220px minmax(0, 1fr); } }
.indice { align-self: start; display: grid; gap: 2px; font-size: 14.5px; }
@media (min-width: 980px) { .indice { position: sticky; top: 100px; } }
.indice strong { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--pizarra); margin-bottom: 8px; }
.indice a { padding: 8px 12px; border-radius: 10px; color: var(--tinta); text-decoration: none; font-weight: 500; }
.indice a:hover { background: var(--niebla); }
.indice a[aria-current="page"] { background: var(--azul-suave); color: var(--azul); font-weight: 700; }
@media (max-width: 979px) { .indice { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .indice strong { grid-column: 1 / -1; } }

.contenido { max-width: 760px; font-size: 16.5px; }
.contenido > p:first-child { font-size: 18.5px; color: var(--pizarra); }
.contenido p { margin: 0 0 16px; }
.contenido h2 { font-size: 24px; margin: 40px 0 12px; }
.contenido h3 { font-size: 19px; margin: 28px 0 8px; }
.contenido ul, .contenido ol { margin: 0 0 16px; padding-left: 22px; }
.contenido li { margin: 6px 0; }
.contenido a { color: var(--azul); }
.contenido .tabla-md { overflow-x: auto; margin: 16px 0; border: 1px solid var(--linea); border-radius: 14px; }
.contenido table { width: 100%; border-collapse: collapse; font-size: 15px; }
.contenido th, .contenido td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.contenido tr:last-child td { border-bottom: 0; }

/* Portada de seguridad: cada tema como tarjeta, igual que las funciones de la portada. */
.seguridad-temas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); max-width: none; }
.seguridad-temas > p:first-child { grid-column: 1 / -1; margin-bottom: 8px; }
.seguridad-temas .bloque { padding: 24px; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.seguridad-temas .bloque h2 { margin: 0 0 8px; font-size: 19px; }
.seguridad-temas .bloque p { margin: 0; color: var(--pizarra); font-size: 15.5px; }

/* Preguntas: la lista usa .faq de la portada. */
.faq-grupo { margin-top: 32px; }
.faq-grupo h2 { font-size: 20px; margin: 0 0 12px; }
.faq-grupo .faq { margin: 0; max-width: none; }
.faq .respuesta { padding: 0 22px 20px; color: var(--pizarra); }
.faq .respuesta p { margin: 0; }

/* Estado */
.estado-general { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--papel); box-shadow: var(--sombra); }
.estado-general .punto { width: 16px; height: 16px; }
.estado-general strong { font: 700 22px var(--titulo); display: block; }
.estado-general small { color: var(--pizarra); font-size: 14px; }
.componentes { list-style: none; padding: 0 !important; margin: 24px 0 !important; border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; }
.componentes li { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--linea); background: var(--papel); }
.componentes li:last-child { border-bottom: 0; }
.componentes span:last-child { display: inline-flex; align-items: center; gap: 8px; color: var(--pizarra); font-size: 14.5px; }
.aviso-publico { border: 1px solid var(--linea); border-left: 4px solid var(--azul); border-radius: 14px; padding: 16px 18px; margin: 12px 0; background: var(--papel); }
.aviso-publico.incidente { border-left-color: #DC2626; }
.aviso-publico.resuelto { border-left-color: #16A34A; }
.aviso-publico h3 { font-size: 17px; margin: 0 0 4px; }
.aviso-publico .meta { font-size: 13.5px; color: var(--pizarra); }
.aviso-publico ol { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.aviso-publico ol li { font-size: 14.5px; margin: 0; }
.vacio { color: var(--pizarra); }
@media print { .barra, .indice, .pie { display: none; } .cuerpo { display: block; } .cabecera { padding-top: 24px; } }