@charset "UTF-8";

/* ============================================== */
/* == 01. RESET Y BASE ESTILOS GLOBALES == */
/* ============================================== */

/* Reset de Box Model, márgenes y padding */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* Base HTML y Box-Sizing */
html {
    box-sizing: border-box;
    overflow-x: hidden;
    height: 100%;
}
*, *:before, *:after {
    box-sizing: inherit;
}

/* Estilos de cuerpo principales */
body {
    min-width: 360px;
    margin: 0 auto;
    height: 100%;
    font-family: "Atamic SC", sans-serif;

    background-size: cover;
    overflow-x: hidden;
    line-height: 1; /* Reset base */
}

/* Estructura de bloque para elementos HTML5 (compatibilidad con navegadores antiguos) */
article, aside, details, figcaption, figure, footer, header, main, nav, section {
    display: block;
}

/* Lista y Citas */
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }

/* Tablas */
table { border-collapse: collapse; border-spacing: 0; }

/* Contenedor principal del sitio */
div.site-wrapper {
    position: relative;
    overflow-x: hidden;
}


/* ============================================== */
/* == 02. LAYOUT, WRAPPERS Y FLEX UTILITIES == */
/* ============================================== */

/* Contenedores Principales (Wrappers) */
.wrapper, .wrapper-narrow {
    position: relative;
    margin: 0 auto;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Media Queries para Wrappers */
@media only screen and (min-width : 1000px ) {
    .wrapper { width: 1000px !important; }
    .wrapper-narrow { width: 640px !important; }
}
@media only screen and (max-width : 1000px ) {
    .wrapper, .wrapper-narrow {
        min-width: 360px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .desktop { display: none !important; }
}

/* Utilidades de Visualización Responsiva */
@media only screen and (min-width : 1000px ) {
    .mobile { display: none !important; }
}

/* Flexbox Helpers (incluye prefijos para amplia compatibilidad) */
.flex, .flex-start, .flex-end, .flex-between, .flex-around, .flex-center {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-center { -webkit-justify-content: center; justify-content: center; }
.flex-around { -webkit-justify-content: space-around; justify-content: space-around; }
.flex-between { -webkit-justify-content: space-between; justify-content: space-between; }
.flex-end { -webkit-justify-content: flex-end; justify-content: flex-end; }
.flex-start { -webkit-justify-content: flex-start; justify-content: flex-start; }
.flex-row { -webkit-flex-direction: row; flex-direction: row; }
.flex-row-reverse { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; }


/* ============================================== */
/* == 03. TIPOGRAFÍA Y UTILIDADES DE TEXTO == */
/* ============================================== */

/* Estilos Comunes de Texto */
.strong, .bold { font-weight: bold; }
.underline { text-decoration: underline; }
.left { text-align: left !important; }
.right { text-align: right !important; }
.center { text-align: center !important; }
.full-width { width: 100%; }

/* H1 - Título Principal */
h1 {
    font-weight: bold;
    text-align: center;
    letter-spacing: 2px;
}
@media only screen and (min-width : 1000px ) { h1 { font-size: 34px; line-height: 40px; } }
@media only screen and (max-width : 1000px ) { h1 { font-size: 24px; line-height: 28px; } }

/* H2 - Título Secundario */
h2 {
    font-weight: bold;
    text-align: center;
}
@media only screen and (min-width : 1000px ) { h2 { font-size: 22px; line-height: 28px; } }
@media only screen and (max-width : 1000px ) { h2 { font-size: 18px; line-height: 24px; } }

/* H3 - Subtítulo */
h3 {
    text-align: center;
}
@media only screen and (min-width : 1000px ) { h3 { font-size: 16px; line-height: 22px; } }
@media only screen and (max-width : 1000px ) { h3 { font-size: 14px; line-height: 20px; } }

/* Párrafos */
@media only screen and (min-width : 1000px ) { p { font-size: 16px; line-height: 22px; } }
@media only screen and (max-width : 1000px ) { p { font-size: 14px; line-height: 18px; } }

/* Enlaces */
a {
    text-decoration: none;
    color: #444;
    cursor: pointer;
}
a:hover {
    color: #1564a8;
}


/* ============================================== */
/* == 04. HEADER Y NAVEGACIÓN (INCLUYE HAMBURGER) == */
/* ============================================== */

header {
    position: relative;
    width: 100%;
    background: #fff;
    color: #444;
    z-index: 10;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width : 1000px ) {
    header { height: 60px; padding: 5px 0; }
}
@media only screen and (max-width : 1000px ) {
    header { position: fixed; top: 0; left: 0; height: 50px; padding: 5px 0; }
}

header.admin { background: #ffd700; }
header.draft { background: #888; }
header .wrapper { max-width: 100%; }

/* Logo */
img.xmas {
    height: 45px;
    margin-left: 100px;
}
header a#logo {
    display: block;
    background: url("../img/logo_LEMG2.png") no-repeat;
    width: 145px;
    height: 45px;
    background-size: 110px 45px;
    margin: 0 auto;
    /*transform: translateX(10px);*/
}
@media only screen and (min-width : 1000px ) {
    header a#logo {
        width: 200px;
        height: 50px;
        background-size: 180px 50px;
    }
}

/* Menú Móvil (Div#menu) */
@media only screen and (max-width : 1000px ) {
    header div#menu {
        position: fixed;
        top: 50px;
        right: -260px;
        width: 260px;
        height: auto;
        background: #fff;
        border-left: 2px solid #ccc;
        border-bottom: 2px solid #ccc;
    }
}
header input#menu-toggle:checked ~ div#menu {
    right: 0;
    -webkit-transition: right 0.2s;
    -moz-transition: right 0.2s;
    -ms-transition: right 0.2s;
    -o-transition: right 0.2s;
    transition: right 0.2s;
    box-shadow: -4px 8px 20px -5px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

/* Enlaces Principales (Main Links) */
header div#menu ul.main_links { height: 25px; margin-top: 25px; }
@media only screen and (max-width : 1000px ) {
    header div#menu ul.main_links { width: 100%; height: initial; margin-top: 0; }
}
header div#menu ul.main_links li { position: relative; padding: 0 10px; }
@media only screen and (max-width : 1000px ) {
    header div#menu ul.main_links li {
        display: block;
        width: 100%;
        margin-right: 0;
        border-top: 1px solid #ddd;
    }
}
header div#menu ul.main_links li a {
    display: inline-block;
    position: relative;
    line-height: 25px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
@media only screen and (max-width : 1000px ) {
    header div#menu ul.main_links li a {
        display: block;
        width: 100%;
        padding: 10px 15px;
        text-align: right;
    }
}
header div#menu ul.main_links li.pinchada a {
    text-decoration: none;  
    /* Añadir una sombra muy sutil */
    /* X: 0, Y: 0, Blur: 2px, Color: un gris oscuro */
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7); 
}
header div#menu ul.main_links li.admin a { color: red; }

/* Submenú */
header div#menu ul.main_links li:hover div.submenu { display: block; }
@media only screen and (min-width : 1000px ) {
    header div#menu ul.main_links div.submenu { display: none; position: absolute; top: 25px; left: 0; }
}
header div#menu ul.main_links div.submenu ul { width: 200px; padding: 10px; background: #fff; }
@media only screen and (max-width : 1000px ) {
    header div#menu ul.main_links div.submenu ul { width: inherit; margin: 0 20px 10px 0; padding: 0; }
    header div#menu ul.main_links div.submenu ul li a { padding: 8px; }
}
header div#menu ul.main_links div.submenu ul li { margin-bottom: 10px; padding: 0; }

/* Selector de Año/Mes (h2.month_selector) */
h2.month_selector { text-transform: none !important; margin: 5px auto 0; }
@media only screen and (max-width : 1000px ) { h2.month_selector { margin: 5px auto; } }
h2.month_selector span { display: inline-block; width: 200px; }
@media only screen and (max-width : 1000px ) { h2.month_selector span { width: 160px; } }
h2.month_selector img.image-arrow:hover { 
    border-radius: 5px 5px 5px 5px; 
    border: 1px solid #000; 
}


/* =======================================================
   CSS DEL ICONO HAMBURGER PARA JS
   ======================================================= */
        
/* Contenedor del icono */
.mobile.hamburger-icon {
    position: relative;
    height: 35px;
    width: 35px;
    cursor: pointer;
    z-index: 1000;
    /* Puedes ajustar el fondo y el hover a tu gusto */
    border-radius: 50%;
    transition: all 0.2s ease-in-out;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile.hamburger-icon:hover {
    transform: scale(1.1);
    box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.2);
}

/* Estilos de las 3 líneas */
.icon-1, .icon-2, .icon-3 {
    position: absolute;
    width: 32px;
    height: 3.5px; /* Usando tu grosor: 3.5px */
    background-color: #003; /* Asegúrate de que el color sea visible */
    border-radius: 3px;
    /* Usamos tu cubic-bezier original para la transición */
    transition: all 400ms cubic-bezier(.84,.06,.52,1.8); 
    left: 50%;
    transform: translateX(-50%); /* Centrado horizontal */
}

/* Posición inicial de las líneas (8px de separación) */
.icon-1 {
    transform: translate(-50%, -8px); 
}
.icon-3 {
    transform: translate(-50%, 8px); 
}

/* ESTADO ACTIVO: Clases Añadidas por JavaScript */

/* Línea Superior (.icon-1 con clase .a): se mueve al centro y rota 45° */
.icon-1.a {
    transform: translate(-50%, 0) rotate(45deg);
}

/* Línea Central (.icon-2 con clase .c): desaparece */
.icon-2.c {
    opacity: 0;
}

/* Línea Inferior (.icon-3 con clase .b): se mueve al centro y rota -45° */
.icon-3.b {
    transform: translate(-50%, 0) rotate(-45deg);
}

/* =======================================================
   ADAPTACIONES DE MENÚ MÓVIL (para usar con la clase .show)
   ======================================================= */

/* Oculta el menú por defecto en móvil */
@media only screen and (max-width : 1000px ) {
    header div#menu {
        flex-direction: column;
        position: absolute;
        top: 45px; /* Ajusta según la altura de tu header */
        height: fit-content;
        width: 45vw;
        right: 0;
        border-radius: 10px 0px 10px 10px;
        background-color: #f8f8f8; /* Color de fondo del menú móvil */
        z-index: 999;
        
        /* ---------------------------------------------------- */
        /* PROPIEDADES DE TRANSICIÓN - ESTADO CERRADO */
        /* ---------------------------------------------------- */
        
        /* La transición aplica a 'transform' (deslizamiento) y 'opacity' (desvanecimiento) */
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; 
        
        /* Mueve el menú completamente hacia arriba (fuera de la vista) */
        transform: translateY(-100%);
        
        /* Lo hace invisible y no interactuable para que no bloquee otros elementos */
        opacity: 0;
        pointer-events: none;
        
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

        /* NOTA: Eliminamos 'display: none;' para permitir la transición */
    }

    /* Clase 'show' añadida por JS para MOSTRAR el menú */
    header div#menu.show {
        /* Asegura que el layout flex esté activo */
        display: flex;
        
        /* Hace que el menú se deslice hacia abajo a su posición final */
        transform: translateY(0);
        
        /* Lo hace visible y reactiva los clics */
        opacity: 1;
        pointer-events: auto;
    }
}

/* ============================================== */
/* == 05. LAYOUT DE TABLAS Y SCROLLING == */
/* ============================================== */

/* Contenedores de Tablas Scrollables */
div.middle-container, div.middle-container-scroll, div.middle-container-count {
    max-width: calc(100vw - 280px);
    overflow-x: scroll;
    overflow-y: hidden;
}
@media only screen and (max-width : 1000px ) {
    div.middle-container, div.middle-container-scroll, div.middle-container-count {
        max-width: calc(100vw - 125px);
    }
}

/* Ancho del Contenido de las Tablas (según número de días) */
div.middle-container > .days-28, div.middle-container-scroll > .days-28, div.middle-container-count > .days-28 { width: 1800px; }
div.middle-container > .days-29, div.middle-container-scroll > .days-29, div.middle-container-count > .days-29 { width: 1850px; }
div.middle-container > .days-30, div.middle-container-scroll > .days-30, div.middle-container-count > .days-30 { width: 1900px; }
div.middle-container > .days-31, div.middle-container-scroll > .days-31, div.middle-container-count > .days-31 { width: 1950px; }

/* Estilos de Contenedores Específicos */
div.middle-container { border: 2px solid #000; background: #fff; }
div.middle-container-scroll { height: 20px; }
div.middle-container-scroll div { height: 20px; }
div.middle-container-count { border: 2px solid #000; }
div.middle-container-count table { min-width: 1500px; }
div.middle-container-count table th { border-left: 1px solid #ccc; }

/* Márgenes de las Tablas */
table.panel-left, table.panel-right { margin-top: 22px; margin-bottom: 18px; }
@media only screen and (max-width : 1000px ) {
    table.panel-left, table.panel-right { margin-top: 2px; }
}
table.panel-left-count, table.panel-right-count { margin-top: 2px; }

/* Bordes y Estilos de Cuerpo de Tabla */
table.panel-left tbody {
    border-top: 2px solid #444;
    border-bottom: 2px solid #444;
    border-left: 2px solid #444;
    background: #fff;
}
table.panel-right tbody {
    border-top: 2px solid #444;
    border-bottom: 2px solid #444;
    border-right: 2px solid #444;
    background: #fff;
}

/* Cabeceras de Tabla */
main#turnero table.panel-right thead th, main#borrador table.panel-right thead th { vertical-align: bottom; }
main#turnero table.panel-left thead th, main#turnero table.panel-right thead th,
main#borrador table.panel-left thead th, main#borrador table.panel-right thead th { height: 84px; }

/* Fondo para el Borrador */
main#borrador { background: #ccc; }
table.turnero-admin thead th { height: 80px; }


/* ============================================== */
/* == 06. PALETA DE COLORES DE TURNOS == */
/* ============================================== */

/* --- Turnos de Mañana (M) --- */
.col-M, .col-Ms, .col-Msj, .col-Mi, .col-Mev, .col-Mcas, .col-Meco, .col-Meval, .col-Mins {
    color: #000;
    background: #ffeba1; /* Amarillo Claro */
}
.col-Mv, .col-Mvs, .col-Msjv, .col-Mvev, .col-Mvcas, .col-Mo, .col-iMA, .col-iMAs, .col-iMAsj, .col-CEvM, .col-CEM {
    color: #000;
    background: #f2cc5f; /* Naranja/Amarillo Medio */
}
.col-im {
    color: #000;
    background: rgba(255, 235, 161, 0.6196078431); /* Mañana (Sombra) */
}

/* --- Turnos de Tarde (T) --- */
.col-T, .col-Ts, .col-Tsj, .col-Ti, .col-Tev, .col-Tcas, .col-Teco, .col-Tins {
    color: #000;
    background: #ffcba6; /* Melocotón Claro */
}
.col-Tv, .col-Tvs, .col-Tsjv, .col-Tvev, .col-Tvcas, .col-To, .col-iTA, .col-iTAs, .col-iTAsj, .col-CEvT, .col-CET {
    color: #000;
    background: #f09e5d; /* Melocotón Medio */
}
.col-it {
    color: #000;
    background: rgba(255, 203, 166, 0.6); /* Tarde (Sombra) */
}

/* --- Turnos de Noche (N) --- */
.col-N, .col-N1, .col-N2, .col-N3, .col-N4, .col-N5, .col-N6, .col-N7, .col-N8, .col-N9 .col-Nins, .col-Ni, .col-Ns, .col-Nsj {
    color: #fff;
    background: #384a67; /* Azul Oscuro */
}
.col-Nv, .col-Nvs, .col-Nsjv, .col-No, .col-iNA, .col-iNAs, .col-CEvN, .col-CEN {
    color: #fff;
    background: #184da6; /* Azul Más Oscuro */
}
.col-in {
    color: #fff;
    background: rgba(57, 81, 121, 0.6705882353); /* Noche (Sombra) */
}

/* --- Vacaciones y Descanso (V, w) --- */
.col-V, .col-w, .col-Va {
    color: #fff;
    background: #9fc5e8; /* Azul Claro/Pálido */
}

/* --- Permisos y Ausencias Comunes --- */
.col-P, .col-B, .col-RJ, .col-AAPP, .col-HHSS, .col-CS, .col-EX {
    color: #000;
    background: #ddd; /* Gris Claro */
}

/* --- Otros Permisos / Fiestas --- */
.col-O {
    color: #000;
    background: #d6f7cd; /* Verde Pálido (Otros) */
}
.col-Ov {
    color: #fff;
    background: #e0b231; /* Amarillo Oscuro (Otros Vaca.) */
}
.col-F {
    color: #000;
    background: #b7a3d7; /* Lila (Fiesta) */
}
.col-R {
    color: #fff;
    background: #c199ff; /* Morado Claro (Refuerzo) */
}

/* --- Horas Extra y Compensación (HHEE, COS, HHVV) --- */
.col-hhee {
    font-weight: bold;
    color: #fff;
    background: rgba(8, 153, 8, 0.6901960784); /* Verde HHEE */
}
.col-cos {
    font-weight: bold;
    color: #000;
    background: #27aa27; /* Verde COS */
}
.col-hhvv {
    font-weight: bold;
    color: #fff;
    background: #3194ec; /* Azul HHVV */
}


/* --- Modificadores de Estado y Mes Externo --- */
.limit-month { color: #666; } /* Color de texto base para días fuera del mes actual */

/* Reglas específicas para limit-month */
.col-M.limit-month, .col-Ms.limit-month, .col-Msj.limit-month, .col-Mi.limit-month, .col-Mev.limit-month, .col-Mcas.limit-month, .col-Meco.limit-month, .col-Meval.limit-month, .col-Mins.limit-month,
.col-T.limit-month, .col-Ts.limit-month, .col-Tsj.limit-month, .col-Ti.limit-month, .col-Tev.limit-month, .col-Tcas.limit-month, .col-Teco.limit-month, .col-Tins.limit-month,
.col-Tv.limit-month, .col-Tvs.limit-month, .col-Tsjv.limit-month, .col-Tvev.limit-month, .col-Tvcas.limit-month, .col-To.limit-month, .col-iTA.limit-month, .col-iTAs.limit-month, .col-iTAsj.limit-month, .col-CEvT.limit-month, .col-CET.limit-month,
.col-O.limit-month, .col-P.limit-month, .col-B.limit-month, .col-RJ.limit-month, .col-AAPP.limit-month, .col-HHSS.limit-month, .col-CS.limit-month, .col-EX.limit-month,
.col-F.limit-month, .col-Ov.limit-month, .col-it.limit-month, .col-im.limit-month, .col-cand-M.limit-month, .col-cand-Mv.limit-month, .col-cand-Mo.limit-month, .col-cand-T.limit-month, .col-cand-Tv.limit-month, .col-cand-To.limit-month {
    color: #666;
}

/* Colores más claros para limit-month para fondos oscuros (Noche, Vacaciones, R) */
.col-Mv.limit-month, .col-Mvs.limit-month, .col-Msjv.limit-month, .col-Mvev.limit-month, .col-Mvcas.limit-month, .col-Mo.limit-month, .col-iMA.limit-month, .col-iMAs.limit-month, .col-iMAsj.limit-month, .col-CEvM.limit-month, .col-CEM.limit-month,
.col-Nv.limit-month, .col-Nvs.limit-month, .col-Nsjv.limit-month, .col-No.limit-month, .col-iNA.limit-month, .col-iNAs.limit-month, .col-CEvN.limit-month, .col-CEN.limit-month,
.col-V.limit-month, .col-w.limit-month, .col-Va.limit-month, .col-R.limit-month {
    color: #666;
}

.col-N.limit-month, .col-Ni.limit-month,.col-Nins.limit-month, .col-Ns.limit-month, .col-Nsj.limit-month,
.col-in.limit-month, .col-cand-N.limit-month,.col-N1.limit-month, .col-N2.limit-month, .col-N3.limit-month,
.col-N4.limit-month, .col-N5.limit-month, .col-N6.limit-month, .col-N7.limit-month, .col-N8.limit-month, 
.col-N9.limit-month, .col-hhee.limit-month, .col-cos.limit-month, .col-hhvv.limit-month {
    color: #ccc;
} 

.inactive-color { color: #bbb; }
.apro { font-weight: bold; font-style: italic; }

div.captions { 
  margin: 20px 0; 
} 

div.turnero-captions { 
  margin: 20px 0; 
} 

div.bottom-panel { 
  border: 1px solid #000; 
  margin-top: 10px; 
  margin-bottom: 30px; 
} 
div.bottom-panel div.element { 
  padding: 5px; 
  margin: 5px; 
  text-align: center; 
} 
div.bottom-panel div.element a { 
  line-height: 16px; 
} 

/* --- Estilos para la tabla 'atcos' --- */

table.atcos { 
  margin: 0 20px 5px; 
  display: table; 
  border: 1px solid #888; 
} 
table.atcos th, table.atcos td { 
  vertical-align: middle; 
  padding: 5px; 
  text-align: center; 
} 
table.atcos thead tr { 
  background: rgba(0, 0, 0, 0.5); 
  color: #fff; 
  font-weight: bold; 
} 
table.atcos thead th { 
  font-weight: bold; 
} 
table.atcos thead th.fullname { 
  width: 200px; 
} 
table.atcos thead th.position { 
  width: 50px; 
} 
table.atcos thead th.head-cos { 
  background: #147e14; 
} 
table.atcos thead th.id { 
  width: 30px; 
} 
table.atcos thead th.equipo { 
  width: 50px; 
} 
table.atcos thead th.name { 
  width: 50px; 
} 
table.atcos thead th.email { 
  width: 50px; 
} 
table.atcos thead th.balance { 
  width: 50px; 
} 
table.atcos thead th.total { 
  width: 70px; 
} 
table.atcos thead th.total_comp { 
  width: 80px; 
  background: #444; 
} 
table.atcos thead th.head-hhee { 
  color: #fff; 
  background: #43d643; 
} 
table.atcos thead th.head-hhvv { 
  background: #3194ec; 
} 
table.atcos th.last_date, table.atcos td.last_date { 
  font-size: 12px; 
} 
table.atcos thead th.hhee { 
  width: 60px; 
} 

table.atcos tbody tr { 
  border-bottom: 1px solid #ccc; 
  background-color: rgba(255, 255, 255, 0.9); 
} 
table.atcos tbody tr:nth-child(even) { 
  background-color: rgba(238, 238, 238, 0.9); 
} 
table.atcos tbody tr:hover { 
  background: rgba(200, 200, 200, 0.9); 
} 
table.atcos tbody tr.creditor { 
  background-color: rgba(202, 255, 167, 0.9); 
} 
table.atcos tbody tr.debtor { 
  background-color: rgba(255, 167, 167, 0.9); 
} 

table.atcos tbody td.hhee { 
  background: #43d643; 
  color: #fff; 
} 
table.atcos tbody td.cos { 
  background: #147e14; 
  color: #fff; 
} 
table.atcos tbody td.hhvv { 
  background: #3194ec; 
  color: #fff; 
} 
table.atcos tbody td.total { 
  border-left: 1px solid #888; 
  border-right: 1px solid #888; 
} 
table.atcos tbody td.total_comp { 
  font-weight: bold; 
  position: relative; 
  background: #222; 
  color: #fff; 
  padding: 5px 10px; 
} 

/* --- Estilos para la tabla '#list_exchanges' --- */

div#list_exchanges table { 
  display: table; 
  overflow: hidden; 
  table-layout: fixed; 
} 
div#list_exchanges table tr { 
  height: 20px; 
} 
div#list_exchanges table th { 
  font-weight: bold; 
} 
div#list_exchanges table th.day { 
  width: 30px; 
} 
div#list_exchanges table th.day-long { 
  width: 80px; 
} 
div#list_exchanges table th.atco { 
  width: 40px; 
} 
div#list_exchanges table th.shift { 
  width: 50px; 
} 
div#list_exchanges table th.exchange { 
  width: 20px; 
} 
div#list_exchanges table th.sent { 
  width: 100px; 
} 
div#list_exchanges table th.sent-long { 
  width: 115px; 
} 
div#list_exchanges table th.sent_by { 
  width: 50px; 
} 
div#list_exchanges table td { 
  text-align: center; 
} 

/* --- Estilos para la tabla principal 'turnero' - General --- */

table.turnero { 
  table-layout: fixed; 
  display: table; 
} 

table.turnero tr { 
  z-index: -2; 
} 
table.turnero tr.even-row { 
  background: #eee; 
} 

table.turnero th, table.turnero td { 
  height: 26px; 
  vertical-align: middle; 
  text-align: center; 
} 

table.turnero th.left, table.turnero td.left { 
  text-align: left; 
} 
table.turnero th.right, table.turnero td.right { 
  text-align: right; 
} 

/* Estilos de Totales (Total, Subtotal, Sup) */
table.turnero th.total, table.turnero td.total { 
  font-weight: bold; 
  border-left: 2px solid #000; 
  color: #fff !important; 
} 
table.turnero td.total { 
  background: #999; 
  color: #fff !important; /* Sobrescribe la declaración anterior, es redundante pero se mantiene */
} 
table.turnero th.total { 
  background: #666;
} 

table.turnero th.subtotal, table.turnero td.subtotal { 
  border-left: 2px solid #000; 
  border-right: 2px solid #000; 
  font-weight: bold; 
} 
table.turnero th.subtotal { 
  background: #999; 
  color: #fff !important; 
} 
table.turnero th.miroster { 
  border-radius: 7px 7px 7px 7px;
} 
table.turnero td.subtotal { 
  min-width: 20px;
  color: #000; 
} 

table.turnero th.sup, table.turnero td.sup { 
  border-left: 1px solid #000; 
  font-weight: bold; 
  border-right: 1px solid #000; 
  color: #000 !important; 
} 
table.turnero th.sup { 
  background: #ddb; 
} 
table.turnero td.sup { 
  background: #ddb; 
} 

/* Estilos de Filas y Celdas de Cuerpo (tbody) */

table.turnero tbody tr:first-of-type { 
  border-top: 2px solid #444; 
} 
table.turnero tbody tr:last-of-type { 
  border-bottom: 2px solid #444; 
} 
table.turnero tbody tr.equipo-I { 
  background: #bbb; 
} 
table.turnero tbody tr.equipo-hidden { 
  display: none; 
} 
table.turnero tbody tr.newequipo { 
  border-top: 2px solid #888; 
} 
table.turnero tbody tr.separator { 
  border-top: 1.5px solid #888; 
} 
table.turnero tbody tr.me-coloured { 
  background: #ccc; 
  border-top: 2px solid #444; 
  border-bottom: 2px solid #444; 
} 
table.turnero tbody tr.me-stats { 
  background: #ccc; 
  border-top: 2px solid #444; 
  border-bottom: 2px solid #444; 
} 
table.turnero tbody tr.me td.name, 
table.turnero tbody tr.me td.position, 
table.turnero tbody tr.me td.hours { 
  background-color: #666; 
  color: #fff; 
} 


table.turnero tbody td { 
  border-left: 1px solid #ccc; 
  position: relative; 
  border-bottom: 1px solid #ccc;  

} 

table.turnero tbody td.flexible { 
  border-left: 1px solid #44bc69; 
  position: relative; 
  border-bottom: 2px solid #44bc69;  
}

table.turnero tbody td.equipo { 
  width: 25px; 
  background-color: #e8e8e8; 
  border-right: 2px solid #ccc; 
} 
table.turnero tbody td.name { 
  font-weight: bold; 
  width: 40px; 
} 
table.turnero tbody td.name.no-usca { 
  color: #aaa; 
} 
table.turnero tbody td.position { 
  width: 40px; 
  font-size: 12px; 
  border-left: 2px solid #888; 
} 
table.turnero tbody td.day {
    font-size: 12px;
} 
table.turnero tbody td.day.initial { 
  background: #bbb; 
  color: #fff; 
} 
table.turnero tbody td.hoy { 
  border-left: 2px solid #666; 
  border-right: 2px solid #666; 
} 
table.turnero tbody td.roster-hoy { 
  border: 2px solid #000; 
} 
/*para que resalte las noches que son hoy*/
table.turnero tbody td.col-N.roster-hoy { 
  border: 3px solid #eaff5b; 
}
table.turnero tbody td.col-N.hoy.me { 
  border: 3px solid #eaff5b; 
}
/*resaltar la celda hoy del user*/
table.turnero tbody td.hoy.me { 
  border: 3px solid #000; 
}

table.turnero tbody td.hours { 
  width: 50px; 
  text-align: right; 
  padding-right: 5px; 
  font-size: 12px; 
} 
table.turnero tbody td.hours.warning { 
  color: #f00; 
} 
table.turnero tbody td.hours.bust { 
  background: #f00; 
  color: #fff; 
} 
table.turnero tbody td.MCO { 
  width: 50px; 
  font-size: 12px; 
  padding-right: 5px; 
  text-align: right; 
} 
table.turnero tbody td.MCO.MCO_red { 
  background: rgba(237, 12, 12, 0.5215686275) !important; 
  color: #000 !important; 
} 
table.turnero tbody td.MCO.MCO_orange { 
  background: rgba(255, 71, 0, 0.6) !important; 
  color: #000 !important; 
} 
table.turnero tbody td.MCO.MCO_yellow { 
  background: rgba(255, 190, 0, 0.6) !important; 
  color: #000 !important; 
} 
table.turnero tbody td.MCO.MCO_green { 
  background: rgba(0, 161, 0, 0.431372549) !important; 
  color: #000 !important; 
} 

table.turnero tbody td.day.cambiable:hover, 
table.turnero tbody td.day.supervisable:hover, 
table.turnero tbody td.day.instructable:hover { 
  min-height: 40px; /* Ajusta según sea necesario */ 
  background-color: #fff; 
  min-width: 60px; 
  text-decoration: underline; 
  color: #000; 
  cursor: pointer; 
} 

table.turnero tbody td.wday-S, table.turnero tbody td.wday-D { 
  background: #e8e8e8;
  font-weight: bold; 
} 
table.turnero tbody td.me-hovered { 
  background: #fff; 
  color: #000; 
} 
table.turnero tbody td.separator-left { 
  border-left: 2px solid #000; 
} 
table.turnero tbody td.separator-right { 
  border-right: 2px solid #000; 
} 
table.turnero tbody td.percentage { 
  padding-left: 5px; 
  text-align: left; 
  font-size: 12px; 
} 
table.turnero tbody td.stats { 
  font-size: 12px; 
} 
table.turnero tbody td.month { 
  text-transform: none !important; 
  font-weight: bold; 
  width: 40px; 
} 
table.turnero tbody td.double-col { 
  height: 52px; 
} 
table.turnero tbody td.no-day { 
  background: #fff; 
} 

table.turnero tbody td img.style-busy {
    width: 14px;
    height: 18px;
    margin-top: 3px;
}


/* Estilos de Filas y Celdas de Encabezado (thead) */

table.turnero thead tr { 
  font-weight: bold; 
} 
table.turnero thead th { 
  position: relative; 
  font-weight: bold; 
} 
table.turnero thead th.day { 
  width: 55px; 
  border-bottom: 1px solid #bbb; 
  border-right: 1px solid #bbb; 
} 
table.turnero thead th.day:hover { 
  background: #666; 
} 
table.turnero thead th.shift { 
  width: 50px; 
  color: #000; 
  border-bottom: 1px solid #aaa; 
} 
table.turnero th.shift { 
  background: #ddd; 
}
table.turnero thead th.crs-job {
    vertical-align: middle;
    text-align:center;
    color:#000;
}
table.turnero thead th.crs-job button{
    width: 65px; 
}  
table.turnero thead th.hours { 
  width: 50px; 
} 
table.turnero thead th.hours button { 
  width: 50px; 
} 
table.turnero thead th.MCO { 
  width: 50px; 
} 
table.turnero thead th.MCO button { 
  width: 50px; 
} 
table.turnero thead th.wday-S, table.turnero thead th.wday-D { 
  background: #e8e8e8; 
} 
table.turnero thead th.hoy { 
  color: #fff; 
  background: #222; 
  border-left: 2px solid #666; 
  border-right: 2px solid #666; 
} 
table.turnero thead th.sup-left { 
  color: #fff; 
  background-color: #444 !important; 
} 
table.turnero thead th.separator-left { 
  border-left: 2px solid #000; 
} 
table.turnero thead th.separator-right { 
  border-right: 2px solid #000; 
} 
table.turnero thead th.limit-month { 
  color: #bbb; 
} 
table.turnero thead th.sort_by { 
  height: 30px; 
} 
table.turnero thead th.sort_by:hover { 
  cursor: pointer; 
} 
table.turnero thead th span.sorted_by { 
  position: absolute; 
  left: 50%; 
  bottom: 0; 
  transform: translate(-50%, 0%); 
} 

/* Encabezados Específicos */
table.turnero thead th.calendar { 
  height: 38px; 
} 
table.turnero thead th.distribution { 
  height: 46px; 
  padding-left: 3px; 
  text-align: left; 
  font-weight: normal; 
} 
table.turnero thead th.miroster { 
  height: 26px; 
  font-size: 13px; 
} 
table.turnero thead th.equipo { 
  width: 25px; 
} 
table.turnero thead th.name { 
  width: 40px; 
} 
table.turnero thead th.superalert { 
  color: #dd4c4c; 
  font-weight: bold; 
} 
table.turnero thead th.position { 
  width: 40px; 
} 
table.turnero th.hours { 
  width: 24px; 
} 
table.turnero td.hours { 
  width: 24px; 
  text-align: right; 
} 

/* --- Estilos para Pie de Tabla (tfoot) --- */

table.turnero tfoot tr:first-of-type td { 
  height: 30px; 
} 
table.turnero tfoot tr:first-of-type td.day { 
  font-weight: bold; 
} 
table.turnero tfoot tr:first-of-type td.shift { 
  background: transparent; 
  border: 0 solid #bbb; 
} 
table.turnero tfoot tr:first-of-type td.hoy { 
  color: #fff; 
  background: #000; 
} 
table.turnero tfoot tr:first-of-type th.hoy { 
  color: #fff; 
  background: #000; 
} 
table.turnero tfoot tr:nth-of-type(2) td.shift, table.turnero tfoot tr:nth-of-type(2) td.day { 
  border-top: 2px solid #444; 
} 
table.turnero tfoot tr.im td.shift, table.turnero tfoot tr.im td.day, 
table.turnero tfoot tr.it td.shift, table.turnero tfoot tr.it td.day { 
  border-bottom: 2px solid #888; 
} 

table.turnero tfoot td { 
  height: 22px; 
  position: relative; 
} 
table.turnero tfoot td.shift { 
  font-weight: bold; 
  background-color: #fff; 
  border: 1px solid #bbb; 
  border-left: 2px solid #444; 
} 
table.turnero tfoot td.day { 
  background-color: #fff; 
  border-right: 1px solid #bbb; 
  border-bottom: 1px solid #bbb; 
} 
table.turnero tfoot td.hoy { 
  border-left: 2px solid #666; 
  border-right: 2px solid #666; 
} 
table.turnero tfoot td.wday-S, table.turnero tfoot td.wday-D { 
  background: #e8e8e8; 
} 
table.turnero tfoot td.separator-left { 
  border-left: 2px solid #000; 
} 
table.turnero tfoot td.separator-right { 
  border-right: 2px solid #000; 
} 
table.turnero tfoot td.limit-month { 
  color: #bbb; 
} 


/* --- Estilos para 'ical_box' y Enlaces de Documentos --- */

div#pdf-links h1 { 
  margin-bottom: 20px; 
} 
div#pdf-links ul { 
  margin-bottom: 10px; 
} 
div#pdf-links ul li { 
  padding: 5px; 
} 
div#pdf-links ul li img { 
  margin-right: 5px; 
} 
div#pdf-links ul li a * { 
  vertical-align: middle; 
} 

div.ical_box { 
  width: fit-content; 
  margin: -10px 5px 5px 5px; 
  border: 1px solid #888; 
  padding: 10px; 
} 
div.ical_box div.ical, 
div.ical_box div.ical_hide { 
  text-align: center; 
} 
div.ical_box div.ical span:first-of-type, 
div.ical_box div.ical_hide span:first-of-type { 
  cursor: pointer; 
  text-decoration: underline; 
} 
div.ical_box div.ical, 
div.ical_box div.ical_hide { 
  display: none; 
} 
div.ical_box div.ical span, 
div.ical_box div.ical input { 
  font-family: monospace; 
} 
div.ical_box div.ical span span, 
div.ical_box div.ical input span { 
  font-weight: bold; 
} 
div.ical_box div.ical input { 
  width: 300px; 
} 
div.ical_box div.ical img { 
  cursor: pointer; 
  float: right;
} 

/* --- Media Queries --- */

@media only screen and (max-width : 1000px ) { 
  table.turnero thead th.MCO { 
    display: none; 
  } 
  table.turnero tbody td.MCO { 
    display: none; 
  } 
  div.ical_box { 
    margin: 0px 5px 5px 5px; 
    padding: 5px; 
  } 
  div.ical_box div.ical input { 
    width: 250px; 
  } 
  table.atcos tbody td.total_comp { 
    padding: 5px; 
  } 
}

/* --- Elemento MAIN --- */
main {
  width: 100%;
  font-size: 14px;
  color: #444;
  min-height: 100%;
}
@media only screen and (max-width : 1000px ) {
  main {
    padding-top: 50px;
  }
}
main section {
  width: 100%;
}
@media only screen and (min-width : 1000px ) {
  main section {
    padding: 20px 0;
  }
}
@media only screen and (max-width : 1000px ) {
  main section {
    padding: 10px 0;
  }
}

/* --- Contenedores de Vistas Específicas --- */
div.standings {
  min-height: 720px;
  width: 600px;
}
@media only screen and (max-width : 1000px ) {
  div.standings {
    width: 100%;
  }
}


/* -------------------------------------------------------------------------
   [2] ESTILOS DE MÓDULOS ESPECÍFICOS DE LA APLICACIÓN (main#id)
-------------------------------------------------------------------------- */

/* --- Módulo 'miroster' (Roster de usuario) --- */
main#miroster div.middle-container,
main#miroster div.middle-container-scroll {
  max-width: calc(100vw - 150px);
}
@media only screen and (max-width : 1000px ) {
  main#miroster div.middle-container,
  main#miroster div.middle-container-scroll {
    max-width: calc(100vw - 110px);
  }
}
main#miroster section.miroster_info {
  margin: 0 auto;
}
@media only screen and (min-width : 1000px ) {
  main#miroster section.miroster_info {
    width: 30%;
  }
}
main#miroster section.miroster_info div {
  margin: 5px;
}


/* --- Módulos 'Stats' (Estadísticas) --- */
main#stats h2 span {
  display: inline-block;
  width: 100px;
}
main#stats div.middle-container-count,
div.middle-container-count {
  max-width: calc(100vw - 120px);
}
@media only screen and (max-width : 1000px ) {
  main#stats div.middle-container-count,
  div.middle-container-count {
    max-width: calc(100vw - 110px);
  }
}
main#stats a.active, a.active {
  background: #444;
  color: #fff;
}


/* -------------------------------------------------------------------------
   [3] FORMULARIOS Y ELEMENTOS INTERACTIVOS BÁSICOS
-------------------------------------------------------------------------- */

form {
  margin: 10px auto;
}
/* Inputs de texto/password/email */
form input:not([type=checkbox]):not([type=radio]) {
  display: block;
  width: 100%;
  margin: 5px 0 10px;
  padding: 5px;
}
form select {
  width: 100%;
  margin: 5px 0 10px;
  padding: 5px;
}

select.shift_type {
    margin-bottom: 9px;
}

form span#fail {
  display: none;
  margin: 20px 0 5px;
  color: red;
}
form a.forgot {
  margin-top: 10px;
  text-decoration: underline;
}
form textarea {
  width: 100%;
  min-height: 50px;
  margin: 5px 0 10px;
}
form input#bolsa_check {
  margin: 10px 0;
}
/* Input de envío (submit) */
form inputp[type=submit] {
  display: block;
  margin-top: 10px;
  padding: 5px;
  font-weight: bold;
  font-size: 16px;
}
/* Input de número */
form input[type=number] {
  width: 60px;
  padding: 5px;
}

/* Controles de Modificación (general) */
div.modify-controls {
  width: 100%;
  margin: 10px 0;
}
div.modify-controls input#modify_submit {
  padding: 5px;
}


/* -------------------------------------------------------------------------
   [4] OVERLAYS Y POPUPS (Ventanas Modales)
-------------------------------------------------------------------------- */

#popup-block {
  display: none;
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 10;
}
#popup-block:hover {
  cursor: pointer;
}
#popup-block #popup_container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border-radius: 10px 10px 10px 10px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
}
@media only screen and (max-width : 1000px ) {
  #popup-block #popup_container {
    min-width: 330px;
    max-width: 90%;
    padding: 15px;
  }
}
#popup-block #popup_container:hover {
  cursor: default;
}

/* Botón de cierre */
#popup-block #popup_container .close {
  position: absolute;
  top: 10px;
  right: 20px;
  transition: all 300ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #888;
}
@media only screen and (max-width : 1000px ) {
  #popup-block #popup_container .close {
    top: 5px;
    right: 10px;
  }
}

/* Contenido interno del popup */
#popup-block #popup_container #popup {
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
}
@media only screen and (max-width : 1000px ) {
  #popup-block #popup_container #popup {
    padding: 0;
  }
}

td.type {
    width: 58px;
    height: 26px;
    text-align: center;
    vertical-align: middle;
}

td.descrip {
    padding-left: 9px;
    padding-right: 9px;
}

/* Botones dentro de popups relacionados con turnos */
button.opciones_btn {
  width: 80%;
  padding: 5px;
  margin: 10px 0 5px;
  font-weight: bold;
  background: #eee;
  border: none;
  border-radius: 7px 7px 7px 7px;
}
button.confirm_btn {
  width: 70%;
  padding: 5px;
  margin: 10px 0 5px;
  font-weight: bold;
  background: #eee;
  border: none;
  border-radius: 7px 7px 7px 7px;
}

button.confirm_btn:hover {
  cursor: pointer;
}
button.confirm_btn::disabled {
  cursor: normal;
}

button.opciones_btn:hover {
  cursor: pointer;
}
button.opciones_btn::disabled {
  cursor: normal;
}

label.choose_other {
    margin-right: 9px;
}


/* -------------------------------------------------------------------------
   [5] TOOLTIPS Y UTILIDADES VISUALES
-------------------------------------------------------------------------- */

/* --- Tooltips (Consejos emergentes) --- */
.tooltiptext {
  visibility: hidden;
  padding: 5px 10px;
  text-align: left;
  line-height: 14px;
  border-radius: 3px;
  background-color: #fafafa;
  border: 2px solid #aaa;
  color: #444;
  font-weight: normal;
  font-size: 12px;
  width: max-content;
  max-width: 240px;
  white-space: normal;
  word-break: break-word;
  /* Posicionamiento */
  position: absolute;
  top: 40%;
  z-index: 1;
}
.tooltiptext.tooltipright {
  left: 30%;
}
.tooltiptext.tooltipleft {
  right: 30%;
}
.tooltiptext.active {
  visibility: visible;
  opacity: 1;
  z-index: 9999;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.tooltip-head .tooltiptext {
  top: 60%;
}
.tooltip-foot .tooltiptext {
  bottom: 60%;
  top: inherit;
}

/* --- Indicadores Visuales en la Tabla --- */
/* Indicador de turno intercambiado */
.cambiado::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 5px;
    display: block;
    background-color: #f78585; /* Rosado */
    border-radius: 0 0 0 100%;

    /* Esto ayuda a que el borde del cuarto de círculo se vea
       suave y no choque con los bordes de tu contenedor */
    overflow: hidden;
}
/* Mensaje de error (ejemplo) */
span.msg1001 {
  color: red;
}
/* Indicador de que es un día con turno */
span.Busy-turno {
  position: absolute;
  top: 0;
  right: 2px;
}
/* Estilo para elementos de "Busy" */
span.Busy span {
  display: inline-block;
}
span.Busy span sup,
span.Busy span sub {
  position: relative;
  display: block;
}

/* --- Ocultar elementos (Clase de utilidad) --- */
.oculto-invisible {
  visibility: hidden; /* Oculta pero mantiene el espacio */
  opacity: 0;         /* Permite transiciones suaves */
}


main#gestion div.boxed {
  margin: 10px;
  padding: 20px;
  background: #fff;
  border: 1px solid #bbb;
  border-radius: 7px 7px 7px 7px;
}
main#gestion div#assign_extras,
main#gestion div#unassign_extras,
main#gestion div#assign_approach {
  width: 300px;
}

/* -------------------------------------------------------------------------
   [6] CONTROLES FLOTANTES (Fijos en la pantalla)
-------------------------------------------------------------------------- */

/* Selector de Modo Lectura/Edición */
div#readonly_mode {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 107px;
  height: 37px;
  background: #fff;
  border: 1px solid #cccccc;
  border-radius: 5px 0 0 0;
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.2);
  z-index: 9;
}
div#readonly_mode a {
  display: block;
  padding: 5px;
}
div#readonly_mode img {
  display: block;
}