.titulo-clientes {
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 19px;
    border-radius: 3px;
    border-bottom: 2px solid var(--color-azul-principal);
    margin-bottom: 7px;
}

/* HEADER */
.header-seccion-clientes {
    height: 55px;
    background-color: var(--color-gris-terciario);
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 3px;
    margin-bottom: 10px;
}

.buscador-cliente {
    width: 250px;
    height: auto;
}

.input-buscar-cliente {
    width: 100%;
    border: 1px solid var(--color-gris-oscuro);
    height: 35px;
    outline: none;
    padding-left: 7px;
    padding-right: 7px;
    border-radius: 5px;
    margin-left: 10px;
}

.filtro-seccion-clientes {
    width: 50px;
    height: 35px;            /* altura real */
    border: 1px solid var(--color-gris-oscuro);
    margin-left: 1.5%;
    border-radius: 5px;
    background-color: var(--color-blanco);

    display: flex;
    align-items: center;     /* centra vertical */
    justify-content: center; /* centra horizontal */
}

.filtro-seccion-clientes:hover {
    cursor: pointer;
    background-color: var(--color-azul-principal);
    color: var(--color-blanco);
    border: 1px solid var(--color-azul-principal);
}

.zona-derecha-clientes {
    margin-left: auto;
    display: flex;
    width: auto;
    margin-right: 10px;
}

.eliminar-clientes {
    width: 50px;
    height: 35px;
    border: 1px solid var(--color-gris-oscuro);
    margin-left: auto;
    border-radius: 5px;
    background-color: var(--color-blanco);

    display: flex;
    align-items: center;     /* centra vertical */
    justify-content: center; /* centra horizontal */
}

.eliminar-clientes:hover {
    cursor: pointer;
    background-color: var(--color-rojo);
    color: var(--color-blanco);
    border: 1px solid var(--color-rojo);
}

.actualizar-clientes {
    width: 50px;
    height: 35px;
    border: 1px solid var(--color-gris-oscuro);
    margin-left: auto;
    border-radius: 5px;
    background-color: var(--color-blanco);
    margin-right: 10px;

    display: flex;
    align-items: center;     /* centra vertical */
    justify-content: center; /* centra horizontal */
}

.actualizar-clientes:hover {
    cursor: pointer;
    background-color: var(--color-azul-claro);
    color: var(--color-blanco);
    border: 1px solid var(--color-azul-claro);
}

.totales-clientes {
    width: auto;
    height: 35px;
    color: var(--color-negro);
    align-content: center;
    text-align: right;
    padding: 0 10px;

    display: flex;
    align-items: center;     /* centra vertical */
    justify-content: right; /* centra horizontal */
    margin-right: 10px;
}

.total-clientes {
    background-color: var(--color-negro);
    color: var(--color-blanco);
    padding: 5px;
    border-radius: 3px;
}

.valor-total-cliente {
    font-weight: 500;
}

.total-facebook {
    margin-right: 10px;
    background-color: #106AFF;
    color: var(--color-blanco);
    padding: 5px;
    border-radius: 3px;
}

.valor-total-facebook {
    font-weight: 500;
}

.total-instagram {
    margin-right: 10px;
    background: linear-gradient(to right,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);
    color: var(--color-blanco);
    padding: 5px;
    border-radius: 3px;
}

.valor-total-instagram {
    font-weight: 500;
}

.total-whatsapp {
    margin-right: 10px;
    background: #4BC95A;
    color: var(--color-blanco);
    padding: 5px;
    border-radius: 3px;
}

.valor-total-whatsapp {
    font-weight: 500;
}

/* TABLA */
.contenedor-tabla-clientes {
    width: 100%;
    height: auto;
    max-height: 690px !important;
    overflow-y: auto;
    border-bottom: 1px solid var(--color-gris-oscuro);
}

.tabla-clientes {
    width: 100%;
    border-collapse: collapse; /* CLAVE */
}

.tabla-clientes thead th {
    position: sticky;
    top: 0;
    z-index: 5;
}

.tabla-clientes thead tr th {
    background-color: var(--color-gris-terciario);
    color: var(--color-negro);
    text-align: center;
    height: 35px;
    font-size: 15px;
    font-weight: 500;
    align-content: center;
}

.tabla-clientes th:nth-child(1){ /* CHECK */
    width: 3%;
}

.tabla-clientes th:nth-child(2){ /* AVATAR */
    width: 7%;
}

.tabla-clientes th:nth-child(3){ /* USUARIO */
    width: 15%;
}

.tabla-clientes th:nth-child(4){ /* EMAIL */
    width: 25%;
}

.tabla-clientes th:nth-child(5){ /* IDENTIFICADOR */
    width: 17%;
}

.tabla-clientes th:nth-child(6){ /* ULTIMA INTERACCION */
    width: 11%;
}

.tabla-clientes th:nth-child(7){ /* SUSCRITO EN */
    width: 11%;
}

.tabla-clientes th:nth-child(8){ /* ACCIONES */
    width: 11%;
}


.tabla-clientes tbody tr td {
    text-align: center;
    vertical-align: middle;     /* ✔ centra vertical */
    padding: 10px 0 !important;            /* ✔ padding estable */
    font-size: 14px;
    border-bottom: 1px solid black;
}

.tabla-clientes tbody tr:hover {
    cursor: pointer;
    background-color: var(--color-gris-terciario);
}

.cont-avatar-cliente img {
    margin-bottom: 3px;
}

.texto-avatar-cliente {
    font-size: 11px;
    color: var(--color-gris-oscuro);
}

.texto-avatar-cliente.instagram {
    background: linear-gradient(to right,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);
    color: var(--color-blanco);
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 2px;
}

.texto-avatar-cliente.whatsapp {
    background: #4BC95A;
    color: var(--color-blanco);
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 2px;
}

.texto-avatar-cliente.facebook {
    background: #106AFF;
    color: var(--color-blanco);
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 2px;
}

.texto-nombre-usuario {
    color: var(--color-negro);
    font-weight: 500;
}

.estado-cliente-usuario {
    width: max-content;
    margin: 5px auto;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 11px;
    color: var(--color-blanco);
}

.estado-cliente-usuario.Por-abrir {
    background-color: var(--color-verde);
}

.estado-cliente-usuario.Sin-asignar {
    background-color: var(--color-azul-claro);
}

.estado-cliente-usuario.En-curso {
    background-color: var(--color-naranja-secundario);
}

.estado-cliente-usuario.Finalizado {
    background-color: var(--color-rojo);
}

.estado-cliente-usuario.Ventana-stop {
    background-color: var(--color-amarillo);
}

.ver-cliente, .editar-cliente, .eliminar-cliente {
    width: 22px;
    height: 22px;
    border: 1px solid var(--color-negro);
    border-radius: 3px;
    align-content: center;
    text-align: center;
}

.ver-cliente {
    background-color: var(--color-azul-claro);
    color: var(--color-blanco);
    border: 1px solid var(--color-azul-claro);
}

.ver-cliente:hover {
    cursor: pointer;
    opacity: 0.7;
}

.editar-cliente {
    background-color: var(--color-naranja-secundario);
    color: var(--color-blanco);
    border: 1px solid var(--color-naranja-secundario);
}

.editar-cliente:hover {
    cursor: pointer;
    opacity: 0.7;
}

.eliminar-cliente {
    background-color: var(--color-rojo);
    color: var(--color-blanco);
    border: 1px solid var(--color-rojo);
}

.eliminar-cliente:hover {
    cursor: pointer;
    opacity: 0.7;
}

.footer-tabla-clientes{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 14px;
}

.paginador-clientes{
    display: flex;
    gap: 5px;
}

.paginador-clientes span{
    padding: 4px 8px;
    border: 1px solid var(--color-gris-oscuro);
    cursor: pointer;
    border-radius: 3px;
}

.paginador-clientes span.active{
    background: var(--color-azul-principal);
    color: var(--color-blanco);
}

#selectClientesPagina {
    border: 1px solid var(--color-gris-oscuro);
    border-radius: 3px;
    margin-right: 12px;
}


/* Estilos cuando el ANCHO sea 1440px o menos (MONITORES MEDIANOS) */
@media (max-width: 1440px) {

    /* TABLA */
    .contenedor-tabla-clientes {
        height: auto;
        max-height: 520px !important;
    }

}