/* ---
 * STYLE.CSS (Interfaz del Funcionario - REDISEÑADO)
 * - Diseño tipo "Tarjeta"
 * - Colores estilo Google
 * - Mobile-First (desde 300px)
 --- */

/* --- 1. Variables de Color (Paleta Google) --- */
:root {
    --color-primary: #4285F4; /* Google Blue */
    --color-primary-dark: #3367D6;
    --color-danger: #DB4437; /* Google Red */
    --color-success: #0F9D58; /* Google Green */
    
    --color-background: #f8f9fa; /* Gris muy claro */
    --color-card: #ffffff;
    --color-text: #202124; /* Gris oscuro de Google */
    --color-text-light: #5f6368;
    --color-border: #dadce0;
    
    --border-radius: 8px;
    --box-shadow: 0 1px 3px 0 rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
}

/* --- 2. Reset Básico y Body --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--color-background); /* Fondo gris claro */
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    padding: 15px; /* Espacio para que la tarjeta "flote" */
    
    /* Centrar el contenido */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 3. Contenedor Principal (Ahora es la Tarjeta) --- */
.app-container {
    width: 100%;
    max-width: 500px;
    background: var(--color-card);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden; /* Para contener los bordes redondeados */
    
    /* Animación de entrada */
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
    to { opacity: 1; transform: translateY(0); }
}

/* --- 4. Header (Logo) --- */
.app-header {
    text-align: center;
    padding: 30px 20px 20px;
    border-bottom: 1px solid var(--color-border);
}

.logo {
    max-width: 150px;
    height: auto;
}

/* --- 5. Contenido Principal y Pantallas --- */
main {
    padding: 25px 20px;
}

.screen {
    display: none; /* Ocultas por defecto */
    flex-direction: column;
    animation: screenFadeIn 0.3s ease-in-out;
}
.screen.active {
    display: flex; /* La pantalla activa se muestra */
}
@keyframes screenFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- 6. Estilos de Texto y Títulos --- */
h2 {
    color: var(--color-text);
    margin-bottom: 8px;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
}
p {
    color: var(--color-text-light);
    margin-bottom: 24px;
    text-align: center;
    font-size: 1rem;
}
small {
    display: inline-block;
    margin-top: 8px;
    color: var(--color-text-light);
    font-size: 0.85rem;
}

/* --- 7. Formularios (Modernos) --- */
form {
    width: 100%;
}

.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.9rem;
}
.form-group input[type="text"],
.form-group input[type="password"] {
    width: 100%;
    padding: 14px 16px;
    font-size: 1.1rem; /* Más grande para móviles */
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: #f8f9fa; /* Fondo de input */
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none; /* Arreglo iOS */
}
.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.2);
    background: var(--color-card);
}

/* --- 8. Botones (Estilo Google) --- */
.btn {
    display: block;
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s, box-shadow 0.2s;
    margin-top: 10px;
    -webkit-tap-highlight-color: transparent; /* Quita el flash en móviles */
}
.btn-primary {
    background-color: var(--color-primary);
    color: white;
    box-shadow: 0 1px 2px 0 rgba(66,133,244,.3), 0 1px 3px 1px rgba(66,133,244,.15);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--color-primary-dark);
    box-shadow: 0 1px 3px 0 rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
}
.btn-secondary {
    background-color: #f1f3f4; /* Gris Google */
    color: var(--color-text-light);
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: #e8eaed;
}

/* --- 9. Pantalla Escáner QR --- */
#qr-reader {
    width: 100%;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}
#qr-reader button { /* Botón de la librería */
    background-color: var(--color-text-light) !important;
    color: white !important;
    font-size: 0.85rem !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    margin-top: 10px !important;
}

/* --- 10. Pantalla de Feedback (Éxito/Error) --- */
#screen-feedback {
    text-align: center;
    align-items: center;
}
.feedback-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
/* Símbolos SVG (inline) con nuevos colores */
.feedback-icon.success {
    background-color: #e6f4ea; /* Fondo verde suave */
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='%230F9D58' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z'/%3E%3C/svg%3E");
}
.feedback-icon.error {
    background-color: #fdeded; /* Fondo rojo suave */
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='%23DB4437' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
#feedback-title.success { color: var(--color-success); }
#feedback-title.error { color: var(--color-danger); }

/* --- 11. Overlay de Carga (Spinner) --- */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
}
.loader-overlay.active {
    display: flex;
}
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f1f3f4; /* Gris claro */
    border-top-color: var(--color-primary); /* Azul */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- 12. Footer --- */
.app-footer {
    padding: 20px 20px 25px; /* Añadimos más padding abajo */
    text-align: center;
    font-size: 9px; /* Texto a 9px como solicitaste */
    color: var(--color-text-light); /* Usamos la variable de color */
    border-top: 1px solid var(--color-border); /* Añadimos un separador */
    line-height: 1.5;
}
.app-footer p {
    margin: 0;
    font-size: 9px;
}



    /* Estilos para el Aviso Académico */
    .empty-state-card {
        background-color: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 30px 20px;
        text-align: center;
        margin-top: 20px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    .empty-state-card .icon {
        font-size: 3rem;
        margin-bottom: 15px;
    }
    .empty-state-card h3 {
        color: #333;
        font-size: 1.2rem;
        margin-bottom: 10px;
    }
    .empty-state-card p {
        color: #666;
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 20px;
    }
    .reasons-list {
        text-align: left;
        background-color: #f8f9fa;
        padding: 15px 15px 15px 35px; /* Espacio para bullets */
        border-radius: 6px;
        font-size: 0.85rem;
        color: #555;
    }
    .reasons-list li {
        margin-bottom: 8px;
    }