:root {
  --azul: #1565c0; --azul-claro: #e3f0fc; --gris: #616161; --gris-claro: #f1f3f4; --rojo: #c62828; --naranja: #ef6c00;
  --pizarra: #37474f; --texto: #1f2328; --suave: #5f6368; --borde: #dadce0; --fondo: #ffffff; --sombra: 0 2px 10px rgba(0,0,0,.18);
  --marca: #0f4c81;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texto);
  background: var(--fondo); -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
button { cursor: pointer; }
h2 { font-size: 1.05rem; margin: 0; }
h3 { font-size: .95rem; margin: 14px 0 6px; }

/* login */
.login { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: linear-gradient(160deg, #0f4c81, #1e88e5); }
.login-caja { width: 100%; max-width: 360px; background: #fff; border-radius: 16px; padding: 28px 24px; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 14px; }
.login-caja label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--suave); }
.login-caja input { padding: 12px; border: 1px solid var(--borde); border-radius: 10px; font-size: 1rem; }
.marca { display: flex; align-items: center; gap: 10px; font-size: 1.6rem; font-weight: 600; color: var(--marca); margin-bottom: 6px; }
.marca img { width: 230px; height: auto; }
.marca-barra { width: 40px; height: 40px; flex: none; border-radius: 9px; box-shadow: var(--sombra); }
.primario { background: var(--marca); color: #fff; border: 0; border-radius: 10px; padding: 12px 16px; font-weight: 600; }
.secundario { background: #fff; color: var(--marca); border: 1px solid var(--marca); border-radius: 8px; padding: 6px 10px; }
.peligro { background: #fff; color: var(--rojo); border: 1px solid var(--rojo); border-radius: 8px; padding: 6px 10px; }
.error { color: var(--rojo); min-height: 1.2em; margin: 0; font-size: .9rem; }

/* mapa y barra */
#app { position: fixed; inset: 0; }
#mapa { position: absolute; inset: 0; }
.barra { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 16px; right: 16px; display: flex; gap: 8px;
  align-items: center; flex-wrap: wrap; pointer-events: none; }
.barra > * { pointer-events: auto; }
.buscador { flex: 1 1 320px; display: flex; background: #fff; border-radius: 24px; box-shadow: var(--sombra); overflow: hidden; min-width: 0; }
.buscador input { flex: 1; border: 0; padding: 12px 16px; font-size: 1rem; outline: none; min-width: 0; }
.acciones { display: flex; gap: 6px; }
.acciones select { border: 0; border-radius: 20px; padding: 0 10px; height: 40px; box-shadow: var(--sombra); background: #fff; }
.icono { width: 40px; height: 40px; border-radius: 20px; border: 0; background: #fff; box-shadow: var(--sombra); font-size: 1.05rem;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.buscador .icono { box-shadow: none; border-radius: 0; }

.tarjetas { position: absolute; left: 16px; right: 16px; top: calc(max(10px, env(safe-area-inset-top)) + 54px); display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; pointer-events: none; }
.tarjetas::-webkit-scrollbar { display: none; }
.tarjeta { pointer-events: auto; flex: 0 0 auto; background: #fff; border-radius: 12px; box-shadow: var(--sombra); padding: 8px 12px;
  min-width: 120px; max-width: 240px; }
.tarjeta .valor { font-size: 1.35rem; font-weight: 700; color: var(--marca); line-height: 1.1; }
.tarjeta .titulo { font-size: .75rem; color: var(--suave); }
.tarjeta .corte { font-size: .65rem; color: #9aa0a6; }
.tarjeta.texto { max-width: 280px; }
.tarjeta.texto .cuerpo { font-size: .82rem; }

.resultados { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 54px); left: 16px; right: 16px; max-width: 560px;
  margin: 0; padding: 4px 0; list-style: none; background: #fff; border-radius: 12px; box-shadow: var(--sombra); max-height: 50vh;
  overflow-y: auto; z-index: 5; }
.resultados li { padding: 10px 14px; border-bottom: 1px solid var(--gris-claro); cursor: pointer; }
.resultados li:last-child { border-bottom: 0; }
.resultados li small { display: block; color: var(--suave); }

/* ficha */
.ficha { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -2px 12px rgba(0,0,0,.2);
  max-height: 58vh; overflow-y: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); z-index: 6; }
.ficha .cerrar { position: absolute; right: 12px; top: 12px; box-shadow: none; background: var(--gris-claro); }
.semaforo { border-left: 8px solid var(--gris); padding: 4px 0 4px 12px; margin: 4px 40px 10px 0; }
.semaforo .estado { font-size: 1.2rem; font-weight: 700; }
.semaforo .lugar { color: var(--suave); font-size: .9rem; }
.e-con_agua { border-color: var(--azul); } .e-con_agua .estado { color: var(--azul); }
.e-tandeo { border-color: var(--gris); } .e-tandeo .estado { color: var(--gris); }
.e-zona_alta { border-color: var(--naranja); } .e-zona_alta .estado { color: var(--naranja); }
.e-fuera_zonas, .e-fuera_area, .e-sin_calendario { border-color: var(--pizarra); } .e-fuera_zonas .estado { color: var(--pizarra); }
.datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: .92rem; margin: 0; }
.datos dt { color: var(--suave); }
.datos dd { margin: 0; }
.partes { margin: 0; padding-left: 18px; }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 5px; margin-right: 6px; vertical-align: middle; }

/* paneles */
.panel { position: absolute; background: #fff; box-shadow: var(--sombra); z-index: 7; overflow-y: auto; padding: 14px 16px; }
.lateral { top: 0; right: 0; bottom: 0; width: min(340px, 100%); }
.admin { top: 0; right: 0; bottom: 0; width: min(460px, 100%); }
.panel-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.panel-cab .icono { box-shadow: none; background: var(--gris-claro); }
.capa { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--gris-claro); }
.capa input { width: 20px; height: 20px; }
.capa small { color: var(--suave); display: block; }
.leyenda { margin-top: 14px; font-size: .85rem; }
.leyenda div { margin: 4px 0; }
.caja-color { display: inline-block; width: 16px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: middle; border: 1px solid rgba(0,0,0,.15); }

table.cal { border-collapse: collapse; width: 100%; font-size: .82rem; }
table.cal th, table.cal td { border: 1px solid var(--borde); padding: 6px 3px; text-align: center; }
table.cal td.si { background: var(--azul-claro); color: var(--azul); }
table.cal td.no { background: #eceff1; color: var(--gris); font-weight: 600; }
table.cal .hoy { outline: 2px solid var(--marca); outline-offset: -2px; }
table.cal td.editable { cursor: pointer; }

.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 10px; overflow-x: auto; }
.pestanas button { border: 0; background: none; padding: 8px 10px; color: var(--suave); border-bottom: 3px solid transparent; white-space: nowrap; }
.pestanas button.activa { color: var(--marca); border-color: var(--marca); font-weight: 600; }
.item { border: 1px solid var(--borde); border-radius: 10px; padding: 10px; margin-bottom: 8px; font-size: .9rem; }
.item .fila { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.item small { color: var(--suave); }
.form { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 14px; }
.form input, .form select, .form textarea { padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; width: 100%; }
.form .linea { display: flex; gap: 8px; } .form .linea > * { flex: 1; }
.vacio { color: var(--suave); font-size: .9rem; }

.aviso { position: absolute; left: 50%; transform: translateX(-50%); bottom: 24px; background: #323232; color: #fff; padding: 10px 16px;
  border-radius: 8px; z-index: 20; max-width: calc(100% - 32px); font-size: .9rem; }
.marcador { width: 14px; height: 14px; border-radius: 7px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }

@media (max-width: 600px) {
  .buscador { flex: 1 1 calc(100% - 48px); }
  .acciones select { max-width: 110px; }
  .ficha { max-height: 62vh; }
}

/* quejas */
.punto-leyenda { display: inline-block; width: 12px; height: 12px; border-radius: 6px; margin-right: 8px; vertical-align: middle;
  box-sizing: border-box; border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.lista-quejas { list-style: none; margin: 8px 0 0; padding: 0; }
.lista-quejas li { padding: 10px 4px; border-bottom: 1px solid var(--gris-claro); cursor: pointer; }
.lista-quejas li small { display: block; color: var(--suave); }
.anillo-folio { width: 26px; height: 26px; border-radius: 13px; border: 3px solid #111; background: rgba(255,235,59,.35);
  box-shadow: 0 0 0 3px #fff; transform: translateY(13px); }

/* pipas en vivo */
.pipa-svg { line-height: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); cursor: pointer; }
.leyenda-pipa { display: inline-block; vertical-align: middle; margin-right: 6px; line-height: 0; }
.leyenda-pipa svg { width: 26px; height: 17px; }
.aviso-pipas { position: absolute; left: 10px; bottom: 34px; max-width: min(360px, calc(100% - 70px)); background: rgba(13,71,161,.92);
  color: #fff; font-size: .78rem; line-height: 1.3; padding: 6px 10px; border-radius: 8px; box-shadow: var(--sombra); z-index: 4; }
/* botones de la ficha de queja */
.botones-queja { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.botones-queja a { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; flex: 1 1 160px;
  padding: 10px 12px; border-radius: 10px; font-weight: 600; text-align: center; }

/* panel de capas agrupado */
.grupo-capas { margin-bottom: 14px; }
.grupo-capas h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--marca); margin: 12px 0 2px;
  padding-bottom: 4px; border-bottom: 2px solid var(--azul-claro); }
.capa .muestra { flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; }
.capa .muestra .caja-color { width: 22px; height: 14px; margin: 0; }
.capa .muestra .punto-leyenda { margin: 0; }
.capa .muestra .leyenda-pipa { margin: 0; }
.capa .texto { flex: 1 1 auto; min-width: 0; }
.capa .cuenta { flex: 0 0 auto; font-size: .9rem; color: var(--marca); }
.extra { padding: 4px 0 8px 64px; font-size: .78rem; color: var(--suave); }
.escala { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.escala .caja-color { margin-right: 4px; }
.pie-grupo { font-size: .78rem; color: var(--suave); padding: 6px 0 0 4px; }
.leyenda h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); margin: 4px 0 6px; }

/* descripción larga del reporte: recortada, se abre al tocarla */
.recorte { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.recorte.abierta { display: block; }

/* iPad y pantallas grandes: buscador corto y ficha como tarjeta flotante abajo a la derecha (como Google Maps) */
@media (min-width: 700px) {
  .buscador { flex: 0 1 420px; max-width: 420px; }
  .acciones { margin-left: auto; }
  .tarjetas { right: auto; max-width: calc(100% - 32px); }
  .resultados { max-width: 460px; }
  .ficha { left: auto; right: 16px; bottom: 24px; width: 380px; max-height: 60vh; border-radius: 16px;
    box-shadow: var(--sombra); padding: 14px 14px 14px; }
  .ficha .semaforo .estado { font-size: 1.05rem; }
  .ficha .semaforo .lugar { font-size: .82rem; }
  .ficha p { font-size: .88rem; margin: 6px 0; }
  .ficha .datos { font-size: .85rem; gap: 4px 10px; }
  .ficha h2 { font-size: 1rem; }
  .ficha h3 { font-size: .88rem; }
  .ficha .botones-queja a { flex: 1 1 140px; padding: 8px 10px; font-size: .88rem; }
  /* con el panel de Capas o Calendario abierto, la tarjeta se recorre a su izquierda */
  .lateral:not([hidden]) ~ .ficha { right: 356px; }
}

/* resultados de búsqueda numerados */
.marcador-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 12px;
  background: #5e35b1; color: #fff; font-size: .78rem; font-weight: 700; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); flex: 0 0 auto; }
.resultados li { display: flex; gap: 10px; align-items: center; }
.leyenda-num { width: 18px; height: 18px; font-size: .65rem; margin-right: 8px; vertical-align: middle; }

/* lista de reportes a pantalla completa */
.vista-reportes { position: absolute; inset: 0; z-index: 30; background: #f6f8fa; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.vr-cabecera { position: sticky; top: 0; z-index: 2; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08);
  padding: max(10px, env(safe-area-inset-top)) 16px 10px; }
.vr-titulo { display: flex; align-items: center; gap: 12px; max-width: 980px; margin: 0 auto 8px; }
.vr-titulo h2 { font-size: 1.15rem; color: var(--marca); }
.vr-total { color: var(--suave); font-size: .9rem; flex: 1; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; max-width: 980px; margin: 0 auto; font-size: .9rem; }
.filtros select, .filtros input[type=search] { padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; }
.filtros input[type=search] { flex: 1 1 260px; min-width: 0; }
.filtros label { display: inline-flex; align-items: center; gap: 6px; color: var(--texto); }
.filtros input[type=checkbox] { width: 18px; height: 18px; }
.vr-lista { max-width: 760px; margin: 0 auto; padding: 14px 16px 40px; }
.tarjeta-reporte { background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.12); padding: 12px 14px; margin-bottom: 12px;
  border-left: 5px solid var(--naranja); }
.tarjeta-reporte.es-hoy { border-left-color: var(--rojo); }
.tr-cab { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: .92rem; }
.tr-cab .tenue { color: var(--suave); font-size: .82rem; }
.tr-folio { margin-left: auto; color: var(--suave); font-size: .82rem; }
.etiqueta { font-size: .72rem; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.etiqueta.abierto { background: #fdecea; color: var(--rojo); }
.etiqueta.cerrado { background: var(--gris-claro); color: var(--gris); }
.etiqueta.pipa { background: #e8f5e9; color: #2e7d32; }
.tr-lugar { margin-top: 4px; font-size: .9rem; color: var(--pizarra); }
.tr-dir { font-size: .85rem; color: var(--suave); }
.sin-punto { color: var(--naranja); font-weight: 600; }
.tr-texto { font-size: 1.02rem; line-height: 1.45; margin: 8px 0 4px; white-space: pre-line; }
.botones-queja button { flex: 1 1 140px; padding: 8px 10px; border-radius: 10px; font-weight: 600; }
.vr-mas { display: block; margin: 8px auto; padding: 10px 18px; }