/* Empty Boxes */
.EmptyBox5{ display:block; width:100%; height:5px; overflow:hidden;}
.EmptyBox10{ display:block; width:100%; height:10px; overflow:hidden;}
.EmptyBox20{ display:block; width:100%; height:20px; overflow:hidden;}
.EmptyBox30{ display:block; width:100%; height:30px; overflow:hidden;}
.EmptyBox40{ display:block; width:100%; height:40px; overflow:hidden;}
.EmptyBox50{ display:block; width:100%; height:50px; overflow:hidden;}
.EmptyBox60{ display:block; width:100%; height:60px; overflow:hidden;}
.EmptyBox70{ display:block; width:100%; height:70px; overflow:hidden;}
.EmptyBox80{ display:block; width:100%; height:80px; overflow:hidden;}
.EmptyBox90{ display:block; width:100%; height:90px; overflow:hidden;}
.EmptyBox100{ display:block; width:100%; height:100px; overflow:hidden;}
.EmptyBox110{ display:block; width:100%; height:100px; overflow:hidden;}
.EmptyBox120{ display:block; width:100%; height:100px; overflow:hidden;}
.EmptyBox130{ display:block; width:100%; height:100px; overflow:hidden;}
.EmptyBox140{ display:block; width:100%; height:100px; overflow:hidden;}
.EmptyBox150{ display: block; width: 100%; height:150px; overflow:hidden;}

/* text colors */
.White {
    color: #ffffff;
}
.WhiteBlue {
    color: #E1F5FE;
}
.SoftBlue {
    color: #03A9F4;
}
.Blue {
    color: #0288D1;
}
.Turquoise {
    color: #26C6DA;
}
.SoftGray {
    color: #ECEFF1;
}
.Gray {
    color: #90A4AE;
}
.BoldGray {
    color: #546E7A;
}
.SoftOrange {
    color: #FFCC80;
}
.Orange {
    color: #FB8C00;
}
.SoftGreen {
    color: #A5D6A7;
}
.Green {
    color: #43A047;
}
.LeadenGreen {
    color: #26A69A;
}
.SoftRed {
    color: #EF9A9A;
}
.Red {
    color: #E53935;
}
.Pink {
    color: #FF4081;
}
.SoftPurple {
    color: #CE93D8;
}
.Purple {
    color: #8E24AA;
}
.Yellow {
    color: #F7D100;
}

.Black{color: #212121}

.Fleft{ 
    float:left;
}

.Fright{ 
    float:right;
}

/* button colors */
.BlueTextButton {
    background-color: #ffffff !important;
    color: #0091EA !important;
}
.BlueTextButton .ui-icon {
    color: #0091EA !important;
}
.BlueTextButton.ui-state-hover,
.BlueTextButton.ui-state-focus {
    background-color: #F5F5F5 !important;
}
.BlueTextButton.ui-state-active {
    background-color: #EEEEEE !important;
}
.GrayButton {
    background-color: #ECEFF1 !important;
    color: #455A64 !important;
    border-color: #ECEFF1 !important;
}
.GrayButton.ui-state-hover,
.GrayButton.ui-state-focus {
    background-color: #EEEEEE !important;
    border-color: #EEEEEE !important;
}
.GrayButton.ui-state-active {
    background-color: #bdbdbd !important;
    border-color: #bdbdbd !important;
}
.GreenButton {
    background-color: #66BB6A !important;
    border-color: #66BB6A !important;
}
.GreenButton.ui-state-hover,
.GreenButton.ui-state-focus {
    background-color: #81C784 !important;
    border-color: #81C784 !important;
}
.GreenButton.ui-state-active {
    background-color: #4CAF50 !important;
    border-color: #4CAF50 !important;
}
.RedButton {
    background-color: #E53935 !important;
    border-color: #E53935 !important;
}
.RedButton.ui-state-hover,
.RedButton.ui-state-focus {
    background-color: #F44336 !important;
    border-color: #F44336 !important;
}
.RedButton.ui-state-active {
    background-color: #D32F2F !important;
    border-color: #D32F2F !important;
}
.PinkButton {
    background-color: #FF4081 !important;
    border-color: #FF4081 !important;
}
.PinkButton.ui-state-hover,
.PinkButton.ui-state-focus {
    background-color: #EC407A !important;
    border-color: #EC407A !important;
}
.PinkButton.ui-state-active {
    background-color: #D81B60 !important;
    border-color: #D81B60 !important;
}
.OrangeButton {
    background-color: #FB8C00 !important;
    border-color: #FB8C00 !important;
}
.OrangeButton.ui-state-hover,
.OrangeButton.ui-state-focus {
    background-color: #FF9800 !important;
    border-color: #FF9800 !important;
}
.OrangeButton.ui-state-active {
    background-color: #F57C00 !important;
    border-color: #F57C00 !important;
}
.PurpleButton {
    background-color: #8E24AA !important;
    border-color: #8E24AA !important;
}
.PurpleButton.ui-state-hover,
.PurpleButton.ui-state-focus {
    background-color: #A94CC2 !important;
    border-color: #A94CC2 !important;
}
.PurpleButton.ui-state-active {
    background-color: #6A1B9A !important;
    border-color: #6A1B9A !important;
}
.CyanButton {
    background-color: #00ACC1 !important;
    border-color: #00ACC1 !important;
}
.CyanButton.ui-state-hover,
.CyanButton.ui-state-focus {
    background-color: #26C6DA !important;
    border-color: #26C6DA !important;
}
.CyanButton.ui-state-active {
    background-color: #00ACC1 !important;
    border-color: #00ACC1 !important;
}
.BrownButton {
    background-color: #6D4C41 !important;
    border-color: #6D4C41 !important;
}
.BrownButton.ui-state-hover,
.BrownButton.ui-state-focus {
    background-color: #795548 !important;
    border-color: #795548 !important;
}
.BrownButton.ui-state-active {
    background-color: #5D4037 !important;
    border-color: #5D4037 !important;
}
.RaisedButton {
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
}

/*visibilities according to the platform*/
.ShowOnMobile{ display:none;}
.ShowOnDesktop{ display:inherit;}
.FloatNoneOnMobile{}

/* make auto of element width and/or height attribute on mobile devices with media queries */
.WidAutoOnMobile{}
.HeiAutoOnMobile{}

/* for responsive mode - if you want any ContainerX element has a responsive fluid abilities with media queries you must add this class to your element*/
.Responsive{}
.Responsive50{}
.Responsive100{}

/* Width */
.Wid100{ width:100%;}
.Wid90{ width:90%;}
.Wid80{ width:80%;}
.Wid70{ width:70%;}
.Wid60{ width:60%;}
.Wid50{ width:50%;}
.Wid45{ width:45%;}
.Wid40{ width:40%;}
.Wid30{ width:30%;}

/* Width Special Values */
.Wid33{ width:33.3%;}
.Wid25{ width:25%;}
.Wid20{ width:20%;}
.Wid10{ width:10%;}
.Wid5{ width:5%;}

/* Margins */
.MarTopPerc5{ margin-top:5%;}
.MarTopPerc10{ margin-top:10%;}
.MarTopPerc20{ margin-top:20%;}
.MarTopPerc30{ margin-top:30%;}
.MarTopPerc40{ margin-top:40%;}
.MarTopPerc50{ margin-top:50%;}

.MarAuto{ margin-left:auto; margin-right:auto;}

.MarTop5{ margin-top:5px;}
.MarTop10{ margin-top:10px;}
.MarTop20{ margin-top:20px;}
.MarTop30{ margin-top:30px;}
.MarTop40{ margin-top:40px;}
.MarTop50{ margin-top:50px;}

.MarBot10{ margin-bottom:10px;}
.MarRight10{ margin-right:10px;}
.MarRight20{ margin-right:20px;}

/* Containers */
.Container100{ width:100%; float:left;}
.Container96{ width:96%; float:left;}
.Container90{ width:90%; float:left;}
.Container85{ width:85%; float:left;}
.Container80{ width:80%; float:left;}
.Container75{ width:75%; float:left;}
.Container70{ width:70%; float:left;}
.Container60{ width:60%; float:left;}
.Container50{ width:50%; float:left;}
.Container40{ width:40%; float:left;}
.Container33{ width:33.3%; float:left;}
.Container30{ width:30%; float:left;}
.Container25{ width:25%; float:left;}
.Container20{ width:20%; float:left;}
.Container10{ width:10%; float:left;}
.Container5{ width:5%; float:left;}

.ContainerIndent{display:block; margin:0px auto; padding:10px;}

/* Text Aligns */
.TexAlCenter{ text-align:center;}
.TexAlLeft{ text-align:left;}
.TexAlRight{ text-align:right !important;}

/* Font Sizes */
.Fs9{font-size:9px !important;} 
.Fs10{font-size:10px !important;} 
.Fs11{font-size:11px !important;} 
.Fs12{font-size:12px !important;} 
.Fs13{font-size:13px !important;} 
.Fs14{font-size:14px !important;} 
.Fs15{font-size:15px !important;} 
.Fs16{font-size:16px !important;} 
.Fs17{font-size:17px !important;} 
.Fs18{font-size:18px !important;} 
.Fs19{font-size:19px !important;} 
.Fs20{font-size:20px !important;} 
.Fs21{font-size:21px !important;} 
.Fs22{font-size:22px !important;} 
.Fs23{font-size:23px !important;} 
.Fs24{font-size:24px !important;} 
.Fs25{font-size:25px !important;} 
.Fs26{font-size:26px !important;} 
.Fs27{font-size:27px !important;} 
.Fs28{font-size:28px !important;} 
.Fs29{font-size:29px !important;} 
.Fs30{font-size:30px !important;}
.Fs40{font-size:40px !important;}
.Fs50{font-size:50px !important;}
.Fs60{font-size:60px !important;}
.Fs100{font-size:100px !important;}
.Fs130{font-size:130px !important;}

.DialgoResponsive{}

.mostrarIconosPlus{}

/* Large desktop */
@media (min-width: 960px){
    /*visibilities according to the platform*/
    .ShowOnMobile{display:none; opacity:0;}
    .ShowOnDesktop{display:inherit; opacity:1;}
    .mostrarIconosPlus{display: none;}
}

@media (min-width: 960px) and (max-width:1200px){
    /* responsive support */
    .Responsive{width:33.3%; float:left; margin-left:0px !important; margin-right:0px !important;}
    .Responsive50{width:50%; float:left; margin-left:0px !important; margin-right:0px !important;}
    .Responsive100{width:100%; float:left; margin-left:0px !important; margin-right:0px !important;}

    /* make auto of element width attribute on mobile devices with media queries */
    .WidAutoOnMobile{width:auto !important;}
    .HeiAutoOnMobile{height:auto !important; min-height:50px !important;}
    .mostrarIconosPlus{display: none;}
} 

/* Portrait tablet to landscape and desktop */
@media (min-width: 640px) and (max-width: 960px) {
    /*visibilities according to the platform*/
    .ShowOnMobile{display:inherit; opacity:1;}
    .ShowOnDesktop{display:none; opacity:0;}
    .FloatNoneOnMobile{float:none !important;}

    /* responsive support */
    .Responsive{width:50%; float:left; margin-left:0px !important; margin-right:0px !important;}
    .Responsive50{width:100%; float:left; margin-left:0px !important; margin-right:0px !important;}
    .Responsive100{width:100%; float:left; margin-left:0px !important; margin-right:0px !important;}

    .ContainerIndent{padding:5px;}

    /* make auto of element width attribute on mobile devices with media queries */
    .WidAutoOnMobile{width:auto !important;}
    .HeiAutoOnMobile{height:auto !important; min-height:50px !important;}

    /* font size resetting for responsive modes */ 
    .Fs14{font-size:13px !important;} 
    .Fs15{font-size:14px !important;} 
    .Fs16{font-size:15px !important;} 
    .Fs17{font-size:16px !important;} 
    .Fs18{font-size:16px !important;} 
    .Fs19{font-size:16px !important;} 
    .Fs20{font-size:18px !important;} 
    .Fs21{font-size:18px !important;} 
    .Fs22{font-size:20px !important;} 
    .Fs23{font-size:20px !important;} 
    .Fs24{font-size:22px !important;} 
    .Fs25{font-size:22px !important;} 
    .Fs26{font-size:24px !important;} 
    .Fs27{font-size:24px !important;} 
    .Fs28{font-size:26px !important;} 
    .Fs29{font-size:26px !important;} 
    .Fs30{font-size:28px !important;}
    .Fs40{font-size:30px !important;}
    .Fs50{font-size:35px !important;}
    .Fs60{font-size:40px !important;}
    .Fs100{font-size:60px !important;}
    .Fs130{font-size:70px !important;}

    .DialgoResponsive{width: 60% !important;}
    .mostrarIconosPlus{display: inline;}
}


/* Landscape phone to portrait tablet */
@media (min-width:480px) and (max-width: 640px) {	
    /*visibilities according to the platform*/
    .ShowOnMobile{display:inherit; opacity:1;}
    .ShowOnDesktop{display:none; opacity:0;}
    .FloatNoneOnMobile{float:none !important;}

    /* responsive support */
    .Responsive{width:100%; float:left; margin-left:0px !important; margin-right:0px !important;}
    .Responsive50{width:100%; float:left; margin-left:0px !important; margin-right:0px !important;}
    .Responsive100{width:100%; float:left; margin-left:0px !important; margin-right:0px !important;}

    .ContainerIndent{padding:5px;}

    /* make auto of element width attribute on mobile devices with media queries */
    .WidAutoOnMobile{width:auto !important;}
    .HeiAutoOnMobile{height:auto !important; min-height:50px !important;}

    /* font size resetting for responsive modes */
    .Fs12{font-size:12px !important;} 
    .Fs13{font-size:12px !important;} 
    .Fs14{font-size:13px !important;} 
    .Fs15{font-size:13px !important;} 
    .Fs16{font-size:13px !important;} 
    .Fs17{font-size:14px !important;} 
    .Fs18{font-size:15px !important;} 
    .Fs19{font-size:17px !important;} 
    .Fs20{font-size:17px !important;} 
    .Fs21{font-size:18px !important;} 
    .Fs22{font-size:18px !important;} 
    .Fs23{font-size:20px !important;} 
    .Fs24{font-size:21px !important;} 
    .Fs25{font-size:22px !important;} 
    .Fs26{font-size:23px !important;} 
    .Fs27{font-size:23px !important;} 
    .Fs28{font-size:25px !important;} 
    .Fs29{font-size:25px !important;} 
    .Fs30{font-size:26px !important;}
    .Fs40{font-size:30px !important;}
    .Fs50{font-size:32px !important;}
    .Fs60{font-size:35px !important;}
    .Fs100{font-size:40px !important;}
    .Fs130{font-size:50px !important;}

    .DialgoResponsive{width: 90% !important;}
    .ui-selectonemenu-panel .ui-selectonemenu-list-item {white-space: normal !important;}
    .ui-selectonemenu-panel{width: 80% !important;}
    .mostrarIconosPlus{display: inline;}
}


/* Portrait phones and down */
@media (max-width: 480px) {
    /*visibilities according to the platform*/
    .ShowOnMobile{display:inherit; opacity:1;}
    .ShowOnDesktop{display:none; opacity:0;}
    .FloatNoneOnMobile{float:none !important;}

    /* responsive support */
    .Responsive{width:100%; float:left; margin-left:0px !important; margin-right:0px !important;}
    .Responsive50{width:100%; float:left; margin-left:0px !important; margin-right:0px !important;}
    .Responsive100{width:100%; float:left; margin-left:0px !important; margin-right:0px !important;}

    .ContainerIndent{padding:5px;}

    /* make auto of element width attribute on mobile devices with media queries */
    .WidAutoOnMobile{width:auto !important;}
    .HeiAutoOnMobile{height:auto !important;}

    /* font size resetting for responsive modes */
    .Fs12{font-size:12px !important;} 
    .Fs13{font-size:12px !important;} 
    .Fs14{font-size:13px !important;} 
    .Fs15{font-size:13px !important;} 
    .Fs16{font-size:13px !important;} 
    .Fs17{font-size:14px !important;} 
    .Fs18{font-size:15px !important;} 
    .Fs19{font-size:17px !important;} 
    .Fs20{font-size:17px !important;} 
    .Fs21{font-size:18px !important;} 
    .Fs22{font-size:18px !important;} 
    .Fs23{font-size:20px !important;} 
    .Fs24{font-size:21px !important;} 
    .Fs25{font-size:22px !important;} 
    .Fs26{font-size:23px !important;} 
    .Fs27{font-size:23px !important;} 
    .Fs28{font-size:25px !important;} 
    .Fs29{font-size:25px !important;} 
    .Fs30{font-size:25px !important;}
    .Fs40{font-size:28px !important;}
    .Fs50{font-size:30px !important;}
    .Fs60{font-size:32px !important;}
    .Fs100{font-size:35px !important;}
    .Fs130{font-size:40px !important;}

    .DialgoResponsive{width: 90% !important;}    
    .ui-tabs .ui-tabs-nav li{ width: 100%;}
    .ui-selectonemenu-panel .ui-selectonemenu-list-item {white-space: normal !important;}
    .ui-selectonemenu-panel{width: 70% !important;}
    .mostrarIconosPlus{display: inline;}
}

.FontBold{ font-weight:bold;}
.FontLight{ font-weight:lighter;}
.FontNormal{ font-weight:normal;}

.layout-wrapper .layout-topbar .topbar-menu.topbar-menu-visible {
    display: none !important;    
}

.MargenNegativoMobilListas{ margin-left: -40px; overflow: hidden;}

.ui-datalist .ui-datalist-content {border: none !important;}

.ui-paginator.ui-paginator-bottom {border: none;}

/* Botones "boton-enlace" (h:link con pinta de boton, ej. "Nuevo",
   "Cancelar"): autosuficientes, no dependen del <span> interno que solo
   generan los p:commandButton reales — mismo tamano/forma en cualquier
   pagina, sin tener que repetir este CSS. */
.vrz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
}

.vrz-btn-primary {
    background: #2196f3;
    color: #ffffff;
}

.vrz-btn-primary:hover,
.vrz-btn-primary:focus {
    background: #1769aa;
    color: #ffffff;
    text-decoration: none;
}

.vrz-btn-danger {
    background: #ef4444;
    color: #ffffff;
}

.vrz-btn-danger:hover,
.vrz-btn-danger:focus {
    background: #dc2626;
    color: #ffffff;
    text-decoration: none;
}

/* Link de accion dentro de una fila de tabla (ej. "Editar", "Ver ficha")
   — no es un boton, pero necesita icono+texto alineados y un color/hover
   consistente en vez del azul de link por defecto del navegador. */
.vrz-row-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #2196f3;
    text-decoration: none;
    white-space: nowrap;
}

.vrz-row-link:hover,
.vrz-row-link:focus {
    color: #1769aa;
    text-decoration: underline;
}

.vrz-row-link + .vrz-row-link {
    margin-left: 14px;
}


/* El tema pinta "body .ui-button" de azul y le gana a .vrz-btn-danger: en
   p:commandButton los colores del sistema necesitan la misma especificidad. */
body .ui-button.vrz-btn-danger,
body .ui-button.vrz-btn-danger:enabled:hover,
body .ui-button.vrz-btn-danger:enabled:focus {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
}

body .ui-button.vrz-btn-danger:enabled:hover {
    background: #dc2626;
    border-color: #dc2626;
}

body .ui-button.vrz-btn-primary:enabled:hover {
    background: #1769aa;
    border-color: #1769aa;
}

/* Botones del sistema planos: sin la sombra que el tema pone a .ui-button
   (tambien en los dialogos de confirmacion). */
.vrz-btn,
.vrz-btn.ui-button,
.vrz-btn.ui-button:hover,
.vrz-btn.ui-button:focus,
.ui-confirmdialog .ui-button {
    box-shadow: none !important;
}

.vrz-btn:focus-visible {
    outline: 2px solid #1769aa;
    outline-offset: 2px;
}

/* Aviso de configuracion bloqueada (periodo abierto con ponches). */
.cfg-bloqueo {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-left: 3px solid #FFC107;
    border-radius: 3px;
    background: #ffffff;
}

.cfg-bloqueo > i {
    margin-top: 2px;
    color: #607D8B;
}

.cfg-bloqueo b {
    display: block;
    color: #212121;
    font-size: 14px;
}

.cfg-bloqueo span {
    color: #727272;
    font-size: 12px;
    line-height: 1.45;
}

.cfg-bloqueo a {
    color: #2196f3;
    font-weight: 700;
}

/* Casilla con su texto en una linea (el tema fija .ui-chkbox en 20x20). */
.vrz-check.ui-chkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: auto;
    cursor: pointer;
}

.vrz-check .ui-chkbox-box {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

.vrz-check .ui-chkbox-label {
    width: auto;
    margin: 0;
    color: #212121;
    font-size: 13px;
    line-height: 1.35;
}

/* Editar cargo */
.car-card {
    max-width: 760px;
}

.car-seccion {
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e0e0e0;
    color: #212121;
    font-size: 15px;
    font-weight: 700;
}

.car-campos {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.car-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.car-campo > label {
    color: #212121;
    font-size: 12px;
    font-weight: 700;
}

.car-select.ui-selectonemenu {
    width: 100% !important;
    min-width: 0 !important;
}

.car-ayuda {
    color: #727272;
    font-size: 12px;
}

.car-espacio {
    height: 10px;
}

.car-recargos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 0 28px;
}

/* Cargos, direcciones y departamentos */
.car-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 12px;
}

.car-barra-acciones {
    display: flex;
    align-items: center;
    gap: 16px;
}

.car-enlace {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2196f3 !important;
    font-size: 13px;
    font-weight: 700;
}

.car-nombre {
    color: #212121 !important;
    font-weight: 700;
}

.car-nombre:hover {
    color: #2196f3 !important;
}

.car-nuevo {
    display: flex;
    gap: 10px;
    max-width: 640px;
    margin: 10px 0 14px;
}

.car-nuevo-input.ui-inputfield {
    flex: 1 1 auto;
    min-width: 0;
}

.car-lista {
    max-width: 640px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
}

.car-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
}

.car-fila + .car-fila {
    border-top: 1px solid #e0e0e0;
}

.car-fila-input.ui-inputfield {
    flex: 1 1 auto;
    min-width: 0;
}

body .ui-button.car-guardar,
body .ui-button.car-guardar:enabled:hover {
    border: 1px solid #2196f3;
    background: #ffffff;
    color: #2196f3;
}

body .ui-button.car-guardar:enabled:hover {
    background: #e3f2fd;
}

.car-campo-dir {
    max-width: 320px;
}

@media (max-width: 600px) {
    .car-nuevo {
        flex-direction: column;
    }
}

/* Titulos de grupo del menu (Nomina / Empresa): no son enlaces */
.layout-menu li.eskin-menu-grupo {
    margin-top: 14px;
    pointer-events: none;
}

.layout-menu li.eskin-menu-grupo:first-child {
    margin-top: 4px;
}

.layout-menu li.eskin-menu-grupo > a,
.layout-menu li.eskin-menu-grupo > a:hover {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    background: transparent !important;
    color: #90a4ae !important;
    font-size: 12px;
    font-weight: 700;
    opacity: 1 !important;
    cursor: default;
}

.layout-menu li.eskin-menu-grupo > a .layout-menuitem-icon {
    display: none;
}

/* Pantallas del proceso que todavia no se pueden usar (sin periodo o sin ponches) */
.layout-menu li.eskin-menu-bloqueado > a,
.layout-menu li.eskin-menu-bloqueado > a:hover {
    background: transparent !important;
    color: #6b6b6b !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

.layout-menu li.eskin-menu-bloqueado > a .layout-menuitem-icon,
.layout-menu li.eskin-menu-bloqueado > a i {
    color: #6b6b6b !important;
}

.layout-menu li.eskin-menu-bloqueado > a::after {
    content: "\f023";
    margin-left: auto;
    padding-left: 8px;
    font-family: "Font Awesome 6 Free";
    font-size: 11px;
    font-weight: 900;
}

/* Configuracion -> Feriados */
.fer-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 16px;
    max-width: 640px;
    margin-bottom: 6px;
}

.fer-anio {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fer-anio > label {
    color: #727272;
    font-size: 12px;
}

.fer-anio-select.ui-selectonemenu {
    width: 120px;
}

.fer-fecha.ui-inputfield {
    flex: 0 0 170px;
}

.fer-fila {
    flex-wrap: wrap;
}

.fer-dia {
    flex: 0 0 190px;
    color: #212121;
    font-weight: 700;
}

.fer-dia::first-letter {
    text-transform: uppercase;
}

.fer-nombre {
    flex: 1 1 auto;
    color: #727272;
}

.fer-fila .per-eliminar {
    color: #B91C1C !important;
}

.fer-vacio {
    margin: 0;
    padding: 12px;
}

@media (max-width: 600px) {
    .fer-fecha.ui-inputfield {
        flex-basis: auto;
    }

    .fer-dia {
        flex-basis: 100%;
    }
}

/* Menu "Trabajar en": empresa sin activar, visible pero deshabilitada. */
.eskin-empresa-inactiva {
    cursor: not-allowed !important;
    color: #9e9e9e !important;
    pointer-events: none;
}
.eskin-empresa-inactiva small {
    margin-left: 6px;
    font-size: 11px;
    color: #9e9e9e;
}