/* Plataforma ARP · identidad inspirada en la Agenda Rural de Palencia (aerrepe.es):
   terracota #CD4021 · ámbar #FFAB44 · oliva #627D47 · crema #F9F5F1 · tinta #1D1D1B */
:root {
  --terra: #cd4021; --terra-oscuro: #a8321a; --terra-suave: #fbe9e3;
  --ambar: #ffab44; --ambar-suave: #fff1dd;
  --oliva: #627d47; --oliva-oscuro: #4a6134; --oliva-suave: #e9efe2;
  --crema: #f9f5f1; --crema2: #f1ebe4; --tinta: #1d1d1b; --gris: #6b6862; --borde: #e6dfd6; --blanco: #ffffff;
  --b1: var(--oliva); --b2: var(--terra); --b3: #c98a1c; --rojo: #b20000;
  --verde: var(--oliva-oscuro); --verde2: var(--oliva); --verde3: var(--oliva-suave); --ocre: var(--ambar); --texto: var(--tinta); --muted: var(--gris);
  --borde-campo: #8f897f; /* 3,5:1 sobre blanco: el borde de un campo tiene que verse */
  --sombra: 0 2px 6px rgba(29,29,27,.05), 0 10px 28px rgba(29,29,27,.06);
  --radio: 14px;
  --fuente: "Inter", "Segoe UI", system-ui, sans-serif;
  --titular: "Fraunces", Georgia, serif;
  --cab: 103px; /* alto de la cabecera: fila de marca (58) + fila de menú (44) + filete */
}
* { box-sizing: border-box; }
html { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; width: 100%; }
body > footer.pie { margin-top: auto; }
html, body { margin: 0; font-family: var(--fuente); color: var(--tinta); background: var(--crema); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--terra); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--terra-oscuro); }
h1, h2, h3 { font-family: var(--titular); font-weight: 600; letter-spacing: -.01em; color: var(--tinta); }
h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; }
h1 { font-size: 30px; margin: 0 0 6px; line-height: 1.15; }
h2 { font-size: 21px; margin: 26px 0 10px; color: var(--oliva-oscuro); }
h3 { font-size: 16px; margin: 14px 0 8px; }
p.sub { color: var(--gris); margin: 0 0 18px; max-width: 900px; font-size: 15.5px; }
button, .btn { font: inherit; font-weight: 600; border: 1.5px solid var(--terra); background: var(--terra); color: #fff; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background .15s, transform .16s cubic-bezier(.23,1,.32,1), box-shadow .15s; text-decoration: none; display: inline-block; line-height: 1.3; }
button:hover, .btn:hover { background: var(--terra-oscuro); border-color: var(--terra-oscuro); color: #fff; box-shadow: 0 4px 14px rgba(205,64,33,.25); }
button:active, .btn:active { transform: scale(.97); }
button.sec, .btn.sec { background: #fff; color: var(--terra); }
button.sec:hover, .btn.sec:hover { background: var(--terra-suave); color: var(--terra-oscuro); box-shadow: none; }
button.peq { padding: 4px 11px; font-size: 13px; }
.ic { display: inline-block; vertical-align: -.2em; margin-right: .35em; flex: none; } .ic.solo { margin-right: 0; }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { font: inherit; padding: 8px 11px; border: 1.5px solid var(--borde-campo); border-radius: 10px; width: 100%; background: #fff; color: var(--tinta); transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--oliva-oscuro); box-shadow: 0 0 0 3px rgba(98,125,71,.3); }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible, input[type=file]:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ambar); }
input:disabled, select:disabled, textarea:disabled { background: var(--crema2); color: var(--gris); border-color: var(--borde); cursor: not-allowed; }
input:user-invalid, select:user-invalid, textarea:user-invalid, [aria-invalid="true"] { border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(178,0,0,.12); }
label .req { font-weight: 500; }
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--gris); margin: 10px 0 4px; letter-spacing: .01em; }

/* ---------- cabecera ---------- */
header.top { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; column-gap: 16px; padding: 0 22px; height: var(--cab); background: var(--blanco); color: var(--tinta); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--borde); box-shadow: 0 1px 0 rgba(29,29,27,.03); }
header.top .marca { height: 58px; margin-right: auto; display: flex; align-items: center; gap: 10px; font-family: var(--titular); font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: var(--tinta); text-decoration: none; white-space: nowrap; }
header.top .marca .logo { height: 40px; padding: 0 12px; border-radius: 12px; background: var(--terra); display: grid; place-items: center; }
header.top .marca .logo img { height: 20px; width: auto; display: block; }
.portada .logo-hero { height: 30px; width: auto; display: block; margin-bottom: 18px; }
header.top .marca small { display: block; font-family: var(--fuente); font-weight: 500; font-size: 11px; color: var(--gris); letter-spacing: .02em; }
nav.menu { display: flex; gap: 2px; flex: 0 0 calc(100% + 44px); height: 44px; align-items: center; border-top: 1px solid var(--borde); margin: 0 -22px; padding: 0 16px; order: 10; }
nav.menu a { white-space: nowrap; color: var(--tinta); text-decoration: none; padding: 7px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 500; opacity: .85; transition: background .15s; }
nav.menu a:hover { background: var(--crema2); opacity: 1; }
nav.menu a.activo { background: var(--terra-suave); color: var(--terra-oscuro); font-weight: 600; opacity: 1; }
header .usuario { font-size: 13px; display: flex; gap: 8px; align-items: center; color: var(--gris); }
.tour-btn { display: none; background: var(--ambar); border-color: var(--ambar); color: var(--tinta); }
.tour-btn:hover { background: #f59b25; border-color: #f59b25; color: var(--tinta); box-shadow: none; }

main { padding: 26px clamp(28px, 3.2vw, 72px) 40px; max-width: 2400px; margin: 0 auto; }
main.ancho { max-width: none; padding: 0; }

/* ---------- portada ---------- */
.portada { position: relative; overflow: hidden; background: var(--tinta); color: #fff; padding: 52px 40px 58px; border-radius: var(--radio); margin-bottom: 22px; box-shadow: var(--sombra); }
.portada::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 500px at 85% 120%, rgba(205,64,33,.55), transparent 60%), radial-gradient(700px 400px at 10% -20%, rgba(98,125,71,.55), transparent 60%); }
.portada .cielo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; --ciclo: 48s; }
.portada .cielo .capa { position: absolute; inset: 0; }
.portada .cielo-dia { background: linear-gradient(180deg, #f7d9a8 0%, #ffbe6b 38%, #f08a45 72%, #cd4021 100%); animation: cielo-dia var(--ciclo) linear infinite; }
.portada .estrellas { background-image: radial-gradient(1.4px 1.4px at 58% 18%, #f9f5f1 50%, transparent 51%), radial-gradient(1.2px 1.2px at 66% 34%, #f9f5f1 50%, transparent 51%), radial-gradient(1.6px 1.6px at 73% 12%, #f9f5f1 50%, transparent 51%), radial-gradient(1.2px 1.2px at 81% 27%, #f9f5f1 50%, transparent 51%), radial-gradient(1.4px 1.4px at 88% 9%, #f9f5f1 50%, transparent 51%), radial-gradient(1.2px 1.2px at 93% 38%, #f9f5f1 50%, transparent 51%), radial-gradient(1.3px 1.3px at 62% 46%, #f9f5f1 50%, transparent 51%), radial-gradient(1.2px 1.2px at 77% 44%, #f9f5f1 50%, transparent 51%), radial-gradient(1.5px 1.5px at 96% 20%, #f9f5f1 50%, transparent 51%), radial-gradient(1.1px 1.1px at 85% 50%, #f9f5f1 50%, transparent 51%); opacity: 0; animation: cielo-noche var(--ciclo) linear infinite; }
.portada .orbita { position: absolute; left: 78%; bottom: -20px; width: 0; height: 0; animation: orbita var(--ciclo) linear infinite; }
.portada .astro { position: absolute; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; left: 0; }
.portada .sol { top: -340px; background: #ffab44; box-shadow: 0 0 0 10px rgba(255,236,200,.28), 0 0 70px 24px rgba(255,210,140,.55); }
.portada .luna { top: 340px; background: #fffdf6; box-shadow: inset -14px -9px 0 0 rgba(29,29,27,.09), 0 0 0 10px rgba(255,253,246,.13), 0 0 90px 30px rgba(255,250,235,.42); }
.portada .cielo .colinas { top: auto; bottom: 0; height: 55%; width: 100%; }
.portada .velo-noche { background: linear-gradient(180deg, transparent 0%, transparent 42%, rgba(29,29,27,.6) 100%); opacity: 0; animation: cielo-noche var(--ciclo) linear infinite; }
.portada .velo-texto { background: linear-gradient(90deg, rgba(29,29,27,.94) 0%, rgba(29,29,27,.88) 38%, rgba(29,29,27,.45) 58%, transparent 76%); }
.portada > .logo-hero, .portada > .etiqueta, .portada > h1, .portada > p, .portada > .cta { z-index: 2; }
/* La órbita arranca con el sol ya alto (−30°). Bajo el horizonte gira más deprisa para que el relevo entre sol y luna no se haga largo:
   sol visible 0–29 % y 89–100 % del ciclo, luna 39–79 %, y unos 7 s de crepúsculo entre uno y otra. */
@keyframes orbita { 0% { transform: rotate(-30deg); } 29.4% { transform: rotate(64deg); } 39.4% { transform: rotate(116deg); } 79.4% { transform: rotate(244deg); } 89.4% { transform: rotate(296deg); } 100% { transform: rotate(330deg); } }
@keyframes cielo-dia { 0% { opacity: 1; } 23% { opacity: 1; } 29.4% { opacity: .55; } 35% { opacity: 0; } 84% { opacity: 0; } 89.4% { opacity: .55; } 96% { opacity: 1; } 100% { opacity: 1; } }
@keyframes cielo-noche { 0% { opacity: 0; } 30% { opacity: 0; } 39.4% { opacity: 1; } 79.4% { opacity: 1; } 88% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .portada .orbita, .portada .cielo-dia, .portada .estrellas, .portada .velo-noche { animation: none !important; }
  .portada .orbita { transform: rotate(-20deg); } .portada .cielo-dia { opacity: 1; }
}
.portada > * { position: relative; }
.portada .etiqueta { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ambar); margin-bottom: 12px; }
.portada h1 { color: #fff; font-size: 40px; max-width: 760px; font-weight: 600; }
.portada h1 em { font-style: italic; color: var(--ambar); }
.portada p { max-width: 640px; font-size: 16.5px; opacity: .92; margin: 14px 0 22px; }
.portada .cta { display: flex; gap: 10px; flex-wrap: wrap; }
.portada .cta .btn.sec { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.portada .cta .btn.sec:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.lema { font-family: var(--titular); font-style: italic; font-size: 18px; color: var(--oliva-oscuro); margin: 0 0 14px; }

/* ---------- KPI y tarjetas ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; margin: 14px 0; }
.kpi { background: #fff; border-radius: var(--radio); padding: 16px 18px; border: 1px solid var(--borde); box-shadow: var(--sombra); position: relative; overflow: hidden; }
.kpi::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--terra); border-radius: 5px 0 0 5px; }
.kpi:nth-child(3n+2)::after { background: var(--oliva); } .kpi:nth-child(3n)::after { background: var(--ambar); }
.kpi .v { font-variant-numeric: tabular-nums; font-family: var(--titular); font-size: 30px; font-weight: 700; color: var(--tinta); line-height: 1.1; letter-spacing: -.02em; }
.kpi .l { font-size: 12.5px; color: var(--gris); margin-top: 4px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 960px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
.card { border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px 20px; background: #fff; box-shadow: var(--sombra); }
.card h3 { margin-top: 0; }
.card.acento { border-top: 4px solid var(--terra); }

/* ---------- tablas ---------- */
table.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; background: #fff; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
table.tabla th, table.tabla td { text-align: left; padding: 9px 11px; border-bottom: 1px solid var(--borde); vertical-align: top; }
table.tabla tr:last-child td { border-bottom: none; }
table.tabla th { background: var(--crema2); font-weight: 600; font-size: 12.5px; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; }
table.tabla tr.fila { transition: background .12s; }
table.tabla tr.fila:hover { background: var(--ambar-suave); cursor: pointer; }
.card table.tabla, .panel table.tabla { border: none; border-radius: 0; }
a.enl { color: inherit; text-decoration: none; }
a.enl:hover, a.enl:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
table.tabla tr.fila:focus-within, .arbol .medida:focus-within { background: var(--ambar-suave); }
table.tabla tr.fila.sel { background: var(--oliva-suave); } table.tabla tr.fila.sel b { color: var(--oliva-oscuro); }
/* Las tablas anchas se desplazan dentro de su caja, sin ensanchar la página */
.tabla-scroll { overflow-x: auto; border: 1px solid var(--borde); border-radius: 12px; background: #fff; }
.tabla-scroll > table.tabla { border: none; border-radius: 0; }
.card .tabla-scroll, .panel .tabla-scroll { border: none; border-radius: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mini { font-size: 12.5px; color: var(--gris); }

/* ---------- chips ---------- */
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--crema2); color: var(--tinta); white-space: nowrap; }
.chip.B1 { background: var(--oliva-suave); color: var(--oliva-oscuro); } .chip.B2 { background: var(--terra-suave); color: var(--terra-oscuro); } .chip.B3 { background: var(--ambar-suave); color: #8a5a0a; }
.chip.propuesto { background: var(--crema2); } .chip.aprobado { background: var(--oliva-suave); color: var(--oliva-oscuro); } .chip.en_ejecucion { background: var(--ambar-suave); color: #8a5a0a; } .chip.ejecutado { background: var(--oliva); color: #fff; } .chip.descartado { background: #f4d6d3; color: var(--rojo); }
.chip.pendiente { background: var(--crema2); } .chip.en_elaboracion { background: var(--ambar-suave); color: #8a5a0a; } .chip.borrador { background: var(--crema2); color: var(--gris); box-shadow: inset 0 0 0 1px var(--borde-campo); } .chip.en_revision { background: var(--terra-suave); color: var(--terra-oscuro); }
.chip.en_curso { background: var(--ambar-suave); color: #8a5a0a; } .chip.no_iniciada { background: var(--crema2); } .chip.ejecutada, .chip.superada { background: var(--oliva); color: #fff; }
.chip.prio { background: var(--terra); color: #fff; }
.chip.pendiente_validacion { background: var(--terra-suave); color: var(--terra-oscuro); }

/* ---------- filtros ---------- */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin: 10px 0 16px; padding: 14px 16px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); }
.filtros > div { min-width: 150px; }
.filtros label { margin-top: 0; }

/* ---------- árbol ARP ---------- */
.arbol .bloque { margin-bottom: 22px; background: #fff; border-radius: var(--radio); border: 1px solid var(--borde); overflow: hidden; box-shadow: var(--sombra); }
.arbol .bloque > .cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; color: #fff; }
.arbol .bloque > .cab b { font-family: var(--titular); font-size: 18px; font-weight: 600; }
.arbol .bloque > .cab small { opacity: .9; }
.arbol .bloque.B1 > .cab { background: linear-gradient(90deg, var(--oliva-oscuro), var(--oliva)); }
.arbol .bloque.B2 > .cab { background: linear-gradient(90deg, var(--terra-oscuro), var(--terra)); }
.arbol .bloque.B3 > .cab { background: linear-gradient(90deg, #b3781a, var(--ambar)); color: var(--tinta); }
.arbol .medida { display: grid; grid-template-columns: 64px 1fr 110px 90px 120px; gap: 10px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--borde); cursor: pointer; transition: background .12s; }
.arbol .medida:last-child { border-bottom: none; }
.arbol .medida:hover { background: var(--ambar-suave); }
.arbol .medida .cod { font-family: var(--titular); font-weight: 700; color: var(--terra); }
.arbol .medida.mini { background: var(--crema2); text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px; font-weight: 600; }

/* ---------- panel lateral y modal ---------- */
.panel { position: fixed; top: var(--cab); right: 0; width: min(580px, 100%); height: calc(100% - var(--cab)); background: #fff; border-left: 1px solid var(--borde); box-shadow: -8px 0 30px rgba(29,29,27,.12); z-index: 30; overflow: auto; padding: 22px 24px 48px; animation: entra .18s ease-out; }
@keyframes entra { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sale { to { transform: translateX(24px); opacity: 0; } }
.panel.sale { animation: sale .15s ease-out forwards; pointer-events: none; }
@keyframes aparece { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sube { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes velo { from { opacity: 0; } to { opacity: 1; } }
.panel .cerrar { float: right; }
.panel h2 { margin-top: 4px; font-size: 22px; color: var(--tinta); }
.dl { display: grid; grid-template-columns: 160px 1fr; gap: 6px 12px; font-size: 14px; margin: 10px 0; }
.dl dt { color: var(--gris); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; } .dl dd { margin: 0; }
.modal-fondo { animation: velo .2s ease-out; position: fixed; inset: 0; background: rgba(29,29,27,.45); backdrop-filter: blur(2px); z-index: 40; display: flex; align-items: center; justify-content: center; }
.modal { animation: aparece .2s cubic-bezier(.23,1,.32,1); background: #fff; border-radius: var(--radio); padding: 26px; width: min(760px, 94vw); max-height: 90vh; overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form2 .full { grid-column: 1 / -1; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ---------- mapa ---------- */
.mapa-wrap { display: grid; grid-template-columns: 350px 1fr; height: calc(100vh - var(--cab)); }
.mapa-wrap aside { padding: 16px; overflow: auto; border-right: 1px solid var(--borde); background: #fff; }
.mapa-wrap aside h1, .mapa-wrap aside h2, .mapa-wrap aside h3 { font-size: 17px; margin: 0 0 8px; color: var(--tinta); }
.mapa-wrap aside hr { border: none; border-top: 1px solid var(--borde); margin: 16px 0; }
#mapa { width: 100%; height: 100%; background: var(--crema2); }
.leyenda { font-size: 12px; margin-top: 8px; color: var(--gris); }
.leyenda span { display: inline-block; width: 14px; height: 14px; vertical-align: middle; margin-right: 6px; border-radius: 4px; }
.maplibregl-popup-content { font: 13px var(--fuente); padding: 12px 14px; border-radius: 12px; box-shadow: var(--sombra); }
.maplibregl-ctrl-group { border-radius: 10px !important; overflow: hidden; }
/* resumen del municipio en el visor */
.muni-resumen { font-size: 13px; background: #fff; border: 1px solid var(--borde); border-left: 5px solid var(--terra); border-radius: 12px; padding: 12px 14px; margin-top: 10px; box-shadow: var(--sombra); }
.muni-resumen .cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.muni-resumen b.t { font-family: var(--titular); font-size: 18px; line-height: 1.2; }
.muni-resumen .sub { color: var(--gris); font-size: 12.5px; margin-top: 2px; }
.muni-resumen .cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.muni-resumen .cifras div { background: var(--crema); border-radius: 8px; padding: 7px 8px; }
.muni-resumen .cifras b { display: block; font-family: var(--titular); font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.muni-resumen .cifras span { font-size: 11.5px; color: var(--gris); }
.muni-resumen .cats { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; }
.muni-resumen .cats i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.muni-resumen .nota { margin: 8px 0 0; font-size: 12.5px; color: var(--gris); }
.muni-resumen .acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* fichas laterales (medida y municipio) */
.ficha-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 8px; padding-right: 96px; }
.ficha-cab .cod { font-family: var(--titular); font-weight: 700; font-size: 13px; background: var(--tinta); color: #fff; border-radius: 6px; padding: 2px 8px; }
.ficha-cab.B1 .cod { background: var(--oliva-oscuro); } .ficha-cab.B2 .cod { background: var(--terra); } .ficha-cab.B3 .cod { background: #8a5a0a; }
.panel .ficha-cab + h2 { margin-top: 0; clear: none; line-height: 1.22; }
.datos-clave { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0; }
.datos-clave .dato { background: var(--crema); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; }
.datos-clave .l { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); font-weight: 600; }
.datos-clave .v { font-size: 14.5px; font-weight: 600; }
.entrada { font-size: 15.5px; line-height: 1.55; color: var(--tinta); margin: 10px 0; }
details.leer { margin: 6px 0 14px; } details.leer summary { cursor: pointer; color: var(--terra-oscuro); font-weight: 600; font-size: 13.5px; }
details.leer p { font-size: 14px; line-height: 1.6; margin: 10px 0 0; color: #3b3b37; max-width: 62ch; }
details.leer.editar { background: var(--crema); border-radius: 10px; padding: 10px 12px; } details.leer.editar form { margin-top: 10px; }
.lista-cod { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14px; }
.lista-cod li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: start; }
.lista-cod .cod { font-weight: 700; font-size: 12px; background: var(--oliva-suave); color: var(--oliva-oscuro); border-radius: 6px; padding: 2px 0; text-align: center; font-variant-numeric: tabular-nums; }
.agentes { display: flex; flex-wrap: wrap; gap: 6px; } .agentes .chip { white-space: normal; font-weight: 500; padding: 4px 10px; } .agentes .chip.resp { background: var(--tinta); color: #fff; font-weight: 600; }
.barra-prog { display: flex; height: 8px; border-radius: 4px; background: var(--crema2); overflow: hidden; margin: 6px 0 12px; }
.barra-prog i.hecha { background: var(--oliva); } .barra-prog i.curso { background: var(--ambar); }
.acciones-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.acciones-lista li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; background: #fff; }
.acciones-lista .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; background: var(--crema2); color: var(--tinta); }
.acciones-lista li.en_curso .n { background: var(--ambar); } .acciones-lista li.ejecutada .n, .acciones-lista li.superada .n { background: var(--oliva); color: #fff; }
.acciones-lista .t { font-size: 14px; line-height: 1.45; } .acciones-lista .meta { font-size: 12.5px; color: var(--gris); margin-top: 4px; display: flex; gap: 8px; align-items: center; }
.tarjetas-proy { display: grid; gap: 8px; }
.tarjeta-proy { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; color: var(--tinta); text-decoration: none; background: #fff; transition: border-color .15s, box-shadow .15s; }
.tarjeta-proy:hover { border-color: var(--terra); box-shadow: var(--sombra); }
.tarjeta-proy .donde { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); font-weight: 600; }
.tarjeta-proy .t { font-weight: 600; font-size: 14px; line-height: 1.35; } .tarjeta-proy .pie { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-top: 3px; }
.acc-ficha { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.plan-caja { background: var(--crema); border-radius: 12px; padding: 12px 14px; } .plan-caja p { margin: 0 0 8px; } .plan-caja .mini { margin: 8px 0 0; }
.pob { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: end; }
.pob-barras { display: flex; align-items: flex-end; gap: 6px; height: 118px; }
.pob-barras .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
.pob-barras i { width: 100%; background: var(--oliva-suave); border-radius: 5px 5px 0 0; } .pob-barras i.ult { background: var(--oliva); }
.pob-barras .val { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--gris); } .pob-barras .an { font-size: 11.5px; color: var(--gris); }
.pob-nota { font-size: 13px; } .pob-nota b { font-family: var(--titular); font-size: 17px; display: block; } .pob-nota b.baja { color: var(--terra-oscuro); } .pob-nota b.sube { color: var(--oliva-oscuro); }
.sexo { height: 8px; border-radius: 4px; background: var(--oliva); overflow: hidden; margin: 10px 0 4px; } .sexo i { display: block; height: 100%; background: var(--ambar); }
.acc-barras { display: grid; gap: 7px; }
.fila-acc { display: grid; grid-template-columns: 130px 1fr 58px; gap: 10px; align-items: center; font-size: 13.5px; }
.fila-acc .b { height: 10px; background: var(--crema2); border-radius: 5px; overflow: hidden; } .fila-acc .b i { display: block; height: 100%; border-radius: 5px; }
.fila-acc .t { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
i.bien, .pt.bien { background: var(--oliva); } i.medio, .pt.medio { background: var(--ambar); } i.mal, .pt.mal { background: var(--terra); }
.pt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 5px 0 8px; } .mini .pt:first-child { margin-left: 0; }
.serv-cats { display: grid; gap: 8px; }
.serv-cat { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: start; font-size: 13.5px; } .serv-cat .pt { margin: 6px 0 0; }
.serv-cat b { display: block; } .serv-cat span { color: #3b3b37; }
.aviso-falta { background: var(--terra-suave); color: var(--terra-oscuro); border-radius: 10px; padding: 9px 12px; font-size: 13px; margin: 10px 0 6px; }
@media (max-width: 520px) { .pob { grid-template-columns: 1fr; } .fila-acc { grid-template-columns: 104px 1fr 52px; } .ficha-cab { padding-right: 0; } }
.sim-cambios { padding-left: 0; list-style: none; margin: 8px 0; }
.sim-cambios li { font-size: 13px; padding: 6px 8px; display: flex; justify-content: space-between; background: var(--crema); border-radius: 8px; margin-bottom: 4px; }

/* ---------- avisos ---------- */
.aviso { background: var(--ambar-suave); border: 1px solid #f3cf8f; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; margin: 10px 0; }
div.ok, p.ok { background: var(--oliva-suave); border: 1px solid #c5d4b5; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; margin: 10px 0; }
.error { background: var(--terra-suave); border: 1px solid #f0b8a8; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; margin: 10px 0; }
.avisos { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 70; display: grid; gap: 8px; width: min(420px, calc(100% - 24px)); pointer-events: none; }
.avisos > div.sale { opacity: 0; transform: translateY(4px); }
.avisos > div { animation: sube .2s cubic-bezier(.23,1,.32,1); transition: opacity .15s ease-out, transform .15s ease-out; margin: 0; text-align: center; box-shadow: var(--sombra); pointer-events: auto; }
.etapas { display: flex; gap: 3px; }
.etapas i { flex: 1; height: 9px; background: var(--crema2); border-radius: 3px; }
.etapas i.on { background: var(--oliva); }
footer.pie { padding: 22px 28px; color: var(--gris); font-size: 12.5px; border-top: 1px solid var(--borde); margin-top: 40px; background: #fff; }
canvas { max-width: 100%; }
.ranking { list-style: none; padding: 0; margin: 0; }
.ranking li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--borde); font-size: 14px; }
.ranking li b { color: var(--terra); }
.cargando { color: var(--gris); padding: 40px; text-align: center; }
.tour { animation: aparece .15s cubic-bezier(.23,1,.32,1); transform-origin: bottom right; position: fixed; bottom: 22px; right: 22px; width: 380px; background: var(--tinta); color: #fff; border-radius: var(--radio); padding: 16px 18px; box-shadow: 0 16px 40px rgba(0,0,0,.3); z-index: 60; border-left: 5px solid var(--ambar); }
.tour p { margin: 6px 0 12px; font-size: 14px; opacity: .92; }
.tour b { font-family: var(--titular); font-size: 15px; }
.tour .sec { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.tour .sec:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

/* ---------- ficha imprimible e informe ---------- */
.ficha-print, .informe { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 28px 32px; box-shadow: var(--sombra); }
.ficha-print .cab { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid var(--terra); margin-bottom: 16px; padding-bottom: 8px; }
.ficha-print .cab small { color: var(--gris); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 700; }
.ficha-print .cod { font-family: var(--titular); font-size: 20px; color: var(--terra); padding-top: 10px; }
table.ficha { width: 100%; border-collapse: collapse; font-size: 14px; }
table.ficha th { width: 18%; background: var(--crema); text-align: left; padding: 9px; border: 1px solid var(--borde); vertical-align: top; font-weight: 600; color: var(--oliva-oscuro); }
table.ficha td { padding: 9px; border: 1px solid var(--borde); vertical-align: top; }

/* ---------- inicio: accesos ---------- */
.accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.acceso { display: block; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; text-decoration: none; color: var(--tinta); box-shadow: var(--sombra); transition: transform .12s, box-shadow .12s; }
.acceso:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(29,29,27,.1); color: var(--tinta); }
.acceso .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 10px; background: var(--terra-suave); color: var(--terra); }
.acceso:nth-child(3n+2) .ico { background: var(--oliva-suave); color: var(--oliva-oscuro); } .acceso:nth-child(3n) .ico { background: var(--ambar-suave); color: #8a5a0a; }
.acceso b { font-family: var(--titular); font-size: 16px; display: block; margin-bottom: 4px; }
.acceso span { font-size: 13px; color: var(--gris); }

@media (max-width: 900px) {
  main { padding: 16px; }
  .portada { padding: 34px 22px; } .portada h1 { font-size: 30px; } .portada .orbita, .portada .estrellas { display: none; } .portada .velo-texto { background: rgba(29,29,27,.72); }
  .mapa-wrap { grid-template-columns: 1fr; height: auto; } .mapa-wrap aside { max-height: 45vh; } #mapa { height: 60vh; }
  .arbol .medida { grid-template-columns: 56px 1fr; } .arbol .medida > :nth-child(n+3) { display: none; }
  .arbol .bloque > .cab { flex-wrap: wrap; }
  .form2, .dl { grid-template-columns: 1fr; }
  .ficha-print, .informe { padding: 18px 16px; }
  table.ficha, table.ficha tbody, table.ficha tr, table.ficha th, table.ficha td { display: block; width: auto; }
  table.ficha th { border-bottom: none; } table.ficha td { margin-bottom: -1px; }
  .ficha-print .cab { flex-wrap: wrap; gap: 8px; }
}
@media print {
  header.top, footer.pie, .no-print, .tour, .panel, .modal-fondo, .avisos, .ayuda { display: none !important; }
  body { background: #fff; } main { padding: 0; max-width: none; }
  .ficha-print, .informe, .card { box-shadow: none; break-inside: avoid; }
  .tabla-scroll { overflow: visible; }
  a { color: inherit; text-decoration: none; }
}

/* --- usabilidad --- */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.paso { display: flex; gap: 14px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra); }
.paso .n { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--terra); color: #fff; display: grid; place-items: center; font-family: var(--titular); font-weight: 700; }
.paso p { margin: 4px 0 6px; font-size: 14px; color: var(--gris); }
.paso a { font-weight: 600; }
body.es-inicio .tour-btn { display: inline-block; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.tabs a { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--borde); background: #fff; color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 14px; transition: background .15s, border-color .15s; }
.tabs a:hover { background: var(--crema2); color: var(--tinta); }
.tabs a.activo { background: var(--terra-suave); border-color: var(--terra-suave); color: var(--terra-oscuro); }
.cab-pagina { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ambar); }
.panel:focus-visible, .modal:focus-visible, main:focus-visible { outline: none; box-shadow: var(--sombra); }
.panel:focus-visible { box-shadow: -8px 0 30px rgba(29,29,27,.12); } .modal:focus-visible { box-shadow: 0 30px 80px rgba(0,0,0,.25); } main:focus-visible { box-shadow: none; }
.busqueda { position: relative; width: 310px; }
.busqueda input { border-radius: 999px; padding: 7px 14px; background: var(--crema); border-color: transparent; font-size: 13.5px; }
.busqueda input::placeholder { text-overflow: ellipsis; }
.busqueda input:focus { background: #fff; border-color: var(--oliva-oscuro); }
.busq-res { display: none; position: absolute; top: 42px; left: 0; width: 360px; background: #fff; border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra); z-index: 50; overflow: hidden; }
.busq-res a { display: flex; flex-direction: column; padding: 8px 14px; text-decoration: none; color: var(--tinta); border-bottom: 1px solid var(--borde); font-size: 14px; }
.busq-res a:last-child { border-bottom: none; } .busq-res a:hover, .busq-res a:focus { background: var(--ambar-suave); }
.busq-res a span { font-size: 12px; color: var(--gris); }
.ayuda-btn { width: 32px; height: 32px; padding: 0; border-radius: 50%; font-weight: 800; }
.ayuda { animation: aparece .15s cubic-bezier(.23,1,.32,1); transform-origin: top right; position: fixed; top: calc(var(--cab) + 12px); right: 22px; width: 360px; background: #fff; border: 1px solid var(--borde); border-left: 5px solid var(--oliva); border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra); z-index: 60; }
.ayuda p { margin: 6px 0 10px; font-size: 14px; }
.mi-panel { white-space: nowrap; text-decoration: none; color: var(--tinta); padding: 6px 12px; border-radius: 999px; background: var(--oliva-suave); font-size: 13px; }
.mi-panel:hover { background: var(--ambar-suave); color: var(--tinta); }
ul.check { list-style: none; padding: 0; margin: 0; }
ul.check li { padding: 7px 0 7px 28px; position: relative; border-bottom: 1px dashed var(--borde); font-size: 14px; }
ul.check li::before { content: ""; position: absolute; left: 0; top: 9px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--borde); }
ul.check li.ok::before { background: var(--oliva); border-color: var(--oliva); }
ul.check li.ok::after { content: "✓"; position: absolute; left: 3px; top: 6px; color: #fff; font-size: 11px; font-weight: 800; }
.vacio { background: var(--crema); border: 1px dashed var(--borde); border-radius: 12px; padding: 16px; font-size: 14px; color: var(--gris); }
.menu-toggle { display: none; background: transparent; border: none; color: var(--tinta); padding: 4px 8px; } .menu-toggle .ic { margin: 0; }
.menu-toggle:hover { background: var(--crema2); box-shadow: none; color: var(--tinta); }
@media (max-width: 1500px) { nav.menu { gap: 0; padding: 0 12px; } nav.menu a { font-size: 13px; padding: 7px 8px; } }
/* Cabecera plegada: el menú no cabe en una fila por debajo de 1320px */
@media (max-width: 1320px) {
  :root { --cab: 59px; }
  header.top { height: auto; min-height: var(--cab); column-gap: 12px; }
  .menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 12px; order: 9; }
  nav.menu { display: none; height: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 14px 12px; }
  nav.menu a { padding: 11px 12px; border-radius: 10px; font-size: 15px; }
  body.menu-abierto nav.menu { display: flex; }
  .busqueda { width: 296px; }
}
@media (max-width: 1100px) { header.top .marca small { display: none; } }
@media (max-width: 1000px) {
  :root { --cab: 113px; }
  header.top { position: static; padding: 0 14px; column-gap: 8px; }
  header.top .marca > span:last-child { display: none; }
  header.top .marca .logo { padding: 0 10px; }
  .busqueda { width: auto; flex: 0 0 100%; order: 11; padding-bottom: 10px; } .busq-res { width: 100%; }
  header .tour-btn, body.es-inicio header .tour-btn { display: none; }
  header .mi-panel .nombre { display: none; }
  .ayuda-btn { width: 40px; height: 40px; }
  header .usuario button, header .mi-panel { min-height: 40px; display: inline-flex; align-items: center; }
  .panel { top: 0; height: 100%; }
  .ayuda { top: 12px; }
  .ayuda, .tour { width: calc(100% - 24px); right: 12px; }
  .pasos { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .filtros > div { flex: 1 1 100%; } }

/* --- objetivos táctiles: 44 px en pantallas táctiles y en móvil --- */
@media (pointer: coarse), (max-width: 1000px) {
  button, .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  button.peq { min-height: 40px; padding: 6px 14px; }
  .tour-btn { display: none; } body.es-inicio .tour-btn { display: inline-flex; }
  input, select, textarea { min-height: 44px; }
  input[type=checkbox], input[type=radio] { min-height: 0; height: 24px; min-width: 24px; vertical-align: middle; }
  .ayuda-btn { width: 44px; height: 44px; }
  #grid-km { min-height: 36px; }
  .tabs a { padding: 11px 14px; }
  a.enl { display: inline-block; padding: 6px 0; }
}
@media (max-width: 1000px) { header .tour-btn, body.es-inicio header .tour-btn { display: none; } .menu-toggle { display: grid; } }

/* --- menos movimiento: se quitan los desplazamientos; color y opacidad se mantienen --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panel, .modal, .tour, .ayuda, .avisos > div { animation: velo .15s ease-out; }
  .avisos > div.sale { transform: none; }
  button:active, .btn:active, .acceso:hover { transform: none; }
  button, .btn, .acceso { transition-property: background, border-color, box-shadow, color; }
}
.grid2 > *, .grid3 > * { min-width: 0; } code { overflow-wrap: anywhere; } input[type=file] { max-width: 100%; }
/* barra de comparación de municipios (áreas funcionales) */
.barra-cmp { position: sticky; bottom: 14px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 22px 0 26px; padding: 14px 18px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 8px 28px rgba(29,29,27,.12); }
/* marco de referencia (Agenda Urbana Española) plegado al final del Plan de Acción */
details.marco { margin-top: 30px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 20px; }
details.marco summary { cursor: pointer; display: grid; gap: 4px; list-style-position: outside; }
details.marco summary .t { font-family: var(--titular); font-size: 19px; font-weight: 600; color: var(--oliva-oscuro); }
details.marco summary .mini { max-width: 90ch; }
details.marco[open] summary { margin-bottom: 16px; }
details.marco .card { box-shadow: none; background: var(--crema); }
/* participación */
.aviso-demo { background: var(--ambar-suave); color: #6b4608; border-radius: 12px; padding: 11px 16px; font-size: 14px; margin: 0 0 18px; max-width: 900px; }
.part-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; margin-top: 8px; } .part-cab h2 { margin: 0 0 2px; }
.linea-tiempo { list-style: none; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.linea-tiempo li { background: #fff; border: 1px solid var(--borde); border-top: 4px solid var(--oliva); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; }
.linea-tiempo .f { font-size: 12px; color: var(--gris); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .03em; }
.proceso { margin-bottom: 18px; } .proceso .pc { display: flex; justify-content: space-between; align-items: start; gap: 12px; } .proceso h3 { margin: 0 0 2px; font-size: 19px; }
.preguntas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 14px; margin-top: 14px; }
.pregunta { background: var(--crema); border-radius: 12px; padding: 14px 16px; } .pregunta .pq { display: flex; justify-content: space-between; align-items: start; gap: 10px; margin-bottom: 10px; font-size: 14.5px; line-height: 1.4; } .pregunta .pq .chip { text-decoration: none; }
.pregunta > .mini { margin: 10px 0 0; }
.res-barras { display: grid; gap: 7px; }
.fila-res { display: grid; grid-template-columns: minmax(120px, 42%) 1fr 84px; gap: 10px; align-items: center; font-size: 13.5px; }
.fila-res .b { height: 12px; background: #fff; border-radius: 6px; overflow: hidden; } .fila-res .b i { display: block; height: 100%; border-radius: 6px; }
.card .fila-res .b { background: var(--crema2); }
.fila-res .t { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .fila-res .t small { color: var(--gris); font-weight: 400; margin-left: 4px; }
.res-pila { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: #fff; } .res-pila i { display: block; height: 100%; }
.res-ley { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; margin-top: 8px; } .res-ley i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.res-media { margin: 0 0 10px; font-size: 14px; } .res-media b { font-family: var(--titular); font-size: 26px; }
.cargar-part { margin-top: 26px; }
@media (max-width: 600px) { .fila-res { grid-template-columns: 1fr 70px; } .fila-res .n { grid-column: 1 / -1; } }
/* gráficas en caja de alto fijo y botones de detalle */
.graf { position: relative; width: 100%; }
.graf-pie { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 6px; }
.chip-bt { background: var(--crema); color: var(--tinta); border: 1px solid var(--borde); padding: 4px 11px; font-size: 12.5px; font-weight: 500; border-radius: 999px; }
.chip-bt b { font-weight: 700; margin-left: 3px; } .chip-bt:hover { background: var(--terra-suave); border-color: var(--terra); color: var(--terra-oscuro); box-shadow: none; }
.chip-bt.B1 { border-left: 4px solid var(--oliva); } .chip-bt.B2 { border-left: 4px solid var(--terra); } .chip-bt.B3 { border-left: 4px solid var(--ambar); }
.detalle-lista { max-height: 58vh; overflow: auto; margin: 10px -6px 0; padding: 0 6px; }
.modal.grande { width: min(980px, 95vw); }
/* fichas: barra, secciones y vista a pantalla completa */
.panel-barra { display: flex; justify-content: flex-end; gap: 6px; float: right; margin: 0 0 8px 12px; position: relative; z-index: 2; }
.panel .panel-barra .cerrar { float: none; }
.ficha-cab { padding-right: 0; }
.seccion { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--borde); }
.sec-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .sec-cab h3, .sec-cab h2 { margin: 0; }
.seccion > p:last-child, .seccion > .vacio:last-child { margin-bottom: 0; }
.panel.amplio { width: 100%; left: 0; border-left: none; box-shadow: none; background: var(--crema); padding: 26px clamp(20px, 3.2vw, 72px) 64px; animation: aparece .2s cubic-bezier(.23,1,.32,1); }
.panel.amplio .ficha-cuerpo { max-width: 1560px; margin: 0 auto; }
.panel.amplio h2 { font-size: 30px; max-width: 30ch; } .panel.amplio .entrada { max-width: 80ch; }
.panel.amplio .kpis { grid-template-columns: repeat(4, 1fr); } .panel.amplio .datos-clave { grid-template-columns: repeat(4, 1fr); }
.panel.amplio .ficha-grid { columns: 2; column-gap: 20px; margin-top: 20px; }
.panel.amplio .seccion { break-inside: avoid; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px 22px; margin: 0 0 20px; box-shadow: var(--sombra); }
.panel.amplio .seccion.ancha { column-span: all; }
.panel.amplio .tarjetas-proy { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.panel.amplio .acciones-lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); }
body.ficha-amplia { overflow: hidden; }
@media (max-width: 1100px) { .panel.amplio .ficha-grid { columns: 1; } .panel.amplio .kpis, .panel.amplio .datos-clave { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { #b-ampliar { display: none; } }
.jerarquia { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: 14px; }
.jerarquia > li { position: relative; padding: 0 0 14px 22px; border-left: 2px solid var(--borde); margin-left: 6px; }
.jerarquia > li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--oliva); }
.jerarquia > li:last-child { border-left-color: transparent; padding-bottom: 0; } .jerarquia > li.aqui::before { background: var(--terra); border-color: var(--terra); } .jerarquia > li.aqui { font-weight: 600; }
.jerarquia .niv { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); font-weight: 600; }
.jerarquia ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; font-size: 13.5px; font-weight: 400; } .jerarquia ul li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; }
.jerarquia .cod { font-weight: 700; font-size: 12px; background: var(--oliva-suave); color: var(--oliva-oscuro); border-radius: 6px; text-align: center; padding: 1px 0; height: fit-content; }
.lista-edit { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-edit li { display: flex; justify-content: space-between; align-items: start; gap: 10px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; background: #fff; font-size: 14px; }
.lista-edit li .mini { display: block; margin-top: 2px; } .lista-edit li b:first-child { color: var(--oliva-oscuro); }
.acciones-lista li { grid-template-columns: 30px 1fr auto; }
button.icono { background: transparent; border: 1px solid transparent; color: var(--gris); padding: 5px; border-radius: 8px; line-height: 0; flex: none; } button.icono .ic { margin: 0; }
button.icono:hover { background: var(--terra-suave); color: var(--terra-oscuro); border-color: var(--terra); box-shadow: none; }
button.peligro, .btn.peligro { color: var(--rojo); border-color: var(--rojo); background: #fff; } button.peligro:hover { background: #fbe9e9; color: var(--rojo); border-color: var(--rojo); box-shadow: none; }
.vision { margin: 12px 0 0; padding: 4px 0 4px 16px; border-left: 4px solid var(--ambar); font-family: var(--titular); font-size: 16.5px; line-height: 1.5; color: var(--tinta); }
.form2 .grupo { margin: 18px 0 2px; padding-top: 14px; border-top: 1px solid var(--borde); display: grid; gap: 2px; } .form2 .grupo:first-child { margin-top: 0; padding-top: 0; border-top: none; } .form2 .grupo b { font-family: var(--titular); font-size: 16px; }
.form2 label.marca { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--tinta); }
.form2 input[type=color] { padding: 2px; height: 38px; width: 70px; }
.modal .acciones { position: sticky; bottom: -26px; background: #fff; padding: 12px 0 0; margin-bottom: -6px; }
.panel.amplio .datos-clave .dato { background: #fff; border: 1px solid var(--borde); }
/* gestión */
nav.menu a.solo-gestor { display: none; } body.es-gestor nav.menu a.solo-gestor { display: inline-block; }
.pestanas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--borde); margin: 0 0 20px; }
.pestanas a { padding: 9px 14px; text-decoration: none; color: var(--gris); font-weight: 600; font-size: 14px; border-bottom: 3px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0; }
.pestanas a:hover { background: var(--crema2); color: var(--tinta); } .pestanas a.activa { color: var(--terra-oscuro); border-bottom-color: var(--terra); }
@media (max-width: 1320px) { body.es-gestor nav.menu a.solo-gestor { display: block; } }
@media print { .panel-barra { display: none !important; } }
/* portada: las tres gráficas ocupan todo el alto de su tarjeta, sin huecos */
.grid3 > .card { display: flex; flex-direction: column; } .grid3 > .card > .graf { flex: 1 1 auto; min-height: 275px; } .grid3 > .card > .mini { margin-bottom: 0; }