/* incementerio · página pública del estado del servicio */
:root { --fondo: #f4f5f2; --sup: #fff; --tinta: #1b2522; --tinta-2: #4f5d58; --borde: #dce2de; --marca: #24453d;
  --ok: #1e7a4c; --ok-f: #e4f3ea; --deg: #8a5a00; --deg-f: #fff4dc; --mal: #b42318; --mal-f: #fdecea; --info: #1d5f8a; --info-f: #e6f1f8;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 15px/1.55 var(--fuente); color: var(--tinta); background: var(--fondo); }
a { color: var(--marca); }
:focus-visible { outline: 3px solid #0b5cc2; outline-offset: 2px; }
.es-cont { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.es-cab { background: var(--sup); border-bottom: 1px solid var(--borde); }
.es-cab .es-cont { display: flex; justify-content: space-between; align-items: center; height: 64px; }
.es-logo { display: flex; gap: 9px; align-items: center; text-decoration: none; color: var(--marca); font-size: 1.15rem; }
.es-nav { display: flex; gap: 18px; align-items: center; font-size: .92rem; }
.es-nav a { text-decoration: none; }
.es-btn { background: var(--marca); color: #fff !important; padding: 8px 16px; border-radius: 999px; }
main.es-cont { padding-top: 26px; padding-bottom: 20px; }
h1, h2 { margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.2rem; }
.es-global { display: flex; gap: 20px; align-items: center; padding: 24px 26px; border-radius: 16px; border: 1px solid; margin-bottom: 20px; }
.es-global h1 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.15; margin: 2px 0 4px; }
.es-global p { margin: 0; color: var(--tinta-2); }
.es-ante { font-size: .78rem !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.es-icono { flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 7px rgba(255,255,255,.6); }
.es-icono::after { content: ""; width: 26px; height: 26px; background: center / contain no-repeat; }
.es-global.es-ok { background: var(--ok-f); border-color: #b5dcc5; } .es-ok .es-ante { color: var(--ok); } .es-ok .es-icono { background: var(--ok); }
.es-ok .es-icono::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.es-global.es-degradado, .es-global.es-mantenimiento { background: var(--deg-f); border-color: #ecd59d; } .es-degradado .es-ante, .es-mantenimiento .es-ante { color: var(--deg); }
.es-degradado .es-icono, .es-mantenimiento .es-icono { background: #c98a12; }
.es-degradado .es-icono::after, .es-mantenimiento .es-icono::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v8M12 18h.01' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.es-global.es-caido { background: var(--mal-f); border-color: #f1b8b1; } .es-caido .es-ante { color: var(--mal); } .es-caido .es-icono { background: var(--mal); }
.es-caido .es-icono::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.es-aviso { background: var(--sup); border: 1px solid var(--borde); border-left: 5px solid var(--mal); border-radius: 12px; padding: 18px 22px; margin-bottom: 20px; }
.es-aviso-mantenimiento { border-left-color: var(--info); }
.es-aviso h2 { margin: 2px 0 6px; } .es-aviso p { margin: 0 0 6px; }
.es-aviso-tipo, .es-aviso-fechas { font-size: .88rem; color: var(--tinta-2); }
.es-tarjeta { background: var(--sup); border: 1px solid var(--borde); border-radius: 16px; padding: 22px 26px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(20,30,27,.04); }
.es-tit { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.es-tit span { color: var(--tinta-2); font-size: .88rem; }
.es-comp { list-style: none; margin: 10px 0 0; padding: 0; }
.es-comp li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--borde); }
.es-comp li:last-child { border-bottom: 0; }
.es-comp strong { display: block; font-size: 1.02rem; }
.es-comp li span:not(.es-pill) { color: var(--tinta-2); font-size: .88rem; }
.es-pill { flex: none; font-size: .8rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.es-pill.es-ok { background: var(--ok-f); color: var(--ok); } .es-pill.es-degradado { background: var(--deg-f); color: var(--deg); }
.es-pill.es-caido { background: var(--mal-f); color: var(--mal); } .es-pill.es-desconocido { background: #eef0ee; color: var(--tinta-2); }
.es-pill.es-mantenimiento { background: var(--info-f); color: var(--info); }
.es-dos { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; }
.es-dos .es-tarjeta { margin-bottom: 20px; }
.es-grande { font-size: 2.4rem; font-weight: 700; margin: 0 0 8px; } .es-grande small { font-size: 1rem; color: var(--tinta-2); }
.es-barras { display: flex; align-items: flex-end; gap: 4px; height: 78px; border-bottom: 1px solid var(--borde); margin-top: 10px; }
.es-barra { flex: 1; background: #cfe3d8; border-radius: 3px 3px 0 0; min-height: 3px; position: relative; display: flex; align-items: flex-end; }
.es-barra.vacia { background: #eceeec; }
.es-doble .es-barra { background: #e3e9e6; } .es-doble .es-barra > span { display: block; width: 100%; background: var(--ok); border-radius: 3px 3px 0 0; }
.es-pie-graf { color: var(--tinta-2); font-size: .82rem; margin: 6px 0 0; }
.es-medidores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.es-medidor { border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; }
.es-medidor > div { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.es-medidor span { color: var(--tinta-2); font-size: .85rem; } .es-medidor strong { font-size: 1.2rem; }
.es-riel { display: block; height: 7px; background: #eceeec; border-radius: 9px; overflow: hidden; }
.es-riel > span { display: block; height: 100%; background: var(--ok); border-radius: 9px; }
.es-riel > span.medio { background: #c98a12; } .es-riel > span.alto { background: var(--mal); }
.es-carga { display: flex; justify-content: space-between; border: 1px dashed var(--borde); border-radius: 10px; padding: 9px 14px; margin: 12px 0 0; color: var(--tinta-2); font-size: .88rem; }
.es-carga strong { color: var(--tinta); }
.es-pct { color: var(--tinta) !important; font-weight: 700; font-size: .95rem !important; }
.es-dias { display: flex; gap: 2px; height: 40px; }
.es-dia { flex: 1; border-radius: 2px; background: var(--ok); }
.es-dia.es-medio { background: #d6a632; } .es-dia.es-mal { background: var(--mal); }
.es-dia.es-sin { background: repeating-linear-gradient(135deg, #eceeec 0 3px, #f6f7f6 3px 6px); }
.es-eje { display: flex; justify-content: space-between; color: var(--tinta-2); font-size: .8rem; margin-top: 6px; }
.es-tabla { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: .92rem; }
.es-tabla caption { text-align: left; color: var(--tinta-2); font-size: .85rem; padding-bottom: 8px; }
.es-tabla th, .es-tabla td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); }
.es-tabla thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); }
.es-nota-p { color: var(--tinta-2); font-size: .85rem; margin: 10px 0 0; }
.es-vacio { color: var(--tinta-2); margin: 10px 0 0; }
.es-hist { list-style: none; padding: 0; margin: 10px 0 0; }
.es-hist li { padding: 12px 0; border-bottom: 1px solid var(--borde); }
.es-hist-f { display: block; color: var(--tinta-2); font-size: .85rem; } .es-hist p { margin: 6px 0 0; }
.es-nota { text-align: center; color: var(--tinta-2); font-size: .88rem; margin: 26px auto 30px; max-width: 70ch; }
.es-pie { border-top: 1px solid var(--borde); background: var(--sup); padding: 18px 0; font-size: .85rem; color: var(--tinta-2); }
@media (max-width: 860px) { .es-dos { grid-template-columns: 1fr; } .es-medidores { grid-template-columns: 1fr; } .es-dias { gap: 1px; } }
@media (max-width: 520px) { .es-global { flex-direction: column; align-items: flex-start; } .es-comp li { flex-direction: column; align-items: flex-start; } .es-tarjeta { padding: 18px; } }
.es-pct .bien { color: var(--ok); } .es-pct .medio { color: var(--deg); } .es-pct .mal { color: var(--mal); }
@media (max-width: 520px) { .es-nav a:not(.es-btn) { display: none; } .es-cab .es-cont { padding: 0 16px; } }