body { font-family: Arial, sans-serif; background-color: #0A3A60; margin: 0; padding: 20px; color: #333; box-sizing: border-box; position: relative;
}
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Se coloca detrás de los contenedores, formularios y la cámara */
    
    /* Ruta de tu imagen PNG */
    background-image: url('../image/blanco.png'); 
    
    /* Configuración de repetición y distanciamiento */
    background-repeat: repeat;
    background-size: 450px 150px; 

    /* ==========================================================================
       CONTROL DE OPACIDAD
       0.04 equivale al 4% de visibilidad (estilo marca de agua sutil).
       Si la quieres más invisible, bájala a 0.02. Si la quieres notar más, súbela a 0.08.
       ========================================================================== */
    opacity: 0.10; 
}
.container, .card { max-width: 500px; margin: 20px auto; background: #fff; padding: 25px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); text-align: center; }
.login-card { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); width: 340px; margin: 80px auto; }
#video, #imgCapturada { width: 320px; height: 240px; border: 3px solid #0A3A60; border-radius: 8px; background: #000; object-fit: cover; }
.img-thumb { width: 55px; height: 55px; object-fit: cover; border-radius: 4px; border: 1px solid #ccc; }
input[type="text"], input[type="password"], select, button { width: 100%; padding: 12px; margin: 8px 0; box-sizing: border-box; font-size: 15px; border-radius: 5px; }
input[type="text"], input[type="password"] { border: 1px solid #ccc; outline: none; }
input[type="text"]:focus, input[type="password"]:focus { border-color: #0A3A60; width: 100%; }
button { background-color: #28a745; color: #fff; border: none; cursor: pointer; font-weight: bold; }
button:hover { background-color: #218838; }
.btn-danger { background-color: #dc3545; }
.btn-danger:hover { background-color: #c82333; }
.btn-primary { background-color: #0A3A60; }
.btn-primary:hover { background-color: #777777; }
.info-box { position: relative; display: none; margin-top: 20px; text-align: left; background: #e9f5ff; padding: 15px; border-left: 5px solid #0A3A60; border-radius: 4px; }
.info-box h3 { margin-top: 0; color: #0A3A60; }
/* Nuevo estilo para cuando ya está registrado */
.info-box.bg-rojo {
    background: #fde8e8;          /* Fondo rojo muy suave para que no canse la vista */
    border-left: 5px solid #e11d48; /* Borde izquierdo rojo intenso de advertencia */
}
/* Cambia el color del título de azul a rojo oscuro */
.info-box.bg-rojo h3 {
    color: #9f1239;
}
/* ==========================================================================
   NUEVOS ESTILOS: ESTRUCTURA PARA EL RECUADRO DE AULA GIGANTE
   ========================================================================== */
.info-layout {
    display: block;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.info-textos {
    text-align: left;
}

.recuadro-aula {
    position: absolute;
    top: 15px;      /* Distancia desde el borde superior del fondo */
    right: 15px;    /* Distancia desde el borde derecho del fondo */
    width: 100px;
    height: 100px;
    border: 3px solid #0A3A60; /* Borde azul estándar */
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 60px;
    font-weight: bold;
    color: #333;
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
/* Mantiene el borde rojo si el contenedor de advertencia está activo */
.info-box.bg-rojo .recuadro-aula {
    border-color: #e11d48;
}

.mensaje { font-weight: bold; margin-top: 12px; }
.error { color: #dc3545; font-size: 14px; text-align: center; }
.badge-asistio { background-color: #28a745; color: #fff; padding: 4px 8px; border-radius: 4px; font-weight: bold; font-size: 12px; }
.badge-falto { background-color: #dc3545; color: #fff; padding: 4px 8px; border-radius: 4px; font-weight: bold; font-size: 12px; }
.admin-link { display: inline-block; margin-top: 15px; color: #777777; text-decoration: none; font-size: 14px; }
.header { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.summary-box { display: flex; gap: 20px; margin: 20px 0; }
.summary-box .card { flex: 1; margin: 0; }
table { width: 100%; border-collapse: collapse; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-top: 15px; }
th, td { border: 1px solid #dee2e6; padding: 10px; text-align: center; }
th { background-color: #0A3A60; color: #fff; }
.btn-pdf { background-color: #0A3A60; color: #fff; padding: 10px 15px; text-decoration: none; border-radius: 5px; font-weight: bold; }
.btn-pdf:hover { background-color: #06253F; }
/* Reducir y centrar la caja de texto del DNI (8 dígitos) */
#dni {
    width: 160px;          /* Ancho ideal para albergar los 8 números */
    display: block;        /* Permite aplicar el centrado automático */
    margin: 15px auto;     /* Centra la caja horizontalmente y da espacio vertical */
    text-align: center;    /* Centra el texto y el placeholder */
    letter-spacing: 2px;   /* Espaciado elegante entre números */
    font-weight: bold;     /* Resalta los números al escribir */
    
    /* Configuración del Borde */
    border: 2px solid #0A3A60; /* Borde grueso con el azul marino de tu sistema */
    border-radius: 6px;        /* Bordes suavemente redondeados */
    transition: all 0.3s ease; /* Animación suave al hacer clic */
}
/* Efecto cuando la caja de texto está activa (Focus) */
#dni:focus {
    border-color: #8CBEE9;     /* El borde cambia a verde indicando que está listo para recibir el DNI */
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.3); /* Destello verde suave alrededor */
    background-color: #f4fbf6; /* Fondo con un toque verde muy limpio */
}