/* ================================================
   Sistema de Asistencia Estudiantil — Estilos
   ================================================ */

:root {
    --color-primario:    #1a56db;
    --color-secundario:  #3f83f8;
    --color-exito:       #0e9f6e;
    --color-peligro:     #e02424;
    --color-advertencia: #c27803;
    --fondo-pagina:      #f3f4f6;
    --sombra-suave:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
}

body {
    background-color: var(--fondo-pagina);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Barra de navegación */
.navbar {
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.navbar-brand {
    font-size: 1.1rem;
    letter-spacing: -.02em;
}

/* Tarjetas */
.card {
    border-radius: .75rem !important;
    box-shadow: var(--sombra-suave);
}
.card-header {
    border-radius: .75rem .75rem 0 0 !important;
    padding: 1rem 1.25rem;
}

/* Tablas */
.table thead th {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    border-bottom-width: 1px;
}
.table tbody tr:hover {
    background-color: rgba(26,86,219,.04);
}

/* Botones */
.btn {
    border-radius: .5rem;
    font-weight: 500;
}
.btn-primary {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
}
.btn-primary:hover {
    background-color: #1648c0;
    border-color: #1648c0;
}

/* Badges */
.badge {
    font-weight: 500;
    letter-spacing: .02em;
}

/* Contenedor principal */
main.container-fluid {
    max-width: 1200px;
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

/* Escáner QR */
#vistaQr {
    position: relative;
    border-radius: .75rem;
    overflow: hidden;
}
#videoQr {
    display: block;
    border-radius: .5rem;
}

/* Vista de login */
body.login-page {
    background: linear-gradient(135deg, #1a56db 0%, #3f83f8 100%);
}

/* Formularios */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 .2rem rgba(26,86,219,.2);
}

/* Alertas */
.alert {
    border-radius: .75rem;
    border: none;
}

/* Animación de carga */
@keyframes pulso {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}
.cargando {
    animation: pulso 1.5s ease-in-out infinite;
}

/* Responsive: ocultar columnas en móvil */
@media (max-width: 576px) {
    .ocultar-movil { display: none !important; }
    .card-body { padding: .75rem; }
}

/* PWA: barra de estado en iOS */
@supports (padding-top: env(safe-area-inset-top)) {
    .navbar { padding-top: env(safe-area-inset-top); }
}