/*Diseno Login*/
.container {
    max-width: 1200px;
}

a {
    text-decoration: none;
    color: black;
}

/*Información de ayuda*/
.informacion-ext {
    text-align: right;
}

.regresar-icon {
    display: inline-block;
    color: #909090;
    font-size: 1rem;
    text-decoration: none;
}
.regresar-icon:hover{
    color: #515151;
}

/* LOGIN */

.fondo-login {
    margin: 0;
    padding: 20px;
    background-color: #e1e1e1;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.formulario {
    width: 90%;
    max-width: 400px;
    background: #ffffff;
    border-radius: 10px;
    padding: 40px;
    padding-bottom: 1px;
    box-sizing: border-box;
    text-align: center;
}

.formulario img {
    margin-top: -20px;
    margin-bottom: 30px;
}

.formulario h1 {
    color: #6c6c6c;
    font-size: 24px;
    margin-bottom: 10px;
}

.separador-login {
    border: none;
    width: 100px;
    height: 3px;
    background-color: black;
    margin: 10px auto;
    margin-bottom: 25px;
}

.formulario form .datos {
    margin-bottom: 20px;
    position: relative;
}

.formulario form input,textarea {
    width: calc(100% - 10px);
    padding: 10px;
    font-size: 16px;
    border: none;
    background: #f0f0f0;
    border-radius: 5px;
    outline: none;
}


.formulario form input:focus {
    background: #ffffff;
}
.formulario form textarea:focus {
    background: #ffffff;
}

.formulario form label {
    position: absolute;
    top: 50%;
    left: 10px;
    color: #adadad;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    transition: .5s;
}

.formulario form input:focus~label {
    top: -10px;
    font-size: 14px;
    color: rgb(0, 0, 0);
}
.formulario form textarea:focus~label {
    top: -10px;
    font-size: 14px;
    color: rgb(0, 0, 0);
}

.formulario form input[type="submit"] {
    width: 100%;
    padding: 10px;
    border: none;
    background: rgb(44, 32, 32);
    border-radius: 25px;
    font-size: 18px;
    color: white;
    cursor: pointer;
    outline: none;
    transition: background 0.3s;
}

.formulario form input[type="submit"]:hover {
    background: #2c2020;
}


.btn-soli-acceso {
    text-decoration: underline !important;
}

@media screen and (max-width: 768px) {
    .formulario {
        width: 80%;
    }
}

@media screen and (max-width: 576px) {
    .formulario {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* SLIDER */
    #slider {
        position: relative;
        max-width: 98%;
        margin: auto;
        overflow: hidden;
        height: 350px;
    }

    .slides {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .slides img {
        min-width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .slides picture {
        min-width: 100%;
        height: 100%;
    }
    @media (max-width: 481px) {
        #slider {
            height: 100%;
            width: 100%;
        }
    }
    

/*Generales*/
h1 {
    font-size: 28px;
}

.active {
    color: #575757 !important;
    font-weight: bold;
    text-decoration: underline;
}

/*Formulario Comparativa Destaco*/
.descripcion,
.caracteristicas {
    font-size: 13px;
}

#modeloDetalles strong{
    font-size: 24px;
}

.bg-formulario {
    background: #F6F6F6;
    border-radius: 15px;
    padding: 50px;
}

.color-enviar {
    background-color: #b4282d;
    color: white;
    padding: 12px 25px 12px 25px;
}

.color-enviar:hover {
    background-color: #e3292f;
    color: white;
}

.color-enviar-yuken {
    background-color: #145294;
    color: white;
    padding: 12px 25px 12px 25px;
}

.color-enviar-yuken:hover {
    background-color: #104277;
    color: white;
}

.color-enviar-nachi {
    background-color: #ef303d;
    color: white;
    padding: 12px 25px 12px 25px;
}

.color-enviar-nachi:hover {
    background-color: #ca2933;
    color: white;
}

.color-enviar-alfa-laval {
    background-color: #244184;
    color: white;
    padding: 12px 25px 12px 25px;
}

.color-enviar-alfa-laval:hover {
    background-color: #1d3368;
    color: white;
}

.color-enviar-fibro {
    background-color: #f57010;
    color: white;
    padding: 12px 25px 12px 25px;
}

.color-enviar-fibro:hover {
    background-color: #df650f;
    color: white;
}

.color-enviar-kipp {
    background-color: #1d498a;
    color: white;
    padding: 12px 25px 12px 25px;
}

.color-enviar-kipp:hover {
    background-color: #2c66bd;
    color: white;
}

.color-enviar-ace {
    background-color: #19467d;
    color: white;
    padding: 12px 25px 12px 25px;
}

.color-enviar-ace:hover {
    background-color: #235EA6;
    color: white;
}

@media (max-width: 480px) {
    .print-data {
        margin-top: 80px;
    }

    .formulario-dest {
        margin-top: 50px;
    }

    .imagen-respo {
        width: 180px;
    }
}

.select2-selection {
    border-radius: 5px !important;
    padding-top: 6px;
    padding-bottom: 33px;
    border-color: #e7e7e7 !important;
}

.select2-dropdown {
    border-radius: 10px !important;
    padding: 10px;
}

.select2-container {
    width: 400px !important;
}

.select2-results__message {
    font-weight: bold;
    color: black;
    text-align: center;
    background-color: #fffad1;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #f7dd22;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    font-size: 14px;
}

.select2-results__message a {
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    font-weight: bold;
    color: black;
    background-color: #feec63;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.select2-results__message a:hover {
    background-color: #e4d66a;
}

/*Data Tables*/

@media screen and (max-width: 1100px) {
    #miTabla td {
        font-size: 13px;
        /* Tamaño de fuente más pequeño para pantallas pequeñas */
    }
}

@media (max-width: 1800px) {
    .card-body {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }

    #miTabla th,
    #miTabla td {
        white-space: nowrap;
        /* Evita que el texto se ajuste automáticamente */
    }
}

/* Intercambio directo o secundario*/

.equivalencia-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 5px 14px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    color: #333;
    width: 100%;
    margin: 10px auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    font-size: 10px;
}

.linea-decorativa-intercambio {
  width: 50px;
  height: 1.8px;
  margin-top: 3px;
  background-color: #000;
}

.equivalencia-wrapper.directo {
    background-color: #e6f4ea;
    border-color: #cbffdf;
    
}

.equivalencia-wrapper.secundario {
    background-color: #fffbe6;
    border-color: #ffeeb6;
    
}

.equivalencia-wrapper.secundario h5{
    text-align: left;
}

.icono-equivalencia {
    max-width: 80px;
    object-fit: contain;
}

/*PERFIL*/

.perfil-container {
    display: flex;
}

.foto-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info-container {
    display: flex;
    flex-direction: column;
    margin-right: 30px
}

#foto-perfil {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    object-fit: cover;
    margin-bottom: 10px;
}

#input-foto {
    width: 100%;
}

.info-container {
    flex: 7;
    /* Ocupa el 70% del espacio disponible */
    max-width: 70%;
    margin-left: 20px;
    /* Ajusta el margen izquierdo según tus preferencias */
}

.foto-container {
    flex: 3;
    /* Ocupa el 30% del espacio disponible */
}

.label-input-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.info-container .inputs-contra input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.bg-color-header {
    background-color: #F5F5F5;
}

/* Para dispositivos pequeños, ajusta el diseño para que sea más responsivo */
@media (max-width: 768px) {
    .perfil-container {
        flex-direction: column;
    }

    .info-container {
        max-width: 100%;
        margin-left: 0;
    }

    .foto-container {
        flex: 1;
        margin-bottom: 20px;
    }
}