/*PERSONALIZACIÓN ADICIONAL A YII2*/
main > .container, main > .container-fluid /*menu mas alto de lo  normal*/
{
    padding: 140px 15px 20px;
}

/*quitar el subrayado de boostrap5*/
a,.btn-link {
    text-decoration: none;
}

/*boostrap5*/
.nav-pills > li > a.active { /*en boostrap5 remplazar el color azul del menu activo por el que corresponde por el tema dark*/
    color: #fff !important;
    background-color: #1d2d41 !important;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff !important;
    background-color: #1d2d41 !important;
}
.dropdown-item.active, .dropdown-item:active {
    color: #fff !important;
    text-decoration: none;
    background-color: #1d2d41 !important;
}

/*mapeo de los iconos a sus equivalentes en Font Awesome 5*/
.glyphicon {
    font-family: "Font Awesome 5 Free";
}
.glyphicon-eye-open:before {
    content: "\f06e";
    color: var(--success);
}
.glyphicon-pencil:before {
    content: "\f303";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: var(--primary);
}
.glyphicon-pencil-white:before { /*para usarse con fondos oscuros*/
    content: "\f303";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: white;
}
.glyphicon-trash-can-white:before { /*para usarse con fondos oscuros*/
    content: "\f2ed";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: white;
}

.glyphicon-print:before {
    content: "\f02f";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: var(--primary);
}
.glyphicon-print-white:before { /*para usarse con fondos oscuros*/
    content: "\f02f";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: white;
}

.glyphicon-file-invoice:before {
    content: "\f570";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: var(--primary);
}
.glyphicon-file-invoice-white:before { /*para usarse con fondos oscuros*/
    content: "\f570";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: white;
}

.glyphicon-arrows-rotate:before {
    content: "\f021";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: var(--primary);
}
.glyphicon-arrows-rotate-white:before { /*para usarse con fondos oscuros*/
    content: "\f021";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: white;
}

.glyphicon-xmark:before {
    content: "\f00d";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: var(--primary);
}
.glyphicon-xmark-white:before { /*para usarse con fondos oscuros*/
    content: "\f00d";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: white;
}


.glyphicon-preview:before {
    content: "\f002";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: var(--primary);
}
.glyphicon-preview-white:before { /*para usarse con fondos oscuros*/
    content: "\f002";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: white;
}

.glyphicon-fa-file-pdf:before {
    content: "\f1c1";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: var(--primary);
}
.glyphicon-fa-file-pdf-white:before { /*para usarse con fondos oscuros*/
    content: "\f1c1";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: white;
}

.glyphicon-envelope:before {
    content: "\f0e0";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: var(--primary);
}
.glyphicon-envelope-white:before { /*para usarse con fondos oscuros*/
    content: "\f0e0";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: white;
}




.glyphicon-trash:before {
    content: "\f2ed";
    color: var(--danger);
}

.glyphicon-plus:before {
    content: "\f067";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: var(--primary);
}
.glyphicon-plus-white:before { /*para usarse con fondos oscuros*/
    content: "\f067";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: white;
}
.glyphicon-open-file:before {
    content: "\f56d";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: var(--primary);
}



/*demas estilos*/

fieldset {
    border: 2px solid rgba(0,0,0,.1);
    border-radius: 5px;
    padding: 15px;
}

fieldset legend {
    width: initial;
}

/*Poner el select 2 encima del z order de modales */
.select2-container--open {
    z-index: 2000;
}

/*Estilos de validación*/
div.required label.control-label:after {
    content: " *";
    color: red;
}

.has-error .form-control {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label {
    color: #a94442;
}

.has-success .form-control {
    border-color: #3c763d;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .help-block, .has-success .control-label, .has-success .radio, .has-success .checkbox, .has-success .radio-inline, .has-success .checkbox-inline, .has-success.radio label, .has-success.checkbox label, .has-success.radio-inline label, .has-success.checkbox-inline label {
    color: #3c763d;
}

/*Le pone el icono de flecha abajo indicando abrir dentro del header antes del link*/
.card-header a:before {
    font-family: "Font Awesome 5 Free";
    font-weight:bold; /*para algunos iconos es necesario aplicar bold*/
    content: "\f107";
    float: right;
    transition: all 0.5s;
}
/*rota el icono de flecha cuando el link no esta collapsed que es cuendo el div relacionado está en show*/
.card-header  a:not(.collapsed):before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

.container-ancho {
    /*padding: 120px 15px 20px; menu de 2 renglones*/
    padding: 70px 15px 20px;
}

/*
!* desde 768px a 1550px que es donde se muestra el menú en 2 renglones para recorrer el padding-top *!
@media (min-width: 768px) and (max-width: 1550px) {
    main > .container-ancho {
        padding-top: 120px !important;
    }
    main > .container {
        padding-top: 120px !important;
    }
}

main > .container, main > .container-fluid !*sobreescbir la regla de site.css para que tome 2 renglones de menú*!
{
    padding-top: 120px;
}*/

.action-column{ width:4em } /*hacer la columna action mas angosta*/

.numero { /*formato de numero solo lectura */
    text-align: right;font-size: 2em;padding: 0;
}

/*Personalalizar ordenación*/
.sorter {
    list-style-type: none;
    padding-left: 0;
}

.sorter:before {
    content: 'Ordenar por:';
    font-weight: bold;
}

.sorter li {
    display: inline-block;
    margin-left: 20px;
}


#navbarPanelControl .nav-link.active, #navbarPanelControl .show > .nav-link {
    color: #fff !important;
    background-color: #6ec0ff !important;
}

#navbarPanelControl .dropdown-item.active, #navbarPanelControl .dropdown-item:active {
    color: #fff !important;
    text-decoration: none;
    background-color: #6ec0ff !important;
}

.msg-leido
{
    color: mediumspringgreen;
}

a {
    color: #253453;
}

h1, h2 {
    color: #253453;
}

.breadcrumb {
    background-color: unset;
}

.breadcrumb-item.active, ul.sorter, div.summary, .breadcrumb-item + .breadcrumb-item::before, label.form-label {
    /*color: rgba(255,255,255,0.55)!important;*/
    border-color: #253453;
}

.pagination .page-item .page-link {
    color: white;
    font-weight: bold;
    background-color: #212529;
    border-color: #4d5154;
}

.pagination .page-item.active .page-link {
    background-color: #253453;
    border-color: #253453;
    color: white;
    font-weight: bold;
}
/* Floating Social Media Bar Style Starts Here */

.fl-fl {
    background: #fff;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 4px;
    width: 204px;
    position: fixed;
    right: -160px;
    z-index: 1000;
    font: normal normal 10px Arial;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.fl-fl .fab {
    font-size: 20px;
    color: #253453;
    padding: 10px 0;
    width: 40px;
    margin-left: 8px;
}

.fl-fl:hover {
    right: 0;
}

.fl-fl a {
    color: #253453 !important;
    text-decoration: none;
    text-align: center;
    line-height: 43px!important;
    vertical-align: top!important;
}

.float-1 {
    top: 135px;
}

.float-2 {
    top: 190px;
}

.float-3 {
    top: 245px;
}

.float-4 {
    top: 300px;
}
/* Floating Social Media Bar Style Ends Here */

.artista-text, .exposicion-text {
    font-family: 'Spartan', sans-serif;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    color: #253453;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}

/* web/css/site.css */

.nav-link {
    color: #fff; /* Blanco sólido */
}

.sub-renglon {
    font-size: xx-small;
    color: var(--bs-nav-link-color);
}

body {
    font-family: 'Montserrat', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; /* Para asegurar el peso SemiBold */
}

/* O para cualquier clase específica */
.mi-clase-semibold {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

h1 {
    font-family: 'Qwenzy Regular', serif;
    font-weight: normal; /* Asegúrate de que el peso coincida con el que definiste en @font-face */
    color: #0056b3;
}

/*COMIENZA subrayar .active del menu*/
/* Eliminar el fondo oscuro del nav-link.active */
.navbar-nav .nav-link.active {
    background-color: transparent !important; /* Asegura que no tenga fondo */
    color: white; /* Mantén el color del texto si es oscuro el navbar */
    position: relative; /* Necesario para posicionar el subrayado */
    padding-bottom: 0.5rem; /* Ajusta si es necesario para el subrayado */
}

/* Crear el subrayado para el nav-link.active */
.navbar-nav .nav-link.active::after {
    content: ''; /* Contenido vacío para el pseudo-elemento */
    position: absolute;
    width: 100%; /* El ancho del subrayado será el ancho del texto */
    height: 2px; /* Grosor del subrayado */
    background-color: white; /* Color del subrayado */
    bottom: 0; /* Posiciona el subrayado en la parte inferior */
    left: 0;
    right: 0;
    margin: auto; /* Centra el subrayado si el ancho es menor */
}

/* Opcional: Para el efecto hover de los otros links, puedes hacer algo similar */
.navbar-nav .nav-link:not(.active):hover {
    color: #ccc; /* Un color un poco más claro al pasar el mouse */
}

.navbar-nav .nav-link:not(.active)::after {
    content: '';
    position: absolute;
    width: 0%; /* Inicialmente sin ancho */
    height: 2px;
    background-color: white; /* Color del subrayado al pasar el mouse */
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transition: width 0.3s ease-in-out; /* Animación para el subrayado */
}

.navbar-nav .nav-link:not(.active):hover::after {
    width: 100%; /* Se expande al 100% al pasar el mouse */
}

/*TERMINA subrayar .active del menu*/

/*EMPIEZA simulador marco y maria Luisa */
.cuadro-contenedor {
    display: flex;
    justify-content: center; /* Mantiene el centrado horizontal */
    align-items: flex-start; /* Alinea los ítems al inicio del contenedor (arriba) */
    min-height: 100vh;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 80px; /* ¡Nuevo! Margen superior de 100px */
}

.marco {
    border: 9px solid #b8b1a4;
    box-shadow: 0 2.4px 4.8px rgba(0, 0, 0, 0.3);
    display: inline-block;
    background-color: #b8b1a4;
    padding: 1.5px;
}

.maria-luisa {
    padding: 18px;
    background-color: #fefefe;
    border: 1px solid #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.05);
}

.maria-luisa img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}
@media (max-width: 768px) { /* Este valor es un breakpoint común de Bootstrap para dispositivos pequeños */
    .cuadro-contenedor {
        margin-top: 0px;
        min-height: auto;
    }
}
/*TERMINA simulador marco y maria Luisa */