/* ========== Reset y base ========== */
*,
*::before,
*::after { box-sizing: border-box }
html, body { height: 100% }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; overflow-x: hidden; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Arial, Noto Sans, sans-serif }

/* img, svg, video { max-width: 100%; height: auto; display: block } */
button, input, select, textarea { font: inherit; min-width: 0 }

/* ========== Tokens ========== */
:root{
  --vino:#75142e; --dorado:#b8935c; --tinta:#1b1b1b;
  --papel:#fff; --niebla:#f5f5f5; --borde:#e5e5e5
}

/* ========== UI genérica ========== */
.card{ background:var(--papel); border:1px solid var(--borde); border-radius:1.25rem; box-shadow:0 8px 24px rgba(0,0,0,.06) }
.btn-primary{ background:var(--vino); color:#fff; font-weight:800; border-radius: .75rem; padding: .6rem 1rem }
.btn-outline{ border:1px solid var(--borde); background:var(--papel); border-radius:.75rem; padding:.6rem 1rem }
.btn-primary:disabled,.btn-outline:disabled{ opacity:.5; cursor:not-allowed; filter:saturate(.6) }

.kpi{ box-shadow:0 8px 24px rgba(0,0,0,.06) }
.tab{ border:1px solid var(--borde); border-radius:999px; padding:.45rem .9rem; font-weight:600; white-space: nowrap }
.tab[aria-selected="true"]{ background:var(--vino); color:#fff; border-color:var(--vino) }
.pill{ background:var(--niebla); border-radius:999px; padding:.15rem .55rem; font-size:.75rem }

.progress{ height:10px; border-radius:999px; background:var(--niebla); overflow:hidden }
.progress > div{ height:100%; width:0; background:var(--dorado); transition:width .25s }

.qgrid{ display:grid; gap:1rem }
.qcols-2{ grid-template-columns: repeat(2, minmax(0,1fr)) }
.qcols-3{ grid-template-columns: repeat(3, minmax(0,1fr)) }
.qcols-4{ grid-template-columns: repeat(4, minmax(0,1fr)) }
@media (max-width: 768px){
  .qcols-2,.qcols-3,.qcols-4{ grid-template-columns:1fr }
}

/* ========== Tema oscuro ========== */
/* .dark { --papel:#0f1115; --niebla:#0a0c10; --tinta:#e6e8eb; --borde:#23262d }
html.dark{ color-scheme: dark }
.dark body{ background:var(--niebla); color:var(--tinta) }
.dark .card{ background:var(--papel); border-color:var(--borde); box-shadow:0 8px 24px rgba(0,0,0,.45) }
.dark .btn-outline{ border-color:var(--borde); color:var(--tinta) }
.dark header.sticky{ background:color-mix(in oklab, var(--papel) 90%, transparent); border-color:var(--borde) }
.dark .progress{ background:#1a1d24 }
.dark select, .dark input, .dark textarea { background:#12151b; border-color:var(--borde); color:var(--tinta) } */

/* ========== dialog ========== */
dialog::backdrop{ background:rgba(0,0,0,.75) }
dialog{ border:0; padding:0; border-radius:1rem; width:min(1280px,92vw) }

/* Contenido del modal */
#dlgEncuesta,
#dlgEncuesta form.card {
  max-width: 100%;
  overflow-x: clip; /* evita overflow horizontal global */
}

#dlgEncuesta .modal-body{
  max-height: 75vh;
  overflow-y: auto;
  overflow-x: hidden; /* prohíbe scroll X global */
  overscroll-behavior: contain;
  touch-action: pan-y; /* en móviles, vertical suave */
}
#dlgEncuesta .modal-body > *{ min-width: 0 } /* evita que hijos “ensanches” */

/* Toast superior dentro del modal */
.enc-toast{
  position: sticky; top: 0; z-index: 10;
  background: #fff3f3; color:#7f1d1d; border:1px solid #fecaca;
  border-radius:.75rem; padding:.5rem .75rem; font-size:.9rem; margin-bottom:.5rem;
}
.dark .enc-toast{ background:#2a1212; border-color:#7f1d1d; color:#fecaca }

/* Footer del modal (sin overflow X) */
#dlgEncuesta footer{
  /* overflow-x: hidden; */
  gap:.75rem;
  width: 100%;
}
#dlgEncuesta footer > .flex{
  flex-wrap: wrap; min-width: 0; gap:.5rem;
}
#dlgEncuesta footer .btn-outline,
#dlgEncuesta footer .btn-primary{ min-width: 0; flex: 0 1 auto }

@media (max-width: 480px){
  #dlgEncuesta footer{ flex-direction: column; align-items: stretch }
  #dlgEncuesta footer > .flex{ width: 100% }
  #dlgEncuesta footer > .flex > button{ flex: 1 1 0 }
}

/* ===== SOLO matrices/tabla con scroll horizontal ===== */
.table-wrap,
.matrix-wrap{
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  padding-bottom: .25rem; /* evita “corte” con barra */
}

/* Tabla servicios C2–C3 (desktop) */
.services-table{
  min-width: 760px;
  display:grid; gap:.5rem; align-items:center;
  grid-template-columns: 1.8fr .9fr 2.2fr;  /* Etiqueta | ¿Hay? | Calidad */
}
.services-table .hdr{ font-size:.8rem; font-weight:700; color:#667085 }
.services-row{ display:contents }
.services-cell{ padding:.35rem 0 }

/* Matrices */
.matrix-grid{
  min-width:520px;
  display:grid; gap:.25rem; align-items:center;
  grid-template-columns: 1.8fr repeat(var(--cols,3), minmax(86px,1fr));
}
.matrix-grid .hdr{ font-size:.8rem; font-weight:700; color:#667085; text-align:center }
.matrix-row{ display:contents }
.matrix-cell{ padding:.25rem 0 }
.matrix-cell .checkgroup{ display:grid; grid-template-columns: repeat(var(--cols,3), 1fr); gap:.25rem }
.matrix-cell .pillcheck{ justify-self:stretch; text-align:center; padding:.5rem .25rem }

/* Checkgroup (píldoras exclusivas) */
.checkgroup { display:flex; flex-wrap:wrap; gap:.5rem }
.checkgroup .pillcheck{
  user-select:none; cursor:pointer; padding:.4rem .7rem;
  border:1px solid var(--borde); border-radius:999px; font-size:.9rem; line-height:1;
  background:var(--papel); color:var(--tinta);
}
.checkgroup .pillcheck[aria-checked="true"]{
  background:var(--vino); border-color:var(--vino); color:#fff; font-weight:700;
}
.checkgroup[aria-disabled="true"] .pillcheck{ opacity:.45; pointer-events:none }

/* Validación visual */
.is-invalid{ outline:2px solid #f43f5e; outline-offset:2px; border-radius:.5rem }
.err-hint{ color:#f43f5e; font-size:.75rem; margin-top:.25rem; display:block }

/* Aux responsive para textos largos */
.break-any { overflow-wrap:anywhere; word-break:break-word }
/* ==== MODAL como layout de columna (footer siempre visible) ==== */
#dlgEncuesta form.card{
  display:flex;
  flex-direction:column;
  /* usar unidades seguras en móviles con notch */
  max-height: 95dvh;
}

/* El body es el único que scrollea en vertical */
#dlgEncuesta .modal-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;      /* nada de scroll X global */
  /* IMPORTANTE: no bloquear el gesto horizontal, lo gestionan los hijos */
  touch-action: auto;
  overscroll-behavior: contain;
}

/* En móviles muy pequeños, asegúrate de no “ensanchar” nada */
#dlgEncuesta .modal-body *{ min-width: 0 }

/* Footer responsive sin overflow horizontal */
#dlgEncuesta footer{
  /* overflow-x: hidden; */
  gap:.75rem;
  width:100%;
}

/* ==== SOLO matrices/tabla con scroll horizontal ==== */
.matrix-wrap,
.table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* habilita gesto horizontal aun si el padre controla pan-y */
  touch-action: pan-x pan-y;
  scrollbar-gutter: stable both-edges;
  padding-bottom: .25rem;
}

/* Anchos mínimos para que aparezca el scroll cuando haga falta */
.matrix-grid{ min-width:520px }
.services-table{ min-width:760px }

/* Romper etiquetas largas a varias líneas para no empujar el layout */
.matrix-cell label{ overflow-wrap:anywhere; word-break:break-word }

/* (Opcional) Scrollbar visible y discreto */
.matrix-wrap::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar{ height:8px }
.matrix-wrap::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb{ background:var(--borde); border-radius:999px }
/* ======= Matrices (p.ej. F6) — FIX ancho de label ======= */
.matrix-wrap{ 
  overflow-x:auto; 
  -webkit-overflow-scrolling:touch; 
  touch-action: pan-x pan-y; 
}

/* Dale un mínimo al label y a cada columna de opciones */
.matrix-grid{
  --cols: 3;                 /* se sobreescribe inline desde JS */
  --label-min: 200px;        /* <- ancho mínimo del texto de la fila */
  --col-min: 96px;           /* <- mínimo por columna de respuesta */

  display:grid; 
  gap:.25rem; 
  align-items:center;

  /* label + columnas */
  grid-template-columns: 
    minmax(var(--label-min), 2fr)
    repeat(var(--cols), minmax(var(--col-min), 1fr));

  /* ancho mínimo total calculado para que aparezca el scroll X si hace falta */
  min-width: calc(var(--label-min) + (var(--cols) * var(--col-min)) + 24px);
}

/* Encabezados centrados, ok */
.matrix-grid .hdr{ 
  font-size:.8rem; 
  font-weight:700; 
  color:#667085; 
  text-align:center 
}

/* Celdas */
.matrix-row{ display:contents }
.matrix-cell{ padding:.25rem 0 }

/* El texto del label debe partir por palabras, no por letras */
.matrix-cell > label{
  display:block;
  white-space: normal;
  overflow-wrap: break-word; /* antes estaba "anywhere" */
  word-break: normal;
  line-height: 1.25;
  max-width: 36ch;           /* opcional: limita el ancho para lecturabilidad */
}

/* Botoneras de la matriz */
.matrix-cell .checkgroup{ 
  display:grid; 
  grid-template-columns: repeat(var(--cols), 1fr); 
  gap:.25rem 
}
.matrix-cell .pillcheck{ 
  justify-self:stretch; 
  text-align:center; 
  padding:.5rem .25rem 
}

#btnNext, #btnPrev, #btnEnviar {
    font-size: 12px;
}

/* === Leaflet hardening pack (colócalo AL FINAL de tus estilos) === */

/* 1) Mata cualquier altura heredada para Leaflet */
.leaflet-container{ height:auto !important; }

/* 2) El mapa solo toma la altura de SU contenedor (fija aquí la altura) */
#map-enc{ position:relative; height:360px; min-height:300px; border-radius:1rem; }
#map-enc.leaflet-container{ height:360px !important; } /* por si Leaflet convierte el div directamente */

/* 3) No dejes que reglas globales de imágenes “estiren” tiles o íconos */
.leaflet-container img{ max-width:none !important; }           /* tiles en general */
.leaflet-container .leaflet-tile{ width:256px; height:256px; } /* refuerza tamaño base */
.leaflet-container .leaflet-marker-icon,
.leaflet-container .leaflet-marker-shadow{ max-width:none !important; height:auto; }

/* 4) Si algún layout padre usa flex, evita que la altura del hijo cause rebotes */
#map-enc, .leaflet-container{ min-height:0; }
/* ✅ FIX principal: NO toques la altura global de Leaflet */
.leaflet-container{ height: auto; /* sin !important */ }

/* ✅ Fija la altura del contenedor del mapa (la única fuente de verdad) */
#map-enc{
  position: relative;
  height: 360px;           /* ajusta a tu gusto */
  min-height: 300px;
  border-radius: 1rem;
}

/* Si por alguna razón no puedes quitar el !important global, fuerza aquí: */
#map-enc.leaflet-container{ height: 360px !important; }  /* última opción */

/* ✅ Evita que las imágenes globales deformen los tiles/íconos */
.leaflet-container img{ max-width: none !important; }
.leaflet-container .leaflet-tile{ width:256px; height:256px; }
.leaflet-container .leaflet-marker-icon,
.leaflet-container .leaflet-marker-shadow{ max-width:none !important; height:auto; }

/* ✅ Si el mapa vive dentro de layouts flex/grid, evita “rebotes” de altura */
#map-enc{ min-height: 0; }
.card:has(#map-enc) .card-body{ min-height: 0; overflow: visible; } /* opcional */

/* ===== Overlay de confirmación dentro del mismo modal ===== */
.inmodal-backdrop{
  position: fixed; inset: 0;
  background: rgb(0 0 0 / .35);
  display: grid; place-items: center;
  z-index: 50; /* por encima del contenido del modal */
}
.inmodal-card{
  width: min(560px, 92vw);
  border: 1px solid var(--borde, #e5e5e5);
  border-radius: 16px;
  background: var(--papel, #fff);
  box-shadow: 0 20px 40px rgb(0 0 0 / .18);
  padding: 20px 18px;
}
.inmodal-title{ margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--tinta,#1b1b1b) }
.inmodal-text{ margin: 0 0 14px; color: var(--muted,#6b7280); font-size: 14px }
.inmodal-actions{ display:flex; gap:10px; justify-content:flex-end }
.btn{ appearance:none; border:1px solid transparent; padding:8px 12px; border-radius:12px; cursor:pointer; font:inherit }
.btn-primary{ background: var(--vino,#75142e); color:#fff }
.btn-secondary{ background: var(--niebla,#f5f5f5); color: var(--tinta,#1b1b1b); border-color: var(--borde,#e5e5e5) }
.btn-danger{ background:#b91c1c; color:#fff }