/* ==========================================================================
   Red de Ayuda VE — estilos
   Paleta institucional de Venezuela + diseño limpio tipo app
   ========================================================================== */

.rav {
	--rav-azul: #1B5FD4;        /* Azul de acción (botones) */
	--rav-azul-ve: #003DA5;     /* Azul bandera */
	--rav-azul-prof: #0A1F44;
	--rav-oro: #FFC400;
	--rav-rojo: #CE1126;
	--rav-verde: #15803D;
	--rav-tinta: #1A2330;
	--rav-tenue: #6B7480;
	--rav-linea: #E6E9EF;
	--rav-fondo: #FFFFFF;
	--rav-gris: #F5F7FA;

	font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--rav-tinta);
	background: var(--rav-fondo);
	border: 1px solid var(--rav-linea);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 12px 34px rgba(10, 31, 68, 0.08);
	display: flex;
	flex-direction: column;
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
}
.rav *, .rav *::before, .rav *::after { box-sizing: border-box; }
.rav button { font-family: inherit; }

/* --- Banner conexión --- */
.rav-banner { font-size: 13.5px; font-weight: 600; text-align: center; padding: 8px 14px; }
.rav-banner[data-estado="offline"] { background: var(--rav-oro); color: var(--rav-azul-prof); }
.rav-banner[data-estado="online"] { background: var(--rav-verde); color: #fff; }

/* --- Barra de contadores --- */
.rav-stats {
	display: grid;
	grid-template-columns: repeat(9, minmax(86px, 1fr));
	gap: 8px;
	padding: 14px;
	overflow-x: auto;
	scrollbar-width: thin;
}
.rav-stat {
	border: 1px solid var(--rav-linea);
	border-radius: 12px;
	padding: 10px 8px;
	text-align: center;
	min-width: 86px;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}
.rav-stat--skel { height: 78px; background: linear-gradient(90deg,#f0f2f6,#f7f9fc,#f0f2f6); animation: ravsk 1.2s infinite; }
@keyframes ravsk { 0%{opacity:.6} 50%{opacity:1} 100%{opacity:.6} }
.rav-stat__e { font-size: 16px; line-height: 1; }
.rav-stat__n { font-size: 21px; font-weight: 800; letter-spacing: -.5px; }
.rav-stat__l { font-size: 11px; color: var(--rav-tenue); line-height: 1.1; }
.rav-stat__of { font-size: 9px; font-weight: 800; letter-spacing: .6px; color: var(--rav-tenue); border: 1px solid var(--rav-linea); border-radius: 4px; padding: 0 4px; margin-top: 2px; }

.rav-upd { margin: 0; padding: 0 16px 10px; font-size: 12px; color: var(--rav-tenue); }
.rav-upd__dot { color: var(--rav-verde); font-weight: 700; }

/* --- Contenido --- */
.rav-main { flex: 1; min-height: 0; }
.rav-vista[hidden] { display: none; }
.rav--solo .rav-main { display: flex; }

/* --- Pills de capas --- */
.rav-pills {
	display: flex;
	gap: 8px;
	padding: 6px 14px 12px;
	overflow-x: auto;
	scrollbar-width: thin;
}
.rav-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	border: 1.5px solid var(--c);
	color: var(--c);
	background: #fff;
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .12s, color .12s;
}
.rav-pill[data-on="1"] { background: var(--c); color: #fff; }
.rav-pill__e { font-size: 14px; }

/* --- Mapa --- */
.rav-mapwrap { position: relative; padding: 0 14px 14px; }
.rav-map {
	height: var(--rav-alto, 600px);
	min-height: 320px;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: #dfe6ea;
	border: 1px solid var(--rav-linea);
}
.rav-map .leaflet-container { height: 100%; width: 100%; font: inherit; background: #dfe6ea; }

.rav-fab {
	position: sticky;
	bottom: 14px;
	display: block;
	width: calc(100% - 0px);
	margin-top: 12px;
	background: var(--rav-azul);
	color: #fff;
	border: 0;
	border-radius: 12px;
	padding: 14px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(27, 95, 212, .35);
}
.rav-fab:hover { filter: brightness(1.05); }

/* --- Marcadores --- */
.rav-pin {
	display: grid; place-items: center;
	width: 30px; height: 30px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,.35);
	font-size: 14px;
}
.rav-pin > span { transform: rotate(45deg); }
.rav-quake {
	display:grid; place-items:center;
	width: 34px; height: 34px; border-radius: 50%;
	background: rgba(206,17,38,.85); color:#fff;
	font-weight: 800; font-size: 12px; border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

/* --- Popups --- */
.rav-pop { min-width: 200px; }
.rav-pop__cab { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rav-pop__e { font-size: 18px; }
.rav-pop__t { font-weight: 700; font-size: 15px; color: var(--rav-azul-prof); }
.rav-pop__badge { display:inline-block; font-size: 11px; font-weight: 700; color:#fff; padding: 2px 8px; border-radius: 999px; margin: 2px 0 6px; }
.rav-pop__x { font-size: 13px; margin: 3px 0; }
.rav-pop__d { font-size: 12.5px; color: var(--rav-tenue); margin: 2px 0; }
.rav-pop__d a { color: var(--rav-azul); text-decoration: none; font-weight: 600; }

/* --- Bloques de contenido (Info / Ayuda / Buscar) --- */
.rav-bloque { padding: 18px 16px; border-top: 8px solid var(--rav-gris); }
.rav-bloque:first-child { border-top: 0; }
.rav-h2 { margin: 0 0 4px; font-size: 19px; color: var(--rav-azul-prof); }
.rav-h3 { margin: 16px 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .8px; color: var(--rav-tenue); }
.rav-sub { margin: 0 0 12px; font-size: 13.5px; color: var(--rav-tenue); line-height: 1.45; }
.rav-nota { font-size: 12.5px; color: var(--rav-tenue); font-style: italic; margin: 10px 0 0; }

/* --- Listas (hospitales, teléfonos) --- */
.rav-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rav-lista--cols { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.rav-item { border: 1px solid var(--rav-linea); border-radius: 10px; padding: 10px 12px; background: #fff; }
.rav-item__nom { font-weight: 600; font-size: 14px; }
.rav-item__zona { font-weight: 400; color: var(--rav-tenue); }
.rav-item__tels { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.rav-item__tels a { color: var(--rav-azul); text-decoration: none; font-weight: 700; font-size: 14px; }
.rav-item__tels a:hover { text-decoration: underline; }

/* --- Sismos --- */
.rav-sismos { display: grid; gap: 8px; }
.rav-sismo {
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
	border: 1px solid var(--rav-linea); border-radius: 10px; padding: 10px 12px; background: #fff;
}
.rav-sismo--skel { height: 56px; background: linear-gradient(90deg,#f0f2f6,#f7f9fc,#f0f2f6); animation: ravsk 1.2s infinite; }
.rav-sismo__mag {
	font-size: 18px; font-weight: 800; color:#fff; border-radius: 10px;
	width: 52px; height: 44px; display: grid; place-items: center;
}
.rav-sismo__lugar { font-size: 14px; font-weight: 600; }
.rav-sismo__tiempo { font-size: 12px; color: var(--rav-tenue); }
.rav-sismo__ir { font-size: 12px; color: var(--rav-azul); text-decoration: none; font-weight: 700; white-space: nowrap; }

/* --- Guía numerada --- */
.rav-guia { margin: 0; padding-left: 0; list-style: none; counter-reset: g; display: grid; gap: 8px; }
.rav-guia li {
	counter-increment: g; position: relative; padding: 10px 12px 10px 44px;
	border: 1px solid var(--rav-linea); border-radius: 10px; font-size: 14px; line-height: 1.4;
}
.rav-guia li::before {
	content: counter(g); position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
	width: 24px; height: 24px; border-radius: 50%; background: var(--rav-azul-ve); color:#fff;
	display: grid; place-items: center; font-weight: 800; font-size: 13px;
}

/* --- Hub de Ayuda --- */
.rav-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.rav-card {
	text-align: left; border: 1px solid var(--rav-linea); border-radius: 12px;
	padding: 14px; background: #fff; cursor: pointer; display: grid; gap: 4px; transition: box-shadow .15s, transform .08s;
}
.rav-card:hover { box-shadow: 0 6px 16px rgba(10,31,68,.1); transform: translateY(-1px); }
.rav-card__e { font-size: 22px; }
.rav-card__t { font-weight: 700; font-size: 15px; color: var(--rav-azul-prof); }
.rav-card__d { font-size: 12.5px; color: var(--rav-tenue); line-height: 1.4; }

/* --- Buscar --- */
.rav-input {
	width: 100%; border: 1px solid var(--rav-linea); border-radius: 10px;
	padding: 11px 14px; font-size: 15px; font-family: inherit; color: var(--rav-tinta); background: #fff;
}
.rav-input:focus { outline: none; border-color: var(--rav-azul); box-shadow: 0 0 0 3px rgba(27,95,212,.15); }
textarea.rav-input { resize: vertical; }
.rav-buscar-res { margin-top: 12px; display: grid; gap: 8px; }

/* --- Botones --- */
.rav-btn {
	display: inline-block; border: 0; border-radius: 10px; padding: 12px 18px;
	font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center;
}
.rav-btn--cta { width: 100%; background: var(--rav-azul); color: #fff; }
.rav-btn--cta:hover { filter: brightness(1.05); }
.rav-btn--wa { background: #25D366; color: #073; margin-top: 12px; }

/* --- Navegación inferior --- */
.rav-nav {
	display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
	border-top: 1px solid var(--rav-linea); background: #fff; position: sticky; bottom: 0;
}
.rav-nav__b {
	border: 0; background: none; cursor: pointer; padding: 9px 4px 8px;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	font-size: 11px; color: var(--rav-tenue); font-weight: 600;
}
.rav-nav__e { font-size: 18px; line-height: 1; filter: grayscale(.3); }
.rav-nav__b[data-activa] { color: var(--rav-azul); }
.rav-nav__b[data-activa] .rav-nav__e { filter: none; }

/* --- Modal de reporte (hoja inferior; deja el mapa visible y tocable) --- */
.rav-modal {
	position: absolute; inset: 0;
	display: grid; place-items: end center; z-index: 1200; padding: 0;
	pointer-events: none; /* el fondo no intercepta: se puede tocar el mapa */
}
.rav-modal__caja {
	background: #fff; border-radius: 18px 18px 0 0; width: 100%; max-width: 1100px;
	max-height: 78%; overflow-y: auto; padding: 22px 18px 26px; position: relative;
	border-top: 5px solid var(--rav-oro); pointer-events: auto;
	box-shadow: 0 -10px 30px rgba(10, 31, 68, 0.18);
}
.rav-modal__x {
	position: absolute; top: 12px; right: 12px; border: 0; background: var(--rav-gris);
	width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 14px; color: var(--rav-tenue);
}
.rav-modal__hint { margin: 0 40px 14px 0; font-size: 13.5px; color: var(--rav-tenue); }
.rav-modal__hint[data-listo="1"] { color: var(--rav-verde); font-weight: 600; }

.rav-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.rav-chip {
	display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rav-linea);
	background: var(--rav-gris); color: var(--rav-tinta); border-radius: 999px;
	padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.rav-chip[data-sel="1"] { background: var(--c); color: #fff; border-color: var(--c); }

.rav-form { display: grid; gap: 12px; }
.rav-form__lbl { display: grid; gap: 5px; }
.rav-form__msg { margin: 0; text-align: center; font-size: 13.5px; }
.rav-form__msg[data-tipo="ok"] { color: var(--rav-verde); font-weight: 600; }
.rav-form__msg[data-tipo="error"] { color: var(--rav-rojo); font-weight: 600; }

.rav[data-marcando] .rav-map { cursor: crosshair; }

/* --- Responsive --- */
@media (max-width: 640px) {
	.rav { border-radius: 0; border-left: 0; border-right: 0; }
	.rav-stat__n { font-size: 18px; }
	.rav-lista--cols { grid-template-columns: 1fr; }
	.rav-hub { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.rav-stat--skel, .rav-sismo--skel { animation: none; }
	.rav-card { transition: none; }
}

/* ==========================================================================
   MEJORAS v3 — OpenStreetMap avanzado
   ========================================================================== */

/* Botón "Mi ubicación" en el mapa */
.rav-ctrl-ubic {
	width: 34px; height: 34px;
	background: #fff; border: 2px solid rgba(0,0,0,.2);
	border-radius: 4px; cursor: pointer; font-size: 16px;
	display: grid; place-items: center;
	box-shadow: 0 2px 6px rgba(0,0,0,.15);
	transition: background .12s;
}
.rav-ctrl-ubic:hover { background: #f4f4f4; }

/* Popup: fila de acciones (Ver OSM + Cómo llegar) */
.rav-pop__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px !important; }
.rav-pop__acciones a { font-size: 12px !important; font-weight: 700; }

/* Autocompletado de dirección en el formulario */
.rav-dir-wrap { position: relative; }
.rav-dir-sug {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 9999;
	background: #fff; border: 1px solid var(--rav-linea);
	border-top: 0; border-radius: 0 0 10px 10px;
	box-shadow: 0 6px 16px rgba(10,31,68,.12);
	max-height: 200px; overflow-y: auto;
}
.rav-dir-sug__item {
	padding: 10px 14px; font-size: 13px; cursor: pointer;
	border-bottom: 1px solid var(--rav-linea); line-height: 1.35;
}
.rav-dir-sug__item:last-child { border-bottom: 0; }
.rav-dir-sug__item:hover { background: var(--rav-gris); }

/* Hint de dirección detectada */
.rav-modal__hint[data-listo="1"] {
	color: var(--rav-verde); font-weight: 600; font-size: 13px;
	background: #f0fdf4; border-radius: 8px; padding: 6px 10px;
}

/* Indicador HOT OSM en el mapa */
.leaflet-control-attribution a { color: var(--rav-azul); }