:root{
  --verde:#1b6b3a;
  --verde-osc:#13502b;
  --verde-claro:#e7f3ec;
  --tierra:#8a6d3b;
  --gris:#5b6770;
  --gris-claro:#eef1f3;
  --rojo:#c0392b;
  --txt:#1f2a30;
  --radio:14px;
  --sombra:0 2px 10px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* el atributo hidden manda sobre cualquier display */
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--txt);
  background:#f4f6f5;
  -webkit-text-size-adjust:100%;
  padding-bottom:120px;
}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  background:#fff;color:var(--verde-osc);padding:12px 16px;
  padding-top:calc(12px + env(safe-area-inset-top));
  box-shadow:0 2px 8px rgba(0,0,0,.06);border-bottom:3px solid var(--verde);
  position:sticky;top:0;z-index:500;
}
.topbar-logos{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px}
.logo-ayto{height:60px;width:auto;object-fit:contain;flex:0 0 auto}
.logo-mi{height:42px;width:auto;object-fit:contain;max-width:58%}
.topbar h1{font-size:1.12rem;line-height:1.15;text-align:center;margin:0;letter-spacing:.6px;font-weight:800;color:var(--verde-osc)}

/* ---------- Layout ---------- */
main{max-width:640px;margin:0 auto;padding:14px}
.card{
  background:#fff;border-radius:var(--radio);box-shadow:var(--sombra);
  padding:16px;margin-bottom:14px;
}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.card-head h2{font-size:1.05rem;margin:0;color:var(--verde-osc)}
.subhead{margin:14px 0 2px;font-size:.85rem;text-transform:uppercase;letter-spacing:.6px;color:var(--gris)}
.badge{background:var(--verde);color:#fff;border-radius:999px;padding:1px 9px;font-size:.85rem;margin-left:6px}

/* ---------- Form ---------- */
.grid{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.field{display:flex;flex-direction:column;gap:5px}
.field>span,legend{font-size:.82rem;font-weight:600;color:var(--gris)}
.field i{color:var(--rojo);font-style:normal}
.field-row{display:flex;gap:10px;flex-wrap:wrap}
.field-row .field{flex:1 1 120px;min-width:0}
.field{min-width:0}
input,select,textarea{
  font:inherit;padding:11px 12px;border:1.5px solid #d4dbd7;border-radius:10px;
  background:#fff;width:100%;max-width:100%;min-width:0;color:var(--txt);
}
/* date/time/file no encogen solos en móvil → forzar que respeten el ancho */
input[type="date"],input[type="time"],input[type="number"]{
  -webkit-appearance:none;appearance:none;
}
input[type="file"]{
  padding:9px 10px;font-size:.9rem;
}
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button{
  font:inherit;margin-right:8px;padding:7px 10px;border:1.5px solid #bcd8c7;
  border-radius:8px;background:var(--verde-claro);color:var(--verde-osc);font-weight:600;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px var(--verde-claro)}
textarea{resize:vertical}
fieldset.field{border:1.5px solid #e3e8e5;border-radius:12px;padding:12px}
legend{padding:0 6px}

/* Voluntarios */
.voluntario{display:flex;gap:8px;margin-bottom:8px;align-items:center;flex-wrap:wrap}
.voluntario input{flex:1 1 120px;min-width:0}
.voluntario .del{flex:0 0 auto;background:none;border:none;color:var(--rojo);font-size:1.3rem;cursor:pointer;padding:4px 8px}
.voluntario input.dni-mal{border-color:var(--rojo);box-shadow:0 0 0 3px rgba(192,57,43,.15)}
.voluntario input.dni-mal{background:#fdf3f2}

/* Sí/No */
.si-no{background:var(--gris-claro);border-radius:12px;padding:10px 12px}
.si-no-q{font-size:.9rem;font-weight:600;display:block;margin-bottom:6px}
.toggle{display:flex;gap:18px}
.toggle label{display:flex;align-items:center;gap:6px;font-size:.95rem}
.cond{margin-top:8px}

/* Checks */
.checks{display:flex;flex-direction:column;gap:8px}
.checks label{display:flex;align-items:center;gap:8px}
.checks input,.toggle input{width:auto}

/* GPS + mapa */
.gps-box{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gps-texto{font-size:.85rem;color:var(--gris)}
.gps-texto.ok{color:var(--verde);font-weight:600}
.mapa{height:200px;border-radius:12px;overflow:hidden;background:var(--gris-claro);display:none}
.mapa.activo{display:block}

/* Fotos */
.fotos-preview{display:flex;gap:8px;flex-wrap:wrap}
.fotos-preview .thumb{position:relative;width:74px;height:74px;border-radius:10px;overflow:hidden;border:1px solid #ddd}
.fotos-preview .thumb img{width:100%;height:100%;object-fit:cover}
.fotos-preview .thumb button{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:20px;height:20px;cursor:pointer;line-height:1;font-size:.8rem}

/* ---------- Botones ---------- */
.btn-primary{
  background:var(--verde);color:#fff;border:none;border-radius:12px;
  padding:14px;font-size:1rem;font-weight:700;cursor:pointer;width:100%;
}
.btn-primary:disabled{background:#b6c4bc;cursor:not-allowed}
.btn-primary:active:not(:disabled){background:var(--verde-osc)}
.btn-add-inc{margin:4px 0}
.btn-secondary{
  background:var(--verde-claro);color:var(--verde-osc);border:1.5px solid #bcd8c7;
  border-radius:10px;padding:10px 12px;font-weight:600;cursor:pointer;
}
.btn-link{background:none;border:none;color:var(--verde);font-weight:600;cursor:pointer;font-size:.9rem}
.btn-link.danger{color:var(--rojo)}

/* ---------- Resumen equipo ---------- */
.resumen{font-size:.92rem;line-height:1.5}
.resumen b{color:var(--verde-osc)}
.resumen .vol-list{margin:4px 0 0;padding-left:18px}

/* ---------- Lista incidencias ---------- */
.lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lista li{
  background:var(--verde-claro);border-radius:12px;padding:10px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.lista .inc-tit{font-weight:700;color:var(--verde-osc)}
.lista .inc-sub{font-size:.8rem;color:var(--gris);display:block}
.lista .inc-acciones{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.lista .inc-edit{background:none;border:none;font-size:1.15rem;cursor:pointer;padding:4px}
.lista .inc-del{background:none;border:none;color:var(--rojo);font-size:1.25rem;cursor:pointer;padding:4px}

/* ---------- Hint ---------- */
.hint{text-align:center;color:var(--gris);font-size:.85rem;margin:6px 0 0}

/* ---------- Sendbar ---------- */
.sendbar{
  position:fixed;bottom:0;left:0;right:0;z-index:600;
  background:#fff;box-shadow:0 -2px 12px rgba(0,0,0,.12);
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));
}
.sendbar-info{flex:1;display:flex;flex-direction:column}
.sendbar-info strong{color:var(--verde-osc)}
.sendbar-info small{color:var(--gris);font-size:.78rem}
.btn-send{
  background:var(--verde);color:#fff;border:none;border-radius:12px;
  padding:13px 22px;font-size:1rem;font-weight:700;cursor:pointer;white-space:nowrap;
}
.btn-send:disabled{background:#b6c4bc}

/* ---------- Firma ---------- */
.firma{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  text-align:center;padding:18px 16px 96px;margin-top:8px;
  position:relative;
}
.firma::before{
  content:"";display:block;width:54px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--verde),var(--tierra));
  margin-bottom:12px;opacity:.85;
}
.firma-linea{
  font-size:.86rem;color:var(--verde-osc);letter-spacing:.2px;
}
.firma-linea b{font-weight:800}
.firma-linea sup{font-size:.6em;font-weight:700;top:-.6em}
.firma-by{color:var(--gris);font-weight:400;font-style:italic;margin:0 2px}
.firma-sub{font-size:.74rem;color:var(--gris);letter-spacing:.3px}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:96px;transform:translateX(-50%);
  background:var(--txt);color:#fff;padding:12px 18px;border-radius:10px;
  font-size:.9rem;z-index:900;box-shadow:var(--sombra);max-width:90%;text-align:center;
}
.toast.ok{background:var(--verde)}
.toast.err{background:var(--rojo)}

/* Honeypot anti-bot (oculto para humanos) */
.hp{position:absolute !important;left:-9999px !important;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---------- Anti-desbordes ---------- */
html,body{overflow-x:hidden;max-width:100%}
main{width:100%}
.card{overflow:hidden}
fieldset.field{min-width:0}
.gps-box{min-width:0}
.gps-texto{overflow-wrap:anywhere;min-width:0}
.mapa{max-width:100%}
.resumen{overflow-wrap:anywhere}
.lista li>div{min-width:0;flex:1}
.lista .inc-tit,.lista .inc-sub{overflow-wrap:anywhere}
.checks label,.toggle label{overflow-wrap:anywhere}
.cond{min-width:0}

/* ---------- Modal de confirmación ---------- */
.modal{
  position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;padding:22px;
}
.modal[hidden]{display:none}
.modal-box{
  background:#fff;border-radius:16px;padding:22px;max-width:380px;width:100%;
  box-shadow:0 12px 44px rgba(0,0,0,.3);
}
.modal-box h3{margin:0 0 10px;color:var(--verde-osc);font-size:1.15rem}
.modal-box p{margin:0 0 10px;color:var(--txt);font-size:.96rem;line-height:1.5}
.modal-aviso{font-size:.85rem;color:var(--gris);background:var(--gris-claro);
  border-radius:10px;padding:9px 12px;margin:0 0 16px !important}
.modal-acciones{display:flex;gap:10px}
.modal-acciones .btn-secondary,.modal-acciones .btn-primary{flex:1;text-align:center}

/* ---------- Responsive ---------- */
img{max-width:100%}
@media (max-width:400px){
  .topbar h1{font-size:1rem;letter-spacing:.4px}
  .logo-ayto{height:50px}
  .logo-mi{height:34px;max-width:54%}
  .card{padding:13px}
  .card-head h2{font-size:1rem}
  .field-row{gap:8px}
  .field-row .field{min-width:100px}
  .toggle{gap:14px}
  .btn-send{padding:13px 16px}
  .sendbar{gap:8px;padding-left:12px;padding-right:12px}
}
@media (max-width:330px){
  .topbar h1{font-size:.92rem}
  .logo-ayto{height:44px}
  .logo-mi{height:30px}
  .field-row{flex-direction:column}
}

/* Leaflet z-index bajo control */
.leaflet-container{z-index:1}