/* Colombia en Pie — estilo.css
   Paleta: azul profundo #0B2E63 (base), amarillo bandera #F5C400 (acento puntual),
   rojo #C8102E (solo urgencia), verde #1B7F3B (abastecido), fondo #FFFFFF / #F4F6FA */

:root {
  --azul: #0B2E63;
  --azul-claro: #E9EFF9;
  --amarillo: #F5C400;
  --rojo: #C8102E;
  --verde: #1B7F3B;
  --ambar: #B97800;
  --tinta: #16213A;
  --gris: #5B6474;
  --fondo: #F4F6FA;
  --blanco: #FFFFFF;
  --radio: 12px;
  --sombra: 0 2px 10px rgba(11, 46, 99, .08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
  line-height: 1.55;
  font-size: 17px;
}

.contenedor { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* Franja tricolor: firma visual del sitio */
.franja-tricolor { display: flex; height: 6px; }
.franja-tricolor span { display: block; height: 100%; }
.f-amarillo { background: var(--amarillo); flex: 2; }
.f-azul     { background: var(--azul);     flex: 1; }
.f-rojo     { background: var(--rojo);     flex: 1; }

/* Cabecera */
.cabecera { background: var(--blanco); box-shadow: var(--sombra); position: sticky; top: 0; z-index: 50; }
.cabecera-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.marca { font-size: 1.3rem; color: var(--azul); text-decoration: none; letter-spacing: -.02em; }
.marca strong { font-weight: 800; }
.nav { display: flex; gap: 8px; flex-wrap: wrap; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 700; font-size: .95rem; text-decoration: none; transition: transform .1s ease, opacity .15s;
}
.btn:hover { opacity: .92; }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.btn-principal { background: var(--azul); color: #fff; }
.btn-secundario { background: var(--azul-claro); color: var(--azul); }
.btn-busca { background: var(--amarillo); color: var(--tinta); }
.btn-llamar { background: var(--verde); color: #fff; }
.btn-mapa { background: var(--azul-claro); color: var(--azul); }
.btn-actualizar { background: transparent; color: var(--azul); border: 1.5px solid var(--azul); }
.btn-eliminar { background: var(--rojo); color: #fff; }
.btn-grande { padding: 14px 24px; font-size: 1.05rem; width: 100%; }

/* Héroe */
.heroe { background: var(--azul); color: #fff; padding: 44px 0 36px; }
.heroe h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; }
.heroe h1 em { font-style: normal; color: var(--amarillo); }
.heroe-sub { margin-top: 10px; max-width: 640px; color: #D7E1F2; }
.ultima-act { margin-top: 18px; background: rgba(255,255,255,.1); display: inline-block; padding: 8px 14px; border-radius: 999px; font-size: .92rem; }
.ultima-act a { color: var(--amarillo); }

/* Líneas de emergencia */
.emergencias { background: var(--blanco); padding: 26px 0; border-bottom: 1px solid #E3E8F1; }
.titulo-seccion { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .08em; color: var(--azul); margin-bottom: 14px; }
.lineas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.linea {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--azul-claro); border-radius: var(--radio); padding: 12px 14px;
  text-decoration: none; color: var(--tinta); font-size: .88rem;
}
.linea .num { font-size: 1.5rem; font-weight: 800; color: var(--rojo); }
.linea:hover { background: #DCE6F7; }
.linea-destacada { background: #EAF6EE; border: 1.5px solid #BFE3CC; }
.linea-destacada .num { color: var(--verde); }
.linea-destacada:hover { background: #DDF0E4; }

/* Autocompletado de dirección y mini-mapa del formulario */
.campo-direccion { position: relative; }
.sugerencias {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
  background: var(--blanco); border: 1.5px solid #C9D3E4; border-top: 0;
  border-radius: 0 0 var(--radio) var(--radio); box-shadow: var(--sombra);
  max-height: 240px; overflow-y: auto;
}
.sugerencia {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 11px 14px; font-size: .93rem; cursor: pointer; color: var(--tinta);
  border-bottom: 1px solid #EEF1F7; font-family: inherit;
}
.sugerencia:hover, .sugerencia:focus { background: var(--azul-claro); }
.sugerencia-aviso { cursor: default; color: var(--gris); font-style: italic; }
.sugerencia-aviso:hover { background: transparent; }
.bloque-ubicacion { border: 1.5px solid #C9D3E4; border-radius: var(--radio); padding: 14px; display: grid; gap: 8px; }
.ubicacion-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ubicacion-titulo { font-weight: 700; font-size: .95rem; }
.btn-chico { padding: 7px 12px; font-size: .85rem; }
#mini-mapa { height: 260px; border-radius: 8px; z-index: 1; }
.estado-ubicacion { font-size: .85rem; color: var(--gris); }

/* Contadores de impacto */
.impacto { background: var(--blanco); border-bottom: 1px solid #E3E8F1; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 18px 16px; }
@media (min-width: 760px) { .cifras { grid-template-columns: repeat(6, 1fr); } }
.cifra { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 8px 4px; }
.cifra-num { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; color: var(--azul); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cifra-txt { font-size: .78rem; color: var(--gris); line-height: 1.25; }

/* Crédito de autor */
.pie-autor { background: #081F45; padding: 12px 0; }
.pie-autor p { font-size: .82rem; color: #9FB2D4; text-align: center; }
.pie-autor strong { color: #fff; }

/* Mapa */
.mapa-seccion { background: var(--blanco); padding: 30px 0 34px; border-bottom: 1px solid #E3E8F1; }
#mapa-centros { height: 420px; border-radius: var(--radio); box-shadow: var(--sombra); z-index: 1; }
@media (max-width: 600px) { #mapa-centros { height: 340px; } }
.ayuda-mapa { color: var(--gris); font-size: .92rem; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.leyenda { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tinta); }
.pto { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-left: 8px; border: 2px solid #fff; box-shadow: 0 0 0 1px #C9D3E4; }
.p-rojo { background: var(--rojo); } .p-amarillo { background: #E8A200; }
.p-verde { background: var(--verde); } .p-gris { background: #8A8F99; }
.popup-centro { font-size: .92rem; line-height: 1.5; min-width: 200px; }
.pop-lleno { color: #555; font-weight: 700; }
.pop-activo { color: var(--verde); font-weight: 700; }
.popup-botones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.popup-botones a {
  background: var(--azul); color: #fff; text-decoration: none; font-weight: 700;
  padding: 6px 10px; border-radius: 999px; font-size: .82rem;
}
.popup-botones a:first-child { background: var(--verde); }
.popup-botones a:last-child { background: #33CCFF; color: #063; color: #04314F; }
.btn-waze { background: #D5F1FB; color: #04314F; }

/* Directorio */
main.contenedor { padding: 34px 16px 40px; }
.filtros { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 24px; }
.filtros input, .filtros select, .formulario input, .formulario select, .formulario textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid #C9D3E4; border-radius: var(--radio);
  font-size: 1rem; background: var(--blanco); color: var(--tinta); font-family: inherit;
}
.filtros input:focus, .filtros select:focus, .formulario input:focus, .formulario select:focus, .formulario textarea:focus {
  outline: 3px solid rgba(245,196,0,.5); border-color: var(--azul);
}
@media (min-width: 760px) { .filtros { grid-template-columns: 2fr 1.2fr 1fr 1.2fr auto; } }

.tarjetas { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .tarjetas { grid-template-columns: 1fr 1fr; } }

.tarjeta { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.tarjeta-llena { opacity: .72; }
.tarjeta h3 { font-size: 1.2rem; color: var(--azul); letter-spacing: -.01em; }
.tarjeta-cab { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: .8rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.chip-punto::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: currentColor; vertical-align: 1px; }
.urg-rojo     { background: #FBE3E7; color: var(--rojo); }
.urg-amarillo { background: #FBF3D2; color: var(--ambar); }
.urg-verde    { background: #E1F3E7; color: var(--verde); }
.chip-lleno   { background: #ECECEC; color: #555; }
.chip-activo  { background: #E1F3E7; color: var(--verde); }
.ubica { color: var(--gris); font-size: .95rem; }
.dato { font-size: .95rem; }
.notas { color: var(--gris); font-style: italic; }
.act-tarjeta { font-size: .8rem; color: var(--gris); margin-top: auto; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

.vacio { text-align: center; background: var(--blanco); border-radius: var(--radio); padding: 40px 20px; box-shadow: var(--sombra); display: grid; gap: 14px; justify-items: center; }

/* Guía de donación */
.guia { background: var(--blanco); padding: 34px 0; border-top: 1px solid #E3E8F1; }
.guia-cols { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 700px) { .guia-cols { grid-template-columns: 1fr 1fr; } }
.guia ul { padding-left: 20px; display: grid; gap: 6px; }

/* Formulario de reporte */
.formulario-pagina h1 { color: var(--azul); font-size: clamp(1.5rem, 4vw, 2.1rem); margin-bottom: 6px; }
.ayuda { color: var(--gris); margin-bottom: 20px; }
.ayuda.pequeña { font-size: .85rem; margin-top: 10px; text-align: center; }
.formulario { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 22px; display: grid; gap: 16px; max-width: 720px; }
.formulario label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.fila { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .fila { grid-template-columns: 1fr 1fr; } }
.oculto { position: absolute; left: -9999px; opacity: 0; height: 0; }
.alerta { background: #FBE3E7; color: var(--rojo); border-radius: var(--radio); padding: 14px 16px; margin-bottom: 16px; display: grid; gap: 4px; }
.exito { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 34px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.exito h1 { color: var(--verde); }

/* Admin */
.tabla-admin { display: grid; gap: 10px; }
.fila-admin { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 14px 16px; display: grid; gap: 10px; }
@media (min-width: 760px) { .fila-admin { grid-template-columns: 1fr auto; align-items: center; } }
.fila-admin small { color: var(--gris); }
.fila-admin form { display: inline; }

/* Pie de página */
.pie { background: var(--azul); color: #D7E1F2; margin-top: 0; }
.pie-inner { padding: 26px 16px; display: grid; gap: 20px; }
@media (min-width: 700px) { .pie-inner { grid-template-columns: 1fr auto; align-items: center; } }
.marca-pie { font-size: 1.2rem; color: #fff; margin-bottom: 6px; }
.pie-texto { font-size: .88rem; max-width: 560px; }
.pie-texto a { color: var(--amarillo); }
.apoyo { display: grid; gap: 8px; justify-items: start; }
.logo-apoyo { max-height: 96px; max-width: 300px; background: #fff; border-radius: 8px; padding: 6px 10px; }