@font-face {
    font-family: 'Arbutus';
    src: url('fonts/ArbutusSlab-Regular.ttf');
}

@font-face {
    font-family: 'Chivo';
    src: url('fonts/Chivo-Regular.ttf');
}

h1,
h2,
h3,
.arbutus {
    font-family: 'Arbutus', Times, serif;
}
thead{
    border:#B3B3B3 solid 1px;
    border-bottom-color:#F3583B;
    text-transform: uppercase;
}
h2 {
    font-size: 1.6rem;
    padding-right: 4rem;
    color: #173D56;
}
.d-flex {
    display: flex !important;
}
body {
    min-height: 100vh;
  }
main {
    height: 100vh;
    max-height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
}
 .row{
    --bs-gutter-x: 0rem;
}
.ae-contenido{
    font-family: 'Chivo', sans-serif;
}
.btn-color{
    background-color: #F3583B;
    color: #ffffff;
    padding: 5px 25px;
}
.btn-color:hover{
    background-color: #d3442b;
    color: #ffffff;
    padding: 5px 25px;
}
.btn-color2{
    background-color: #173D56;
    color: #ffffff;
    padding: 5px 25px;
}
.btn-color2:hover{
    background-color: #0d2b3f;
    color: #ffffff;
    padding: 5px 25px;
}
.btn-color3{
    background-color: #F7D3CE;
    color: #ffffff;
    padding: 5px 25px;
}
.btn-color3:hover{
    background-color: #f8e2df;
    color: #ffffff;
    padding: 5px 25px;
}
.btn-iniciada{
    background-color: #ffffff;
    color: #F3583B;
    border: #F3583B 1px solid;
    padding: 5px 30px;
}
.btn-iniciada:hover{
    background-color: #f3e2de;
    color: #F3583B;
    border: #F3583B 1px solid;
    padding: 5px 30px;
}
.btn-pendiente{
    background-color: #D9D9D9;
    color: #B3B3B3;
    border: #B3B3B3 1px solid;
    padding: 5px 25px;
}
.btn-pendiente:hover{
    background-color: #d4cbcb;
    color: #B3B3B3;
    border: #B3B3B3 1px solid;
    padding: 5px 25px;
}
.btn-finalizada{
    background-color: #23DA1C;
    color: #ffffff;
    padding: 5px 25px;
}
.btn-finalizada:hover{
    background-color: #13b80d;
    color: #ffffff;
    padding: 5px 25px;
}
.hora-dia{
    font-size: 10px;
    color: #858585;
    font-family: Arial, Helvetica, sans-serif;
}
.ae-lateral{
    background-color: #173D56;
    color: azure;
 }
.ae-menu, p{
    font-family: 'Chivo', sans-serif;
    list-style-type: none;
}
p{
    font-size: 1rem;
    color: #173D56;
    font-family: 'Chivo', sans-serif;
}
.pie{
    background-color: #38332D;
    padding: 3em 0;
    margin: 0;
    cursor: auto;
}
.ae-header{
    background-color: #F7D3CE;
}
.vl {
    border-left: 6px solid #FBCD07;
    height: 20px;
    padding-left: 12px;
  }
.ae-menu a{
    color: azure;
    text-decoration: none;
} 
.whito{
    font-family: 'Arbutus', Times, serif;
    color: azure;
}
.mynav {
    color: #fff;
}
.form-select{
    color: #173D56;
}
.mynav li a {
    color: #fff;
    text-decoration: none;
    width: 100%;
    display: block;
    border-radius: 5px;
    padding: 8px 5px;
}
.mynav li a.active {
    background: rgba(255, 255, 255, 0.2);
}
.mynav li a:hover {
    background: rgba(255, 255, 255, 0.2);
}
.mynav li a i {
    width: 25px;
    text-align: center;
}
.notification-badge {
    background-color: rgba(255, 255, 255, 0.7);
    float: right;
    color: #222;
    font-size: 14px;
    padding: 0px 8px;
    border-radius: 2px;
}
.col-prueba{
    height: 100%;
    overflow-y: auto;
    padding: 0;
}
.grisa{
    color: #757575;
    font-family: 'Arbutus', Times, serif;
    text-decoration: none;
}
.grisa:hover{
    color: #757575;
    font-family: 'Arbutus', Times, serif;
    text-decoration:underline;
}
.circulo1{
    background: #F3583B;
    border-radius: 50%;
    color: #ffffff;
    padding: 3px 9.5px;
    font-family: 'Arbutus', Times, serif;
}
.circulo2{
    background: #F3583B;
    border-radius: 50%;
    color: #ffffff;
    padding: 3px 8px;
    font-family: 'Arbutus', Times, serif;
}

.logout:hover{
    cursor: pointer;
    background-color: #0e2f46;
}
.info{
    height: 29px;
    width: 29px;
    background-image: url(images/ayuda.svg);
    background-repeat: no-repeat;

}
.btn{
    border-radius: .8rem;
}

.color-confirmacion{
    background-color: #F7D3CE;
    color: #F3583B;
}
.confirmacion{
    color: #F3583B;
}
.modal-header{
    border-bottom: 0px;
}
.modal-footer{
    border-top: 0px;
}
.white-text{
    color: #ffffff;
}
.color-informacion{
    background-color: #F3583B;
}
.custom-tooltip {
    --bs-tooltip-bg: #103046;
  }
  .resultado{
    border: 1px solid #F3583B;
    border-radius: 10px 0px 10px 10px;
    height: 100%;
  }
  .fondo-proceso{
    background-color: #F7D3CE;
    border-radius: 10px 0px 10px 10px;
    color: #173D56;
    text-align: center;
  }

  /* Resultados */

  .res-tabla {
    width: 250px;
    display: block;
    padding-bottom: 10px;
}
  .numero-grande{
    font-size: 3em;
    padding: 0%;
    font-weight: bolder;
  }
  .numero-nar{
    color: #F3583B;
    font-size:1.3em;
    font-weight: bolder;
    padding-right: 10px;
  } 
  .numero-ama{
    color: #FBCD07;
    font-size:1.3em;
    font-weight: bolder;
    padding-right: 10px;
  }
  .numero-ver{
    color:#3E9997;
    font-size:1.3em;
    font-weight: bolder;
    padding-right: 10px;
  }
  .numero-azu{
    color:#173D56;
    font-size:1.3em;
    font-weight: bolder;
    padding-right: 10px;
  }

  .cont-nar{
    text-transform: uppercase;
    background-color: #F3583B !important;
    color: white;
    font-size: small;
    display: block;
    width: 200px;
    padding: 4px;
    margin-top: 5px;
  } 
  .cont-ama{
    text-transform: uppercase;
    background-color: #FBCD07 !important;
    font-size: small;
    display: block;
    width: 200px;
    padding: 4px;
    margin-top: 5px;
  }
  .cont-ver{
    text-transform: uppercase;
    background-color:#74b6b5 !important;
    font-size: small;
    display: block;
    width: 200px;
    padding: 4px;
    margin-top: 5px;
  }
  .cont-azu{
    text-transform: uppercase;
    background-color:#173D56 !important;
    font-size: small;
    color: white;
    display: block;
    width: 200px;
    padding: 4px;
    margin-top: 5px;
  }
.cuad-def{
    background-color: #FBCD07 !important;
    width: 250px;
    border-radius: 0px 0px 10px 10px;
}
.amarillo{
    background-color: #FBCD07 !important;
}

.clic, .clic:hover{
    color: #173D56;
    font-weight: bold;
    cursor:pointer;
}
.smaller-text{
    font-size: smaller;
}

.color-w{
    color: #A9CF37;
}

.recuadro {
    border: #F3583B solid 1px;
    padding: 10px 30px;
    font-size: .8rem;
    color: #606060;
    background-color: #F7D3CE;
    margin-bottom: 10px;
  }

.cuenta{
    border-radius: 10px;
    border: 1px solid #B3B3B3;
    background: rgba(251, 205, 7, 0.25);
    flex-shrink: 0;
}
.timer{
    padding-top: 18px;
}
.caja-contacto{
    /*position: fixed; 
    width: 350px;
    height: 350px;
    padding: 10px;
    background-color: #F7D3CE;
    border-radius: 10px 0px 10px 10px;
    color: #173D56;
    display: none;*/

    position: fixed;
   bottom: 20px; /* 🌟 separadito del borde inferior */
    right: 20px;  /* 🌟 separadito del borde derecho */
    width: auto;
    height: auto;
    background-color: rgba(255, 255, 255); 
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.interior-contacto{
    width: 350px;
    height: 350px;
    background-color: #fff; /* fondo blanco */
    border: 10px solid #F7D3CE; /* 🔥 borde rosado alrededor */
    border-radius: 10px 0px 10px 10px;
    color: #173D56;
    padding: 20px;
    box-shadow: 0 0 20px rgb(255, 255, 255);
    
}
.caja-contacto2{
    width: 350px;
    height: 150px;
    padding: 10px;
    background-color: #F7D3CE;
    border-radius: 10px 0px 10px 10px;
    color: #173D56;
}

.accordion-button:not(.collapsed) {
    color: #173D56;
    background-color: transparent;
}

.page-link {
    color: #0d2b3f;
}

.page-link:active{
    background-color:#173D56;
    color: #ffffff;
}