/* importar fuente*/
@font-face{
    font-family: "fajala";
    src:url(../fonts/fuente.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* generales*/
*{
    margin: 0px;
    padding: 0px;
    font-family: sans-serif, Helvetica, Arial;
    text-decoration: none;
}

.clearfix{
    clear:both;
    float: none;
}

body{
    background: url(../img/cubes.png) #f4f4f4;
}

#table{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 14px;    
    margin: 45px;     
    width: 480px; 
    text-align: left;    
    border-collapse: collapse; }

#th{
    font-size: 14px;
    font-weight: normal;
    padding: 8px;
    background: #b40e0e;
    border-top: 2px solid black;
    border-bottom: 1px solid #fff; color: black;
    color: white;
 }

#td{
    padding: 6px;
    background: #d5d6da;
    border-bottom: 1px solid #fff;
    color: rgb(0, 0, 0);
    border-top: 1px solid transparent; }

#tr:hover td { 
    background: #bd9494; 
    color: black; }



#cabecera{
    width: 95%;
    height: auto;
    background: transparent;
    margin: 0px auto;
    /*border: 1px solid black;*/
}

.alerta{
    padding: 5px;
    font-size: 10px;
    color: white;
    background: green;
    box-shadow: 0px 1px 3px #ccc;
    margin-bottom: 10px;
    width: 25%;
}

.alerta-error{
    background: red;
}

#responsive-image{
    width: 100%;  
    height: auto; 
    border-radius: 8px;
} 


/*lOGOTIPO*/
#logo{
    float: left;
    width: 540px;   
    height: 100px;
}

#logo a{
    font-family: "fajala", Helvetica;
    font-size: 40px;
    letter-spacing: 2px;
    color: #b40e0e;
    text-shadow:0px 0px 0px black, 1px 1px 0px black,2px 2px 0px black;
    transition: all 500ms;
    line-height: 90px;
}

#logo a:hover{
    cursor: pointer;
    text-shadow:0px 0px 0px black, -1px -1px 0px black,-2px -2px 0px black;    
}
/*Menu*/
#menu{
    clear: both;
    width: 100%;
    height: 45px;
    background: linear-gradient(to bottom,#f9f9f9 0px, #e9e9e9 100%);
    border: 1px solid #c9c9c9;
    border-radius: 8px;
    box-shadow: 0px 1px 1px #ccc;
    overflow: hidden;
}

#menu ul{
    list-style: none;
}

#menu li{
    float: left;
    line-height: 45px;
    border-right: 1px solid #d6d6d6;
}

#menu li a{
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 15px;
    color: #838282;
}

#menu li a:hover{
    transition: 1000ms;
    background: #b40e0e;
    color: whitesmoke;
}

/*Contenido*/
#contenedor{
    width: 95%;
    min-height: 700px;
    margin: 0px auto;
    margin-top: 30px;
    margin-bottom: 30px;
}

/*barra lateral*/
#sidebar{
    float: left;
    width: 20%;
    min-height: 700px;
}
.bloque{
   display: block;
   width: 80%;
   margin: 0px auto;
   margin-bottom: 35px;
   background: white;
   padding: 15px;
   box-shadow: 0px 0px 1px rgba(0,0,0,0.3),0px 3px 7px rgba(0,0,0,0.3),0px 0px 1px #ffffff inset,0px -3px 2px rgba(0,0,0,0.3); 
}
.bloque h3{
    margin-bottom: 5px;
    color: #b40e0e;
}

.bloque:hover{
    padding: 20px;
}

label,
input[type="text"],
input[type="email"],
input[type="password"]{
    display: block;
    width: 90%;
    margin-top: 2px;
    margin-bottom: 2px;
}
input[type="text"],
input[type="email"],
input[type="password"]{
    padding: 1px;
    margin-bottom: 1px;
}
.inputAuto{
    display: block !important;;
    width: auto !important;;
    margin-top: 0px !important;;
    margin-bottom: 0px !important;;
}


input[type="button"],
input[type="submit"],

.boton{
    margin-top: 5px;
    margin-bottom: 5px;
    display: block;
    border-radius: 2px;
    color: white;
    background: #b40e0e;
    border: 1px solid #b40e0e;
    cursor: pointer;
    padding: 6px;
}
.boton{
    text-align: center;
    width: 130px;
}

@media (max-width: 767px) {
  .bloque-acceso-portal .boton {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 12px 16px;
    font-size: 1rem;
    line-height: 1.35;
  }

  .bloque-acceso-portal h3 {
    font-size: 1.25rem;
  }

  .bloque-acceso-portal p {
    font-size: 1rem;
  }
}
.boton-rojo{
    background: red;
    color: white !important;
}

.boton-verde{
    background: green;
    color: white !important;
}

.boton-cookies{
    background: green;
    color: white !important;
    margin-top: 20px auto !important;
    padding: 2px !important;
}

.boton-cookies:hover{
    box-shadow: 0px 0px 5px black; 
}

.boton-atras{
    width: 300px !important;
    background: #44975B;
    color: rgb(87, 187, 125) !important;
}
.boton-atras:hover{
    box-shadow: 0px 0px 5px black; 
}


.botonE{
    text-align: center;
    width: 60px;
    margin-top: 5px;
    margin-bottom: 5px;
    display: block;
    border-radius: 2px;
    color: white;
    background: #b40e0e;
    border: 1px solid #b40e0e;
    cursor: pointer;
    padding: 6px;;
}
.botonEd{
    text-align: center;
    width: 60px;
    margin-top: 5px;
    margin-bottom: 5px;
    display: block;
    border-radius: 2px;
    color: white;
    background: #219704;
    border: 1px solid #000000;
    cursor: pointer;
    padding: 6px;;
}

input[type="button"],
input[type="submit"]:hover{
    box-shadow: 0px 0px 5px black;
}

.boton:hover{
    box-shadow: 0px 0px 5px black; 
}
.boton-rojo:hover{
    box-shadow: 0px 0px 5px black; 
}
.boton-verde:hover{
    box-shadow: 0px 0px 5px black; 
}
/*Contenedor*/
#principal{
    float: left;
    width: 70%;
    min-height: 572px;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 0px 5px #ccc;
    margin-left: 20px;
    overflow: hidden;
    padding: 20px;
}
#principalc{
    float: left;
    width: 70%;
    min-height: 100px;
    background: rgb(197, 194, 194);
    border-radius: 5px;
    box-shadow: 0px 0px 5px #ccc;
    margin-left: 20px;
    overflow: hidden;
    padding: 20px;
}
#principal a{
    color: #333;
}
#principal h1{
    font-size: 32px;
    color: #444;
    letter-spacing: 1px;
    text-shadow:1px 1px 2px #ccc;
    font-family: "fajala";
}
#principal h2{
    font-size: 20px;
    color: #b40e0e;
    letter-spacing: 1px;
    font-family: "fajala";
    margin-top: 25px;
    text-shadow:1px 1px 2px #ccc;
}

#principal p{
    margin-top: 8px;
}
#ver-todas a{ 
    display: block;
    border-radius: 2px;
    padding: 15px;
    color: white;
    background: #b40e0e;
    border: 1px solid #156785;
    cursor: pointer;
    width: 160px;
    margin: 0px auto;
    margin-top: 40px;
}
#ver-todas a:hover{ 
    box-shadow: 0px 0px 5px black;
}

/*pie de pag*/
#pie{
    clear: both;
    width: 85%;
    margin: 0px auto;
    background: linear-gradient(to bottom,#f9f9f9 0px, #e9e9e9 100%);
    border: 1px solid #c9c9c9;
    border-bottom: none;
    border-radius: 8px 8px 0px 0px;
    color: #666;
    height: auto;
    padding: 15px;
    text-align: center;
    box-shadow: 0px 0px 4px black;
}


.entrada:hover{
    padding: 2px;
    box-shadow: 0px 0px 8px black; 
}

.spanEntradas{
    color: #999;
    margin-top: 6px;
    font-size: 12px;
}

#leer_mas{  
    color: #b40e0e !important;
}

#leer_mas:hover{
    text-shadow:0px 0px 2px black;
    }
    
.correcto{
    font-size: 16px;
    color: green;
    
}    

.modal-container {
    display: flex;
    align-items: left;
    justify-content: left;

    top: 0;
    left: 0;

    transition: opacity 0.3s ease;
  }

/* Mis vacaciones (operario) */
.vacaciones-operario .vacaciones-intro {
    margin-bottom: 1.25rem;
    color: #333;
}

/* Resumen vacaciones operario (solo 3 cifras; sin arrastre) */
.vf-resumen-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .vf-resumen-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.vacaciones-nota--formula {
    background: #f5f8f6;
    border-left: 3px solid #44975b;
    padding: 0.5rem 0.75rem;
    border-radius: 0 4px 4px 0;
}

.vf-resumen-item--anio .vf-resumen-num { color: #555; }
.vf-resumen-item--acum .vf-resumen-num { color: #2a6b8a; }

.vf-resumen-item {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.vf-resumen-num {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.1;
}

.vf-resumen-item--usados .vf-resumen-num { color: #b40e0e; }
.vf-resumen-item--restantes .vf-resumen-num { color: #0d7a4a; }
.vf-resumen-item--total .vf-resumen-num { color: #555; }

.vf-resumen-txt {
    font-size: 0.85rem;
    color: #666;
}

/* Ocultar layout antiguo si el servidor aún sirve HTML viejo (5 cajas) */
.vacaciones-stats--5,
.vacaciones-stats .vacaciones-stat:nth-child(n+4) {
    display: none !important;
}

.vacaciones-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 1.25rem;
}

.vacaciones-anio {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 0.75rem;
}

@media (max-width: 700px) {
    .vacaciones-stats,
    .vf-resumen-grid { grid-template-columns: 1fr 1fr; }
}

.vacaciones-stat {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.vacaciones-stat-num {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.1;
}

.vacaciones-stat--usados .vacaciones-stat-num { color: #b40e0e; }
.vacaciones-stat--restantes .vacaciones-stat-num { color: #0d7a4a; }
.vacaciones-stat--total .vacaciones-stat-num { color: #555; }

.vacaciones-stat-txt {
    font-size: 0.85rem;
    color: #666;
}

.vacaciones-barra {
    margin-bottom: 1.5rem;
    max-width: 520px;
}

.vacaciones-barra-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: #444;
}

.vacaciones-barra-fondo {
    height: 10px;
    background: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
}

.vacaciones-barra-fill {
    height: 100%;
    background: #b40e0e;
    border-radius: 5px;
}

.vacaciones-subtitulo {
    margin: 1rem 0 0.35rem;
    font-size: 1.15rem;
}

.vacaciones-nota {
    font-size: 0.88rem;
    color: #666;
    margin-bottom: 1rem;
}

.vacaciones-periodo {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

.vacaciones-periodo-cab {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.vacaciones-periodo-dias {
    color: #b40e0e;
    font-weight: bold;
}

.vacaciones-periodo-obs {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 8px;
}

.vacaciones-chip {
    display: inline-block;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 3px 8px;
    margin: 3px 6px 3px 0;
    font-size: 0.82rem;
}

.vacaciones-vacio {
    color: #666;
    font-style: italic;
}

/* Líneas de descripción del parte */
.parte-descripcion-seccion {
    margin-top: 1.5rem;
    clear: both;
}

.parte-descripcion-seccion__cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.parte-descripcion-seccion__cab h2 {
    margin: 0;
}

.parte-descripcion-seccion__agregar {
    width: auto !important;
    min-width: 140px;
}

.parte-linea {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #b40e0e;
    border-radius: 8px;
    padding: 1rem 1.1rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.parte-linea__cab {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid #e8e8e8;
}

.parte-linea__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
}

.parte-linea__operario {
    font-weight: 700;
    font-size: 1rem;
    color: #333;
}

.parte-linea__horas {
    font-size: 0.95rem;
    font-weight: 600;
    color: #b40e0e;
    background: #fdeaea;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
}

.parte-linea__ref {
    font-size: 0.82rem;
    color: #777;
}

.parte-linea__descripcion {
    margin-bottom: 0.5rem;
}

.parte-linea__etiqueta {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    margin-bottom: 0.35rem;
}

.parte-linea__texto {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: #222;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.parte-linea__acciones {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #ddd;
}

.parte-linea__acciones .botonEd,
.parte-linea__acciones .botonE {
    display: inline-block;
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 0;
    text-align: center;
    padding: 0.3rem 0.65rem;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    border-radius: 4px;
    color: #fff !important;
    text-decoration: none;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.parte-linea__acciones .botonEd:hover,
.parte-linea__acciones .botonE:hover {
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.parte-linea-vacio {
    color: #666;
    font-style: italic;
    padding: 1rem;
    background: #f5f5f5;
    border-radius: 8px;
    text-align: center;
}

.parte-pie-extra {
    margin-top: 1rem;
}

.parte-pie-cerrar {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e0e0e0;
    text-align: center;
}

.parte-btn-cerrar {
    display: inline-block;
    width: auto;
    min-width: 160px;
    max-width: 280px;
    padding: 0.65rem 1.5rem !important;
    font-size: 1rem;
    font-weight: 600;
    color: #fff !important;
    background: #555 !important;
    border: 1px solid #444 !important;
    border-radius: 8px;
    text-decoration: none;
    box-sizing: border-box;
}

.parte-btn-cerrar:hover {
    color: #fff !important;
    background: #333 !important;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Formulario agregar / modificar descripción */
.form-descripcion-parte label {
    display: block;
    margin-top: 0.85rem;
    margin-bottom: 0.35rem;
    font-weight: 600;
    color: #444;
}

.form-descripcion-parte select,
.form-descripcion-parte input[type="number"],
.form-descripcion-parte input[type="text"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.form-descripcion-parte textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 140px;
    box-sizing: border-box;
    padding: 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid #ccc;
    border-radius: 8px;
    resize: vertical;
    font-family: inherit;
}