:root{
    --primary-color: var(--color-principal);
    --text-color:var(--color-texto);
    --text-color-secondary:var(--color-texto-oscuro);
    --font-family: "Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/*<editor-fold defaultstate="collapsed" desc="FUENTES">*/
body .ui-widget, body .ui-inputfield {
    font-family: var(--font-family);
    font-size:14px;
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="INPUTS">*/
body .ui-inputfield {
    width:100%
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="MENUS">*/
body .ui-menu {
    background: var(--color-principal);
    border: 1px solid var(--color-principal);
}

body .ui-menu.ui-menubar {
    padding:2px;
    background: var(--color-principal);
}

body .ui-menu .ui-menu-list .ui-menu-child {
    background: var(--color-principal);
}

/* Quita separación entre los elementos de un menú */
body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link {
    padding:0.5rem 0.8rem 0.5rem 0.8rem;
}

/* Cambia el color del icono */
body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-icon {
    color:white;
}

/* Cambia el color del texto */
body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-text {
    color: white;
    font-weight: 500;
}

body .ui-menu-list .ui-menuitem.ui-menuitem-active .ui-menuitem-link .ui-icon{
    opacity: 0.65;
}

/* Quita la sombra cuando hace sticky */
body .ui-menu.ui-shadow.ui-sticky {
    box-shadow: none;
}

/* Alinea al medio la flecha de desplegar */
body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-icon-triangle-1-e:last-child {
    color: white;
    vertical-align: middle;
}

/* Cambia el color de la flecha de desplegar */
body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.ui-state-hover .ui-icon-triangle-1-e:last-child{
    color: #495057;
}

.ui-menuitem .ui-icon.ui-icon-triangle-1-s {
    color: #FFFFFF !important;
}

.ui-menuitem:hover .ui-icon.ui-icon-triangle-1-s {
    color: #495057 !important;
}

/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="LINK">*/
body .ui-commandlink, body .ui-link {
    color: var(--color-componente-enlace);
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="TREE">*/
body .ui-tree .ui-commandlink:hover, body .ui-link:hover {
    color: var(--color-principal-oscuro);
}

.ui-tree a {
    color: var(--color-texto);
}

body .ui-tree .ui-tree-container .ui-tree-droppoint.ui-state-hover {
    background: var(--color-principal);
}

body .ui-tree-draghelper {
    border: 1px solid var(--color-principal-oscuro);
    background-color: var(--color-principal) !important;
    border-radius: 6px;
    opacity: 0.4;
    cursor: move;
}

/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="DATATABLE">*/
body .ui-datatable {
    background: var(--color-blanco);
}
body .ui-datatable .ui-datatable-footer,
body .ui-datatable .ui-paginator.ui-paginator-bottom,
body .ui-datatable .ui-datatable-scrollable-header,
body .ui-datatable .ui-datatable-scrollable-footer{
    background: var(--color-gris-muy-claro);
}

body .ui-datatable thead th {
    background: var(--color-gris-muy-claro);
    vertical-align: top;
    padding: 1em 1em;
}
body .ui-datatable thead th .ui-column-title ,
.ui-datatable-reflow .ui-datatable-data td[role="gridcell"] .ui-column-title,
.ui-datatable-reflow .ui-expanded-row-content td .ui-column-title{
    font-weight: 700;
    color: var(--color-texto);
}

/* Esto hace que al hacer reflow, el título de la columna quede en una línea distinta del contenido. */
@media (max-width: 640px) {
    .ui-datatable-reflow .ui-datatable-data td[role="gridcell"] .ui-column-title {
        display:block !important;
    }
}

body .ui-sortable-column {
    vertical-align: top;
}

body .ui-datatable .ui-paginator {
    padding:0;
}

body .ui-datatable .ui-paginator-current{
    font-weight: 700;
    color: var(--color-componente-gris-oscuro);
}

/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="BOTONES">*/
body .ui-button {
    background: var(--color-principal);
    border: 1px solid var(--color-principal);
}

body .ui-button.ui-state-hover {
    background: var(--color-principal-oscuro);
    border: 1px solid var(--color-principal-oscuro);
    color: var(--color-blanco);
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="TOGGLE SWITCH">*/
body .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider {
    background: var(--color-principal);
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="BREADCRUMB">*/
body .ui-breadcrumb {
    border-width: 0px;
    background: transparent;
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="DATAVIEW">*/
body .ui-dataview .ui-dataview-content {
    background:transparent;
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="DIALOG">*/
body .ui-dialog {
    max-width: 90%;
}

body .ui-dialog .ui-dialog-titlebar {
    padding:1rem;
    line-height: 2rem;
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="PANEL">*/
body .ui-panel {
    border-radius:8px;
    box-shadow: var(--sombra);
    display: grid;
    grid-auto-rows: auto;
}

body .ui-panel:has(.ui-panel-titlebar){
    grid-template-rows: 52px auto;
}

body .ui-panel .ui-panel-titlebar {
    font-size:18px;
    border-bottom:0px;
    background:var(--color-blanco);
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="AUTOCOMPLETE">*/
body .ui-autocomplete .ui-autocomplete-multiple-container .ui-autocomplete-token .ui-autocomplete-token-icon:before {
    content: ""
}
/*</editor-fold>*/