/* assets/css/style.css (VERSIÓN FINAL CON ESTÉTICA MEJORADA) */

/* ==========================================================================
   1. PALETA DE COLORES Y VARIABLES GLOBALES
   ========================================================================== */
:root {
    --unap-verde: #008037;
    --unap-verde-oscuro: #005a28;
    --unap-amarillo: #ffc107; /* Amarillo de Bootstrap, buen contraste */
    --unap-azul: #0d6efd; /* Azul primario de Bootstrap */
    --unap-blanco: #FFFFFF;
    --unap-gris-claro: #f8f9fa;
    --unap-gris-medio: #6c757d;
    --unap-gris-oscuro: #212529;
    --unap-rojo-eliminar: #dc3545;
    
    --text-color: #343a40;
    --bg-color: #f4f7f6; /* Fondo con un ligero tinte verde */
    --card-bg: var(--unap-blanco);
    --card-border: #e9ecef;
}

/* ==========================================================================
   2. ESTILOS BASE Y MODO OSCURO
   ========================================================================== */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
    font-family: 'Segoe UI', Roboto, sans-serif;
}

body.dark-mode {
    --text-color: var(--unap-gris-claro);
    --bg-color: var(--unap-gris-oscuro);
    --card-bg: #2c3034;
    --card-border: #495057;
}

/* ==========================================================================
   3. ESTILOS DE LAYOUT (HEADER, FOOTER)
   ========================================================================== */
.header-public .navbar { background-color: var(--unap-verde) !important; }
.header-admin .navbar { background-color: var(--unap-gris-oscuro) !important; }
.navbar-brand img { height: 40px; }

.footer {
    padding: 1.5rem 0;
    background-color: var(--unap-gris-oscuro);
    color: rgba(255, 255, 255, 0.7);
    margin-top: 3rem;
}
.footer strong { color: var(--unap-blanco); }

/* ==========================================================================
   4. ESTILOS DE COMPONENTES DE BOOTSTRAP PERSONALIZADOS
   ========================================================================== */

/* TABS DE SELECCIÓN DE VISTA */
.nav-tabs {
    border-bottom: none; /* Quitamos el borde inferior general */
}

.nav-tabs .nav-link {
    color: var(--unap-gris-medio);
    background-color: transparent;
    border: 1px solid transparent; /* Borde transparente para mantener el tamaño */
    border-bottom: 1px solid #dee2e6; /* Línea base sutil */
    border-radius: .5rem .5rem 0 0; /* Bordes redondeados solo en la parte superior */
    font-weight: 500;
    margin-right: 5px;
    transition: all 0.2s ease-in-out;
}

/* Estilo para la pestaña INACTIVA cuando pasas el ratón por encima */
.nav-tabs .nav-link:not(.active):hover {
    background-color: #e9ecef;
    border-color: #e9ecef;
    color: var(--unap-verde);
}

/* Estilo para la pestaña ACTIVA */
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: var(--unap-blanco) !important;
    background-color: var(--unap-verde) !important;
    border: 1px solid var(--unap-verde);
    border-bottom: 1px solid var(--unap-verde); /* El borde inferior coincide con el fondo */
}

.navbar-dark .navbar-nav > .nav-item > .nav-link.active {
    color: var(--unap-amarillo);
    font-weight: 500;
}

/* Estilo para el BOTÓN DEL DROPDOWN cuando un hijo está activo */
.navbar-dark .navbar-nav .nav-link.dropdown-toggle.menu-active-parent {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 0.25rem;
}

/* Estilo para el ÍTEM DENTRO del dropdown cuando está activo */
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--unap-azul) !important;
    color: var(--unap-blanco) !important;
    font-weight: 500;
}
/* TARJETA DE FILTROS */
.card-filters {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: .5rem;
}
.card-title-filters {
    color: var(--unap-verde);
    font-weight: 500;
}

/* ESTILOS MEJORADOS PARA LAS TABLAS DEL DIRECTORIO */

.tabla-directorio {
    /* Quitamos table-layout: fixed para que los anchos sean más flexibles */
    word-wrap: break-word;
    border-collapse: separate; /* Permite bordes redondeados */
    border-spacing: 0;
    white-space: nowrap;
}

.tabla-directorio thead th {
    background-color: var(--unap-verde);
    color: var(--unap-blanco);
    padding: 0.9rem 1rem;
    font-weight: 500;
    text-align: left;
    border-bottom: 2px solid var(--unap-verde-oscuro);
}
/* Redondear las esquinas de la cabecera */
.tabla-directorio thead th:first-child { border-top-left-radius: .5rem; }
.tabla-directorio thead th:last-child { border-top-right-radius: .5rem; }

.tabla-directorio tbody td {
    padding: 0.8rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
}
.dark-mode .tabla-directorio tbody td {
    border-bottom-color: #495057;
}

/* Eliminar el borde inferior de la última fila para un look más limpio */
.tabla-directorio tbody tr:last-child td {
    border-bottom: none;
}
.tabla-directorio tbody tr:hover {
    background-color: #e9f5ee;
}
.dark-mode .tabla-directorio tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.075);
}

/* Truncado de texto (sigue siendo útil) */
.tabla-directorio td div[title] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* max-width ya no es necesario, lo controla el JS */
}

/* Estilo para el N/A */
.tabla-directorio .text-muted {
    font-style: italic;
    font-size: 0.85rem;
}


/* Estilo específico para el botón "Ver Más" */
.tabla-directorio .btn-detalle {
    background-color: var(--unap-verde);
    border-color: var(--unap-verde);
    color: var(--unap-blanco);
    font-weight: 500;
}
.tabla-directorio .btn-detalle:hover {
    background-color: var(--unap-verde-oscuro);
    border-color: var(--unap-verde-oscuro);
}

/* Control de texto largo (ya lo teníamos, pero lo refinamos) */
.tabla-directorio td div[title] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; /* Ajusta según necesidad */
}

/* ==========================================================================
   5. ESTILOS DE CLASES DE UTILIDAD
   ========================================================================== */

/* Estilo Base para TODAS las tablas */
.table {
    color: var(--text-color);
    border-color: var(--card-border);
    font-size: 0.9rem;
}
.table > :not(caption) > * > * {
    padding: .8rem;
    vertical-align: middle;
}
.table-hover > tbody > tr:hover {
    color: var(--text-color);
    background-color: rgba(0, 128, 55, 0.07);
}
.dark-mode .table-hover > tbody > tr:hover {
    background-color: rgba(255, 255, 255, 0.075);
}

/* --- ESTILOS PARA LA TABLA PÚBLICA (Mantiene el truncado) --- */
.tabla-publica thead th {
    background-color: var(--unap-verde);
    color: var(--unap-blanco);
    white-space: nowrap; /* Las cabeceras públicas no se parten */
}
/* Truncado de texto para la tabla pública */
.tabla-publica td div[title] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* --- NUEVOS ESTILOS PARA LA TABLA DE ADMIN --- */
.tabla-admin {
    /* Quitamos el table-layout: fixed para que el ancho se ajuste al contenido */
    table-layout: auto;
    width: 100% !important; /* Aseguramos que ocupe todo el ancho disponible */
}
.tabla-admin thead {
    background-color: var(--unap-gris-oscuro);
    color: var(--unap-blanco);
}
/* Permitir saltos de línea en las celdas de la tabla de admin */
.tabla-admin td {
    white-space: normal !important; /* La regla más importante: permite saltos de línea */
    word-wrap: break-word;
}
.tabla-admin tbody .text-muted {
    font-style: italic;
    font-size: 0.85rem;
}
.tabla-admin .btn-warning {
    background-color: var(--unap-amarillo); border-color: var(--unap-amarillo); color: #333;
}
.tabla-admin .btn-danger {
    background-color: var(--unap-rojo-eliminar); border-color: var(--unap-rojo-eliminar);
}