/* when screen is minor than 808px */
@media screen and (max-width: 808px) {
    #mes{
        margin-top: 10px;
    }
    .cartel-evento, .titulos {
        text-align: center;
    }
    .titulos p{
        width: 100%;
    }

}


select{
    text-transform: capitalize;
}

.page-header i{
        color: #373391
}

.sendButton{
    background-color: white;
    color: #373391;
    border: 2px solid #373391;
    border-radius: 10px;
}

.sendButton:active{
    background-color: #373391 !important;
    color: white !important;
    border: 2px solid transparent;
}

.sendButton:focus{
    background-color: #373391;
    color: white;
    border: 2px solid transparent;
}

.sendButton:hover{
    background-color: #373391;
    color: white;
    border: 2px solid transparent;
}

.titulo-instalacion {
    position: relative;
    overflow: hidden;
  }
  
  #cabecera {
    position: relative;
    animation: aparecer 2s forwards;
  }
  
@keyframes aparecer {
    from {
        left: -100%;
    }
    to {
        left: 0;
    }
}


@import url("https://fonts.googleapis.com/css2?family=Asap&display=swap");



.reveal {
  position: relative;
  opacity: 0;
}

.reveal.active {
  opacity: 1;
}
.active.fade-bottom {
  animation: fade-bottom 1s ease-in;
}

@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.inputNumber div {
  margin-top: 10px;
}

/* CMH Lo cambio por el siguiente sin important 

.dt-buttons button:not(.btn-outline-info){
  
  background: #fff !important;
  border: 1px solid #28a745 !important;
  color: #28a745 !important;
  padding: 5px 10px !important;
  font-size: 16px  !important;
  border-radius: 5px !important;
  transition: all 0.3s ease-in-out;
}*/

.dt-buttons button:not(.btn-outline-info){
  
  background: #fff ;
  border: 1px solid #28a745 ;
  color: #28a745 ;
  padding: 5px 10px;
  font-size: 16px ;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}
/* when screen is minor 400px */
@media screen and (max-width: 400px) {
  .dt-buttons button:not(.buttons-html5){
    margin-bottom: 15px;
  }
}

.buttons-html5{
  background: #fff !important;
  border: 1px solid #0f98f5 !important;
  color: #0f98f5 !important;
  padding: 5px 10px !important;
  font-size: 16px  !important;
  border-radius: 5px !important;
  transition: all 0.3s ease-in-out;
}

.buttons-print{
  display: none !important;
}

.buttons-html5:hover{
  background: #0f98f5 !important;
  border: 1px solid #0f98f5 !important;
  color: #fff !important;
  transition: all 0.3s ease-in-out;
}

/* CMH Lo cambio por el siguiente sin important 
.dt-buttons button:not(.buttons-html5, .btn-outline-info):hover {
  background: #28a745 !important;
  border: 1px solid #28a745 !important;
  color: #fff !important;
  transition: all 0.3s ease-in-out;
}*/
.dt-buttons button:not(.buttons-html5, .btn-outline-info):hover {
  background: #28a745;
  border: 1px solid #28a745;
  color: #fff;
  transition: all 0.3s ease-in-out;
}

/* DATATABLES BUTTONS - INFORMES */
/* Botón de informes, dropdown desplegable */
    .btn-informes-custom {
        background-color: #005bab !important;
        border-color: #005bab !important;
        color: #fff !important;
        border: none !important;
        padding: 0.375rem 0.75rem !important;
        font-size: 0.875rem !important;
        border-radius: 0.2rem !important;
    }

    .btn-informes-custom:hover {
        background-color: #1a73e8 !important;
        border-color: #1a73e8 !important;
    }

    .dropdown-menu {
        font-size: 14px;
        top: auto !important;
        bottom: auto !important;
        transform: translateY(5px) !important; /* Esto contraresta el espacio del enlace el excel de importación de ejemplo */
    }

    .dropdown-item {
        padding: 4px 16px 4px 16px !important;
    }
    /* Fin de botón informes y menú desplegable */

    .dropdown-informes {
        display: inline-block !important;
        margin-bottom: 0 !important;
        vertical-align: middle;
    }

/* DATATABLES BUTTONS - BORRAR */
.dt-buttons .btn-borrar {
    background-color:indianred !important;
    color: white !important;
    border: none !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.2rem !important;
}
.dt-buttons .btn-borrar:hover {
    background-color: red !important;
    color: white !important;
    border: none !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.2rem !important;
}

/* DATATABLES BUTTONS - IMPORTAR */
.btn-limpiar {
    background-color:#2c86d4 !important;
    color: white !important;
    border: none !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.2rem !important;
}
.dt-buttons .btn-importar {
    background-color:#4d5c69 !important;
    color: white !important;
    border: none !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.2rem !important;
}
.dt-buttons .btn-importar:hover {
    background-color: #2b395e !important;
    color: white !important;
    border: none !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.2rem !important;
}

/* DATATABLES BUTTONS - NUEVO */
.dt-buttons .btn-nuevo {
    background-color:#fed76e !important;
    color: black !important;
    border: none !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.2rem !important;
}
.dt-buttons .btn-nuevo:hover {
    background-color: #ebb82b !important;
    color: black !important;
    border: none !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.2rem !important;
}

/* DATATABLES BUTTONS - EXPORTAR */
.dt-buttons .btn-exportar {
    background-color:#8edd9b !important;
    color: black !important;
    border: none !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.2rem !important;
}
.dt-buttons .btn-exportar:hover {
    background-color: #40963d !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.2rem !important;
}

/* DATATABLES BUTTONS - pdf */
.dt-buttons .btn-pdf {
    background-color:#a0474b !important;
    color: white !important;
    border: none !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.2rem !important;
}
.dt-buttons .btn-pdf:hover {
    background-color: #923035 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.2rem !important;
}
/****** DATATABLES BUTTONS - ********/

.etapaTag{
  background-color: #373391;
  color: white;
  padding: 5px;
  border-radius: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 5px;
  text-align: center;
}

.etapaSolicitud{
  text-wrap: nowrap;
  padding: 10px !important;
}
.etapasContainer{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.BACH {
  background-color: #c45a4c;
}

.Ciclos {
  background-color: #45c4ab;
}

.Otros {
  background-color: #c94fa9;
}

.General {
  background-color: #4c8fc4;
}

.ESO {
  background-color: #e8ae5e;
}

.Primaria {
  background-color: #4cc771;
}

.Infantil {
  background-color: #e06d6d;
}
.tox-notifications-container {
  display: none !important;
}
html{
  overflow-x: hidden !important;
}
.elementAction:hover{
  cursor: pointer;
}
.containerInputMedida{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}
.subCard{
  background-color: rgb(235, 235, 235);
  padding: 10px;
  border-radius: 5px;
}
.sectionDetallesFactura h3{
  color: #4e73df !important;
  font-weight: 700 !important;
}
.sectionDetallesFactura h4 {
  color: #000 !important;
  font-weight: normal !important;
}
.bg-lightGrey{
  background-color: lightgrey !important;
}

.modal.fade .modal-dialog.modal-mas-ancho {
  max-width: 60% !important;
  width: 60%;
}

.monetario {
  text-align: right;
}

/* Avisos que van dentro del flujo del documento: una tarjeta, una tabla o un modal.
   La regla global `.alert` de layout/app.blade.php posiciona TODO .alert en absoluto con
   z-index 2000, porque la usa para los mensajes flash flotantes del layout. Eso hace que
   cualquier .alert en línea se superponga al contenido y, por encima de z-index 1050, al
   propio modal. Esta clase lo devuelve al flujo; basta con position, porque top, right y
   z-index no aplican a un elemento estático. */
.alert.alert-inline {
  position: static !important;
}

/* CONTRASTE DE LAS ETIQUETAS DEL TEMA
   simply_white/pages/css/themes/light.css redefine varias variantes de .badge con
   combinaciones que no llegan al 4,5 de contraste que la WCAG exige en nivel AA para
   texto normal. Todos los ratios de aquí están medidos con color_contraste_ratio()
   de app/helpers.php.

   Se corrigen solo las que fallan. .badge-primary (3,98) y .badge-danger (4,21) se
   dejan como están: en las dos, el blanco ya es el color de texto que más contrasta,
   así que arreglarlas exigiría cambiarles el fondo y no solo el texto. */

/* #fed76e con texto blanco da 1,39: ilegible. Con texto oscuro, 11,14. */
.badge-warning {
  color: #212529;
}

/* #28a745 con texto blanco da 3,13. Se oscurece el verde a #1e7e34, que sube a 5,14 y
   ya es el fondo que el propio tema usa en a.badge-success:hover y .btn-success:active.
   Se prefiere oscurecer el fondo antes que poner texto negro (que daría 4,92) para
   mantener la convención de texto blanco sobre color que siguen danger, info e inverse. */
.badge-success {
  background-color: #1e7e34;
  color: #ffffff;
}

/* #061223 con texto #353f4d da 1,76: oscuro sobre oscuro. Con blanco, 18,77. */
.badge-disable {
  color: #ffffff;
}