@import url(reset.css);
@import url(colores.css);
@import url(login.css);
@import url(distribuidor.css);
@import url(componentes.css);
@import url(lateral.css);


body{
    overflow: hidden;
}

:root{
    /* Ajusta según la altura real de tu header fijo */
    --header-h: 0px;
    /* === AJUSTES (MODIFICA AQUÍ) ======================================= */
    --sidebar-w: 260px;           /* ancho del sidebar visible (≥960px) */
    --left-gap-mobile: 60px;      /* hueco IZQ en móvil (btn abrir sidebar) */
    --right-gap-mobile: 160px;     /* hueco DCHA en móvil (logout u otros) */
    --right-gap-desktop: 185px;   /* hueco DCHA en escritorio (logout) */
    --topbar-offset: 0px;         /* altura del header fijo si lo tienes (p.ej. 56px) */

    --marquee-duration: 38s;      /* velocidad del texto (más alto = más lento) */
    --marquee-start: -556s;         /* aparece antes (más negativo = antes) */
    /* =================================================================== */

  }


nav{
    background: #fff;
    border-bottom: 1px solid #fbfbfb;
}

.contenedor-mosquitos {
    margin: 0;
    padding: 0;
    max-width: 900px;
    width: 100%;
  }
  .bloque {
    margin-bottom: 10px;
  }
  .titulo {
    font-size: 18px;
    margin-bottom: 5px;
  }
  select, button, input {
    font-size: 16px;
    padding: 6px;
    margin-bottom: 5px;
  }
  .iniciales {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .iniciales button {
    width: 36px;
    height: 36px;
    text-align: center;
    padding: 0;
    line-height: 36px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    background-color: #e0e0e0;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .iniciales button.destacada {
    background-color: #007bff;
    color: white;
    font-weight: bold;
    transform: scale(1.1);
  }
  .navegador {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 60px;
    padding-top: 10px;
  }
  .nav-btn {
    background: #ffffff;
    border: 1px solid #ccc;
    font-size: 22px;
    width:  60px;
    height: 60px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.3s ease;
  }
  .nav-btn:hover {
    background: #e0e0e0;
  }
  .carousel-wrapper {
    overflow: hidden;
    flex-grow: 1;
  }
  .carousel {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    gap: 10px;
    padding: 10px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .carousel::-webkit-scrollbar {
    display: none;
  }
  .carousel button {
    min-width: 120px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background: #ffffff;
    cursor: pointer;
    flex-shrink: 0;
    text-align: center;
    transition: all 0.2s ease;
  }
  .carousel button:hover {
    background: #dcdcdc;
  }
  .carousel button.seleccionado {
    background: #007bff;
    color: white;
  }



  .formulario-inspeccion {
    background: #ffffff;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 10px;
  }
  .formulario-inspeccion label {
    display: block;
    margin-top: 10px;
  }
  .ficha-inspeccion {
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
  }
  .acciones {
    margin-top: 5px;
  }
  .acciones button {
    margin-right: 10px;
    padding: 5px 10px;
    font-size: 14px;
  }
  #bloqueLarvas,
  #bloqueNumeroLarvas {
    display: none;
  }





/* ========================================A======================================== */


.aux-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4)}


.aux-modal{
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;                  /* centra con flex */
    align-items: flex-start;        /* arriba */
    justify-content: center;        /* centrado horizontal */
    padding: 5vh 16px;              /* margen superior/laterales */
  }
  
  .aux-content{
    position: relative;
    display: inline-block;          /* encoge al contenido */
    background: #fff;
    padding: 1rem;
    border-radius: 8px;
    /* NO pongas width aquí: deja que la plantilla decida */
    max-width: 100%;                /* que no se salga de la pantalla */
    box-sizing: border-box;
  }
  




.activa-tr{
    background: rgb(207,203,203);
    background: linear-gradient(180deg, rgba(207,203,203,.4) 0%, rgba(207,203,203,.4) 85%);
}

.aviso_mod{

    height: 24.78px;
    padding: .3rem;
    font-size: .8rem;
    text-align: center;
    color: #606060;
    background: #badbcc;
    margin-right: .3rem;
    border-radius: 3px;
    line-height: 15px;
    
}

.aviso_modos{

    height: 24.78px;
    padding: .3rem;
    font-size: .8rem;
    text-align: center;
    color: #606060;
    background: #badbcc;
    margin-right: .3rem;
    border-radius: 3px;
    line-height: 15px;
}


.alternativo-box{
    display: flex;
    margin-top: .3rem;
}

.alternativo-btn-izq{
    border: 1px solid #ccc;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: .4rem .6rem;
    font-size: .7rem;
    border-radius: 3px;
    
       
}

.alternativo-btn-dch{
    border: 1px solid #ccc;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    padding: .4rem .6rem;
    font-size: .7rem;
    border-radius: 3px;
    
}
.altSelect{
    background-color: #0078d4;
    color: #fff;
}

.activeUl{
    border-bottom: 2px solid #606060;
}

.aviso-close{
    height: 30px; 
    width: 30px; 
    font-size: 1.3rem; 
    border-radius: 3px; 
    text-align: center; 
    position: absolute; 
    right: .1rem; top: .1rem;
    line-height: 30px;
    
}
  
.aviso-close:hover{
    cursor: pointer;
    background-color: #f0f0f0;   
}


.ancho-responsive{
    width: 100%;
    height: 30px;
    border: 1px solid #606060; 
    text-align: center; 
    padding: .2rem;
}


.activo{
    background: #006cbe;
    color: #ffff;
}

.btn-activo{
    background: #006cbe;
    color: #606060;
}

.btn-nucleo.btn-nucleo-activo {
    background: #0078D7;
    color: #fff;
    border: 1px solid #005ca8;
}

.btn-zona.btn-zona-activo {
    background: #28a745;
    color: #fff;
    border: 1px solid #1e7e34;
}

.acenter{
    align-items: center;
}

.astart{
    align-items: flex-start;
}

.btn-tabs{
    border: none;
    padding: .5rem .8rem;
    font-size: 1rem;
    font-weight: bold;
    
  }
  
  .btn-tabs-pill{
    border: none;
    padding: .4rem .6rem;
    font-size: .8rem;
    font-weight: bold;
    
  }

  .active-ref{
    color:#0078d4;
    border-bottom: 1px solid #006cbe;
    background: #f0f9ff;
  }
    
  .active-ref-dos{
    color:#0078d4;
    border-bottom: 1px solid #006cbe;
  }

  .avisoItv{
      font-size: .8rem;
      text-align: center;
      color: red; 
      border: 1px solid red; 
      border-radius: 3px;
      padding: .2rem;
  }


  .adv_valorador{
    margin-top: .5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: .5rem;
    padding-right: .5rem;
    border: 1px solid red;
    background: #fde3e4;
    border-radius: 5px;
  }
/* ========================================B======================================== */

.box-img{
    width: 50px;
    height: 50px;
}


.box-img img{
    width: 100%;
    height: auto;
}
  @supports(object-fit: cover){
      .box-img img{
        height: 100%;
        object-fit: cover;
        object-position: center center;
      }
  }


.btnPeri{
    padding: .2rem;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: .7rem;
}



.barra-e-wrap{
    display: flex;
    justify-content: flex-end;

}

.barra-s-wrap{
    display: flex;
    justify-content: flex-start;

}

.barra-b-wrap{
    display: flex;
    justify-content: space-between;

}


.barra-a-wrap{
    display: flex;
    justify-content: space-around;

}


.barra-info{
    height: 10%;
}

.barra-box{
    height: 90%;
}

.barra-box{
    width: 100%;
}

.barra-item{
    width: 100%;

}

.barra-ref{
    width: 100%;
    display: block;
    padding: .5rem;
    border-radius: 5px;
}

.barra-ref:hover{
    background: #eff2f6;  
}


.barra-link{
    padding: .5rem;
    border-radius: 5px;
    width: 100%;
    display: block;
}

.barra-link:hover{
    background: #eff2f6;  
}

.barra-li{
    font-size: .8rem;
}

.box-indicador{
    font-size: .7rem;
    padding: 0 .2rem;
}

.box-icon{
    padding: 0 .3rem;
}

.box-text{
    font-size: .8rem;
    padding: 0 .3rem;
}

.bdgris{
    border: 1px solid #ccc;
}

.bdgrisDos{
    border: 1px solid #606060;
}

.b-radius3{
    border-radius: 3px;
}

.b-radius5{
    border-radius: 5px;
}

.bdr{
    border: 1px solid red;
}

.bdb{
    border: 1px solid blue;
}

.bdg{
    border: 1px solid green;
}

.bdgr{
    border: 1px solid #ccc;
}

.bdo{
    border:1px solid orange;
}

.barra-menu-estatica{
    height: 50px;
    width: 100%;
    background: #606060;
    display: flex;
    align-items: center;
}

.btn-tr{
    border: none;
    padding: .3rem .6rem;
    font-size: 1rem;
    border-radius: 3px;
}


.btn{
    border: none;
    padding: .5rem .8rem;
    font-size: 1rem;
    border-radius: 3px;
}

.btnauto{
    border: none;
    padding: .5rem .8rem;
    font-size: 1rem;
    border-radius: 3px;
}



.btn-tabla{
    border: none;
    padding: .3rem;
    font-size: .9rem;
    border-radius: 3px;
}

.btn-p01f08{
    border: none;
    padding: .1rem;
    font-size: .8rem;
    border-radius: 3px;  
}


.btn-p02f09{
    border: none;
    padding: .2rem;
    font-size: .9rem;
    border-radius: 3px;  
}


.btn-p03f09{
    border: none;
    padding: .3rem;
    font-size: .9rem;
    border-radius: 3px;  
}


.btn32{
    border: none;
    padding: .5rem .8rem;
    font-size: .8rem;
    border-radius: 2px;
    height: 32px;
}



.btn-pill{
    border: none;
    padding: .4rem .6rem;
    font-size: .7rem;
    border-radius: 3px;
}

.btn-sm{
    border: none;
    font-size: .8rem;
}

.btn-pq{
    border: none;
    padding: .3rem .4rem;
    font-size: .8rem;
    border-radius: 3px;
}

.btn-borde{
    border: 1px solid #ccc;
}

.btn-azul{
    background-color: #0078d4;
    color: #fff;
}

.btn-azul:hover{
    background-color: #006cbe;
    color: #fff;
    cursor: pointer;
}

.btn-uno{
    background-color: #0078d4;
    color: #fff;
}

.btn-uno:hover{
    background-color: #006cbe;
    cursor: pointer;
}

.btn-uno-bis{
    background-color: #3DC5FF;
    color: #fff;
}

.btn-uno-bis:hover{
    background-color: #006cbe;
    cursor: pointer;
}

.btn-dos{
    background-color: #ededed;
}

.btn-dos:hover{
    background-color: #e5e5e5;
    cursor: pointer;
}

.btn-dos-bis{
    background-color: #ededed;
}

.btn-dos-bis:hover{
    background-color: #e5e5e5;
    cursor: pointer;
}

.btn-tres{
    background-color: #ffa500;
}

.btn-tres:hover{
    background-color: #ea9800;
    cursor: pointer;
}

.btn-cuatro{
    background-color: #f22c2c;
    color:#fff;
}

.btn-cuatro:hover{
    background-color: #db2525;
    color:#fff;
    cursor: pointer;
}

.btn-cinco{
    background-color: #69b6d5;
    color:#fff;
}

.btn-cinco:hover{
    background-color: #007acc;
    color:#fff;
    cursor: pointer;
}

.btn-seis:hover{
    background-color: #269f42;
    color:#fff;
    cursor: pointer;
}

.btn-seis{
    background-color: #218837;
    color:#fff;
    
}

.btn-siete:hover{
    background-color: #e1ddeb;
    color:#fff;
    cursor: pointer;
}

.btn-siete{
    background-color: #f0ecfa;
    color:#fff;
}

.btn-ocho:hover{
    background-color: #dcf6f7;
    color:#fff;
    cursor: pointer;
}

.btn-ocho{
    background-color: #e8f6f7;
    color:#fff;
}

.btn-nueve:hover{
    background-color: #218837;
    cursor: pointer;
}

.btn-nueve{
    background-color: #badbcc;
}



.btn-diez:hover{
    background-color: #6f42c1;
    color:#fff;
    cursor: pointer;
}

.btn-diez{
    background-color: #764bc4;
    color:#fff;
}


.btn-once:hover{
    background-color: #eae4f7;
    color:#fff;
    cursor: pointer;
}

.btn-once{
    background-color: #d1c4ec;
    color:#fff;
}



/* Aspecto base de los botones de la barra */
.tab-link{
    display: inline-flex;
    align-items: center;
    padding: 0 .6rem;       /* solo horizontal, la altura la manda line-height */
    line-height: 40px;      /* encaja en la barra de 40px */
    margin-right: .6rem;
    border-radius: 3px;
    text-decoration: none;
}

/* Hover solo en el botón, no en todo el li */
.btn_tool a:hover{
    background-color: #e5e5e5;
    cursor: pointer;
    border-radius: 3px;
}



.btn-hover:hover{
    cursor: pointer;
     
}

.bhover{
    background-color: #e5e5e5;
    cursor: pointer;
}


.bttnn_hover:hover{
    cursor: pointer;
    background-color: #e5e5e5;
    cursor: pointer;
}



.btn_toollllll:hover{
    background-color: #e5e5e5;
    cursor: pointer;
    border-radius: 5px;
}


/* Hover solo sobre el botón (el <a>) */
.btn_tool a:hover{
    background-color: #e5e5e5;
    cursor: pointer;
    border-radius: 5px;
}



.btn_tool_sm:hover{
    background-color: #e5e5e5;
    cursor: pointer;
}


.btn_tool_sm{
    font-size: .9rem;
    padding: .1rem;
}


.btn_toolbar_h{
    padding: .5rem;
    margin-right: .3rem;
    border-radius: 5px;

}

.btn_toolbar_h:hover{
    background-color: #e5e5e5;
    cursor: pointer;
}

.btn-cierre-rojo{
    border-radius: 3px; 
    padding: .5rem; 
    background: #fde3e4;/*#fffbfb;*/ 
    width: 100%; 
    display: block;
}

.btn-cierre-rojo:hover{
    background: #faadb1;
    
}


.btn-menu-pill{
    padding: .5rem;
}


.bg-aleatorio1{
    background: #cce6ff;
}

.bg-aleatorio2{
    background: #fff5d5;
}

.bg-aleatorio3{
    background: #d1e7dd;
}

.bg-aleatorio4{
    background: #ffd4d5;
}

.bg-aleatorio5{
    background: #f2f2f2;
}

.bg-aleatorio6{
    background: #f0ecfa;
}




.ul-active{
    background: rgba(247,247,247,1);
    border-bottom: 1px solid #ccc;
}

.ul-toolbar{
    min-height: 50px; 
    border: 1px solid #ccc; 
    position: absolute; 
    background: #ffff;
}

.li-toolbar{
    padding: .5rem;
}

.li-titulo{
    border: none;
    padding: .5rem .8rem;
    font-size: 1rem;
}

.toolbar-active{
    background-color: #e5e5e5;
}



.br0{
    border-radius: 0;
}

.br5{
    border-radius: 5px;
}

.br10{
    border-radius: 10px;
}

.bloquea{
    pointer-events: none;
}

.bloqueaColor{
    pointer-events: none;
    color: #ccc;
}

.bloqueaOpacity{
    pointer-events: none;
    opacity: 0.5;
}


.bloqueaCursor{
    cursor:not-allowed;
}


.bloqueaDiv { opacity: .6; } /* aspecto global (incluye bordes) */

.bloqueaDiv :is(input, select, textarea, button){
  pointer-events: none;              /* por si no quieres que reciban clic */
  background-color: #f5f5f5 !important;
  border-color: #ccc !important;
  color: #999 !important;
}


.opacidad05{
    opacity: 0.5;
}

.borde-inferior{
    border-bottom: .5px solid #606060;
}

.borde-superior{
    border-top: .5px solid #606060;
}

.box-prog-global{
    display: flex; 
    justify-content: space-between; 
    flex-wrap: wrap;
}

.box-prog-per{
    position: relative; 
    width: 49.5%; 
    border: 1px solid #ccc;
    margin-bottom: .5rem;
}

.box-prog-per .izq{
    margin-right: .3rem;
}


.box-azul{
    color: var(--azul3);
    border: 1px solid var(--azul2);
    border-radius: 5px;
    background-color: var(--azul1);
}


.box-naranja{
    color: orange;
    border: 1px solid orange;
    border-radius: 5px;
    background-color: #ffdfa4;
}


.box-rojo{
    color: var(--rojo1);
    border: 1px solid var(--rojo2);
    border-radius: 5px;
    background-color: var(--rojo3);
}


.box-verde{
    color: var(--verde3);
    border: 1px solid var(--verde2);
    border-radius: 5px;
    background-color: var(--verde1);
}



.box-gris{
    color: #606060;
    border: 1px solid #606060;
    border-radius: 5px;
    background-color: #ccc;
}


/* ========================================C======================================== */

.circulo25{
    height: 25px;
    width: 25px;
    border-radius: 50%;
    display: inline-block;
}


.circulo50{
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: inline-block;
}

.circulo-flex{
    display: flex;
    justify-content: center;
    align-items: center;
}

.fondoVerdeActivado{
    background:#badbcc; 
    color:#20aa49; 
}

.fondoGrisDesactivado{
    background:#e4e4e4; 
    color:#606060; 
}


.calendario300Auto{
    width: 300px;
}


.ul_scroll{
    overflow-y:auto;
}


.cinta-box{
    width: 90%;
    font-size: 1rem;
}


.col25Xs{
    width: 25%;
    padding-right: .5rem;
    margin-bottom: .5rem;
}



.col25Md{
    width: 25%;
    padding-right: .5rem;
    margin-bottom: .5rem;
}

.col25{
    width: 25%;
    margin-bottom: .5rem;
}

.col33{
    width: 33.33%;
    margin-bottom: .5rem;
}


.col33Md{
    width: 33.33%;
    padding-right: .5rem;
    margin-bottom: .5rem;
}


.col50Md{
    width: 50%;
    padding-right: .5rem;
    margin-bottom: .5rem;
}

.col50{
    width: 50%;
    margin-bottom: .5rem;
}


.col75Md{
    width: 75%;
    padding-right: .5rem;
    margin-bottom: .5rem;
}

.col75{
    width: 75%;
    margin-bottom: .5rem;
}

.col75Xs{
    width: 75%;
    margin-bottom: .5rem;
}


#calendar_mobil{
    transform: translateX(0);
}

#calendar_mobil::after{
    content:'';
    border-style: solid;
    border-width: 0 15px 15px 15px;
    border-color: transparent transparent #fff transparent;
    position: absolute;
    top: -14px;
    left: 50%;
    margin-left: -15px;
    
}

#calendar_mobil::before{
    content:'';
    border-style: solid;
    border-width: 0 15px 15px 15px;
    border-color: transparent transparent #7f7f7f transparent;
    position: absolute;
    top: -15px;
    left: 50%;
    margin-left: -15px;
}

.centrar-flex{
    display: flex;
    justify-content: center;
    align-items: center;
}

.codigo-sel{
    background: #e4e4e4;
}

.circular-box{
    margin-right: 1px; 
    width: 20px; 
    height: 20px; 
    border-radius: 10px; 
    
}

.circular-box:hover{
    background: #ccc;
}

.cuadricula{
    margin-top: 1rem; 
    display: flex; 
    justify-content: space-between; 
    flex-wrap: wrap;
}

.cuadricula-box-h100{
    width: 49%; 
    height: 80vh; 
    padding: .5rem; 
    overflow: hidden;
    margin-right: .1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}



.cuadricula-box{
    width: 49%; 
    height: 40vh; 
    padding: .5rem; 
    overflow: hidden;
    margin-right: .1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.cuadricula-ul{
    padding: .2rem;
    height: 28vh;  
    overflow-y: auto;
}


.cuadricula100{
    width: 99%; 
    padding: .5rem; 
    overflow: hidden;
    margin-right: .1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow-y: auto;
    /*Estilos estándar experimentales (Principalmente Firefox)*/
    scrollbar-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, 0);
    scrollbar-width: thin;
}


.cuadriculaTotal{
    width: 100%; 
    padding: .5rem; 
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow-y: auto;
    /*Estilos estándar experimentales (Principalmente Firefox)*/
    scrollbar-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, 0);
    scrollbar-width: thin;
}




.ovf-auto{
    overflow: auto;
}

.ovf-scroll{
    overflow: scroll;
}


.cuadricula50{
    width: 49%; 
    padding: .5rem; 
    overflow: hidden;
    margin-right: .1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow-y: auto;
    /*Estilos estándar experimentales (Principalmente Firefox)*/
    scrollbar-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, 0);
    scrollbar-width: thin;
    
}


.conjunto-flex-column{
    display: flex;
    flex-direction: column;
}

.conjunto-flex-around{
    display: flex;
    justify-content: space-around;
}

.conjunto-flex-between{
    display: flex;
    justify-content: space-between;
}

.conjunto-flex-start{
    display: flex;
    justify-content: start;
}


.conjunto-flex-center{
    display: flex;
    justify-content: center;
}



.conjunto-start-wrap760{
    display: flex;
    justify-content: start;
}


.conjunto-flex-start_between{
    display: flex;
    justify-content: start;
}


.conjunto-flex-end{
    display: flex;
    justify-content: end;
}


.conjunto-flex-end-wrap{
    display: flex;
    justify-content: end;
}


.conjunto-flex-end-auto{
    display: flex;
    justify-content: end;
}



.conjunto-flex-end-start{
    display: flex;
    justify-content: end;
}



.conjunto-flex-center{
    display: flex;
    justify-content: center;
}


.conjunto-dinamico{
    display: flex;
    justify-content: space-between;
}


.conjunto-flex-between-wrap{
    display: flex;
    justify-content: space-between;
}

.conjunto-flex-start-wrap{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.mr05-wrap{
    margin-right: .5rem;
}


.crece5{
    width: 5%;
}

.crece10{
    width: 10%;
}

.crece15{
    width: 15%;
}

.crece20{
    width: 20%;
}

.crece25{
    width: 25%;
}


.crece30{
    width: 30%;
}

.crece35{
    width: 35%;
}


.crece40{
    width: 40%;
}

.crece45{
    width: 45%;
}


.crece50{
    width: 50%;
}

.crece55{
    width: 55%;
}


.crece60{
    width: 60%;
}

.crece70{
    width: 70%;
}


.crece80{
    width: 80%;
}


.crece90{
    width: 90%;
}


/* ========================================D======================================== */


.div100vh{
    height: 100vh;
}


.desaparece760{
    display: block;
}


.deshabilita{
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
}

.day{
    padding: .2rem;
}

.dia{
    padding: .2rem;
}

.dia-celda{
    height: 200px;
    width: 100%;
    border: 1px solid #606060;
    padding: .2rem;
    overflow: auto;
}

.dia-box{
    padding: .2rem;
    border-bottom: 1px solid #606060;
}

.dflex{
    display: flex;
}


.dflex-wrap{
    display: flex;
}



.drow{
    flex-direction: row;
}

.dcolumn{
    flex-direction: column;
}

.dwrap{
    flex-wrap: wrap;
}

.dNowrap{
    flex-wrap: nowrap;
}

.dbetween{
    justify-content: space-between;
}

.daround{
    justify-content: space-around;
}

.dstart{
    justify-content: flex-start;
}

.dcentre{
    justify-content: center;
}

.dend{
    justify-content: flex-end;
}

.dblock{
    display: block;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.calendario_info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    width: 100%;
    height: 40px; 
    margin-bottom: .5rem;
  }
  
.calendar_prev{
      text-align: center;
      line-height: 25px;
      height: 40px;
      width: 40px;
      border-radius: 25px;
      padding: .5rem;
  }

.calendar_next{
    text-align: center;
    line-height: 25px;
    height: 40px;
    width: 40px;
    border-radius: 25px;
    padding: .5rem;
}

.calendar_prev:hover{
    background-color: #e4e4e4;
}

.calendar_next:hover{
    background-color: #e4e4e4;
}

.calendar_month:hover{
    cursor: pointer;
}
  
.calendar_next, .calendar_prev{
    font-size: 1rem;
}
  
.calendar_next:hover, .calendar_prev:hover{
    cursor: pointer;
}
  
.calendar_week{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 5px;
    place-items: center;
}
  
.calendario_box{
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 5px;
    place-items: center;
}
  
  .calendario_box .day{
    height: 20px;
    width: 25px;
    text-align: center;
    border-radius: 3px;
  }
  
  .calendar__today{
    background: #8cdbfa;
  }

  .calendar__hoy{
    background: #007acc;
    color: #fff;

  }

  .calendario_box .day:hover{
    background: #8cdbfa;
    border-radius: 3px;
  }
  
  .calendario_box .dia:hover{
    cursor: pointer;
    background: #8cdbfa;
    border-radius: 3px;
  }

  .calendario_box .clasedia:hover{
    cursor: pointer;
    background: #8cdbfa;
    border-radius: 3px;
  }




.calendario_box .day{height: 100%;}
  
.calendario_box .weekend{
    color: #00a2e8;
  }
  
.calendario_box .day:hover{
    cursor: pointer;
  }
  
.calendar-icon:hover{
    cursor: pointer;
  }
  
.calendar_last_days {opacity: .3;}
  
.colorAzulTxt{
     color:#0781d8;
 }

.capa1{
    z-index: 10;
}

.capa2{
    z-index: 20;
}

.capa3{
    z-index: 30;
}

.capa4{
    z-index: 40;
}

.capa5{
    z-index: 5000;
}

.capa6{
    z-index: 5010;
}

.capa7{
    z-index: 5020;
}

.capa8{
    z-index: 5030;
}

.capa9{
    z-index: 5040;
}

.capa10{
    z-index: 5050;
}

.circulo-aviso-azul{
    position: absolute; 
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    background-color: #69b6d5;
    right: 5px; 
    display: flex; 
    align-items: center; 
    justify-content: 
    center; font-size: .7rem;
    color: #fff;
}

.circulo-aviso-rojo{
    position: absolute; 
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    background-color: #eb4034;
    right: 5px; 
    display: flex; 
    align-items: center; 
    justify-content: 
    center; font-size: .7rem;
    color: #fff;
}

.circulo-verde-sm{
    position: absolute; 
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    background-color: #20aa49;
}

.circulo-rojo-sm{
    position: absolute; 
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    background-color: #eb4034;
}


.contenedor_sensitive{
    position: absolute;
    z-index: 100;
    background: #f5f5f5;
    /*border: none;*/
    width: 100%;
    -webkit-box-shadow: 6px 10px 9px -1px #CCCCCC; 
    box-shadow: 6px 10px 9px -1px #CCCCCC;
}


.contenedor-oculto{
    display: none;
    position: absolute;
    z-index: 100;
    background: #f5f5f5;
    /*border: none;*/
    width: 100%;
    -webkit-box-shadow: 6px 10px 9px -1px #CCCCCC; 
    box-shadow: 6px 10px 9px -1px #CCCCCC;
}


.ul_selector{
    background: #ebebeb;
    color: #050505;
}

.contenedor{
    position: relative;
    left: 50%;
    width: 80%;
    margin-left: -40%;
}


.contenedorAuto{
    position: relative;
    left: 50%;
    width: 80%;
    margin-left: -40%;
}



.contenedor-selector{
    position: relative;
    left: 50%;
    width: 80%;
    margin-left: -40%;
}



.contenedor-flex-center{
    display: flex;
    justify-content:center;
    align-items: center;
}

.contenedor-flex-start{
    display: flex;
    justify-content:flex-start;
    align-items: center;
}

.contenedor-flex-end{
    display: flex;
    justify-content:flex-end;
    align-items: center;
}

.contenedor50{
    width: 50%;
}

.container{
    width: 100%;
    margin: auto;
}

.container-flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.column{
    width: 100%;
}

.column50{
    width: 100%;
}

.column100{
    width: 100%;
}

.column33{
    width: 100%;
}

.colorHoverNaranja:hover{
    color: orange;
    cursor: pointer;
}

/* ========================================D======================================== */

.disabled{
    pointer-events: none;
    background-color: rgba(240,240,240,1);
    color:#828282;
}



.doceColumnas {
    display: grid;
    grid-template-columns: repeat(12, [col-start] 1fr);
    grid-gap: .3rem;
    
  }

.doceColumnas div{
    border: 1px solid red;
    padding: .2rem;
    text-align: center;
}



/* ========================================E======================================== */

.etapaActiva{
    background: #ffe082;
}

.etapaCtf{
    background:#ebebeb;
}

.etiqueta-ajuste{
    border: none;
    height: 29.59px;
}
/* ========================================F======================================== */

.b-radius3{
    border-radius: 3px;
}

.b-radius5{
    border-radius: 5px;
}

.bg-rojo{
    background: #ffd4d5;
}

.bg-gris{
    background: #f2f2f2;
}

.bg-verde{
    background: #d1e7dd;
}

.bg-naranja{
    background: #fff5d5;
}

.bg-azul{
    background: #cce6ff;
}

.bg-purpura{
    background: #f0ecfa;
}

.frm-borde-uno{
    border: 1px solid #ccc;
    border-radius: 5px;
}

.formulario_marco{
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh; 
    padding-top: 60px; 
    background: #fff; 
    overflow: auto;
}

.file_archivo{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  .file_box{
    width: 100%;
    height: 50px;
    position: relative;
    background: #f4b377;
    /*background: #bb4a52;*/
    color: #6f3909;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
  }

  .file_box:hover{
    border: 1px solid #d16b10;
    cursor: pointer;
  }


  .file_box_dos{
    height: 32px;
    padding: .5rem;
    position: relative;
    background: #e4e4e4;
    border: 1px solid #e4e4e4;
    /*background: #bb4a52;*/
    color: #7f7f7f;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .file_box_dos:hover{
    border: 1px solid #606060;
    cursor: pointer;
  }


  .file_label{
    display: block;
    text-align: center;
  }


  .file_box_ver{
    width: 100%;
    height: 50px;
    position: relative;
    background: #aad5ff;
    /*background: #bb4a52;*/
    color: #606060;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.file_box_ver:hover{
    border: 1px solid #69b6d5;
    cursor: pointer;
  }

.flecha .marcador{
    transform: rotate(90deg);
}

.marcador{
    transition: transform .3s;
}


.flex-conjunto{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-mr05{
    margin-right: .5rem;
}

.flex-ml05{
    margin-left: .5rem;
}


.flex-mr04{
    margin-right: .4rem;
}

.flex-ml04{
    margin-left: .4rem;
}


.flex-mr03{
    margin-right: .3rem;
}

.flex-ml03{
    margin-left: .3rem;
}

.flex-mr02{
    margin-right: .2rem;
}

.flex-ml02{
    margin-left: .2rem;
}

.flex-mr01{
    margin-right: .1rem;
}

.flex-ml01{
    margin-left: .1rem;
}

.flex-center{
    justify-content:center;
}


.formulario-close{
    height: 30px; 
    width: 30px; 
    font-size: 1.3rem; 
    border-radius: 3px; 
    text-align: center; 
    position: absolute; 
    right: 1rem; top: 1rem;
    line-height: 30px;
}
  
.formulario-close:hover{
    cursor: pointer;
    background-color: #f0f0f0;
}

.formulario260{
    width: calc(100% - 260px);
    margin-left: 260px;
    margin-top: 60px;
    padding: 1rem;
}

.fca{
    color:#0080b7; 
  }
  
.fwbold{
    font-weight: bold;
}


.fs05{
    font-size: .5rem;
}

.fs06{
    font-size: .6rem;
}


.fs07{
    font-size: .7rem;
}

.fs075{
    font-size: .75rem;
}

.fs08{
    font-size: .8rem;
}

.fs08fs06{
    font-size: .8rem;
}


.fs08fs07{
    font-size: .8rem;
}

.fs08fs06{
    font-size: .8rem;
}

.fs09fs06{
    font-size: .9rem;
}


.fs09fs07{
    font-size: .9rem;
}

.fs09{
    font-size: .9rem;
}

.fsBold{
    font-weight: bold;
}


.fs1{
    font-size: 1rem;
}

.fs1_5{
    font-size: 1.5rem;
}

.fs2{
    font-size: 2rem;
}

.fsmax08{
    font-size: .8rem;
}


.fsmax07{
    font-size: .7rem;
}


.fsmax1{
    font-size: 1rem;
}

.frame-border{
    border: 1px solid #606060;
    border-radius: 3px;
    min-height: 30px;
    padding: .3rem;
}



.frm750-auto{
    width: 750px;
};

/* ========================================G======================================== */

.globo-advertencia{
    background-color: #ffea9d;
    /*color:#ce9e00;*/
    color: #606060;
}
  
.globo-peligro{
    background-color: #fbced0;
    /*color:#b60e16;*/
    color: #606060;
}
  
.globo-exito{
    background-color: #c2f3d1;
    /*color:#1e9943;*/
    color: #606060;
}


.grupo{
    width: 49%;
}

.grupo-flex{
    display: flex;
    justify-content: space-between;
}

/* ========================================H======================================== */

h1,h2,h3,h4,h5,h6{
    color:#606060;
    margin: 0;
}

.habilitaVerde6{
    color: #218837;
}

.head-box{
    height: 200px;
}

.hoverBlanco:hover{
    background: #ffff;
    cursor: pointer;
}

.hoverGris:hover{
    background: #d9d9d9;
    cursor: pointer;
}

.hoverGrisClaro:hover{
    background: #f3f3f3;
    cursor: pointer;
}

.hoverVerdeClaro:hover{
    background: rgba(170,210,192,1);
    cursor: pointer;
}

.hoverAzulClaro:hover{
    background: rgba(170, 213, 255, 1);
    cursor: pointer;
}

.hoverRojoClaro:hover{
    background: #fde3e4;
    cursor: pointer;
}

.hoverRojo:hover{
    background: #f7545a;
    cursor: pointer;
}

.hoverColorRojo:hover{
    color: #f7545a;
    cursor: pointer;
}

.hoverAmarillo:hover{
    background: #ffcb6a;
    cursor: pointer;
}

.hider{
    display: none;
}


.h10{
    height: 9vh;
}

.h15{
    height: 14vh;
}

.h20{
    height: 19vh;
}

.h25{
    height: 24vh;
}

.h30{
    height: 29vh;
}


.h32{
    height: 31vh;
}

.hpx32{
    height: 32px;
}

.h35{
    height: 34vh;
}

.hpx35{
    height: 35px;
}


.h40{
    height: 39vh;
}

.h45{
    height: 44vh;
}

.h50{
    height: 49vh;
}

.h55{
    height: 54vh;
}

.h60{
    height: 59vh;
}

.h65{
    height: 64vh;
}

.h70{
    height: 69vh;
}

.h75{
    height: 74vh;
}

.h80{
    height: 79vh;
}

.h85{
    height: 84vh;
}


.h90{
    height: 89vh;
}

.h95{
    height: 94vh;
}

.h100{
    height: 99vh;
}



/* ========================================I======================================== */

.informes-cart{
    margin-right: .5rem; 
    margin-bottom: .5rem; 
    background: #eee; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    width: 120px; 
    height: 130px;
}

.informes-cart:hover{
    background: #ffff;
}

.input760{

    margin-right: .5rem;
}


.inputTabla{
    font-size: .8rem;
    width: 80px;
}

.inputTablaSm{
    font-size: .8rem;
    width: 60px;
}


.inputTablaSSm{
    font-size: .8rem;
    width: 55px;
}

.input-txt-box{
    border: 1px solid #7f7f7f;
    width: 100%;
    border-radius: 3px;
    padding: .5rem .3rem;
    margin-bottom: .1rem;
    font-size: 1rem;     
}

.input-txt-box:focus{
    outline: none;
    border: 1px solid rgba(0,120,212,0.87);
    -webkit-box-shadow: 4px 4px 10px -7px rgba(0,120,212,0.87); 
    box-shadow: 4px 4px 10px -7px rgba(0,120,212,0.87);
}


.inputBox{
    position: relative;
    height: 60px;
}

.inputBox input{
    width: 100%;
    height: 100%;
    padding: 10px;
    font-size: 1em;
}

.inputBox span{
    position: absolute;
    left: 0px;
    padding: 10px;
    font-size: 1em;
    transition: .5s;
}

.inputBox input:valid ~ span,
.inputBox input:focus ~ span{
    transform: translateX(3px) translateY(7px);
    font-size: .65em;
    padding: 0 10px;
}

.icon-nav{
    width: 20px;
}

.info-box{
    border: 1px solid #606060;
    min-height: 36px;
    padding: .2rem;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.input-flex{
    border: 1px solid #7f7f7f;
    padding: .5rem .8rem;
    font-size: 1rem;    
    text-align: center;
}

.input{
    border: none;
    width: 100%;
    padding: .5rem .3rem;
    margin-bottom: .5rem;
    font-size: 1rem;
    color:  #606060;    
}

.input-box{
    border: 1px solid #7f7f7f;
    padding: .5rem .3rem;
    font-size: 1rem; 
    height: 32px;
    color: #606060;
    
}

.input-box:focus{
    outline: none;
    border: 1px solid rgba(0,120,212,0.87);
    -webkit-box-shadow: 4px 4px 10px -7px rgba(0,120,212,0.87); 
    box-shadow: 4px 4px 10px -7px rgba(0,120,212,0.87);
}


.input-area{
    border: 1px solid #7f7f7f;
    padding: .5rem .3rem;
    font-size: 1rem; 
    color: #606060;
    
}

.input-area:focus{
    outline: none;
    border: 1px solid rgba(0,120,212,0.87);
    -webkit-box-shadow: 4px 4px 10px -7px rgba(0,120,212,0.87); 
    box-shadow: 4px 4px 10px -7px rgba(0,120,212,0.87);
}


.input-combo{
    border: 1px solid #7f7f7f;
    padding:.3rem;
    font-size: 1rem; 
    height: 32px;
    color: #606060;
}

.input-combo option{
    color: #606060;
}

.input-combo:focus{
    outline: none;
    border: 1px solid rgba(0,120,212,0.87);
    -webkit-box-shadow: 4px 4px 10px -7px rgba(0,120,212,0.87); 
    box-shadow: 4px 4px 10px -7px rgba(0,120,212,0.87);
}



#extraCampos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* espacio entre campos */
}
  
.campo-input {
    flex: 1 1 calc(50% - 10px); /* ocupa el 50% menos el espacio del gap */
    min-width: 200px; /* evita que se encojan demasiado */
}


.input-txt{
    border: 1px solid #7f7f7f;
    width: 100%;
    padding: .5rem .3rem;
    margin-bottom: .5rem;
    font-size: 1rem;     
}

.input-txt:focus{
    outline: none;
    border: 1px solid rgba(0,120,212,0.87);
    -webkit-box-shadow: 4px 4px 10px -7px rgba(0,120,212,0.87); 
    box-shadow: 4px 4px 10px -7px rgba(0,120,212,0.87);
}


.input-txt-sm{
    border: 1px solid #7f7f7f;
    width: 100%;
    padding: .2rem .1rem;
    margin-bottom: .2rem;
    font-size: .8rem;     
}

.input-txt-sm:focus{
    outline: none;
    border: 1px solid rgba(0,120,212,0.87);
    -webkit-box-shadow: 4px 4px 10px -7px rgba(0,120,212,0.87); 
    box-shadow: 4px 4px 10px -7px rgba(0,120,212,0.87);
}





.input-txt-auto{
    border: 1px solid #7f7f7f;
    width: auto;
    padding: .5rem .3rem;
    margin-bottom: .5rem;
    margin-right: .5rem;
    font-size: 1rem;     
}

.input-txt-auto:focus{
    outline: none;
    border: 1px solid rgba(0,120,212,0.87);
    -webkit-box-shadow: 4px 4px 10px -7px rgba(0,120,212,0.87); 
    box-shadow: 4px 4px 10px -7px rgba(0,120,212,0.87);
}


.input-area{
    min-width: 100%;
    max-width: 100%;
}

.input-shadow{
    -webkit-box-shadow: 6px 10px 9px -1px #CCCCCC; 
    box-shadow: 6px 10px 9px -1px #CCCCCC;
}

.item_solicitudes{
    padding: .3rem;
}


.itmBox{

    display: flex;

}

.itmRev{
    padding: .4rem;
    border: 1px solid #606060;
    border-radius: 5px;
    position: relative;
}

.itmFin{
    margin-right: .5rem;
    margin-bottom: .5rem;
    padding: .4rem .3rem;
    background: #badbcc;
    border-radius: 5px;
}

/*----------------------------------ATENCIÓN TOOLTIP BUENO-----------------------------------*/
/*PARA QUE FUNCIONE HAY QUE PONER EN EL DIV DEL HTML AL QUE SE LE VA A APLICAR  UN data-tooltip 
CON EL TEXTO QUE QUEREMOS QUE APAREZCA EN EL TOOLTIP.
*/
*::before, *::after {
    box-sizing: border-box;
  }
.info-top-tip{
    position: relative;
}
  
.info-top-tip::before,
.info-top-tip::after {
  --scale: 0;
  --arrow-size: 5px;
  --tooltip-color: #787878;
  --tooltip-size: .7rem;
  position: absolute;
  top: -.2rem;
  left: 50%;
  transform: translateX(-50%) translateY(var(--translate-y, 0)) scale(var(--scale));
  transition: 150ms transform;
  transform-origin: bottom center;
}
  
.info-top-tip::before {
  --translate-y: calc(-100% - var(--arrow-size));
  content: attr(data-tooltip);
  font-size: var(--tooltip-size);
  color: white;
  padding: .2rem .4rem;
  border-radius: .3rem;
  text-align: center;
  width: max-content;
  background: var(--tooltip-color);
}
  
.info-top-tip:hover::before,
.info-top-tip:hover::after {
  --scale: 1;
}
  
.info-top-tip::after {
  --translate-y: calc(-1 * var(--arrow-size));
  content: '';
  border: var(--arrow-size) solid transparent;
  border-top-color: var(--tooltip-color);
  transform-origin: top center;
}
 
  /*----------------------------------ATENCIÓN TOOLTIP BUENO-----------------------------------*/

/* ========================================J======================================== */

.jumbo-info-gris{
    border-left: 5px solid #ccc;
    padding: 3px 3px 3px 10px;
    margin-top: .5rem;
    margin-bottom: 1rem;

    /*
    border-radius: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    */
}



/* ========================================L======================================== */

.letraSelect{
   background: #e4e4e4;
}

.label{text-align: left;}


.l5{
    width: 5%;
}

.l5i{
    width: 5%;
    margin-right: .5rem;
}

.l10{
    width: 10%;
}

.l10i{
    width: 10%;
    margin-right: .5rem;
}


.l15{
    width: 15%;
}

.l15i{
    width: 15%;
    margin-right: .5rem;
}


.l20{
    width: 20%;
}

.l20i{
    width: 20%;
    margin-right: .5rem;
}


.l25{
    width: 25%;
}

.l25i{
    width: 25%;
    margin-right: .5rem;
}

.l30{
    width: 30%;
}

.l30i{
    width: 30%;
    margin-right: .5rem;
}

.l35{
    width: 35%;
}

.l35i{
    width: 35%;
    margin-right: .5rem;
}


.l40{
    width: 40%;
}

.l40i{
    width: 40%;
    margin-right: .5rem;
}


.l45{
    width: 45%;
}

.l45i{
    width: 45%;
    margin-right: .5rem;
}


.l50{
    width: 50%;
}

.l50i{
    width: 50%;
    margin-right: .5rem;
}

/* ========================================M======================================== */

.muestraSm{
    display: none;
}


.ocultaSm{
    display: block;
}


.mr05auto{
    margin-right: .5rem;
};

.ml05auto{
    margin-left: .5rem;
};

.marcar{
    background-color: #ffd4d5;
    width: 10px;
    height: 10px;
    border-radius: 10px;
}


.mb0{
    margin-bottom: 0;
}

.mb01{
    margin-bottom: .1rem;
}

.mb02{
    margin-bottom: .2rem;
}

.mb03{
    margin-bottom: .3rem;
}

.mb04{
    margin-bottom: .4rem;
}

.mb05{
    margin-bottom: .5rem;
}

.mb06{
    margin-bottom: .6rem;
}

.mb07{
    margin-bottom: .7rem;
}

.mb08{
    margin-bottom: .8rem;
}

.mb09{
    margin-bottom: .9rem;
}

.mb1{
    margin-bottom: 1rem;
}

.mb2{
    margin-bottom: 2rem;
}

.mt01{
    margin-top: .1rem;
}

.mt02{
    margin-top: .2rem;
}

.mt03{
    margin-top: .3rem;
}

.mt04{
    margin-top: .4rem;
}

.mt05{
    margin-top: .5rem;
}

.mt06{
    margin-top: .6rem;
}

.mt07{
    margin-top: .7rem;
}

.mt08{
    margin-top: .8rem;
}

.mt09{
    margin-top: .9rem;
}

.mt1{
    margin-top: 1rem;
}

.mt2{
    margin-top: 2rem;
}

.mt3{
    margin-top: 3rem;
}

.mt4{
    margin-top: 4rem;
}

.mt5{
    margin-top: 5rem;
}

.mr1{
    margin-right: 1rem;
}

.mr01{
    margin-right: .1rem;
}


.mr02{
    margin-right: .2rem;
    
}


.mr02auto{
    margin-right: .2rem;
    
}


.mr03{
    margin-right: .3rem;
}

.mr04{
    margin-right: .4rem;
}


.mr05{
    margin-right: .5rem;
}

.mr2{
    margin-right: 2rem;
}


.ml1{
    margin-left: 1rem;
}

.ml01{
    margin-left: .1rem;
}

.ml02{
    margin-left: .2rem;
}


.ml03{
    margin-left: .3rem;
}


.ml05{
    margin-left: .5rem;
}

.ml2{
    margin-left: 2rem;
}


.m02{
    margin: .2rem;
}

.m03{
    margin: .3rem;
}


.m05{
    margin: .5rem;
}

.main-nav{
    overflow: auto;
}


.menu{
    width: 100%;
    padding: .5rem;
}

.menu li a{
    display: block;
    padding: .5rem;
    border-radius: 5px;
    margin-bottom: .12rem;
}

.menu li a:hover{
    background: #eff2f6;
}



.menu_link{
    display: block;
    padding: .5rem;
    border-radius: 5px;

}

.menu_link:hover{
    background: #eff2f6;
}

.menu ul{
    display: none;
}

.menu ul li a{
padding-left: 30px;;
}


.menu .activado > a{
    background: #eff2f6;
}


.menu-horizontal{
    display: flex;
    flex-direction: row;
}

.menu-item{
    padding: .5rem;
    font-size: .8rem;
    background: #0078d4;
    color: #ffff;
    border-radius: 3px;
}

.menu-item:hover{
    background: #006cbe;
    cursor: pointer;
}

/*------------------------------------------*/


.ovalo-difuso {
    position: relative;
    display: inline-block;
  }
  .ovalo-difuso span {
    position: relative;
    z-index: 2;
    font-size: .8rem;
    padding: .3rem;
    padding-left: 0;
    margin-top: .2rem;
    border-radius: 5px;
    background-color: white;
  }
  .ovalo-difuso::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(rgba(250, 173, 177, 0.6), transparent 70%);
    filter: blur(10px);
    z-index: 1;
  }








.submenu{
    height: 0;
    overflow: hidden;
    transition: all .3s;
}

.submenu .menu_link{
    padding-left: 40px;
}


.sub-submenu{
    height: 0;
    overflow: hidden;
    transition: all .3s;
}

.sub-submenu .menu_link{
    padding-left: 60px;
}



.menu-lateral{
    left: -100%;
}

.mostrar{
    left: 0;
    transition: all .5s;
}


.maxh300{
    height: 300px;
}
.maxh400{
    height: 400px;
}

.maxh500{
    height: 500px;
}

.maxh600{
    height: 600px;
}

.maxh700{
    height: 700px;
}


/* ========================================N======================================== */

.nav1000{
    width: 99.2%;
}


/*=========================================O========================================*/


.obalo_rojo{
    background: #fde3e4;
    color: #f25f4b;
    padding: .2rem; 
    border-radius: 5px;
}

.obalo_verde{
    background: #cfe8d8;
    color: #38a756;
    padding: .2rem; 
    border-radius: 5px;
}



.object_drag{
    position: relative;
    display: inline-block; 
    border: 1px solid orange; 
    background: #FFF3CC; 
    width: 140px; 
    height: 52px; 
    padding: .2rem;
    cursor: move; 
    font-size: .7rem;
    border-radius: 6px;
    margin-right: .3rem;
    margin-bottom: .7rem;
}

.object_flex{
    display: flex;
    justify-content: space-between;
   
}


.obj-marco{
    margin-top: 0;
    width: 90%;
    height: calc(100vh - 100px);
}


/*----------------------------------- NOTIFICACIONES --------------------------------------------*/

.notificacion {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: #000;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    min-width: 300px;
    max-width: 90%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    font-family: Arial, sans-serif;
    transition: opacity 0.3s ease;
    border: 1px solid transparent;
  }
  
  .notificacion h4 {
    margin-top: 0;
    margin-bottom: .5rem;
  }
  
  .notificacion .cerrar {
    position: absolute;
    top: 5px;
    right: 10px;
    border: none;
    background: none;
    font-size: 1.3rem;
    font-weight: bold;
    color: inherit;
    cursor: pointer;
  }
  
  /* Tipos de notificación */
  .tipo-1 {
    background-color: #ffe0e0;
    border-color: #f5b3b3;
    color: #a70000;
  }
  
  .tipo-2 {
    background-color: #fff4cc;
    border-color: #ffe599;
    color: #b37400;
  }
  
  .tipo-3 {
    background-color: #dff6dd;
    border-color: #a2d5a2;
    color: #2e7d32;
  }
  
  .tipo-4 {
    background-color: #e0f0ff;
    border-color: #99ccff;
    color: #004080;
  }
  
  .oculto {
    display: none;
  }






/* ========================================P======================================== */
.p0{
    padding: 0;
}

.p01{
    padding: .1rem;
}

.p02{
    padding: .2rem;  
}

.p03{
    padding: .3rem;
}

.p04{
    padding: .4rem;
}

.p05{
    padding: .5rem;
}

.p1{
    padding: 1rem;
}

.pid1{
    padding: 0 1rem;
}

.pid05{
    padding: .0 5rem;
}


.p2{
    padding: 2rem;
}
.pb02{
    padding-bottom: .2rem;

}

.pb03{
    padding-bottom: .3rem;
}

.pb04{
    padding-bottom: .4rem;
}

.pr02auto{
    padding-right: .2rem;
};


.pr05auto{
    padding-right: .5rem;
};


.pl05{
    padding-left: .5rem;
}


.pl1Auto{
    padding-left: 1rem;
}


.pildoras{
    padding: .5rem; border-radius: 20px; border: 1px solid red;
}


.pillgris05{
    color: #606060;
    border-radius: .5rem;
    background: #e8e6e6;
    padding: .5rem;
}


.pillgreen05{
    color: #606060;
    border-radius: .5rem;
    background: #d1e7dd;
    padding: .5rem;
}

.pillred05{
    color: #606060;
    border-radius: .5rem;
    background: #fde3e4;
    padding: .5rem;
}


.posVal{
    position: absolute; 
    top: 67px; 
    left: 5px;
    display: flex;
}


.prCincoAuto{
    padding-right: 5rem;
};




/* PARPADEO */

.parpadea {
  
    animation-name: parpadeo;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  
    -webkit-animation-name:parpadeo;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
  }
  
  
  
  @-moz-keyframes parpadeo{  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
  }
  
  @-webkit-keyframes parpadeo{  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
     100% { opacity: 1.0; }
  }
  
  @keyframes parpadeo{  
    0% { opacity: 1.0; }
     50% { opacity: 0.0; }
    100% { opacity: 1.0; }
  }
  
  
  .parpadeaDos {
    
    animation-name: parpadeoDos;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  
    -webkit-animation-name:parpadeoDos;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
  }
  
  
  @-moz-keyframes parpadeoDos{  
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; }
  }
  
  @-webkit-keyframes parpadeoDos{  
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
     100% { opacity: 1.0; }
  }
  
  @keyframes parpadeoDos{  
    0% { opacity: 1.0; }
     50% { opacity: 0.3; }
    100% { opacity: 1.0; }
  }
  
  
  
  
  
  .parpadeaTres {
    
    animation-name: parpadeoTres;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  
    -webkit-animation-name:parpadeoTres;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
  }
  
  
  @-moz-keyframes parpadeoTres{  
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; }
  }
  
  @-webkit-keyframes parpadeoTres{  
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
     100% { opacity: 1.0; }
  }
  
  @keyframes parpadeoTres{  
    0% { opacity: 1.0; }
     50% { opacity: 0.3; }
    100% { opacity: 1.0; }
  }
  
  


  .spinner-wave {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 60px;
    gap: 10px;
  }
  
  .dot {
    width: 12px;
    height: 12px;
    background-color: #007bff;
    border-radius: 50%;
    animation: wave 0.6s infinite ease-in-out;
  }
  
  .dot1 { animation-delay: 0s; }
  .dot2 { animation-delay: 0.1s; }
  .dot3 { animation-delay: 0.2s; }
  
  @keyframes wave {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-15px);
    }
  }


  .paleta {
    display: inline-block;
    width: 100%;
    margin-bottom: 15px;
    font-family: sans-serif;
  }
  .paleta label {
    display: block;
    padding: 10px;
    color: white;
    text-align: center;
  }
  .boton-paleta {
    display: block;
    width: 100%;
    padding: 8px 0;
    border: 1px solid #aaa;
    background-color: transparent;
    color: #444;
    font-size: .8rem;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
  }
  
  .boton-paleta:hover {
    background-color: #eee;
    color: #222;
  }



  .tabla-tb {
    display: table;
    border-collapse: collapse;
    width: 100%;
  }

  .fila-tb {
    display: table-row;
  }

  .celda-tb {
    font-size: .8rem;;
    display: table-cell;
    border: 1px solid #000;
    padding: 6px;
    text-align: center;
    vertical-align: middle;
    height: 25px;
  }






/* ========================================S======================================== */

.spinner-box-table{
    top: 0;
    left: 0;
    width: 100%;
    height: max-content;
};


.spinner-responsive{
    width: 32px;
    height: 32px;
}

.serv_li{
    cursor: pointer;
    padding: .5rem;
    margin-bottom: .5rem;
    color: #606060;
    border-radius: 3px;
}

.serv_li:hover{
    background: #f5f4f6;
}

.serv_item{
    display: flex;
    justify-content: space-between;
}

.serv_conjunto{
    display: flex;
    justify-content: flex-start;
}

.serv_ico{
    border-radius: 3px;
    background: #eaeff4;
    width: 30px;
    padding: .3rem;
    margin-right: .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.serv_selector{
    display: flex;
    align-items: center;
}

.serv_titulo{
    font-weight: bold;
    font-size: .9rem;
    margin-bottom: .2rem;
}

.serv_descripcion{
    font-size: .7rem;
}

.spinner-load:before{
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 80px;
    width: 80px;
    margin-top: -40px;
    margin-left: -40px;
    border-radius: 50%;
    z-index: 200;
    border: 5px solid #aaaaaa;
    border-top-color: #606060;
    /*border-top-color: #0078d4;*/
    animation: spinner 0.8s linear infinite;
}

@keyframes spinner{
    to{
        transform: rotate(360deg);
    }
}

.mini-spinner-load:before{
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 40px;
    width: 40px;
    margin-top: -20px;
    margin-left: -20px;
    border-radius: 50%;
    z-index: 200;
    border: 5px solid #aaaaaa;
    border-top-color: #606060;
    animation: spinner 0.8s linear infinite;
}

.btn-spinner-load:before{
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 20px;
    width: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    z-index: 200;
    border: 3px solid #fff;
    border-top-color: #606060;
    animation: spinner 0.8s linear infinite;
}



.btn-uno-spinner-load:before{
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 20px;
    width: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    z-index: 200;
    border: 3px solid #fff;
    border-top-color: #007acc;
    animation: spinner 0.8s linear infinite;
}



.super-mini-spinner-load:before{
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 20px;
    width: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    z-index: 200;
    border: 3px solid #fff;
    border-top-color: #0078d4;
    animation: spinner 0.8s linear infinite;
    
}




/* ========================================R======================================== */

.recuadro_ul{
    border: 1px solid #ccc;
    padding: .5rem .3rem;
}


.recuadro_ul_b{
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid transparent;
    padding: .5rem .3rem;
}

.recuadro_ul_m{
    border-top: 1px solid transparent;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid transparent;
    padding: .5rem .3rem;
}


.recuadro_ul_t{
    border-top: 1px solid transparent;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: .5rem .3rem;
}



.registro-box{
    min-width: 97.1px;
    min-height: 50px;
    overflow: hidden;
    padding: .2rem;
    margin-right: .3rem;
    margin-bottom: .3rem;
    border: 1px solid #606060;
    border-radius: 5px;
    font-size: .8rem;
}


.rotate{
    -moz-transition: all .5s linear;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
}

.rotate.down{
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}


.recipiente{
    position: relative;
    width: 90%;
    margin-left: 5%;
    height: CALC(99vh - 50px);
}


/* ========================================S======================================== */
.sombraGris{
    -webkit-box-shadow: 6px 10px 9px -1px #CCCCCC; 
    box-shadow: 6px 10px 9px -1px #CCCCCC;
}

.sombraUno{
    box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.55);
}

.semaforRojo{
    background: red;
    
}

.semaforoVerde{
    background: green;;
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.selectorrrrr::after{
    content:'';
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #fff transparent;
    position: absolute;
    top: 27px;
    margin-left: 10px;
    /*left: 50%;*/
    
}

.selectorrrrr::before{
    content:'';
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #ccc transparent;
    position: absolute;
    top: 26px;
    margin-left: 10px;
    /*left: 50%;*/
}



/* El elemento seleccionado (la pestaña activa) */
.selector{
    position: relative;      /* para que los triángulos se posicionen respecto a esta pestaña */
}

/* Triángulos bajo la pestaña activa */
.selector::before,
.selector::after{
    content:'';
    border-style: solid;
    border-width: 0 10px 10px 10px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);  /* centra el triángulo bajo el elemento */
}

/* Borde gris (sombra) */
.selector::before{
    border-color: transparent transparent #ccc transparent;
    top: 30px;   /* dentro de los 40px de altura */
}

/* Relleno blanco (encima del borde) */
.selector::after{
    border-color: transparent transparent #fff transparent;
    top: 31px;   /* 1px por debajo para que se vea el borde */
}










.selector_horizontal{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.selector_horizontalllllllll li{
    float: left;
}

.selector_horizontalllllllll li a{
    display: block;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}



.selector_horizontal li{
    float: left;
}

.selector_horizontal li a{
    display: block;
    text-align: center;
    padding: 0 .6rem;    /* solo padding horizontal, sin padding vertical */
    line-height: 40px;   /* centra texto e icono dentro de los 40px */
    text-decoration: none;
    font-size: 0.85rem;  /* opcional: ligeramente más pequeño para que quepa mejor */
}








/* ========================================T======================================== */

.tema-am{
    background: #fff5d5;
    color: #c19700;
    padding: .5rem;
    border-radius: 3px;
}


.texto-adaptado07{
    font-size: 1rem;
}

.tecProCss{
    font-size: .8rem;
    text-align: center;
    padding: .5rem;
    background: #fff5d5;
    border-radius: 5px;
}

.tbl-controles{
    min-height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center; 
}

.tbl-controles-wrap{
    min-height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center; 
    flex-wrap: wrap;
}



.tabla_sensitive{
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #aaa;
    padding: .3rem;
    background: white;
    z-index: 200;
  }
  
  .tabla_sensitive tr td{
    width: 100%;
  }
  
  .tabla_sensitive td{
    padding: 8px;
    text-align: left;
  }
  
  .tabla_sensitive tr:hover{
    background-color: #c8e4fa;
    color: rgba(74,74,74, 1);;
    cursor: default;
  }
  

  .tabla_sensitiva{
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #aaa;
    padding: .3rem;
    background: white;
    z-index: 200;
  }
  
  .tabla_sensitiva tr td{
    width: 100%;
  }
  
  .tabla_sensitiva td{
    padding: 8px;
    text-align: left;
  }
  
  .tabla_sensitiva tr:hover{
    background-color: #c8e4fa;
    color: rgba(74,74,74, 1);;
    cursor: default;
  }
  

.wrapper-table{
    margin-inline: auto;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

/*

.table-responsive{
    width: 100%;
}
*/

/* ===== Tablas responsivas (global) ===== */

/* Escritorio / tablets anchas: tabla normal y estable */
.table-responsive{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;            /* evita que se estrechen columnas vacías */
  }
  .table-responsive th,
  .table-responsive td{
    padding: .5rem;
    border-bottom: 1px solid #eee;
    vertical-align: top;
  }
  .table-responsive th{ text-align: left; }
  /* Si usas inline style position:absolute; left:0; en la tabla, mejor quitarlo;
     si no puedes, lo neutralizamos aquí: */
  .table-responsive{
    position: static !important;
    left: auto !important;
  }
/* ===== Tablas responsivas (global) ===== */




.table-scroll tbody tr:hover{
    background-color: rgba(229,229,229,1); 
    /*rgba(170,210,192,1);*/
}

.table-pill{
    font-size: .8rem;
}

.tabla-flex-warp{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-size: .8rem;
    
}


.txt-center{
    text-align: center;
}

.txt-justify{
    text-align: justify;
}


.txt{
    color: #606060;
}


.txt-07{

    font-size: .7rem;
}

.txt-08{

    font-size: .8rem;
}

.txt-09{

    font-size: .9rem;
}

.txt-1{

    font-size: 1rem;
}

.txt-titulo{
    font-size: 3rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}


.txt-responsive{
    font-size: 1rem;
}

.txt-responsive08{
    font-size: .8rem;
}

.txt-responsive07{
    font-size: .7rem;
}




/*-------------------------------------------------------------------------------------------------------------*/


  
.mod_pseudo::before {
    line-height: 15px;
    font-size: .6rem;
    text-align: center;
    content: '';/* Necesario para mostrar el contenido attr(data-info-circulo);*/
    position: absolute; /* Posicionar el pseudoelemento de forma absoluta */

    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f044";

    top: 15px;
    right: 0;
    width: 15px; /* Tamaño del circulito */
    height: 15px; /* Tamaño del circulito */
    border-radius: 0%; /* Círculo */
    color: #606060;
    z-index: 1; /* Asegurar que esté encima del texto */
  }
  
.mod_pseudo p {
    margin: 0; /* Quitar el margen predeterminado */
  }


/*-------------------------------------------------------------------------------------------------------------*/

.inf-circulo {
    position: absolute; /* Necesario para posicionar el pseudoelemento */
    padding: 10px; /* Añadir espacio para el circulito */
    right: 0px;
    top: -15px;
  }
  
.inf-circulo::before {
    line-height: 15px;
    font-size: .6rem;
    text-align: center;
    content: attr(data-info-circulo); /* Necesario para mostrar el contenido */
    position: absolute; /* Posicionar el pseudoelemento de forma absoluta */
    top: 0;
    left: 0;
    width: 15px; /* Tamaño del circulito */
    height: 15px; /* Tamaño del circulito */
    border-radius: 50%; /* Círculo */
    background-color: red; /* Color del circulito */
    color: #ffff;
    z-index: 1; /* Asegurar que esté encima del texto */
  }
  
.inf-circulo p {
    margin: 0; /* Quitar el margen predeterminado */
  }


.tabs-box{
    border-bottom:1px solid #ccc;
}

.tabs-links{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.tabs-links-start{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}


.tabs-links-start-nowrap{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}



.tablinks{

    display: flex; 
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    margin-bottom: -1px;
}




.tablinks span{
    font-size: .45rem;
    margin-top: .3rem;
    margin-right: .3rem;
}


.tablinkspan{

    display: flex; 
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    margin-bottom: -1px;
}


.tablinkspan span{
    font-size: .45rem;
    margin-top: .3rem;
    margin-right: .3rem;
}




.bloqueTop{

    display: flex; 
    flex-direction: column; 
    justify-content: flex-start;
    align-items:flex-start;
    margin-bottom: -1px;
}


/* contenedor relativo del input + icono + lista */
.wrap-num{
    position: relative;
  }
  
  /* que el input ocupe el ancho del contenedor
     y deje hueco para el icono a la derecha */
  .wrap-num .input-txt{
    width: 100%;
    box-sizing: border-box;
    padding-right: 2.2rem; /* espacio para el icono */
  }
  
  /* icono absolutamente centrado verticalmente */
  .wrap-num .listado_numeros{
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    height: 100%;      /* opcional */
    line-height: 1;    /* evita saltos raros */
  }
  
  /* desplegable */
  #box_ls_numeros{
    position: absolute;
    top: 100%;
    left: 0;                 /* <-- corregido (antes tenías left=0) */
    width: 100%;
    max-height: 100px;
    overflow: auto;
    background: #fff;        /* #ffff puede dar guerra; usa #fff */
    border: 1px solid #606060;
    z-index: 1000;
  }


/* ========================================W======================================== */
.w1{
    width: 1%;
}
.w2{
    width: 2%;
}
.w3{
    width: 3%;
}
.w4{
    width: 4%;
}
.w5{
    width: 5%;
}

.w5auto{
    width: 5%;
}

.w09{
    width: 9%;
};


.w9auto{
    width: 9%;
};

.w90auto{
    width: 90%;
};

.w10{
    width: 10%;
}


.w12{
    width: 12%;
}


.w10autor{
    width: 10%;
}

.w15{
    width: 15%;
}

.w15auto{
    width: 15%;
}

.w11auto{
    width: 11%;
}

.w12auto{
    width: 12%;
}

.w19auto{
    width: 19%;
}


.w20{
    width: 20%;
}

.w20auto{
    width: 20%;
}

.w20autor{
    width: 20%;
}

.w24auto{
    width: 24%;
}

.w25{
    width: 25%;
}

.w25auto{
    width: 25%;
}

.w30{
    width: 30%;
}

.w27auto{
    width: 27%;
}

.w30auto{
    width: 30%;
}


.w32auto{
    width: 32%;
}


.w33auto{
    width: 33.33%;
}


.w35{
    width: 35%;
}

.w35auto{
    width: 35%;
}

.w40{
    width: 40%;
}

.w40auto{
    width: 40%;
}

.ancho40auto{
    width: 40%;
}

.w45{
    width: 45%;
}

.w45auto{
    width: 45%;
}


.w49{
    width: 49%;
}

.w49auto{
    width: 49%;
}

.wrap49{
    width: 49%;
}


.w50{
    width: 50%;
}

.w50auto{
    width: 50%;
}



.w55{
    width: 55%;
}

.w60{
    width: 60%;
}

.w60auto{
    width: 60%;
}

.ancho60auto{
    width: 60%;
}


.w61{
    width: 61%;
}

.w62{
    width: 62%;
}

.w63{
    width: 63%;
}

.w64{
    width: 64%;
}

.w65{
    width: 65%;
}

.w65auto{
    width: 65%;
}

.w66{
    width: 66%;
}

.w67{
    width: 67%;
}

.w68{
    width: 68%;
}

.w69{
    width: 69%;
}

.w70{
    width: 70%;
}

.w70auto{
    width: 70%;
}

.w75{
    width: 75%;
}

.w75auto{
    width: 75%;
}

.w80{
    width: 80%;
}

.w80auto{
    width: 80%;
}

.w95auto{
    width: 95%;
}

.w95{
    width: 95%;
}

.w96{
    width: 98%;
}

.w97{
    width: 98%;
}


.w98{
    width: 98%;
}

.w98auto{
    width: 98%;
}



.w99{
    width: 99%;
}

.w99auto{
    width: 99%;
}



.w100{
    width: 100%;
}

.w100auto{
    width: 100%;
}


/*==============================================================================================================================================*/

.wre1{
    width: 1%;
    margin-bottom: .5rem;
}
.wre2{
    width: 2%;
    margin-bottom: .5rem;
}
.wre3{
    width: 3%;
    margin-bottom: .5rem;
}
.wre4{
    width: 4%;
    margin-bottom: .5rem;
}
.wre5{
    width: 5%;
    margin-bottom: .5rem;
}

.wre10{
    width: 9%;
    margin-bottom: .5rem;
}

.wre15{
    width: 14%;
    margin-bottom: .5rem;
}

.wre20{
    width: 19%;
    margin-bottom: .5rem;
}

.wre25{
    width: 24%;
    margin-bottom: .5rem;
}

.wre25-1225{
    width: 25%;
    margin-bottom: .5rem;
}



.wre30{
    width: 29%;
    margin-bottom: .5rem;
}

.wre35{
    width: 34%;
    margin-bottom: .5rem;
}

.wre40{
    width: 39%;
    margin-bottom: .5rem;
}

.wre45{
    width: 44%;
    margin-bottom: .5rem;
}

.wre45nomargen{
    width: 44%;
    margin-bottom: .5rem;
}


.wre49{
    width: 48%;
    margin-bottom: .5rem;
}

.wre49nomargen{
    width: 48%;
    margin-bottom: .5rem;
}

.wre50{
    width: 49%;
    margin-bottom: .5rem;
}


.wre50nomargen{
    width: 50%;
    margin-bottom: .5rem;
}

.wre55{
    width: 54%;
    margin-bottom: .5rem;
}

.wre60{
    width: 59%;
    margin-bottom: .5rem;
}

.wre61{
    width: 60%;
    margin-bottom: .5rem;
}

.w62{
    width: 61%;
    margin-bottom: .5rem;
}

.wre63{
    width: 62%;
    margin-bottom: .5rem;
}

.wre64{
    width: 63%;
    margin-bottom: .5rem;
}

.wre65{
    width: 64%;
    margin-bottom: .5rem;
}

.wre66{
    width: 65%;
    margin-bottom: .5rem;
}

.wre67{
    width: 66%;
    margin-bottom: .5rem;
}

.wre68{
    width: 67%;
    margin-bottom: .5rem;
}

.wre69{
    width: 68%;
    margin-bottom: .5rem;
}

.wre70{
    width: 69%;
    margin-bottom: .5rem;
}


.wre75{
    width: 74%;
    margin-bottom: .5rem;
}

.wre80{
    width: 79%;
    margin-bottom: .5rem;
}

.wre85{
    width: 84%;
    margin-bottom: .5rem;
}

.wre90{
    width: 89%;
    margin-bottom: .5rem;
}

.wre95{
    width: 94%;
    margin-bottom: .5rem;
}


.wre100{
    width: 99%;
    margin-bottom: .5rem;
}

/*==============================================================================================================================================*/


.wpc50{
    width: 50%;
}

.wrap-box{
    display: flex; 
    justify-content: space-between; 
    flex-wrap: wrap;  
}


.wrap-left{
    width: 38%;
    height: calc( 100vh - 60px); 
}

.wrap-center{
    height: calc( 100vh - 60px); 
}

.wrap-right{
    width: 38%;  
    height: calc( 100vh - 60px); 
}

.wr160{
    width: 160px;
}

.wflex{
    display: flex;
    width: 100%;
}

.wizq{
    width: 50%;
    margin-right: .5rem;
}

.wdch{
    width: 50%;
}


/* ========================================Z======================================== */

.zoom5:hover{
    font-size: .5rem;
}



.zoom10:hover{
    font-size: 1.15rem;
}


/* ================================================================================= */

/* La barra queda pegada justo bajo el header */
.linea-formmmmmmmmm{
    position: sticky;
    top: var(--header-h, 0);
    z-index: 20;               /* por encima del contenido */
    background: #fff;            /* para tapar lo que hay detrás al hacer scroll */
    border-bottom: 1px solid #ccc;
    padding: .2rem 1rem;
    height: 40px;
    /*margin-top: .5rem;*/
  }





.linea-form{
    position: sticky;
    top: var(--header-h, 0);
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid #ccc;
    padding: .25rem 0;
    /* sin height, sin min-height */
}





.btn_tool{
    padding: 0 .25rem;   /* separa un poco los botones entre sí */
}







@media (max-width: 1000px) {


    .selector{
        visibility: visible;
        position: relative;
        top: 0px;
        margin-left: 0px;
        background: #e5e5e5;
    }


    .btn_tool{
        margin-right: .5rem;
        margin-bottom: .5rem;
     }
    
 


    .ptMil05Auto{
        padding-top: 05rem;
    }

    .selectorrrrr::after{
        display: none;
        /*left: 50%;*/
        
    }
    
    .selector::before{
        display: none;
        /*left: 50%;*/
    }

    /*.linea-form{margin-bottom: 2rem;}*/
    /*.linea-form{border-bottom: none;padding: .2rem 1rem; height: 40px; margin-top: 1rem;  margin-bottom: 1rem; }*/


    /*:root{ --header-h: 56px; }   /* si tu header cambia en móvil */





    .wflex{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
    }
    
    .wizq{
        width: 100%;
        margin-right: 0;
    }
    
    .wdch{
        width: 100%;
 
    }

    .cuadricula-box{
        width: 100%; 
    }


    .wrap1000{
        width: 100%;
    }
    
    .fs1000-1{
        font-size: 1rem;
    }

    .fs1000-11{
        font-size: 1.1rem;
    }

    .fs1000-12{
        font-size: 1.2rem;
    }


    .fs1000-15{
        font-size: 1.5rem;
    }

    .fs1000-09{
        font-size: .9rem;
    }

    .fs1000-08{
        font-size: .8rem;
    }

    .fs1000-07{
        font-size: .7rem;
    }

    .fs1000-06{
        font-size: .6rem;
    }

    .nav1000{
        width: 98%;
    }
    


}


@media (max-width: 1750px) {

    .box-prog-per{
        width: 100%; 
        margin-bottom: .5rem;
    }
    
    .box-prog-per .izq{
        margin-right: 0;
    }

    .box-prog-global{

        display: block;

    }

    .expande-sm{
        width: 100%;
    }



}
/*--------------- SE APLICA CUANDO SE HACE PEQUEÑO -------------------*/
@media (max-width: 1225px) {
    
    .col25{
        width: 100%;
        padding-right: 0;
        margin-bottom: .5rem;
    }

    .col33{
        width: 100%;
        padding-right: 0;
        margin-bottom: .5rem;
    }


    .col33Md{
        width: 100%;
        padding-right: 0;
        margin-bottom: .5rem;
    }


    .col25Md{
        width: 100%;
        padding-right: 0;
        margin-bottom: .5rem;
    }


    .col50Md{
        width: 100%;
        padding-right: 0;
        margin-bottom: .5rem;
    }
    
    .col50{
        width: 100%;
        margin-bottom: .5rem;
    }
    

    .col75Md{
        width: 100%;
        padding-right: 0;
        margin-bottom: .5rem;
    }
    
    .col75{
        width: 100%;
        margin-bottom: .5rem;
    }
    

    .wre25-1225{
        width: 100%;
        margin-right: 0;
    }
    


    .calendar_week{
        display: none;
    }

    .calendario_box{
        display: flex;
        flex-wrap: wrap;
    }

    .wrap-left{
        width: 100%; 
        height: auto;
    }
    
    .wrap-center{
        width: 100%; 
        height: auto;
    }
    
    .wrap-right{
        width: 100%;  
        height: auto;
    }


    .fsmax08{
        font-size: .7rem;
    }

    .fsmax07{
        font-size: .6rem;
    }

    .wr160{
        width: 100%;
    }


}





@media (max-width: 900px) {


    .toolbar-list{
        gap: .25rem .35rem;
    }

    .toolbar-link{
        height: 32px;
        font-size: .8rem;
        padding: 0 .6rem;
    }

    /* Ocultar triángulos bajo la pestaña activa en pantallas pequeñas */
    .selector::before,
    .selector::after{
        display: none;
    }

    /* La barra ya no es rígida en alto, pero mantiene mínimo 40px */
    .linea-formMMM{
        height: auto;
        min-height: 40px;
    }
  
    /* Hacemos que la lista de pestañas use flex y envuelva */
    .selector_horizontal{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .25rem .5rem;   /* separación entre botones */
    }
  
    /* Anulamos el float en móviles para que funcione flex */
    .selector_horizontal li{
        float: none;
    }
  
    /* Un pelín más baja la línea para no “comerse” altura */
    .selector_horizontal li a{
        line-height: 32px;   /* caben 2 filas sin pasar de alto */
    }


  }





/* Barra fija bajo el header */
.linea-form{
    position: sticky;
    top: var(--header-h, 0);
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid #ccc;
    padding: .25rem 0;
}

/* Contenedor de la barra (ya tienes .contenedor para el centrado/ancho) */
.toolbar{
    width: 100%;
}

/* Lista de botones: responsive */
.toolbar-list{
    list-style: none;
    margin: 0;
    padding: 0;
    color: #606060;
    display: flex;
    flex-wrap: wrap;          /* 👉 en pantallas más pequeñas pasa a 2 filas */
    align-items: center;
    gap: .25rem .5rem;        /* separación entre botones */
}

/* Cada item solo ocupa lo que necesita */
.toolbar-item{
    flex: 0 0 auto;
}

/* Botón base */
.toolbar-link{
    display: inline-flex;
    align-items: center;
    gap: .35rem;

    padding: 0 .75rem;
    height: 36px;
    line-height: 1;

    border-radius: 4px;
    font-size: .85rem;
    text-decoration: none;
    color: #606060;
    white-space: nowrap;      /* que no se rompa dentro del botón */
    background: transparent;
}

/* Icono */
.toolbar-link i{
    font-size: .9rem;
}

/* Hover solo en el botón */
.toolbar-link:hover{
    background: #e5e5e5;
    cursor: pointer;
}

/* Pestaña activa */
.toolbar-link.is-active{
    background: #E5E5E5;

}




/*=== estilos cuando la ventana es inferior a los 760px ===*/

@media (max-width: 760px) {


    .linea-formmmmm{
        min-height: 40px;          /* ⬅️ en vez de height */
        height: auto;              /* ⬅️ permite 2 líneas */
      }


      .linea-formmmm{
        /* mantenemos la altura fija de 40px también en móvil */
        height: 40px;
        margin-bottom: 1rem;   /* si quieres algo de respiro debajo */
    }

    .wrapper-table{
        margin-inline: auto;
    }


    .oculta760{
        display: none;
    }


    .muestraSm{
        display: block;
    }
    
    .ocultaSm{
        display: none;
    }

    .contenedorAuto{
        width: 100%;
    }


    .ul_scroll{
        overflow-y:auto; 
        overflow: hidden;
    }


    .fs08fs06{
        font-size: .6rem;
    }

    .fs08fs07{
        font-size: .7rem;
    }

    .fs09fs06{
        font-size: .6rem;
    }

    .fs09fs07{
        font-size: .7rem;
    }


    .box-groupp{
        display: none;
    }

    .center-auto-sm{
        text-align: center;
    }


    .calendario300Auto{
        width: 100%;
    }


    .scroll-carrusel{
        overflow-x: auto;
    }


    .conjunto-flex-end-auto{
        flex-wrap: wrap;
    }


  /* Ocultamos encabezados y convertimos en bloques */

  .table-responsive{
    width: 100%;
    display: block;               /* la tabla se comporta como contenedor */
    border-collapse: separate;    /* separa para que no se hereden bordes raros */
    table-layout: auto;           /* no fijo en móvil */
  }
  .table-responsive thead{
    display: none !important;     /* ocultamos cabecera en móvil */
  }
  .table-responsive tbody,
  .table-responsive tr{
    display: block;
    width: 100%;
  }
  .table-responsive tr{
    border: 1px solid #ddd;
    /* border-top: 0;   <- quítala */
    margin-bottom: .5rem;
    background: #fff;
  }
  .table-responsive td{
    display: grid;                 /* etiqueta + valor en dos columnas */
    grid-template-columns: 130px 1fr;
    gap: .5rem;
    padding: .5rem;
    border: 0;
    border-bottom: 1px solid #eee; /* separador interno */
    white-space: normal;           /* que el texto pueda saltar */
    width: 100%;
  }
  .table-responsive td::before{
    content: attr(data-cell);
    font-weight: 700;
    text-transform: capitalize;
  }
  /* Si no hay etiqueta, no mostramos el before (por ej. columna Acciones) */
  .table-responsive td[data-cell=""]::before{
    content: "";
  }
  /* Primera celda con un leve fondo si te gusta */
  .table-responsive tr td:first-child{
    background: #f6f6f6;
  }
  .table-responsive tr td:last-child{
    margin-bottom: .3rem;
    border-bottom: 0;
  }




/*

    .table-responsive{
        width: 100%;
        border-collapse: collapse;
    }


    .table-responsive thead, tbody{
        width: 100%;
        display: table;
    }
    
    
    
    .table-responsive td{
        padding: .5rem;
    }
    


    .table-responsive tr{
        border: 1px solid #ccc;
    }



    .table-responsive tr, td{
        width: 100%;
    }
    

    .table-responsive th{
        display: none;
    }


    .table-responsive td{
        display: grid;
        gap: .5rem;
    }


    .table-responsive td::before{
        content: attr(data-cell);
        font-weight: bold;
        text-transform: capitalize;
    }

    .table-responsive tr td:first-child{
        background: #ccc;
    }

    .table-responsive tr td:last-child{
        margin-bottom: .3rem;
    }


*/
    .dblockauto{
        display: block;
    }

    .dflex-wrap-center{
        flex-wrap: wrap;
        justify-content: center;
    }


    .dflex-wrap{
        flex-wrap: wrap;
    }

    .desaparece760{
        display: none;
    }


    .p05auto{
        padding: .5rem;
    }


    .p1auto{
        padding: 1rem;
    }


    .p2auto{
        padding: 2rem;
    }


    .p3auto{
        padding: 3rem;
    }


    .p4auto{
        padding: 4rem;
    }

    .p5auto{
        padding: 5rem;
    }


    .mb05auto{
        margin-bottom: .5rem;
    }

    .barra-e-wrap{
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
    
    }
    
    .barra-s-wrap{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    
    }
    
    .barra-b-wrap{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    
    }
    
    
    .barra-a-wrap{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    
    }


    .input760{
        width: 100%;
        margin-right: 0;
    }


    .conjunto-start-wrap760{
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
    }


    .cinta-box{
        width: 80%;
        font-size: .8rem;
    }

    .btnauto{
        width: 100%;
    }


    .frm750-auto{
        width: 100%;
    };
    


    .conjunto-flex-end-start{
        display: flex;
        justify-content: start;
    }


    .input-txt-auto{
        margin-right: 0;
        width: 100%;
    }

    .pr02auto{
        padding-right: 0;
    };


    .pr05auto{
        padding-right: 0;
    };

    .pl1Auto{
        padding-left: 0;
    }


    .prCincoAuto{
        padding-right: 0rem;
    };

    .w10autor{
        width: 100%;
    }


    .w5auto{
        width: 100%;
    }

    .w9auto{
        width: 100%;
    }

    .w90auto{
        width: 100%;
    }

    .w11auto{
        width: 100%;
    }

    .w12auto{
        width: 100%;
    }

    .w19auto{
        width: 100%;
    }

    .w20auto{
        width: 100%;
    }
    
    .w20autor{
        width: 100%;
    }
    
    .w25auto{
        width: 100%;
    }
    
    .w27auto{
        width: 100%;
    }

    .w30auto{
        width: 100%;
    }
    
    .w35auto{
        width: 100%;
    }


    .w75auto{
        width: 100%;
    }

    .w95auto{
        width: 100%;
    }

    .wauto{
        width: 100%;
        margin-right: 0;
    }

    .w40auto{
        width: 100%;
    }
    
    .ancho40auto{
        width: 100%;
    }

    .w45auto{
        width: 100%;
    }
    

    .w15auto{
        width: 100%;
    }

    .w32auto{
        width: 100%;
    }

    .w33auto{
        width: 100%;
    }


    .w49auto{
        width: 100%;
    }

    .w50auto{
        width: 100%;
    }

    .w60auto{
        width: 100%;
    }

    .ancho60auto{
        width: 100%;
    }


    .w65auto{
        width: 100%;
    }

    .w70auto{
        width: 100%;
    }


    .w80auto{
        width: 100%;
    }

    .w98auto{
        width: 100%;
    }

    .w99auto{
        width: 100%;
    }

    .w24auto{
        width: 100%;
    }

    .spinner-responsive{
        position: absolute;
    }

    .mr05auto{
        margin-right: 0;
    }

    .ml05auto{
        margin-left: 0;
    }

    .wrap49{
        width: 100%;
    }

    .conjunto-flex-start_between{
        display: flex;
        justify-content: space-between;
    }


    .texto-adaptado07{
        font-size: .7rem;
    }

    .calendario_box{
        display: flex;
        flex-wrap: wrap;
    }

    .tabs-box{
        border: none;
    }

    .conjunto-flex-between-wrap{
        flex-wrap: wrap;
    }

    .conjunto-flex-end-wrap{
        flex-wrap: wrap;
    }
    
    .conjunto-dinamico{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    
    .mr05-wrap{
        margin-right: 0;
    }

    .tabs-box{
        border: none;
    }

    .tablinks{
        display: block;
        width: 100%;
        margin-bottom: .2rem;
        border: 1px solid #ccc;

    }

    .active-ref{
        background:#e1f2ff;
        
    }


    .formulario260{
        width: 100%; 
        margin-left: 0px;
    }


    .flex-mr05{
        margin-right: 0;
    }
    
    .flex-ml05{
        margin-left: 0;
    }


    .flex-mr04{
        margin-right: 0;
    }
    
    .flex-ml04{
        margin-left: 0;
    }


    .flex-mr03{
        margin-right: 0;
    }
    
    .flex-ml03{
        margin-left: 0;
    }

    .flex-mr02{
        margin-right: 0;
    }
    
    .flex-ml02{
        margin-left: 0;
    }

    .flex-mr01{
        margin-right: 0;
    }
    
    .flex-ml01{
        margin-left: 0;
    }


    .flex-conjunto{
        flex-wrap: wrap;
        
    }


    .mr02auto{
        margin-right: 0;
        
    }

    .grupo{
        width: 99%;
    }


    .titulo-flexi-sm{
    font-size: 1.3rem;
    }


    .txt-responsive{
        font-size: .8rem;
    }

    .txt-responsive08{
        font-size: .6rem;
    }

    .txt-responsive07{
        font-size: .6rem;
    }

    
    .ancho-responsive{
        min-width: 28px;
    }


    .itmBox{
        display: flex;
        flex-wrap: wrap;
    }


    .posVal{
        top: 105px; 

    }


    .fsmax08{
        font-size: .6rem;
    }

    .fsmax07{
        font-size: .6rem;
    }

    .fsmax1{
        font-size: .7rem;
    }

    .crece5{
        width: 100%;
    }

    .crece10{
        width: 100%;
    }

    .crece15{
        width: 100%;
    }

    .crece20{
        width: 100%;
    }

    .crece25{
        width: 100%;
    }

    .crece30{
        width: 100%;
    }

    .crece35{
        width: 100%;
    }

    .crece40{
        width: 100%;
    }


    .crece45{
        width: 100%;
    }

    .crece50{
        width: 100%;
    }

    .crece55{
        width: 100%;
    }

    .crece60{
        width: 100%;
    }

    .crece70{
        width: 100%;
    }
    
    
    .crece80{
        width: 100%;
    }
    
    
    .crece90{
        width: 100%;
    }
    

    .meteWrap{
        flex-wrap: wrap;
    }


    .wpc50{
        width: 100%;
    }

/*==============================================================================================================================================*/

.wre1{
    width: 100%;
}
.wre2{
    width: 100%;
}
.wre3{
    width: 100%;
}
.wre4{
    width: 100%;
}
.wre5{
    width: 100%;
    margin-right: 0;
}

.wre10{
    width: 100%;
    margin-right: 0;
}

.wre15{
    width: 100%;
    margin-right: 0;
}

.wre20{
    width: 100%;
    margin-right: 0;
}

.wre25{
    width: 100%;
    margin-right: 0;
}

.wre30{
    width: 100%;
    margin-right: 0;
}

.wre35{
    width: 100%;
    margin-right: 0;
}

.wre40{
    width: 100%;
    margin-right: 0;
}

.wre45{
    width: 100%;
    margin-right: 0;
}

.wre49{
    width: 100%;
    margin-right: 0;
}


.wre50{
    width: 100%;
    margin-right: 0;
}

.wre55{
    width: 100%;
    margin-right: 0;
}

.wre60{
    width: 100%;
    margin-right: 0;
}

.wre61{
    width: 100%;
    margin-right: 0;
}

.w62{
    width: 100%;
    margin-right: 0;
}

.wre63{
    width: 100%;
    margin-right: 0;
}

.wre64{
    width: 100%;
    margin-right: 0;
}

.wre65{
    width: 100%;
    margin-right: 0;
}

.wre66{
    width: 100%;
    margin-right: 0;
}

.wre67{
    width: 100%;
    margin-right: 0;
}

.wre68{
    width: 100%;
    margin-right: 0;
}

.wre69{
    width: 100%;
    margin-right: 0;
}

.wre70{
    width: 100%;
    margin-right: 0;
}


.wre75{
    width: 100%;
    margin-right: 0;
}

.wre80{
    width: 100%;
    margin-right: 0;
}

.wre85{
    width: 100%;
    margin-right: 0;
}

.wre90{
    width: 100%;
    margin-right: 0;
}

.wre95{
    width: 100%;
    margin-right: 0;
}

.wre100{
    width: 100%;
    margin-right: 0;
}

/*==============================================================================================================================================*/


}



/* Muy pequeño: que pueda hacer scroll horizontal si no cabe */
@media (max-width: 600px){

    .toolbar-list{
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* scroll suave en móvil */

        /* ⬇️ Ocultar barra de scroll */
        scrollbar-width: none;      /* Firefox */
    }

    .toolbar-list::-webkit-scrollbar{
        display: none;              /* Chrome, Safari, Edge */
    }

    .toolbar-item{
        flex: 0 0 auto;
    }


    .toolbar-item{
        flex: 0 0 auto;
    }



}








.cinta-avisos {
    padding: 1rem;
    width: 100%;
    line-height: 0px;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.cinta-avisos div{
    /*display: inline-block;*/
    padding-left: 100%;
    animation: cintavisos  35s linear infinite;
    &:hover {
        animation-play-state: paused;
    }
}
@keyframes cintavisos {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}


/*

.box-groupp{
    width: 78%;
    margin-left: 250px;
}


.groupp{
    width: 100%;
    position: relative;
    height: 50px;
    overflow: hidden;
}


.groupp .textt{
    position: absolute;
    margin: 5px 0;
    padding: 0;

    animation: my-animation 24s linear infinite;
    &:hover {
        animation-play-state: paused;
    }
}


@keyframes my-animation{
    from {
      left: 00%;
    }
  
    to {

      left: 100%;
    }
  }




#cintaa{ 
    overflow: hidden;
    width: 100%;
}

#boxCinta{
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    animation: floatText 15s infinite linear;
    &:hover {
        animation-play-state: paused;
    }
}

@keyframes floatText{
  from {
    left: 00%;
  }

  to {

    left: 100%;
  }
}

*/

  /* === Pista del carrusel === */


  /* Contenedor adaptado al sidebar y al hueco derecho */

  /* Contenedor principal: centrado en móvil con huecos L/R; adaptado a sidebar en desktop */
  .box-groupp{
    position: relative;
    display: block;
    margin-top: var(--topbar-offset);
    width: calc(100% - var(--left-gap-mobile) - var(--right-gap-mobile));
    margin-left: var(--left-gap-mobile);
    margin-right: var(--right-gap-mobile);
    z-index: 10;
  }
  @media (min-width: 960px){
    .box-groupp{
      margin-left: var(--sidebar-w);
      width: calc(100% - var(--sidebar-w) - var(--right-gap-desktop));
      margin-right: var(--right-gap-desktop);
    }
  }
  
  /* Depuración opcional */
  .debug-marquee{ outline: 1px dashed rgba(0,0,0,.25); }
  .debug-marquee .groupp{ outline: 1px dotted rgba(0,0,0,.2); }
  .debug-marquee .textt{ outline: 1px dotted rgba(0,0,0,.15); }
  
  /* Pista del carrusel (ALTO FIJO) */
  .groupp{
    width: 100%;
    position: relative;
    height: 48px;              /* alto del carrusel */
    overflow: hidden;
  }
  
  /* Banda en movimiento: centrada vertical + flex */
  .groupp .textt{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-100%, -50%);
    white-space: nowrap;
    will-change: transform;
    animation: marquee-l2r var(--marquee-duration) linear infinite;
    animation-delay: var(--marquee-start);
  
    display: flex;
    align-items: center;       /* centra verticalmente el contenido */
  }
  .groupp:hover .textt{ animation-play-state: paused; }
  
  /* Host del texto */
  #carga-textt.marquee-host{
    display: inline-flex !important;
    align-items: center;
  }
  
  /* Animación IZQ → DCHA */
  @keyframes marquee-l2r{
    0%   { transform: translate(-100%, -50%); }
    100% { transform: translate(100%,  -50%); }
  }
  
  /* Accesibilidad */
  @media (prefers-reduced-motion: reduce){
    .groupp .textt{ animation: none; transform: translate(0, -50%); }
  }
  
  /* ====== NUEVO: pistas y tarjetas ====== */
  
  /* Las dos pistas en HORIZONTAL para no superar 48px */
  #carga-textt .lanes{
    display: inline-flex;
    flex-direction: row;
    align-items: center;     /* centrado vertical dentro de 48px */
    gap: 12px;               /* separación entre grupos (veh/lab) */
    padding: 0;
    box-sizing: border-box;
  }
  #carga-textt .lane{
    display: inline-flex;
    flex-wrap: nowrap;       /* no saltar de línea */
    align-items: center;     /* centrado vertical */
    gap: 8px;                /* separación entre tarjetas */
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Tarjeta compacta (≈ 48px alto total) */
  .aviso{
    display: flex; align-items: center; gap: 6px;
    width: 200px; max-width: 200px;
    padding: 2px 6px;
    border: 1px solid #ccc; border-radius: 6px;
    background: #f9f9f9;     /* color por defecto */
    box-sizing: border-box; margin: 0;
  }
  
  /* Colores por nivel */
  .aviso--crit { background:#ffeaea; border-color:#f5a3a3; }
  .aviso--warn { background:#fff5db; border-color:#ffd27a; }
  .aviso--info { background:#eef5ff; border-color:#bcd4ff; }
  
  /* Cuerpo (3 filas) */
  .aviso__body{
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    gap: 1px;
  }
/* Fila 1 con icono + título */
.aviso__row1{
    display: flex; align-items: center; gap: 4px;
    font-weight: 700; font-size: .68rem; line-height: 1.1;
    white-space: nowrap; overflow: hidden;       /* elipsis en el texto, no en el icono */
  }
  
  /* Icono: tamaño y alineación */
  .aviso__icon{
    flex: 0 0 auto;
    font-size: .78rem;       /* un pelín mayor que el texto */
    line-height: 1;
    opacity: .9;
  }
  
  /* Título: se trunca con … si es largo */
  .aviso__title{
    min-width: 0;            /* imprescindible para elipsis en flex */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .aviso__row2{
    font-size:.64rem; line-height:1.1;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .aviso__row3{
    font-size:.62rem; line-height:1.1; opacity:.85;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  
  /* Botón cerrar: fijo, sin encoger */
  .aviso__close{
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; flex:0 0 22px;
    min-width:22px; min-height:22px;
    border:1px solid #ccc; border-radius:4px;
    background:#fff; color:#333; text-decoration:none;
    line-height:1; font-size:16px; cursor:pointer;
    box-sizing:border-box;
  }
  .aviso__close:hover{ background:#f0f0f0; }
  


  /* Origen en la parte superior para que “tinte” como una campana */
  /* EL JS ESTA EN EL DOCUMENTOS FUNCIONES */
  .login-items.is-active{ background:#E5E5E5; border-radius:3px; }
  .alertas-menubar .fa-bell { transform-origin: 50% 0; }
  @keyframes bell-ring {
    0%{transform:rotate(0)}
    15%{transform:rotate(18deg)}
    30%{transform:rotate(-14deg)}
    45%{transform:rotate(10deg)}
    60%{transform:rotate(-6deg)}
    75%{transform:rotate(3deg)}
    100%{transform:rotate(0)}
  }
  .bell-ring { animation: bell-ring .9s ease-in-out 2; } /* 2 iteraciones */
  /*.bell-ring { animation: bell-ring .9s ease-in-out; }*/
  /* Accesibilidad: respetar usuarios con motion reducido */
  @media (prefers-reduced-motion: reduce){
    .bell-ring { animation: none !important; }
  }


 /* Label flotante */

  .fld{ position:relative; margin:.75rem 0; }
  .fld input, .fld textarea, .fld select{
    width:100%; box-sizing:border-box; font:inherit;
    padding: .875rem .75rem; border:1px solid #ccc; border-radius:6px;
    background:#fff; outline:none; transition:border-color .15s ease, box-shadow .15s ease;
  }
  .fld textarea{ resize:vertical; }
  
  /* Label “dentro” por defecto */
  .fld label{
    position:absolute; left:.6rem; top:50%; transform:translateY(-50%);
    padding:0 .25rem; background:#fff; color:#666; font-size:.9rem;
    pointer-events:none; transition:all .15s ease;
  }
  
  /* Estado focus*/
  .fld input:focus, .fld textarea:focus, .fld select:focus{
    border-color:#0d6efd; box-shadow:0 0 0 3px rgba(13,110,253,.15);
  }
  
  /* Flotar: con focus o cuando hay contenido*/
  .fld input:focus + label,
  .fld input:not(:placeholder-shown) + label,
  .fld textarea:focus + label,
  .fld textarea:not(:placeholder-shown) + label,
  .fld select:focus + label,
  .fld select.has-value + label{
    top:-.55rem; transform:none; font-size:.75rem; color:#0d6efd;
  }
  
  /* Placeholder hack para inputs/textarea (necesario para :placeholder-shown)*/
  .fld input::placeholder, .fld textarea::placeholder{ color:transparent; }




  .dl-card{
    background:#fff;padding:16px 20px;border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.2);font-family:system-ui,Arial;
    max-width:90vw;min-width:280px
  }
  .dl-title{margin-bottom:6px;font-weight:600}
  .dl-row{display:flex;align-items:center;gap:10px}
  .dl-sub{font-size:12px;color:#444;margin-top:2px}
  
  /* Contenedor de puntos con ancho fijo para que NO cambie el layout */
  .dl-dots{
    width:36px; /* fijo para 3 puntos de 8px + gaps */
    height:10px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .dl-dots span{
    width:8px;height:8px;border-radius:50%;background:#111;display:block;
    animation:dl-bounce 1s infinite ease-in-out;
  }
  .dl-dots span:nth-child(2){ animation-delay:.15s }
  .dl-dots span:nth-child(3){ animation-delay:.30s }
  
  @keyframes dl-bounce{
    0%,80%,100%{ transform:translateY(0); opacity:.45 }
    40%{ transform:translateY(-6px); opacity:1 }
  }