:root {
    --amarillo-ven: #ffcc00;
    --azul-ven: #0033a0;
    --rojo-ven: #ce1126;
    --oscuro: #101b2b;
    --gris-claro: #f4f6f9;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0; padding: 0; 
    background-image: linear-gradient(rgba(244, 246, 249, 0.92), rgba(244, 246, 249, 0.92)), 
                      url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Flag_of_Venezuela.svg/1024px-Flag_of_Venezuela.svg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #222;
}

.bandera-tope {
    height: 8px; width: 100%;
    background: linear-gradient(to right, 
        var(--amarillo-ven) 0%, var(--amarillo-ven) 33.33%, 
        var(--azul-ven) 33.33%, var(--azul-ven) 66.66%, 
        var(--rojo-ven) 66.66%, var(--rojo-ven) 100%
    );
}

header { background-color: var(--oscuro); color: white; padding: 20px 15px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
header h1 { margin: 0 0 15px 0; font-size: 24px; }

nav button { background: #243b55; border: 1px solid #3a5d85; color: white; padding: 10px 16px; margin: 5px; cursor: pointer; border-radius: 6px; font-weight: bold; transition: all 0.2s ease; }
nav button:hover { background: #2e4b6c; }
nav button.nav-active { background: var(--azul-ven); border-color: var(--amarillo-ven); box-shadow: 0 0 8px rgba(255,204,0,0.4); }

main { padding: 15px; max-width: 1100px; margin: 0 auto; }
.tab-content { display: none; }
.tab-content.active { display: block; }

.form-emergencia { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 25px; border-top: 4px solid var(--azul-ven); }
.form-emergencia h3 { margin-top: 0; color: var(--oscuro); }
.form-emergencia input, .form-emergencia select, .form-emergencia textarea { width: 100%; padding: 12px; margin: 8px 0; border: 1px solid #ccd4dc; border-radius: 6px; box-sizing: border-box; font-size: 15px; }

button[type="submit"] { background-color: var(--rojo-ven); color: white; width: 100%; border: none; padding: 14px; font-size: 16px; font-weight: bold; cursor: pointer; border-radius: 6px; box-shadow: 0 3px 6px rgba(206,17,38,0.3); }
button[type="submit"]:hover { background-color: #ad0e1e; }

.alerta-fuente { background-color: #fff9e6; border-left: 5px solid var(--amarillo-ven); padding: 15px; margin-bottom: 20px; border-radius: 4px; }
.btn-secundario { background: #2a9d8f; color: white; border: none; padding: 12px 18px; border-radius: 6px; cursor: pointer; margin-bottom: 15px; font-weight: bold; }

.tabla-contenedor { overflow-x: auto; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 30px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px; text-align: left; border-bottom: 1px solid #edf2f7; }
th { background-color: var(--azul-ven); color: white; }

.badge-CRITICO { background: var(--rojo-ven); color: white; padding: 6px 12px; border-radius: 4px; font-weight: bold; font-size: 11px; }
.badge-ESTABLE { background: #2a9d8f; color: white; padding: 6px 12px; border-radius: 4px; font-weight: bold; font-size: 11px; }

.stats-desaparecidos { display: flex; gap: 15px; margin-bottom: 25px; }
.stat-card { flex: 1; background: white; padding: 20px 15px; border-radius: 8px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.04); border-bottom: 4px solid var(--azul-ven); }
.stat-card.localizar { border-bottom-color: var(--rojo-ven); }
.stat-card.localizadas { border-bottom-color: #2a9d8f; }
.stat-numero { display: block; font-size: 28px; font-weight: bold; color: var(--oscuro); }
.stat-etiqueta { font-size: 13px; color: #666; }

.buscador-modulo { margin-bottom: 25px; }
.buscador-input-wrapper { display: flex; background: white; padding: 6px; border-radius: 8px; border: 1px solid #ccd4dc; }
.buscador-input-wrapper input { flex: 1; border: none; padding: 12px 15px; font-size: 16px; outline: none; }
.btn-buscar-ejecutar { background-color: var(--azul-ven); color: white; border: none; padding: 0 30px; font-weight: bold; border-radius: 6px; cursor: pointer; }

.form-grid-inputs { display: flex; gap: 15px; }
.form-grid-inputs input, .form-grid-inputs select { flex: 1; }

.grid-desaparecidos-avanzado { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-top: 15px; }
.tarjeta-persona { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border: 1px solid #edf2f7; display: flex; flex-direction: column; }

.tarjeta-imagen { width: 100%; height: 210px; object-fit: cover; border-bottom: 1px solid #edf2f7; }
.tarjeta-imagen-placeholder { height: 210px; background-color: #f4f6f9; display: flex; align-items: center; justify-content: center; color: #a0aec0; font-size: 55px; border-bottom: 1px solid #edf2f7; }

.tarjeta-cuerpo { padding: 15px; flex: 1; display: flex; flex-direction: column; }
.status-badge { align-self: flex-start; font-size: 11px; font-weight: bold; padding: 4px 8px; border-radius: 4px; margin-bottom: 10px; }
.status-badge.status-localizar { background-color: #fff5f5; color: var(--rojo-ven); border: 1px solid #feb2b2; }
.status-badge.status-localizada { background-color: #e6fffa; color: #234e52; border: 1px solid #b2f5ea; }

.tarjeta-cuerpo h3 { margin: 0 0 8px 0; font-size: 16px; }
.tarjeta-info-linea { font-size: 13px; color: #4a5568; margin: 4px 0; display: flex; align-items: center; gap: 6px; }
.tarjeta-fecha-pie { margin-top: auto; padding-top: 10px; border-top: 1px dashed #e2e8f0; font-size: 11px; color: #718096; }

/* Botón interactivo de reporte directo */
.btn-aparecida { background: #2a9d8f; color: white; border: none; padding: 8px 10px; font-size: 12px; font-weight: bold; border-radius: 4px; cursor: pointer; margin-top: 12px; width: 100%; text-align: center; transition: background 0.2s; }
.btn-aparecida:hover { background: #218838; }

/* Mini formulario de avistamiento */
.form-localizar-inline { background: #f8fafc; padding: 10px; border-radius: 6px; border: 1px solid #e2e8f0; margin-top: 10px; text-align: left; }
.form-localizar-inline label { font-size: 11.5px; font-weight: bold; color: var(--oscuro); display: block; margin-bottom: 4px; }
.form-localizar-inline input { width: 100%; padding: 7px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12px; margin-bottom: 8px; box-sizing: border-box; }
.form-localizar-inline-botones { display: flex; gap: 6px; }
.btn-confirmar-inline { background: var(--azul-ven); color: white; border: none; padding: 6px 10px; font-size: 11px; font-weight: bold; border-radius: 4px; cursor: pointer; flex: 1; }
.btn-cancelar-inline { background: #94a3b8; color: white; border: none; padding: 6px 10px; font-size: 11px; font-weight: bold; border-radius: 4px; cursor: pointer; }

/* ================= SECCIÓN FOOTER ================= */
footer { background-color: var(--oscuro); color: #e2e8f0; padding: 35px 15px 0 15px; text-align: center; margin-top: 50px; box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.2); }
.footer-contenido { max-width: 750px; margin: 0 auto; padding-bottom: 20px; }
.footer-proposito { font-size: 13.5px; line-height: 1.6; color: #cbd5e1; margin-bottom: 15px; font-style: italic; }
.footer-divisor { border: 0; height: 1px; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0)); margin: 18px 0; }
.footer-creditos { font-size: 14px; margin: 6px 0; color: #ffffff; }
.footer-contacto { font-size: 13px; margin: 6px 0; color: #94a3b8; }
.footer-contacto a { color: var(--amarillo-ven); text-decoration: none; font-weight: bold; transition: color 0.2s ease; }
.footer-contacto a:hover { text-decoration: underline; color: #ffe066; }
.bandera-base { height: 8px; width: 100%; margin-top: 25px; background: linear-gradient(to right, var(--amarillo-ven) 0%, var(--amarillo-ven) 33.33%, var(--azul-ven) 33.33%, var(--azul-ven) 66.66%, var(--rojo-ven) 66.66%, var(--rojo-ven) 100% );}

@media (max-width: 600px) { .stats-desaparecidos, .form-grid-inputs { flex-direction: column; gap: 10px; } }