/* ═══════════════════════════════════════════════════════════════
   Ruta-7 · extensiones: tema claro + componentes propios
   ═══════════════════════════════════════════════════════════════ */

/* Controles nativos (dropdowns, date/time pickers, scrollbars) siguen el tema.
   Sin esto el popup de un <select> sale blanco con texto claro: ilegible. */
:root{ color-scheme: light; }
[data-tema="oscuro"]{ color-scheme: dark; }

[data-tema="claro"]{
  --fondo:        #eef3f8;
  --fondo-2:      #e2eaf2;
  --panel:        rgba(255,255,255,.88);
  --panel-solido: #f7fafc;
  --vidrio:       rgba(255,255,255,.78);

  --borde:        rgba(30, 60, 90, .12);
  --borde-fuerte: rgba(30, 60, 90, .24);

  --texto:   #0e1a28;
  --texto-2: #3d556c;
  --texto-3: #6a7f94;

  --hielo:   #1a8fc4;
  --hielo-f: rgba(26,143,196,.12);
  --hielo-b: rgba(26,143,196,.40);

  --sombra: 0 18px 48px -12px rgba(20,40,70,.18), 0 2px 8px rgba(20,40,70,.08);
}

[data-tema="claro"] .marca-logo.oscuro{ display:none; }
[data-tema="claro"] .marca-logo.claro{ display:block; }
[data-tema="oscuro"] .marca-logo.claro{ display:none; }
[data-tema="oscuro"] .marca-logo.oscuro{ display:block; }

/* patagonia.css fija gradientes oscuros en barra/hoja — sobreescribir */
[data-tema="claro"] .barra{
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(247,250,252,.92) 100%);
  box-shadow: 0 8px 32px -14px rgba(20,40,70,.18);
}
[data-tema="claro"] .hoja{
  background: linear-gradient(180deg, var(--panel-solido) 0%, #e8eef5 100%);
}
[data-tema="claro"] .hoja-cerrar:hover{ background: rgba(0,0,0,.06); }
[data-tema="claro"] .cifra{ background:#fff; }
[data-tema="claro"] .aviso{
  color:#5c4308; background:rgba(240,178,63,.12); border-color:rgba(200,140,20,.28);
}
[data-tema="claro"] .aviso svg{ color:#b88600; }
[data-tema="claro"] .var{
  color:var(--texto-2); background:rgba(26,143,196,.08);
}
[data-tema="claro"] .espec{ background:#fff; }
[data-tema="claro"] .etq.av{ color:#8a5a00; }
[data-tema="claro"] .fila-tramo,
[data-tema="claro"] .capa-item{
  background: rgba(0,0,0,.03);
}
[data-tema="claro"] .fila-tramo:hover,
[data-tema="claro"] .fila-tramo.on,
[data-tema="claro"] .capa-item:hover{
  background: rgba(0,0,0,.06);
}

.marca-logo{
  height:56px; width:auto; flex:none; object-fit:contain;
}
.marca-logo.claro{ display:none; }

/* Leyenda de estado: texto legible sobre fondo tintado (no blanco sobre pastel) */
.ficha.on{
  color: var(--c-b);
  border-color: color-mix(in srgb, var(--c-b) 55%, var(--borde-fuerte));
  background: var(--c-f);
  font-weight: 600;
}
.ficha.on .n{ color: var(--texto-2); }
.ficha.on .pt{ box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-b) 40%, transparent); }

/* Tramos como polilíneas */
/* Leaflet le pone a .leaflet-tooltip fondo blanco, padding, flecha y
   white-space:nowrap. La ficha trae su propio cromo, y el nowrap heredado
   desbordaba el texto de la alerta fuera de la tarjeta. */
.leaflet-tooltip.tramo-tip-wrap{
  background:transparent; border:none; box-shadow:none; padding:0;
  white-space:normal;
}
.leaflet-tooltip.tramo-tip-wrap::before{ display:none; }

.tramo-tip{
  background: var(--vidrio); backdrop-filter: blur(12px) saturate(150%);
  border:1px solid var(--borde); border-radius:12px;
  padding:10px 13px; color:var(--texto); font-size:.78rem; line-height:1.4;
  box-shadow: var(--sombra);
  /* max-content evita que la ficha colapse palabra a palabra cerca del
     borde del mapa; el tope respeta pantallas angostas (embed Sernatur). */
  width:max-content;
  max-width:min(280px, calc(100vw - 48px));
}
.tramo-tip b{ display:block; font-weight:600; font-size:.82rem; line-height:1.3; margin-bottom:3px; }
.tramo-tip span{ display:block; color:var(--texto-2); font-size:.7rem; }
.tramo-tip .meta{ color:var(--texto-2); margin-top:2px; }
/* Descripciones largas: se recortan para que la ficha no tape el mapa */
.tramo-tip .desc{
  margin-top:4px; color:var(--texto-2); line-height:1.45;
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:5; overflow:hidden;
}
/* Estado del tramo como píldora con el color semántico */
.tramo-tip .estado-pill{
  display:inline-flex; align-items:center; gap:5px; width:fit-content;
  margin:2px 0 3px; padding:2px 9px 2px 7px; border-radius:999px;
  background:var(--c-f); color:var(--c-b);
  font-size:.64rem; font-weight:600; letter-spacing:.03em;
  border:1px solid color-mix(in srgb, var(--c-b) 45%, transparent);
}
.tramo-tip .estado-pill::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:currentColor; flex:none;
}
/* Contorno comunal: el dashArray va en Leaflet; esto afina el trazo SVG */
.leaflet-interactive.comuna-poly{
  transition: fill-opacity 180ms ease, stroke-width 180ms ease;
}

.tramo-tip .capa-eti{
  font-size:.58rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--texto-3); margin-bottom:4px;
}
/* Dentro de un popup el cromo lo pone Leaflet: la ficha va desnuda. */
.leaflet-popup-content .tramo-tip{
  background:none; border:none; box-shadow:none;
  padding:0; width:auto; max-width:none; backdrop-filter:none;
}
/* En popup hay botón de cierre: se tolera algo más de texto que en tooltip */
.leaflet-popup-content .tramo-tip .desc{ -webkit-line-clamp:7; }
/* Procedencia del dato, al pie de la ficha */
.tramo-tip .fuente-eti{
  margin-top:6px; padding-top:6px; border-top:1px solid var(--borde);
  font-size:.6rem; letter-spacing:.04em; color:var(--texto-3);
}
.tramo-tip .maps-action{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:9px; padding:7px 10px; border-radius:8px;
  background:var(--hielo-f); border:1px solid var(--hielo-b);
  color:var(--hielo); font-size:.7rem; font-weight:600;
  text-decoration:none;
}
.tramo-tip .maps-action:hover{ background:color-mix(in srgb, var(--hielo-f) 70%, var(--hielo)); }
.tramo-tip .maps-action span{ display:inline; color:inherit; font-size:inherit; }
.tramo-tip .aviso-espera{
  margin-top:6px; padding:5px 8px; border-radius:7px;
  background:var(--a3-fondo); color:var(--aviso-claro);
  border:1px solid rgba(255,179,0,.32); font-size:.66rem; line-height:1.4;
}

/* Tramo con incidentes activos: realce bajo la línea de estado */
.tramo-afectado{ animation: latir-tramo 2.6s ease-in-out infinite; }
@keyframes latir-tramo{
  0%,100%{ stroke-opacity:.18; }
  50%    { stroke-opacity:.42; }
}

/* Alerta de espera (fuente: planilla corte Verano 2027) */
.aviso-espera{
  display:block; margin-top:6px; padding:8px 10px; border-radius:var(--r-s);
  background:var(--a3-fondo); border:1px solid rgba(255,179,0,.3);
  color:var(--aviso-claro); font-size:.78rem; line-height:1.45;
}
[data-tema="claro"] .aviso-espera{ color:#8a5a00; }

/* Formulario móvil */
.form-page{
  min-height:100%; overflow:auto;
  background: var(--fondo);
  padding: 16px 16px 40px;
}
.form-card{
  max-width:520px; margin:0 auto;
  background: var(--panel-solido);
  border:1px solid var(--borde);
  border-radius: var(--r-l);
  padding:22px 20px 28px;
  box-shadow: var(--sombra);
}
.form-card h1{
  font-size:1.25rem; font-weight:600; margin:0 0 4px;
}
.form-card .sub{
  color:var(--texto-2); font-size:.85rem; margin:0 0 22px;
}
.campo{ margin-bottom:16px; }
.campo label{
  display:block; font-size:.62rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--texto-3); margin-bottom:6px;
}
.campo input, .campo select, .campo textarea{
  width:100%; background:rgba(255,255,255,.045);
  border:1px solid var(--borde-fuerte); border-radius:var(--r-s);
  color:var(--texto); font:inherit; font-size:.92rem;
  padding:11px 13px; outline:none;
  transition: border-color var(--tr), box-shadow var(--tr), background var(--tr);
}
[data-tema="claro"] .campo input,
[data-tema="claro"] .campo select,
[data-tema="claro"] .campo textarea{
  background-color:#fff;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  border-color: var(--hielo);
  box-shadow: 0 0 0 3px var(--hielo-f);
  background-color: rgba(255,255,255,.07);
}
[data-tema="claro"] .campo input:focus,
[data-tema="claro"] .campo select:focus,
[data-tema="claro"] .campo textarea:focus{ background-color:#fff; }

/* Select con flecha propia — el nativo no se puede tematizar */
.campo select{
  appearance:none; -webkit-appearance:none;
  padding-right:38px; cursor:pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 19px) calc(50% + 1px),
    calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
/* Las opciones se dibujan por el SO: forzamos superficie legible */
.campo select option,
select option{
  background: var(--panel-solido);
  color: var(--texto);
}
[data-tema="claro"] .campo select option,
[data-tema="claro"] select option{
  background:#ffffff; color:#0e1a28;
}
.campo input[type="datetime-local"],
.campo input[type="time"],
.campo input[type="date"]{ min-height:44px; }
.campo textarea{ min-height:96px; resize:vertical; }
.fila-coords{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.acciones-gps{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.btn{
  appearance:none; border:1px solid var(--borde-fuerte);
  background: var(--vidrio); color:var(--texto);
  border-radius:var(--r-s); padding:11px 16px;
  font:inherit; font-weight:500; font-size:.9rem;
  cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition: background var(--tr), border-color var(--tr), transform var(--tr-fis);
}
.btn:hover{ border-color: var(--hielo); }
.btn:active{ transform: scale(.98); }
.btn.primario{
  background: linear-gradient(135deg, var(--hielo), #3f92ea);
  border-color: transparent; color:#041018; font-weight:600;
}
[data-tema="claro"] .btn.primario{ color:#fff; }
.btn.ancho{ width:100%; justify-content:center; margin-top:8px; }
.btn svg{ width:18px; height:18px; }
.hint{ font-size:.75rem; color:var(--texto-3); margin-top:6px; }
.estado-envio{
  margin-top:14px; padding:10px 12px; border-radius:var(--r-s);
  font-size:.85rem; display:none;
}
.estado-envio.on{ display:block; }
.estado-envio.ok{ background:var(--a2-fondo); color:var(--ok); border:1px solid rgba(52,186,124,.35); }
.estado-envio.warn{ background:var(--a3-fondo); color:var(--aviso); border:1px solid rgba(240,178,63,.35); }
.estado-envio.err{ background:rgba(232,93,93,.15); color:#ff9a9a; border:1px solid rgba(232,93,93,.35); }
.mini-mapa{
  height:180px; border-radius:var(--r-m); overflow:hidden;
  border:1px solid var(--borde); margin-top:10px;
}
.cola-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.7rem; color:var(--aviso);
  letter-spacing:.04em;
}

/* Veil + panel responsive (dashboard) */
.panel-veil{
  display:none; position:fixed; inset:0; top:var(--barra-h);
  background: rgba(4,10,18,.45); z-index:1050; backdrop-filter: blur(2px);
}
.panel-veil.on{ display:block; }
/* Mostrar botón de panel también en desktop cuando el panel está cerrado */
body.armazon.panel-cerrado .solo-movil#btn-panel{ display:grid; }
body.armazon.panel-cerrado .lienzo{ left:0 !important; }
/* El panel es columna flex de alto fijo: cabecera y buscador quedan fijos
   y .filtros toma el resto con scroll propio. Sin esto la lista de tramos
   se recorta y los últimos cortes son inalcanzables. */
.panel{ min-height:0; }
.panel-cab-extra, .panel .buscador{ flex:none; }
.panel .filtros{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  border-bottom:none; padding-bottom:28px;
  scrollbar-width:thin;
}
.panel .filtros::-webkit-scrollbar{ width:9px; }
.panel .filtros::-webkit-scrollbar-thumb{
  background:var(--borde-fuerte); border-radius:99px;
  border:2px solid transparent; background-clip:content-box;
}
.panel .filtros::-webkit-scrollbar-thumb:hover{
  background:var(--texto-3); background-clip:content-box;
}
/* Encabezados de grupo pegados al desplazar, para no perder el contexto */
.panel .filtros .filtro-grupo > h3{
  position:sticky; top:0; z-index:2;
  margin:0 -16px 7px; padding:8px 16px 6px;
  background:var(--panel-solido);
}

.panel-cab-extra{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px 0; gap:8px;
}
.panel-cab-extra h3{
  margin:0; font-size:.62rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--texto-3);
}

/* Selector de mapa base (flotante) */
.mapa-bases.flotante{
  right:16px; top:16px; width:200px; z-index:700;
}
.mapa-bases .op.on{ color: var(--texto); }
[data-tema="claro"] .mapa-bases .op.on{ color: var(--texto); }
.lienzo .ctrl-grupo{ z-index:710; }

/* Sernatur embed */
.sernatur-page{ height:100%; margin:0; overflow:hidden; }
.sernatur-page #mapa{ position:absolute; inset:0; }
.capas-panel{
  position:absolute; z-index:1000; top:12px; left:12px;
  width:min(300px, calc(100vw - 88px));
  background: var(--panel); backdrop-filter: blur(20px) saturate(150%);
  border:1px solid var(--borde); border-radius:var(--r-l);
  box-shadow: var(--sombra); overflow:hidden;
  max-height: calc(100vh - 24px); display:flex; flex-direction:column;
  transition: width var(--tr), max-height var(--tr), transform var(--tr);
}
.capas-panel header{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-bottom:1px solid var(--borde); flex:none;
}
.capas-panel header h1{
  font-size:.72rem; font-weight:600; margin:0;
  letter-spacing:.08em; text-transform:uppercase; flex:1;
}
.capas-panel .lista{
  overflow:auto; padding:8px 10px 12px;
  display:flex; flex-direction:column; gap:10px;
  -webkit-overflow-scrolling: touch;
}
.capas-panel.colapsado{
  width:auto; max-height:none;
}
.capas-panel.colapsado .lista,
.capas-panel.colapsado .capas-acciones{ display:none; }
.capas-panel.colapsado header{ border-bottom:none; }

.capa-grupo-titulo{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin:2px 2px 6px;
}
.capa-grupo-titulo span{
  font-size:.58rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--texto-3);
}
.capa-grupo-titulo .mini-acts{ display:flex; gap:4px; }
.capa-grupo-titulo .mini-acts button{
  appearance:none; border:1px solid var(--borde); background:transparent;
  color:var(--texto-3); font:inherit; font-size:.58rem; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 7px; border-radius:999px; cursor:pointer;
}
.capa-grupo-titulo .mini-acts button:hover{ color:var(--texto); border-color:var(--hielo); }

.capa-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:var(--r-s);
  border:1px solid transparent; cursor:pointer;
  background: rgba(255,255,255,.03);
  transition: background var(--tr), border-color var(--tr), opacity var(--tr);
  text-align:left; width:100%; color:inherit; font:inherit;
}
.capa-item:hover{ background: rgba(255,255,255,.06); }
.capa-item.on{ border-color: var(--borde-fuerte); background: var(--c-f, var(--hielo-f)); }
.capa-item:not(.on){ opacity:.72; }
.capa-item .toggle{
  width:34px; height:20px; border-radius:999px; flex:none;
  background: rgba(255,255,255,.1); border:1px solid var(--borde);
  position:relative; transition: background var(--tr), border-color var(--tr);
}
.capa-item .toggle::after{
  content:""; position:absolute; top:2px; left:2px;
  width:14px; height:14px; border-radius:50%;
  background: var(--texto-3); transition: transform var(--tr), background var(--tr);
}
.capa-item.on .toggle{
  background: var(--hielo-f); border-color: var(--hielo);
}
.capa-item.on .toggle::after{
  transform: translateX(14px); background: var(--hielo);
}
.capa-item img{ width:22px; height:22px; object-fit:contain; flex:none; }
.capa-item .swatch{
  width:14px; height:14px; border-radius:4px; flex:none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}
.capa-item .txt{ flex:1; min-width:0; }
.capa-item .txt b{
  display:block; font-size:.76rem; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.capa-item .txt span{
  font-size:.58rem; color:var(--texto-3);
  letter-spacing:.08em; text-transform:uppercase;
}
.capa-item .n{
  font-family: var(--mono); font-size:.72rem; color:var(--texto-2);
  font-variant-numeric: tabular-nums;
}
.sernatur-tools{
  position:absolute; z-index:1000; top:12px; right:12px;
  display:flex; flex-direction:column; gap:8px;
}
.sernatur-tools .icono-btn.on{
  color: var(--hielo); background: var(--hielo-f);
  border-color: var(--hielo);
}
.btn-capas-fab{
  display:none;
  position:absolute; z-index:1000; left:12px; top:12px;
  appearance:none; border:1px solid var(--borde-fuerte);
  background: var(--panel); backdrop-filter: blur(16px);
  color: var(--texto); border-radius:999px;
  padding:11px 16px; font:inherit; font-size:.8rem; font-weight:500;
  box-shadow: var(--sombra); cursor:pointer;
  align-items:center; gap:8px;
}
.btn-capas-fab svg{ width:18px; height:18px; }
.btn-capas-fab .dot-n{
  font-family: var(--mono); font-size:.7rem;
  background: var(--hielo-f); color: var(--hielo);
  border-radius:999px; padding:2px 7px;
}
/* Cuando el panel de capas está cerrado, el FAB reabre (desktop y móvil) */
.capas-panel.colapsado ~ .btn-capas-fab{ display:inline-flex; }
/* Sin tocar `position`: Leaflet posiciona el icono con position:absolute y
   sobrescribirlo saca los pines del flujo y los descuadra al hacer zoom. */
.pin-sernatur{
  background:none !important; border:none !important;
  width:32px; height:32px;
}
/* Reporte proyectado sobre el eje: se avisa que la posición es aproximada */
.pin-sernatur.aprox::after{
  content:''; position:absolute; inset:1px; border-radius:50%;
  border:1.5px dashed var(--aviso); opacity:.85;
}
/* Fuera de la ventana de vigencia */
.pin-sernatur.inactivo img{ opacity:.5; filter:grayscale(.5) drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.pin-sernatur img{
  display:block; width:28px; height:28px; margin:2px auto; object-fit:contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.55));
}
.pin-sernatur .dot{
  width:14px; height:14px; border-radius:50%;
  border:2px solid #fff; margin:7px auto 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
}

/* ══════════════ Banderero · marca de faena ══════════════
   Misma señal en el visor Sernatur, el esquema y el planificador. */
.pin-banderero{ background:none !important; border:none !important; }
.banderero-marca{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--panel-solido); border:2.5px solid var(--obra, #ffb300);
  color:var(--obra, #ffb300);
  box-shadow:0 2px 10px rgba(0,0,0,.45), 0 0 0 6px color-mix(in srgb, var(--obra, #ffb300) 20%, transparent);
}
.banderero-marca svg{
  width:21px; height:21px; fill:none;
  stroke:var(--texto); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.banderero-marca .caja{ fill:var(--panel-solido); stroke:var(--texto); }
.banderero-marca .luz{ fill:#2c3338; stroke:none; }
.banderero-marca .luz.roja.on{ fill:#ff3d5a; }
.banderero-marca .luz.ambar.on{ fill:#ffb300; }
.banderero-marca .luz.verde{ fill:#1c3328; }

.etiqueta{
  display:inline-block; font-size:.58rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--texto-3);
}
.hoja-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px 16px;
}
.hoja-grid .lbl{
  display:block; font-size:.58rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--texto-3); margin-bottom:3px;
}
.hoja-grid b{ font-weight:500; font-size:.9rem; }
.hoja-grid b.mono{ font-family:var(--mono); font-size:.78rem; }

/* Lista de tramos en panel */
.lista-tramos{ display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.fila-tramo{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--r-s);
  background: rgba(255,255,255,.035); border:1px solid transparent;
  cursor:pointer; text-align:left; width:100%; color:inherit; font:inherit;
  transition: border-color var(--tr), background var(--tr);
}
.fila-tramo:hover, .fila-tramo.on{
  border-color: var(--borde-fuerte); background: rgba(255,255,255,.06);
}
.fila-tramo .pt{
  width:10px; height:10px; border-radius:50%; flex:none;
  background: var(--c-b); box-shadow: 0 0 0 3px var(--c-f);
}
.fila-tramo .meta{ flex:1; min-width:0; }
.fila-tramo .meta b{
  display:block; font-size:.82rem; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fila-tramo .meta span{
  font-size:.68rem; color:var(--texto-3);
}
/* ══════════════ HOJA (side sheet) · layout con scroll interno ══════════════
   Antes: .hoja scrolleaba entera y el contenido se cortaba según pantalla.
   Ahora: columna flex, hero fijo, cuerpo scrolleable, acciones pegadas abajo. */
:root{ --ficha-w: clamp(340px, 30vw, 430px); }

.hoja{
  width: var(--ficha-w);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.hoja-hero{ flex:none; padding:18px 22px 16px; }
.hoja-tit h2{ font-size:1.1rem; }
.hoja-cuerpo{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:16px 22px 20px;
  scrollbar-width:thin;
}
.hoja-cuerpo::-webkit-scrollbar{ width:9px; }
.hoja-cuerpo::-webkit-scrollbar-thumb{
  background: var(--borde-fuerte); border-radius:99px;
  border:2px solid transparent; background-clip:content-box;
}
.hoja-cuerpo::-webkit-scrollbar-thumb:hover{ background: var(--texto-3); background-clip:content-box; }

/* Barra de acciones fija al pie de la hoja */
.hoja-acciones{
  flex:none; display:flex; gap:8px; flex-wrap:wrap;
  padding:12px 22px; border-top:1px solid var(--borde);
  background: color-mix(in srgb, var(--panel-solido) 88%, transparent);
  backdrop-filter: blur(12px);
}
.hoja-acciones .btn{ flex:1 1 140px; justify-content:center; }
.hoja-acciones .btn.solo-icono{ flex:0 0 auto; }

/* Sombra sutil que indica que hay más contenido */
.hoja-cuerpo{
  background:
    linear-gradient(var(--panel-solido) 30%, rgba(0,0,0,0)) top / 100% 24px no-repeat,
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.22)) bottom / 100% 24px no-repeat;
  background-attachment: local, local;
}

/* Badges de vigencia y de tramo */
.badge-vig{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.6rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.badge-vig::before{
  content:''; width:6px; height:6px; border-radius:50%; background:currentColor;
}
.badge-vig.ok{ color:var(--ok); background:rgba(52,186,124,.14); border:1px solid rgba(52,186,124,.34); }
.badge-vig.off{ color:var(--texto-3); background:rgba(140,160,180,.12); border:1px solid var(--borde); }

.bloque{
  margin-top:16px; padding:14px; border-radius:var(--r-m);
  border:1px solid var(--borde); background:rgba(255,255,255,.028);
}
[data-tema="claro"] .bloque{ background:rgba(20,40,70,.035); }
.bloque > h4{
  margin:0 0 10px; font-size:.6rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--texto-3);
}
.bloque-vig{ margin-top:10px; }
.vig-resumen{
  font-size:.82rem; color:var(--texto-2); line-height:1.5; margin:0;
}

/* ══════════════ Selector inteligente de vigencia ══════════════ */
.vig{ display:flex; flex-direction:column; gap:12px; }
.vig-presets{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  appearance:none; border:1px solid var(--borde-fuerte);
  background:rgba(255,255,255,.045); color:var(--texto-2);
  font:inherit; font-size:.71rem; font-weight:500;
  padding:7px 11px; border-radius:999px; cursor:pointer;
  transition: color var(--tr), border-color var(--tr), background var(--tr), transform var(--tr-fis);
}
.chip:hover{ color:var(--texto); border-color:var(--hielo); background:var(--hielo-f); }
.chip:active{ transform:scale(.96); }
.chip.on{
  color:#041018; border-color:transparent; font-weight:600;
  background:linear-gradient(135deg, var(--hielo), #3f92ea);
}
[data-tema="claro"] .chip.on{ color:#fff; }
.chip.add{ border-style:dashed; color:var(--texto-3); }
.chip.quitar{ padding:6px 10px; font-size:.9rem; line-height:1; color:var(--texto-3); }
.chip.quitar:hover{ color:#ff9a9a; border-color:rgba(232,93,93,.5); background:rgba(232,93,93,.12); }
[data-tema="claro"] .chip{ background:#fff; }

.vig-fechas{ display:grid; grid-template-columns:repeat(auto-fit, minmax(155px,1fr)); gap:8px; }
.vig-fechas .campo{ margin-bottom:0; min-width:0; }
/* datetime-local trae un ancho intrínseco grande: hay que anularlo */
.vig-fechas input{ min-width:0; width:100%; font-size:.78rem; padding:9px 7px; }

.vig-dias{ display:flex; gap:5px; }
.dia{
  appearance:none; flex:1 1 0; min-width:0;
  border:1px solid var(--borde-fuerte); background:rgba(255,255,255,.04);
  color:var(--texto-3); font:inherit; font-size:.74rem; font-weight:600;
  height:38px; border-radius:10px; cursor:pointer;
  transition: color var(--tr), border-color var(--tr), background var(--tr);
}
.dia:hover{ color:var(--texto); border-color:var(--hielo); }
.dia.on{
  color:#041018; border-color:transparent;
  background:linear-gradient(135deg, var(--hielo), #3f92ea);
}
[data-tema="claro"] .dia{ background:#fff; }
[data-tema="claro"] .dia.on{ color:#fff; }

.vig-switch{
  display:flex; align-items:center; gap:9px;
  font-size:.8rem; color:var(--texto-2); cursor:pointer;
}
.vig-switch input{ width:17px; height:17px; accent-color:var(--hielo); cursor:pointer; }

.vig-ventanas{ display:flex; flex-direction:column; gap:7px; }
.vig-ventanas.off{ opacity:.4; pointer-events:none; }
.vig-ventana{ display:flex; align-items:center; gap:7px; }
.vig-ventana input[type="time"]{
  flex:1 1 0; min-width:0;
  background:rgba(255,255,255,.045); border:1px solid var(--borde-fuerte);
  border-radius:var(--r-s); color:var(--texto); font:inherit; font-size:.85rem;
  padding:9px 10px; outline:none;
}
[data-tema="claro"] .vig-ventana input[type="time"]{ background:#fff; }
.vig-ventana input[type="time"]:focus{ border-color:var(--hielo); box-shadow:0 0 0 3px var(--hielo-f); }
.vig-ventana .sep{ font-size:.7rem; color:var(--texto-3); flex:none; }

.vig-preview{
  margin:2px 0 0; padding:9px 11px; border-radius:var(--r-s);
  background:var(--hielo-f); border:1px solid rgba(86,196,239,.28);
  color:var(--texto); font-size:.78rem; line-height:1.45;
}

/* Sugerencia de tramo más cercano */
.tramo-sug{
  display:flex; align-items:center; gap:10px; margin-top:8px;
  padding:9px 11px; border-radius:var(--r-s);
  background:rgba(255,255,255,.04); border:1px dashed var(--borde-fuerte);
  font-size:.78rem; color:var(--texto-2);
}
[data-tema="claro"] .tramo-sug{ background:rgba(20,40,70,.04); }
.tramo-sug.lejos{ border-color:rgba(240,178,63,.45); background:rgba(240,178,63,.1); }
.tramo-sug .pt{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--hielo); box-shadow:0 0 0 3px var(--hielo-f);
}
.tramo-sug b{ color:var(--texto); font-weight:500; }
.tramo-sug .dist{ font-family:var(--mono); font-size:.72rem; color:var(--texto-3); margin-left:auto; }

/* Fila de tramo/incidente: línea extra de vigencia */
.fila-tramo .meta em{
  display:block; font-style:normal; font-size:.66rem; color:var(--texto-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px;
}

/* Hoja form inline */
.hoja-form .campo{ margin-bottom:12px; }
.hoja-form .btn.primario{ width:100%; justify-content:center; }

@media (max-width:1180px){
  :root{ --panel-w: 300px; }
  .marca-logo{ height:48px; }
}

@media (max-width:1400px){
  :root{ --ficha-w: clamp(330px, 33vw, 400px); }
}

@media (max-width:900px){
  :root{ --panel-w: min(78vw, 300px); --ficha-w: 100%; }
  .panel{
    width: var(--panel-w) !important;
    max-width: 300px;
  }
  /* Hoja como bottom sheet con scroll interno y acciones visibles */
  .hoja{
    width:100%; left:0; right:0; top:auto; bottom:0;
    height: min(88vh, 760px);
    max-height: calc(100vh - 48px);
    border-radius: var(--r-l) var(--r-l) 0 0;
  }
  .hoja::before{
    content:''; position:absolute; top:7px; left:50%; transform:translateX(-50%);
    width:38px; height:4px; border-radius:99px; background:var(--borde-fuerte);
  }
  .hoja-hero{ padding:20px 18px 14px; }
  .hoja-cuerpo{ padding:14px 18px 18px; }
  .hoja-acciones{
    padding:11px 18px calc(11px + env(safe-area-inset-bottom));
  }
  .vig-fechas{ grid-template-columns:1fr; }
  .chip{ padding:8px 12px; font-size:.74rem; }
  .dia{ height:42px; }
  .mapa-bases.flotante{
    right:10px; top:10px; width:min(190px, calc(100vw - 70px));
  }
  .capas-panel{
    top:auto; bottom:0; left:0; right:0;
    width:100%; max-width:none;
    max-height: min(48vh, 420px);
    border-radius: var(--r-l) var(--r-l) 0 0;
    border-left:none; border-right:none; border-bottom:none;
  }
  .capas-panel.colapsado{
    transform: translateY(100%);
    width:100%;
    max-height:0; border:none; padding:0; overflow:hidden;
    pointer-events:none;
  }
  .capas-panel.colapsado header{ display:none; }
  .capas-panel.colapsado ~ .btn-capas-fab{
    top:auto; bottom:16px; left:12px;
  }
  .sernatur-tools{ top:auto; bottom:16px; right:12px; }
  .flotante.mapa-bases{
    top:auto !important; bottom:70px !important; right:12px !important;
  }
  .sernatur-page .leaflet-bottom.leaflet-right{ bottom:64px; }
}

@media (max-width:560px){
  .fila-coords{ grid-template-columns:1fr; }
  .marca-txt p{ display:none; }
  .marca-txt .marca-org{ display:none; }
  .totales .total:nth-child(3){ display:none; }
  .mapa-bases.flotante{ width:min(170px, calc(100vw - 64px)); }
}