@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

body {
    font-family: 'Open Sans', Arial, sans-serif;
    background-color: #f2f4f8 !important; 
    color: #333333;
}

/* =========================================
   BARRA DE NAVEGACIÓN 
   ========================================= */
.navbar-custom {
    
    background-image: linear-gradient(rgba(0, 50, 91, 0), rgba(0, 50, 83, 0.624)), url('UCANFLY.png') !important; 
    
    background-size: cover !important;
    background-position: center !important;
    min-height: 180px !important;
    border-bottom: 4px solid #00a4e4 !important; 
}

.navbar-custom .text-white {
     color: #ffffff !important; 
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* =========================================
   TARJETAS Y CONTENEDORES
   ========================================= */
.card {
    border: none !important;
    border-radius: 2px !important; /* Bordes casi cuadrados, más serios */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

.card-header {
    background-color: #00325b !important; /* Cabeceras en azul ESA */
    color: white !important;
    border-radius: 2px 2px 0 0 !important;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* =========================================
   TABLAS (Limpias y técnicas)
   ========================================= */
.table {
    margin-bottom: 0;
}

.table-dark {
    background-color: #00325b !important;
    color: white;
}

.table-dark th {
    background-color: #00325b !important;
    border-bottom: 3px solid #00a4e4 !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.table-hover tbody tr:hover {
    background-color: #e8f4f8 !important; 
}

/* =========================================
   BOTONES 
   ========================================= */
.btn {
    border-radius: 2px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 0.8rem !important;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

/* Botones principales de acción (Buscar, Coger) */
.btn-primary, .btn-success {
    background-color: #00a4e4 !important; /* Cyan ESA */
    border: none !important;
    color: white !important;
    
}

.btn-primary:hover, .btn-success:hover {
    background-color: #0087bc !important;
    box-shadow: 0 4px 8px rgba(0, 164, 228, 0.3);
}

/* Botones de advertencia o Admin */
.btn-warning {
    background-color: #f39200 !important; 
    border: none !important;
    color: white !important;
}

.btn-warning:hover {
    background-color: #cc7a00 !important;
}

/* Botones de peligro (Borrar, Devolver) */
.btn-danger {
    background-color: #e4002b !important; 
    border: none !important;
}
.btn-danger:hover {
    background-color: #b30021 !important;
}

/* =========================================
   ETIQUETAS (Badges)
   ========================================= */
.badge {
    font-weight: 600;
    border-radius: 2px;
    padding: 0.4em 0.6em;
    letter-spacing: 0.5px;
}
.text-success{
   color: #0ac114 !important;
}
.text-secondary{

    color: #00a4e4 !important;
}
.bg-primary { background-color: #00325b !important; }
.bg-secondary { background-color: #7b868c !important; }

/* =========================================
   ADAPTACIÓN PARA MÓVILES 
   ========================================= */
@media (max-width: 900px) {
    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table tr { margin-bottom: 1rem; border: 1px solid #dee2e6; border-radius: 2px; background-color: #fff; }
    .table td { 
        padding: 0.75rem; 
        border-bottom: 1px solid #e9ecef; 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
    }
    .table td::before { 
        content: attr(data-label); 
        font-weight: 600; 
        color: #00325b; 
        text-transform: uppercase;
        font-size: 0.8rem;
    }
}