@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--body-font);   
    align-items: center;    
    color: var(--color-maestro-font-1);    
    /*transition: 1s;*/
}

header {
    background-color: var(--color-fondo-app-header);
    color: var(--color-maestro-font-1);

    height: var(--app-header-altura);    

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;    
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--app-header-zindex);
}

main {
    position: fixed;;
    flex: 1;
    padding: var(--app-main-padding);    
    margin-top: var(--app-main-margin-top);
    /* Altura del header */
    margin-bottom: var(--app-main-margin-bottom);
    /* Altura del footer */
    overflow-y: auto;

    transition: 1s;
}

footer {
    background-color: var(--color-fondo-app-footer);
    color: var(--color-maestro-font-1);

    height: var(--app-footer-altura);    

    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;    
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--app-footer-zindex);
}

p {
    margin-block-start: 0;
    margin-block-end: 0;
    color: var(--color-maestro-font-1);
}

a {
    text-decoration: none !important;
    color: var(--color-maestro-font-1);
}

img {
    max-width: 100%;
}

/******************************************/
/* Overlay de precarga */
#overlay-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-fondo-precarga);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: var(--overlay-preloader);
}

/* Contenedor del logo y spinner */
.preloader-content {
    text-align: center;
}

/* Estilo del logo */
.preloader-logo {
    width: 317px; /* Ajusta el tamaño del logo */
    height: auto;
    margin-bottom: 20px;
}

/* Estilo del spinner */
.spinner {
    width: 100px;
    height: 200px;
    border: var(--color-spin-precarga);/* Color del borde */    
    border-radius: 50%;
    /*animation: spin 1s linear infinite; /* Animación */
    animation: spin 20s linear(-0.13 70.59%, 0.86 82.35%) infinite;
    margin-left: -51px;
}

/* Animación del spinner */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/****************************************** */
/* VIDEO DE FONDO */

.video-bg {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.video-bg video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.overlay-fondo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-fondo-top-video);
    /* Oscurece el fondo */
    z-index: var(--overlay-video);
    /* Aparece detrás del modal */
}

/****************************************** */
/* AJUSTES MODO CLARO/OSCURO */

.dark-light {
    position: fixed;
    bottom: 18px;
    right: 18px;
    background-color: var(--dropdown-bg);
    box-shadow: var(--dropdown-shadow);
    padding: 8px;
    border-radius: 50%;
    z-index: var(--btn-modo-luz-zindex);
    cursor: pointer;
}

@media screen and (max-width: 600px) {
    .dark-light {
        bottom: 15px;
        right: 15px;
    }
}

.dark-light svg {
    width: 24px;
    flex-shrink: 0;
    fill: var(--dropdown-svg-fill);
    stroke: var(--dropdown-svg-fill);
    transition: 0.5s;

    position: relative;
    top: 2px;
    left: 1px;
}

.light-mode .dark-light svg {
    fill: var(--dropdown-svg-fill);
    stroke: var(--dropdown-stroke);
}

.light-mode .dropdown.is-active ul {
    background-color: var(--dropdown-fondo) ;
}

body.light-mode:before,
body.light-mode .video-bg:before {
    content: "";
    position: absolute;
    background: var(--dropdown-fondo-grad);
    -webkit-backdrop-filter: saturate(3);
    backdrop-filter: saturate(3);
}


/************************************************************/
/* APP */

.app {    
    background-color: var(--app-fondo);
    /*border-radius: var(--borde-radio-maestro);*/
    backdrop-filter: var(--app-blur);
    -webkit-backdrop-filter: var(--app-blur);
    border: var(--app-border);
    box-shadow: var(--box-shadow-maestro);
    font-size: 15px;
    font-weight: 500;        
}



.app-modal {
    background-color: var(--app-modal-fondo);
    border-radius: var(--borde-radio-maestro);
    backdrop-filter: var(--app-modal-blur);
    -webkit-backdrop-filter: var(--app-modal-blur);
    border: var(--app-modal-border);
    box-shadow: var(--box-shadow-maestro);
    
    width: 100%;
    max-width: var(--app-maximo-ancho);
    padding: 0px;
    margin: 0px 100px;        
    z-index: var(--app-modal-zindex);
    position: relative;        
    overflow: auto;
    
    max-height: var(--modal-max-height);
    top: var(--modal-top);   
}


.overlay-total {
    background: var(--color-fondo-overlay);

    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;    
    z-index: var(--overlay-modal);
    display: flex;
    justify-content: center;
    align-items: baseline;
    padding-top: 20px;    
}

.modal-form{
    /*height: 72vh;*/
    max-height: var(--modal-form-max-height);
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    padding-left: 50px;
    line-height: 25px;    
    padding-bottom: 15px;
}
.modal-form h3 {
    margin: 10px 0px;

}
.modal-form label {
    /*color: #24000a;*/
    font-weight: 500;
}
.modal-form p{        
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;    
}

.modal-form input {    
    background-color: var(--color-fondo-input);
    border: var(--borde-maestro-2);
    border-radius: var(--borde-radio-maestro);

    width: 90%;    
    margin-bottom: 10px;
    padding: 5px;
}

.modal-form input[type="checkbox"] {   
    width: 20px;
    height: 20px;
    accent-color: #ffa1f9; /* Cambia el color del checkbox en navegadores compatibles */
    cursor: pointer;
}

.modal-form select {    
    background-color: var(--color-fondo-input);
    border: var(--borde-maestro-2);
    border-radius: var(--borde-radio-maestro);

    width: 90%;    
    margin-bottom: 10px;
    padding: 5px;
}
.modal-form select option {    
    background-color: var(--color-fondo-input);
    border: var(--borde-maestro-2);
    border-radius: var(--borde-radio-maestro);

    width: 90%;    
    margin-bottom: 10px;
    padding: 5px;
}

.modal-form textarea {    
    background-color: var(--color-fondo-input);
    border: var(--borde-maestro-2);
    border-radius: var(--borde-radio-maestro);

    width: 90%;    
    padding: 5px;
}

.text-area-reunion{
    height: 270px;
}

.boton-modal{
    border-top: var(--borde-maestro);

    text-align: center;
    padding: 13px;    
}

.boton-modal input{

    background-color: var(--color-maestro-boton);
    color: var(--color-maestro-font-1);    
    border-radius: var(--borde-radio-maestro);
    border: var(--borde-maestro-2);

    width: 168px;
    padding: 8px;    
    cursor: pointer;
}

.boton-modal input:hover{
    background-color: var(--color-maestro-boton-hover);
}

.modal-texto-obligatorio{
    position: absolute;
    bottom: 20px;
    left: 24px;    
    font-size: 14px;
}
    
@media screen and (max-width: 1000px) {
    .header-modal{
        font-size: 13px;
        padding-left: 20px !important;
    }
}
@media screen and (max-width: 800px) {
    .app-modal {
        margin: 0px 20px;
    }
    .header-modal{
        font-size: 13px;
        padding-left: 20px !important;
    }
    .modal-form{
        padding-left: 20px;
    }
    .modal-form input {    
        width: 95%;
    }
    .modal-form textarea {    
        width: 95%;
    }
    .modal-form select {    
        width: 95%;
    }
    .boton-modal{
        text-align: right;
    }
    
    .modal-texto-obligatorio{
        font-size: 11px;
        left: 13px;
        bottom: 36px;
    }
}

@media screen and (max-width: 600px) {
    
}

/* Botón de cierre (X) */
.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 25px;
    font-weight: bold;
    cursor: pointer;
    color: var(--close-btn);
}

.close-btn:hover {
    color: var(--close-btn-hover);
}

/************************************************************/
/* HEADER */

.header {
    border-bottom: var(--borde-maestro);

    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: var(--header-altura);
    width: 100%;    
    padding: 0 30px;
    white-space: normal;
    justify-content: space-between;
}

@media screen and (max-width: 1000px) {
    .header {
        padding: 0 10px;
        gap: 5px;
    }
}

@media screen and (max-width: 600px) {
    .header {
        padding: 0 10px;
        gap: 2px;
    }
}

/* BOTÓN HAMBURGUESA */

.hamburguesa {
    display: none;
    /*display: flex;*/
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    min-width: 25px;
    height: 21px;
    cursor: pointer;
    margin-right: 5px;
}

@media (max-width: 1000px) {
    .hamburguesa {
        display: flex;
    }
}

.hamburguesa div {
    background-color: var(--color-burguer);
    border-radius: var(--borde-radio-maestro);

    height: 3px;    
    transition: all 0.3s ease-in-out;
}

/* Efecto cuando se activa el menú */
.hamburguesa.activa div:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburguesa.activa div:nth-child(2) {
    opacity: 0;
}

.hamburguesa.activa div:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* LOGO */

.logo {
    color: var(--color-logo);

    display: flex;    
    font-size: 20px;
    align-items: center;
    gap: 0px;
}

.logo p {
    color: var(--color-logo-2);
    font-size: 13px;
    letter-spacing: 1.5px;
}
.logo-header{
    width: 240px;
    height: auto; 
    margin-bottom: 3px;  
}


.logo-dark{  
    display: var(--mostrar-logo-dark);
}

.logo-light{   
    display: var(--mostrar-logo-light); 
}

/* SEARCH */

.search-bar {
    border-radius: var(--borde-radio-maestro);

    height: var(--search-altura);
    display: flex;
    width: 100%;
    max-width: 325px;
    padding-left: 5px;    
}

.search-bar input {

    color: var(--color-maestro-font-1-suave);
    background-color: var(--color-fondo-search);
    border: var(--borde-maestro);
    border-radius: var(--borde-radio-maestro);        

    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23717790c7'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: 16px 48%;

    width: 100%;
    height: 100%;    
    font-family: var(--body-font);
    font-size: 15px;
    font-weight: 500;
    padding: 0 20px 0 40px;    
}

.search-bar input::-moz-placeholder {
    color: var(--color-maestro-font-2);

    font-family: var(--body-font);    
    font-size: 15px;
    font-weight: 500;
}

.search-bar input:-ms-input-placeholder {
    color: var(--color-maestro-font-2);

    font-family: var(--body-font);    
    font-size: 15px;
    font-weight: 500;
}

.search-bar input::placeholder {
    color: var(--color-maestro-font-2);

    font-family: var(--body-font);    
    font-size: 15px;
    font-weight: 500;
}

@media screen and (max-width: 800px) {
    .search-bar {
        max-width: 225px;   
    }
    .search-bar input {
        background-size: 10px;
        background-position: 8px 50%;
        padding: 0px 6px 0 25px;
        font-size: 12px;
    }
    .search-bar input::placeholder {   
        font-size: 12px;
    }
}

@media screen and (max-width: 600px) {
    .search-bar {
        max-width: 125px;  
    }
}

/* SECCIÓN CABECERA MENU */

.header-profile {
    margin: 5px;
    display: flex;
    align-items: center;
    /*padding: 0 16px 0 40px;*/
    /*margin-left:auto;*/
    flex-shrink: 0;
}
.header-profile svg{
    margin-top: 5px;
}
.tamaño-icono {
    width: 34px;
    height: 34px;
}

.tamaño-icono svg {
    width: 23px;
    height: 23px;
}

@media screen and (max-width: 500px) {
    .tamaño-icono {
        width: 25px;
        height: 25px;
    }

    .tamaño-icono svg {
        width: 20px;
        height: 20px;
        margin-bottom: 6px
    }
}



/* FILTRO */
.ico-filter {
    display: inline-block;

    background-color: var(--color-fondo-icono-1);
    color: white;
    font-size: 34px;
    font-weight: bold;
    text-align: center;
    line-height: 34px;
    border-radius: 50%;
    /* Hace el fondo circular */
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
    cursor: pointer;
    user-select: none;
    margin-left: 5px;

}
.ico-filter:hover {
    background-color: var(--color-fondo-icono-1-hoover);    
}

.ico-filter svg path {
    fill: white;
}

/* BOTON AÑADIR EMPRESA */

.icon-plus {

    background-color: var(--color-fondo-icono-1);    
    border-radius: 50%;

    display: inline-block;    
    font-size: 34px;
    font-weight: bold;
    text-align: center;
    line-height: 34px;    
    /* Hace el fondo circular */
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
    cursor: pointer;
    user-select: none;
    margin-left: 5px;
}

.icon-plus:hover {
    background-color: var(--color-fondo-icono-1-hoover);    
}

.icon-plus svg path {
    fill: white;
}

/* BOTON PERFIL */
.ico-perfil {
    background-color: var(--color-fondo-icono-2);
    border-radius: 50%;

    display: inline-block;
    font-size: 34px;
    font-weight: bold;
    text-align: center;
    line-height: 34px;        
    cursor: pointer;
    user-select: none;
    margin-left: 5px;
}
.ico-perfil:hover {
    background-color: var(--color-fondo-icono-2-hoover);    
}
.ico-perfil svg path {
    fill: white;
}

/**************/

.tooltip-text {
    display: none;
    font-size: 10px;
    text-align: right;    
    line-height: 23px;
    top: 15px;
    right: 0;
    z-index: var(--tooltip-text-zindex);
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip-container:hover .tooltip-text {
    display: flex;
    justify-content: center;
    opacity: 1;
}

/************************************** */
/* FILTROS */

.filtros {
    display: flex;
    justify-content: center;    
    flex-wrap: wrap;
    height: auto;
    padding: 10px;
    gap: 10px;
    background-color: var(--color-fondo-filtros);
}

.filtros input {
    width: 100px;
}

.filtro-campo-cn input {
    width: 52px;
}

/************************************** */
/* PRINCIPAL WRAPPER */


/************************************** */
/* MENU IZQUIERDO EMPRESAS */

.left-side {
    background-color: var(--color-fondo-izq);
    border-right: var(--borde-maestro);
}

@media screen and (max-width: 1000px) {
    .left-side {              
        border-right: none;
        border-bottom: var(--borde-maestro);  

        display: none;        
        padding-bottom: 0px;
    }
}

/* CADA EMPRESA */
.side-wrapper+.side-wrapper { 

}

.side-wrapper{
    border-bottom: var(--borde-maestro-1);
}

.side-menu {
    display: flex;
    flex-direction: row;
    white-space: normal;    
}

.side-menu a {    
    width: 100%;
    text-decoration: none;    
    display: flex;
    align-items: center;
    font-weight: 400;
    padding: 10px 5px 10px 15px;
    font-size: 14px;   
    transition: 0.3s;
    gap: 13px;
}

.side-menu a:hover {
    background-color: var(--color-fondo-izq-hover);
}

.side-menu svg {
    width: 16px;
    margin-right: 8px;
}

.side-menu a .side-menu-dir {
    color: var(--color-maestro-font-2);
    font-size: 12px;    
}

.side-menu-titulo{
    font-weight: 500; 
}

/* CIRCULO CON LA PUNTUACIÓN */

.notification-number {
    background-color: var(--color-circulo-cat);    

    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;    
    width: 55px;
    height: 52px;
    padding: 10px 15px 10px 15px;
}

.notification-number p {
    margin: 5px 7px 3px 7px;
    color: var(--color-texto-circulo-cat);
}
/*
.notif-1 {
    background-color: var(--color-notific);
    border: 2px solid #bfced9;
    border-radius: 50%;
    font-size: 11px;

    position: relative;
    top: -39px;
    left: 20px;
    color: #fff;
    padding: 0px 4px 0px 4px;
}

.notif-1-peq {
    background-color: var(--color-notific);
    border: 1px solid #bfced9;
    border-radius: 50%;
    font-size: 11px;

    position: relative;
    top: -35px;
    left: 20px;
    color: #fff;
    padding: 0px 4px 0px 4px;
}

.notif-2 {
    font-size: 10px;
    position: relative;
    top: 7px;
    left: -6px;
}

*/
/************************************** */
/* PARTE CENTRAL INFO EMPRESAS */

.main-container {
    background-color: var(--color-fondo-cent);
}

/* CABECERA */

.main-header {
    border-bottom: var(--borde-maestro-1);  
    background-color: var(--color-fondo-cent-head);      

    display: flex;
    justify-content: space-between;
    align-items: center;    
    flex-shrink: 0;

    text-decoration: none;    
    font-weight: 400;
    padding: 10px 10px 10px 15px;
    font-size: 20px;
    font-weight: 600;    
    /*transition: 0.3s;*/
}

.main-header-titulo {
    line-height: 20px;
}

.main-header-menu {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-header-texto {
    line-height: 11px;
    font-weight: 400;
}
.main-header-titulo{
    font-weight: 500;
}

.main-header-dir {
    color: var(--color-maestro-font-3);

    margin-top: 5px;
    font-size: 13px;    
}

/* EDITOR EMPRESA */

.editor-empresa svg {
    width: 45px;
    height: 45px;
    cursor: pointer;
}


/* DATOS EMPRESAS */

.content-wrapper {    
    background-color: var(--color-fondo-info-emp);
    
}

/* CADA SECCIÓN */
.content-section {
    display: flex;
    flex-direction: column;
}


.flecha-content {
    cursor: pointer;
}

.girar90 {
    rotate: 90deg;
}

.content-section ul {
    background-color: var(--color-fondo-info-emp-det);
    border-bottom: var(--borde-maestro);

    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: space-around;    
    padding: 10px 10px;
    margin: 0px 0px;        
    cursor: pointer;
}

.content-section ul li {
    list-style: none;
    padding: 3px 30px;
    display: flex;
    align-items: center;
    font-size: 16px;
    width: 100%;
    height: 100%;
    white-space: normal;
    transition: 0.3s;
}

.content-section ul li:hover {
    background-color: var(--color-contacto-hover);
}

.content-section ul li:hover:first-child {
    /*border-radius: 13px 13px 0 0;*/
}

.content-section ul li:hover:last-child {
    /*border-radius: 0 0 13px 13px;*/
}

.content-section ul li+li {
    /*border-top: 1px solid var(--border-color);*/
}

.content-section ul svg {
    width: 28px;    
    margin-right: 16px;
    flex-shrink: 0;
}


.content-section-title {
    border-bottom: var(--borde-maestro);
    
    padding: 10px 10px 10px 15px;
    font-size: 20px;    
    display: flex;
    align-items: center;
}

.content-section-title svg {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.content-section-title svg path {
    fill: var(--color-maestro-font-1);
}

.status {
    color: var(--color-maestro-font-2);    
    margin-left: 15px;
    font-size: 13px;
    position: relative;        
    font-weight: 450;
}

.status-dato {
    color: var(--color-maestro-font-1);
    font-weight: 600;
}


.status-circle {
    width: 6px;
    height: 6px;    
    position: absolute;
    border-radius: 50%;
    top: 4px;
    left: -20px;
}

.status-circle.green {
    background-color: var(--color-circulo-info);
}

/********************************** */
/* CONTACTOS */

.contactos {
    border-top: var(--borde-maestro);
    background-color: var(--color-fondo-info-emp-det);
    font-size: 12px;    
    padding: 10px;      
}

.contactos a {    
    border-radius: var(--borde-radio-maestro);

    padding: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;    
}

.annadir-contacto{    
    padding: 5px 10px 8px 15px;
    display: flex;
    align-items: center;
}
.annadir-contacto a{
    font-size: 14px !important;    
    cursor: pointer;
}
.nuevo-contacto {
    font-weight: 700;
    font-size: 15px;
}

.contactos .fila-contacto {
    border-radius: 0px;
    padding: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: var(--borde-maestro);
    gap: 15px;
}
.fila-contacto:hover{
    background-color: var(--color-contacto-hover);
}
@media screen and (max-width: 750px) {
    .contactos .fila-contacto {
        flex-wrap: wrap;
        gap: 5px;        
    }
}


.nombre-contacto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 13px;
    text-decoration: none;
    line-height: 18px;
    font-weight: 600;
}

.tipo-contacto {
    color: var(--color-maestro-font-4);
    font-size: 11px;
    font-weight: 500;
}


.tipo-contacto .datos {
    display: flex;
    flex-direction: row;
}

.etiqueta-contacto {
    display: flex;
    align-items: center;
    /*flex-wrap: wrap;*/
}

.etiqueta-contacto-color1 {
    background-color: var(--color-etiqueta-influyente) ;
    color: var(--color-texto-etiqueta);
    
    font-size: 10px;
    padding: 0px 5px;
    border-radius: 5px;
}

.etiqueta-contacto-color2 {
    background-color: var(--color-etiqueta-filtro);
    color: var(--color-texto-etiqueta);

    font-size: 10px;
    padding: 0px 5px;
    border-radius: 5px;
}

.etiqueta-contacto-color3 {
    background-color: var(--color-etiqueta-decisor);
    color: var(--color-texto-etiqueta);

    font-size: 10px;
    padding: 0px 5px;
    border-radius: 5px;

}

.etiqueta-contacto svg {
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.contactos a:hover {
    background-color: var(--color-fondo-info-emp-det-hover);
}

.contacto-phone {
    display: flex;
    align-items: center;
    gap: 10px
}

.contacto-phone svg {
    width: 25px;
    height: 25px;
    fill: var(--color-maestro-font-1);
    cursor: pointer;
}

.contacto-phone a{
    text-decoration:none;
}

@media screen and (max-width: 750px) {
    .contacto-phone svg {
        width: 20px;
        height: 20px;
    }
}

/**************************************** */
/* MENU DERECHO */

.right-side {
    border-left: var(--borde-maestro);
    background-color: var(--color-fondo-dch);   
    padding-bottom: 10px;
}

.right-side hr {
    border: none;
    height: 1px;        
}

/* MENU */

.menu-derecho {
    display: flex;    
}

.menu-derecho-opcion {
    width: 100%;
    text-align: center;    
    background-color: var(--color-btn-dch);
    padding: 10px 5px 10px 15px;
    cursor: pointer;
}

.menu-derecho-opcion:hover {
    background-color: var(--color-btn-dch-hoover);
}

.menu-destacado {
    background-color: var(--color-btn-dch-dest);
}

/***** */

/* ACCIONES */


.acciones {
    border-top: var(--borde-maestro);    
    font-size: 12px;    
    padding: 10px;
}

.acciones a {
    border-bottom: var(--borde-maestro);    

    padding: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;    
    gap: 15px;
}

.acciones a:hover {
    background-color: var(--color-contacto-hover);
}



.annadir-accion {
    text-align: center;
}

.annadir-accion span {
    font-weight: 500;
    font-size: 12px;
}

.texto-accion{
    font-weight: 400;
}
.texto-accion span{
    font-weight: 600;
}

.tipo-accion {
    border-bottom: var(--borde-maestro);

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0px;    
    margin-bottom: 5px;
}

.tipo-accion a {
    border: var(--borde-maestro);

    margin: 5px 2px;
    border-radius: 5px;
    background-color: var(--search-bg);
}

.tipo-accion a:hover {
    background-color: var(--color-btn-dch-hoover);
}

/* ICONO ACCIONES */

.icono-acciones svg {
    fill: var(--color-fill-iconos-dch);

    width: 30px;
    height: 30px;    
}

.icono-acciones-rotar svg {
    transform: rotate(-90deg);
}

/************************************** */
/* FOOTER */

.footer {
    border-top: var(--borde-maestro);

    width: 100%;
    display: flex;    
    font-size: 12px;
    align-items: center;
    justify-content: space-around;
    gap: 5px;    
    /*margin: 10px;*/
    /*padding: 10px 30px;    */
}
.logo-pie{
    width: 160px;
    height: auto; 
    margin-bottom: 3px;  
    margin-top: 3px;
}

/************************************** */

.activo {
    display: block !important;
}

.div-centrar {
    text-align: center;
}

.div-fondo-destacado {
    background-color: var(--color-fondo-dest);
}

.div-oculto {
    display: none !important;
}

.div-oculto-important {
    display: none !important;
}

/* Deshabilitar el scroll */
.no-scroll {
    overflow: hidden;
}

/************************************** */
::-webkit-scrollbar {
    width: 6px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-bg);
    border-radius: var(--borde-radio-maestro);
}


/*******************************************/

body {
    display: flex;
    overflow: hidden;
    flex-direction: column;    
    width: 100%;
    height: var(--body-altura);
}

.app {

    position: relative;
    top: var(--app-top);
    max-width: var(--app-maximo-ancho);
    height: var(--app-height);    
    width: 100%;    
    display: flex;
    flex-direction: column;
}

.wrapper {
    background-color: var(--color-fondo-wrapper);
    display: flex;
    flex-grow: 1;
    overflow: hidden;
}

.left-side {
    flex-basis: var(--menu-izq-ancho);    
    overflow: auto;
    flex-shrink: 0;
    /* Altura fija */
    height: var(--menu-izq-altura);
    max-height: var(--menu-izq-altura-max);
    /* Barra de desplazamiento vertical */
    overflow-y: auto;
    /* Oculta el desplazamiento horizontal si es necesario */
    overflow-x: hidden;

}

.main-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;    

    overflow: var(--central-overflow);
    height: var(--central-height);
}

.content-wrapper {    
    display: flex;
    flex-direction: column;    
    overflow: var(--wrapper-overflow);
    height: var(--wrapper-height);
}

.contactos {
    display: flex;
    flex-direction: column;  
    
    /*overflow: var(--contactos-overflow);    
    height: var(--contactos-height);  
    */
}

.right-side {
    flex-basis: var(--menu-dch-ancho);    
    overflow: hidden;
    flex-shrink: 0;
}

.acciones {
    display: flex;
    flex-direction: column;    
}

.lista-acciones{
    overflow: var(--acciones-overflow);
    height: var(--menu-dcha-acciones-altura);
}

.lista-ordenes{
    overflow: var(--acciones-overflow);
    height: var(--menu-dcha-ordenes-altura);
}