@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

* {
    border-style: none;
    border-color: inherit;
    border-width: 0px;
    padding: 0px;
    margin: 0px;
    outline: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    color: #172836;
}

.borrador {
    width: 0px;
    height: 0px;
    clear: both;
}

body {
    background-color: #F5F5F5;
}

.panelUsuario {
    margin: auto;
    margin-top: 20px;
    width: 1084px;
    background-color: transparent;
}

.stlFondo {
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
}

.stlTitulo {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #172836;
    background-color: transparent;
}

.stlTituloEnorme {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 30px;
    font-weight: 900;
    color: #172836;
    background-color: transparent;
}

.stlPanel {
    margin: 0 auto; /* para que salga centrado */
}

.stlLabel {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    background-color: transparent;
    color: #172836;
    line-height: 35px;
}

.stlLogin {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px !important;
    font-weight: 400;
    background-color: #E1E7EA !important;
    color: #172836;
    border-radius: 6px;
    height: 35px !important;
    padding: 0 10px; /* Padding horizontal (izquierda y derecha) */
}

.stlBoton {
    background: #172836;
    border: none;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    padding: 0 20px;
    text-transform: capitalize;
    height: 35px !important;
    border-radius: 6px;
    cursor: pointer;
    width: auto !important;
}

    .stlBoton:hover {
        opacity: 0.5;
    }

.stlEnlaces {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1;
}

.stlEnlaces {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    text-decoration: underline;
    color: #172836;
}

.stlLabelPanel {
    margin-right: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
}

.stlLabelNombre {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.stlBarraColorVerde {
    margin: auto;
    width: 1130px;
    height: 40px;
    background-color: transparent;
}

.stlBotonMenu {
    float: left;
    border-width: 1px;
    border-color: transparent;
    border-style: none solid none none;
    background-color: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: bold;
    /*width: 20%;*/
    height: 40px;
    padding: 10px 23px;
    color: #394044;
}

    .stlBotonMenu:hover {
        float: left;
        border-width: 1px;
        border-color: transparent;
        border-style: none solid none none;
        background-color: #E1E7EA;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 13px;
        font-weight: bold;
        /*width: 20%;*/
        height: 40px;
        padding: 10px 23px;
    }

.stlContainerSubMenu {
    float: left;
    position: relative;
}

.stlSubMenu {
    position: absolute;
    top: 100%;
    width: 100%;
    display: grid;
    gap: 2px;
    background-color: transparent;
    grid-template-rows: 1fr 1fr;
    visibility: hidden;
    z-index: 101;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

    .stlSubMenu > .stlBotonMenu {
        background-color: #8A99B0;
        color: #ffffff;
    }
        .stlSubMenu > .stlBotonMenu:hover {
            opacity: 0.9;
        }

.stlContainerSubMenu:hover > .stlSubMenu {
    visibility: visible;
}

.stlBotonMenuSel {
    float: left;
    border-width: 1px;
    border-color: transparent;
    border-style: none solid none none;
    background-color: #E1E7EA;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: bold;
    /*width: 20%;*/
    height: 40px;
    padding: 10px 23px;
}

.stlGridCabecera {
    background-color: #172836;
    text-align: center;
    border-style: none;
    height: 20px;
}
.stlGridCabecera * {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: white;
}

.stlGridFila {
    border-style: none none solid none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #172836;
    border-width: 1px;
    border-color: #172836;
    text-align: center;
}

.stlGridTextbox {
    font-family: 'Plus Jakarta Sans', sans-serif;
    border-width: 1px;
    border-color: transparent;
    border-style: none solid none solid;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    background-color: #172836;
    text-align: center;
}

.stlGridTextboxIzq {
    font-family: 'Plus Jakarta Sans', sans-serif;
    border-width: 1px;
    border-color: transparent;
    border-style: none solid none solid;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    text-align: left;
    background-color: transparent;
}

.stlGridTextboxDer {
    font-family: 'Plus Jakarta Sans', sans-serif;
    border-width: 1px;
    border-color: transparent;
    border-style: none solid none solid;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    text-align: right;
    background-color: transparent;
}

.stlGridTextboxDias {
    font-family: 'Plus Jakarta Sans', sans-serif;
    border-width: 1px;
    border-color: transparent;
    border-style: none solid none solid;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    background-color: transparent;
}

.stlGridTextboxDes {
    border-style: none none none none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 400;
    text-align: center;
    color: #172836;
    background-color: transparent;
}

.stlGridTextboxDesIzq {
    border-style: none none none none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 400;
    text-align: left;
    color: #172836;
    background-color: transparent;
}

.stlGridFilaSel {
    border-style: none inset solid none;
    border-width: 1px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 400;
    background-color: #17283650;
    text-align: center;
}

.stlGridBorde {
    border: 1px solid #172836;
    font-size: inherit;
}

/* per als links (a) (en el servidor amb el th a no anava (de les capçaleres dels grids (th))), per a quan active ordenar */
a {
    text-decoration: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
}

/*Avisos Color*/

.AvisoVerde {
    text-align: center;
    font-size: 11px;
    background-color: green;
    border-radius: 20px;
    color: white;
    font-weight: 700;
}

.AvisoAmarillo {
    text-align: center;
    font-size: 11px;
    background-color: yellow;
    border-radius: 20px;
    font-weight: 700;
}

.AvisoNaranja {
    text-align: center;
    font-size: 11px;
    background-color: orange;
    border-radius: 20px;
    font-weight: 700;
}

.AvisoRojo {
    text-align: center;
    font-size: 11px;
    background-color: red;
    border-radius: 20px;
    font-weight: 700;
    color: white;
}

.AvisoNegro {
    text-align: center;
    font-size: 11px;
    background-color: black;
    border-radius: 20px;
    font-weight: 700;
    color: white;
}

.AvisoNull {
    text-align: center;
    display: none;
    background-color: transparent;
}

.rojo {
    color: red;
    font-weight: 600;
}

.naranja {
    color: orange;
    font-weight: 600;
}

.stlGridLeft {
    text-align: left;
    padding-left: 25px;
}

.banner {
    text-align: center;
    position: relative;
}

#pager.lic {
    text-align: center;
    width: 1000px;
}

    #pager.lic input {
        font-size: 12pt !important;
        background-color: #172836;
        color: #E1E7EA;
        padding: 4px 10px;
        cursor: pointer;
        transition: all 0.3s ease-out;
    }

        #pager.lic input:hover {
            font-size: 12pt !important;
            background-color: #E1E7EA;
            color: #172836;
        }

.botonBanner {
    position: absolute;
    background-color: transparent;
    width: 1130px;
    left: 20.5%;
    height: 100%;
    z-index: 20;
    bottom: 0px;
    cursor: pointer;
}

.Total {
    border-style: none none solid none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #172836;
    border-width: 1px;
    border-color: #172836;
    text-align: center;
    background-color: #E1E7EA;
}

.Desajustada{
   color: red;
}

.Tabladispositivos > tbody > tr:nth-child(3n+1) {
    background-color:#E1E7EA;
}

.loginRow {
    height: 45px; /* añade espacio vertical */
}


/* Estilos para todos los select/dropdown */
select {
    background-color: #E1E7EA !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    color: #172836 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 15px !important;
    height: 35px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
}

    select:focus,
    input[type="text"]:focus,
    input[type="password"]:focus,
    textarea:focus {
        outline: none !important;
        border-color: transparent !important;
    }

/* Específico para dropdowns ASP.NET */
select {
    cursor: pointer;
}

    /* Estilos para las opciones de los dropdowns */
    select option {
        background-color: transparent;
        color: #172836;
        padding: 8px;
    }

        /* Opción cuando se hace hover (navegadores que lo soportan) */
        select option:hover {
            background-color: #F5F5F5 !important;
            color: #172836;
        }

        /* Opción seleccionada actualmente */
        select option:checked {
            background-color: #172836;
            color: #FFFFFF;
        }

/* Firefox específico para hover */
@-moz-document url-prefix() {
    select option:hover {
        background-color: #F5F5F5;
    }
}

.stlBotonImagen {
    opacity: 1;
    cursor: pointer;
    width: 29px;
    height: 29px;
    vertical-align: middle;
}

    .stlBotonImagen:hover {
        opacity: 0.5;
    }

.stlBotonImagenBlanco {
    opacity: 1;
    cursor: pointer;
    width: 29px;
    height: 29px;
    vertical-align: middle;
    filter: brightness(0) invert(1);
}

    .stlBotonImagenBlanco:hover {
        opacity: 0.5;
    }

/* Fix para Chrome autofill */
input.stlLogin:-webkit-autofill,
input.stlLogin:-webkit-autofill:hover,
input.stlLogin:-webkit-autofill:focus,
input.stlLogin:-webkit-autofill:active {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    -webkit-box-shadow: 0 0 0px 1000px #E1E7EA inset !important;
    box-shadow: 0 0 0px 1000px #E1E7EA inset !important;
    -webkit-text-fill-color: #172836 !important;
}

/* Estilo general del RadioButton */
input[type="radio"] {
    accent-color: #172836; /* Color cuando está seleccionado (navegadores modernos) */
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Para mayor personalización y compatibilidad con navegadores antiguos */
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #172836;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    position: relative;
    background-color: white;
}

    /* Estado cuando está seleccionado */
    input[type="radio"]:checked {
        border-color: #172836;
        background-color: white;
    }

        /* El punto interior cuando está seleccionado */
        input[type="radio"]:checked::before {
            content: '';
            display: block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #172836;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    /* Estado hover */
    input[type="radio"]:hover {
        border-color: #172836;
        box-shadow: 0 0 3px rgba(23, 40, 54, 0.3);
    }

/* Estilo general del CheckBox */
input[type="checkbox"] {
    accent-color: #172836; /* Color cuando está seleccionado (navegadores modernos) */
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Para mayor personalización y compatibilidad con navegadores antiguos */
input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #172836;
    border-radius: 3px; /* Bordes ligeramente redondeados (cambia a 0px si quieres cuadrado) */
    outline: none;
    cursor: pointer;
    position: relative;
    background-color: white;
}

    /* Estado cuando está seleccionado */
    input[type="checkbox"]:checked {
        border-color: #172836;
        background-color: #172836; /* Fondo del color cuando está marcado */
    }

        /* El check (marca) cuando está seleccionado */
        input[type="checkbox"]:checked::before {
            content: '';
            display: block;
            width: 4px;
            height: 8px;
            border: solid white;
            border-width: 0 2px 2px 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -60%) rotate(45deg); /* Crea la forma de check ✓ */
        }

    /* Estado hover */
    input[type="checkbox"]:hover {
        border-color: #172836;
        box-shadow: 0 0 3px rgba(23, 40, 54, 0.3);
    }

#ctl00_Cuerpo_dgDisponibles th a {
    font-size: 11px;
}