/* Sin Servicio: estilos. Paleta verde, accesible (contraste revisado, WCAG AA) y amigable.
   Todos los colores salen de variables; el modo oscuro las redefine. */
:root {
  --fondo: #f2f8f3;
  --fondo-2: #e3f3e8;          /* degradado suave de la portada */
  --tarjeta: #ffffff;
  --texto: #14281d;
  --gris: #4b6355;
  --borde: #cfe3d5;            /* separadores decorativos */
  --borde-control: #6b8c77;    /* bordes de campos y botones (contraste 3:1 o más) */
  --verde: #1b7f4b;            /* botones y acentos (texto blanco encima: 5,0:1) */
  --verde-hover: #14663b;
  --verde-osc: #0e4d2f;        /* cabecera y elementos seleccionados */
  --verde-suave: #ddf1e3;
  --sobre-verde: #ffffff;
  --alerta-bg: #fdecea;
  --alerta-tx: #7a1f0e;
  --alerta-borde: #c0392b;
  --sombra: 0 1px 2px rgba(20, 40, 29, .07), 0 10px 28px rgba(20, 40, 29, .07);
  --radio: 18px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0e1a13; --fondo-2: #12261a; --tarjeta: #16271d; --texto: #eaf4ec; --gris: #a6bdae;
    --borde: #2a4434; --borde-control: #4f7560;
    --verde: #5fd39a; --verde-hover: #7fe0b0; --verde-osc: #0b2e1c; --verde-suave: #1f3a2a;
    --sobre-verde: #07210f;
    --alerta-bg: #3a1a15; --alerta-tx: #ffd7cf; --alerta-borde: #e57366;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem; line-height: 1.55; color: var(--texto);
  background: linear-gradient(180deg, var(--fondo-2) 0, var(--fondo) 280px) no-repeat, var(--fondo);
}
a { color: var(--verde-osc); text-decoration-thickness: .08em; text-underline-offset: .15em; }
@media (prefers-color-scheme: dark) { a { color: var(--verde); } }

/* ---------- Foco visible (teclado) ---------- */
:focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; border-radius: 6px; }
.cabecera :focus-visible { outline-color: #fff; }

/* ---------- Saltar al contenido ---------- */
.saltar { position: absolute; left: 12px; top: -64px; background: var(--verde-osc); color: #fff;
          padding: 12px 18px; border-radius: 0 0 12px 12px; font-weight: 700; z-index: 1000; }
.saltar:focus { top: 0; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Cabecera ---------- */
.cabecera { background: var(--verde-osc); color: #fff; }
.cabecera-in { max-width: 760px; margin: 0 auto; padding: 10px 16px; display: flex; flex-wrap: wrap;
               align-items: center; justify-content: space-between; gap: 6px 12px; }
.marca { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none;
         font-weight: 800; font-size: 1.25rem; letter-spacing: .01em; min-height: 44px; }
.marca svg { flex: none; }
.cabecera nav { display: flex; gap: 4px; }
.cabecera nav a { color: #fff; text-decoration: none; padding: 10px 14px; border-radius: 999px; font-weight: 600;
                  min-height: 44px; display: inline-flex; align-items: center; }
.cabecera nav a:hover { background: rgba(255, 255, 255, .14); }
.cabecera nav a[aria-current="page"] { background: #fff; color: var(--verde-osc); }

/* ---------- Estructura ---------- */
.contenedor { max-width: 760px; margin: 0 auto; padding: 20px 16px 8px; }
.contenedor:focus { outline: none; }
h1 { font-size: 1.85rem; line-height: 1.2; margin: 6px 0 8px; letter-spacing: -.01em; }
h2 { font-size: 1.3rem; margin: 32px 0 8px; }
.lead { color: var(--gris); font-size: 1.1rem; margin: 0 0 18px; }
.nota, .meta { color: var(--gris); font-size: .92rem; }
.pie { max-width: 760px; margin: 28px auto 0; padding: 18px 16px 36px; color: var(--gris); font-size: .9rem;
       border-top: 1px solid var(--borde); }
.pie p { margin: 0 0 6px; }

/* ---------- Tarjetas ---------- */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
           padding: 18px; margin: 14px 0; box-shadow: var(--sombra); }
.bienvenida { background: var(--verde-suave); border-color: transparent; box-shadow: none; padding: 0; }
.bienvenida summary { cursor: pointer; font-weight: 800; padding: 14px 18px; min-height: 52px; display: flex;
                      align-items: center; list-style-position: inside; border-radius: var(--radio); }
.bienvenida summary { justify-content: space-between; list-style: none; }
.bienvenida summary::-webkit-details-marker { display: none; }
.bienvenida summary::after { content: "▾"; font-size: 1.1rem; transition: transform .15s ease; }
.bienvenida[open] summary::after { transform: rotate(180deg); }
.bienvenida .contenido { padding: 0 18px 16px; }
.extras { border: 2px dashed var(--borde-control); border-radius: var(--radio); margin: 0 0 22px; padding: 0; }
.extras summary { cursor: pointer; font-weight: 800; padding: 14px 16px; min-height: 52px; display: flex;
                  align-items: center; justify-content: space-between; list-style: none; }
.extras summary::-webkit-details-marker { display: none; }
.extras summary::after { content: "▾"; font-size: 1.1rem; transition: transform .15s ease; }
.extras[open] summary::after { transform: rotate(180deg); }
.extras .contenido { padding: 0 16px 16px; }
[hidden] { display: none !important; }
.bienvenida p { margin: 0 0 10px; }
.pasos { margin: 0; padding-left: 1.2rem; }
.pasos li { margin: 2px 0; }

/* ---------- Formularios ---------- */
fieldset { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
legend { font-weight: 800; font-size: 1.08rem; margin-bottom: 10px; padding: 0; }
legend .num { display: inline-flex; width: 1.7rem; height: 1.7rem; margin-right: 8px; border-radius: 50%;
              background: var(--verde); color: var(--sobre-verde); align-items: center; justify-content: center;
              font-size: .95rem; }
.opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opcion { position: relative; display: block; margin: 0; font-weight: 600; }
.opcion input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.opcion > span { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px;
               background: var(--tarjeta); border: 2px solid var(--borde-control); border-radius: 14px; }
.opcion .ico { font-size: 1.4rem; line-height: 1; }
.opcion:hover > span { background: var(--verde-suave); }
.opcion input:checked + span { background: var(--verde); border-color: var(--verde); color: var(--sobre-verde); }
.opcion input:checked + span::after { content: "✓"; margin-left: auto; font-weight: 800; }
.opcion input:focus-visible + span { outline: 3px solid var(--texto); outline-offset: 3px; }

select, input[type=text], input[type=password], textarea {
  width: 100%; padding: 13px 14px; font: inherit; color: var(--texto); background: var(--tarjeta);
  border: 2px solid var(--borde-control); border-radius: 14px; min-height: 52px; }
textarea { min-height: 96px; resize: vertical; }
::placeholder { color: #5e7567; opacity: 1; }
@media (prefers-color-scheme: dark) { ::placeholder { color: var(--gris); } }
label { display: block; font-weight: 700; margin-bottom: 12px; }
.ayuda { color: var(--gris); font-size: .92rem; margin: 6px 0 0; font-weight: 400; }
.en-linea { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.en-linea select { width: auto; flex: 1 1 150px; }
.casilla { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin-bottom: 12px; }
.casilla input { width: 1.4rem; height: 1.4rem; margin-top: 2px; flex: none; accent-color: var(--verde); }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--verde);
         color: var(--sobre-verde); border: 2px solid var(--verde); border-radius: 14px; padding: 12px 22px;
         font: inherit; font-weight: 800; min-height: 52px; cursor: pointer; text-decoration: none; }
.boton:hover { background: var(--verde-hover); border-color: var(--verde-hover); }
.boton.secundario { background: transparent; color: var(--texto); border-color: var(--borde-control); }
.boton.secundario:hover { background: var(--verde-suave); }
.boton.peligro { background: var(--alerta-bg); color: var(--alerta-tx); border-color: var(--alerta-borde); }
.boton.grande { width: 100%; font-size: 1.1rem; min-height: 58px; }
form > .boton { width: 100%; }
.en-linea .boton, .en-linea form > .boton { width: auto; }

/* ---------- Avisos ---------- */
.alerta { background: var(--alerta-bg); color: var(--alerta-tx); border: 2px solid var(--alerta-borde);
          border-radius: 14px; padding: 12px 14px; margin: 12px 0; }
.alerta strong { display: block; }
.precaucion { background: #fff3d1; color: #4a3200; border: 2px solid #c98f00; border-radius: 14px; padding: 12px 14px; margin: 12px 0; }
.precaucion strong { display: block; }
@media (prefers-color-scheme: dark) { .precaucion { background: #3a2e10; color: #ffe9ad; border-color: #d9a520; } }
.aviso { background: var(--verde-suave); border-radius: 14px; padding: 12px 14px; margin: 12px 0; }

/* ---------- Mapa ---------- */
#mapa { height: 440px; border-radius: var(--radio); border: 2px solid var(--borde-control); margin: 12px 0 4px; z-index: 0; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.filtros-titulo { width: 100%; margin: 4px 0 0; font-weight: 800; font-size: .95rem; }
.chip { position: relative; margin: 0; font-weight: 700; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.chip > span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; min-height: 46px;
             border: 2px solid var(--borde-control); border-radius: 999px; background: var(--tarjeta); }
.chip input:checked + span { background: var(--verde-osc); border-color: var(--verde-osc); color: #fff; }
.chip input:checked + span::before { content: "✓"; font-weight: 800; }
.chip input:focus-visible + span { outline: 3px solid var(--texto); outline-offset: 3px; }
/* colores de servicio: coinciden con mapa.js; el texto cumple contraste 4,5:1 */
.chip-agua input:checked + span { background: #0072b2; border-color: #0072b2; color: #fff; }
.chip-luz input:checked + span { background: #e69f00; border-color: #e69f00; color: #111; }
.chip-internet input:checked + span { background: #8e44ad; border-color: #8e44ad; color: #fff; }
.chip-senal input:checked + span { background: #d55e00; border-color: #d55e00; color: #111; }
.chip-enlace { display: inline-flex; align-items: center; padding: 8px 16px; min-height: 46px; border: 2px solid var(--borde-control);
               border-radius: 999px; text-decoration: none; color: var(--texto); font-weight: 700; background: var(--tarjeta); }
.chip-enlace:hover { background: var(--verde-suave); }
.chip-enlace[aria-current="true"] { background: var(--verde-osc); border-color: var(--verde-osc); color: #fff; }
@media (prefers-color-scheme: dark) {
  .chip:not(.chip-agua):not(.chip-luz):not(.chip-internet):not(.chip-senal) input:checked + span, .chip-enlace[aria-current="true"] { background: var(--verde); border-color: var(--verde); color: var(--sobre-verde); }
}
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 0; padding: 0; list-style: none; font-size: .95rem; }
.leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.insignia { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
            font-weight: 800; font-size: .85rem; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.insignia.agua { background: #0072b2; color: #fff; }
.insignia.luz { background: #e69f00; color: #111; }
.insignia.internet { background: #8e44ad; color: #fff; }
.insignia.senal { background: #d55e00; color: #111; }
.insignia.pasado { opacity: .72; border-style: dashed; }
/* Etiquetas de riesgo: borde punteado + porcentaje en texto (no dependen solo del color) */
.riesgo { display: inline-block; padding: 3px 9px; border-radius: 999px; font-weight: 800; font-size: .8rem; white-space: nowrap;
          border: 2px dashed #14281d; background: #fff; color: #14281d; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.riesgo.alto { background: #fdecea; border-color: #7a1f0e; color: #7a1f0e; }
.riesgo.medio { background: #fff4d6; border-color: #6b4a00; color: #4a3300; }
.lista li.riesgo-alto { border-left-style: double; }
.evaluacion { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px; margin: 8px 0 16px; }
.evaluacion summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.lista { list-style: none; padding: 0; margin: 0 0 16px; }
.lista li { background: var(--tarjeta); border: 1px solid var(--borde); border-left: 8px solid var(--borde-control);
            border-radius: 12px; padding: 10px 14px; margin: 8px 0; }
.lista li.agua { border-left-color: #0072b2; } .lista li.luz { border-left-color: #e69f00; }
.lista li.internet { border-left-color: #8e44ad; } .lista li.senal { border-left-color: #d55e00; }

/* Objetivos táctiles de al menos 44 px */
.enlace-grande, .pie a { display: inline-flex; align-items: center; min-height: 44px; }
.leaflet-bar a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 22px !important; }

/* ---------- Informe ---------- */
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.dato { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; padding: 14px; box-shadow: var(--sombra); }
.dato strong { display: block; font-size: 1.6rem; line-height: 1.2; color: var(--verde-osc); }
@media (prefers-color-scheme: dark) { .dato strong { color: var(--verde); } }
.dato span { color: var(--gris); font-size: .9rem; }
.tabla-scroll { overflow-x: auto; margin: 8px 0 16px; border: 1px solid var(--borde); border-radius: 14px; background: var(--tarjeta); }
table { width: 100%; border-collapse: collapse; }
caption { text-align: left; padding: 12px 14px 4px; font-weight: 800; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-size: .88rem; color: var(--gris); background: var(--fondo); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody th { background: transparent; color: var(--texto); font-size: 1rem; white-space: nowrap; }
.tabla-scroll:focus-visible { outline-offset: -3px; }
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--verde-suave) 45%, transparent); }
tbody tr:last-child td { border-bottom: 0; }
small { color: var(--gris); }
.metodologia li { margin-bottom: 8px; }

/* ---------- Administración ---------- */
.fila-titulo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.fila-titulo .boton { width: auto; }
.texto { font-size: 1.1rem; margin: 0 0 4px; }

/* ---------- Pantallas pequeñas ---------- */
@media (max-width: 400px) {
  h1 { font-size: 1.6rem; }
  .cabecera nav a { padding: 10px 11px; }
}

/* ---------- Respeta quien prefiere menos movimiento ---------- */
@media (prefers-reduced-motion: no-preference) {
  .boton, .opcion > span, .chip > span, .cabecera nav a { transition: background-color .15s ease, border-color .15s ease; }
}

/* ---------- Impresión ---------- */
@media print {
  .cabecera, .pie, .no-imprimir, .saltar { display: none !important; }
  body { background: #fff; color: #000; }
  .dato, table, .tabla-scroll { border-color: #999; box-shadow: none; }
}

/* ---------- Importador: la tabla se vuelve tarjetas en pantallas pequeñas ---------- */
.tabla-importar .mensaje { min-width: 14rem; }
@media (max-width: 640px) {
  .tabla-importar thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-importar, .tabla-importar tbody, .tabla-importar tr, .tabla-importar td { display: block; width: 100%; }
  .tabla-importar tr { border-bottom: 8px solid var(--fondo); padding: 6px 4px; }
  .tabla-importar td { border: 0; padding: 4px 12px; text-align: left !important; white-space: normal !important; }
  .tabla-importar td::before { content: attr(data-label); display: block; color: var(--gris); font-size: .8rem; font-weight: 700; }
  .tabla-importar td[data-label="Importar"] { display: flex; align-items: center; gap: 10px; }
  .tabla-importar td[data-label="Importar"] input { width: 1.5rem; height: 1.5rem; accent-color: var(--verde); }
  .tabla-importar td[data-label="Importar"]::before { display: inline; font-size: .95rem; color: var(--texto); }
  .tabla-importar .mensaje { min-width: 0; font-size: 1.05rem; }
}