:root {
    --ancho-menu: 260px;
}

.calculo-total{
    margin-left: 30px;
    display: flex;
    /* justify-content: flex-end; */
}

.tabla-hijosdirectos td  {
    vertical-align: top;
}

.tabla-hijosdirectos .cantidad sl-input {
    width: 100px;
    text-align: right;
}
.tabla-hijosdirectos .precio sl-input {
    width: 100px;
    text-align: right;
}

.tabla-hijosdirectos.table tr .cantidad ,
.tabla-hijosdirectos.table tr .precio,
.tabla-hijosdirectos.table tr .xxxcalculototalxxx
{
    text-align: right;
}
.tabla-hijosdirectos.table tr .cantidad sl-input,
.tabla-hijosdirectos.table tr .precio  sl-input,
.tabla-hijosdirectos.table tr .xxxcalculototalxxx  sl-input
{
    margin-left: auto;
}

.table>tbody>tr>td.cantidad,
.table>tbody>tr>td.precio

 {
    padding: 10px 0px 10px 0px !important;
}    

.btn-emitir {
    background: #ff00008c; 
}

.btn-anadir-conceptos{ 
    padding-top: 10px;

}
.icon-plus{
    font-size: 15px;
}
/* #proforma.btn-morado::part(base),
#add-conceptos.btn-morado::part(base) {
    background-color: #5a3a91 !important;
    border-color: #3E1A7A !important;
    color: white; 
}
#proforma.btn-morado[disabled]::part(base) {
    background-color: #5a3a91 !important;
    cursor: not-allowed;
    filter: saturate(0.5);
} */
 /* ------------ Estilos que sustituyen las lineas de colores en las listas pedidos ------------------- */

 .pedido-facturado td.columna-cliente::after {
    content: "P. Pagos Inconpletos";
    border-radius: 50%;
    font-size: 10px;
    font-weight: bold;
    color: #ff3f3f;
    background: #ff3f3f1a;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 10px;
    border: 1px solid #ff3f3f3d;
    vertical-align: middle;

}
 .pedido-cerrado td.columna-cliente::after {
    content: "P. Cerrado";
    border-radius: 50%;
    font-size: 10px;
    font-weight: bold;
    color: #0f45b8;
    background: #3fbcff1a;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 10px;
    border: 1px solid #3facff3d;
    vertical-align: middle;

}

 /* ------------ Estilos que sustituyen las lineas de colores en las listas de facturas  ------------------- */

.factura-proforma td.columna-numeracion::after {
    content: 'PROFORMA';
    font-size: 10px;
    font-weight: bold;
    color: #ff3f3f;
    background: #ff3f3f1a;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 10px;
    border: 1px solid #ff3f3f3d;
    vertical-align: middle;
}

/* Factura Numerada (Naranja) */
.factura-numerada td.columna-numeracion::after {
    content: 'NUMERADA';
    font-size: 10px;
    font-weight: bold;
    color: #e69500; 
    background: #ffa7001a;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 10px;
    border: 1px solid #ffa7003d;
    vertical-align: middle;
}

/* Factura Notificada (Verde) */
.factura-notificada td.columna-numeracion::after {
    content: 'NOTIFICADA';
    font-size: 10px;
    font-weight: bold;
    color: #7cb500;
    background: #aeff001a;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 10px;
    border: 1px solid #aeff003d;
    vertical-align: middle;
}

.factura-proforma td, .factura-numerada  td, .factura-notificada  td, .albaran-sin-facturar td, .albaran-facturado  td { padding: 4px;}


tr.rectificativa-proforma td.columna-numeracion::after {
    content: "RE. PROFORMA";
    font-size: 10px;
    font-weight: bold;

    color: #c2410c;
    background: #f973161a;
    border: 1px solid #f973163d;

    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 10px;
    vertical-align: middle;
}

tr.rectificativa-numerada td.columna-numeracion::after {
    content: "RE. NUMERADA ";
    font-size: 10px;
    font-weight: bold;
    color: #e69500; 
    background: #aeff001a;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 10px;
    border: 1px solid #aeff003d;
    vertical-align: middle;
}
tr.rectificativa-notificada td.columna-numeracion::after {
    content: "RE. NOTIFICADA";
    font-size: 10px;
    font-weight: bold;

    color: #4d7c0f;
    background: #84cc161a;
    border: 1px solid #84cc163d;

    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 10px;
    vertical-align: middle;
}


tr.rectificativa-proforma td, tr.rectificativa-numerada td, tr.rectificativa-notificada td {
  background: transparent !important; /* para que no tapen el fondo */
}

 /* ------------ Estilos que sustituyen las lineas de colores en las listas de albaranes  ------------------- */

.albaran-sin-facturar td.columna-numeracion::after{
    content: 'SIN FACTURAR';
    font-size: 10px;
    font-weight: bold;
    color: #ff3f3f;
    background: #ff3f3f1a;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 10px;
    border: 1px solid #ff3f3f3d;
    vertical-align: middle;
}

.albaran-facturado td.columna-numeracion::after{
    content: 'FACTURADO';
    font-size: 10px;
    font-weight: bold;
    color: #7cb500;
    background: #aeff001a;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 10px;
    border: 1px solid #aeff003d;
    vertical-align: middle;
}

.btn-notificar {
    background-color: red;
    color:white;
    margin-right: 100px;
}

.btn-notificar:hover {
    border: solid 1px red;
    color: red;
}



.add-albaran{
    border-color: #ffffff !important;
    color: #212529 !important; /* Un gris casi negro muy elegante */
}
.boton-informe-person{
    padding: 45px 9px 9px 7px;
    font-size: 17px;
    margin: 7px 7px 7px 0;
}


.fondo-menu-principal { background: #3E1A7A;}
.recoger-menu wa-icon { color: white;}
.recoger-menu wa-icon:hover { color: white;}

declave

#entorno-pestanas li, #entorno-pestanas li {font-size: 16px; font-weight: 300;} 

.btn-nivel0, .btn_nivel1 {    margin: 3px 7px;     border-radius: 7px;}

#menu-principal { margin-top: 3px; } 

/* --------------------------
            badge
------------------------------*/

.badge-verde {
    background-color: #6be658 !important; /* El verde que pediste */
    color: #1a4114;                      /* Verde muy oscuro para legibilidad */
}

.badge-rojo {
    background-color: #ff8585 !important; /* Rojo suave pero vibrante */
    color: #4b0b0b;                      /* Granate muy oscuro */
}
.badge-naranja{
    background-color: #ffda6a !important;
    color: #481f05;
}
.badge-sin-facturar{
    background-color: #a3cfbb !important;
    color: #481f05;
}
/* ----------------------------------------------------
        Estilos de Under Calculos Totales
-------------------------------------------------------*/

.card-tablaresumen {
    margin-inline-start: auto;
}

#tablaresumen {
	margin-inline-start: auto;
    width: 700px;
	
}

/* Cabeceras */
#tablaresumen th {
    background-color: #f8fafc;
    color: #7b648b;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}

/* Celdas de datos */
#tablaresumen td {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #59677c;
    text-align: center;
    border-right: 1px solid #f1f5f9;
}

#tablaresumen td:last-child {
    border-right: none;
}

/* Resaltar la columna "Falta" */
.col-falta {
    background-color: #fef2f2 !important; 
    color: #991b1b !important;
}

.col-falta-valor {
    color: #dc2626 !important; 
    background-color: #fef2f2;
}

/* Quitar bordes antiguos de los atributos HTML */
#tablaresumen[border="1"] {
    border: 1px solid #e2e8f0 !important;
}
/* #cont-filter-estado wa-select{
    width: 166%;
} */
#cont-filter-estado {
    min-width: 313px;
}
.input-facturar-porcentaje{
    width:45px;
    border-radius: 15px;
}

.icon-conceptos{
    font-size: 12px;
}
/* 1. FACTURAS RECHAZADAS (Rojo/Transparente) */
.btn-rechazada:hover::part(base) {
    background-color: #f8d7da !important; /* Rojo pastel muy suave */
    border-color: #f5c2c7 !important;
    color: #842029 !important;
}
.btn-rechazada::part(base) {
    background-color: #e6626f  !important; /* Un tono más oscuro */
    border-color: #ea868f !important;
}

/* 2. FACTURAS ACEPTADAS (Verde) */
.btn-aceptada::part(base) {
    background-color: #6be658 !important; /* Verde menta suave */
    border-color: #b5f0ac !important;
    color: #000000 !important; /* Texto verde bosque oscuro */
}
.btn-aceptada:hover::part(base) {
    background-color: #a3cfbb !important;
    border-color: #75b798 !important;
}
/* 3. FACTURAS PENDIENTES (Naranja) */
.btn-pendiente:hover::part(base) {
    background-color: #fff3cd !important; /* Crema amarillento */
    border-color: #ffecb5 !important;
    color: #664d03 !important; /* Texto ocre oscuro */
}
/* 3. FACTURAS REEMBOLSADA (Azul) */

.btn-reembolsada::part(base) {
    background-color: #5891e6 !important; /* Verde menta suave */
    border-color: #acb5f0 !important;
    color: #000000 !important; /* Texto verde bosque oscuro */
}
.btn-reembolsada:hover::part(base) {
    background-color: #a3aacf !important;
    border-color: #75b798 !important;
}
.btn-pendiente::part(base) {
    background-color: #ffda6a !important;
    border-color: #ffcd39 !important;
}
.btn-puede-facturar::part(base) {
    background-color: #d1e7dd !important; /* Verde menta suave */
    border-color: #badbcc !important;
    color: #0f5132 !important; /* Texto verde bosque oscuro */
}
.btn-puede-facturar:hover::part(base) {
    background-color: #a3cfbb !important;
    border-color: #75b798 !important;
}
.btn-nopuede-facturar::part(base) {
    background-color: #6be658 !important; /* Rojo pastel muy suave */
    border-color: #b5f0ac !important;
    color: #000000 !important;
}
.btn-nopuede-facturar:hover::part(base) {
    background-color: #6be65838 !important; /* Un tono más oscuro */
    border-color: #6be65838 !important;
}
.albaranes-resumen {
    /* font-family: sans-serif; */
    margin-bottom: 15px;
    padding: 12px;
    background-color: #d1e7dd82; 
    border-radius: 8px;
    border: 1px solid #f3f4f6;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.albaranes-titulo {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 8px;
}

/* #desplegable-facturas wa-dropdown-item, 
#desplegable-albaranes wa-dropdown-item {
    padding: 0 !important;
} */
/* #desplegable-facturas wa-icon,
#desplegable-albaranes wa-icon{
    
    margin-right: 6px;
    font-size: 12px;
} */
wa-dropdown::part(menu) {
    border-radius: 16px !important;
}

/* margenes del form factura y tamaño checks */
#form-facturar .table>thead>tr>th,
#form-facturar .table>tbody>tr>td
{
    padding: 4px 7px 4px 10px !important;
}
#form-facturar .table>thead>tr>th>wa-checkbox,
#form-facturar .table>tbody>tr>td>wa-checkbox
{
    font-size: 13px;
}
#desplegable-facturas wa-dropdown-item a,
#desplegable-albaranes wa-dropdown-item a{
    padding: 2px 5px !important;
}
#desplegable-facturas wa-dropdown-item wa-icon,
#desplegable-albaranes wa-dropdown-item wa-icon{
    padding-right: 10px;

}
#form-facturar #tablascroll td {
    vertical-align: top !important;
    padding: 10px !important;
}
.btn-facturar-disabled {
    cursor: none !important;
    opacity: 0.6; /* Opcional: para que se vea visualmente desactivado */
    pointer-events: none; /* Esto evita que el botón responda a clicks, pero cuidado: también puede ocultar el tooltip */
}
/* .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); 
} */

#modal::part(dialog){
    background-image: url(../../img/top-popup-morado5.png);
}
#modal::part(title){
    color:#ffffff;
}
#modal::part(close-button__base) {
    color: white !important;
}
.separador-desplegable{
   margin: 5px 5px;
}

/* ==========================================================================
   COMPONENTE: SELECCIÓN DE ROLES (DISEÑO NEUTRO Y REDONDEADO)
   ========================================================================== */

/* Contenedor principal: Centrado en pantalla con bordes muy curvados */
.modulo-seleccion-roles {
    max-width: 1200px; 
    margin: 40px auto;
    padding: 35px;
    background: #ffffff;
    border-radius: 20px; 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04); 
    text-align: center;
    box-sizing: border-box;
}

/* Textos principales */
.modulo-seleccion-roles .titulo-roles {
    color: #1e293b; 
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 8px;
}

.modulo-seleccion-roles .subtitulo-roles {
    color: #64748b; 
    font-size: 15px;
    margin-bottom: 30px;
}

/* Alerta informativa neutra */
.modulo-seleccion-roles .alerta-informativa-roles {
    border-radius: 12px;
    text-align: left;
    margin-bottom: 35px;
    border-left: 4px solid #64748b; 
    color: #334155;
}

/* Grid de tarjetas centrado */
.modulo-seleccion-roles .lista-roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 260px));
    gap: 25px;
    justify-content: center;
    margin-top: 12px;
}

.modulo-seleccion-roles .lista-roles-grid {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(240px, 260px)); */
    gap: 25px;
    justify-content: center;
    margin-top: 12px;
}

/* Tarjeta de rol redondeada y minimalista */
.modulo-seleccion-roles .tarjeta-rol-especifica {
    background: #ffffff;
    border: 1px solid #e2e8f0; 
    border-radius: 16px !important; 
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    
    width: 100%;
    min-width: 0; 
    overflow: hidden; 
}

/* Hover de la tarjeta neutra */
.modulo-seleccion-roles .tarjeta-rol-especifica:hover {
    transform: translateY(-5px);
    border-color: #94a3b8; 
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.06);
}

/* Cabecera interna de la tarjeta */
.modulo-seleccion-roles .cabecera-rol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    width: 100%;
}

/* Círculo neutro para el icono */
.modulo-seleccion-roles .icono-rol {
    font-size: 28px;
    color: #475569; 
    background: #f1f5f9; 
    padding: 16px;
    border-radius: 50%;
}

.modulo-seleccion-roles .nombre-perfil {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
}

/* CORRECCIÓN PARA EL WEB COMPONENT WA-BUTTON */
.modulo-seleccion-roles wa-button,
.modulo-seleccion-roles .enlace-acceso-rol {
    margin-top: auto;
    box-sizing: border-box;

    width: 212px;
    max-width: 212px;
    min-width: 212px;

    display: inline-block;
    overflow: hidden;
}

/* Control interno del botón del web component */
.modulo-seleccion-roles wa-button::part(base) {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Control del área de texto interna del botón */
.modulo-seleccion-roles wa-button::part(label) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    display: block;
}

/* Texto recortado con puntos suspensivos */
.modulo-seleccion-roles .texto-recortado {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    box-sizing: border-box;
    text-align: center;
    padding: 0 10px;
}

/* Mantiene el strong en línea para que forme parte del mismo texto recortado */
.modulo-seleccion-roles .enlace-acceso-rol strong,
.modulo-seleccion-roles wa-button strong {
    font-weight: 600;
    display: inline;
}
/* --------------- */
.contenedor-texto-aviso{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.icono-desactivar-aviso{
    display: flex;
    align-items: center;
    color: #6c34a3;
    cursor: pointer;
}
.contenedor-texto-aviso wa-tooltip {
    text-transform: none !important;
}





/* ==========================================================================
   COMPONENTE: SELECCIÓN DE ROLES (DISEÑO NEUTRO Y REDONDEADO)
   ========================================================================== */

/* Contenedor principal: Centrado en pantalla con bordes muy curvados */
.list-cards {

    padding: 35px;
    background: #ffffff;
    text-align: center;
    box-sizing: border-box;
}

/* Textos principales */
.list-cards .titulo-roles {
    color: #1e293b; 
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 8px;
}

.list-cards .subtitulo-roles {
    color: #64748b; 
    font-size: 15px;
    margin-bottom: 30px;
}

/* Alerta informativa neutra */
.list-cards .alerta-informativa-roles {
    border-radius: 12px;
    text-align: left;
    margin-bottom: 35px;
    border-left: 4px solid #64748b; 
    color: #334155;
}

/* Grid de tarjetas centrado */
.list-cards .lista-roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 400px));
    gap: 25px;
    justify-content: center;
    margin-top: 12px;
}

.list-cards .lista-roles-grid {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(240px, 260px)); */
    gap: 25px;
    justify-content: center;
    margin-top: 12px;
}

/* Tarjeta de rol redondeada y minimalista */
.list-cards .tarjeta-rol-especifica {
    background: #ffffff;
    border: 1px solid #e2e8f0; 
    border-radius: 16px !important; 
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    
    width: 100%;
    min-width: 0; 
    overflow: hidden; 
}

/* Hover de la tarjeta neutra */
.list-cards .tarjeta-rol-especifica:hover {
    transform: translateY(-5px);
    border-color: #94a3b8; 
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.06);
}

/* Cabecera interna de la tarjeta */
.list-cards .cabecera-rol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    width: 100%;
}

/* Círculo neutro para el icono */
.list-cards .icono-rol {
    font-size: 28px;
    color: #475569; 
    background: #f1f5f9; 
    padding: 16px;
    border-radius: 50%;
}

.list-cards .nombre-perfil {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
}

/* CORRECCIÓN PARA EL WEB COMPONENT WA-BUTTON */
.list-cards wa-button,
.list-cards .enlace-acceso-rol {
    margin-top: auto;
    box-sizing: border-box;


    display: inline-block;
    overflow: hidden;
}

/* Control interno del botón del web component */
.list-cards wa-button::part(base) {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Control del área de texto interna del botón */
.list-cards wa-button::part(label) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    display: block;
}

/* Texto recortado con puntos suspensivos */
.list-cards .texto-recortado {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    box-sizing: border-box;
    text-align: center;
    padding: 0 10px;
}

/* Mantiene el strong en línea para que forme parte del mismo texto recortado */
.list-cards .enlace-acceso-rol strong,
.list-cards wa-button strong {
    font-weight: 600;
    display: inline;
}
/* --------------- */
.sello-marca-rectificativa{
    transform: rotate(-25deg);
    color: #dc2626;
    font-size: 12px;
    font-weight: bold;
    border: 3px solid #dc2626;
    padding: 8px 16px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.8;
    user-select: none;
    margin-right: -72px;
    position: relative;
    top: -157px;
}