/* Variables y Estilos Generales - PALETA INFLUENCIART */
:root {
    /* Paleta Principal */
    --primary-color: #1b517b;       /* Azul Oscuro (Base) */
    --secondary-color: #1e90ff;     /* Azul Brillante (Hover/Action) */
    --accent-color: #00ced1;        /* Turquesa (Detalles) */
    --success-color: #32cd32;       /* Lime Green (Éxito/Resuelto) */
    
    /* Neutros */
    --dark-color: #1a1a1a;          /* Negro Suave (Textos oscuros) */
    --light-color: #f8f9fa;         /* Blanco Humo (Fondos claros) */
    
    /* Fondos de items */
    --item-color-bg: #e3f2fd;       /* Azul muy claro (Pasos, tarjetas) */
    
    /* Textos y Links */
    --text-color-light: #f8f9fa;
    --text-color-dark: #1a1a1a;
    --link-color: #1b517b;
    --hover-color: #1e90ff;         /* Dodger Blue */
    
    --navbar-bg: rgba(27, 81, 123, 0.9); /* Azul corporativo con transparencia */
    --font-family: "Baloo Tammudu 2", monospace;
}
* {
    box-sizing: border-box; /* Incluye el padding y borde dentro del ancho total */
    margin: 0;
    padding: 0;
}

html {
    height: 100%; /* Necesario para la herencia de altura */
}

body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    font-family: var(--font-family), sans-serif;
    line-height: 1.6;
    color: var(--dark-color);

    /* Fondo Actualizado */
    background-image: 
        linear-gradient(rgba(27, 81, 123, 0.6), rgba(26, 26, 26, 0.8)), /* Tinte Azulado Oscuro */
        url('../img/banner.png');
    background-size: cover; 
    background-attachment: fixed; 
    background-position: center center; 
    background-repeat: no-repeat; 
    padding-top: 100px; 
}

/* --- REGLA PARA QUE EL CONTENIDO CREZCA --- */
main {
    flex: 1; /* Ocupa todo el espacio vertical disponible */
    width: 100%; /* Asegura el ancho completo */
    display: flex;         /* Opcional: Para centrar contenido si se desea */
    flex-direction: column; /* Opcional: Mantiene flujo vertical */
}

/* Estilos generales para el texto del estado */
.estado-nuevo,
.estado-proceso,
.estado-resuelto,
.estado-error {
    font-weight: bold; /* Hace que el texto del estado sea más visible */
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block; /* Asegura que el color de fondo solo ocupe el espacio del texto */
}

/* 1. Estado: NUEVO  */
.estado-nuevo {
    color: #e67e22; 
    background-color: #fff3e0;
    border: 1px solid #e67e22;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* 2. Estado: EN PROCESO  */
.estado-proceso {
    color: #1e90ff; /* Azul Influenciart */
    background-color: #e3f2fd;
    border: 1px solid #1e90ff;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* 3. Estado: RESUELTO  */
.estado-resuelto {
    color: #32cd32; /* Lime Green Influenciart */
    background-color: #f0fff0;
    border: 1px solid #32cd32;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* 4. Estado: Por defecto/ERROR (Similar a rojo) */
.estado-error {
    color: #f44336;
    background-color: #ffebee;
    border: 1px solid #f44336;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}


/* --- Estilos del Nuevo Diseño --- */
.header {
    background: rgba(255, 255, 255, 0.95); 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 7px 0;
}

.header-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body {
    font-family: var(--font-family), sans-serif;
    line-height: 1.6;
    color: #333;

    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), /* Capa negra semi-transparente */
        url('../img/banner.png'); /* La imagen de fondo real */
    background-size: cover; 
    background-attachment: fixed; 
    background-position: center center; 
    background-repeat: no-repeat; 
    /* El valor de margin-top debe ser igual a la altura total de las barras (top-bar + header) */
    padding-top: 120px; 
}
/* Ajuste para las secciones de contenido */
section {
    background: rgba(255, 255, 255, 0.9); /* Fondo blanco semitransparente para contenido */
    padding: 30px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}



/* Estilos para la barra de navegación fija */
.fixed-nav {
    position: fixed; 
    top: 0px; 
    left: 0;
    width: 100%;
    z-index: 1000; /* Asegura que esté por encima del contenido */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: top 0.3s ease;
}

.logo img {
    height: 70px; /* <--- CAMBIO AQUÍ: Hace que la barra se ajuste a este nuevo tamaño */
    width: auto;
    display: block;
}

.main-nav ul {
    list-style: none;
    display: flex;
}

.main-nav li {
    margin-left: 25px;
}

.main-nav a {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: bold;
    transition: color 0.3s ease;
}

.main-nav a:hover {
    color: var(--hover-color);
}

/* Sección de la imagen de portada (Hero Section) */
.hero-section {

    position: relative;

    background-color: transparent;
    color: var(--light-color);
    height: 400px; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 20px;

    overflow: hidden;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
.hero-content {
    position: relative; 
    z-index: 2; 
}
.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 10px;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: var(--light-color);
}

.btn-principal {
    background: var(--primary-color);
    color: var(--light-color);
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    margin: 0 10px;
    transition: background-color 0.3s ease;
}

.btn-secundario {
    background: transparent;
    border: 2px solid var(--light-color);
    color: var(--light-color);
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    margin: 0 10px;
    transition: all 0.3s ease;
}

.btn-principal:hover {
    background: var(--hover-color);
    border-color: var(--hover-color);
}

.btn-secundario:hover {
    background: var(--light-color);
    color: var(--primary-color);
}

/* Estilos para el contenido principal */
.container {
    max-width: 960px;
    margin: auto;
    padding: 20px;
}

.content-section {
    margin-top: 40px;
}

.content-section h2, .main-form h2 {
    text-align: center;
    color: var(--primary-color);
    font-size: 2rem;
    margin-bottom: 30px;
}

/* Estilos de la sección "Cómo Funciona" */
.pasos-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    gap: 20px;
    text-align: center;
    align-items: stretch;
}

.paso {
    flex-basis: 30%;
    padding: 20px;
    background: var(--item-color-bg);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    text-align: center;
}

.paso img {
    height: 80px;
    margin-bottom: 15px;
    border-radius: 10px;
}

.paso h3, p { color: var(--dark-color); }
.paso h3 { color: var(--primary-color); margin-bottom: 10px; }

/* Estilos de la sección FAQ con acordeón */
.faq-acordeon details {
    background: var(--light-color);
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 15px;
    cursor: pointer;
    border-left: 4px solid var(--primary-color);
}

.faq-acordeon summary {
    font-weight: bold;
    color: var(--primary-color);
}

.faq-acordeon p {
    margin-top: 10px;
    padding-left: 20px;
}


/* Ajuste para el contenedor principal de los formularios (reportar.php, seguimiento.php) */
.main-form {
    max-width: 960px;
    margin: 40px auto;
    padding: 30px;
    background: rgba(255, 255, 255, 0.95); 
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 95%;
}

/* Estilos de sección */
.seccion-formulario {
    padding: 20px 30px;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

#politica-privacidad {
    text-align: center; /* Centra el texto y el botón */
    border: 1px solid var(--item-color-bg); /* Borde más sutil (opcional) */
    background-color: #fff; /* Asegura fondo blanco */
}

#politica-privacidad p {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #555;
}

/* Estilo del formulario */
form {
    display: flex;
    flex-direction: column;
}

/* Estilo de las etiquetas de los campos */
label {
    font-weight: 700;
    color: #444;
    margin-top: 15px;
    margin-bottom: 5px;
    display: block;
}

/* Estilo de los campos de texto, select y textarea */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="tel"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Estilo de enfoque para los campos */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--hover-color); 
    box-shadow: 0 0 5px rgba(30, 144, 255, 0.3); /* Glow azul */
    outline: none;
}

/* Estilo para el botón de envío */
.btn-submit {
    background: var(--primary-color);
    color: var(--light-color);
    font-weight: bold;
    font-size: 1.1rem;
    padding: 15px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 25px;
    transition: background-color 0.3s ease;
}

.btn-submit:hover {
    background: var(--hover-color);
}

/* Estilo para el botón de aceptar la política de privacidad */
.btn-aceptar {
    background: var(--primary-color);
    color: var(--light-color);
    font-weight: bold;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.btn-aceptar:hover {
    background: var(--hover-color);
}


/* ========================================================= */
/* ESTILOS ESPECÍFICOS PARA EL PANEL DE ADMINISTRACIÓN (ADMIN_DASHBOARD) */
/* ========================================================= */
.main-admin {
    width: 95%;            
    max-width: 1400px;    
    
    /* Calcula: 100% de pantalla - 100px (Header) - 40px (Márgenes aprox) */
    height: calc(100vh - 140px); 
    margin: 20px auto;     
    
    padding: 20px;
    background: rgba(255, 255, 255, 0.95); 
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    
    /* Flex para organizar encabezado de usuario y columnas */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Ajuste opcional: Para asegurar que el layout interno aproveche el espacio */
.main-admin .admin-layout {
    flex: 1; /* Ocupa todo el espacio vertical sobrante */
    height: 100%; 
    min-height: 0; /* Necesario para que el scroll interno funcione en Firefox */
    margin-top: 10px;    /* Eliminamos padding extra si ya lo tiene el padre */
}


/* Layout principal para dos columnas */
.admin-layout { 
    display: flex; 
    gap: 20px;
    
}

/* Panel lateral para la lista de reportes (Sidebar) */
.sidebar { 
    flex: 1; 
    min-width: 0; 
    
    height: 100%; 
    max-height: none; 
    
    overflow-y: auto; /* Scroll SOLO aquí si la lista es larga */
    
    padding: 20px; 
    border-right: 1px solid #ddd; 
    background-color: #ffffff; 
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    
}

/* Estilos de Paginación en Sidebar */
.pagination-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.btn-pag {
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    color: #333;
    border-radius: 4px;
    font-size: 0.85em;
    transition: background 0.2s;
}

.btn-pag:hover:not(.disabled) {
    background-color: #e2e6ea;
    border-color: #adb5bd;
}

.btn-pag.disabled {
    color: #aaa;
    background-color: #fff;
    border-color: #eee;
    cursor: default;
}

.pag-info {
    font-size: 0.85em;
    font-weight: bold;
    color: #555;
}

/* Contenedor de la Descripción de los Hechos (dentro del Detalle) */
.reporte-info-card div[style*="white-space: pre-wrap"] { 
    /* Permite el corte de palabras largas para evitar que se desborde el contenedor */
    word-break: break-word; 
    overflow-wrap: break-word;
    /* Establece un ancho máximo si el contenedor principal lo permite, 
       pero 'word-break' es lo más efectivo aquí. */
}

/* Panel de contenido principal (detalle del reporte) */
.content { 
    flex: 1; 
    min-width: 0; 
    
    height: 100%; /* Altura completa */
    overflow-y: auto; /* Scroll SOLO aquí si el detalle es largo */
    
    padding: 30px; 
    background-color: #ffffff; 
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    
}

/* Encabezados y títulos */
.admin-layout h3 {
    color: #355e3b; /* Azul oscuro del header */
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
}
.admin-layout h4 {
    color: #355e3b; /* Verde oscuro consistente */
    margin-top: 20px;
}

/* --- Estilo de la Tabla (Report List) --- */
.report-list table { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 0.9em; 
    margin-bottom: 20px;
}

.report-list th, .report-list td { 
    padding: 10px; 
    border-bottom: 1px solid var(--primary-color); 
    text-align: left; 
}

.report-list th {
    background-color: #e6f7ff; 
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    font-weight: 700;
    text-transform: uppercase;
}

/* Estilo al pasar el cursor (verde claro pálido) */
.report-list tr:hover { 
    background-color: #f0f8ff;
    cursor: pointer; 
}

/* Estilo para las acciones individuales (Histórico) */
.accion-historico { 
    background: #f4faff;
    padding: 15px; 
    border-radius: 5px; 
    margin-bottom: 10px; 
    border-left: 5px solid var(--hover-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    word-wrap: break-word; 
    word-break: break-word; 
    max-width: 80%;
}

/* Contenedores de Acciones Históricas */
.accion-historico p {
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 30ch;
    text-align: justify;
}


/* ========================================================= */
/* ESTILOS DEL FOOTER                                        */
/* ========================================================= */

footer { 
    background: var(--primary-color); 
    padding: 50px 0 20px; 
    border-top: 1px solid rgba(255,255,255,0.1); 
    color: #fff;
}

/* Contenedor principal del footer */
.footer-container {
    width: 95%; 
    max-width: 1400px; 
    margin: 0 auto;
}

/* Grid flexible para las columnas */
.footer-grid {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between;
    gap: 30px; /* Espacio entre columnas */
}

/* Estilos de las columnas individuales */
.footer-col {
    flex: 1; /* Crecen para ocupar espacio disponible */
    min-width: 160px; /* Ancho mínimo antes de bajar de línea */
}

/* La columna de marca es un poco más ancha por defecto */
.footer-col.brand-col {
    flex: 2; 
    min-width: 250px;
}

/* Títulos de las secciones */
.footer-col h4 {
    color: var(--accent-color); 
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.footer-col h5 {
    color: var(--accent-color); 
    font-size: 1.1rem; 
    margin-bottom: 15px;
    font-weight: bold;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
    display: inline-block;
}

.footer-col p {
    color: var(--text-color-light); /* o usa #dce5ee */
    margin-bottom: 15px;
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Listas de enlaces */
.footer-col ul {
    list-style: none; 
    padding: 0; 
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col a {
    color: #e0e0e0;
    text-decoration: none; 
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.footer-col a:hover {
    color: var(--accent-color);
}

/* Iconos Sociales */
.social-links {
    display: flex; 
    gap: 15px; 
    margin-top: 15px;
}

.social-links a {
    font-size: 1.5rem;
    color: #dce5ee;
}

.social-links a:hover {
    color: var(--accent-color);
    transform: scale(1.1);
}

/* Información de Copyright */
.footer-copyright {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    font-size: 0.85rem;
    color: #aab5c2;
}

/* ========================================================= */
/* MEDIA QUERIES - RESPONSIVIDAD PARA MÓVILES (Vertical) */
/* ========================================================= */

/* Ocultar botón de menú en escritorio */
.menu-toggle {
    display: none;
}

@media screen and (max-width: 768px) {

    /* --- 1. AJUSTE DE ESTRUCTURA (SOLUCIÓN AL TRASLAPE) --- */

    body {
        padding-top: 0;
        background-attachment: scroll;
        /* Aseguramos que el fondo cubra todo */
        background-size: cover; 
        min-height: 100vh;
    }


    /* Menú de Navegación (Header) */
    .fixed-nav {
        position: sticky; 
        top: 0;
        margin-top: 0;
        z-index: 1000;
        background-color: rgba(255, 255, 255, 0.5); 
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    /* --- 2. LOGO Y MENÚ HAMBURGUESA --- */
    
    .header-container {
        flex-wrap: wrap; 
        padding: 10px 15px;
        position: relative;
    }

    .logo img {
        height: 40px; /* Logo ajustado para móvil */
        margin: 0;
    }

    /* Botón Hamburguesa */
    .menu-toggle {
        display: block; /* Visible solo en móvil */
        background: none;
        border: none;
        font-size: 1.8rem;
        color: var(--primary-color);
        cursor: pointer;
        padding: 5px;
        position: absolute;
        right: 15px; /* Alineado a la derecha */
        top: 15px;
    }

    /* --- 3. MENÚ DESPLEGABLE VERTICAL --- */
    
    .main-nav {
        width: 100%;
        order: 3;
    }

    .main-nav ul {
        display: none; /* Oculto por defecto */
        flex-direction: column;
        width: 100%;
        background-color: #fff;
        border-top: 1px solid #eee;
        padding: 0;
        margin-top: 15px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

    /* Clase '.active' activada por JS */
    .main-nav ul.active {
        display: flex;
        animation: slideDown 0.3s ease-out;
    }

    .main-nav li {
        margin: 0;
        text-align: left;
        border-bottom: 1px solid #f9f9f9;
    }

    .main-nav a {
        display: block;
        padding: 15px 20px;
        font-size: 1rem;
        color: #333;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* --- 4. AJUSTES DE CONTENIDO --- */
    
    .hero-section {
        height: auto;
        padding: 40px 15px;
        margin-top: 0;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .opciones {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-principal, .btn-secundario {
        width: 100%;
        margin: 5px 0;
        display: block;
        box-sizing: border-box;
    }

    /* Pasos */
    .pasos-container {
        flex-direction: column;
    }
    
    /* Formularios */
    .main-form {
        width: 90%; /* Un poco más de margen lateral */
        max-width: 95%; /* Evita que crezca más allá del contenedor padre */
        margin: 20px auto;
        padding: 20px 15px; /* Reducir un poco el padding lateral interno */
    }
    
    /* Aseguramos que los inputs no rompan el contenedor */
    input[type="text"],
    input[type="email"],
    input[type="date"],
    input[type="tel"],
    textarea,
    select {
        width: 90%;
        max-width: 95%; /* Seguridad extra */
    }

    /* --- 5. ADMIN DASHBOARD --- */
    
    .admin-layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 2px solid var(--primary-color);
        margin-bottom: 20px;
        max-height: none;
    }
    
    .content {
        margin-left: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }

    .main-admin {
        height: auto; /* Quita el tamaño fijo */
        margin: 20px auto;
        overflow: visible;
    }
    
    .sidebar, .content {
        height: auto; /* Quita altura fija */
        overflow-y: visible; /* Quita scroll interno */
        max-height: none;
    }

    .report-list table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .two-col-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .footer-grid {
        flex-direction: column; /* Fuerza el orden vertical */
        gap: 40px; /* Más separación entre bloques en móvil */
    }

    .footer-col, .footer-col.brand-col {
        width: 100%; /* Ocupan todo el ancho */
        flex: none;
        text-align: center; /* Opcional: Centrar texto en móvil */
    }

    .footer-col h5 {
        display: block; /* La línea del título ocupa todo el ancho */
        width: 100%;
    }
    
    .social-links {
        justify-content: center; /* Centrar iconos en móvil */
    }
    
    .footer-logo-link {
        display: block;
        margin: 0 auto; /* Centrar logo */
    }

    body {
        padding-top: 0; /* Sin espacio superior en móvil */
        background-attachment: scroll; /* Fondo estático para rendimiento */
        min-height: 100vh; /* Refuerzo de altura mínima */
    }

    /* Ajuste específico para el formulario en móvil para que no se pegue a los bordes */
    .main-form {
        margin: 20px auto; /* Margen vertical para separar de header y footer */
        /* flex: 1;  <-- No es necesario aquí si 'main' ya lo tiene */
    }
    
}