/* public/assets/css/style.css - Rediseño Completo SMAPA */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
    --smapa-darkblue: #194A8A;   /* Azul Oscuro (Acentos, Navegación) */
    --smapa-mediumblue: #2A6DB3; /* Azul Medio (Botones Primarios) */
    --smapa-lightblue: #A5D0E9;  /* AZUL PASTEL PARA FONDO DE UI */
    --smapa-green: #28a745;      
    --smapa-lightgray: #f8f9fa;  /* Blanco/Gris para tarjetas */
    --smapa-white: #ffffff;      
    --smapa-text-dark: #343a40;  /* Texto oscuro principal */
    --font-family: 'Roboto', sans-serif;
}

/* 1. Cambiamos el fondo principal a Azul Pastel */
body {
    background-color: var(--smapa-lightblue); /* FONDO CLARO */
    font-family: var(--font-family);
    color: var(--smapa-text-dark);
}

/* 2. Aseguramos que los títulos sean oscuros para contraste */
h2.page-title, h3.section-title {
    color: var(--smapa-darkblue); /* Títulos en Azul Oscuro para contraste */
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* --- Navegación Superior --- */
.navbar {
    background-color: var(--smapa-darkblue) !important;
    border-bottom: 3px solid var(--smapa-mediumblue);
}
.navbar-brand, .navbar-nav .nav-link {
    color: var(--smapa-white) !important;
    font-weight: 500;
}
.navbar-nav .nav-link:hover {
    color: var(--smapa-lightblue) !important;
}
.btn-cerrar-sesion {
    background-color: var(--smapa-mediumblue);
    border-color: var(--smapa-mediumblue);
    color: var(--smapa-white);
    font-weight: 500;
}
.btn-cerrar-sesion:hover {
    background-color: var(--smapa-lightblue);
    border-color: var(--smapa-lightblue);
    color: var(--smapa-darkblue);
}

/* --- Títulos Principales de Página --- */
h2.page-title, h3.section-title {
    color: var(--smapa-darkblue);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* --- Tarjetas (Cards) --- */
.card {
    background-color: var(--smapa-white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); /* Sombra más sutil */
    transition: transform 0.2s ease-in-out;
}
.card:hover {
    transform: translateY(-3px); /* Efecto de elevación */
}
.card-title {
    color: var(--smapa-darkblue);
    font-weight: 600;
}

/* --- Secciones Destacadas (Dashboard) --- */
.hero-banner { /* El "Bienvenido, Admin SMAPA!" */
    background-color: var(--smapa-mediumblue);
    color: var(--smapa-white);
    padding: 2rem;
    border-radius: 0.75rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
.hero-banner h2 {
    color: var(--smapa-white);
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.hero-banner p {
    color: var(--smapa-lightblue);
    font-size: 1.1rem;
}

/* --- Botones --- */
.btn-primary {
    background-color: var(--smapa-mediumblue);
    border-color: var(--smapa-mediumblue);
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}
.btn-primary:hover {
    background-color: var(--smapa-darkblue);
    border-color: var(--smapa-darkblue);
}
.btn-success {
    background-color: var(--smapa-green);
    border-color: var(--smapa-green);
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}
.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}
.btn-info { /* Para Ver/Editar */
    background-color: var(--smapa-lightblue);
    border-color: var(--smapa-lightblue);
    color: var(--smapa-darkblue) !important;
    font-weight: 500;
}
.btn-info:hover {
    background-color: #6daae4;
    border-color: #6daae4;
}
.btn-secondary { /* Limpiar filtros, Desactivar */
    background-color: #6c757d;
    border-color: #6c757d;
    font-weight: 500;
}
.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}
.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}
.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}


/* --- Tablas --- */
.table thead {
    background-color: var(--smapa-darkblue); /* Cabecera de tabla oscura */
    color: var(--smapa-white);
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.03); /* Franjas sutiles */
}
.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.07);
}


/* --- Badges --- */
.badge.bg-primary { /* Por ejemplo, Tipo de Soporte */
    background-color: var(--smapa-mediumblue) !important;
    color: var(--smapa-white);
}
.badge.bg-success {
    background-color: var(--smapa-green) !important;
    color: var(--smapa-white);
}
.badge.bg-warning {
    background-color: #ffc107 !important;
    color: var(--smapa-text-dark) !important; /* Texto oscuro para contraste */
}
.badge.bg-secondary {
    background-color: #6c757d !important;
    color: var(--smapa-white);
}
.badge.bg-info { /* Nuevo badge, para el rol ADMIN por ejemplo */
    background-color: var(--smapa-lightblue) !important;
    color: var(--smapa-darkblue) !important;
    font-weight: 600;
}

/* --- Iconos (Font Awesome) --- */
.fa-icon {
    margin-right: 0.5rem;
}

/* Utilidades */
.container-fluid { /* Para asegurar que el nav siempre sea de ancho completo */
    padding-left: 0;
    padding-right: 0;
}
.content-wrapper { /* Contenedor principal de la aplicación */
    padding: 2rem 1rem;
}

.metrics-grid {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.metric-card {
    background-color: var(--smapa-white);
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 25%; /* Divide el espacio entre 4 tarjetas */
    text-align: center;
}

.metric-card h4 {
    color: #6c757d; /* Gris sutil */
    font-size: 0.9rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.metric-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--smapa-darkblue);
}

.metric-value.green {
    color: var(--smapa-green);
}

/* --- Estilos de Tarjetas de Navegación (6 Tarjetas Inferiores) --- */
.nav-card {
    background-color: var(--smapa-white);
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: 1px solid #dee2e6;
    transition: all 0.2s;
}
.nav-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    border-color: var(--smapa-mediumblue);
}
.nav-card h5 {
    color: var(--smapa-darkblue);
    font-weight: 600;
    margin-top: 0.5rem;
}
.nav-card p {
    font-size: 0.9rem;
    color: #6c757d;
}
.nav-card i {
    font-size: 2.5rem;
    color: var(--smapa-mediumblue);
}
/* Estilo para el logo en la tarjeta de login */
.logo-login {
    max-width: 250px; /* Tamaño máximo para que sea visible */
    height: auto;
    margin-bottom: 20px;
    display: block; /* Asegura que la imagen sea un bloque */
    margin-left: auto; /* Centra la imagen */
    margin-right: auto;
}

/* Y para la tarjeta de login, por si acaso el fondo está afectando: */
.card-login {
    background-color: var(--smapa-white); /* Fondo blanco para la tarjeta */
    border: 1px solid var(--smapa-card-border);
    /* ... (resto de estilos de tarjeta) ... */
}
/* public/assets/css/style.css (Añadir este bloque) */

/* --- Estilos para las Tarjetas de Acceso Estilizadas --- */
.access-grid { 
    display: grid;
    /* Ajustamos el diseño a 3 columnas para que se vea compacto y profesional, similar al ejemplo */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 20px;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.access-card {
    background: var(--smapa-white);
    border: 1px solid var(--smapa-card-border);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    text-align: center;
    transition: all 0.2s ease-in-out;
    text-decoration: none; /* Asegura que el enlace no tenga subrayado */
    color: var(--smapa-text-dark);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 200px; /* Altura mínima para una apariencia robusta */
}

.access-card:hover {
    border-color: var(--smapa-mediumblue);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    transform: translateY(-4px);
    text-decoration: none;
}

.access-card .icon-holder {
    font-size: 3rem; /* Tamaño grande para el icono */
    color: var(--smapa-mediumblue); /* Azul de SMAPA para los iconos */
    margin-bottom: 15px;
}

.access-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 5px 0;
    color: var(--smapa-darkblue); /* Color del título de la tarjeta */
}

.access-card p {
    font-size: 0.9rem;
    color: #6c757d; /* Gris para la descripción */
    margin-bottom: 0;
}
/* public/assets/css/style.css (Añadir o modificar) */

.access-card .icon-holder {
    /* Eliminamos el color azul que aplicamos a Font Awesome */
    color: inherit; 
    font-size: 3rem; 
    margin-bottom: 15px;
}
.access-card .icon-holder i {
    /* Aseguramos que los iconos de Font Awesome sean azules */
    color: var(--smapa-mediumblue); 
}

/* Estilo para el contenedor de iconos emoji, si se usa el span simple */
.access-card .icon {
    font-size: 3rem; /* Tamaño grande para los emojis */
    display: block;
    margin-bottom: 15px;
    line-height: 1; /* Asegura el correcto alineado del emoji */
}
/* --- Footer --- */
.app-footer {
    background-color: var(--smapa-darkblue);
    color: var(--smapa-white);
    padding: 1rem 0;
    text-align: center;
    font-size: 0.85rem;
    margin-top: 3rem; /* Espacio antes del footer */
}
.app-footer span {
    color: var(--smapa-lightblue);
    font-weight: 500;
}