/* ReportaGT - estilos. Todos los valores salen de las variables de :root. */
:root {
  /* Paleta (combina con el logo y con la Municipalidad de Villa Canales) */
  --marino: #051B3F;          /* títulos y textos fuertes */
  --verde-logo: #1F9D3A;      /* solo logo y detalles grandes (no para botones con texto pequeño) */
  --verde: #15803D;           /* botones, enlaces y textos verdes (5:1 con blanco) */
  --verde-claro: #E8F5EC;     /* fondos suaves */
  --pizarra: #334155;         /* texto normal */
  --primario: var(--verde);
  --primario-oscuro: #0F5F2D; /* al pasar el mouse y en el foco */
  --texto: var(--pizarra);
  --texto-suave: #475569;
  --fondo: var(--verde-claro);
  --superficie: #ffffff;
  --borde: #c3dfcc;
  --error: #b42318;
  /* Colores de estado (siempre van con texto e icono) */
  --pendiente-fg: #a12116;  --pendiente-bg: #fde8e6;
  --proceso-fg: #7a4100;    --proceso-bg: #fff1cf;
  --resuelto-fg: #116329;   --resuelto-bg: #d9f5e1;
  /* Espacios (múltiplos de 4 u 8) y radios */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;
  --radio: 8px; --radio-grande: 12px;
  --sombra: 0 1px 3px rgba(22, 48, 43, .12);
  --rapido: 150ms;
}

* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; background: var(--fondo); color: var(--texto); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--e3); color: var(--marino); }
h1 { font-size: 1.75rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
a { color: var(--primario); }
small, .ayuda { color: var(--texto-suave); }
.ayuda { font-size: .9rem; margin: var(--e1) 0; }

/* Foco visible con teclado en todo lo interactivo */
:focus-visible { outline: 3px solid var(--primario-oscuro); outline-offset: 2px; }

/* Encabezado: fondo blanco con el logo a color */
header { background: #fff; border-bottom: 4px solid var(--marino); padding: var(--e2) var(--e5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e5); }
.logo { display: inline-flex; align-items: center; min-height: 44px; border-radius: var(--radio); }
.logo img { height: 36px; width: auto; display: block; }
nav { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); }
nav a { color: var(--marino); text-decoration: none; padding: var(--e2) 0; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 3px solid transparent; font-weight: 600; }
nav a[aria-current="page"], nav a:hover { border-bottom-color: var(--verde); }
.logo-pagina { display: block; height: 32px; width: auto; margin: 0 auto var(--e4); }
.logo-login { display: block; width: 220px; max-width: 80%; height: auto; margin: 0 auto var(--e5); }

main { max-width: 1040px; margin: var(--e5) auto; padding: 0 var(--e4); }
main.ancho { max-width: 1200px; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: var(--e5); margin-bottom: var(--e5); box-shadow: var(--sombra); }

/* Formularios */
label { display: block; font-weight: 600; margin: var(--e4) 0 var(--e1); }
input, select, textarea { width: 100%; min-height: 44px; padding: var(--e2) var(--e3); border: 1px solid #7d9a90; border-radius: var(--radio); font: inherit; color: var(--texto); background: #fff; }
textarea { min-height: 96px; resize: vertical; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.error-campo { color: var(--error); font-size: .9rem; min-height: 1.2em; margin: var(--e1) 0 0; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--e5); }
legend { font-size: 1.1rem; font-weight: 700; padding: 0; margin-bottom: var(--e2); display: flex; align-items: center; gap: var(--e2); }
.paso { background: var(--primario); color: #fff; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .9rem; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
.contador { text-align: right; font-size: .85rem; color: var(--texto-suave); margin: var(--e1) 0 0; }

/* Botones (táctiles de al menos 44 px) */
button { font: inherit; cursor: pointer; min-height: 44px; padding: var(--e2) var(--e4); border-radius: var(--radio); border: 1px solid var(--primario); background: var(--primario); color: #fff; font-weight: 600; transition: background var(--rapido); }
button:hover:not(:disabled) { background: var(--primario-oscuro); }
button:disabled { opacity: .6; cursor: not-allowed; }
button.sec { background: #fff; color: var(--primario); }
button.sec:hover:not(:disabled) { background: var(--fondo); }
button.peligro { background: var(--error); border-color: var(--error); }
button.enlace { background: none; border: 0; color: var(--primario); text-decoration: underline; padding: var(--e2); min-height: 44px; }

/* Mensajes */
.msg { padding: var(--e3) var(--e4); border-radius: var(--radio); margin: var(--e4) 0; border: 1px solid; }
.msg:empty { display: none; }
.msg.ok { background: var(--resuelto-bg); border-color: #8fd19e; }
.msg.error { background: var(--pendiente-bg); border-color: #f0a0a0; }
.msg.aviso { background: var(--proceso-bg); border-color: #f0cf72; }

/* Insignias de estado: color + icono + texto (no son botones) */
.insignia { display: inline-flex; align-items: center; gap: var(--e1); padding: 2px var(--e3); border-radius: 999px; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.insignia.pendiente { background: var(--pendiente-bg); color: var(--pendiente-fg); }
.insignia.en-proceso { background: var(--proceso-bg); color: var(--proceso-fg); }
.insignia.resuelto { background: var(--resuelto-bg); color: var(--resuelto-fg); }

/* Mapas */
#mapa, #mapa-reportes { height: 380px; border-radius: var(--radio); border: 1px solid var(--borde); }
.pin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 3px #000; }
.pin.activo { width: 24px; height: 24px; margin: -4px 0 0 -4px; }
.leyenda { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); margin: var(--e2) 0; font-size: .9rem; }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: var(--e1); }
.miniatura { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radio); border: 1px solid var(--borde); }

/* Tablas */
.scroll-x { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: var(--e2); border-bottom: 1px solid var(--borde); vertical-align: top; }
td.calor { text-align: center; font-weight: 700; }

/* Filtros y chips */
.barra { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: end; }
.barra > div { flex: 1 1 160px; }
.barra label { margin-top: 0; font-size: .9rem; }
.chips { display: flex; flex-wrap: wrap; gap: var(--e2); }
.chip { display: inline-flex; align-items: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e3); border: 1px solid #7d9a90; border-radius: 999px; background: #fff; cursor: pointer; font-weight: 600; margin: 0; }
.chip input { width: 18px; min-height: 18px; margin: 0; }
.chip:has(input:checked) { background: var(--primario); border-color: var(--primario); color: #fff; }
.chip:has(input:focus-visible) { outline: 3px solid var(--primario-oscuro); outline-offset: 2px; }

/* Contadores del panel */
.contadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e3); margin-bottom: var(--e5); }
.contador-caja { background: var(--superficie); color: var(--texto); border: 2px solid var(--borde); text-align: left; padding: var(--e3) var(--e4); border-radius: var(--radio-grande); display: block; }
.contador-caja:hover:not(:disabled) { background: var(--superficie); border-color: var(--primario); }
.contador-caja[aria-pressed="true"] { border-color: var(--primario); background: var(--verde-claro); }
.contador-caja strong { display: block; font-size: 1.8rem; line-height: 1.1; }

/* Lista de reportes del panel */
.lista { list-style: none; margin: 0; padding: 0; }
.fila { display: grid; grid-template-columns: 28px 64px 90px 1fr 100px 110px 150px; gap: var(--e3); align-items: center; padding: var(--e2) var(--e3); border-bottom: 1px solid var(--borde); background: var(--superficie); }
.fila:hover { background: #f6fbf8; }
.fila.encabezado-lista { font-weight: 700; font-size: .85rem; color: var(--texto-suave); background: transparent; }
.fila .abrir { all: unset; cursor: pointer; display: block; min-height: 44px; line-height: 1.3; padding: var(--e1) 0; }
.fila .abrir:focus-visible { outline: 3px solid var(--primario-oscuro); outline-offset: 2px; }
.una-linea { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila input[type=checkbox] { width: 20px; min-height: 20px; }

/* Panel lateral de detalle */
.cortina { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 900; }
.lateral { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100%); background: var(--superficie); z-index: 1000; overflow-y: auto; padding: var(--e5); box-shadow: -4px 0 16px rgba(0, 0, 0, .2); }
.lateral[hidden], .cortina[hidden] { display: none; }
.lateral .foto-grande { width: 100%; max-height: 240px; object-fit: cover; border-radius: var(--radio); cursor: zoom-in; border: 0; }
#mapa-detalle { height: 180px; border-radius: var(--radio); border: 1px solid var(--borde); margin: var(--e3) 0; }
.datos { display: grid; grid-template-columns: 110px 1fr; gap: var(--e1) var(--e3); margin: var(--e3) 0; }
.datos dt { color: var(--texto-suave); } .datos dd { margin: 0; font-weight: 600; }
.segmentado { display: flex; border: 1px solid var(--primario); border-radius: var(--radio); overflow: hidden; }
.segmentado button { flex: 1; border: 0; border-radius: 0; background: #fff; color: var(--primario); }
.segmentado button + button { border-left: 1px solid var(--primario); }
.segmentado button[aria-pressed="true"] { background: var(--primario); color: #fff; }
.visor { position: fixed; inset: 0; background: rgba(0, 0, 0, .85); z-index: 1100; display: grid; place-items: center; padding: var(--e4); }
.visor[hidden] { display: none; }
.visor img { max-width: 100%; max-height: 100%; border-radius: var(--radio); }
dialog { border: 0; border-radius: var(--radio-grande); padding: var(--e5); max-width: 420px; box-shadow: 0 8px 32px rgba(0, 0, 0, .3); }
dialog::backdrop { background: rgba(0, 0, 0, .4); }
.acciones { display: flex; gap: var(--e3); justify-content: flex-end; margin-top: var(--e4); flex-wrap: wrap; }
.lote { background: var(--verde-claro); border: 1px solid var(--primario); border-radius: var(--radio); padding: var(--e3) var(--e4); margin-bottom: var(--e3); display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.lote select { width: auto; }
.cabecera-panel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e3); margin-bottom: var(--e4); }
.cabecera-panel .acciones { margin: 0; align-items: center; }
.vacio { text-align: center; padding: var(--e6) var(--e4); color: var(--texto-suave); }
.cargando::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: var(--e2); border: 3px solid var(--borde); border-top-color: var(--primario); border-radius: 50%; animation: giro .8s linear infinite; vertical-align: -3px; }
@keyframes giro { to { transform: rotate(360deg); } }

/* Éxito del formulario y vista previa de foto */
.exito { text-align: center; }
.numero-grande { font-size: 2.75rem; font-weight: 800; color: var(--primario); letter-spacing: 1px; margin: var(--e3) 0; }
.vista-previa { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e2); }
.vista-previa img { max-width: 120px; max-height: 90px; border-radius: var(--radio); border: 1px solid var(--borde); }
.lista-publica .fila-pub { cursor: pointer; }
.fila-pub[aria-selected="true"] td { background: var(--verde-claro); }

/* Celular: filas en tarjetas, detalle a pantalla completa */
@media (max-width: 760px) {
  .logo img { height: 30px; }
  header { padding: var(--e2) var(--e4); }
  .dos { grid-template-columns: 1fr; }
  .contadores { grid-template-columns: repeat(2, 1fr); }
  .tarjeta { padding: var(--e4); }
  .fila.encabezado-lista { display: none; }
  .fila { grid-template-columns: 28px 1fr auto; grid-template-areas: "chk num estado" "chk desc desc" "chk sector edad"; row-gap: var(--e1); border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: var(--e2); }
  .fila > :nth-child(1) { grid-area: chk; align-self: start; }
  .fila > :nth-child(2) { display: none; }
  .fila > :nth-child(3) { grid-area: num; font-weight: 700; }
  .fila > :nth-child(4) { grid-area: desc; }
  .fila > :nth-child(5) { grid-area: sector; font-size: .85rem; color: var(--texto-suave); }
  .fila > :nth-child(6) { grid-area: edad; font-size: .85rem; color: var(--texto-suave); text-align: right; }
  .fila > :nth-child(7) { grid-area: estado; }
  .lateral { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Enlace con aspecto de botón */
.boton-enlace { display: inline-flex; align-items: center; min-height: 44px; padding: var(--e2) var(--e4); border: 1px solid var(--primario); border-radius: var(--radio); background: #fff; color: var(--primario); font-weight: 600; text-decoration: none; }
.boton-enlace:hover { background: var(--fondo); }
[hidden] { display: none !important; }