/*------------------------------------------------------
--------------------------------------------------------
---------------------- ALI-NEARTE ----------------------
--------------------------------------------------------
-------------------------------------------------------*/

html,
body {
    font-family: Arial, sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    /* overflow-x: hidden;*/
    /*  Esto previene el scroll horizontal pero rompe la pagina y el TO-TOP */
}

body {
    display: flex;
    flex-direction: column;
}

.container {
    /* position: relative;*/
    /*  width: 80%;*/
    /*  margin: 0 auto;*/
    /* padding: 20px;*/
    z-index: 5000;

    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    scrollbar-gutter: stable;
}

.ContenedorWeb {
    display: grid;
    width: 80%;
    grid-template-columns: .25fr 1fr;
    gap: 15px;
    margin: 0 auto;
}

#lateral {
    /* border: var(--LineaBorde);*/
    border-radius: 8px;
    /*padding: 5px;*/
    margin-top: -5px;
}

@media (max-width: 1000px) {
    .ContenedorWeb {
        width: 90%;
    }

    #lateral {
        display: none;
    }

    .ContenedorWeb {
        grid-template-columns: 1fr;
    }
}

#contenido_dinamico {
    /*  margin: 0px auto;*/
    max-width: 900px;
    /* min-height: 600px;*/
    /*  justify-content: center;*/
    /* border: var(--LineaBorde);*/
    border-radius: 8px;
    padding: 6px;
    background-color: var(--content-bg-color);
    /* grid-template-rows: auto auto;*/
    flex: 1;
    -webkit-overflow-scrolling: touch;
    /* para scroll suave en iOS */
    box-shadow: 0 0 10px var(--colorTenue);
    /* Difuminado alrededor del contenedor */
    padding-bottom: 30px;
}




.footer {
    margin: 90px 0 0px 0;
    width: 100%;
    display: grid;
    background-color: var(--ColorFondoFooter);
    /*position: fixed;*/
    bottom: 0;
    /*
    position: relative;
    bottom: 0;
    height: auto;*/
}

.footer p {
    /* border: 1px solid #ccc;
    border-radius: 8px;*/
    margin: 10px;
    justify-items: center;
    text-align: center;
}


/*----------------------- FIN --------------------------*/




/*------------------------------------------------------
--------------------------------------------------------
---------------------- VARIABLES -----------------------
--------------------------------------------------------
-------------------------------------------------------*/


:root {
    --ColorFondoTabla: #ffffff;
    /* Fondo de la tabla: Blanco */
    --ColorTextoTabla: #333333;
    /* Texto de la tabla: Gris oscuro */
    /*  --ColorBordeTabla: #dddddd;*/
    /* Borde de la tabla: Gris claro */
    --ColorCabeceraTabla: #6487ac;
    /* Fondo de la cabecera: Azul */
    --ColorFilaParTabla: #f9f9f9;
    /* Fondo de filas pares: Gris muy claro */
    --ColorFilaImparTabla: #ffffff;
    /* Fondo de filas impares: Blanco */
    --ColorCeldaVacia: #f2f2f2;
    /* Fondo de celdas vacías: Gris claro */
    --ColorTextoCeldaVacia: #999999;
    /* Texto de celdas vacías: Gris medio */
    --BotonesVolver: #ff9800;
    /* Naranja para el botón Volver */
    --BotonesVolverHover: #e68900;
    /* Naranja oscuro para hover */
    --BotonesVolverTexto: #ffffff;
    /* Blanco para el texto del botón Volver */
    --BotonesEliminar: #e74c3c;
    /* Rojo para eliminar */
    --BotonesEliminarHover: #c0392b;
    /* Rojo oscuro para hover */
    --BotonesSubBaja: #45A049;
    /*Verde para botones de ordenamiento */
    --BotonesSubBajaHover: #4CAF50;
    /*Verde oscuro para el hover */
    --DestacadoFormulario: rgba(255, 0, 0, 0.5);
}

/*----------------------- FIN --------------------------*/


form {
    /* width: 50%;*/
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="date"] {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box;
}

#pais,
#sexo,
#sistema,
#changefreq,
#priority {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box;
}

#pares_relacionados_select,
#patologias_relacionadas_select {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box;
    height: 200px;
    font-size: medium;
    -webkit-appearance: none;
    /* Remover estilo predeterminado en WebKit */
    -moz-appearance: none;
    /* Remover estilo predeterminado en Firefox */
    appearance: none;
    /* Remover estilo predeterminado */
    scrollbar-color: rgb(36, 36, 36) rgb(82, 81, 81);
    scrollbar-width: thin;
}


/* Estilo de las opciones del select */
select option {
    /*  background-color: rgb(230, 232, 233);
    Color de fondo de las opciones */
    color: rgb(98 101 101)
        /* Color del texto de las opciones */

}


/*Borde de color, para resaltar que esta activo*/
#pais:focus,
#mensaje:focus,
#sexo:focus,
#sistema,
#sistema:focus,
#tipo:focus,
#pares_relacionados_select,
#patologias_relacionadas_select,
#plan:focus,
#search:focus,
#searchPatologia:focus,
#editSearch:focus,
#par_temporal:focus,
#tipo_temporal:focus,
#microorganismo_temporal:focus,
#descripcion_temporal:focus,
#searchInput:focus,
#nuevo_rol:focus,
#par:focus,
#microorganismo:focus,
#descripcion:focus,
#parEditar:focus,
#tipoEditar:focus,
#microorganismoEditar:focus,
#descricionEditar:focus,
#nombrepatologia:focus,
#sistema:focus,
#ordena:focus,
#sistemaBusqueda:focus,
#metodo_pago:focus,
#loc:focus,
#lastmod:focus,
#changefreq:focus,
#priority:focus,
#userSearch:focus {

    outline-color: green;

}


/*------------------------------------------------------
--------------------------------------------------------
------------------------ SISTEMA -----------------------
--------------------------------------------------------
-------------------------------------------------------*/

#sistemaBusqueda {
    width: 50%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

button {
    /*  width: 50%;*/
    margin: 0 auto;
    margin-top: 5px;
}

@media (max-width: 767px) {

    #sistema {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }
}



input[type="submit"] {
    /* width: 70%;*/
    margin: 0px auto 0px auto;
    background-color: #4CAF50;
    color: white;
    padding: 2%;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #45a049;
}

h1 {
    font-size: 1.8rem;
}

h2 {
    font-size: 1.5rem;
    margin: 0;
    font-weight: bold;
}

h3 {
    font-size: 1.17rem;
    margin: 0;
    font-weight: bold;
}

h4 {
    font-size: 1rem;
    margin: 0;
    text-wrap: balance;

}

h5 {
    font-size: 0.7rem;
    margin: 0;

}

/*
@media only screen and (max-width: 590px) {


    h1 {
        font-size: 1.3em;
    }

    h2 {
        font-size: 1.1em;
        margin: 5px;
        font-weight: bold;
    }

    h3 {
        font-size: 0.9em;
        margin: 8px;
        font-weight: bold;
    }

    h4 {
        font-size: 0.7em;
    }
}*/


p {
    margin: 0;
    text-wrap: pretty;
    font-size: 1rem;
}

.titulo {
    flex-direction: row;
    align-items: center;
    display: flex;
    margin: 30px;
    /*  justify-content: center;*/
}

.sub-titulo {
    flex-direction: row;
    align-items: center;
    display: flex;
    margin: -18px 19px 35px 51px;
    color: var(--ColorTextoCeldaVacia);

}

a {

    /* color: light-dark(#6d7d7f, #efefec);*/
    font-size: 1rem;
    /*margin: 5px;*/
    font-weight: bold;
}




.success {
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    color: #3c763d;
    padding: 10px;
    margin-top: 20px;
}

.success div {
    margin-bottom: 5px;
}

.success strong {
    margin-right: 5px;
    font-weight: bold;
}

.success img {
    display: block;
    margin-top: 5px;
}





.toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1rem;
    margin-top: -3px;
}

#contraseña {
    padding-right: 30px;
    /* Para dejar espacio para el icono */
}




.icon-button {
    background: none;
    border: none;
    padding: 0;
    /*margin: 10px 10PX 0 0;*/
    cursor: pointer;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.icon-button:hover {

    transform: scale(1.2)
}


.botones_editar-patologia {
    display: flex;
    align-content: stretch;
    /* margin-right: 5px; */
    /* grid-row-start: 1; */
    /* grid-row-end: 7; */
    grid-column-start: 0;
    justify-content: center;
    justify-content: space-evenly;
}

table#tablaEditarPatologia {
    margin-top: 15px;
}

@media (max-width: 768px) {
    .botones_editar-patologia {
        justify-content: center;
    }

    .titulo {
        justify-content: center;
    }

    .sub-titulo {
        justify-content: center;
        margin: 0 auto 40px auto;
    }

    table#tablaEditarPatologia {
        margin-top: 15px;
    }

    #tablaEditarPares,
    #tablaEditarPatologia,
    #tablaParesPorSistema,
    .SUSCRIPCIONES {
        word-break: break-all !important;
        /* white-space: nowrap !important;*/
        border-collapse: separate;
        width: 95%;
        /* table-layout: fixed;*/
    }

    #tablaParesPorLetraThead {
        word-break: break-all !important;
        /* white-space: nowrap !important;*/
        border-collapse: separate;
        width: 95%;
        /* table-layout: fixed;*/
    }

    #tablaEditarPares,
    #tablaEditarPatologia,
    #tablaParesPorLetra,
    #tablaParesPorSistema {
        table-layout: fixed;

    }


    /* Estilo para la primera fila */
    #tablaParesPorLetraThead thead tr {
        background-color: var(--ColorFondoTitulo);
        word-break: break-all !important;
        white-space: nowrap !important;
    }
}

#tablaEditarPares,
#tablaEditarPatologia,
#tablaParesPorLetra,
#tablaParesPorSistema,
.SUSCRIPCIONES,
.MENSAJES-ADMIN,
#tablaParesPorUsuario {
    word-break: normal !important;
    max-width: 95%;
    margin: 0 auto;
    margin-bottom: 20px;
}

.ordenar-tabla tbody tr:nth-child(odd) {

    word-break: normal !important;
}




.icon-button-patologia {
    background: none;
    border: none;
    padding: 0;
    display: grid;
    cursor: pointer;
    margin-right: 5px;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
    justify-items: center;
}

.icon-button-patologia:hover {

    transform: scale(1.2)
}



.orden {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fit,
            minmax(290px, 1fr));
    gap: 9px;
    max-width: 900px;
    margin: 30px auto 0 auto;
    justify-items: center;
}



.orden div {

    max-width: 290px;
}


.editar_orden {
    /*display: grid;
    justify-content: center;

    gap: 9px;*/
    max-width: 800px;
    margin: 30px auto 0 auto;
    /* VER */
}



select,
button {
    padding: 4px 7px;
    /* Ajusta el relleno según sea necesario */
    font-size: 0.7rem;
    /* Ajusta el tamaño de fuente según sea necesario */
    border: 1px solid #ccc;
    /* Establece un borde */
    border-radius: 6px;
    /* Ajusta el radio del borde para que sea más redondeado */
    background-color: #f9f9f9;
    /* Establece el color de fondo */

}