/* El Agua en Jalisco — sistema de diseño
   Tipografía: Caladea (titulares), Carlito (texto), Liberation Mono (cifras)
   Colores: tinta profunda / papel / ámbar turbio / verde-agua claro */
@font-face{font-family:"Caladea";src:url("/assets/fuentes/caladea.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Caladea";src:url("/assets/fuentes/caladea-bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Caladea";src:url("/assets/fuentes/caladea-italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Carlito";src:url("/assets/fuentes/carlito.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Carlito";src:url("/assets/fuentes/carlito-bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"MonoAgua";src:url("/assets/fuentes/mono.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"MonoAgua";src:url("/assets/fuentes/mono-bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  --tinta:#07192b; --tinta2:#0b2238; --tinta3:#133250;
  --papel:#f3efe6; --papel2:#e9e3d6; --papel3:#dcd4c3;
  --texto:#16222c; --texto-suave:#55636f; --texto-claro:#e7eef4; --texto-claro-suave:#9fb1c0;
  --turbia:#b8742a; --turbia2:#8a5420; --olor:#7a5c3a; --sin:#c8463a; --baja:#d9a441; --pipa:#5b7fb9; --mejoro:#4fb28b; --clara:#27b9a8; --clara2:#1a8a7d;
  --riel:76px; --radio:14px;
  --serif:"Caladea",Georgia,serif; --sans:"Carlito",Calibri,"Segoe UI",sans-serif; --mono:"MonoAgua","Liberation Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:18px;line-height:1.5;color:var(--texto);background:var(--tinta)}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--serif);line-height:1.08;margin:0 0 .4em;font-weight:700;letter-spacing:-.01em}
h2{font-size:clamp(30px,4.2vw,52px)}
h3{font-size:clamp(22px,2.4vw,28px)}
p{margin:0 0 1em}
a{color:inherit}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.grande{font-size:clamp(40px,6vw,72px);font-weight:700;line-height:1}
.saltar{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 12px;z-index:200}
.saltar:focus{left:8px}
:focus-visible{outline:3px solid var(--clara);outline-offset:3px}
.hp{position:absolute;left:-5000px;width:1px;height:1px;opacity:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ───── Riel de navegación ───── */
.riel{position:fixed;left:0;top:0;bottom:0;width:var(--riel);background:var(--tinta2);border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center;padding:18px 0;z-index:100;color:var(--texto-claro)}
.riel-marca{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;font-family:var(--serif);font-size:11px;line-height:1.05;text-align:center;letter-spacing:.02em;color:var(--clara)}
.riel-marca span{color:var(--texto-claro)}
.gota{width:30px;height:42px}
.gota-nivel{transition:y 1.4s cubic-bezier(.3,.9,.3,1)}
.riel ul{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;width:100%}
.riel li a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0;text-decoration:none;font-size:11px;color:var(--texto-claro-suave);border-left:3px solid transparent}
.riel li a.activo,.riel li a:hover{color:#fff;border-left-color:var(--clara);background:rgba(255,255,255,.04)}
.ico{width:22px;height:22px;display:block;background:currentColor;-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain}
.ico-datos{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E")}
.ico-mapa{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E")}
.ico-dia{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.ico-avance{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E")}
.ico-firma{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 19c3-6 5-9 7-9s1 6 3 6 3-6 5-6 2 5 3 5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 19c3-6 5-9 7-9s1 6 3 6 3-6 5-6 2 5 3 5'/%3E%3C/svg%3E")}
.ico-marcha{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 21V9M6 9h10l-2 3 2 3H6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 21V9M6 9h10l-2 3 2 3H6'/%3E%3C/svg%3E")}
.ico-regla{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7z'/%3E%3C/svg%3E")}
.riel-cta{margin-top:auto;writing-mode:vertical-rl;transform:rotate(180deg);background:var(--clara);color:var(--tinta);border:0;border-radius:999px;padding:14px 10px;font:700 14px var(--sans);cursor:pointer;letter-spacing:.04em}
.riel-cta:hover{background:#5ad3c5}

main{margin-left:var(--riel)}

/* ───── Botones ───── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:14px 26px;font:700 17px var(--sans);text-decoration:none;cursor:pointer;border:2px solid transparent;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-chico{padding:9px 16px;font-size:15px}
.btn-claro{background:var(--clara);color:var(--tinta)}
.btn-claro:hover{background:#5ad3c5}
.btn-linea{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-linea:hover{border-color:#fff}
.btn-oscuro{background:var(--tinta2);color:#fff}
.btn-oscuro:hover{background:var(--tinta3)}
.btn-linea-oscura{background:transparent;color:var(--tinta2);border-color:var(--tinta2)}
.btn-firmar{background:var(--turbia);color:#fff;font-size:19px;padding:16px 30px}
.btn-firmar:hover{background:var(--turbia2)}
.btn-wa{background:#25d366;color:#083}
.btn[disabled]{opacity:.6;cursor:wait;transform:none}

/* ───── Héroe ───── */
.hero{min-height:100svh;background:radial-gradient(1200px 700px at 80% 10%,#163a5b 0%,var(--tinta) 55%);color:var(--texto-claro);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:auto -10% -40% -10%;height:70%;background:radial-gradient(ellipse at center,rgba(39,185,168,.18),transparent 60%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;padding:clamp(40px,8vh,90px) clamp(20px,5vw,72px) 30px;flex:1}
.etiqueta{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--clara);margin-bottom:18px}
.hero h1{font-size:clamp(44px,7.2vw,104px);letter-spacing:-.025em;color:#fff;margin-bottom:22px}
.hero-sub{font-size:clamp(18px,1.6vw,22px);color:var(--texto-claro);max-width:60ch}
.hero-botones{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 18px}
.hero-nota{font-size:15px;color:var(--texto-claro-suave);max-width:52ch}
.hero-vaso{display:flex;flex-direction:column;align-items:center;gap:14px}
.vaso{position:relative;width:min(240px,50vw);aspect-ratio:3/4;border:3px solid rgba(255,255,255,.75);border-top-width:4px;border-radius:14px 14px 40px 40px;overflow:hidden;background:rgba(255,255,255,.04);box-shadow:inset 0 0 40px rgba(255,255,255,.06),0 30px 60px -20px rgba(0,0,0,.6)}
.vaso-agua{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(180deg,var(--turbia) 0%,var(--turbia2) 100%);transition:height 1.6s cubic-bezier(.3,.9,.3,1),background 1.6s}
.vaso-agua::before{content:"";position:absolute;left:-20%;right:-20%;top:-14px;height:28px;background:inherit;border-radius:50%;filter:brightness(1.15);animation:ola 4s ease-in-out infinite}
.sedimento{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,0,0,.35) 1px,transparent 1.6px),radial-gradient(circle,rgba(255,255,255,.15) 1px,transparent 1.6px);background-size:11px 13px,17px 19px;background-position:0 0,6px 9px;opacity:1;transition:opacity 1.6s;animation:flotar 9s linear infinite}
.vaso-brillo{position:absolute;left:12%;top:8%;width:10%;height:60%;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent);border-radius:999px}
.vaso-leyenda{text-align:center;display:flex;flex-direction:column;gap:2px;color:var(--texto-claro-suave);font-size:15px}
.vaso-leyenda .mono{font-size:34px;color:#fff;font-weight:700}
.vaso-leyenda small{font-size:12px;max-width:26ch;margin:0 auto}
@keyframes ola{0%,100%{transform:translateX(0) scaleY(1)}50%{transform:translateX(6%) scaleY(.7)}}
@keyframes flotar{to{background-position:0 -120px,6px -90px}}
.ticker{border-top:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.25);overflow:hidden;white-space:nowrap;font-family:var(--mono);font-size:13px;color:var(--texto-claro-suave);padding:10px 0}
.ticker-pista{display:inline-block;padding-left:100%;animation:correr 40s linear infinite}
.ticker-pista span{margin-right:48px}
.ticker-pista b{color:var(--clara);font-weight:400}
@keyframes correr{to{transform:translateX(-100%)}}

/* ───── Bloques ───── */
.bloque{padding:clamp(56px,8vw,110px) clamp(20px,5vw,72px)}
.papel{background:var(--papel);color:var(--texto)}
.oscuro{background:var(--tinta);color:var(--texto-claro)}
.oscuro h2,.oscuro h3{color:#fff}
.bloque-cab{max-width:72ch;margin-bottom:38px}
.bloque-cab p:last-child{font-size:19px;color:var(--texto-suave)}
.oscuro .bloque-cab p:last-child{color:var(--texto-claro-suave)}
.kicker{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--turbia);margin-bottom:12px}
.oscuro .kicker{color:var(--clara)}

/* Cifras */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-bottom:48px}
.cifra{background:#fff;border-radius:var(--radio);padding:22px 22px 18px;border-top:4px solid var(--turbia);box-shadow:0 10px 30px -18px rgba(7,25,43,.35)}
.cifra .mono{font-size:46px;font-weight:700;line-height:1;color:var(--tinta2);display:block}
.cifra .unidad{font-family:var(--serif);font-size:19px;color:var(--turbia2);display:block;margin:4px 0 10px}
.cifra p{font-size:15.5px;color:var(--texto-suave);margin-bottom:10px}
.fuente{font-family:var(--mono);font-size:12.5px}
.fuente a{color:var(--tinta3)}
/* Chapala */
.chapala{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:34px;align-items:center;background:#fff;border-radius:var(--radio);padding:30px;margin-bottom:48px}
.chapala-lago{position:relative}
.lago{width:100%;height:auto}
#lago-agua{transition:y 1.8s cubic-bezier(.3,.9,.3,1)}
.chapala-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4);pointer-events:none}
.chapala-num .grande{font-size:clamp(36px,5vw,58px)}
.spark{width:100%;height:auto;margin:10px 0}
.nota{font-size:15.5px;color:var(--texto-suave);border-left:3px solid var(--papel3);padding-left:12px}
/* Cronología */
.linea{list-style:none;margin:0;padding:0;position:relative;border-left:2px solid var(--papel3);margin-left:8px}
.linea li{position:relative;padding:0 0 26px 28px}
.linea li::before{content:"";position:absolute;left:-8px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--turbia);border:3px solid var(--papel)}
.linea li:last-child::before{background:var(--clara)}
.linea time{font-family:var(--mono);font-size:12.5px;color:var(--texto-suave);display:block;margin-bottom:2px}
.linea h4{font-family:var(--serif);font-size:21px;margin:0 0 4px}
.linea p{font-size:16px;margin-bottom:4px;color:#2b3944}

/* ───── Mapa ───── */
.mapa-herr{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.25);background:transparent;color:inherit;border-radius:999px;padding:7px 12px;font:15px var(--sans);cursor:pointer}
.papel .chip{border-color:var(--papel3)}
.chip b{font-family:var(--mono);font-weight:400;opacity:.75}
.chip.activo{background:#fff;color:var(--tinta);border-color:#fff}
.papel .chip.activo{background:var(--tinta2);color:#fff;border-color:var(--tinta2)}
.pt{width:11px;height:11px;border-radius:50%;display:inline-block;flex:none}
.pt-turbia{background:var(--turbia)}.pt-olor{background:var(--olor)}.pt-sin_agua{background:var(--sin)}.pt-baja_presion{background:var(--baja)}.pt-pipa{background:var(--pipa)}.pt-mejoro{background:var(--mejoro)}.pt-clara{background:var(--clara)}
.capas{display:flex;align-items:center;gap:14px}
.switch{display:inline-flex;align-items:center;gap:8px;font-size:15px;cursor:pointer}
.mapa-caja{height:min(70vh,640px);border-radius:var(--radio);overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#1b2f44}
.mapa-pie{font-size:14px;color:var(--texto-claro-suave);margin-top:12px}
.marcador{width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.marcador.sin_verificar{border-style:dashed}
.leaflet-popup-content{font:15px/1.4 var(--sans);color:var(--texto)}
.leaflet-popup-content h4{font-family:var(--serif);margin:0 0 4px;font-size:17px}
.leaflet-popup-content img{border-radius:6px;margin-top:6px;max-height:160px;object-fit:cover}
.leaflet-popup-content .mono{font-size:11.5px;color:var(--texto-suave)}
.leaflet-container{font-family:var(--sans)}
.mini-mapa{height:200px;border-radius:10px;border:1px solid var(--papel3);margin:0 0 14px;background:#dde4ea}

/* ───── Día a día ───── */
.tandeo-barra{background:#fff;border-radius:var(--radio);padding:16px 20px;margin-bottom:26px}
.tandeo-cab,.tandeo-pies,.meta-pies{display:flex;justify-content:space-between;font-size:14px;color:var(--texto-suave)}
.tandeo-cab{font-size:16px;color:var(--texto);margin-bottom:8px}
.barra{height:12px;border-radius:999px;background:var(--papel2);overflow:hidden;position:relative}
.barra.alta{height:34px;border-radius:10px;background:#dde8ee}
.barra-relleno{height:100%;width:0;background:var(--tinta2);border-radius:999px;transition:width 1.6s cubic-bezier(.3,.9,.3,1)}
.barra-relleno.agua{background:linear-gradient(90deg,var(--clara2),var(--clara))}
.barra-olas{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 18px,rgba(255,255,255,.18) 18px 20px);mix-blend-mode:overlay;pointer-events:none}
.tandeo-pies{margin-top:6px;font-family:var(--mono);font-size:12px}
.dias-wrap{display:flex;align-items:center;gap:8px}
.dias-flecha{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--papel3);background:#fff;font-size:22px;cursor:pointer;color:var(--tinta2)}
.dias{list-style:none;margin:0;padding:6px 2px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;flex:1;min-width:0}
.dias::-webkit-scrollbar{display:none}
.dia{flex:none;scroll-snap-align:start;width:112px;background:#fff;border-radius:var(--radio);padding:12px 10px 10px;border:2px solid transparent;cursor:pointer;text-align:center;transition:transform .15s,border-color .15s}
.dia:hover{transform:translateY(-2px)}
.dia.activo{border-color:var(--tinta2)}
.dia .fecha{font-family:var(--mono);font-size:12px;color:var(--texto-suave);display:block}
.dia .dia-nombre{font-family:var(--serif);font-size:17px;display:block;margin-bottom:4px}
.dia svg{width:44px;height:60px;display:block;margin:0 auto 4px}
.dia .pct{font-family:var(--mono);font-size:15px;font-weight:700}
.dia .cuenta{font-size:12px;color:var(--texto-suave)}
.dia.hoy .dia-nombre::after{content:" · hoy";font-family:var(--mono);font-size:10px;color:var(--clara2)}
.dia-detalle{background:#fff;border-radius:var(--radio);padding:22px 24px;margin:18px 0 26px;min-height:80px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px}
.dia-detalle h3{margin-bottom:6px}
.dia-detalle ul{margin:0 0 10px;padding-left:20px;font-size:16px}
.dia-detalle .fuente{margin:0}
.barritas{display:flex;flex-direction:column;gap:8px;font-size:14px}
.barrita{display:grid;grid-template-columns:110px minmax(0,1fr) 30px;gap:8px;align-items:center}
.barrita i{display:block;height:10px;border-radius:999px;min-width:2px}
.barrita b{font-family:var(--mono);font-weight:400;text-align:right}
.vacio{color:var(--texto-suave);font-size:15px}
.tendencia{background:#fff;border-radius:var(--radio);padding:22px 24px}
#tendencia-svg{width:100%;height:auto}
.leyenda{display:flex;gap:22px;flex-wrap:wrap;font-size:14px;color:var(--texto-suave);margin-top:6px}
.lin{display:inline-block;width:26px;height:3px;vertical-align:middle;margin-right:6px}
.lin-oficial{background:var(--tinta2)}.lin-gente{background:var(--clara);height:3px;border-top:2px dashed var(--clara);background:none}

/* ───── Avances ───── */
.avances{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:20px}
.avance{background:var(--tinta2);border:1px solid rgba(255,255,255,.1);border-radius:var(--radio);padding:20px 20px 16px;display:flex;flex-direction:column;gap:8px}
.avance .estado{align-self:flex-start;font-family:var(--mono);font-size:12px;padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.estado.cumplido{background:var(--mejoro);color:#032}
.estado.en_proceso{background:var(--baja);color:#321}
.estado.cambiado{background:var(--turbia);color:#fff}
.estado.sin_respuesta{background:var(--sin);color:#fff}
.estado.vigilancia{background:#6f8aa8;color:#fff}
.avance h4{font-family:var(--serif);font-size:21px;margin:0;color:#fff}
.avance .quien{font-size:14px;color:var(--texto-claro-suave);font-family:var(--mono)}
.avance p{font-size:16px;margin:0;color:var(--texto-claro)}
.avance .fuente a{color:var(--clara)}

/* ───── Carta ───── */
.carta{background:var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23d9d1c0'/%3E%3C/svg%3E")}
.meta{background:#fff;border-radius:var(--radio);padding:26px 28px;margin-bottom:30px;box-shadow:0 20px 50px -30px rgba(7,25,43,.4)}
.meta-num{display:flex;align-items:baseline;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.meta-num span:last-child{font-size:18px;color:var(--texto-suave)}
.meta-pies{margin-top:8px;font-family:var(--mono);font-size:13px}
.carta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.carta-texto{background:#fff;border-radius:var(--radio);padding:30px 32px;font-family:var(--serif);font-size:18px;line-height:1.55;border-left:6px solid var(--turbia)}
.carta-para{font-weight:700}
.carta-regla{font-family:var(--sans);font-size:15px;color:var(--turbia2);background:#fdf3e4;padding:12px 14px;border-radius:10px}
.firmas-recientes{font-family:var(--sans);margin-top:18px;border-top:1px solid var(--papel2);padding-top:14px}
.firmas-recientes h3{font-size:18px}
.firmas-recientes ul{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:5px;font-size:15px}
.firmas-recientes li span{color:var(--texto-suave)}
.muni{display:flex;flex-direction:column;gap:5px;font-size:13px}
.muni div{display:grid;grid-template-columns:140px minmax(0,1fr) 40px;gap:8px;align-items:center}
.muni i{display:block;height:8px;border-radius:999px;background:var(--clara2)}
.muni b{font-family:var(--mono);font-weight:400;text-align:right}
.form-firma{background:#fff;border-radius:var(--radio);padding:26px 28px;box-shadow:0 20px 50px -30px rgba(7,25,43,.4)}
.pasos{display:flex;gap:6px;margin-bottom:18px}
.paso{flex:1;text-align:center;font-family:var(--mono);font-size:12px;padding:8px 4px;border-radius:8px;background:var(--papel2);color:var(--texto-suave)}
.paso.activo{background:var(--tinta2);color:#fff}
.paso.hecho{background:var(--clara);color:var(--tinta)}
fieldset{border:0;padding:0;margin:0;display:none;flex-direction:column;gap:14px}
fieldset.activo{display:flex}
label{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:700;color:var(--tinta2)}
input[type=text],input[type=url],input[type=date],input[type=time],select,textarea{font:17px var(--sans);padding:13px 14px;border:2px solid var(--papel3);border-radius:10px;background:#fff;color:var(--texto);width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--tinta2);outline:none}
textarea{resize:vertical}
.ayuda{font-size:14px;color:var(--texto-suave);display:flex;justify-content:space-between;margin:-8px 0 0}
.ayuda.mal{color:var(--sin);font-weight:700}
.fila{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.label{font-weight:700;font-size:15px;color:var(--tinta2);margin:0}
.label small{font-weight:400;color:var(--texto-suave)}
.pad-wrap{position:relative}
#pad{width:100%;height:auto;border:2px dashed var(--papel3);border-radius:10px;background:#fbfaf7;touch-action:none;display:block}
.pad-wrap::after{content:"";position:absolute;left:8%;right:8%;bottom:26%;border-bottom:1px solid var(--papel3);pointer-events:none}
.pad-limpiar{position:absolute;top:8px;right:8px;border:0;background:var(--papel2);border-radius:999px;padding:5px 11px;font:13px var(--sans);cursor:pointer}
.check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:14px;color:var(--texto-suave)}
.check input{margin-top:3px;width:18px;height:18px;flex:none}
.form-msg{min-height:1.4em;font-size:15px;margin:10px 0 0}
.form-msg.mal{color:var(--sin);font-weight:700}
.form-msg.bien{color:var(--clara2);font-weight:700}
.gracias{text-align:center;padding:10px 0 0}
.compartir{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px}

/* ───── Marchas ───── */
.tabs{display:flex;gap:6px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:22px}
.tab{background:none;border:0;color:var(--texto-claro-suave);font:700 16px var(--sans);padding:10px 14px;border-bottom:3px solid transparent;cursor:pointer;margin-bottom:-1px}
.tab.activo{color:#fff;border-bottom-color:var(--clara)}
.marchas-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.marcha{background:var(--tinta2);border-radius:var(--radio);padding:22px;border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:8px}
.marcha .cuando{font-family:var(--mono);font-size:13px;color:var(--clara)}
.marcha h4{font-family:var(--serif);font-size:22px;margin:0;color:#fff}
.marcha p{margin:0;font-size:16px;color:var(--texto-claro)}
.marcha .origen{font-size:14px;color:var(--texto-claro-suave)}
.marcha .fuentes{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:12.5px}
.marcha .fuentes a{color:var(--clara)}
.marcha .sello{align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.sello.confirmada{background:var(--mejoro);color:#032}.sello.sin_confirmar{background:var(--baja);color:#321}.sello.realizada{background:#6f8aa8;color:#fff}
.convocar{margin-top:26px;background:var(--tinta2);border-radius:var(--radio);padding:16px 22px;border:1px solid rgba(255,255,255,.1)}
.convocar summary{cursor:pointer;font-weight:700;font-size:17px}
.convocar form{margin-top:16px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.convocar label{color:var(--texto-claro)}
.convocar input{background:var(--tinta);color:#fff;border-color:rgba(255,255,255,.2)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%}

/* ───── Reglamento ───── */
.reglas{counter-reset:regla;list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.reglas li{counter-increment:regla;background:#fff;border-radius:var(--radio);padding:22px 22px 20px 66px;position:relative;font-size:16.5px;line-height:1.45}
.reglas li::before{content:counter(regla,decimal-leading-zero);position:absolute;left:18px;top:18px;font-family:var(--mono);font-size:22px;font-weight:700;color:var(--turbia)}
.reglas li b{font-family:var(--serif);font-size:19px;display:block;margin-bottom:4px;color:var(--tinta2)}
.paz details{background:#fff;border-radius:var(--radio);padding:16px 20px}
.paz summary{cursor:pointer;font-family:var(--serif);font-size:19px;font-weight:700}
.paz ul{margin:10px 0 0;padding-left:20px;font-size:16px}
.reglas-pie{margin-top:26px;font-size:15px;color:var(--texto-suave)}

/* ───── Pie ───── */
.pie{margin-left:var(--riel);background:#040f1b;color:var(--texto-claro-suave);padding:40px clamp(20px,5vw,72px) 110px;font-size:15px}
.pie-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.pie strong{color:#fff;font-family:var(--serif);font-size:20px}
.pie a{color:var(--clara)}

/* ───── Cajones / modales ───── */
.cajon{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end;justify-content:center}
.cajon[hidden]{display:none}
.cajon-fondo{position:absolute;inset:0;background:rgba(4,15,27,.7);backdrop-filter:blur(2px)}
.cajon-panel{position:relative;background:var(--papel);color:var(--texto);width:min(760px,100%);max-height:92svh;overflow:auto;border-radius:22px 22px 0 0;padding:14px 24px 28px;display:flex;flex-direction:column;gap:14px;animation:subir .3s ease-out}
@keyframes subir{from{transform:translateY(30px);opacity:0}}
.cajon-asa{width:48px;height:5px;border-radius:999px;background:var(--papel3);margin:0 auto 4px}
.cajon-panel h3{margin:0}
.tipos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.tipos label{flex-direction:row;font-weight:400;font-size:15px}
.tipos input{position:absolute;opacity:0;width:0;height:0}
.tipos span{display:flex;align-items:center;gap:8px;border:2px solid var(--papel3);border-radius:10px;padding:10px 12px;width:100%;cursor:pointer;background:#fff}
.tipos input:checked+span{border-color:var(--tinta2);background:#eef3f7}
.tipos input:focus-visible+span{outline:3px solid var(--clara)}
.ubic{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.ubic-estado{font-size:12.5px;color:var(--texto-suave)}
.foto input{font-size:15px;padding:8px;border:2px dashed var(--papel3);border-radius:10px;background:#fff}

/* ───── Responsivo ───── */
@media (min-width:901px){.cajon{align-items:center}.cajon-panel{border-radius:22px}}
@media (max-width:1100px){.hero-grid{grid-template-columns:minmax(0,1fr)}.hero-vaso{order:-1}.vaso{width:min(180px,40vw)}.vaso-leyenda .mono{font-size:26px}}
@media (max-width:900px){
  :root{--riel:0px}
  main,.pie{margin-left:0}
  .riel{top:auto;bottom:0;width:100%;height:68px;flex-direction:row;border-right:0;border-top:1px solid rgba(255,255,255,.1);padding:0 4px;padding-bottom:env(safe-area-inset-bottom)}
  .riel-marca{display:none}
  .riel ul{margin:0;flex-direction:row;justify-content:space-around;flex:1}
  .riel li a{border-left:0;border-top:3px solid transparent;padding:8px 2px;font-size:10px}
  .riel li a.activo{border-top-color:var(--clara)}
  .riel-cta{margin:8px 6px;writing-mode:horizontal-tb;transform:none;padding:10px 12px;font-size:13px}
  .hero{min-height:auto}
  .chapala,.carta-grid,.dia-detalle,.pie-grid,.grid2{grid-template-columns:minmax(0,1fr)}
  .mapa-caja{height:62vh}
  .bloque{padding-bottom:70px}
}
@media (max-width:520px){
  .hero h1{font-size:42px}
  .tipos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dia{width:96px}
  .cifra .mono{font-size:38px}
  .barrita{grid-template-columns:90px minmax(0,1fr) 30px}
  .muni div{grid-template-columns:110px minmax(0,1fr) 36px}
  .tabs{overflow-x:auto}
}
@media print{
  .riel,.hero,#tablero,#mapa,#bitacora,#avances,#carta,#marchas,.pie,.cajon,.reglas-pie{display:none!important}
  main{margin:0}
  #reglamento{padding:0;background:#fff;color:#000}
  .reglas{display:block}
  .reglas li{page-break-inside:avoid;padding:8px 8px 8px 44px;font-size:13px}
  .reglas li::before{left:6px;top:6px;font-size:16px}
}

/* ajustes tras pruebas */
.dia .pct{display:block}
.switch{flex-direction:row;font-weight:400}
.oscuro label,.oscuro .switch{color:var(--texto-claro)}
.paz{align-items:start}

/* OSM en modo noche para el mapa principal */
.tiles-noche{filter:invert(1) hue-rotate(190deg) saturate(.55) brightness(.9) contrast(.95)}
.leaflet-popup-content a{color:var(--tinta3)}

/* Vaso grande: el nivel ES el porcentaje */
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.vaso{width:min(380px,70vw);aspect-ratio:3/4.2;border-width:5px;border-top-width:6px;border-radius:18px 18px 56px 56px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.vaso-marcas{position:absolute;inset:0;pointer-events:none}
.vaso-marcas span{position:absolute;right:8px;font:12px var(--mono);color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.35);padding:2px 0 0 0;width:34px;text-align:right}
.vaso-agua::before{top:-18px;height:36px}
.vaso-pct-grande{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font:700 clamp(64px,9vw,112px)/1 var(--mono);color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.55);pointer-events:none;letter-spacing:-.04em}
.vaso-pct-grande small{display:block;font:600 15px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85);text-shadow:0 2px 10px rgba(0,0,0,.6);margin-top:6px}
.vaso-leyenda .mono{display:none}
.vaso-leyenda{font-size:17px;color:var(--texto-claro)}
@media (max-width:1100px){.hero-grid{grid-template-columns:minmax(0,1fr)}.vaso{width:min(300px,70vw)}}