/* ============================================
   EUREKASS - ARCHIVO CSS BASE PARA PERSONALIZACIÓN
   Este archivo contiene todas las clases y propiedades CSS
   de la plataforma Eurekass para personalización externa
   
   NOTA: Las variables CSS se definen dinámicamente en PHP
   ============================================ */

/* Valoración */
.ess_valoracion_off { background-image: var(--color-inactivo); }
.ess_valoracion_on { background-image: var(--color-hover); }

.valoracion {
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: left;
}

.valoracion.editable {
    background-color: #fff;
    flex-direction: row-reverse;
}

.valoracion span.editable {
    border: 0;
    width: 25px;
    height: 25px;
}

.valoracion span.editable:hover,
span.editable:nth-child(1):hover ~ span,
span.editable:nth-child(2):hover ~ span,
span.editable:nth-child(3):hover ~ span,
span.editable:nth-child(4):hover ~ span,
span.editable:nth-child(5):hover ~ span {
    cursor: pointer;
    background-image: var(--color-hover);
}

/* Editor de notas */
.note-editable,
.note-editing-area .note-editable h1,
.note-editing-area .note-editable h2,
.note-editing-area .note-editable h3,
.note-editing-area .note-editable h4,
.note-editing-area .note-editable h5,
.note-editing-area .note-editable h6,
.note-editor .note-toolbar .note-style .dropdown-style h1,
.note-editor .note-toolbar .note-style .dropdown-style h2,
.note-editor .note-toolbar .note-style .dropdown-style h3,
.note-editor .note-toolbar .note-style .dropdown-style h4,
.note-editor .note-toolbar .note-style .dropdown-style h5,
.note-editor .note-toolbar .note-style .dropdown-style h6,
.note-editor .note-toolbar .note-style .dropdown-style p,
.note-popover .popover-content .note-style .dropdown-style h1,
.note-popover .popover-content .note-style .dropdown-style h2,
.note-popover .popover-content .note-style .dropdown-style h3,
.note-popover .popover-content .note-style .dropdown-style h4,
.note-popover .popover-content .note-style .dropdown-style h5,
.note-popover .popover-content .note-style .dropdown-style h6,
.note-popover .popover-content .note-style .dropdown-style p {
    color: #555555;
}

/* Header y navegación */
.main-header .navbar .nav>li>a>.label { font-size: 12px; }
.ess_image_view { border: 0px; max-width: 100%; }
.reordered { border: 2px solid red; }
.row { margin-right: 0px; }

/* Sistema de columnas */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, 
.col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7,
.col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7,
.col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    padding-right: 0px;
}

.ess_pad_15 { padding-right: 15px; }

/* Logo y header */
.skin-eurekass .main-header .logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-header .logo-lg img { max-width: 100%; max-height: 50px; }
.main-header .navbar .idioma .dropdown-menu li a { color: #555555; }
.bp-title, .essbderror, .modal-dialog { color: #FFF; }
.rows_cols_bot { width: 0px; }
.rows_det_bot { max-width: 0px; }

/* Carrito */
.item_carrito_menu:hover a { visibility: visible; }
.item_carrito_menu a { visibility: hidden; }

/* Loader */
.loader {
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 150px;
    height: 150px;
    margin: auto;
    filter: drop-shadow(0px 0px 15px #FFF);
}

.loader_o {
    border: 24px solid #A8CF45;
    border-radius: 50%;
    border-top: 24px solid #0258AD;
    border-bottom: 24px solid #0258AD;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

/* Animaciones */
@keyframes girar { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

@keyframes voltear { 
    0% { transform: rotateY(0deg); } 
    100% { transform: rotateY(360deg); } 
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Small boxes */
.small-box .icon { top: -20px; right: 5px; transition: all .4s linear; }
.small-box .icon i { transition: all .4s linear; }
.small-box:hover .icon { font-size: 90px; transition: all .4s linear; }
.small-box:hover .icon i { font-size: 180px; transition: all .4s linear; }
.small-box .icon img { transition: all .4s linear; opacity: 0.8; }
.small-box:hover .icon img { opacity: 0.7 !important; transition: all .4s linear !important; max-width: 100% !important; max-height: 220px !important; height: 220px !important; }

/* Efecto hover resaltado */
.resaltar_hover .inner, .resaltar_hover .box-body, .resaltar_hover .widget-user-header { transition: all .4s linear; }
.resaltar_hover:hover .inner { transition: all .4s linear; margin-top: -85px; }
.resaltar_hover:hover .widget-user-header { transition: all .4s linear; margin-top: -160px !important; }
.resaltar_hover:hover .box-body { transition: all .4s linear; padding-top: 40px; }

/* Menú y árbol */
.menu_tree_icon { margin: 2px 10px 10px 0px; text-align: right; }
.attach { border: 1px solid blue; display: inline-grid; }
.attach img { width: 100px; max-height: 100px; }
.wizard_grupo_id { display: none; }
.wizard_grupo_current { display: block; }
.box-widget p *, .box-widget a * { color: var(--contrast-box-body); }
.box-header>.box-tools { position: unset; }

/* Menú de usuario */
.navbar-nav>.user-menu>.dropdown-menu>li.user-header>a>img {
    z-index: 5;
    height: 90px;
    width: 90px;
    border: 3px solid;
    border-color: transparent;
    border-color: rgba(255,255,255,0.2);
}

/* Sidebar */
.sidebar-menu>li>a>.fa, .sidebar-menu .treeview-menu>li>a>.fa { text-align: right; margin-right: 8px; }

/* Chat directo */
.direct-chat-messages { height: 450px; }
.direct-chat .left>.direct-chat-text { background: #fff; }
.direct-chat-text { display: flow-root; }
.direct-chat .left>.direct-chat-timestamp { color: #000; }
.note-editor.note-frame { margin-bottom: 0px; }

/* Efecto blur (ya definido en PHP) */
/* .box-body, .bg_blur, .box-header, .box-footer, .info-box, .navbar { 
    backdrop-filter: blur(var(--box-blur));
} */

/* Box de ayuda */
.ess_box_help {
    margin-bottom: 17px;
    border-radius: 7px;
    background-color: #f9f9f9;
    border: var(--border-width) solid var(--color-box-body-border);
}

.ess_box_help.col_help { margin-top: -14px; }
.info-box { overflow: overlay; }

/* DataTables */
.dataTables_length select {
    border-color: #d2d6de;
    height: 38px;
    padding: 8px 12px;
    color: #999;
    font-weight: normal;
}

/* Formularios */
.box-body .form-group .control-label { padding-top: 0px; padding-right: 0px; }

/* Tablas de modess */
.ess_modess_tab_exp { width: 100%; }
.ess_modess_tab_exp td { padding: 10px; }
.ess_modess_tab_exp tbody, .ess_modess_tab_exp tfoot { border-bottom: 1px solid #555; }
.ess_modess_hide { display: none; }
.ess_modess_tit, .ess_modess_text { max-width: 50%; }
.ess_modess_number { width: 10%; text-align: right; }
.ess_modess_tab_exp thead td.ess_modess_tit, .ess_modess_tab_exp tfoot td.ess_modess_number { font-weight: bold; }

/* Títulos en timeline */
tbody h1, tbody h2, tbody h3, tbody h4, tbody h5,
.timeline h1, .timeline h2, .timeline h3, .timeline h4, .timeline h5 { color: #555; }

/* Checkbox y enlaces */
.checkbox_info { margin-left: 10px; }
.checkbox_info a, .help-block a, .control-label a, .box-header a,
.box-body h1 a, .box-body h2 a, .box-body h3 a, .box-body h4 a, .box-body h5 a, .ess_a_copy { text-decoration: underline; }

/* Info boxes */
.info-box-icon { background: none; }
table.table_det tbody td { border-bottom: 1px solid #ddd; }
table tbody { color: #555; }

/* Chosen y inputs de búsqueda */
.chosen-container, input[type="search"] { color: #555; }
input[type="search"] { border: 1px solid #cccccc; }

.chosen-container-multi .chosen-choices {
    min-height: 38px;
    padding: 5px 12px 5px 12px;
}

.chosen-container-multi .chosen-choices li.search-choice {
    padding: 10px 20px 10px 10px;
    border-radius: 5px;
}

/* Botones de fila en tablas */
.btn_row_list {
    padding: 5px 5px;
    border: 0px;
    background: transparent;
    visibility: hidden;
}

tr[role='row']:hover .btn_row_list { visibility: visible; }
table.dataTable tbody tr:hover { background-color: blue; }

/* Iconos de info box */
.info-box-icon-jjj { height: 84px; width: 84px; }

/* Sidebar toggle */
.main-header .sidebar-toggle:before { content: url(''); }

.main-header a.logo {
    display: none !important;
}

.sidebar { 
    padding-bottom: 80px;
}
.main-sidebar a.logo {
    margin-top: -50px;
    display: block;
    width: 100% !important;
    background-color: none;
}


.main-sidebar a.logo .logo-lg img {
    width: 100% !important;
    max-width: 230px !important;
    height: auto;
    display: block;
}
            
/* Responsive */
@media (max-width: 767px) {
    .fb_reset iframe {
        margin: 0px -10px 0px 0px;
        bottom: 0px;
    }
    .skin-eurekass .main-header a.logo {
        display: block !important;
    }

    .skin-eurekass .main-sidebar a.logo,
    .skin-eurekass .main-sidebar a.logo .logo-lg,
    .skin-eurekass .main-sidebar a.logo .logo-lg img {
        display: none !important;
    }
}

/* ============================================
   APLICACIÓN DE VARIABLES DE CONTRASTE
   ============================================ */

/* Box header */
.box-header, .box-header h3, .box-header a { 
    color: var(--contrast-box-header) !important; 
}

/* Box body y contenido relacionado */
.box-body, .modal-content, .box-body .form-group .control-label, .box-body label a, .control-label a,
.boess_table_list th, .dataTables_info, .dataTables_filter,
.dataTables_wrapper .dataTables_paginate .paginate_button, .dataTables_wrapper .dataTables_paginate .ellipsis,
.box-footer, .help-block, .box-body h1, .box-body h2, .box-body h3, .box-body h4, .box-body h5,
.checkbox_info, .checkbox_info a, .help-block a, .box-body h1 a, .box-body h2 a, .box-body h3 a,
.box-body h4 a, .box-body h5 a, .ess_a_copy, center, .box-body span.help-block, .dataTables_paginate a {
    color: var(--contrast-box-body) !important;
}

/* Header principal */
.skin-eurekass .main-header .navbar .sidebar-toggle,
.skin-eurekass .main-header .logo,
.skin-eurekass .main-sidebar .logo,
.skin-eurekass .main-header .navbar .nav > li > a {
    color: var(--contrast-maintitle) !important;
}
.skin-eurekass .main-sidebar {
    z-index: 1031;
}

.skin-eurekass .main-header .navbar a:hover,
.dropdown:hover {
    background-color: var(--color-resaltar-bg-hover) !important;
}

.resaltar_hover:hover .box-body {
    border: var(--border-width) solid var(--color-resaltar-border-hover) !important;
    color: var(--contrast-resaltar-hover) !important;
    background-color: var(--color-resaltar-bg-hover) !important;
}


/* Sidebar menu */
.skin-eurekass .sidebar-menu > li > a, .skin-eurekass .sidebar-menu > li.header {
    color: var(--contrast-essmenu) !important;
}

.skin-eurekass .sidebar-menu > li.active > a, .skin-eurekass .treeview-menu > li.active > a {
    background: var(--color-essmenu-bg-ac) !important;
    color: var(--contrast-essmenu-ac) !important;
}

.skin-eurekass .sidebar-menu > li:hover > a, .skin-eurekass .treeview-menu > li > a:hover {
    background: var(--color-essmenu-bg-ho) !important;
    color: var(--contrast-essmenu-ho) !important;
}

.skin-eurekass .treeview-menu > li > a, .skin-eurekass .sidebar-menu > li > .treeview-menu {
    color: var(--contrast-esssubmenu) !important;
}

/* Footer */
.skin-eurekass .main-footer a, .skin-eurekass .main-footer {
    color: var(--contrast-essfooter) !important;
}

/* Botones y elementos interactivos */
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close,
.chosen-container-multi .chosen-choices li.search-choice, .ui-state-default,
.ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .btn-primary,
.ui-state-default span, .ui-state-default .ui-icon {
    border-color: var(--color-btn-border) !important;
    background: var(--color-btn-bg) !important;
    color: var(--contrast-btn) !important;
}

.btn-special:hover { color: var(--contrast-btn) !important; }
.btn-special { color: var(--contrast-btn-hover) !important; }

.chosen-container-multi .chosen-choices li.search-choice:hover, .ui-state-default:hover,
.btn-primary:hover, .btn-default:hover, .ui-state-default:hover span,
.ui-state-default:hover .ui-icon {
    border-color: var(--color-btn-border-hover) !important;
    background: var(--color-btn-bg-hover) !important;
    color: var(--contrast-btn-hover) !important;
}