/* Definición de Variables */
:root {
    /* Colores Principales */
    --color-primary: #030A8C;    /* Azul oscuro */
    --color-secondary: #18358C;  /* Azul medio */
  
    /* Color de Acento */
    --color-accent: #3fb0e4a6;   /* Azul brillante semitransparente */
  
    /* Colores Neutros */
    --color-light-gray: #F2F2F2; 
    --color-dark-text: #0D0D0D;  
    --color-white: #FFFFFF;      

    
}



body {
    min-height: 90vh; /* Altura mínima para que cubra la pantalla completa */
    background-image: url('../img/login-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Para que el fondo no se repita al hacer scroll */
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    margin: 0; /* Elimina márgenes para evitar bordes blancos */
}

main {
    display: flex;
    flex-direction: column; /* Para alinear contenido verticalmente */
    background-image: url('../img/login-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background: rgba(41, 39, 39, 0.24);
}



h1 {
    font-size: 2.5rem;
    font-weight: 700; /* Bold */
}

p, li, span {
    font-size: 1rem;
    font-weight: 400; /* Normal */
}

.subtitulo {
    font-size: 1.25rem;
    font-weight: 500; /* Medium */
}

.contenedor-cabecera{
    background-color: #ffffff;
    margin-top: 0;
    padding-top: 0;
  
}

.margin-top-custom {
    margin-top: 10%;
}

.authentication-bg {
    background-image: url('../img/login-bg.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
}

/* Card General */
.card {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.9); /* Fondo semitransparente */
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Modificación para el Modal */
.modal-content {
    background: transparent; 
    border: none;
    box-shadow: none;
    padding: 0;
}

/* Card dentro del Modal */
.modal .card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}

/* Header de las Cards */
.card-header {
    border-radius: 10px 10px 0 0; 
    background-color: var(--color-dark-text); /* Fondo negro */
    color: var(--color-white); /* Texto blanco */
    font-size: 1.1rem;
    font-weight: bold;
}

/* Botones de Acción dentro de la Card Body */
.card-body .btn-success {
    background-color: #28a745; 
    border-color: #28a745;
}
.card-body .btn-secondary {
    background-color: #6c757d; 
    border-color: #6c757d;
}

/* Tabla (DataTables) */
.table-responsive {
    /* Añade un ligero fondo semitransparente alrededor de la tabla */
    backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, 0.65);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10%;
}

/* Encabezados */
table thead th {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    text-transform: uppercase;
    border: none;
}

/* Celdas */
table td, table th {
    vertical-align: middle;
    text-align: center;
    border-color: #e3e3e3; /* Borde claro */
}

/* Filas impares y pares */
table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}
table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

/* Hover en filas */
table tbody tr:hover {
    background-color: var(--color-accent);
    color: var(--color-dark-text);
}

/* Ajustes DataTables: input de búsqueda, paginación, etc. */
.dataTables_wrapper .dataTables_filter input {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 5px;
    box-shadow: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ced4da;
    border-radius: 4px;
    margin: 0 2px;
    color: #333 !important;
}



/* Aseguramos que la paginación y 'info' no se solapen */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_paginate {
    margin: 10px 0;
}



/* Asegura que los encabezados se centren */
table.dataTable thead th, 
table.dataTable thead td, 
table.dataTable tfoot th, 
table.dataTable tfoot td {
    text-align: center !important;
}


.navbar-nav .nav-link.active {
    color: var(--color-primary); /* Aplica el color azul definido en tus variables CSS */
    font-weight: bold; /* Opcional: resaltar el texto */
    background-color: rgba(3, 10, 140, 0.1); /* Fondo azul semitransparente */
    border-radius: 5px; /* Bordes redondeados para el fondo */
}

/* Opcional: Cambiar el color al pasar el ratón sobre el enlace activo */
.navbar-nav .nav-link.active:hover {
    color: var(--color-primary); 
    background-color: rgba(3, 10, 140, 0.2);
}

/* Cambiar el color al pasar el ratón sobre cualquier enlace de navegación */
.navbar-nav .nav-link:hover {
    color: var(--color-primary);
}

/* Opcional: Eliminar el subrayado de los enlaces */
.nav-link {
    text-decoration: none;
}

/* Asegurarse de que los enlaces dentro de badges no hereden estilos no deseados */
.badge .nav-link {
    color: #fff;
}

.badge .nav-link:hover {
    color: #fff;
    text-decoration: none;
}

/* Añadir transición suave para cambios de color */
.navbar-nav .nav-link {
    transition: color 0.3s, background-color 0.3s;
}


/* Estilo personalizado para el enlace de Cerrar Sesión */
.logout-link:hover {
    color: #ff4d4d !important; /* Rojo al hacer hover */
}

/* Opcional: Si deseas cambiar el fondo del badge al hacer hover en el enlace */
.logout-link:hover {
    background-color: rgba(255, 0, 0, 0.1) !important; /* Fondo rojo semitransparente */
    border-radius: 5px; /* Bordes redondeados para el fondo */
}       

#logOutB:hover {
    background-color: #ff4d4d !important; /* Rojo al hacer hover */
    color: white;
}

/* Tablas Responsivas */
@media (max-width: 768px) {
    .table-responsive-stack td {
      display: block;
      text-align: left; /* Ajusta para alineación izquierda */
      border: none;
      padding: 10px 5px; /* Espaciado interno */
      font-size: 0.9rem; /* Texto más pequeño */
      background-color: var(--color-light-gray); /* Fondo claro */
    }
    .table-responsive-stack td::before {
      content: attr(data-label); /* Etiqueta del campo */
      font-weight: bold;
      text-transform: capitalize;
      color: var(--color-dark-text); /* Color de texto principal */
      margin-bottom: 5px; /* Separación entre campo y valor */
      display: block;
    }
    .table-responsive-stack tr {
      display: block;
      margin-bottom: 1rem;
      border: 1px solid var(--color-primary); /* Borde acorde al diseño */
      border-radius: 8px;
      padding: 5px;
      background-color: var(--color-white); /* Fondo blanco */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .table-responsive-stack thead {
      display: none; /* Oculta los encabezados */
    }

  }