@import url('menu/participante.css');
@import url('filtros.css');
@import url('notification.css');

/* Header */
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    font-family: "Open Sans";
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: fixed;
    z-index: 100;
    background-color: white;
}
main {
    margin-top: 244px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - var(--padding-horizontal) * 2 ) !important;
    min-height: calc(100vh - 256px);
    max-width: var(--max-width);
    margin-bottom: 50px;
}
header #header-top-bar {
    display: flex;
    flex-direction: row;
    color: var(--color-header-top-bar);
    background: var(--background-header-top-bar);
    padding: var(--padding-vertical) var(--padding-horizontal);
    width: calc(100% - var(--padding-horizontal) * 2);
    justify-content: center;
    z-index: 1;
}
.header-top-container {
    display: flex;
    flex-direction: row;
    padding: var(--padding-vertical) var(--padding-horizontal);
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: var(--max-width);
}
#header-links .header-top-container {
    background: transparent;
}
.header-3 {
    flex: 1 1 135px;
    padding-top: 7px;
}
.header-logo {
    flex: 1 1 90%;
}
.header-logo .logo a{
    width: 130px;
    display: inline-block;
}
.header-logo .logo a:nth-child(2),
.header-logo .logo div.header-top-container{
    position: relative;
    top: -7px;
    color: white;
    width: 200px;
    border-left: 2px solid white;
    padding: 0;
    padding-left: 30px;
    margin-left: 25px;
    display: inline-block;
}
header #header-top-bar .menu {
    display: flex;
    flex-direction: row;
    color: var(--color-header-top-bar-menu);
    background: var(--background-header-top-bar-menu);
    padding: 5px 0px 0px 0px;
    margin: 0;
    font-size: var(--xxsmall);
    flex: 1 1 200px;
}

header #header-top-bar .menu li {
    list-style: none;
}
header #header-top-bar .menu li:first-child {
    margin-top: 5px;
}
header #header-top-bar .menu a {
    color: var(--color-header-top-bar-menu-a);
}

header #header-top-bar-2
{
    color: var(--color-header-top-bar);
    background-color: var(--background-header-top-bar-2);
    padding: var(--padding-vertical) var(--padding-horizontal);
    width: calc(100% - var(--padding-horizontal) * 2);
    display: flex;
    justify-content: center;
    z-index: 1;
}
header #header-top-bar-2 a{
    color: var(--color-header-top-bar);
}
header #header-top-bar-2 .header-top-container {
    background: transparent;
}
.header-2 {
    width: 100%;
    max-width: var(--max-width);
}
header #header-links {
    display: flex;
    flex-direction: row;
    color: var(--color-header-links);
    background: var(--background-header-links);
    font-size: var(--normal);
    padding: var(--padding-vertical) var(--padding-horizontal);
    width: calc(100% - var(--padding-horizontal)*2);
    justify-content: center;
    padding-top: 0px;
    padding-bottom: 0px;
}
#header-links #header-links-info{
    margin-right: 50px;
}
header #header-links a {
    color: var(--color-links-menu);
}
header #header-links #menu-app-open .fa-bars:before{
    color: white;
}
header #miga-pan{
    background-color: var(--background-miga-pan);
    color: var(--color-miga-pan);
    width: calc(100% - var(--padding-horizontal) * 2);
    padding: var(--padding-vertical) var(--padding-horizontal);
    font-size: var(--xxsmall);
    max-width: var(--max-width);
}
header #miga-pan a i.fas.fa-home {
    font-size: var(--small);
}
header #miga-pan a,
header #miga-pan a:hover
{
    color: var(--color-miga-pan);
}


header #title
{
    color: var(--color-title);
    width: calc(100% - var(--padding-horizontal) * 2);
    padding: var(--padding-vertical) var(--padding-horizontal);
    font-size: var(--large);
    max-width: var(--max-width);
}
header #title .fa-arrow-right:before{
    transform: rotate(45deg);
    display:inline-block;
}


/* Footer */
footer#footer {
    display: flex;
    flex-direction: row;
    color: var(--color-footer);
    background: var(--background-header-top-bar);
    padding: var(--padding-vertical) var(--padding-horizontal);
    width: calc(100% - var(--padding-horizontal) * 2);
    font-size: var(--xxsmall);
    justify-content: space-between;
    align-items: center;
}

footer#footer a {
    padding: 10px;
    color: var(--color-footer-a);
}

footer#footer a:hover {
    color: var(--color-footer-a);
}


.separator {
    padding: 5px 20px 0 20px;
}


a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.h1-hidden {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

.cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* o 'contain', según el comportamiento deseado */
    object-position: center;
    display: block;      /* elimina posible espacio en línea */
}

#loading {
    display: none;
}

header section#header-top-bar ul.menu li > #select-language,
header section#header-top-bar ul.menu li > #select-language ~ span.select2-container span.select2-selection--single
{
    color: var(--text-light);
    background: var(--background-header-top-bar) !important;
    border: unset !important;
    width: 50px;
}

header section#header-top-bar ul.menu li > #select-language ~ span.select2-container span.select2-selection--single b{
    border-color: #ffffff transparent transparent transparent;
}
header section#header-top-bar ul.menu li > #select-language option,
header section#header-top-bar ul.menu li > #select-language ~ span.select2-container span.select2-selection--single span.select2-selection__rendered
{
    color: var(--text-light);
    background: var(--background-header-top-bar);
    padding: unset;
}

header section#header-top-bar ul.menu li > #select-language option:hover {
    color: var(--text-light);
    background: var(--background-header-top-bar);
    padding: unset;
}

header section#header-top-bar div.header-3 a
{
    color: var(--color-header-top-bar-menu-a);
}

footer#prefooter .back > a
{
    color: var(--color-header-top-bar-menu-a);
    text-decoration: none;
}

.alert {
    position: relative;
    border-radius: 5px;
    width: 100%;
    padding: 15px 40px 15px 45px;
    max-width: var(--max-width);
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
}

.alert-error, .alert-danger {
    border-left: 4px solid red;
    background: #FFD6D6;
    color: #7f0000;
}

.alert-success {
    border-left: 4px solid green;
    background: #D6FFD6;
    color: #005700;
}

.alert-warning {
    border-left: 4px solid orange;
    background: #FFF3D6;
    color: #8a5700;
}

.alert-info {
    border-left: 4px solid blue;
    background: #D6E9FF;
    color: #003172;
}

.alert-icon {
    margin-right: 10px;
    font-size: 18px;
    position: absolute;
    left: 15px;
}

.close-alert {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 16px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.close-alert:hover {
    opacity: 1;
}

small.help {
    color: var(--primary);
    margin-left: 5px;
}

section#header-links div#header-links-info img
{
    height: 37px;
    width: 37px;
    top: -26px;
    position: absolute;
}

footer#footer .logo img{
    height: 32px;
}

.alert {
    box-sizing: border-box;
    max-width: var(--max-width);
    margin-bottom: 20px;
}

/* Tooltip Home */
 .tooltip {
     position: relative;
     display: inline-block;
 }

.tooltip .tooltiptext {
    visibility: hidden;
    width: 300px;
    background-color: var(--background-category-workers-icon);
    color: #474747;
    text-align: center;
    padding: 0px 0px 5px 0px;
    border-radius: 0px;
    position: absolute;
    z-index: 1;
    top: 13px;
    left: -34px;}
.tooltip-header {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: left;
    height: 40px;
}
.tooltiptext .tooltip-header .tooltip-icon{
    position: relative;
    width: 56px;
    display: inline-block;
    height: 40px;
    float: left;
}
.tooltiptext .tooltip-header .tooltip-icon img{
    width: 57px;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
.tooltiptext .tooltip-header .tooltip-title{
    position: relative;
    display: inline-block;
    height: 25px;
    top: 0px;
    width: calc(100% - 71px);
    font-size: 12px;
    float: left;
    padding: 3px 0px 0px 7px;
    color: var(--color-header-title);
    font-weight: 600;
}
.tooltip-body{
    padding: 0px 10px 5px 10px;
    text-align: left;
}
#menu-user ul {
    position: absolute;
    background-color: #f9f9f9;
    min-width: 250px !important;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding: 0px !important;
    z-index: 2;
    right: calc(100% - 28.58px);
    margin-top: 11px;
}
header #header-links #menu-user a {
     color: var(--color-header-links);
     font-size: 18px;
 }

body > header > section#title::before{
    font-family: "Font Awesome 6 Free";
    content: "\f061"; /* Flecha derecha */
    font-weight: 900;
    color:var(--primary);
    transform: rotate(45deg);
    display:inline-block;
    position:relative;
    font-size: var(--large);
}



#index > .select2-container .select2-search{
    display: none;
}
#index > .select2-container .select2-search{
    display: none;
}
#index > .select2-container .select2-results{
    background-color: black;
}

/*header section#header-top-bar ul.menu li > #select-language ~ span.select2-container span.select2-selection--single span.select2-selection__rendered {
    color: var(--text-light);
    background: var(--background-dark);
    padding: unset;
}*/

.select2-container--default #select2-select-language-results .select2-results__option--highlighted[aria-selected] {
    background-color: #333333;
    color: white;
}
.select2-container--default .select2-results>#select2-select-language-results.select2-results__options {
    max-height: 200px;
    width: 65px;
    text-align: center;
    background-color: var(--background-header-top-bar);
    left: -18px;
    position: relative;
    color: white;
}
.select2-container--default #select2-select-language-results.select2-results__option[aria-selected=true]{
    background-color: #333333;
    color: white;
}
.select2-container--default #select2-select-language-results .select2-results__option[aria-selected=true]{
    background-color: #333333;
}

#select2-select-language-results.select2-results__option[aria-selected] {
    cursor: pointer;
    color: white;
}


.select2-container--default:has(#select2-select-language-results) .select2-search {
    display:none;
}


/* PAGINADOR */
.pagination .pagination-button{
    background-color: var(--background-data-text);
    padding: 6px;
    width: auto;
    display: inline-block;
    border-radius: 5px;
}
.pagination .pagination-button.is-active{
    background-color: var(--primary);
    color:white;
}
.pagination .pagination-button.pagination-prev.disabled,
.pagination .pagination-button.pagination-next{
    display:none;
}

.pagination .pagination-button:nth-last-child(-n+3) {
    width: 40px;
}

.pagination {
    margin-top: 40px;
    text-align: center;
}


body.consorci header section#header-links{
    background-color: var(--background-consorci);
}
body.consorci header section#header-links #menu-user ul{
    background-color: var(--background-consorci-odd);
}
body.empresa header section#header-links{
    background-color: var(--background-empresa);
}
body.empresa header section#header-links #menu-user ul{
    background-color: var(--background-empresa-odd);
}
body.entidad_representativa header section#header-links{
    background-color: var(--background-entidad_representativa);
}
body.entidad_representativa header section#header-links #menu-user ul{
    background-color: var(--background-entidad_representativa-odd);
}
body.formador header section#header-links{
    background-color: var(--background-formador);
}
body.entidad_colaborativa header section#header-links{
    background-color: var(--background-entidad_colaborativa);
}
body.entidad_colaborativa header section#header-links #menu-user ul{
    background-color: var(--background-entidad_colaborativa-odd);
}
body.formador header section#header-links{
    background-color: var(--background-formador);
}
body.formador header section#header-links #menu-user ul{
    background-color: var(--background-formador-odd);
}





/****
VICH IMAGE
****/
.vich-image input
{
    display: none;
    background: none;
    border-radius: 5px !important;
}

.vich-image .view-imagen {
    font-size: 14em;
    top: -30px;
    color: gray;
    display: block;
    position: relative;
    width: 350px;
    text-align: center;
}

.vich-image .view-imagen img
{
    top: unset !important;
    width: auto;
    height: 100%;
    max-height: 350px;
}
section#datos-entidad .vich-image label {
    display: flex;
    flex-direction: row-reverse;
    z-index: 10;
    position: relative;
    margin: 0 auto;
    width: 94%;
}
.vich-image label .image-edit
{
    top: unset !important;
    margin-left: 260px !important;
}
/***********************************************************/


main section h1 > i.fas.fa-arrow-right,
main section h2 > i.fas.fa-arrow-right
{
    color: var(--primary);
    transform: rotate(45deg);
}


/***********************************************************************************************************************
 *   START CONTROL CLASS READONLY
 **********************************************************************************************************************/
.readonly
{
    opacity: 1;
    pointer-events: none;
}
textarea{
    font-family: "Open Sans";
}
.readonly input,
.readonly textarea,
.readonly .display-model-list-type .field-short-description,
.readonly .select2-selection,
.readonly:not(.with, .form-group)
{
    background: var(--disabled);
}

.readonly .icheckbox_square-blue
{
    opacity: 0.5;
}
/***********************************************************************************************************************
 *   END CONTROL CLASS READONLY
 **********************************************************************************************************************/


/* Modals general*/


#modal-subir-pdf,
#modal-view-pdf,
#modal-rechazar,
#modal-inscribir-grupo{
    display: block;
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
}
#modal-view-pdf{
    top: 55vh;
}



#modal-subir-pdf .modal-content h3,
#modal-view-pdf .modal-content h3,
#modal-rechazar .modal-content h3,
#modal-inscribir-grupo .modal-content h3{
    background-color: var(--primary);
    padding: 15px 25px;
    margin: 0px;
    color: white;
}

body.consorci #modal-subir-pdf .modal-content h3{
    background-color: var(--background-consorci);
}
body.empresa #modal-view-pdf .modal-content h3{
    background-color: var(--background-empresa);
}
body.entidad_representativa #modal-rechazar .modal-content h3{
    background-color: var(--background-entidad_representativa);
}
body.entidad_colaborativa #modal-rechazar .modal-content h3{
    background-color: var(--background-entidad_colaborativa);
}
body.formador #modal-inscribir-grupo .modal-content h3{
    background-color: var(--background-formador);
}

#modal-subir-pdf .modal-content p,
#modal-view-pdf .modal-content p,
#modal-rechazar .modal-content p,
#modal-inscribir-grupo .modal-content p{
    padding: 0px 25px;
}
#modal-inscribir-grupo .modal-content label {
    padding-left: 25px;
}
.modal-content form{
    padding: 0px 25px 20px 25px;
}
.modal-overlay .modal-content > div,
.modal-overlay .modal-content > div{
    padding: 15px;
    text-align: left;
}

.decision-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 15px;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.modal-content button.btn {
    padding: 8px;
    border-radius: 5px;
    color: white;
    border: none;
    font-weight: 600;
    margin-bottom: 5px;
}
.select2-container--default .select2-selection--single {
    background-color: #fff !important;
    border-radius: 0px !important;
    border: none !important;
    border-bottom: 1px solid darkgray !important;
}
.select2-container {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle;
    /*width: auto !important;*/
}

/* Estilos genericos aplicados a botones */
button.btn, a.btn {
    color: white;
    background: var(--primary);
    border: 0;
    padding: 5px 20px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 600;
    margin-left: 10px;
}

.action-export
{
    text-align: right;
}
.action-export i{
    margin-right: 5px;
}

/***********************************************************************************************************************
 ****************************************************** FAVORITOS ******************************************************
 **********************************************************************************************************************/
.favorito {
    display: inline-block;
    width: 25px;
    height: 22px;
    cursor: pointer;
    font-size: 27px;
    background-color: darkgray;
    text-align: center;
    padding: 0 0 6px 0 !important;
    color: white;
}

.favorito.active {
    background-color: var(--primary);
}

/* Responsive general */

table tfoot tr.actions
{
    height: 50px;
}

.paginacion-container {
    display: flex;
    justify-content: center;
}

input[type="datetime-local" i],
input,
select{
    font-family: "Open Sans" !important;
}