/* ============================================================
   mx-hnc — sistema de diseño "app cívica esmeralda" (propuesta S2)
   Mobile-first, sin frameworks. Un archivo cacheable.
   Cabecera verde con pills, tarjeta del día superpuesta, teclado
   de placa, listas tipo app, semáforo circulas/no-circulas.
   ============================================================ */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('/fonts/inter-latin-wght.woff2') format('woff2');
}

:root {
	/* marca */
	--esm:      #006847;
	--esm2:     #1d8862;
	--esmosc:   #004d34;
	--esmtinta: #04392b;

	/* neutrales */
	--fondo: #f4f6f8;
	--panel: #ffffff;
	--suave: #f1f3f5;
	--tinta: #16191d;
	--gris:  #5d6670;
	--linea: #e5e8ec;

	/* semáforo */
	--ok:    #18794e;
	--okbg:  #e7f6ef;
	--no:    #cd2b31;
	--nobg:  #feefee;
	--nolinea: #f6cdcd;

	/* engomados */
	--eng-amarillo: #d8a712;
	--eng-rosa:     #d8639b;
	--eng-rojo:     #d23f31;
	--eng-verde:    #2e8b46;
	--eng-azul:     #3a76d0;
	--eng-sab:      #7b5fb5;

	--radio: 20px;
	--radio-s: 13px;
	--sombra: 0 18px 40px -20px rgba(22, 25, 29, .28);
}

/* ---------- base ---------- */

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

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

body {
	margin: 0;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--tinta);
	background: var(--fondo);
}

img { max-width: 100%; height: auto; }

a { color: var(--esmosc); }
a:hover { color: var(--esmtinta); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .45em; letter-spacing: -.015em; }
h1 { font-size: clamp(25px, 4.4vw, 38px); font-weight: 800; }
h2 { font-size: clamp(18px, 3vw, 21px); font-weight: 800; }
h3 { font-size: 16.5px; font-weight: 700; }

.wrap { max-width: 1020px; margin-inline: auto; padding-inline: 16px; }

main { padding-bottom: 34px; }
/* Espaciado entre bloques de contenido. Ignora <script> (JSON-LD en body):
   un script inicial NO debe contar como hermano, o le roba a la primera
   tarjeta su margin-top -66px de .solapa (la regla ganaba por especificidad). */
main > .wrap > :not(script) + :not(script) { margin-top: 16px; }

:focus-visible { outline: 3px solid #7adcb4; outline-offset: 2px; border-radius: 6px; }

/* el atributo hidden SIEMPRE gana, aunque la clase traiga display propio
   (ya nos mordió dos veces: estado-pill del header y cajas .res) */
[hidden] { display: none !important; }

/* ---------- zona superior verde ---------- */

.top {
	background: linear-gradient(165deg, var(--esm) 0%, var(--esmosc) 100%);
	color: #fff;
	padding-bottom: 86px;
	border-radius: 0 0 28px 28px;
}

.top--sin-hero { padding-bottom: 24px; }

.top a { color: #fff; }

.top-fila { display: flex; align-items: center; gap: 12px; padding: 16px 0 4px; }

.logo-chip {
	width: 42px; height: 42px;
	border-radius: 13px;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .38);
	display: grid; place-items: center;
	font-size: 12px; font-weight: 800;
	text-decoration: none;
	flex: 0 0 auto;
	position: relative;
}
/* área táctil ≥44px sin agrandar el chip visual */
.logo-chip::after { content: ""; position: absolute; inset: -4px; }

/* punto rojo "en vivo" */
.vivo i {
	display: inline-block;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #ff6b5e;
	margin-right: 4px;
	vertical-align: 1px;
	animation: late 1.8s infinite;
}

.marca { text-decoration: none; min-width: 0; }
.marca b { display: block; font-size: 20px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.marca small { display: block; font-size: 12px; font-weight: 500; opacity: .82; margin-top: 4px; }
.marca:hover { text-decoration: none; }

.estado-pill {
	margin-left: auto;
	display: inline-flex; align-items: center; gap: 7px;
	background: rgba(255, 255, 255, .15);
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12.5px; font-weight: 700;
	white-space: nowrap;
}

.estado-pill.alerta { background: #b91c1c; border-color: #f3b9b9; animation: late 2.2s infinite; }

@keyframes late {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); }
	50%      { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}

.pills {
	display: flex; gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 12px 0 2px;
}
.pills::-webkit-scrollbar { display: none; }

/* señal de scroll: desvanecer el borde donde quedan pills ocultas y un
   chevrón encima (app.js togglea mas-izq/mas-der en .pills-zona) */
.pills-zona { position: relative; }
.pills-zona .pills {
	--fizq: 0px; --fder: 0px;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fizq), #000 calc(100% - var(--fder)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--fizq), #000 calc(100% - var(--fder)), transparent);
}
.pills-zona.mas-izq .pills { --fizq: 44px; }
.pills-zona.mas-der .pills { --fder: 44px; }

.pills-zona::before, .pills-zona::after {
	position: absolute;
	top: 12px; bottom: 2px;
	display: none;
	align-items: center;
	font-size: 19px; font-weight: 700;
	color: rgba(255, 255, 255, .95);
	pointer-events: none;
}
.pills-zona::before { content: "\2039"; left: 0; }
.pills-zona::after  { content: "\203A"; right: 0; }
.pills-zona.mas-izq::before { display: flex; }
.pills-zona.mas-der::after  { display: flex; }

.pills a {
	flex: 0 0 auto;
	/* 11px vertical → ~44px de alto: mínimo táctil (96% del tráfico es móvil) */
	padding: 11px 15px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 13.5px; font-weight: 650;
	text-decoration: none;
	white-space: nowrap;
}
.pills a:hover { background: rgba(255, 255, 255, .26); }
.pills a.on { background: #fff; color: var(--esmosc); }

/* angosto: compactar logo, marca y pill de estado para que el header
   quepa en una línea, y nav a sangre completa */
/* teclado de placa y segmento más compactos en móvil (sin bajar de 40px táctiles) */
@media (max-width: 600px) {
	.digitos { gap: 6px; }
	.dig { width: 40px; height: 42px; font-size: 17px; }
	.seg button { padding: 11px 13px; }
}

@media (max-width: 600px) {
	.top-fila { gap: 10px; }
	.logo-chip { width: 38px; height: 38px; border-radius: 11px; font-size: 11px; }
	.marca { flex: 1; min-width: 0; }
	.marca b { font-size: 16.5px; white-space: nowrap; }
	.marca small { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.estado-pill { padding: 5px 10px; gap: 5px; font-size: 12px; letter-spacing: -.01em; }
	/* nav a sangre completa: las pills se cortan en el borde real de la
	   pantalla (el fade dinámico de arriba avisa que hay más contenido) */
	.pills {
		margin-inline: -16px;
		padding-inline: 16px;
	}
}

.hero { padding-top: 20px; }
.hero .kicker {
	font-size: 13px; font-weight: 650;
	letter-spacing: .05em; text-transform: uppercase;
	opacity: .85;
}
.hero h1 { margin: 6px 0 0; max-width: 26ch; }
.hero .sub { margin: 8px 0 0; font-size: 15px; opacity: .88; max-width: 60ch; }
.hero .sub a { text-decoration: underline; }

/* aviso de contingencia (cuando está activa, debajo del top) */
.alerta-cont {
	background: #b91c1c;
	color: #fff;
	border-radius: var(--radio-s);
	padding: 13px 18px;
	font-size: 14.5px;
	box-shadow: var(--sombra);
}
.alerta-cont a { color: #fff; font-weight: 700; }
.alerta-cont small { display: block; opacity: .85; font-size: 12.5px; margin-top: 3px; }

/* ---------- tarjetas ---------- */

.card {
	background: var(--panel);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	padding: 22px;
}

.solapa { margin-top: -66px; box-shadow: var(--sombra); border: 0; }

.card > h2 { margin-bottom: 4px; }
.card > h2 + p.intro { color: var(--gris); font-size: 14px; margin: 0 0 14px; }

/* ---------- tarjeta del día ---------- */

.daycard { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
@media (max-width: 700px) { .daycard { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

.discos { display: flex; gap: 10px; }
.disco {
	width: 92px; height: 92px;
	border-radius: 24px;
	background: var(--nobg);
	border: 2.5px solid var(--no);
	display: grid; place-items: center;
	font-size: 44px; font-weight: 800;
	color: var(--no);
}
.disco--ok { background: var(--okbg); border-color: var(--ok); color: var(--ok); font-size: 34px; }

.day-det .chip-estado {
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--nobg); color: var(--no);
	font-size: 13px; font-weight: 700;
	padding: 5px 13px; border-radius: 999px;
}
.day-det .chip-estado.ok { background: var(--okbg); color: var(--ok); }
.day-det h2 { margin: 9px 0 4px; font-size: 21px; }
.day-det > p { color: var(--gris); font-size: 14.5px; margin: 0; }

.metas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 700px) { .metas { justify-content: center; } }
.meta {
	background: var(--fondo);
	border: 1px solid var(--linea);
	border-radius: 999px;
	padding: 5px 13px;
	font-size: 13px; font-weight: 650;
	color: var(--gris);
}
.meta.eng { color: #fff; border-color: transparent; text-transform: capitalize; }

/* ---------- herramienta: teclado de placa ---------- */

.lbl {
	display: block;
	font-size: 12px; font-weight: 750;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--gris);
	margin: 16px 0 8px;
}

.digitos { display: flex; gap: 8px; flex-wrap: wrap; }
.dig {
	width: 46px; height: 50px;
	border-radius: var(--radio-s);
	background: var(--fondo);
	border: 1.5px solid var(--linea);
	display: grid; place-items: center;
	font: 800 19px Inter, sans-serif;
	color: var(--tinta);
	cursor: pointer;
	padding: 0;
	position: relative;
}
.dig:hover { border-color: var(--esm2); }
/* selección: solo el borde, en el color del engomado de la tecla */
.dig.on {
	border-color: var(--eng, var(--esm));
	box-shadow: inset 0 0 0 1px var(--eng, var(--esm));
}

/* cada terminación lleva la barrita de SU engomado (mismo código de color
   que los pines del calendario y la tabla de /engomado) */
.dig::after {
	content: "";
	position: absolute;
	left: 11px; right: 11px; bottom: 6px;
	height: 3.5px;
	border-radius: 2px;
	background: var(--eng, transparent);
}
.dig[data-d="5"], .dig[data-d="6"] { --eng: var(--eng-amarillo); }
.dig[data-d="7"], .dig[data-d="8"] { --eng: var(--eng-rosa); }
.dig[data-d="3"], .dig[data-d="4"] { --eng: var(--eng-rojo); }
.dig[data-d="1"], .dig[data-d="2"] { --eng: var(--eng-verde); }
.dig[data-d="9"], .dig[data-d="0"] { --eng: var(--eng-azul); }

.seg {
	display: inline-flex;
	background: var(--fondo);
	border: 1px solid var(--linea);
	border-radius: 15px;
	padding: 4px;
	gap: 2px;
	flex-wrap: wrap;
}
.seg button {
	/* 12px vertical → ~40px de alto + padding del .seg ≈ 44px táctiles */
	padding: 12px 17px;
	border: 0; background: transparent;
	border-radius: 11px;
	font: 700 13.5px Inter, sans-serif;
	color: var(--gris);
	cursor: pointer;
}
/* selección: solo el borde (anillo), en el color de severidad */
.seg button.on {
	background: #fff;
	color: var(--tinta);
	box-shadow: inset 0 0 0 2px var(--sev, var(--esm));
}

/* hologramas: punto de severidad (verde circula siempre, ámbar restricción
   parcial, rojo restricción máxima). No es identidad oficial: es semáforo. */
.seg button[data-h]::before {
	content: "";
	display: inline-block;
	width: 7px; height: 7px;
	border-radius: 50%;
	margin-right: 7px;
	vertical-align: 1px;
	background: var(--sev, transparent);
}
.seg button[data-h="EXENTO"], .seg button[data-h="00"], .seg button[data-h="0"] { --sev: var(--ok); }
.seg button[data-h="1"] { --sev: var(--eng-amarillo); }
.seg button[data-h="2"], .seg button[data-h="F"] { --sev: var(--no); }


.res {
	margin-top: 16px;
	border-radius: 14px;
	padding: 14px 17px;
	display: flex; gap: 12px;
	align-items: flex-start;
	font-size: 15px;
}
.res--no { background: var(--nobg); }
.res--si { background: var(--okbg); }
.res .ic {
	width: 30px; height: 30px;
	border-radius: 10px;
	color: #fff;
	display: grid; place-items: center;
	font-weight: 800;
	flex: 0 0 auto;
}
.res--no .ic { background: var(--no); }
.res--si .ic { background: var(--ok); }
.res b { font-size: 16px; }
.res--no b { color: var(--no); }
.res--si b { color: var(--ok); }
.res span { display: block; color: var(--gris); font-size: 13.5px; margin-top: 2px; }
.res span a { font-weight: 650; }

/* ---------- botones ---------- */

.btn, .hnc-cta {
	display: inline-block;
	padding: 12px 21px;
	border-radius: var(--radio-s);
	border: 0;
	font: 700 14.5px Inter, sans-serif;
	color: #fff;
	background: var(--esm);
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}
.btn:hover, .hnc-cta:hover { background: var(--esmosc); color: #fff; }

.btn--wa, .hnc-cta--wa { background: #1faf54; }
.btn--wa:hover, .hnc-cta--wa:hover { background: #18933f; }
.hnc-cta--canal { background: #0f7c6e; }

.btn--fant {
	background: var(--fondo);
	color: var(--tinta);
	border: 1.5px solid var(--linea);
}
.btn--fant:hover { background: var(--suave); color: var(--tinta); }

.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* accesos rápidos */
.accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.accesos a {
	background: var(--panel);
	border: 1px solid var(--linea);
	border-radius: 16px;
	padding: 14px;
	text-align: center;
	font-size: 13.5px; font-weight: 700;
	color: var(--tinta);
	text-decoration: none;
}
.accesos a:hover { border-color: var(--esm2); color: var(--esmosc); }

/* ---------- lista tipo app (próximos días) ---------- */

.lista { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.lista .item {
	display: flex; align-items: center; gap: 14px;
	padding: 15px 20px;
	border-bottom: 1px solid var(--linea);
	color: inherit; text-decoration: none;
}
.lista .item:last-child { border-bottom: 0; }
.lista .item:hover { background: var(--suave); }
.item .icd {
	width: 42px; height: 42px;
	border-radius: 13px;
	display: grid; place-items: center;
	font-size: 14px; font-weight: 800;
	color: #fff;
	flex: 0 0 auto;
}
.item .tx b { display: block; font-size: 15px; }
.item .tx span { color: var(--gris); font-size: 13px; }
.item .chev { margin-left: auto; color: #b8bfc7; font-size: 18px; }

/* ---------- tabla del día (nc-info, markup del motor) ---------- */

table.nc-info {
	width: 100%;
	border-collapse: separate; border-spacing: 0;
	table-layout: fixed; word-wrap: break-word;
	font-size: 14px;
	border: 1px solid var(--linea);
	border-radius: var(--radio-s);
	overflow: hidden;
	margin: 14px 0 4px;
}
table.nc-info thead td {
	background: var(--suave);
	font-weight: 750; font-size: 13px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--linea);
}
table.nc-info tbody td { padding: 10px 12px; border-bottom: 1px solid var(--linea); background: var(--panel); }
table.nc-info tbody tr:last-child td { border-bottom: 0; }
/* columna "Último dígito placa": chips centrados bajo su encabezado */
table.nc-info thead td:nth-child(2),
table.nc-info tbody td:nth-child(2) { text-align: center; }
table.nc-info .hours { font-size: 12.5px; color: var(--gris); }

table.nc-info .info {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	font-weight: 750; font-size: 13px;
	color: #fff;
	background: var(--gris);
}
table.nc-info .info + .info { margin-left: 4px; }
table.nc-info .info[class*="mon-"] { background: var(--eng-amarillo); }
table.nc-info .info[class*="tue-"] { background: var(--eng-rosa); }
table.nc-info .info[class*="wed-"] { background: var(--eng-rojo); }
table.nc-info .info[class*="thu-"] { background: var(--eng-verde); }
table.nc-info .info[class*="fri-"] { background: var(--eng-azul); }
table.nc-info .info[class*="sat-"] { background: var(--eng-sab); }

/* ---------- texto / artículos / guías ---------- */

.hnc-resumen { font-size: 15.5px; }

/* cajas de estado dentro de artículos: aire arriba y abajo */
.hnc-article .hnc-res { margin: 6px 0 22px; }

.hnc-updated, .meta-line { font-size: 13px; color: var(--gris); margin: 12px 0 0; }

.aviso-ok {
	background: var(--okbg);
	color: var(--ok);
	border-radius: 14px;
	padding: 14px 17px;
	font-size: 15.5px;
}

.hnc-manana {
	margin-top: 14px;
	padding: 12px 15px;
	background: #fff8e3;
	border: 1px solid #f3e3ad;
	border-radius: 14px;
	font-size: 14.5px;
}

.hnc-prevnext { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; flex-wrap: wrap; font-weight: 650; }
.hnc-prevnext a { display: inline-block; padding: 10px 0; margin: -10px 0; }

/* lede: el primer párrafo del artículo, más presente */
.hnc-article > p:first-of-type {
	font-size: 16.5px;
	line-height: 1.7;
	color: #39434d;
}

/* encabezados con ancla de color + ritmo de separadores */
.hnc-article h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 8px 0 12px;
	padding-top: 24px;
	border-top: 1px solid var(--linea);
}
.hnc-article h2::before {
	content: "";
	width: 5px;
	height: 20px;
	border-radius: 4px;
	background: var(--esm);
	flex: 0 0 auto;
}
.hnc-article > h2:first-of-type,
.hnc-article > h2:first-child { border-top: 0; padding-top: 0; }
.hnc-article > * + h2:first-of-type { margin-top: 26px; }
.hnc-article h3 { margin: 18px 0 8px; }
.hnc-article p, .hnc-article li { font-size: 15px; line-height: 1.7; }
.hnc-article p { margin: 0 0 15px; }
.hnc-article ul, .hnc-article ol { padding-left: 22px; }
.hnc-article ul li, .hnc-article ol li { margin: 7px 0; }
.hnc-article ul li::marker { color: var(--esm); }
.hnc-article ol li::marker { color: var(--esm); font-weight: 750; }

/* nota al pie / disclaimer suave */
.nota {
	background: var(--suave);
	border-radius: var(--radio-s);
	padding: 12px 16px;
	font-size: 13.5px;
	color: var(--gris);
	margin: 18px 0 0;
}

/* recursos oficiales como tarjetas enlazadas */
.recursos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
	gap: 10px;
	margin: 12px 0 6px;
	padding: 0;
	list-style: none;
}
.recursos a {
	display: block;
	background: var(--fondo);
	border: 1px solid var(--linea);
	border-radius: 14px;
	padding: 12px 15px;
	text-decoration: none;
}
.recursos a:hover { border-color: var(--esm2); background: #f0faf6; }
.recursos b { display: block; font-size: 14.5px; color: var(--tinta); }
.recursos b::after { content: " ↗"; color: var(--esm); font-size: 12px; }
.recursos span { font-size: 13px; color: var(--gris); }

.hnc-article table, .tabla {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 12px 0 18px;
	font-size: 14px;
	border: 1px solid var(--linea);
	border-radius: var(--radio-s);
	overflow: hidden;
}
.hnc-article table th, .tabla th {
	background: var(--suave);
	font-size: 12px;
	font-weight: 750;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--gris);
	text-align: left;
	padding: 10px 14px;
	border-bottom: 1px solid var(--linea);
}
.hnc-article table td, .tabla td {
	padding: 11px 14px;
	text-align: left;
	vertical-align: middle;
	background: var(--panel);
	border-bottom: 1px solid var(--linea);
}
.hnc-article table tr:last-child td, .tabla tr:last-child td { border-bottom: 0; }
/* link de acción dentro de cajas de veredicto (hnc-res, res): área táctil alta */
.hnc-res a, .res a {
	display: inline-block;
	padding: 10px 0;
	margin: -10px 0;
}

/* links en celdas (fechas del sabatino, "00"/"0"… de holograma): área táctil
   ≥44px en ambos ejes sin mover el layout (padding transparente + margen negativo) */
.hnc-article table td a, .tabla td a {
	display: inline-block;
	padding: 10px 8px;
	margin: -10px -8px;
	min-width: 44px;
}
.hnc-article table tbody tr:hover td, .tabla tbody tr:hover td { background: #fafbfc; }
.hnc-article table td:first-child, .tabla td:first-child { font-weight: 650; }
@media (max-width: 540px) {
	.hnc-article table, .tabla { display: block; overflow-x: auto; }
}

/* chips de estado para celdas (circula / descansa / paridad) */
.chip-ok, .chip-no, .chip-din {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 750;
	white-space: nowrap;
}
.chip-ok  { background: var(--okbg); color: var(--ok); }
.chip-no  { background: var(--nobg); color: var(--no); }
.chip-din { background: #eef1f4; color: var(--tinta); }

/* municipios del Edomex como grilla de pills */
.munis {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 9px;
	margin: 14px 0 18px;
	padding: 0;
	list-style: none;
}
.munis li {
	background: var(--fondo);
	border: 1px solid var(--linea);
	border-radius: 999px;
	padding: 8px 15px;
	font-size: 13.5px;
	font-weight: 650;
	text-align: center;
}

.hnc-chip {
	display: inline-block;
	padding: 2px 11px;
	border-radius: 999px;
	font-size: 13px; font-weight: 750;
	color: #fff;
}

/* resultado de "¿qué engomado tiene mi auto?" (/engomado) */
.eng-res {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	margin-top: 14px;
	padding: 14px 17px;
	background: var(--suave);
	border: 1px solid var(--linea);
	border-radius: var(--radio-s);
}
.eng-res .eng-res__chip { font-size: 14px; padding: 5px 15px; text-transform: capitalize; flex: 0 0 auto; margin-top: 1px; color: #fff; }
.eng-res b { font-size: 15.5px; }
.eng-res div span { display: block; color: var(--gris); font-size: 13.5px; margin-top: 3px; }
.eng-res div span a { font-weight: 650; }

#eng-tabla tbody tr.fila-on td { background: #f0faf6; }
#eng-tabla tbody tr.fila-on td:first-child { box-shadow: inset 3px 0 0 var(--esm); }

.hnc-fuentes {
	background: #f0faf6;
	border: 1px solid #cdeede;
	border-left: 4px solid var(--esm);
	padding: 12px 16px;
	border-radius: 0 var(--radio-s) var(--radio-s) 0;
	font-size: 13.5px;
	margin: 20px 0 4px;
}
.hnc-fuentes ul { margin: 6px 0 0; padding-left: 18px; }

.guias-lista { margin: 0; padding: 0 0 0 20px; columns: 2; column-gap: 34px; }
.guias-lista li { margin-bottom: 7px; font-size: 15px; }
@media (max-width: 640px) { .guias-lista { columns: 1; } }

.faq h2 { font-size: 17.5px; margin: 22px 0 6px; }
.faq h2:first-of-type { margin-top: 8px; }

.grid-2 { display: grid; gap: 14px; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.centro { text-align: center; }

/* ---------- calendario ---------- */

/* selector placa+holograma compartido (calendario, sabatino): botones como la home */
.selector-placa { margin: 4px 0 14px; }
.selector-placa .lbl:first-child { margin-top: 4px; }
.selector-placa__fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* la nota es una píldora (.meta): vacía renderizaba una capsulita fantasma */
.selector-placa .meta:empty { display: none; }
.selector-placa .meta { margin: 14px 0 0; }

.cal-limpiar {
	padding: 11px 16px;
	font: 650 13.5px Inter, sans-serif;
	color: var(--gris);
	background: transparent;
	border: 1.5px solid var(--linea);
	border-radius: var(--radio-s);
	cursor: pointer;
}
.cal-limpiar:hover { color: var(--no); border-color: var(--nolinea); background: var(--nobg); }

.cal-meses { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.cal-mes { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 14px 12px; }
.cal-mes__titulo { text-align: center; font-size: 15px; font-weight: 800; margin: 0 0 10px; }

/* minmax(0,1fr): sin esto, un min-size en las celdas (p.ej. min-height+aspect-ratio)
   agranda los tracks y la columna del sábado se sale de la tarjeta del mes */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { text-align: center; font-size: 10.5px; font-weight: 750; color: var(--gris); padding-bottom: 2px; }
/* altura FIJA: ni aspect-ratio ni min-height — ambos transfieren un min-width
   a la celda y desbordan la grilla (ya rompió móvil 360px y desktop) */
.cal-dia, .cal-vacio { position: relative; height: 42px; }

.cal-dia a {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	border-radius: 11px;
	text-decoration: none;
	color: var(--tinta);
	font-size: 13.5px; font-weight: 650;
	background: var(--fondo);
	border: 1.5px solid transparent;
}
.cal-dia a:hover { border-color: var(--esm2); color: var(--esmosc); }

.cal-dia .pin { width: 7px; height: 7px; border-radius: 50%; margin-top: 3px; }
.cal-dia--mon .pin { background: var(--eng-amarillo); }
.cal-dia--tue .pin { background: var(--eng-rosa); }
.cal-dia--wed .pin { background: var(--eng-rojo); }
.cal-dia--thu .pin { background: var(--eng-verde); }
.cal-dia--fri .pin { background: var(--eng-azul); }
.cal-dia--sat .pin { background: var(--eng-sab); }
.cal-dia--dom a, .cal-dia--libre a { background: var(--okbg); color: var(--ok); }
.cal-dia--dom .pin, .cal-dia--libre .pin { background: transparent; }

.cal-dia--hoy a { border: 2px solid var(--tinta); font-weight: 800; }

.cal-dia--cont a::after { content: "⚠"; position: absolute; top: 1px; right: 4px; font-size: 10px; }

.cal-dia--rest a {
	background: rgba(205, 43, 49, .12);
	border-color: var(--no);
	color: var(--no);
	font-weight: 800;
}
.cal-dia--rest .pin { background: var(--no); }
.cal-dia--rest a:hover { color: #a02226; border-color: #a02226; }

.cal-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--gris); margin-top: 12px; }
.cal-leyenda .pin { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }

/* ---------- pie ---------- */

.pie {
	background: var(--esmtinta);
	color: #d3eadf;
	margin-top: 30px;
	padding: 28px 0 16px;
	font-size: 13.5px;
}
.pie a { color: #fff; opacity: .92; text-decoration: none; display: block; margin: 4px 0; font-size: 13px; }
.pie a:hover { opacity: 1; text-decoration: underline; color: #fff; }

.pie__cols { display: flex; flex-wrap: wrap; gap: 28px; }
.pie__col { flex: 1 1 170px; }
.pie__col h2 { color: #fff; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; margin: 0 0 8px; }

.pie__fuentes { margin-top: 10px; font-size: 12.5px; color: #9cc6b3; }
.pie__fuentes a { display: inline; }

.pie__legal { border-top: 1px solid #0d5c44; margin-top: 18px; padding-top: 12px; font-size: 12px; color: #9cc6b3; }
.pie__legal a { display: inline; }
.pie__copy { margin: 6px 0 0; color: #7fb59f; }

/* ---------- migas (breadcrumb visible, mismo dato que el schema) ---------- */

.migas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	font-weight: 600;
	margin-bottom: 10px;
	opacity: .92;
}
.migas a { color: #fff; opacity: .8; text-decoration: none; }
.migas a:hover { opacity: 1; text-decoration: underline; color: #fff; }
.migas a::after { content: "›"; margin-left: 6px; opacity: .65; }
.migas span[aria-current] { opacity: .95; }

/* ---------- volver (páginas fechadas → calendario) ---------- */

.volver {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--fondo);
	border: 1px solid var(--linea);
	border-radius: 999px;
	padding: 7px 15px;
	font-size: 13px;
	font-weight: 700;
	color: var(--esmosc);
	text-decoration: none;
	margin-bottom: 16px;
}
.volver:hover { border-color: var(--esm2); background: #f0faf6; }

/* tabla con columnas de estado centradas (sabatino) */
.tabla-centrada th:not(:first-child),
.tabla-centrada td:not(:first-child) { text-align: center; }
.tabla-centrada th:first-child { width: 38%; }
.tabla-centrada th:nth-child(2) { width: 12%; }
.tabla-centrada th:nth-child(3) { width: 25%; }
.tabla-centrada th:nth-child(4) { width: 25%; }

/* sabatino: 5 columnas (con "Tu auto" opcional) → anchos propios */
#sab-tabla th:first-child { width: 32%; }
#sab-tabla th:nth-child(2) { width: 15%; }
#sab-tabla th:nth-child(3) { width: 11%; }
#sab-tabla th:nth-child(4) { width: 21%; }
#sab-tabla th:nth-child(5) { width: 21%; }

/* tabla--fichas: en pantallas angostas cada fila se vuelve una mini-tarjeta
   apilada; el encabezado de columna viaja en data-label de cada celda */
@media (max-width: 540px) {
	.tabla--fichas { display: block; border: 0; border-radius: 0; overflow: visible; }
	.tabla--fichas thead { display: none; }
	.tabla--fichas tbody { display: block; }
	.tabla--fichas tbody tr {
		display: block;
		border: 1px solid var(--linea);
		border-radius: var(--radio-s);
		padding: 6px 15px;
		background: var(--panel);
	}
	.tabla--fichas tbody tr + tr { margin-top: 10px; }
	.tabla--fichas tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 14px;
		padding: 9px 0;
		border-bottom: 1px solid var(--suave);
		background: none;
		text-align: right;
	}
	.tabla--fichas tbody tr:hover td { background: none; }
	.tabla--fichas tbody td:last-child { border-bottom: 0; }
	.tabla--fichas tbody td:first-child { font-size: 15px; justify-content: flex-start; text-align: left; }
	.tabla--fichas tbody td[data-label]::before {
		content: attr(data-label);
		font-size: 11px;
		font-weight: 750;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--gris);
		text-align: left;
	}
}

/* ---------- recurso "en vivo" (puntos 1-3) ---------- */

@keyframes vivoblink { 50% { opacity: .3; } }

.estado-pill .dot {
	display: inline-block;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #5ef0a0;
	margin-right: 2px;
	animation: vivoblink 1.8s infinite;
}
.estado-pill.alerta .dot { background: #fff; }

.badge-vivo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	vertical-align: 2px;
	margin-left: 8px;
}
.badge-vivo i {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
	animation: vivoblink 1.8s infinite;
}

.hnc-updated .dot-vivo {
	display: inline-block;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #1faf54;
	margin-right: 6px;
	vertical-align: 1px;
	animation: vivoblink 1.8s infinite;
}

/* res hero (estado grande de contingencia) */
.res--hero { padding: 17px 19px; }
.res--hero b { font-size: 18px; }
.res--hero .ic { width: 34px; height: 34px; border-radius: 11px; font-size: 17px; }
.res--hero > div > span { font-size: 14.5px; margin-top: 4px; }

/* monitor de contingencia (/contingencia-ambiental): hero XL + panel de vigilancia */
.monitor .res--hero { padding: 22px 24px; border-radius: 16px; }
.monitor .res--hero b { font-size: 21px; }
.monitor .res--hero .ic { width: 42px; height: 42px; border-radius: 13px; font-size: 21px; }
.monitor .res--hero > div > span { font-size: 15px; margin-top: 6px; }

.vigilancia {
	margin-top: 14px;
	border: 1px solid var(--linea);
	border-radius: 14px;
	padding: 16px 18px;
	background: var(--suave);
}
.vigilancia__head { display: flex; gap: 13px; align-items: flex-start; }
.vigilancia__head b { font-size: 15.5px; }
.vigilancia__head div > span { display: block; color: var(--gris); font-size: 13.5px; margin-top: 3px; line-height: 1.5; }

.vigilancia__radar {
	flex: 0 0 auto;
	width: 38px; height: 38px;
	border-radius: 12px;
	background: var(--ok);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
	box-shadow: 0 2px 8px rgba(24, 121, 78, .35);
}
.vigilancia__radar i {
	display: block;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: #fff;
	border: 2.5px solid #ff5a4e;
	animation: radarpulse 1.8s infinite;
}
@keyframes radarpulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 90, 78, .65); transform: scale(1); }
	50%  { transform: scale(1.12); }
	70%  { box-shadow: 0 0 0 13px rgba(255, 90, 78, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 90, 78, 0); transform: scale(1); }
}

.vigilancia__stats {
	list-style: none;
	display: flex; flex-wrap: wrap; gap: 8px;
	margin: 13px 0 0; padding: 0;
}
.vigilancia__stats li {
	background: #fff;
	border: 1px solid var(--linea);
	border-radius: 10px;
	padding: 8px 13px;
}
.vigilancia__stats b {
	display: block;
	font-size: 11.5px; font-weight: 750;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--gris);
}
.vigilancia__stats span { font-size: 14px; font-weight: 700; color: var(--tinta); }

.vigilancia__hist { margin-top: 14px; border-top: 1px solid var(--linea); padding-top: 12px; }
.vigilancia__hist > b {
	display: block;
	font-size: 11.5px; font-weight: 750;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--gris);
	margin-bottom: 7px;
}
.vigilancia__hist ul { list-style: none; margin: 0; padding: 0; }
.vigilancia__hist li {
	display: flex; gap: 8px; align-items: baseline;
	font-size: 13.5px; color: var(--tinta);
	padding: 4px 0;
}
.vigilancia__hist .dot {
	flex: 0 0 auto;
	width: 8px; height: 8px; border-radius: 50%;
	align-self: center;
}
.vigilancia__hist .dot--ok { background: var(--ok); }
.vigilancia__hist .dot--alerta { background: var(--no); }
.vigilancia__hist .dot--pulso { animation: vivoblink 1.8s infinite; }
.vigilancia__hist .fecha { font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; min-width: 118px; }
.vigilancia__vacio { margin: 0; color: var(--gris); font-size: 13.5px; }
.vigilancia__mas {
	display: inline-block;
	margin-top: 8px;
	padding: 10px 2px; margin-bottom: -10px;
	font-size: 13px; font-weight: 700;
	color: var(--esm);
	text-decoration: none;
}
.vigilancia__mas:hover { text-decoration: underline; }

.historial__n { font-size: 13px; font-weight: 650; color: var(--gris); }

/* cajas de estado heredadas (.hnc-res) usadas en fichas y edomex */
.hnc-res {
	border-radius: 14px;
	padding: 13px 17px;
	font-size: 15px;
}
.hnc-res--no { background: var(--nobg); color: var(--no); }
.hnc-res--si { background: var(--okbg); color: var(--ok); }
.hnc-res span { display: block; font-size: 13.5px; margin-top: 4px; }
.hnc-res a { color: inherit; font-weight: 700; }

/* el badge dentro de .res no hereda el display:block de los spans */
.res .badge-vivo { display: inline-flex; margin-top: 0; }

/* ---------- liveness: countdown, chip de placa, toast ---------- */

.cuenta {
	margin: 10px 0 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--esmtinta);
	background: #f0faf6;
	border: 1px solid #cdeede;
	border-radius: 999px;
	padding: 6px 14px;
	display: inline-block;
}

.toast-dia {
	position: fixed;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	background: var(--tinta);
	color: #fff;
	font: 650 14px Inter, sans-serif;
	padding: 11px 20px;
	border-radius: 999px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
	z-index: 99;
}