:root {
    --NewAzulCronoseg: #0F82D1; /* Azul principal */
    --AzulCronoseg: #00196D; /* Azul propuesto */
}

a:link,
a:visited {
    color: #356a96;
}

#login {
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
    width: 320px;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

input[type="text"]:disabled,
select:disabled,
textarea:disabled,
button:disabled {
    background-color: #eee !important;
}

#editar-jornada input:disabled {
    background-color: #eee !important;
    color: #777;
    border-color: #eeeeee;
}

/* Hacer que los tabs sean escroleables horizontalmente en móvil */
.ajax__tab_header {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex !important;
    font-size: 12px !important;
    background-image: none !important;
    font-family: inherit !important;
}

.ajax__tab_xp,
.ajax__tab_outer,
.ajax__tab_inner {
    font-size: 12px !important;
    background-image: none !important;
    font-family: inherit !important;
}

.ajax__tab_tab {
    padding: 5px !important;
    color: inherit;
    background-image: none !important;
    font-size: 13px;
}

.ajax__tab_body {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    border: 1px solid #eee !important;
    font-size: 14px !important;
    font-family: inherit !important;
    padding: 10px !important;
    overflow: auto !important;
    height: auto !important;
    width: 100% !important;
}

.ajax__tab_active {
    border-top: 3px solid #007bff;
}

.popup,
#ctl00_MainContent_tabPaginas_tabPorAprobar_ucPorAprobar_panShowComentario,
#ctl00_MainContent_panComentario {
    z-index: 9999 !important;
    background-color: white;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4) !important;
    padding: 20px;
    border-radius: 5px;
    min-width: 300px;
    width: min-content;
}

#ctl00_MainContent_tabPaginas_tabPorAprobar_ucPorAprobar_panShowComentario {
    width: 540px;
    overflow-y: hidden !important;
}

.popup input[type="text"],
.popup select,
#editar-jornada select,
.corEmpleado input[type="text"],
.corEmpleado select,
#ctl00_MainContent_cmbFuncionFantasma,
#banddeja select:not(#ctl00_MainContent_lbxEmpleado) {
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-bottom: 5px;
}

/* boton cerrar de los modales */

#btnX,
.popup #btnX,
.popup #btnUpdCCX,
.popup #ctl00_MainContent_tabPaginas_tabJornadas_ucJornadas_btnCancel,
#ctl00_MainContent_tabPaginas_tabJornadas_ucJornadas_btnCerrarT,
#ctl00_MainContent_tabPaginas_tabJornadas_ucJornadas_btnCloseCon,
#ctl00_MainContent_tabPaginas_tabJornadas_ucJornadas_btnCloseAus,
#ctl00_MainContent_tabPaginas_tabLiquidacion_ucLiquidacion_btnCancel,
#ctl00_MainContent_tabPaginas_tabAusencias_mesA_btnCerrarDel,
#ctl00_MainContent_tabPaginas_tabAusencias_mesA_btnCerrarA,
#ctl00_MainContent_tabPaginas_tabAgenda_mesAT_btnCerrarT,
#ctl00_MainContent_tabPaginas_tabAgenda_mesAT_btnCerrarA,
#ctl00_MainContent_tabPaginas_tabExtras_ucExtras_btnCancel,
#ctl00_MainContent_tabPaginas_tabExtras_ucExtras_btnCerrarE,
#ctl00_MainContent_tabPaginas_tabIncon_ucIncon_btnCerrarI,
#btnCloseComentario,
#btnXBonificacion,
#btnCloseShowComentario,
#btnCloseSolicitud {
    position: absolute;
    top: 5px;
    right: 5px;
    font-weight: bold;
    border-radius: 50%;
}

.popup #ctl00_elvEvent_btnRefresh {
    position: absolute;
    left: 10px;
    top: 10px;
}

.modalBackground {
    background-color: #0000004a;
}

.authBackground {
    background-color: black;
}

#cambiar-clave {
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
    width: 405px;
    margin: auto;
}

    #cambiar-clave ul {
        padding-left: 20px;
        color: brown;
    }


/* --------------------PROCESAR------------------- */

#procesar .form label {
    margin-right: 10px;
}

#procesar .tbDiaEmp,
#procesar .tbDiaEmp div {
    width: 100% !important;
}

#ctl00_MainContent_tabPaginas_tabJornadas_ucJornadas_ucEditAusencia_lblTitulo,
#ctl00_MainContent_tabPaginas_tabAusencias_mesA_editA_lblTitulo,
#ctl00_MainContent_tabPaginas_tabAgenda_mesAT_editT_lblTitulo {
    font-size: 15px !important;
}

#procesar .form input[type="radio"],
input[type="checkbox"],
{
    margin-right: 5px;
    vertical-align: text-top;
}

#procesar .form select,
#procesar .form input[type="text"],
#procesar .list input[type="text"],
#ctl00_MainContent_tabPaginas_tab1_panDatosGenerales input[type="text"] {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-bottom: 5px;
}

.list select {
    border: 0;
    font-size: 14px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    margin-bottom: 10px;
}

.list option {
    padding: 5px 10px;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .list option:hover {
        background-color: #eee;
    }

    .list option:checked {
        background-color: #B3D8FF !important; /* Azul claro para la selección */
        color: #000; /* Mantener el texto legible */
    }

#ctl00_MainContent_tabPaginas_tabPendientes_ucPendiente_panComentario {
    padding: 30px;
}

#ctl00_MainContent_tabPaginas_tabPendientes_ucPendiente_txtComentario {
    height: 200px !important;
}

#ctl00_MainContent_lblTotalEmp {
    color: #035c90;
}

#procesar .list input[type="image"] {
    width: 30px !important;
}

#ctl00_MainContent_tabPaginas_header > span {
    background-color: #f5f5f5;
    height: 30px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    margin: 0 3px;
}

#ctl00_MainContent_tabPaginas_tabLiquidacion_ucLiquidacion_panOptions input[type="radio"] {
    margin-right: 5px;
}

.style3 input[type="image"] {
    width: 25px;
    margin: 10px;
}

.style3 tr {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

    .style3 tr td:nth-child(1) {
        width: 100%;
        margin-left: 30px;
        margin-right: 5px;
    }

    .style3 tr td:nth-child(2) {
        order: -1;
    }

#ctl00_MainContent_tabPaginas_tabMarcaciones_ucMarcaciones_lblTotalReg,
#ctl00_MainContent_tabPaginas_tabJornadas_ucJornadas_lblTotalReg,
#ctl00_MainContent_tabPaginas_tabLiquidacion_ucLiquidacion_lblTotalReg,
#ctl00_MainContent_tabPaginas_tabIncon_ucIncon_lblTotalReg,
#ctl00_MainContent_tabPaginas_tabPorAprobar_ucPorAprobar_lblTotalReg,
#ctl00_MainContent_tabPaginas_tabCerrados_ucCerrados_lblTotalReg {
    color: #fff;
    background-color: #17a2b8;
    padding: 0.25em 0.4em;
    font-size: 85%;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    float: right;
    margin-bottom: 5px;
}

#ctl00_MainContent_tabPaginas_tabMarcaciones_ucMarcaciones_dgMarcaciones,
#ctl00_MainContent_tabPaginas_tabJornadas_ucJornadas_dgJor,
#ctl00_MainContent_tabPaginas_tabLiquidacion_ucLiquidacion_dgTotales,
#ctl00_MainContent_tabPaginas_tabAusencias_mesA_tbCalendar .tbDiaEmp table,
#ctl00_MainContent_tabPaginas_tabAgenda_mesAT_tbCalendar .tbDiaEmp table,
#ctl00_MainContent_tabPaginas_tabExtras_ucExtras_dgMarcaciones,
#ctl00_MainContent_tabPaginas_tabIncon_ucIncon_grdResult,
#ctl00_MainContent_tabPaginas_tabJornadas_ucJornadas_ucConceptos_dgConceptos,
#ctl00_MainContent_tabPaginas_tabEquivalencia_ucTurnoEquivalencia_grdResult,
#ctl00_MainContent_tabPaginas_tabReporte_grdReporte,
#ctl00_MainContent_JornadaEdition_grdHistoria,
#ctl00_MainContent_tabPaginas_tabResultado_grdResult,
#ctl00_MainContent_dgMarcaciones,
#ctl00_MainContent_tabPaginas_tabBandeja_ucBandeja_dgJor {
    font-size: smaller !important;
    width: 100% !important;
    border: 0;
    border-color: gainsboro !important;
    text-align: center;
    border-style: inherit !important;
}

#ctl00_MainContent_JornadaEdition_grdHistoria {
    text-align: left !important;
}

.DefaultFooterHeader {
    text-align: center;
}

#ctl00_MainContent_tabPaginas_tabMarcaciones_ucMarcaciones_dgMarcaciones input[type="image"],
#ctl00_MainContent_tabPaginas_tabJornadas_ucJornadas_dgJor input[type="image"] {
    width: 20px;
    margin: 2px;
}

#ctl00_MainContent_tabPaginas_tabMarcaciones_ucMarcaciones_dgMarcaciones input[type="checkbox"],
#ctl00_MainContent_tabPaginas_tabExtras_ucExtras_panOptions input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
}

#ctl00_MainContent_tabPaginas_tabMarcaciones_ucMarcaciones_ucMarcacion_lblInfoMarcacion,
#ctl00_MainContent_tabPaginas_tabJornadas_ucJornadas_ucMarcacion_lblInfoMarcacion,
#ctl00_MainContent_tabPaginas_tabJornadas_ucJornadas_editT_lblInfoAgenda {
    text-align: center;
    display: block;
    border-bottom: 1px solid gainsboro;
    margin: 5px;
    padding-bottom: 5px;
}

#ctl00_MainContent_tabPaginas_tabMarcaciones_ucMarcaciones_ucMarcacion_imgAceptar,
#ctl00_MainContent_tabPaginas_tabMarcaciones_ucMarcaciones_ucEditMarCC_imgAceptar {
    width: 35px !important;
    margin-bottom: -20px;
}

/* procesar jornadas */

#ctl00_MainContent_tabPaginas_tabJornadas {
    margin-top: 15px;
}

#ctl00_MainContent_tabPaginas_tabJornadas_ucJornadas_btnCalcularMain,
#ctl00_MainContent_tabPaginas_tabJornadas_ucJornadas_btnShowJ {
    width: 25px !important;
}

#ctl00_MainContent_tabPaginas_tabJornadas_ucJornadas_panDatosEmpleado {
    border: 1px solid gainsboro;
    padding: 10px;
    background-color: #fbfbfb;
    position: absolute;
}

#ctl00_MainContent_tabPaginas_tabJornadas_ucJornadas_lnkShow {
    text-decoration: none;
}

#ctl00_MainContent_tabPaginas_tabJornadas_ucJornadas_panDatosEmpleado tr td:first-child {
    font-weight: 600;
    padding-right: 10px;
}

#ctl00_MainContent_tabPaginas_tabJornadas_ucJornadas_panAus {
    max-width: 380px;
    margin: auto;
}

    #ctl00_MainContent_tabPaginas_tabJornadas_ucJornadas_panAus textarea,
    #ctl00_MainContent_tabPaginas_tabAusencias_mesA_editA_txtDescripcion,
    #ctl00_MainContent_JornadaEdition_txtHistoria {
        display: block;
        width: 100%;
        height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        margin-bottom: 5px;
    }

.textBoxHora {
    width: 100px !important;
}

#ctl00_MainContent_tabPaginas_tabAusencias_mesA_editA_txtHoraIni,
#ctl00_MainContent_tabPaginas_tabAusencias_mesA_editA_txtHoraFin {
    width: 200px !important;
}

/* resultados */

#ctl00_MainContent_tabPaginas_tabLiquidacion_panLiqui table td > table tr {
    padding-top: 20px;
    display: flex;
}

/* ausencias y agenda */

#ctl00_MainContent_tabPaginas_tabAusencias_mesA_ucDeleteAusencia_btDelete {
    position: absolute;
    right: 50%;
    bottom: 10px;
}

#ctl00_MainContent_tabPaginas_tabAusencias_panMesA h1,
#ctl00_MainContent_tabPaginas_tabAgenda_panMesT h1 {
    font-size: 22px;
    font-weight: 400;
    margin: 15px 0;
}

#ctl00_MainContent_tabPaginas_tabAusencias_mesA_tbCalendar,
#ctl00_MainContent_tabPaginas_tabAgenda_mesAT_tbCalendar {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 4px !important;
    margin-bottom: 15px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    background-color: #f5f5f5 !important;
}

    #ctl00_MainContent_tabPaginas_tabAusencias_mesA_tbCalendar .tableRow {
        text-transform: capitalize;
    }

    #ctl00_MainContent_tabPaginas_tabAusencias_mesA_tbCalendar td,
    #ctl00_MainContent_tabPaginas_tabAgenda_mesAT_tbCalendar td {
        width: 14.28% !important;
        overflow: hidden; /* Evita que el contenido desborde el ancho */
        vertical-align: top;
    }
/* Inconsistencias */

#ctl00_MainContent_tabPaginas_tabIncon_ucIncon_btnShowI,
#ctl00_MainContent_tabPaginas_tabIncon_ucIncon_btnRefresh {
    margin: 15px;
}

/* Tu estilo base mejorado */
.dia-contenedor {
    position: relative; /* REQUERIDO para la marca de agua */
    border-radius: 8px !important;
    border: 1px solid #e0e0e0 !important;
    overflow: hidden;
    transition: all 0.2s ease; /* Cambio suave completo */
    background-color: #ffffff;
    min-height: 120px; /* Un poco más de aire para el número */
}

    .dia-contenedor:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        transform: translateY(-3px);
        border-color: #3182ce !important; /* Resalta el borde al pasar el mouse */
    }

/* LA MARCA DE AGUA */
.dia-marca-agua {
    position: absolute;
    z-index: 1; /* Al fondo */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrado absoluto */
    font-size: 80px; /* Tamaño impacto */
    font-weight: 900;
    color: rgba(0, 0, 0, 0.1); /* Casi invisible (3% de opacidad) */
    font-family: 'Segoe UI', Arial, sans-serif;
    user-select: none;
    pointer-events: none; /* EL CLIC ATRAVIESA EL NÚMERO */
}

/* EL CONTENIDO */
.dia-contenido {
    position: relative;
    z-index: 2; /* Por encima del número */
    background: transparent;
}

/* Si es festivo (clase que puedes añadir desde C#) */
.dia-festivo .dia-marca-agua {
    color: rgba(255, 0, 0, 0.2); /* Rojo muy tenue */
}

/* Contenedor relativo para el header */
.header-dia td {
    position: relative;
}

/* Marca de agua del encabezado */
.header-watermark {
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px; /* Tamaño pequeño para que no estorbe */
    font-weight: bold;
    color: rgba(255, 0, 0, 0.2); /* Rojo tenue */
    z-index: 1; /* Detrás de la tabla de botones */
    pointer-events: none; /* Crucial para que no bloquee los clics */
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
}

@media (max-width: 800px) {
    .dia-marca-agua {
        font-size: 50px;
    }

    .header-watermark {
        font-size: 8px;
    }
}


/* pendientes aspx */

#ctl00_MainContent_panI.popup {
    width: 420px !important;
}

#ctl00_MainContent_JornadaEdition_ucAplicar_lblInfoJornadas {
    word-break: break-word;
}



#ctl00_MainContent_ucFiltro_btnClean,
#ctl00_MainContent_ucFiltro_btnFind,
#ctl00_MainContent_tabPaginas_tab3_ucEmpleadosB_ucFiltro_btnFind,
#ctl00_MainContent_tabPaginas_tab2_imgAddFP {
    width: 30px !important;
}

#ctl00_MainContent_lbxEmpleado {
    border: 0;
    font-size: 14px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    margin-bottom: 10px;
}

    #ctl00_MainContent_lbxEmpleado option {
        padding: 5px 10px;
        background-color: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

#ctl00_MainContent_tabPaginas_tabPendientes_panPendientes table:first-child tr:first-child td table tr {
    display: table-caption;
    margin-left: -30px;
}

    #ctl00_MainContent_tabPaginas_tabPendientes_panPendientes table:first-child tr:first-child td table tr td {
        padding: 10px;
    }

#ctl00_MainContent_tabPaginas_tabPendientes_ucPendiente_btnAprobarListos,
#ctl00_MainContent_tabPaginas_tabPendientes_ucPendiente_btnGuardarComentario,
#ctl00_MainContent_JornadaEdition_btnAplicarTurno,
#ctl00_MainContent_JornadaEdition_btnAprobarPeriodo,
#ctl00_MainContent_JornadaEdition_btnBonificacion,
#ctl00_MainContent_JornadaEdition_btnEliminarCalculos,
#ctl00_MainContent_tabPaginas_tabPorAprobar_ucPorAprobar_btnAprobarListos,
#ctl00_MainContent_btnOK,
#ctl00_MainContent_tabPaginas_tab3_ucEmpleadosB_btnAceptar,
#ctl00_MainContent_tabPaginas_tabGenerarPeriodos_ucGenerar_GenerarPeriodos,
#ctl00_MainContent_btnConsultarSesion,
#ctl00_MainContent_tabPaginas_tabPorAprobar_ucPorAprobar_btnGuardarComentario,
#ctl00_MainContent_JornadaEdition_btnGuardarComentario {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    border-radius: 0.25rem;
}

.GreenAcceptButton {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    border-radius: 0.25rem;
}

#ctl00_MainContent_tabPaginas_tabPendientes_ucPendiente_lblTotalReg,
#ctl00_MainContent_lblTotalEmp,
#ctl00_MainContent_lblTotalRegistros,
#ctl00_MainContent_lblTotalReg {
    color: #fff;
    background-color: #17a2b8;
    padding: 0.25em 0.4em;
    font-size: 85%;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    margin: 10px 0;
    display: inline-block;
}

#ctl00_MainContent_lbtSelected {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.725);
    padding: 0.1em 0.1em;
    font-size: x-small;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.10rem;
    margin: 10px 0;
    display: inline-block;
    width: 100%;
}

#ctl00_MainContent_tabPaginas_tabPendientes_ucPendiente_dgJor,
#ctl00_MainContent_JornadaEdition_grdResult,
#ctl00_MainContent_tabPaginas_tabPorAprobar_ucPorAprobar_dgResult,
#ctl00_MainContent_tabPaginas_tabCerrados_ucCerrados_dgResult,
#ctl00_MainContent_grdResult,
#ctl00_MainContent_tabPaginas_tabAudit_grdAudit,
#ctl00_MainContent_tabPaginas_tabTurnos_ucGrupoTurno_grdResult,
#ctl00_MainContent_tabPaginas_tab2_grdCentroCosto,
#ctl00_MainContent_tabPaginas_tabGenerarPeriodos_ucGenerar_grResult,
#ctl00_MainContent_tabPaginas_tabResult_dgResult,
#ctl00_MainContent_tabPaginas_tabResultados_grdAudit,
#ctl00_MainContent_tabPaginas_tabNovedades_ucAsignacionNovedades_grdResult,
#ctl00_MainContent_tabPaginas_tabResultados_dgResult,
#ctl00_MainContent_tabPaginas_tabAuditoria_grdAudit {
    font-size: smaller !important;
    width: 100% !important;
    border: 0;
    border-color: gainsboro !important;
    text-align: center;
    border-style: inherit !important;
}

#ctl00_MainContent_JornadaEdition_panTotal table table:first-child {
    margin-bottom: 25px;
}

#ctl00_MainContent_JornadaEdition_panTotal table table:nth-child(2) {
    margin-bottom: 10px;
}

#ctl00_MainContent_JornadaEdition_lnkShow {
    text-decoration: none;
}

#ctl00_MainContent_JornadaEdition_panDatosEmpleado,
#ctl00_MainContent_panInconsistencias,
#ctl00_MainContent_tabPaginas_tabPorAprobar_ucPorAprobar_panNovedadFilter,
#ctl00_MainContent_tabPaginas_tabCerrados_ucCerrados_panNovedadFilter,
#ctl00_MainContent_tabPaginas_tabBandeja_ucBandeja_ucRevision_panDatosEmpleado {
    border: 1px solid gainsboro;
    padding: 10px;
    background-color: #fbfbfb;
    position: absolute;
    z-index: 9;
}

#ctl00_MainContent_JornadaEdition_grdResult input[type="image"] {
    width: 22px;
}

/* agendas */

#reporteagenda select,
#webReport input[type="text"],
#webReport input[type="submit"],
#cargos input[type="text"],
#plano select,
#plano input[type="text"] {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-bottom: 5px;
}

#ctl00_MainContent_panUpload {
    margin-top: 30px;
}

/*  empleado */

#ctl00_MainContent_Controller_btnNuevo,
#ctl00_MainContent_Controller_btnAceptar,
#ctl00_MainContent_Controller_btnCancelar,
#ctl00_MainContent_tabPaginas_tabTurnos_ucGrupoTurno_btnAdd,
#ctl00_MainContent_tabPaginas_tab3_ucEmpleadosB_ucFiltro_btnFind,
#ctl00_MainContent_tabPaginas_tab3_ucAsignacionEmpleadoB_ucFiltro_btnFind,
#ctl00_MainContent_tabPaginas_tabBreak_ucTurnoBreak_btnAgregar,
#ctl00_MainContent_tabPaginas_tabEquivalencia_ucTurnoEquivalencia_btnAdd,
#ctl00_MainContent_tabPaginas_tabNovedades_ucAsignacionNovedades_btnAgregar {
    width: 30px !important;
}

#ctl00_MainContent_lbxListado {
    border: 0;
    font-size: 14px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    margin-bottom: 10px;
    width: 100% !important;
}

    #ctl00_MainContent_lbxListado option {
        padding: 5px 10px;
        background-color: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

#cargos #ctl00_MainContent_lbxListado {
    height: 430px;
}

#ctl00_MainContent_tabPaginas_tab1 select,
#ctl00_MainContent_tabPaginas_tab2_panDatosAdicionales select,
#ctl00_MainContent_tabPaginas_tabOrganizacion_panOrganizacion textarea,
#ctl00_MainContent_tabPaginas_tab2_ucHis_panHistoria textarea,
#ctl00_MainContent_tabPaginas_tab3_panEmpleados select,
#ctl00_MainContent_tabPaginas textarea,
#ctl00_MainContent_tbControles select,
#reporteInconsistencias select,
.ReporSesion select,
#ctl00_MainContent_tabPaginas_body select,
#ctl00_MainContent_tabPaginas_body textarea {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-bottom: 5px;
}

.RedCancelButton {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    border-radius: 0.25rem;
}

#ctl00_MainContent_tabPaginas_tab2_ucHis_panHistoria,
#ctl00_MainContent_tabPaginas_tab4_ucHis_panHistoria,
#ctl00_MainContent_tabPaginas_tabHistoria_ucHis_panHistoria,
#ctl00_MainContent_tabPaginas_tabHis_ucHis_panHistoria,
#ctl00_MainContent_tabPaginas_tab3_ucHis_panHistoria {
    border: 0;
}

#ctl00_MainContent_tabPaginas_tabReporte_panReporte {
    width: 100% !important;
}

#ctl00_MainContent_calCalendario_tbCalendar {
    background-color: #f8f8f8 !important;
}

    #ctl00_MainContent_calCalendario_tbCalendar textarea,
    #webReport select,
    #webReport textarea,
    #reportEspe select,
    #cargaEmpleados select,
    #reportEspe input[type="text"],
    #empleadoInner input[type="text"],
    #modMe,
    #modMe input[type="text"],
    .extras select,
    .extras input[type="text"] {
        width: 100%;
        padding: 0.375rem 0.75rem;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        margin-bottom: 5px;
    }

    #ctl00_MainContent_calCalendario_tbCalendar span {
        word-break: break-all;
    }

    #ctl00_MainContent_calCalendario_tbCalendar tr.tableRow {
        background-color: #666;
        color: white;
    }

        #ctl00_MainContent_calCalendario_tbCalendar tr.tableRow td {
            padding: 5px;
        }

    #ctl00_MainContent_calCalendario_tbCalendar .ActDay {
        margin: 10px 0;
    }

#ctl00_MainContent_tabPaginas_tabGenerarPeriodos_ucGenerar_btnDefinitivo,
#ctl00_MainContent_btnElegirEmpleados {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    border-radius: 0.25rem;
}

#ctl00_MainContent_tabPaginas_tab2_rbtAbierto,
#ctl00_MainContent_tabPaginas_tab2_rbtCerrado,
#ctl00_MainContent_tabPaginas_tabGenerarPeriodos_panGenerar input[type="checkbox"],
#ctl00_MainContent_tabPaginas_tabGenerarPeriodos_panGenerar input[type="radio"] {
    margin-right: 5px;
}

#ctl00_MainContent_tabPaginas_tab2_opTodosCC,
#ctl00_MainContent_tabPaginas_tabGenerarPeriodos_ucGenerar_opActivo {
    vertical-align: baseline;
}

#ctl00_MainContent_tabPaginas_tabGenerarPeriodos_ucGenerar_GenerarPeriodos,
#ctl00_MainContent_tabPaginas_tabGenerarPeriodos_ucGenerar_btnDefinitivo {
    height: auto !important;
}

.inline-input-flex-center {
    display: flex;
    align-items: center;
}

    .inline-input-flex-center input {
        margin: 0 3px;
    }

/* reporte inconsistencias */

#ctl00_MainContent_lnkShow {
    text-decoration: none;
}

#webReport label:first-child {
    vertical-align: bottom;
}

#ctl00_MainContent_btnAgregarTabla {
    vertical-align: middle;
}

#webReport #ctl00_MainContent_pnlConstructorselect,
#webReport #ctl00_MainContent_pnlConstructor textarea {
    display: block;
}

#webReport #ctl00_MainContent_Panel3 {
    margin-top: 10px;
}

#punch input[type="radio"] {
    margin: 5px;
}

#ctl00_MainContent_tabPaginas_tab2_ucAsignacionFuncionario1_lbxOrigen,
#ctl00_MainContent_tabPaginas_tab2_ucAsignacionFuncionario1_lbxDestino {
    height: 430px !important;
}

#ctl00_MainContent_tabPaginas_tab1_txtHoraEjecucion,
#ctl00_MainContent_tabPaginas_tab1_txtHoraCierre {
    width: 70px !important;
}

#webReport #ctl00_MainContent_lstTablas {
    height: 30px !important;
}

#ctl00_MainContent_tabPaginas_tabEmpleados_ucAsignarEmpleado_lbxOrigen,
#ctl00_MainContent_tabPaginas_tab3_ucAsignacionEmpleadoB_lbxOrigen,
#ctl00_MainContent_tabPaginas_tab3_ucEmpleadosB_lbxOrigen {
    height: 540px !important;
    margin-left: 20px;
}

#ctl00_MainContent_tabPaginas_tabEmpleados_ucAsignarEmpleado_lblListaOrigen,
#ctl00_MainContent_tabPaginas_tab3_ucAsignacionEmpleadoB_lbxOrigen {
    margin-left: 20px;
}

#ctl00_MainContent_tabPaginas_tab1_txtAsunto,
#ctl00_MainContent_tabPaginas_tab1_txtMensaje {
    height: auto !important;
}

#ctl00_MainContent_tabPaginas_tabMarcaciones_ucMarcaciones_cmbPaginacion {
    width: auto !important;
}

.reportMarca input[type="text"],
.reportMarca select,
.repoemple select,
#ctl00_MainContent_tabPaginas_tabNovedades_ucAsignacionNovedades_txtOrden {
    display: inline-block;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-bottom: 5px;
}

#ctl00_MainContent_tabPaginas_tabLiquidacion_ucLiquidacion_cmbPaginacion {
    width: auto !important;
}

#ctl00_MainContent_tabPaginas_tabLiquidacion_panLiqui,
#ctl00_MainContent_tabPaginas_tabAusencias_panMesA,
#ctl00_MainContent_tabPaginas_tabAgenda_panMesT,
#ctl00_MainContent_tabPaginas_tabConsulta_panConsulta,
#ctl00_MainContent_tabPaginas_tabAusencias_panMesA,
#ctl00_MainContent_tabPaginas_tabAgenda_panMesT,
#ctl00_MainContent_tabPaginas_tabResultado_panResultado,
#ctl00_MainContent_tabPaginas_tabCiclo_panCiclo,
#ctl00_MainContent_panResult,
#ctl00_MainContent_tabPaginas_tabResultados_panResult,
#ctl00_MainContent_tabPaginas_tabAuditoria_panAudit,
#ctl00_MainContent_tabPaginas_tabExtras_panExtras {
    overflow: auto !important;
}

.ok {
    color: green !important;
}

#ctl00_MainContent_lbfMostrarSinGrupo {
    width: 170px;
    display: block;
}

#ctl00_MainContent_tabPaginas_tab1_panDatosGenerales > table {
    display: block;
}

#ctl00_MainContent_tabPaginas_tabPorAprobar_ucPorAprobar_panTitleNovedadFilter {
    margin-top: -35px;
    margin-left: 10px;
}

#ctl00_MainContent_tabPaginas_tabCerrados_ucCerrados_panTitleNovedadFilter {
    display: none;
}

#ctl00_MainContent_tabPaginas_tabAusencias_mesA_panA {
    width: 460px !important;
}

#ctl00_MainContent_tabPaginas_tabBandeja_ucBandeja_ucRevision_PnlTitle ~ div {
    overflow: hidden !important;
}

#datosAdicionales,
#panOrganizacion,
#ctl00_MainContent_tabPaginas_tabCiclo_panCiclo table {
    display: block;
}

#ctl00_MainContent_tabPaginas_tab1_lbtApellidos,
#ctl00_MainContent_tabPaginas_tab1_lbtCodigo,
#ctl00_MainContent_tabPaginas_tab1_lbtTipoDocumento,
#ctl00_MainContent_tabPaginas_tab1_lbtLugarExpedicion,
#ctl00_MainContent_tabPaginas_tab1_lbtTipoCalculo,
#ctl00_MainContent_tabPaginas_tab1_lbtGenero,
#ctl00_MainContent_tabPaginas_tab1_lbtCodContrato,
#ctl00_MainContent_tabPaginas_tab1_lbtSueldo,
#ctl00_MainContent_tabPaginas_tab2_lbtFechaNacimiento,
#ctl00_MainContent_tabPaginas_tab2_lbtTelefono,
#ctl00_MainContent_tabPaginas_tab2_lbtEmail,
#ctl00_MainContent_tabPaginas_tab2_lbtPantalon,
#ctl00_MainContent_tabPaginas_tab2_lbtEstadoActual,
#ctl00_MainContent_tabPaginas_tab2_lbtFechaIngreso,
#ctl00_MainContent_tabPaginas_tab2_lblMotivoRetiro {
    margin-left: 15px;
}

.EmptyDataClass {
    display: none;
}

/* The sidepanel menu */
.sidepanel {
    height: 1000px; /* Specify a height */
    width: 350px; /* 0 width - change this with JavaScript */
    /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 120px;
    left: 0;
    overflow-x: hidden; /* Disable horizontal scroll */
    position: fixed;
    margin-top: 100px;
    scroll-behavior: auto;
    /* padding-top: 60px; Place content 60px from the top */
    transition: 1s; /* 0.5 second transition effect to slide in the sidepanel */
}

    /* The sidepanel links */
    .sidepanel a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

        /* When you mouse over the navigation links, change their color */
        .sidepanel a:hover {
            color: #f1f1f1;
        }

    /* Position and style the close button (top right corner) */
    .sidepanel .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

/* Style the button that is used to open the sidepanel */
.openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border: none;
}

    .openbtn:hover {
        background-color: #444;
    }

.crsToolTip {
    background: rgb(1,88,92);
    background: linear-gradient(180deg, rgba(1,88,92,1) 0%, rgba(1,80,127,1) 0%, rgba(15,130,209,1) 100%);
    color: #FFFFFF;
    font-size: medium;
    font-weight: bold;
    width: 500px;
    height: 100px
}


/* Para navegadores basados en Webkit (Chrome, Safari, nuevo Edge) */
.filter-control::-webkit-input-placeholder {
    font-style: italic;
}

/* Para Firefox (hasta la versión 18) */
.filter-control:-moz-placeholder {
    font-style: italic;
}

/* Para Firefox (desde la versión 19) */
.filter-control::-moz-placeholder {
    font-style: italic;
    opacity: 1; /* A menudo Firefox reduce la opacidad por defecto, esto la restaura */
}

/* Para Internet Explorer 10 y 11 */
.filter-control:-ms-input-placeholder {
    font-style: italic;
}

/* Usamos la clase CSS que definimos anteriormente para el campo de texto */
.filter-control {
    font-style: normal; /* Asegura que el texto que el usuario escribe NO esté en cursiva */
    background-color: #EBF5FF;
}

.grid-scroll-container {
    /* Define la altura que quieres que el GridView tenga antes de desplazarse */
    height: 550px;
    /* Habilita la barra de desplazamiento vertical */
    overflow-y: scroll;
    /* Importante para la alineación del encabezado */
    width: 100%;
    /* Si la tabla es muy ancha (2400px), habilita el desplazamiento horizontal */
    overflow-x: auto;
}

/* 2. Estilo del Encabezado Fijo */
.fixed-header-style {
    /* La clave: fija el encabezado */
    position: sticky;
    /* Lo fija en la parte superior del contenedor scroll-container */
    top: 0;
    /* Asegura que el encabezado se renderice por encima de los datos */
    z-index: 10;
    /* Un color de fondo obligatorio para evitar que los datos se vean a través */
    background-color: #f1f1f1;
}

#dgTotales {
    min-width: 2400px;
}

.input-form {
    width: 100%;
}
/* Contenedor que usa Flexbox para alinear los elementos */
.input-with-button {
    display: flex;
    gap: 5px; /* Espacio entre el campo de texto y el botón */
    width: 90%;
}

/* El TextBox ocupa el espacio restante (es el elemento principal) */
.input-range-text {
    flex-grow: 1; /* Permite que el TextBox se expanda y ocupe todo el espacio disponible */
    width: 100%;
    box-sizing: border-box;
}

/* Estilo del Botón de Puntos Suspensivos */
.range-button {
    /* El botón tiene un tamaño fijo y no crece */
    width: 35px;
    flex-shrink: 0;
    padding: 2px 5px;
    font-weight: bold;
}

.range-table {
    width: 98%;
    font-size: 0.85em;
    border-collapse: collapse;
    border: 1px solid #194371;
    margin: 10px auto;
}

    .range-table th,
    .range-table td {
        border: 1px solid #194371;
        padding: 5px 8px;
        text-align: left;
    }

    .range-table th {
        background-color: #f0f0f0;
        font-weight: bold;
    }

/* Estilo Base para los botones de la agenda */
.btnLnkTurno, .btnLnkAusencia, .btnLnkBonificacion, .btnLnkExtra, .btnLnkDescanso {
    display: block;
    padding: 4px 2px;
    margin: 2px auto;
    width: 90%; /* Deja un pequeño margen a los lados dentro del día */
    border-radius: 6px; /* Bordes redondeados más pronunciados */
    text-align: center;
    text-decoration: none !important;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    white-space: nowrap; /* Evita que el texto salte de línea */
    overflow: hidden; /* Recorta si es demasiado largo */
    text-overflow: ellipsis; /* Pone "..." si no cabe */
}


@media (max-width: 800px) {
    .btnLnkTurno, .btnLnkAusencia, .btnLnkBonificacion, .btnLnkExtra, .btnLnkDescanso {
        width: 100%;
        padding: 0px;
        margin: 0px;
        font-size: 8px;
        font-weight: 400;
    }
}

/* TURNOS - Verde Esmeralda */
.btnLnkTurno {
    background-color: #27ae60;
    color: #ffffff !important;
    border: 1px solid #219150;
}

    .btnLnkTurno:hover {
        background-color: #2ecc71;
        transform: translateY(-1px); /* Efecto de elevación */
        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    }

/* AUSENCIAS - Rojo Coral */
.btnLnkAusencia {
    background-color: #e74c3c;
    color: #ffffff !important;
    border: 1px solid #c0392b;
}

    .btnLnkAusencia:hover {
        background-color: #ff5e4d;
        transform: translateY(-1px);
    }

/* BONIFICACIONES - Naranja*/
.btnLnkBonificacion {
    background-color: darkorange;
    color: white !important;
    border: 1px solid darkorange;
}

    .btnLnkBonificacion:hover {
        background-color: orange;
        transform: translateY(-1px);
    }


/* EXTRAS  - Azul */
.btnLnkExtra {
    background-color: #2980b9;
    color: #ffffff !important;
    border: 1px solid #2471a3;
}

    .btnLnkExtra:hover {
        background-color: #3498db;
        transform: translateY(-1px);
    }

/* DESCANSO - Violeta */
.btnLnkDescanso {
    background-color: #393187;
    color: #ffffff !important;
    border: 1px solid #2471a3;
}

    .btnLnkDescanso:hover {
        background-color: darkmagenta;
        transform: translateY(-1px);
    }


/* Fondo para días normales (blanco/gris) */
.tbDiaEmp {
    width: 100%;
    height: 100%;
}

/* Estilo para Domingos y Festivos */
.diaFestivo {
    background-color: #fff5f5 !important; /* Rojo muy tenue */
    border: 1px solid #feb2b2 !important;
}

.lblWeekdayFestivo {
    color: #e53e3e !important; /* El número del día sí va en rojo fuerte */
    font-weight: bold;
}


/* Contenedor principal */
.dropdown-delete {
    position: relative;
    display: inline-block;
}

/* El menú oculto */
.dropdown-content {
    display: none;
    position: absolute;
    right: 0; /* Alineado a la derecha para que no se salga de la pantalla */
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    border-radius: 4px;
    border: 1px solid #ddd;
    overflow: hidden;
}

    /* Enlaces dentro del menú */
    .dropdown-content a {
        color: #333;
        padding: 10px 14px;
        text-decoration: none;
        display: block;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        transition: background 0.2s;
    }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
            color: #000;
        }

/* Mostrar al pasar el mouse */
.dropdown-delete:hover .dropdown-content {
    display: block;
}

/* Opcional: un pequeño indicador para el botón principal */
.dropbtn:hover {
    opacity: 0.7;
}


.btn-crs {
    height: 50px;
    width: 100%;
    background-color: var(--AzulCronoseg) !important;
    color: white !important;
    border-color: #117a8b !important;
}

    .btn-crs:hover {
        color: var(--AzulCronoseg) !important;
        background-color: transparent !important;
        border-color: var(--AzulCronoseg) !important;
        border-width: 4px !important;
    }

    .btn-crs:focus, .btn-crs.focus {
        color: #fff !important;
        background-color: var(--AzulCronoseg) !important;
        border-color: var(--AzulCronoseg) !important;
        box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
    }

    .btn-crs.disabled, .btn-crs:disabled {
        color: #fff;
        background-color: #17a2b8;
        border-color: #17a2b8;
    }

    .btn-crs:not(:disabled):not(.disabled):active, .btn-crs:not(:disabled):not(.disabled).active,
    .show > .btn-crs.dropdown-toggle {
        color: #fff;
        background-color: #117a8b;
        border-color: #10707f;
    }

        .btn-crs:not(:disabled):not(.disabled):active:focus, .btn-crs:not(:disabled):not(.disabled).active:focus,
        .show > .btn-crs.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
        }

.text-crs {
    color: var(--AzulCronoseg) !important;
}

a.text-crs:hover, a.text-crs:focus {
    color: #0056b3 !important;
}


/* Contenedor relativo para posicionar el control invisible */
.custom-upload-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
}

/* Estilo del botón "Falso" */
.btn-crs-upload {
    background-color: var(--AzulCronoseg);
    color: var(--BlancoPuro);
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    display: inline-block;
}

/* El control REAL de ASP.NET (Se vuelve gigante e invisible) */
.file-hidden {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Totalmente transparente */
    cursor: pointer;
    font-size: 100px; /* Para asegurar que cubra todo el botón */
}

/* Texto del nombre del archivo */
.file-name-text {
    margin-left: 5px;
    font-size: 12px;
    color: #555;
    font-style: italic;
}

/* Efecto Hover */
.custom-upload-container:hover .btn-crs-upload {
    background-color: var(--AzulHover);
}

/* Estilo para escritorio (por defecto) */
.tabla-responsiva td {
    padding: 8px;
    vertical-align: middle;
}

/* MÓVIL (Menos de 800px) */
@media (max-width: 800px) {
    .tabla-responsiva,
    .tabla-responsiva tbody,
    .tabla-responsiva tr,
    .tabla-responsiva td {
        display: block !important; /* Forzamos a que cada celda sea una fila */
        width: 100% !important; /* Ocupan todo el ancho disponible */
        box-sizing: border-box;
    }

        .tabla-responsiva tr {
            margin-bottom: 15px; /* Separación entre grupos de datos */
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }

        .tabla-responsiva td {
            text-align: left !important; /* Alineamos etiquetas e inputs a la izquierda */
            padding: 4px 0 !important;
            border: none !important;
        }

            /* Opcional: Hacer que las etiquetas se vean más pequeñas o en negrita */
            .tabla-responsiva td asp\:Label {
                font-weight: bold;
                font-size: 13px;
                color: #666;
            }
}

/* ESCRITORIO (Ajuste de espaciado) */
@media (min-width: 801px) {
    .tabla-responsiva td {
        width: 25%; /* 4 celdas = 100% (Etiqueta-Control-Etiqueta-Control) */
    }
}

/* Panel de los TabPanel  */
/* Contenedor Principal */
.form-container-360 {
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    max-width: 400px;
    margin-left: 0;
    margin-right: auto;
    align-items: flex-start;
}

/* Fila de formulario */
.form-group-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    align-items: center; /* Centra verticalmente */
}

.footer-row {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #ccc;
    display: flex;
    align-items: center;
}

.numeric-input {
    max-width: 120px;
}

/* Celda de etiqueta */
.form-label-cell {
    flex: 0 0 30%; /* 30% de ancho en desktop */
    font-weight: 600;
    color: #444;
}

/* Celda de control (Input) */
.form-control-cell {
    flex: 1; /* Ocupa el resto del espacio */
    min-width: 250px; /* Evita que se vea muy pequeño */
}

/* Estilos de los inputs */
.form-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s;
}

    .form-input:focus {
        border-color: #0D47A1;
        outline: none;
        box-shadow: 0 0 5px rgba(13, 71, 161, 0.2);
    }

.read-only-data {
    font-style: italic;
    color: #666;
}

.label-read-only {
    font-weight: bold;
    color: #666;
    background-color: #eee;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Ajuste para Checkboxes */
.inline-checks {
    display: flex;
    gap: 30px;
    margin-top: 10px;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.textarea-custom {
    min-height: 120px;
    resize: vertical; /* Permite al usuario estirarlo hacia abajo pero no hacia los lados (para no romper el diseño) */
    line-height: 1.6;
    background-color: #fdfdfd; /* Un tono casi blanco para diferenciarlo de los inputs cortos */
}

.small-input {
    max-width: 150px;
}

    .small-input:focus {
        max-width: 220px !important; /* "Crece" un poquito al activarse, un detalle muy pro */
        border-color: #0D47A1;
        background-color: #ffffff;
        box-shadow: 0 0 8px rgba(13, 71, 161, 0.15);
    }

/* Estilo para el DropDownList (Empresa) */
.form-select-custom {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem !important;
    appearance: none; /* Quita la flecha por defecto del sistema */
}

/* Alineación del Checkbox */
.check-wrapper {
    padding-top: 5px;
}

    .check-wrapper input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

/* Media Query para Móviles */
@media (max-width: 768px) {
    .form-label-cell {
        flex: 0 0 100%;
        margin-bottom: 5px;
    }

    .form-control-cell {
        flex: 0 0 100%;
    }
}


.geo-location {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}

.geo-field {
    flex: 1;
}

.btn-map-link {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
}

    .btn-map-link:hover {
        text-decoration: underline;
    }

.form-divider {
    border: 0;
    border-top: 1px solid #eee;
    margin: 15px 0;
}


.date-picker-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

.date-input {
    max-width: 120px;
}

.time-input {
    max-width: 70px;
    text-align: center;
}

.cal-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.alert-label-red {
    display: block;
    padding: 10px;
    background-color: #ffebee;
    border: 1px solid #ffcdd2;
    margin-bottom: 15px;
    border-radius: 4px;
}

.flex-row {
    display: flex;
    gap: 20px;
    align-items: center;
}


/* Contenedor principal */
.uc-periodo-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    background: #fdfdfd;
    border-radius: 8px;
}

/* Toggle de RadioButtons */
.periodo-status-toggle {
    display: flex;
    gap: 20px;
    margin-bottom: 5px;
    font-weight: 500;
    color: #444;
}

/* Grupo Flotante Base */
.floating-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.floating-label {
    position: absolute;
    left: 10px;
    top: 12px;
    background: white;
    padding: 0 4px;
    color: #888;
    font-size: 14px;
    transition: 0.2s ease all;
    pointer-events: none;
    z-index: 1;
}

/* Inputs y Selects */
.floating-input, .floating-select {
    width: 100%;
    padding: 12px 18px 8px 18px !important; /* 35px a la derecha para el icono */
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 11px;
}

    /* Magia de la etiqueta flotante */
    .floating-input:focus + .floating-label,
    .floating-input:not(:placeholder-shown) + .floating-label,
    .floating-select:focus + .floating-label,
    .floating-select:not([value=""]):not([value="0"]) + .floating-label {
        top: -8px;
        font-size: 12px;
        color: #2196F3;
    }

/* DropDownLists */
.floating-select-cmb {
    width: 100%;
    padding: 2px 18px 2px 18px !important;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 11px;
}

    .floating-select-cmb:focus + .floating-label,
    .floating-select-cmb:not([value=""]):not([value="0"]) + .floating-label {
        top: -8px;
        font-size: 12px;
        color: #2196F3;
        align-self: center;
    }

/* Fila de fechas en una sola línea */
.periodo-dates-row {
    display: flex;
    gap: 0; /* Espacio real entre los dos bloques de fecha */
    width: 100%;
}

/* Bloque individual (Label + Input + Icono) */
.date-field-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Envoltura interna para posicionar el icono */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.date-field {
    flex: 1;
}

/* Icono de calendario dentro del input */
.cal-trigger {
    position: absolute;
    right: 8px;
    width: 18px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

    .cal-trigger:hover {
        opacity: 1;
    }

.full-width {
    width: 100%;
}

/* El icono ahora vive DENTRO del TextBox visualmente */
.cal-icon-inside {
    position: absolute;
    right: 40px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    background: none;
    border: none;
    z-index: 2; /* Asegura que esté sobre el input */
}


.filtro-general-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 400px;
    min-width: 100px;
}

.search-header {
    display: flex;
    align-items: center;
    gap: 50px;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 15px;
}

.btn-search-icon {
    width: 35px;
    height: 35px;
    padding: 5px;
    background: #f0f0f0;
    border-radius: 50%;
    transition: background 0.3s;
}

    .btn-search-icon:hover {
        background: #e0e0e0;
    }

/* Estilo para los Checkbox y Radios inferiores */
.filter-options-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 5px;
}

.mini-label {
    font-size: 11px;
    color: #666;
    display: block;
    margin-bottom: 5px;
}

.chk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 15px;
    border-top: 1px solid #eee;
}

.asignacion-container {
    display: flex;
    gap: 15px;
    align-items: stretch;
    padding: 10px;
    min-height: 600px;
}

.asignacion-col {
    display: flex;
    flex-direction: column;
    background: #fff;
}

.col-filtros {
    flex: 0 0 280px; /* Ancho fijo para los filtros */
}

.col-lista {
    flex: 1; /* Las listas crecen proporcionalmente */
    min-width: 250px;
}

/* Encabezados de columna */
.col-header {
    font-weight: bold;
    font-size: 13px;
    color: #555;
    padding-bottom: 8px;
    height: 35px;
    display: flex;
    align-items: center;
}

.header-with-action {
    justify-content: space-between;
}

/* Estilo de los ListBox */
.custom-listbox {
    width: 100%;
    height: 540px !important;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    font-family: inherit;
    font-size: 12px;
}

/* Columna de botones de acción central */
.asignacion-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-top: 35px; /* Compensa el header de las columnas */
}

.btn-action {
    width: 45px;
    height: 35px;
    cursor: pointer;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-weight: bold;
}

    .btn-action:hover {
        background: #e0e0e0;
    }




/* Contenedor interno de cada columna */
.col-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1; /* Esto empuja el footer hacia abajo si hay espacio */
}

/* Encabezado de la columna */
.col-header {
    font-weight: 600;
    font-size: 13px;
    color: #444;
    padding: 5px 0 10px 0;
    min-height: 35px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

/* Variante para cuando el header tiene botones (como el de Refresh) */
.header-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Ajuste para el botón de refrescar dentro del header */
.btn-refresh-mini {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s ease;
    /*transition: transform 0.3s;*/
    padding: 2px;
    width: 26px;
}

    .btn-refresh-mini:hover {
        opacity: 1;
        transform: rotate(180deg);
    }


/* Contenedor inferior para los botones Aceptar/Cancelar */
.col-footer {
    display: flex;
    justify-content: center;
    padding: 15px 0;
    margin-top: auto; /* Asegura que siempre esté al fondo de la columna */
    text-align: center;
}

/* Contenedor del Panel */
.form-modern-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 15px;
    max-width: 600px; /* O el ancho que prefieras para tu formulario */
}

/* Filas para agrupar campos */
.form-row {
    display: flex;
    gap: 15px;
    width: 100%;
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

/* Estilo para campos de solo lectura */
.field-read-only {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border-left: 4px solid #dee2e6;
    margin-bottom: 5px;
}

.read-only-label {
    font-size: 12px;
    color: #6c757d;
    font-weight: bold;
}

.read-only-value {
    font-size: 13px;
    color: #212529;
    font-family: monospace;
}

/* Ajuste para TextAreas (MultiLine) */
textarea.floating-input {
    resize: vertical;
    min-height: 80px;
}

/* Estilo del Checkbox */
.checkbox-container {
    padding-left: 5px;
}

.custom-checkbox label {
    font-size: 14px;
    color: #495057;
    cursor: pointer;
    margin-left: 8px;
}

.DayStyle {
    font-size: 10px !important;
    font-weight: bold !important;
}

.footer {
    background-color: white; /* Color de fondo suave */
    color: white;
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid white;
    width: 100%;
}


/* Contenedor principal que emula el comportamiento de la fila */
.contenedor-botones-agenda {
    display: flex;
    justify-content: space-around; /* Distribuye los botones con espacio idéntico entre ellos */
    align-items: center; /* Los centra verticalmente */
    width: 100%;
    position: relative;
    z-index: 2;
    height: 100%;
    box-sizing: border-box;
    padding: 0 4px; /* Pequeño margen para que no toquen los bordes de la celda */
}

    /* Cada bloque de botón individual */
    .contenedor-botones-agenda .item-boton {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1; /* Hace que cada bloque ocupe exactamente el mismo ancho sobrante */
        text-align: center;
    }

.info-message {
    font-size: 20px;
    font-weight: bold;
    color: darkred;
}


/* Contenedor principal de la barra de acciones */
.form-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Empuja los bloques hijos a los extremos */
    width: 50%;
    padding: 15px 20px;
    margin-top: 20px;
    background-color: #f8f9fa; /* Fondo gris muy sutil para delimitar la zona */
    border-top: 1px solid #dee2e6; /* Línea divisoria superior limpia */
    border-radius: 0 0 8px 8px; /* Redondeado inferior si está dentro de una tarjeta o modal */
}

/* Bloque Izquierdo: Eliminar */
.action-left {
    flex: 1; /* Toma un espacio equitativo para balancear */
    display: flex;
    justify-content: flex-start;
}

/* Bloque Central: Aceptar */
.action-center {
    flex: 1; /* Toma el mismo espacio para forzar el centrado real */
    display: flex;
    justify-content: center;
}

/* Estilos base y animaciones para los ImageButtons */
.btn-action {
    border: none;
    background: transparent;
    padding: 6px;
    border-radius: 50%; /* Transforma el fondo en un círculo perfecto al pasar el mouse */
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* Transición suave para el hover */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    /* Ancho controlado para que el de eliminar mantenga proporción con el de aceptar */
    .btn-action img,
    input[type="image"].btn-action {
        width: 30px;
        height: 30px;
        object-fit: contain;
    }

/* Efecto Hover para el botón de Aceptar (Tono sutil verde de éxito) */
.btn-submit:hover {
    background-color: #e2f0d9;
    transform: scale(1.1); /* Efecto de micro-escala para dar feedback */
}

/* Efecto Hover para el botón de Eliminar (Tono sutil rojo de alerta) */
.btn-delete:hover {
    background-color: #fce4d6;
    transform: scale(1.1);
}

/* Asegurar clics cómodos en pantallas táctiles */
@media (max-width: 768px) {
    .form-actions-bar {
        padding: 12px 15px;
    }

    .btn-action {
        padding: 10px; /* Área de toque más grande en móviles */
    }
}