/*==================================== RESUMEN CLIENTE ===============================*/

#resumen-cliente {
    background-color: white;
    padding: 0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px - 68px - 32px); /* Calculo la altura: 100% del alto de la ventana - tamaño del footer(60px) - navbar(68px) - padding(32px) - margin(16px) */
}

    #resumen-cliente hr {
        flex-shrink: 0; /* Para que los hr se muestren en el contenedor flexbox */
    }

.resumen-cabecera {
    display: flex;
    height: 148px;
    padding: 24px;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
    background-color: var(--wc-violeta-500, #8F2FFF);
    color: white;
    border-radius: 10px 10px 0px 0px;
}

    /*Esto no sirve! En todo caso tendríamos que separar con un espacio ambas clases*/
    /*.resumen-cabecera.resumen-cabecera-cliente { 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 16px;
        flex: 1 0 0;
        color: red !important;
    }*/
    .resumen-cabecera .resumen-cabecera-cliente {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        flex: 1 0 0;
    }

/* ——— 1 línea con puntos suspensivos ——————————————— */
    .resumen-cabecera .cabecera-nombre-cliente {
        white-space: nowrap; /* no saltos de línea              */
        overflow: hidden; /* recorta lo que sobre             */
        text-overflow: ellipsis; /* “…“ al final                     */
        max-width: 100%; /* respeta el ancho del flex item   */
    }

/* ——— Máx. 2 líneas con ellipsis ———————————————— */
    .resumen-cabecera .cabecera-nombre-comercial {
        display: -webkit-box; /* motor que acepta line‑clamp      */
        -webkit-box-orient: vertical;
        /*-webkit-line-clamp: 2;*/ /* 2 líneas como tope               */
        overflow: hidden; /* lo que pase de la 2ª se recorta  */
        /* Fallback para navegadores sin line‑clamp (opcional) */
        line-height: 1.2em;
        /*max-height: calc(1.2em * 2);*/ /* 2 líneas de alto                 */
    }

.resumen-cuerpo {
    overflow: hidden; /* Evita el desbordamiento */
    padding: 0 20px 0 20px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.imagenes-clasificaciones {
    height: 43px; /* Tamaño que estoy dando para las imágenes + el padding que aplico en .icono-clasificacion*/
    display: flex;
    width: 100%;
    background-color: white;
    padding: .1rem .2rem;
    border-radius: 60px;

    overflow-x:auto;              /* se puede desplazar */
    -webkit-overflow-scrolling:touch; /* inercia en iOS  */

    /* —— oculta la barra en todos los navegadores —— */
    scrollbar-width:none;         /* oculta scroll en Firefox */
    -ms-overflow-style:none;      /* IE 11 / Edge Legacy */
}

    .imagenes-clasificaciones::-webkit-scrollbar { /* Chrome, Edge, Safari */
        display: none;
    }

.icono-clasificacion {
    width: 20px;
    height: 20px;
    min-width: 40px;
    min-height: 40px;
    border: 1px solid var(--wc-violeta-200);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.6rem;
    color: #000;
    background: #fff;
    margin-right: .2rem;
    overflow: hidden;
    padding: 3px;
}

.actions {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    background-color: #FAF9FF;
}

.action-item {
    background: none;
    border: none;
    text-align: center;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 3px solid transparent; /* borde inferior para marcar activa */
    transition: color .15s, border-bottom-color .15s; /* suaviza el cambio */
}

    .action-item:hover,
    .action-item:focus {
        color: #7B36FF;
    }

    .action-item.is-active { /* clase para indicar la pestaña seleccionada (color + borde inferior).*/
        color: #7B36FF; /* color de la pestaña activa */
        border-bottom-color: #7B36FF; /* línea inferior visible para la activa */
        font-weight: 600;
    }

/* Paneles */
.tab-panel {
    display: block;
    padding: 16px 0;
}

    .tab-panel[hidden] {
        display: none !important; /* para navegadores que no respetan hidden */
    }

.info {
    padding: 20px;
    font-size: 14px;
    color: #333;
}

    .info a {
        color: #7B36FF;
        text-decoration: none;
    }

        .info a:hover {
            text-decoration: underline;
        }


.actividad-reciente {
    overflow-y: auto; /* Para que tenga scroll si el contenido es mayor */
    flex-grow: 1;
}

.actividad-item {
    display: flex; /* Convertimos en contenedor flex */
    flex-wrap: wrap; /* Permitimos múltiples líneas */
    justify-content: space-between;
    padding: 8px;
    background-color: #FAF9FF;
}

.actividad-titulo {
    flex: 1 1 auto; /* ocupa lo que pueda. grow=1 (puede crecer), shrink=1 (puede encoger), basis=auto */
    color: blueviolet;
    /*width: 75%;*/
}

.date {
    flex: 0 0 auto; /* ancho según su contenido. No crece, no se encoge más allá de su contenido */
    margin-left: auto; /* empuja hacia la derecha */
    font-weight: bold;
    white-space: nowrap; /* Evita que la fecha haga saltos de línea internos */
    margin: 0;
}

.actividad-descripcion {
    flex: 1 1 100%; /* nueva línea, todo el ancho. Base = 100% → ocupa toda la fila siguiente */
    font-size: 13px;
}

.resumen-cuerpo .text-end {
    margin-top: auto; /* ← lo manda al fondo */
    flex-shrink: 0; /* no se comprime */
    padding: 12px 0;
    background: #fff; /* opcional, por si el scroll pasa por detrás */
}

/*==================================== CONTACTOS CLIENTE ===============================*/

#contactos-clientes {
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px - 68px - 32px); /* Calculo la altura: 100% del alto de la ventana - tamaño del footer(60px) - navbar(68px) - padding(32px) - margin(16px) */
}


/*==================================== RESTO DE INFO DEL CLIENTE ===============================*/

#info-cliente {
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    margin: 0px 10px 0px 10px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px - 68px - 32px); /* Calculo la altura: 100% del alto de la ventana - tamaño del footer(60px) - navbar(68px) - padding(32px) - margin(16px) */
}


.contenedor-ayuda {
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}