@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* Paleta Corporativa de Aceites Lis */
    --oro: #9a831c;
    --negro: #1d1d1b;
    --blanco: #f8f6f0;
    --verde-claro: #cad1b6;
    --verde-oscuro: #888e61;
    --azul: #425da7;
    --naranja: #c18255;
    --amarillo: #d2b05b;

    /* Tipografías de Accesibilidad */
    --titulos: 'Libre Baskerville', serif;
    --texto: 'Montserrat', sans-serif;
}

/* --- Base del Sistema --- */
body { 
    font-family: var(--texto);
    background-color: var(--blanco); 
    color: var(--negro); 
    margin: 0; 
    padding: 0; 
    font-size: 1rem;
    line-height: 1.5;
    overflow-x: hidden; /* Evita desbordamiento lateral */
    width: 100%;
}

h1, h2, h3, h4 {
    font-family: var(--titulos);
    color: var(--negro);
    margin-top: 0;
}

/* --- Estructura de Diseño (Layout) --- */
.container { 
    max-width: 75rem; /* 1200px */
    margin: 1.875rem auto; 
    padding: 0 1.25rem; 
}

header { 
    background-color: var(--blanco); 
    color: var(--oro); 
    padding: 0.9375rem 1.25rem; 
    display: flex; 
    flex-direction: column;
    align-items: center; 
    gap: 0.625rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.05);
    width: 100%;           
    box-sizing: border-box; /* Bloquea el ancho para que no se vaya a la derecha */
}

.logo-container { 
    width: 100%; 
    text-align: center; 
}

.logo-container img { 
    width: 45%;           /* Líquido en móviles */
    min-width: 7.5rem;    /* Tamaño mínimo en pantallas pequeñas */
    max-width: 11.25rem;  /* Ancho óptimo en ordenador */
    height: auto;         
    display: inline-block;
}

.user-nav {
    width: 100%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    border-top: 0.0625rem solid rgba(29, 29, 27, 0.1); 
    padding-top: 0.625rem;
}

header h2 { 
    margin: 0; 
    font-size: 1rem; 
    font-weight: 400;
    color: var(--negro);
}

/* --- Formularios y Accesos --- */
.login-container { 
    max-width: 25rem; 
    margin: 6.25rem auto; 
    background: white; 
    padding: 1.875rem; 
    border-radius: 0.5rem; 
    box-shadow: 0 0.25rem 0.9375rem rgba(0,0,0,0.1); 
    text-align: center; 
}

.password-container {
    position: relative;
    width: 100%;
}

.password-container input {
    padding-right: 2.8125rem;
}

.toggle-password {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1.25rem;
    user-select: none;
    color: var(--negro);
    opacity: 0.6;
}

input, select, textarea { 
    width: 100%; 
    padding: 0.875rem; 
    margin: 0.625rem 0; 
    border: 0.0625rem solid #ccc; 
    border-radius: 0.3125rem; 
    box-sizing: border-box; 
    font-size: 1rem;
    background-color: white;
}

textarea {
    resize: vertical;
    min-height: 5rem;
}

/* --- Botoneras y Usabilidad Táctil --- */
button { 
    background-color: var(--oro); 
    color: var(--blanco); 
    padding: 0.9375rem; 
    border: none; 
    border-radius: 0.3125rem; 
    cursor: pointer; 
    width: 100%; 
    font-size: 1rem; 
    font-weight: bold;
    transition: background-color 0.2s ease;
}

button:hover { 
    background-color: var(--azul); 
}

.grid-botones { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 0.9375rem; 
    margin-bottom: 0.9375rem; 
    width: 100%;
    box-sizing: border-box;
}

.grid-botones button {
    font-size: 1.05rem;
    color: var(--negro);
}

.btn-entrada { background-color: var(--verde-claro); }
.btn-salida { background-color: var(--naranja); color: var(--blanco) !important; }
.btn-pausa { background-color: var(--amarillo); }
.btn-logout { color: var(--naranja); text-decoration: none; font-weight: bold; }
.btn-logout:hover { text-decoration: underline; }

/* --- Tarjetas de Resumen de Horas --- */
.resumen-horas-grid {
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 0.9375rem; 
    margin-bottom: 1.25rem;
    width: 100%;
    box-sizing: border-box;
}

.tarjeta-horas {
    background: white; 
    padding: 0.9375rem; 
    border-radius: 0.5rem; 
    text-align: center;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.05); 
    border-top: 0.25rem solid var(--oro);
}

.tarjeta-horas.mes-pasado { 
    border-top-color: var(--azul);
}

.tarjeta-horas h4 { 
    margin: 0 0 0.3125rem 0; 
    color: var(--negro); 
    font-size: 0.8125rem; 
    text-transform: uppercase; 
    opacity: 0.7;
}

.tarjeta-horas .numero-horas { 
    font-size: 1.375rem; 
    font-weight: bold; 
    color: var(--oro); 
}

/* --- Alertas de Control de Fichaje --- */
.msg-box { 
    padding: 0.75rem 1rem; 
    border-radius: 0.3125rem; 
    font-weight: bold; 
    margin-bottom: 1.25rem; 
    font-size: 0.9375rem;
}

.msg-success { 
    color: var(--negro); 
    background-color: var(--verde-claro); 
    border-left: 0.3125rem solid var(--verde-oscuro); 
}

.msg-error { 
    color: var(--blanco); 
    background-color: var(--naranja); 
    border-left: 0.3125rem solid #c0392b; 
}

/* --- Paneles de Administración --- */
.admin-grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 1.875rem; 
}

.box { 
    background: white; 
    padding: 1.5625rem; 
    border-radius: 0.5rem; 
    box-shadow: 0 0.125rem 0.625rem rgba(0,0,0,0.05); 
}

/* --- Tablas e Historiales --- */
table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 1.25rem; 
    background: white; 
}

th, td { 
    padding: 0.75rem; 
    text-align: left; 
    border-bottom: 0.0625rem solid #ddd; 
    font-size: 0.9375rem;
}

th { 
    background-color: var(--blanco); 
    color: var(--negro);
    font-weight: bold;
}

.btn-mini { 
    padding: 0.3125rem 0.625rem; 
    font-size: 0.75rem; 
    width: auto; 
    background-color: var(--azul);
    color: var(--blanco);
    display: inline-block;
}

/* --- Tabla Resumen de Auditoría --- */
.tabla-resumen-auditor {
    margin-bottom: 1.875rem;
    border-left: 0.25rem solid var(--azul);
}

.tabla-resumen-auditor th {
    background-color: var(--verde-claro);
    color: var(--negro);
}

.badge-horas {
    font-weight: bold;
    color: var(--oro);
}

/* --- Consultas de Medios Responsivas (Desktop) --- */
@media (min-width: 768px) {
    header { 
        flex-direction: row; 
        justify-content: space-between; 
        padding: 0.9375rem 1.875rem; 
    }
    .logo-container { 
        width: auto; 
        text-align: left; 
    }
    .user-nav { 
        width: auto; 
        border-top: none; 
        padding-top: 0; 
        gap: 1.25rem; 
    }
    header h2 { 
        font-size: 1.125rem; 
    }
    .admin-grid { 
        grid-template-columns: 1fr 1fr; 
    }
}