/* estilos.css v70.0 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* --- 1. BASE Y FONDOS --- */
body {
    font-family: 'Montserrat', sans-serif;
    color: #fff !important;
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.bg-login {
    background-image: url("fondo-log.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    align-items: center; justify-content: center;
}
.bg-dashboard {
    background-image: url("fondo-interfaz.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: block;
}

/* --- 2. TARJETAS (GLASSMORPHISM) --- */
.card, .modal-content {
    background: rgba(20, 20, 35, 0.75) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
    border-radius: 15px !important;
    color: #fff !important;
}

/* --- 3. ESTILOS DE TABLA Y SCROLL --- */
/* Contenedor que permite el scroll */
.table-container {
    max-height: 500px; /* Altura fija */
    overflow-y: auto;  /* Scroll vertical */
    border-radius: 0 0 15px 15px;
}

/* Tabla transparente */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: #fff;
    --bs-table-border-color: rgba(255, 255, 255, 0.1);
    margin-bottom: 0;
    width: 100%;
}

/* Cabecera FIJA y MORADA */
.table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #6a5acd !important; /* Morado sólido */
    color: #fff !important;
    border: none;
    padding: 15px;
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.table tbody td {
    padding: 12px 15px;
    vertical-align: middle;
    color: #ddd; 
    font-size: 0.9em;
    white-space: nowrap; 
}

/* BARRA DE SCROLL PERSONALIZADA */
.table-container::-webkit-scrollbar { width: 8px; height: 8px; }
.table-container::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); }
.table-container::-webkit-scrollbar-thumb { 
    background: rgba(106, 90, 205, 0.6); 
    border-radius: 4px; 
}
.table-container::-webkit-scrollbar-thumb:hover { background: rgba(106, 90, 205, 1); }

/* --- 4. OTROS --- */
.card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    font-weight: 700; font-size: 1.2em; padding: 15px;
}
.form-control {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff !important; border-radius: 25px;
}
.form-control:focus {
    background: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    border-color: #fff;
}
.form-control::placeholder { color: #bbb; }

.btn-pink {
    background-color: #E91E63; color: white; border-radius: 25px; padding: 10px 25px; font-weight: bold; border: none;
}

/* --- 5. COLORES DE ESTADO (Protocolos) --- */
.bg-orange { background-color: #FF9800 !important; color: white !important; }
.bg-safe { background-color: #4CAF50 !important; }
.bg-warning { background-color: #FFC107 !important; color: black !important; }
.bg-unsafe { background-color: #F44336 !important; }