/* Importo las fuentes - ha de ir primero */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=JetBrains+Mono&display=swap');

/* ================================================
   TIMETRACK - Hoja de estilos principal
   ================================================ */


/* ------------------------------------------------
   VARIABLES CSS
   ------------------------------------------------ */
:root {
    --color-principal:        #0F6E56;
    --color-acento:           #1D9E75;
    --color-acento-suave:     #5DCAA5;
    --color-fondo:            #F4F7F5;
    --color-superficie:       #FFFFFF;
    --color-texto:            #1A2E26;
    --color-texto-apagado:    #6A8F82;
    --color-borde:            #C8DDD5;

    --color-informacion:      #2563EB;
    --color-advertencia:      #D97706;
    --color-error:            #DC2626;
    --color-neutro:           #6B7280;

    --fuente-cuerpo:          'Inter', sans-serif;
    --fuente-mono:            'JetBrains Mono', monospace;

    --radio-pequeno:          4px;
    --radio-mediano:          8px;
    --radio-grande:           12px;
}


/* ------------------------------------------------
   RESET Y BASE
   ------------------------------------------------ */
* {
    margin:     0;
    padding:    0;
    box-sizing: border-box;
}

/* El body es flex en columna para que el footer quede siempre abajo */
body {
    font-family:      var(--fuente-cuerpo);
    background-color: var(--color-fondo);
    color:            var(--color-texto);
    font-size:        12px;
    min-height:       100vh;

    display:        flex;
    flex-direction: column;
}


/* ------------------------------------------------
   HEADER - Mobile First
   En móvil y tablet: logo + hamburguesa en fila,
   menú desplegable debajo
   En ordenador: todo en una fila
   ------------------------------------------------ */
header {
    background-color: var(--color-principal);
    color:            var(--color-superficie);
    padding:          12px 16px;
    display:          flex;
    flex-direction:   column;
    gap:              0;
}

/* Fila superior: logo a la izquierda, controles a la derecha */
.header-top {
    display:         flex;
    flex-direction:  row;
    justify-content: space-between;
    align-items:     center;
    width:           100%;
}

.header-logo {
    display:        flex;
    flex-direction: row;
    align-items:    center;
    gap:            10px;
}

.header-logo img {
    width:         40px;
    height:        40px;
    border-radius: var(--radio-pequeno);
    object-fit:    cover;
    flex-shrink:   0;
}

.header-logo h1 {
    font-size:      18px;
    font-weight:    500;
    letter-spacing: 1px;
    color:          var(--color-superficie);
}

/* Contenedor derecho: usuario + modo oscuro + hamburguesa */
.header-derecha {
    display:        flex;
    flex-direction: row;
    align-items:    center;
    gap:            10px;
}

.header-usuario {
    display:        flex;
    flex-direction: row;
    align-items:    center;
    gap:            4px;
}

.header-usuario-saludo {
    font-size: 11px;
    color:     var(--color-acento-suave);
}

.header-usuario-nombre {
    font-size:   13px;
    font-weight: 500;
    color:       var(--color-superficie);
}

/* Menú oculto por defecto en móvil y tablet */
header nav {
    display:        none;
    flex-direction: column;
    gap:            4px;
    width:          100%;
    padding:        10px 0 4px 0;
    border-top:     1px solid var(--color-acento);
    margin-top:     10px;
}

/* Cuando tiene la clase nav-activo se despliega */
header nav.nav-activo {
    display: flex;
}

header nav a {
    color:           var(--color-superficie);
    text-decoration: none;
    font-size:       13px;
    padding:         10px 12px;
    border-radius:   var(--radio-pequeno);
    border:          1px solid var(--color-acento-suave);
    transition:      background-color 0.2s;
    display:         flex;
    align-items:     center;
}

header nav a:hover {
    background-color: var(--color-acento);
    border-color:     var(--color-acento);
}

/* Botón hamburguesa */
#btn-menu {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             5px;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    padding:         4px;
    margin-top:      0;
    width:           32px;
    height:          32px;
    align-self:      center;
}

/* Las tres líneas del hamburguesa */
#btn-menu span {
    display:          block;
    width:            24px;
    height:           2px;
    background-color: var(--color-superficie);
    border-radius:    2px;
    transition:       all 0.3s;
}

/* Animación a X cuando está activo */
#btn-menu.btn-menu-activo span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

#btn-menu.btn-menu-activo span:nth-child(2) {
    opacity: 0;
}

#btn-menu.btn-menu-activo span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Botón modo oscuro: flotante en esquina inferior derecha */
#btn-modo {
    position:         fixed;
    bottom:           24px;
    right:            24px;
    z-index:          999;
    font-size:        20px;
    padding:          0;
    margin-top:       0;
    background-color: var(--color-principal);
    border:           2px solid var(--color-acento-suave);
    border-radius:    50%;
    color:            var(--color-superficie);
    width:            48px;
    height:           48px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    line-height:      1;
    cursor:           pointer;
    box-shadow:       0 4px 12px rgba(0,0,0,0.25);
    transition:       background-color 0.2s, transform 0.2s;
}

#btn-modo:hover {
    background-color: var(--color-acento);
    border-color:     var(--color-acento);
    transform:        scale(1.1);
}


/* ------------------------------------------------
   MAIN
   Crece para empujar el footer hacia abajo
   ------------------------------------------------ */
main {
    flex:    1;
    padding: 16px;
    width:   100%;

    display:        flex;
    flex-direction: column;
    gap:            16px;
}

main h2 {
    font-size:      18px;
    font-weight:    500;
    color:          var(--color-principal);
    border-bottom:  2px solid var(--color-borde);
    padding-bottom: 6px;
}

main h3 {
    font-size:   14px;
    font-weight: 500;
    color:       var(--color-texto);
}

/* Cabecera de página con título a la izquierda y acción a la derecha */
.pagina-cabecera {
    display:         flex;
    flex-direction:  row;
    justify-content: space-between;
    align-items:     center;
    gap:             12px;
}

.pagina-cabecera button {
    margin-top: 0;
    flex-shrink: 0;
}


/* ------------------------------------------------
   FOOTER
   ------------------------------------------------ */
footer {
    background-color: var(--color-principal);
    color:            var(--color-acento-suave);
    padding:          14px 16px;
    font-size:        10px;
    margin-top:       auto;

    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
}

footer p {
    margin: 0;
}


/* ------------------------------------------------
   FORMULARIOS
   ------------------------------------------------ */
form {
    display:        flex;
    flex-direction: column;
    align-items:    center;
}

fieldset {
    border:         2px solid var(--color-borde);
    border-radius:  var(--radio-mediano);
    padding:        16px;
    padding-bottom: 20px;
    background:     var(--color-superficie);
    width:          100%;
    max-width:      440px;

    display:        flex;
    flex-direction: column;
    gap:            4px;
}

legend {
    font-weight: 500;
    color:       var(--color-principal);
    padding:     0 6px;
}

label {
    font-size:  11px;
    color:      var(--color-texto-apagado);
    margin-top: 8px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="file"],
input[type="time"],
select,
textarea {
    width:         100%;
    padding:       7px 10px;
    border:        1px solid var(--color-borde);
    border-radius: var(--radio-pequeno);
    font-family:   var(--fuente-cuerpo);
    font-size:     12px;
    color:         var(--color-texto);
    background:    var(--color-fondo);
    outline:       none;
    transition:    border-color 0.2s;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-acento);
}

/* Textarea con resize vertical */
textarea {
    resize:     vertical;
    margin-top: 4px;
}

/* Quitar flechas de los inputs time */
input[type="time"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-calendar-picker-indicator {
    display:            none;
    -webkit-appearance: none;
}

/* Inputs time dentro de tabla más compactos */
table input[type="time"] {
    padding:   4px 6px;
    font-size: 11px;
    width:     auto;
    min-width: 90px;
}

/* Validación de formularios */
.error-campo {
    font-size:  10px;
    color:      var(--color-error);
    margin-top: 2px;
    display:    block;
}


/* ------------------------------------------------
   BOTONES
   ------------------------------------------------ */
input[type="submit"],
button {
    background-color: var(--color-principal);
    color:            var(--color-superficie);
    border:           none;
    border-radius:    var(--radio-pequeno);
    padding:          8px 18px;
    font-family:      var(--fuente-cuerpo);
    font-size:        12px;
    font-weight:      500;
    cursor:           pointer;
    margin-top:       12px;
    transition:       background-color 0.2s;
    align-self:       flex-start;
}

input[type="submit"]:hover,
button:hover {
    background-color: var(--color-acento);
}

/* Botones dentro de tabla sin margin-top */
table input[type="submit"],
table button,
td input[type="submit"],
td button {
    margin-top: 0;
}

/* Botón login centrado */
.contenedor-login input[type="submit"] {
    align-self: center;
}

/* Botón borrar en rojo */
input[name="borrar"] {
    background-color: var(--color-error);
    margin-top:       0;
}

input[name="borrar"]:hover {
    background-color: #b91c1c;
}

/* Botón horario */
.btn-horario {
    background-color: var(--color-principal);
    color:            var(--color-superficie);
    border:           none;
    border-radius:    var(--radio-pequeno);
    padding:          8px 18px;
    font-family:      var(--fuente-cuerpo);
    font-size:        12px;
    font-weight:      500;
    cursor:           pointer;
    margin-top:       0;
    transition:       background-color 0.2s;
}

.btn-horario:hover {
    background-color: var(--color-acento);
}

/* Botón fichar */
.btn-fichar {
    width:            120px;
    padding:          8px 16px;
    font-size:        13px;
    font-weight:      500;
    letter-spacing:   1px;
    background-color: var(--color-principal);
    color:            var(--color-superficie);
    border-radius:    var(--radio-pequeno);
    cursor:           pointer;
    margin-top:       0;
    border:           none;
    transition:       background-color 0.2s;
}

.btn-fichar:hover {
    background-color: var(--color-acento);
}


/* ------------------------------------------------
   MENSAJES DE ÉXITO Y ERROR
   ------------------------------------------------ */
p[style*="color:green"],
.mensaje-ok {
    background-color: #d1fae5;
    color:            #065f46;
    border:           1px solid #6ee7b7;
    border-radius:    var(--radio-pequeno);
    padding:          8px 12px;
    font-size:        12px;
    display:          flex;
    align-items:      center;
    gap:              8px;
}

p[style*="color:red"],
.mensaje-error {
    background-color: #fee2e2;
    color:            var(--color-error);
    border:           1px solid #fca5a5;
    border-radius:    var(--radio-pequeno);
    padding:          8px 12px;
    font-size:        12px;
    display:          flex;
    align-items:      center;
    gap:              8px;
}

.mensaje-item + .mensaje-item {
    margin-top: 8px;
}


/* ------------------------------------------------
   TABLAS
   ------------------------------------------------ */
.tabla-wrapper {
    width:      100%;
    overflow-x: auto;
}

table {
    width:           100%;
    border-collapse: collapse;
    background:      var(--color-superficie);
    font-size:       11px;
    min-width:       600px;
}

table th {
    background-color: var(--color-principal);
    color:            var(--color-superficie);
    padding:          10px 12px;
    text-align:       left;
    font-weight:      500;
}

table td {
    padding:        8px 12px;
    border-bottom:  1px solid var(--color-borde);
    color:          var(--color-texto);
    vertical-align: middle;
}

table td.acciones {
    white-space: nowrap;
}

table td.acciones input,
table td.acciones a,
table td.acciones form {
    display:        inline-block;
    vertical-align: middle;
    margin:         0 2px;
}

table td.acciones a {
    text-decoration: none;
}

table td.acciones a input {
    background-color: var(--color-principal);
    color:            var(--color-superficie);
    border:           none;
    border-radius:    var(--radio-pequeno);
    padding:          8px 18px;
    font-family:      var(--fuente-cuerpo);
    font-size:        12px;
    font-weight:      500;
    cursor:           pointer;
    margin-top:       0;
    transition:       background-color 0.2s;
}

table td.acciones a input:hover {
    background-color: var(--color-acento);
}

table tr:nth-child(even) td {
    background-color: var(--color-fondo);
}

table tr:hover td {
    background-color: var(--color-acento-suave);
    color:            var(--color-superficie);
    transition:       background-color 0.15s;
}


/* ------------------------------------------------
   PAGINACIÓN
   ------------------------------------------------ */
.paginacion {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             8px;
    margin-top:      16px;
}

.paginacion a {
    color:           var(--color-principal);
    text-decoration: none;
    font-size:       14px;
    font-weight:     500;
    padding:         6px 12px;
    border-radius:   var(--radio-pequeno);
    border:          1px solid var(--color-borde);
    transition:      background-color 0.2s;
}

.paginacion a:hover {
    background-color: var(--color-acento);
    color:            var(--color-superficie);
    border-color:     var(--color-acento);
}

/* Página activa en el paginado */
.paginacion a.pagina-activa {
    background-color: var(--color-principal);
    color:            #fff;
    border-color:     var(--color-principal);
    cursor:           default;
    pointer-events:   none;
    font-weight:      700;
}


/* ------------------------------------------------
   LOGIN
   ------------------------------------------------ */
.contenedor-login {
    flex:             1;
    display:          flex;
    flex-direction:   column;
    justify-content:  center;
    align-items:      center;
    gap:              16px;
    padding:          24px;
    background-color: var(--color-fondo);
}

.contenedor-login h1 {
    font-size:   28px;
    font-weight: 500;
    color:       var(--color-principal);
}

.contenedor-login h2 {
    font-size:   14px;
    color:       var(--color-texto-apagado);
    font-weight: 400;
}


/* ------------------------------------------------
   LOGO RELOJ LOGIN
   ------------------------------------------------ */
#logo-reloj {
    position: relative;
    width:     120px;
    height:    120px;
}

#logo-reloj .logo-frame {
    position: absolute;
    top:      0;
    left:     0;
    width:    120px;
    height:   120px;
    opacity:  0;
}

#logo-reloj .logo-frame:first-child {
    opacity: 1;
}


/* ------------------------------------------------
   SLIDESHOW
   ------------------------------------------------ */
#slideshow {
    width:         300px;
    height:        175px;
    position:      relative;
    overflow:      hidden;
    border-radius: var(--radio-mediano);
    margin:        16px auto 0 auto;
}

#slideshow .slide {
    width:      300px;
    height:     175px;
    object-fit: cover;
    position:   absolute;
    top:        0;
    left:       0;
    display:    none;
}

#slideshow .slide:first-child {
    display: block;
}


/* ------------------------------------------------
   DASHBOARD ADMIN
   ------------------------------------------------ */
.dashboard-grid {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

/* Cards horizontales compactas:
   número a la izquierda, etiqueta a la derecha */
.dashboard-card {
    display:         flex;
    flex-direction:  row;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    padding:         12px 16px;
    background:      var(--color-superficie);
    border-radius:   var(--radio-mediano);
    border:          1px solid var(--color-borde);
    border-left:     3px solid var(--color-borde);
}

.dashboard-card-numero {
    font-family: var(--fuente-mono);
    font-size:   22px;
    font-weight: 500;
    color:       var(--color-texto);
    line-height: 1;
    min-width:   40px;
    text-align:  right;
    order:       2;
}

.dashboard-card-label {
    font-size:  12px;
    color:      var(--color-texto-apagado);
    text-align: left;
    order:      1;
}

.dashboard-card-ok {
    border-left-color: var(--color-acento);
}

.dashboard-card-ok .dashboard-card-numero {
    color: var(--color-acento);
}

.dashboard-card-error {
    border-left-color: var(--color-error);
}

.dashboard-card-error .dashboard-card-numero {
    color: var(--color-error);
}

.dashboard-card-warning {
    border-left-color: var(--color-advertencia);
}

.dashboard-card-warning .dashboard-card-numero {
    color: var(--color-advertencia);
}

.dashboard-aviso {
    background:    #fef3c7;
    border:        1px solid var(--color-advertencia);
    border-radius: var(--radio-pequeno);
    padding:       10px 16px;
    font-size:     12px;
    color:         #92400e;
}

.estado-badge {
    font-size:     10px;
    font-weight:   500;
    padding:       4px 8px;
    border-radius: var(--radio-pequeno);
}

.estado-sin-fichar {
    background-color: #fee2e2;
    color:            var(--color-error);
}

.estado-en-curso {
    background-color: #fef3c7;
    color:            #92400e;
}

.estado-completo {
    background-color: #d1fae5;
    color:            #065f46;
}


/* ------------------------------------------------
   PANEL JORNADA TRABAJADOR
   ------------------------------------------------ */
.jornada-wrapper {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             20px;
    padding:         24px;
    background:      var(--color-superficie);
    border-radius:   var(--radio-grande);
    border:          1px solid var(--color-borde);
    width:           100%;
    margin:          0 auto;
}

.jornada-fecha {
    font-family: var(--fuente-mono);
    font-size:   14px;
    color:       var(--color-texto-apagado);
}

.jornada-hora {
    font-family: var(--fuente-mono);
    font-size:   32px;
    font-weight: 500;
    color:       var(--color-principal);
}


/* ------------------------------------------------
   FICHAJES
   ------------------------------------------------ */
.fichajes-wrapper {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    width:          100%;
}

.fichaje-item {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    padding:        12px 16px;
    background:     var(--color-superficie);
    border-radius:  var(--radio-mediano);
    border:         1px solid var(--color-borde);
}

.fichaje-hecho {
    background:   #d1fae5;
    border-color: #6ee7b7;
}

.fichaje-nombre {
    font-weight: 500;
    font-size:   13px;
    color:       var(--color-texto);
}

.fichaje-hora-prevista {
    font-family: var(--fuente-mono);
    font-size:   12px;
    color:       var(--color-texto-apagado);
}

.fichaje-hora-real {
    font-family: var(--fuente-mono);
    font-size:   12px;
    color:       var(--color-principal);
    font-weight: 500;
}

.fichaje-tarde {
    font-size:   11px;
    color:       var(--color-error);
    font-weight: 500;
}

.fichaje-pronto {
    font-size:   11px;
    color:       var(--color-informacion);
    font-weight: 500;
}

.fichaje-puntual {
    font-size:   11px;
    color:       var(--color-principal);
    font-weight: 500;
}

.fichaje-mensaje {
    font-size:  14px;
    color:      var(--color-texto-apagado);
    text-align: center;
}


/* ------------------------------------------------
   INFORME RESUMEN
   ------------------------------------------------ */
.informe-resumen {
    background:    var(--color-superficie);
    border-radius: var(--radio-mediano);
    border:        1px solid var(--color-borde);
    padding:       20px;
    width:         100%;
}

.informe-resumen h3 {
    color:          var(--color-principal);
    font-size:      14px;
    margin-bottom:  12px;
    padding-bottom: 6px;
    border-bottom:  1px solid var(--color-borde);
}

.informe-resumen-item {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    padding:        8px 0;
    border-bottom:  1px solid var(--color-borde);
    font-size:      12px;
}

.informe-resumen-item:last-child {
    border-bottom: none;
    font-weight:   500;
}


/* ------------------------------------------------
   PERFIL DEL TRABAJADOR
   ------------------------------------------------ */
.perfil-foto {
    display:         flex;
    justify-content: center;
    margin-bottom:   8px;
}

.perfil-foto img {
    width:         150px;
    height:        150px;
    border-radius: 50%;
    object-fit:    cover;
    border:        3px solid var(--color-principal);
}

.perfil-sin-foto {
    width:            120px;
    height:           120px;
    border-radius:    50%;
    background-color: var(--color-borde);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            var(--color-texto-apagado);
    font-size:        12px;
}

.perfil-datos {
    background:    var(--color-superficie);
    border-radius: var(--radio-mediano);
    border:        1px solid var(--color-borde);
    padding:       24px;
    width:         100%;
    margin:        0 auto;
}

.perfil-datos h3 {
    color:          var(--color-principal);
    font-size:      14px;
    font-weight:    500;
    margin-top:     16px;
    margin-bottom:  12px;
    padding-bottom: 6px;
    border-bottom:  1px solid var(--color-borde);
}

.perfil-campo {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    padding:        8px 0;
    border-bottom:  1px solid var(--color-borde);
}

.perfil-campo:last-child {
    border-bottom: none;
}

.perfil-label {
    font-size:   11px;
    color:       var(--color-texto-apagado);
    font-weight: 500;
}

.perfil-valor {
    font-size: 12px;
    color:     var(--color-texto);
}


/* ------------------------------------------------
   FESTIVOS - TARJETAS CALENDARIO
   ------------------------------------------------ */
#festivos {
    background: transparent;
    border:     none;
    padding:    0;
    margin:     0;
}

.festivos-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap:                   12px;
    margin-top:            16px;
}

.festivo-card {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    border-radius:    var(--radio-mediano);
    overflow:         hidden;
    box-shadow:       0 2px 8px rgba(0,0,0,0.12);
    background-color: var(--color-superficie);
}

.festivo-card-mes {
    width:            100%;
    background-color: #DC2626;
    color:            #FFFFFF;
    text-align:       center;
    font-size:        10px;
    font-weight:      500;
    padding:          5px 0;
    letter-spacing:   1px;
}

.festivo-card-dia {
    width:            100%;
    background-color: var(--color-superficie);
    color:            var(--color-texto);
    text-align:       center;
    font-size:        30px;
    font-weight:      500;
    padding:          6px 0;
    font-family:      var(--fuente-mono);
}

.festivo-card-nombre {
    width:            100%;
    background-color: var(--color-superficie);
    color:            var(--color-texto-apagado);
    text-align:       center;
    font-size:        8px;
    padding:          4px 4px 6px 4px;
    border-top:       1px solid var(--color-borde);
    line-height:      1.3;
}





/* ================================================
   BREAKPOINTS - MOBILE FIRST
   Base: móvil
   768px: tablet
   1024px: ordenador
   ================================================ */

/* TABLET >= 768px */
@media (min-width: 768px) {

    body {
        font-size: 13px;
    }

    main {
        padding: 24px 32px;
    }

    main h2 {
        font-size: 20px;
    }

    table {
        font-size: 12px;
    }

    .perfil-campo {
        flex-direction: row;
        gap:            16px;
    }

    .perfil-label {
        min-width: 180px;
    }

    .perfil-datos {
        max-width: 600px;
    }

    .fichaje-item {
        flex-direction: row;
        align-items:    center;
        gap:            16px;
    }

    .fichaje-nombre {
        min-width: 140px;
    }

    .fichaje-hora-prevista {
        min-width: 120px;
    }

    .fichaje-hora-real {
        min-width: 120px;
    }

    .informe-resumen-item {
        flex-direction:  row;
        justify-content: space-between;
        align-items:     center;
        font-size:       13px;
    }

    .informe-resumen {
        max-width: 600px;
    }

    .dashboard-grid {
        flex-direction: row;
        flex-wrap:      wrap;
    }

    .dashboard-card {
        flex:       1;
        min-width:  200px;
    }

    .dashboard-card-numero {
        font-size: 24px;
    }

    .jornada-wrapper {
        max-width: 600px;
    }

    .jornada-hora {
        font-size: 36px;
    }
}

/* ORDENADOR >= 1024px */
@media (min-width: 1024px) {

    body {
        font-size: 14px;
    }

    /* En desktop: header-top a la izquierda, nav a la derecha */
    header {
        flex-direction:  row;
        justify-content: space-between;
        align-items:     center;
        gap:             24px;
    }

    .header-top {
        width:           auto;
        flex:            1;
        justify-content: space-between;
    }

    .header-logo img {
        width:  48px;
        height: 48px;
    }

    .header-logo h1 {
        font-size: 20px;
    }

    .header-usuario-saludo {
        font-size: 13px;
    }

    .header-usuario-nombre {
        font-size: 16px;
    }

    header nav {
        display:        flex;
        flex-direction: row;
        flex-wrap:      wrap;
        align-items:    center;
        gap:            6px;
        border-top:     none;
        padding:        0;
        margin-top:     0;
        width:          auto;
    }

    header nav a {
        font-size: 11px;
        padding:   6px 12px;
    }

    #btn-menu {
        display: none;
    }

    main {
        padding:   32px 48px;
        max-width: 1400px;
        margin:    0 auto;
    }

    main h2 {
        font-size: 22px;
    }
}


/* ------------------------------------------------
   TABLA APILADA - Móvil (max-width: 768px)
   Cada fila se convierte en una card con etiquetas
   Requiere data-label en cada <td>
   ------------------------------------------------ */
@media (max-width: 768px) {

    /* Anulo el min-width:600px de la regla general de table
       para que la tabla apilada no desborde la pantalla */
    .tabla-apilable {
        min-width: 0 !important;
        width:     100% !important;
    }

    .tabla-apilable thead {
        display: none;
    }

    .tabla-apilable tr {
        display:       block;
        margin-bottom: 16px;
        border:        1px solid var(--color-borde);
        border-radius: var(--radio-mediano);
        padding:       8px;
        background:    var(--color-superficie);
    }

    .tabla-apilable td {
        display:     flex;
        align-items: center;
        gap:         8px;
        padding:     6px 4px;
        border:      none;
        font-size:   11px;
    }

    .tabla-apilable td::before {
        content:     attr(data-label);
        font-weight: 600;
        color:       var(--color-texto-apagado);
        min-width:   110px;
        flex-shrink: 0;
        font-size:   11px;
    }

    .tabla-apilable td + td {
        border-top: 1px solid var(--color-borde);
    }

    .tabla-apilable td input[type="time"] {
        flex:      1;
        min-width: 0;
    }
}



/* ------------------------------------------------
   SOLICITUDES DE VACACIONES
   ------------------------------------------------ */
.solicitudes-lista {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    width:          100%;
}

.solicitud-item {
    background:    var(--color-superficie);
    border:        1px solid var(--color-borde);
    border-radius: var(--radio-mediano);
    padding:       16px;
    display:       flex;
    flex-direction: column;
    gap:           8px;
}

/* Las pendientes tienen borde izquierdo de advertencia */
.solicitud-pendiente {
    border-left: 3px solid var(--color-advertencia);
}

.solicitud-cabecera {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             12px;
    flex-wrap:       wrap;
}

.solicitud-info {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.solicitud-trabajador {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-bottom: 4px;
}

.solicitud-nombre {
    font-weight: 500;
    font-size:   13px;
    color:       var(--color-texto);
}

.solicitud-tipo {
    font-weight: 600;
    font-size:   13px;
    color:       var(--color-texto);
}

.solicitud-fechas {
    font-family: var(--fuente-mono);
    font-size:   12px;
    color:       var(--color-principal);
}

.solicitud-motivo {
    font-size:  12px;
    color:      var(--color-texto-apagado);
    font-style: italic;
}

.solicitud-respuesta {
    font-size:     12px;
    color:         var(--color-texto-apagado);
    padding:       8px 12px;
    background:    var(--color-fondo);
    border-radius: var(--radio-pequeno);
    border-left:   3px solid var(--color-borde);
}

.solicitud-fecha-envio {
    font-size: 10px;
    color:     var(--color-texto-apagado);
}

.solicitud-acciones {
    margin-top:  8px;
    padding-top: 12px;
    border-top:  1px solid var(--color-borde);
}

.solicitud-acciones form {
    align-items: flex-start;
}

.solicitud-acciones textarea {
    margin-top: 4px;
    max-width:  500px;
}

.solicitud-botones {
    display:    flex;
    gap:        8px;
    margin-top: 8px;
}

.btn-aprobar {
    background-color: var(--color-acento);
    color:            var(--color-superficie);
    border:           none;
    border-radius:    var(--radio-pequeno);
    padding:          8px 18px;
    font-family:      var(--fuente-cuerpo);
    font-size:        12px;
    font-weight:      500;
    cursor:           pointer;
    margin-top:       0;
    transition:       background-color 0.2s;
}

.btn-aprobar:hover {
    background-color: var(--color-principal);
}

.btn-denegar {
    background-color: transparent;
    color:            var(--color-error);
    border:           1px solid var(--color-error);
    border-radius:    var(--radio-pequeno);
    padding:          8px 18px;
    font-family:      var(--fuente-cuerpo);
    font-size:        12px;
    font-weight:      500;
    cursor:           pointer;
    margin-top:       0;
    transition:       all 0.2s;
}

.btn-denegar:hover {
    background-color: var(--color-error);
    color:            var(--color-superficie);
}

/* ------------------------------------------------
   MODO OSCURO
   Se activa añadiendo la clase .modo-oscuro al body
   ------------------------------------------------ */
body.modo-oscuro {
    --color-principal:     #1D9E75;
    --color-acento:        #5DCAA5;
    --color-acento-suave:  #0F6E56;
    --color-fondo:         #1A2E26;
    --color-superficie:    #243D33;
    --color-texto:         #F4F7F5;
    --color-texto-apagado: #9ABFB3;
    --color-borde:         #2E5045;
}


/* ------------------------------------------------
   TABLA APILADA - Móvil (max-width: 768px)
   Cada fila se convierte en una card con etiquetas
   Requiere data-label en cada <td>
   ------------------------------------------------ */
@media (max-width: 768px) {

    .tabla-apilable {
        min-width: 0 !important;
        width:     100% !important;
    }

    .tabla-apilable thead {
        display: none;
    }

    .tabla-apilable tr {
        display:       block;
        margin-bottom: 16px;
        border:        1px solid var(--color-borde);
        border-radius: var(--radio-mediano);
        padding:       8px;
        background:    var(--color-superficie);
    }

    .tabla-apilable td {
        display:     flex;
        align-items: center;
        gap:         8px;
        padding:     6px 4px;
        border:      none;
        font-size:   11px;
    }

    .tabla-apilable td::before {
        content:     attr(data-label);
        font-weight: 600;
        color:       var(--color-texto-apagado);
        min-width:   110px;
        flex-shrink: 0;
        font-size:   11px;
    }

    .tabla-apilable td + td {
        border-top: 1px solid var(--color-borde);
    }

    .tabla-apilable td input[type="time"] {
        flex:      1;
        min-width: 0;
    }

    .festivos-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}





/* Overrides adicionales para modo oscuro
   Corrijo colores hardcodeados que no usan variables */
body.modo-oscuro table tr:nth-child(even) td {
    background-color: #1e3829;
}

body.modo-oscuro table tr:hover td {
    background-color: var(--color-acento-suave);
    color:            var(--color-texto);
}

body.modo-oscuro .fichaje-hecho {
    background:   #1a3d2b;
    border-color: #2e6644;
}

body.modo-oscuro .estado-sin-fichar {
    background-color: #3d1a1a;
    color:            #f87171;
}

body.modo-oscuro .estado-en-curso {
    background-color: #3d2e0a;
    color:            #fbbf24;
}

body.modo-oscuro .estado-completo {
    background-color: #1a3d2b;
    color:            #6ee7b7;
}

body.modo-oscuro .dashboard-aviso {
    background: #3d2e0a;
    color:      #fbbf24;
}

body.modo-oscuro p[style*="color:green"] {
    background-color: #1a3d2b;
    color:            #6ee7b7;
    border-color:     #2e6644;
}

body.modo-oscuro p[style*="color:red"] {
    background-color: #3d1a1a;
    color:            #f87171;
    border-color:     #7f1d1d;
}

/* ------------------------------------------------
   RESUMEN MENSUAL - Panel del trabajador
   Botón que despliega tabla de horas del mes
   ------------------------------------------------ */

.btn-mis-horas {
    font-size:        12px;
    padding:          8px 16px;
    margin-top:       0;
    background-color: var(--color-fondo);
    border:           1px solid var(--color-borde);
    border-radius:    var(--radio-mediano);
    color:            var(--color-texto-apagado);
    cursor:           pointer;
    transition:       all 0.2s;
    width:            100%;
    text-align:       center;
}

.btn-mis-horas:hover {
    background-color: var(--color-borde);
    color:            var(--color-texto);
}

/* Contenedor oculto por defecto, se despliega con slideDown */
#tabla-mis-horas {
    width:     100%;
    max-width: 320px;
    margin:    0 auto;
}

/* Anulo el min-width:600px heredado de la regla general de table */
#tabla-mis-horas .mis-horas-tabla {
    min-width: 0 !important;
    width:     100%;
}

.mis-horas-cabecera {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         10px 0 6px 0;
    border-bottom:   2px solid var(--color-borde);
    margin-bottom:   8px;
}

.mis-horas-titulo {
    font-size:   13px;
    font-weight: 600;
    color:       var(--color-principal);
}

.mis-horas-total {
    font-family: var(--fuente-mono);
    font-size:   13px;
    font-weight: 500;
    color:       var(--color-principal);
}

/* Tabla de días del mes */
.mis-horas-tabla {
    width:           100%;
    border-collapse: collapse;
    font-size:       12px;
}

.mis-horas-tabla th {
    background-color: var(--color-principal);
    color:            var(--color-superficie);
    padding:          6px 10px;
    text-align:       left;
    font-weight:      500;
}

.mis-horas-tabla td {
    padding:       6px 10px;
    border-bottom: 1px solid var(--color-borde);
    color:         var(--color-texto);
}

.mis-horas-tabla tr:nth-child(even) td {
    background-color: var(--color-fondo);
}

/* Fila del día actual resaltada */
.mis-horas-tabla tr.dia-hoy td {
    background-color: #e8f5ee;
    font-weight:      500;
}

.mis-horas-tabla .horas-col {
    font-family: var(--fuente-mono);
    text-align:  right;
    white-space: nowrap;
}

.mis-horas-tabla .sin-datos {
    color: var(--color-texto-apagado);
}

/* Fila de total al final */
.mis-horas-tabla tr.fila-total td {
    border-top:   2px solid var(--color-borde);
    border-bottom: none;
    font-weight:  600;
    color:        var(--color-principal);
    background:   var(--color-superficie) !important;
}

/* Responsive - en móvil la tabla ocupa bien */
@media (max-width: 768px) {
    .mis-horas-tabla th,
    .mis-horas-tabla td {
        padding: 6px 6px;
        font-size: 11px;
    }
}

/* ------------------------------------------------
   INCIDENCIAS
   ------------------------------------------------ */

/* Sección por trabajador */
.incidencias-trabajador {
    margin-bottom: 32px;
}

.incidencias-nombre {
    font-size:     16px;
    font-weight:   600;
    color:         var(--color-principal);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--color-borde);
}

.incidencias-resumen {
    font-size:  13px;
    color:      var(--color-texto-apagado);
    margin-top: 6px;
}

/* Badges de tipo de incidencia */
.badge {
    display:       inline-block;
    padding:       3px 10px;
    border-radius: var(--radio-mediano);
    font-size:     12px;
    font-weight:   500;
    white-space:   nowrap;
}

.badge-retraso    { background: #fee2e2; color: #991b1b; }
.badge-extra      { background: #dbeafe; color: #1e40af; }
.badge-ausencia   { background: #fef9c3; color: #92400e; }
.badge-sin-fichar { background: #f3e8ff; color: #6b21a8; }

/* Modo oscuro: ajuste de colores de badge */
body.modo-oscuro .badge-retraso    { background: #7f1d1d; color: #fecaca; }
body.modo-oscuro .badge-extra      { background: #1e3a5f; color: #bfdbfe; }
body.modo-oscuro .badge-ausencia   { background: #78350f; color: #fde68a; }
body.modo-oscuro .badge-sin-fichar { background: #4c1d95; color: #e9d5ff; }

/* Título que aparece encima de los resultados al buscar */
.incidencias-titulo-resultado {
    font-size:     15px;
    font-weight:   600;
    color:         var(--color-texto);
    margin-top:    24px;
    margin-bottom: 16px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-borde);
}

/* Etiqueta "(opcional)" dentro del label del select de trabajador */
.label-opcional {
    font-size:   11px;
    font-weight: 400;
    color:       var(--color-texto-apagado);
}

/* Pie de cada tarjeta de solicitud: fecha + botón eliminar alineados */
.solicitud-pie {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-top:      8px;
    flex-wrap:       wrap;
    gap:             8px;
}

/* Botón eliminar solicitud — rojo discreto */
.btn-eliminar-solicitud {
    background-color: transparent;
    color:            var(--color-error);
    border:           1px solid var(--color-error);
    padding:          4px 12px;
    border-radius:    var(--radio-mediano);
    font-size:        12px;
    cursor:           pointer;
    margin-top:       0;
    transition:       background-color 0.2s, color 0.2s;
}

.btn-eliminar-solicitud:hover {
    background-color: var(--color-error);
    color:            #fff;
}

/* Avatar circular con iniciales para trabajadores sin foto */
.avatar-iniciales {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            30px;
    height:           30px;
    border-radius:    50%;
    background-color: var(--color-principal);
    color:            #fff;
    font-size:        11px;
    font-weight:      600;
    vertical-align:   middle;
    margin-right:     6px;
    flex-shrink:      0;
    letter-spacing:   0;
}