:root {
    --ad-tinta: #253046;
    --ad-texto: #566176;
    --ad-suave: #8992a5;
    --ad-fondo: #f6f7fb;
    --ad-superficie: #ffffff;
    --ad-borde: #e5e8f0;
    --ad-lavanda: #c5246d;
    --ad-lavanda-suave: #f9e7f0;
    --ad-violeta: #5c187e;
    --ad-coral: #f43f6d;
    --ad-menta: #278b73;
    --ad-menta-suave: #dcf4eb;
    --ad-durazno: #b96e45;
    --ad-durazno-suave: #fae9df;
    --ad-celeste: #3479a7;
    --ad-celeste-suave: #e1f1fa;
    --ad-rojo: #b34d5e;
    --ad-rojo-suave: #fae5e9;
    --ad-sombra: 0 12px 30px rgba(47, 54, 80, 0.07);
    --ad-sidebar: 248px;
}

/* Configuracion de correo */
.correo-config-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 16px;
    align-items: start;
}

.correo-config-principal,
.correo-config-lateral {
    min-width: 0;
}

.correo-config-lateral {
    position: sticky;
    top: 78px;
}

.correo-estado {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid #d9dee8;
    border-radius: 6px;
    color: #687086;
    background: #fff;
    font-size: .78rem;
    font-weight: 700;
}

.correo-estado.esta-verificado {
    border-color: #bfe3d0;
    color: #24734e;
    background: #f1fbf6;
}

.selector-proveedor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.opcion-proveedor {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 20px;
    gap: 12px;
    align-items: center;
    min-height: 74px;
    padding: 12px;
    border: 1px solid #dce1eb;
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
}

.opcion-proveedor:has(input:checked) {
    border-color: #c02667;
    box-shadow: 0 0 0 2px rgb(192 38 103 / 10%);
}

.opcion-proveedor input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.opcion-proveedor-icono {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 7px;
    background: #edf4ff;
    color: #2863ae;
    font-size: 1.15rem;
}

.opcion-proveedor-icono.gmail {
    background: #fff1f4;
    color: #c02667;
}

.opcion-proveedor strong,
.opcion-proveedor small {
    display: block;
}

.opcion-proveedor strong {
    color: #202637;
    font-size: .88rem;
}

.opcion-proveedor small {
    margin-top: 2px;
    color: #7a8298;
    font-size: .72rem;
}

.opcion-proveedor-check {
    color: #c02667;
    opacity: 0;
}

.opcion-proveedor:has(input:checked) .opcion-proveedor-check {
    opacity: 1;
}

.campo-guardado {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    color: #24734e;
    font-size: .7rem;
    font-weight: 700;
}

.cuenta-google-conectada {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #bfe3d0;
    border-radius: 7px;
    background: #f4fbf7;
    color: #24734e;
}

.cuenta-google-avatar {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #c02667;
}

.cuenta-google-conectada strong,
.cuenta-google-conectada span {
    display: block;
}

.cuenta-google-conectada span {
    color: #658170;
    font-size: .72rem;
}

.estado-vacio-correo,
.alerta-correo {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px;
    border-radius: 7px;
}

.estado-vacio-correo {
    border: 1px dashed #cfd5e1;
    color: #626a7e;
}

.alerta-correo {
    border: 1px solid #f0d6a6;
    background: #fffaf0;
    color: #805c20;
    font-size: .78rem;
}

.interruptor-correo {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid #e8ebf1;
}

.interruptor-correo strong,
.interruptor-correo small {
    display: block;
}

.interruptor-correo strong {
    font-size: .84rem;
}

.interruptor-correo small {
    margin-top: 2px;
    color: #7b8398;
    font-size: .69rem;
}

.correo-resumen {
    margin: 12px 0;
}

.correo-resumen div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: .74rem;
}

.correo-resumen dt {
    color: #7b8398;
    font-weight: 600;
}

.correo-resumen dd {
    margin: 0;
    color: #283044;
    font-weight: 700;
    text-align: right;
}

.ultimo-error-correo {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    padding: 9px;
    border-radius: 6px;
    background: #fff2f2;
    color: #a43a3a;
    font-size: .7rem;
    overflow-wrap: anywhere;
}

.prueba-correo-form {
    display: grid;
    grid-template-columns: minmax(190px, .6fr) minmax(300px, 1fr);
    gap: 18px;
    align-items: center;
}

.prueba-correo-form h2 {
    margin: 0;
    font-size: 1rem;
}

.prueba-correo-destino {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

@media (max-width: 991.98px) {
    .correo-config-layout {
        grid-template-columns: 1fr;
    }

    .correo-config-lateral {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .selector-proveedor,
    .prueba-correo-form,
    .prueba-correo-destino {
        grid-template-columns: 1fr;
    }

    .prueba-correo-destino .btn {
        width: 100%;
    }
}

/* Caja */
.caja-selector{align-items:end;display:grid;gap:20px;grid-template-columns:auto minmax(280px,1fr) minmax(260px,.8fr);margin-bottom:16px}
.caja-paso,.caja-cliente-resumen,.caja-item-cabecera,.caja-grupo-deuda header,.caja-concepto,.cuenta-formulario{align-items:center;display:flex}
.caja-paso{gap:10px;padding-bottom:5px}
.caja-paso>span,.caja-avatar{align-items:center;background:#fce7f0;border-radius:50%;color:#a11755;display:inline-flex;flex:0 0 40px;font-weight:800;height:40px;justify-content:center}
.caja-paso div,.caja-cliente-resumen div,.caja-grupo-deuda header div,.caja-concepto>div:first-child,.caja-item-cabecera>div{display:flex;flex-direction:column}
.caja-paso small,.caja-cliente-resumen small,.caja-grupo-deuda small,.caja-concepto small,.caja-item-canasta small{color:#778093;font-size:.76rem}
.caja-cliente-resumen{background:#f8fafc;border:1px solid #e7e9f0;border-radius:7px;gap:10px;min-height:64px;padding:9px 12px}
.caja-cliente-resumen #saldoCliente{color:#a11755;font-size:1.05rem}
.select2-container .select2-selection--single{align-items:center;border:1px solid #d9dce5;border-radius:7px;display:flex;height:44px}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:#303544;line-height:42px;padding-left:13px}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:42px}
.select2-container--default.select2-container--focus .select2-selection--single{border-color:#cb4a81;box-shadow:0 0 0 .2rem rgba(192,38,103,.11)}
.select2-dropdown{border-color:#d9dce5;border-radius:7px;box-shadow:0 12px 28px rgba(41,33,50,.12);overflow:hidden}
.select2-container--open{z-index:1070}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background:#bf2b69}
.caja-espera,.caja-vacio{align-items:center;color:#778093;display:flex;flex-direction:column;justify-content:center;min-height:300px;text-align:center}
.caja-espera>span{align-items:center;background:#f7edf3;border-radius:50%;color:#a11755;display:flex;font-size:1.6rem;height:64px;justify-content:center;margin-bottom:14px;width:64px}
.caja-espera h2{color:#303544;font-size:1.1rem;font-weight:700}.caja-espera p{font-size:.88rem}.caja-cargando{color:#778093;padding:60px;text-align:center}
.caja-layout{align-items:start;display:grid;gap:14px;grid-template-columns:minmax(0,1.6fr) minmax(330px,.7fr)}
.caja-deudas,.caja-canasta{margin:0}.caja-canasta{position:sticky;top:84px}
.caja-grupo-deuda{border:1px solid #e4e7ed;border-radius:7px;margin-top:8px;overflow:hidden}
.caja-grupo-deuda header{background:#f8fafc;gap:12px;justify-content:space-between;padding:8px 10px}
.caja-grupo-acciones{align-items:center!important;display:flex!important;flex-direction:row!important;gap:10px;margin-left:auto}.caja-grupo-acciones>span{color:#697184;font-size:.74rem;white-space:nowrap}.caja-grupo-acciones .btn{font-size:.73rem;min-height:30px;white-space:nowrap}
.caja-concepto{border-top:1px solid #edf0f4;gap:9px;min-height:54px;padding:7px 10px}
.caja-concepto>div:first-child{min-width:0}.caja-concepto>div:first-child strong,.caja-concepto>div:first-child small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.caja-concepto>div:first-child strong{font-size:.86rem}.caja-concepto>div:first-child small{font-size:.7rem}.caja-concepto-saldo{display:flex;flex-direction:column;margin-left:auto;min-width:92px;text-align:right}.caja-concepto-saldo strong{font-size:.86rem}.caja-concepto .btn{font-size:.73rem;min-width:82px;padding:4px 8px}
.caja-vacio{min-height:220px}.caja-vacio i{color:#28a77a;font-size:2rem;margin-bottom:8px}
.caja-canasta-contador{align-items:center;background:#fce7f0;border-radius:50%;color:#a11755;display:flex;font-size:.78rem;font-weight:800;height:30px;justify-content:center;width:30px}
.caja-canasta-vacia{align-items:center;color:#8990a0;display:flex;flex-direction:column;font-size:.82rem;gap:8px;padding:30px 15px;text-align:center}.caja-canasta-vacia i{font-size:1.7rem}
.caja-canasta-grupo{border:1px solid #e5e8ef;border-radius:7px;margin-top:8px;overflow:hidden}.caja-canasta-grupo>header{align-items:center;background:#f8fafc;display:flex;justify-content:space-between;padding:7px 9px}.caja-canasta-grupo>header strong{font-size:.78rem}.caja-canasta-grupo>header small{color:#7b8393;font-size:.68rem}
.caja-item-canasta{align-items:center;border-top:1px solid #edf0f4;display:grid;gap:7px;grid-template-columns:minmax(0,1fr) 105px 24px;padding:6px 7px}.caja-item-identidad{display:flex;flex-direction:column;min-width:0}.caja-item-identidad strong,.caja-item-identidad small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.caja-item-identidad strong{font-size:.76rem}.caja-item-identidad small{color:#7b8393;font-size:.65rem}
.caja-item-canasta>.btn{align-items:center;display:flex;height:24px;justify-content:center;margin:0;padding:0;width:24px}.caja-monto-compacto{position:relative}.caja-monto-compacto>span{color:#8a91a0;font-size:.72rem;left:8px;position:absolute;top:50%;transform:translateY(-50%);z-index:1}.caja-monto-compacto .form-control{font-size:.78rem;height:32px;padding:4px 5px 4px 20px;text-align:right}
.caja-datos-pago{border-top:1px solid #e5e8ef;display:grid;gap:8px;margin-top:10px;padding-top:10px}.caja-datos-pago .form-label{font-size:.72rem;margin-bottom:3px}.caja-datos-pago .form-control,.caja-datos-pago .form-select{font-size:.8rem;min-height:34px;padding-bottom:5px;padding-top:5px}.caja-total{align-items:center;border-top:1px solid #e5e7ec;display:flex;justify-content:space-between;margin-top:10px;padding:11px 0 8px}
.caja-total span{color:#626a79;font-size:.78rem}.caja-total strong{color:#9f1852;font-size:1.2rem}.caja-boton-pagar{min-height:38px}
.cuenta-formulario{align-items:end;gap:8px}.tabla-pagos{min-width:850px}
.boton-formato-impresion::after{display:none}.menu-formatos-impresion{min-width:190px;padding:6px}.menu-formatos-impresion .dropdown-item{align-items:center;border-radius:5px;display:flex;font-size:.84rem;gap:9px;padding:8px 10px}.menu-formatos-impresion .dropdown-item i{color:#a11755;font-size:1rem;width:18px}.menu-formatos-impresion .dropdown-header{color:#747d8f;font-size:.68rem;padding:5px 10px;text-transform:uppercase}
.filtros-pagos{align-items:end;display:grid;gap:10px;grid-template-columns:190px 190px 150px max-content max-content 38px;justify-content:start}.filtros-pagos .form-label{font-size:.76rem;margin-bottom:4px}.filtros-pagos .btn{min-height:38px}.filtros-pagos button[type=submit]{min-width:112px}.pagos-encabezado-tabla{align-items:center}.pagos-resumen{align-items:center;display:flex;gap:10px}.pagos-resumen>strong{color:#9f1852;font-size:.9rem}.pagos-total-anulado{color:#a33b4c;font-size:.76rem;font-weight:700}.tabla-historial-pagos{min-width:1120px}.pagos-vacio{align-items:center;color:#7b8393;display:flex;flex-direction:column;gap:4px;justify-content:center;min-height:180px;text-align:center}.pagos-vacio i{color:#a11755;font-size:1.7rem}.pagos-vacio strong{color:#303544;font-size:.9rem}.pagos-vacio span{font-size:.76rem}.estado-pago{align-items:center;border-radius:4px;display:inline-flex;font-size:.7rem;font-weight:700;gap:4px;padding:4px 7px;white-space:nowrap}.estado-pago-registrado{background:#e8f7ef;color:#197149}.estado-pago-anulado{background:#fdebed;color:#a22d40}.estado-pago-fecha{color:#858c99;display:block;font-size:.63rem;margin-top:3px;white-space:nowrap}.pago-anulado>td{background:#fffafb;color:#697184}.acciones-pago{align-items:center;display:flex;gap:5px;justify-content:flex-end}.acciones-pago>.btn,.acciones-pago .dropdown>.btn{align-items:center;display:inline-flex;height:34px;justify-content:center;width:36px}.resumen-anulacion-pago{align-items:center;background:#fff7f8;border:1px solid #f3d9df;border-radius:7px;display:flex;gap:10px;padding:11px}.resumen-anulacion-icono{align-items:center;background:#fde7eb;border-radius:50%;color:#a22d40;display:flex;flex:0 0 38px;height:38px;justify-content:center}.resumen-anulacion-pago>div{display:flex;flex-direction:column;min-width:0}.resumen-anulacion-pago small{color:#747d8f;font-size:.72rem}.resumen-anulacion-monto{color:#a22d40;margin-left:auto;white-space:nowrap}.anulacion-campos{display:grid;gap:10px;grid-template-columns:1fr 1fr}.anulacion-fecha{grid-column:1/-1}.detalle-anulacion-popup{display:grid;gap:5px 12px;grid-template-columns:90px 1fr;text-align:left}.detalle-anulacion-popup span{color:#7b8393;font-size:.75rem}.detalle-anulacion-popup strong{font-size:.82rem;overflow-wrap:anywhere}
.periodo-generacion-resumen{align-items:center;background:#f8fafc;border:1px solid #e3e7ef;border-radius:7px;display:flex;gap:12px;padding:14px}
.periodo-generacion-resumen>span{align-items:center;background:#fce7f0;border-radius:50%;color:#a11755;display:flex;font-size:1.15rem;height:44px;justify-content:center;width:44px}
.periodo-generacion-resumen div{display:flex;flex-direction:column}.periodo-generacion-resumen small{color:#778093;font-size:.76rem}.periodo-generacion-resumen strong{color:#303544;font-size:1.12rem}
.periodos-generados{border-top:1px solid #e7e9ef;margin-top:22px;padding-top:18px}.periodos-generados-titulo{align-items:center;display:flex;justify-content:space-between}
.periodos-generados-titulo div{display:flex;flex-direction:column}.periodos-generados-titulo small{color:#778093;font-size:.76rem}.periodos-generados-titulo>span{align-items:center;background:#f1f3f7;border-radius:50%;color:#596174;display:flex;font-size:.75rem;font-weight:700;height:28px;justify-content:center;width:28px}
.periodos-generados-lista{display:grid;gap:8px;margin-top:12px;max-height:210px;overflow:auto;padding-right:3px}.periodo-generado-item{align-items:center;border:1px solid #e7e9ef;border-radius:7px;display:flex;gap:10px;padding:10px 12px}
.periodo-generado-item>div{display:flex;flex-direction:column}.periodo-generado-item small{color:#778093;font-size:.74rem}.periodo-generado-check{align-items:center;background:#dcf4eb;border-radius:50%;color:#278b73;display:flex;flex:0 0 30px;height:30px;justify-content:center}
.periodos-generados-vacio{align-items:center;color:#8990a0;display:flex;flex-direction:column;font-size:.8rem;gap:7px;padding:24px 10px}.periodos-generados-vacio i{font-size:1.4rem}
.ajustes-layout{align-items:start;display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 340px}.ajustes-datos,.ajustes-logo{margin:0}.ajustes-logo{position:sticky;top:84px}
.ajustes-estado{align-items:center;background:#edf8f4;border-radius:6px;color:#277c67;display:flex;font-size:.72rem;font-weight:700;gap:5px;padding:6px 9px}
.logo-previsualizacion{align-items:center;aspect-ratio:16/9;background:#f8fafc;border:1px dashed #cfd5df;border-radius:7px;display:flex;justify-content:center;overflow:hidden;padding:18px}.logo-previsualizacion.tiene-logo{background:#fff;border-style:solid}.logo-previsualizacion img{height:100%;object-fit:contain;width:100%}
.logo-previsualizacion-vacia{align-items:center;color:#8a92a2;display:flex;flex-direction:column;text-align:center}.logo-previsualizacion-vacia i{color:#b22864;font-size:1.7rem;margin-bottom:5px}.logo-previsualizacion-vacia strong{color:#4e5667;font-size:.86rem}.logo-previsualizacion-vacia span{font-size:.72rem}
.archivo-logo-info{color:#7c8493;font-size:.7rem;margin-top:7px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.ajustes-quitar-logo{align-items:flex-start;border-top:1px solid #e8eaf0;display:flex;gap:9px;margin-top:14px;padding-top:13px}.ajustes-quitar-logo span{display:flex;flex-direction:column}.ajustes-quitar-logo strong{font-size:.78rem}.ajustes-quitar-logo small{color:#7c8493;font-size:.68rem}
.ajustes-acciones{align-items:center;background:#fff;border:1px solid #e4e7ee;border-radius:7px;display:flex;justify-content:flex-end;margin-top:14px;padding:10px 12px}.ajustes-acciones .btn{min-width:150px}
@media(max-width:991.98px){.caja-selector{grid-template-columns:1fr 2fr}.caja-cliente-resumen{grid-column:1/-1}.caja-layout{grid-template-columns:1fr}.caja-canasta{position:static}}
@media(min-width:768px){.tabla-pagos-responsive{overflow:visible}}
@media(max-width:767.98px){.filtros-pagos{grid-template-columns:1fr 1fr}.filtros-pagos .btn{width:100%}.pagos-encabezado-tabla{align-items:flex-start}.pagos-resumen{align-items:flex-end;flex-direction:column;gap:5px}}
@media(max-width:991.98px){.ajustes-layout{grid-template-columns:1fr}.ajustes-logo{position:static}}
@media(max-width:575.98px){.caja-selector{align-items:stretch;grid-template-columns:1fr}.caja-cliente-resumen{grid-column:auto}.caja-grupo-deuda header{align-items:flex-start;flex-direction:column}.caja-grupo-acciones{justify-content:space-between;margin-left:0;width:100%}.caja-concepto{align-items:stretch;flex-wrap:wrap}.caja-concepto>div:first-child{flex:1 1 calc(100% - 105px)}.caja-concepto .btn{width:100%}.cuenta-formulario{align-items:stretch;flex-direction:column}.ajustes-acciones{align-items:stretch;flex-direction:column;gap:10px}.ajustes-acciones .btn{width:100%}.filtros-pagos{grid-template-columns:1fr}.pagos-resumen{align-items:flex-start}.pagos-encabezado-tabla{gap:10px}.anulacion-campos{grid-template-columns:1fr}.anulacion-fecha{grid-column:auto}.resumen-anulacion-pago{align-items:flex-start;flex-wrap:wrap}.resumen-anulacion-monto{margin-left:48px}}

* {
    letter-spacing: 0;
}

html,
body {
    min-height: 100%;
}

body {
    background: var(--ad-fondo);
    color: var(--ad-tinta);
    font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.9rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ad-tinta);
    font-weight: 700;
}

.text-secondary {
    color: var(--ad-texto) !important;
}

.btn {
    align-items: center;
    border-radius: 7px;
    display: inline-flex;
    font-weight: 650;
    gap: 7px;
    justify-content: center;
    min-height: 38px;
    padding: 0.48rem 0.85rem;
}

.btn-sm {
    min-height: 32px;
}

.btn-primary {
    background: var(--ad-lavanda);
    border-color: var(--ad-lavanda);
    box-shadow: 0 5px 14px rgba(197, 36, 109, 0.2);
}

.btn-primary:hover,
.btn-primary:focus {
    background: #ac1d5e;
    border-color: #ac1d5e;
}

.btn-outline-primary {
    border-color: #edbfd4;
    color: #ad205f;
}

.btn-outline-primary:hover {
    background: var(--ad-lavanda-suave);
    border-color: #e9b2cb;
    color: #941a50;
}

.btn-outline-secondary {
    border-color: var(--ad-borde);
    color: var(--ad-texto);
}

.btn-outline-secondary:hover {
    background: #f0f2f7;
    border-color: #d8dce6;
    color: var(--ad-tinta);
}

.btn-outline-danger {
    border-color: #efc6ce;
    color: var(--ad-rojo);
}

.btn-outline-danger:hover,
.btn-danger {
    background: var(--ad-rojo);
    border-color: var(--ad-rojo);
    color: #fff;
}

.form-label {
    color: #455066;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.42rem;
}

.form-control,
.form-select,
.input-group-text {
    border-color: var(--ad-borde);
    border-radius: 7px;
    min-height: 42px;
}

.form-control,
.form-select {
    color: var(--ad-tinta);
}

.form-control:focus,
.form-select:focus {
    border-color: #dc79a7;
    box-shadow: 0 0 0 3px rgba(197, 36, 109, 0.11);
}

.input-group .input-group-text {
    background: #fafaff;
    color: var(--ad-suave);
    padding-inline: 13px;
}

.input-group .form-control {
    border-left: 0;
}

.form-check-input:checked {
    background-color: var(--ad-lavanda);
    border-color: var(--ad-lavanda);
}

.alert {
    border: 0;
    border-radius: 8px;
    font-size: 0.86rem;
}

.alert-success {
    background: var(--ad-menta-suave);
    color: #246b5c;
}

.alert-danger {
    background: var(--ad-rojo-suave);
    color: #8f3e4c;
}

.alert-warning {
    background: #fff2d8;
    color: #8c6726;
}

/* Estructura principal */
.app-wrapper {
    background: var(--ad-fondo);
}

.app-sidebar {
    background: var(--ad-superficie) !important;
    border-right: 1px solid var(--ad-borde);
    box-shadow: none !important;
    width: var(--ad-sidebar);
}

.sidebar-brand {
    align-items: center;
    border-bottom: 0 !important;
    display: flex;
    height: 72px;
    padding: 0 22px;
}

.marca-producto {
    align-items: center;
    color: var(--ad-tinta);
    display: flex;
    gap: 11px;
    text-decoration: none;
}

.marca-producto:hover {
    color: var(--ad-tinta);
}

.marca-logo-img {
    display: block;
    height: 34px;
    object-fit: contain;
    width: 56px;
}

.marca-producto-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.marca-producto-texto strong {
    font-size: 0.95rem;
}

.marca-producto-texto span {
    color: var(--ad-suave);
    font-size: 0.68rem;
    margin-top: 3px;
}

.sidebar-wrapper {
    padding: 14px 12px;
}

.nav-etiqueta {
    color: #a0a7b6;
    font-size: 0.67rem;
    font-weight: 750;
    margin: 10px 12px 7px;
    text-transform: uppercase;
}

.sidebar-menu .nav-link {
    align-items: center;
    border-radius: 7px;
    color: #697287;
    display: flex;
    margin-bottom: 4px;
    min-height: 42px;
    padding: 9px 12px;
}

.sidebar-menu .nav-link:hover {
    background: #fdf4f8;
    color: #a51d59;
}

.sidebar-menu .nav-link.active {
    background: var(--ad-lavanda-suave) !important;
    box-shadow: none;
    color: #a51d59 !important;
    font-weight: 700;
}

.sidebar-menu .nav-icon {
    font-size: 1rem !important;
    margin-right: 10px !important;
    width: 20px !important;
}

.sidebar-menu .nav-link p {
    font-size: 0.84rem;
}

.app-header {
    background: rgba(246, 247, 251, 0.96) !important;
    border-bottom: 1px solid var(--ad-borde);
    box-shadow: none;
    min-height: 64px;
    padding: 9px 22px;
}

.boton-menu {
    border: 0;
    color: var(--ad-texto);
    display: none;
    height: 36px;
    padding: 0;
    width: 36px;
}

.encabezado-contexto {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.encabezado-contexto strong {
    font-size: 0.9rem;
}

.encabezado-contexto span {
    color: var(--ad-suave);
    font-size: 0.7rem;
    margin-top: 3px;
}

.usuario-cabecera {
    align-items: center;
    display: flex;
    gap: 9px;
}

.usuario-menu {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--ad-tinta);
    display: flex;
    gap: 9px;
    min-height: 44px;
    padding: 4px 7px;
}

.usuario-menu:hover,
.usuario-menu[aria-expanded="true"] {
    background: #fff;
    border-color: var(--ad-borde);
}

.usuario-avatar {
    align-items: center;
    background: #fde8ee;
    border: 1px solid #f5cad7;
    border-radius: 8px;
    color: #ad205f;
    display: inline-flex;
    font-weight: 800;
    height: 36px;
    justify-content: center;
    text-transform: uppercase;
    width: 36px;
}

.usuario-menu-flecha {
    color: var(--ad-suave);
    font-size: 0.7rem;
    margin-inline: 2px;
}

.usuario-datos {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    max-width: 220px;
}

.usuario-datos strong {
    font-size: 0.76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usuario-datos span {
    color: var(--ad-suave);
    font-size: 0.68rem;
    margin-top: 2px;
}

.menu-perfil {
    border: 1px solid var(--ad-borde);
    border-radius: 8px;
    box-shadow: var(--ad-sombra);
    margin-top: 7px !important;
    min-width: 248px;
    padding: 7px;
}

.menu-perfil-cabecera {
    display: flex;
    flex-direction: column;
    max-width: 232px;
    padding: 9px 10px 7px;
}

.menu-perfil-cabecera strong {
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-perfil-cabecera span {
    color: var(--ad-suave);
    font-size: 0.68rem;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-perfil .dropdown-divider {
    border-color: var(--ad-borde);
    margin: 5px 0;
}

.menu-perfil .dropdown-item {
    align-items: center;
    border: 0;
    border-radius: 6px;
    color: var(--ad-texto);
    display: flex;
    font-size: 0.78rem;
    gap: 9px;
    min-height: 38px;
    padding: 8px 10px;
}

.menu-perfil .dropdown-item:hover {
    background: var(--ad-lavanda-suave);
    color: #a51d59;
}

.menu-perfil .dropdown-item-salir:hover {
    background: var(--ad-rojo-suave);
    color: var(--ad-rojo);
}

.menu-perfil form {
    margin: 0;
}

.perfil-identidad {
    align-items: center;
    background: #fafbfe;
    border: 1px solid var(--ad-borde);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    padding: 13px;
}

.perfil-avatar {
    flex: 0 0 42px;
    height: 42px;
    width: 42px;
}

.perfil-identidad > div {
    display: flex;
    flex-direction: column;
}

.perfil-identidad strong {
    font-size: 0.82rem;
}

.perfil-identidad span {
    color: var(--ad-suave);
    font-size: 0.68rem;
    margin-top: 3px;
}

.separador-perfil {
    align-items: center;
    color: var(--ad-suave);
    display: flex;
    font-size: 0.66rem;
    font-weight: 750;
    gap: 10px;
    margin: 20px 0 4px;
    text-transform: uppercase;
}

.separador-perfil::before,
.separador-perfil::after {
    background: var(--ad-borde);
    content: "";
    flex: 1;
    height: 1px;
}

.popup-exito .modal-body {
    padding: 28px 26px 24px;
}

.popup-exito-icono {
    align-items: center;
    background: var(--ad-menta-suave);
    border: 1px solid #bee6da;
    border-radius: 8px;
    color: var(--ad-menta);
    display: flex;
    font-size: 1.35rem;
    height: 52px;
    justify-content: center;
    margin: 0 auto 18px;
    width: 52px;
}

.popup-exito h2 {
    font-size: 1.12rem;
    margin-bottom: 8px;
}

.popup-exito p {
    color: var(--ad-texto);
    font-size: 0.78rem;
    line-height: 1.55;
    margin: 0 0 22px;
}

.app-main {
    background: var(--ad-fondo);
}

.app-content-header {
    padding: 26px 28px 18px;
}

.app-content-header h1 {
    font-size: 1.45rem;
}

.app-content {
    padding: 0 28px 30px;
}

.app-content > .container-fluid,
.app-content-header > .container-fluid {
    max-width: 1480px;
}

.pagina-descripcion {
    color: var(--ad-texto);
    font-size: 0.8rem;
    margin: 4px 0 0;
}

/* Métricas y contenido */
.metric-card {
    background: var(--ad-superficie);
    border: 1px solid var(--ad-borde);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    min-height: 116px;
    padding: 19px;
}

.metric-card-contenido {
    display: flex;
    flex-direction: column;
}

.metric-card-etiqueta {
    color: var(--ad-texto);
    font-size: 0.75rem;
    font-weight: 650;
}

.metric-card-valor {
    color: var(--ad-tinta);
    font-size: 1.65rem;
    font-weight: 750;
    line-height: 1.15;
    margin-top: 10px;
    overflow-wrap: anywhere;
}

.metric-card-nota {
    color: var(--ad-suave);
    font-size: 0.68rem;
    margin-top: 5px;
}

.metric-card-icono {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 40px;
    font-size: 1.05rem;
    height: 40px;
    justify-content: center;
}

.metric-lavanda .metric-card-icono {
    background: var(--ad-lavanda-suave);
    color: var(--ad-lavanda);
}

.metric-menta .metric-card-icono {
    background: var(--ad-menta-suave);
    color: var(--ad-menta);
}

.metric-durazno .metric-card-icono {
    background: var(--ad-durazno-suave);
    color: var(--ad-durazno);
}

.metric-celeste .metric-card-icono {
    background: var(--ad-celeste-suave);
    color: var(--ad-celeste);
}

.bloque-operativo {
    background: var(--ad-superficie);
    border: 1px solid var(--ad-borde);
    border-radius: 8px;
    margin-top: 18px;
    padding: 20px;
}

.bloque-operativo h2 {
    font-size: 1rem;
    margin-bottom: 14px;
}

.encabezado-bloque {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.encabezado-bloque h2 {
    margin: 0;
}

.contador-registros {
    background: #f3f4f8;
    border-radius: 6px;
    color: var(--ad-texto);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 5px 8px;
}

.contador-papelera {
    align-items: center;
    background: var(--ad-rojo-suave);
    border-radius: 6px;
    color: var(--ad-rojo);
    display: inline-flex;
    font-size: 0.65rem;
    height: 20px;
    justify-content: center;
    min-width: 20px;
    padding-inline: 5px;
}

.papelera-vacia {
    align-items: center;
    color: var(--ad-texto);
    display: flex;
    flex-direction: column;
    padding: 30px 16px;
    text-align: center;
}

.papelera-vacia > span {
    align-items: center;
    background: #f1f2f6;
    border-radius: 8px;
    color: var(--ad-suave);
    display: inline-flex;
    font-size: 1.15rem;
    height: 46px;
    justify-content: center;
    margin-bottom: 12px;
    width: 46px;
}

.papelera-vacia strong {
    color: var(--ad-tinta);
    font-size: 0.86rem;
}

.papelera-vacia p {
    font-size: 0.72rem;
    margin: 4px 0 0;
}

.table {
    color: var(--ad-tinta);
    margin: 0;
}

.table > :not(caption) > * > * {
    border-bottom-color: #edf0f5;
    padding: 0.86rem 0.72rem;
}

.table > thead th {
    background: #fafbfc;
    border-bottom-width: 1px;
    color: #81899a;
    font-size: 0.67rem;
    font-weight: 800;
    text-transform: uppercase;
}

.table-hover > tbody > tr:hover > * {
    background: #fbfbfe;
}

.empresa-principal {
    align-items: center;
    display: flex;
    gap: 11px;
}

.empresa-inicial {
    align-items: center;
    background: var(--ad-celeste-suave);
    border-radius: 7px;
    color: var(--ad-celeste);
    display: inline-flex;
    flex: 0 0 36px;
    font-size: 0.78rem;
    font-weight: 800;
    height: 36px;
    justify-content: center;
    text-transform: uppercase;
}

.empresa-principal strong {
    display: block;
    font-size: 0.8rem;
}

.empresa-principal small {
    color: var(--ad-suave);
    display: block;
    font-size: 0.68rem;
    margin-top: 2px;
}

.badge {
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 750;
    padding: 0.38rem 0.52rem;
}

.badge-tipo-plataforma {
    background: var(--ad-lavanda-suave);
    color: #a51d59;
}

.badge-tipo-cliente {
    background: var(--ad-celeste-suave);
    color: #2c729f;
}

.badge-estado-activa {
    background: var(--ad-menta-suave);
    color: #27715f;
}

.badge-estado-inactiva {
    background: #eef0f4;
    color: #737b8b;
}

.estado-punto {
    background: currentColor;
    border-radius: 50%;
    display: inline-block;
    height: 5px;
    margin-right: 5px;
    vertical-align: 1px;
    width: 5px;
}

.acciones-empresa form {
    margin: 0;
}

.acciones-empresa .btn {
    height: 32px;
    min-height: 32px;
    padding: 0;
    width: 32px;
}

.filtros-usuarios {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(240px, 1fr) minmax(180px, 240px) minmax(150px, 190px);
    margin-bottom: 14px;
}

.buscador-tabla {
    position: relative;
}

.buscador-tabla > i {
    color: var(--ad-suave);
    left: 13px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.buscador-tabla .form-control {
    padding-left: 38px;
}

.usuario-inicial {
    align-items: center;
    background: var(--ad-lavanda-suave);
    border-radius: 7px;
    color: #a51d59;
    display: inline-flex;
    flex: 0 0 36px;
    font-size: 0.78rem;
    font-weight: 800;
    height: 36px;
    justify-content: center;
    text-transform: uppercase;
}

.etiqueta-tu {
    background: #f1f2f6;
    border-radius: 5px;
    color: var(--ad-suave);
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 800;
    margin-left: 5px;
    padding: 2px 5px;
    vertical-align: 1px;
}

.badge-rol {
    background: var(--ad-durazno-suave);
    color: #9a563e;
}

.fecha-acceso {
    color: var(--ad-texto);
    font-size: 0.72rem;
    white-space: nowrap;
}

.acciones-registro form {
    margin: 0;
}

.acciones-registro .btn {
    height: 32px;
    min-height: 32px;
    padding: 0;
    width: 32px;
}

.filtros-clientes {
    grid-template-columns: minmax(260px, 1fr) minmax(160px, 210px) minmax(150px, 190px);
}

.cliente-inicial {
    align-items: center;
    background: var(--ad-menta-suave);
    border-radius: 7px;
    color: #27715f;
    display: inline-flex;
    flex: 0 0 36px;
    font-size: 0.78rem;
    font-weight: 800;
    height: 36px;
    justify-content: center;
    text-transform: uppercase;
}

.seccion-formulario-cliente {
    border-bottom: 1px solid var(--ad-borde);
    padding-bottom: 20px;
}

.seccion-formulario-cliente + .seccion-formulario-cliente {
    padding-top: 20px;
}

.seccion-formulario-cliente h3 {
    font-size: 0.82rem;
    margin: 0 0 14px;
}

/* Modales */
.modal-backdrop {
    background: #2e3446;
}

.modal-content {
    border: 1px solid var(--ad-borde);
    border-radius: 8px;
    box-shadow: 0 22px 60px rgba(37, 48, 70, 0.18);
}

.modal-header,
.modal-footer {
    border-color: var(--ad-borde);
    padding: 16px 20px;
}

.modal-body {
    padding: 20px;
}

.seccion-modal {
    background: #fafbfe;
    border: 1px solid var(--ad-borde);
    border-radius: 8px;
    padding: 18px;
}

/* Acceso */
.contenedor-login {
    align-items: center;
    background: #f3f4f8;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 28px;
}

.panel-login {
    background: var(--ad-superficie);
    border: 1px solid var(--ad-borde);
    border-radius: 8px;
    box-shadow: var(--ad-sombra);
    max-width: 430px;
    padding: 30px;
    position: relative;
    width: 100%;
}

.login-layout {
    background: var(--ad-superficie);
    border: 1px solid #dde1ea;
    border-radius: 8px;
    box-shadow: 0 26px 70px rgba(42, 48, 70, 0.12);
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(420px, 0.88fr);
    min-height: min(720px, calc(100vh - 56px));
    overflow: hidden;
    width: min(1180px, 100%);
}

.login-visual {
    background: #e9e7ef;
    min-height: 100%;
    overflow: hidden;
    position: relative;
}

.login-visual::after {
    background: rgba(38, 42, 58, 0.08);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.login-visual > img {
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    position: absolute;
    width: 100%;
}

.login-visual-marca {
    align-items: center;
    display: flex;
    gap: 12px;
    left: 32px;
    position: absolute;
    top: 30px;
    z-index: 1;
}

.login-logo-oficial {
    display: block;
    height: auto;
    object-fit: contain;
    width: 116px;
}

.login-marca-mobile .login-logo-oficial {
    width: 110px;
}

.login-visual-marca .login-logo-oficial {
    filter: drop-shadow(0 3px 10px rgba(77, 18, 91, 0.14));
    width: 124px;
}

.login-visual-pie {
    bottom: 28px;
    left: 30px;
    position: absolute;
    z-index: 1;
}

.login-visual-pie span {
    align-items: center;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 7px;
    color: #4f586c;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 700;
    gap: 7px;
    padding: 8px 11px;
}

.login-formulario {
    align-self: center;
    margin-inline: auto;
    padding: 50px 56px;
    width: 100%;
}

.login-marca-mobile {
    align-items: center;
    display: none;
    gap: 11px;
    margin-bottom: 42px;
}

.login-encabezado {
    margin-bottom: 30px;
}

.login-eyebrow {
    color: var(--ad-lavanda);
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.login-encabezado h1 {
    font-size: 1.8rem;
    line-height: 1.2;
    margin: 0;
}

.login-encabezado p {
    color: var(--ad-texto);
    font-size: 0.86rem;
    margin: 8px 0 0;
}

.formulario-acceso {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.campo-login .form-label {
    margin-bottom: 7px;
}

.control-login {
    position: relative;
}

.control-login > i {
    color: #9299aa;
    font-size: 0.95rem;
    left: 15px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.control-login .form-control {
    background: #fafbfe;
    border-color: #e1e4ec;
    height: 48px;
    padding-left: 43px;
    padding-right: 44px;
}

.control-login .form-control::placeholder {
    color: #adb3c1;
}

.control-login .form-control:focus {
    background: #fff;
}

.boton-ver-clave {
    align-items: center;
    background: transparent;
    border: 0;
    color: #9299aa;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 38px;
}

.boton-ver-clave:hover,
.boton-ver-clave:focus {
    color: var(--ad-lavanda);
}

.recordar-sesion {
    align-items: center;
    color: var(--ad-texto);
    cursor: pointer;
    display: flex;
    gap: 10px;
    margin-top: -2px;
    width: fit-content;
}

.recordar-sesion input {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.recordar-control {
    align-items: center;
    background: #fafbfe;
    border: 1px solid #d9dce6;
    border-radius: 6px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 21px;
    height: 21px;
    justify-content: center;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.recordar-control i {
    font-size: 0.8rem;
    opacity: 0;
}

.recordar-sesion input:checked + .recordar-control {
    background: var(--ad-lavanda);
    border-color: var(--ad-lavanda);
}

.recordar-sesion input:checked + .recordar-control i {
    opacity: 1;
}

.recordar-sesion input:focus-visible + .recordar-control {
    box-shadow: 0 0 0 3px rgba(108, 76, 155, 0.16);
}

.recordar-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.recordar-texto strong {
    font-size: 0.76rem;
    font-weight: 700;
}

.recordar-texto small {
    color: var(--ad-suave);
    font-size: 0.65rem;
    margin-top: 2px;
}

.boton-ingreso {
    height: 48px;
    justify-content: space-between;
    margin-top: 4px;
    padding-inline: 18px;
    width: 100%;
}

.login-confianza {
    align-items: center;
    border-top: 1px solid #eceef3;
    color: var(--ad-suave);
    display: flex;
    font-size: 0.65rem;
    gap: 18px;
    justify-content: center;
    margin-top: 34px;
    padding-top: 18px;
}

.login-confianza span {
    align-items: center;
    display: inline-flex;
    gap: 5px;
}

.login-formulario .alert {
    align-items: flex-start;
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.selector-empresa-pagina {
    background:
        linear-gradient(135deg, rgba(84, 34, 107, 0.07), transparent 42%),
        #f4f5f9;
}

.selector-empresa-panel {
    background: var(--ad-superficie);
    border: 1px solid #dde1ea;
    border-radius: 8px;
    box-shadow: 0 26px 70px rgba(42, 48, 70, 0.12);
    padding: 42px;
    width: min(620px, 100%);
}

.selector-empresa-cabecera {
    margin-bottom: 26px;
}

.selector-empresa-logo {
    display: block;
    height: auto;
    margin-bottom: 34px;
    width: 116px;
}

.selector-empresa-cabecera h1 {
    font-size: 1.75rem;
    line-height: 1.25;
    margin: 0;
}

.selector-empresa-cabecera p {
    color: var(--ad-suave);
    font-size: 0.86rem;
    margin: 8px 0 0;
}

.selector-empresa-alerta {
    align-items: flex-start;
    display: flex;
    gap: 8px;
}

.selector-empresa-formulario {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.selector-empresa-lista {
    display: grid;
    gap: 10px;
}

.selector-empresa-opcion {
    align-items: center;
    background: #fafbfe;
    border: 1px solid #e0e3eb;
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    gap: 13px;
    grid-template-columns: 42px minmax(0, 1fr) 28px;
    min-height: 72px;
    padding: 12px 14px;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.selector-empresa-opcion:hover {
    background: #fff;
    border-color: #cfc6da;
}

.selector-empresa-opcion:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(108, 76, 155, 0.14);
}

.selector-empresa-opcion:has(input:checked) {
    background: #fbf8fd;
    border-color: var(--ad-lavanda);
}

.selector-empresa-opcion input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.selector-empresa-icono {
    align-items: center;
    background: #f0e9f4;
    border-radius: 8px;
    color: var(--ad-lavanda);
    display: inline-flex;
    font-size: 1rem;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.selector-empresa-datos {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.selector-empresa-datos strong {
    color: var(--ad-texto);
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.selector-empresa-datos small {
    color: var(--ad-suave);
    font-size: 0.67rem;
    margin-top: 3px;
}

.selector-empresa-marca {
    align-items: center;
    border: 1px solid #d8dbe4;
    border-radius: 50%;
    color: transparent;
    display: inline-flex;
    height: 22px;
    justify-content: center;
    width: 22px;
}

.selector-empresa-opcion:has(input:checked) .selector-empresa-marca {
    background: var(--ad-lavanda);
    border-color: var(--ad-lavanda);
    color: #fff;
}

.selector-empresa-cancelar {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.selector-empresa-cancelar .btn {
    color: var(--ad-suave);
    font-size: 0.72rem;
    text-decoration: none;
}

.selector-empresa-cancelar .btn:hover {
    color: var(--ad-lavanda);
}

.selector-empresa-seguridad {
    border-top: 1px solid #eceef3;
    color: var(--ad-suave);
    font-size: 0.65rem;
    margin-top: 20px;
    padding-top: 18px;
    text-align: center;
}

.selector-empresa-seguridad i {
    margin-right: 5px;
}

.portal-acceso-config {
    background: #faf8fc;
    border: 1px solid #e7dfeb;
    border-radius: 8px;
    padding: 18px;
}

.portal-acceso-config .form-switch {
    flex: 0 0 auto;
}

.portal-lista-datos {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.portal-lista-datos > div {
    border-bottom: 1px solid #eceef3;
    min-width: 0;
    padding: 15px 12px 15px 0;
}

.portal-lista-datos dt {
    color: var(--ad-suave);
    font-size: 0.68rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.portal-lista-datos dd {
    color: var(--ad-texto);
    font-size: 0.82rem;
    margin: 0;
    overflow-wrap: anywhere;
}

.estado-cuenta-ficha {
    border-top: 1px solid var(--ad-borde);
    margin-top: 18px;
}

.filtro-estado-cuenta {
    margin-bottom: 14px;
    padding-block: 14px;
}

.filtro-estado-cuenta-formulario {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(260px, 1fr) 170px 170px auto 42px;
}

.filtro-estado-cuenta-contexto {
    align-items: center;
    display: flex;
    gap: 11px;
    min-width: 0;
    padding-bottom: 2px;
}

.filtro-estado-cuenta-contexto > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.filtro-estado-cuenta-contexto strong {
    font-size: 0.82rem;
}

.filtro-estado-cuenta-contexto small {
    color: var(--ad-suave);
    font-size: 0.68rem;
}

.filtro-estado-cuenta-icono {
    align-items: center;
    background: var(--ad-rojo-suave);
    border-radius: 8px;
    color: var(--ad-primario);
    display: inline-flex;
    flex: 0 0 38px;
    height: 38px;
    justify-content: center;
}

.filtro-estado-cuenta-formulario .form-label {
    font-size: 0.66rem;
    margin-bottom: 4px;
}

.filtro-estado-cuenta-formulario .form-control,
.filtro-estado-cuenta-formulario .btn {
    min-height: 40px;
}

.estado-cuenta-resumen-cliente {
    border-top: 1px solid var(--ad-borde);
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 18px;
}

.estado-cuenta-resumen-cliente > div {
    min-width: 0;
    padding: 16px 18px 2px 0;
}

.estado-cuenta-resumen-cliente span,
.resumen-pagos-cliente span,
.detalle-anulacion-pago span {
    color: var(--ad-suave);
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.estado-cuenta-resumen-cliente strong {
    display: block;
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.estado-cuenta-resumen-cliente .texto-saldo-cliente {
    color: var(--ad-primario);
    font-size: 1rem;
}

.boton-ficha-cliente {
    align-items: center;
    display: inline-flex;
    gap: 7px;
}

.boton-ficha-cliente .indicador-despliegue {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.boton-ficha-cliente[aria-expanded="true"] .indicador-despliegue {
    transform: rotate(180deg);
}

.estado-cuenta-grupo {
    padding-top: 18px;
}

.estado-cuenta-grupo + .estado-cuenta-grupo {
    border-top: 1px solid var(--ad-borde);
    margin-top: 4px;
}

.estado-cuenta-grupo h3 {
    font-size: 0.78rem;
    margin: 0 0 2px;
}

.estado-cuenta-datos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.estado-cuenta-dato-ancho {
    grid-column: span 2;
}

.estado-cuenta-datos a {
    color: var(--ad-primario);
    text-decoration: none;
}

.estado-cuenta-datos a:hover {
    text-decoration: underline;
}

.estado-cuenta-observaciones {
    border-top: 1px solid var(--ad-borde);
    margin-top: 4px;
    padding-top: 18px;
}

.estado-cuenta-observaciones span {
    color: var(--ad-suave);
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.estado-cuenta-observaciones p {
    font-size: 0.82rem;
    margin: 0;
    overflow-wrap: anywhere;
}

.resumen-pagos-cliente {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-bottom: 10px;
}

.resumen-pagos-cliente > div {
    min-width: 150px;
}

.resumen-pagos-cliente strong {
    display: block;
    font-size: 1rem;
}

.tabla-pagos-cliente {
    min-width: 920px;
}

.boton-info-anulacion {
    color: var(--ad-suave);
    line-height: 1;
    padding: 2px 4px;
    vertical-align: middle;
}

.fila-anulacion-pago > td {
    background: #faf9fc;
    padding: 0 !important;
}

.detalle-anulacion-pago {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(150px, 1fr));
    padding: 14px 18px;
}

.detalle-anulacion-pago strong {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.importacion-pasos {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 14px;
}

.importacion-pasos > div {
    align-items: center;
    border-bottom: 2px solid var(--ad-borde);
    color: var(--ad-suave);
    display: flex;
    gap: 9px;
    min-width: 0;
    padding: 0 4px 10px;
}

.importacion-pasos > div > span {
    align-items: center;
    border: 1px solid var(--ad-borde);
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 28px;
    font-size: 0.7rem;
    font-weight: 700;
    height: 28px;
    justify-content: center;
}

.importacion-pasos > div > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.importacion-pasos strong {
    font-size: 0.75rem;
}

.importacion-pasos small {
    font-size: 0.64rem;
}

.importacion-pasos .activo {
    border-bottom-color: var(--ad-primario);
    color: var(--ad-texto);
}

.importacion-pasos .activo > span {
    background: var(--ad-rojo-suave);
    border-color: #efbfd0;
    color: var(--ad-primario);
}

.importacion-selector {
    align-items: center;
    background: #fbfbfd;
    border: 1px dashed #cfd4df;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    gap: 14px;
    min-height: 96px;
    padding: 18px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.importacion-selector:hover,
.importacion-selector:focus-within {
    background: #fffafb;
    border-color: var(--ad-primario);
}

.importacion-selector input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.importacion-selector-icono {
    align-items: center;
    background: var(--ad-rojo-suave);
    border-radius: 8px;
    color: var(--ad-primario);
    display: inline-flex;
    flex: 0 0 48px;
    font-size: 1.25rem;
    height: 48px;
    justify-content: center;
}

.importacion-selector-texto {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.importacion-selector-texto strong {
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.importacion-selector-texto small {
    color: var(--ad-suave);
    font-size: 0.7rem;
}

.importacion-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.importacion-columnas {
    border-top: 1px solid var(--ad-borde);
    margin-top: 16px;
    padding-top: 14px;
}

.importacion-columnas-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.importacion-columnas code {
    background: #f4f5f8;
    border: 1px solid #e4e6ec;
    border-radius: 5px;
    color: var(--ad-texto);
    font-size: 0.68rem;
    padding: 4px 7px;
}

.importacion-columnas p {
    color: var(--ad-suave);
    font-size: 0.72rem;
    margin: 10px 0 0;
}

.importacion-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.importacion-resumen > span {
    background: #f3f4f7;
    border-radius: 6px;
    color: var(--ad-suave);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 6px 8px;
}

.importacion-resumen .importacion-resumen-valido {
    background: #eaf7f0;
    color: #347357;
}

.importacion-resumen .importacion-resumen-error {
    background: #fff1e8;
    color: #a65a32;
}

.importacion-alerta {
    font-size: 0.76rem;
    margin-bottom: 10px;
    padding: 10px 12px;
}

.tabla-importacion-clientes {
    min-width: 980px;
}

.importacion-fila-error > td {
    background: #fffaf7;
}

.importacion-estado-valido {
    color: #347357;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.importacion-errores {
    color: #a65a32;
    display: flex;
    flex-direction: column;
    font-size: 0.7rem;
    gap: 3px;
    max-width: 340px;
}

.importacion-limite-vista {
    color: var(--ad-suave);
    font-size: 0.7rem;
    margin: 10px 0 0;
}

.importacion-confirmacion {
    align-items: center;
    border-top: 1px solid var(--ad-borde);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 14px;
}

.importacion-confirmacion > div {
    display: flex;
    flex-direction: column;
}

.importacion-confirmacion strong {
    font-size: 0.8rem;
}

.importacion-confirmacion small {
    color: var(--ad-suave);
    font-size: 0.68rem;
}

.portal-direccion {
    color: var(--ad-texto);
    display: flex;
    flex-direction: column;
    font-size: 0.82rem;
    font-style: normal;
    gap: 5px;
    margin: 8px 0 0;
}

.filtros-cobros {
    grid-template-columns: minmax(260px, 1fr) minmax(180px, 240px);
}

.tabla-cobros {
    min-width: 1080px;
}

.fila-detalles-cobro > td {
    background: #faf9fc;
    padding: 0 !important;
}

.detalle-cobro-desplegable {
    border-bottom: 1px solid #e5e1e9;
    padding: 14px 18px 18px 42px;
}

.detalle-cobro-encabezado {
    align-items: baseline;
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

.detalle-cobro-encabezado strong {
    font-size: 0.76rem;
}

.detalle-cobro-encabezado span {
    color: var(--ad-suave);
    font-size: 0.66rem;
}

.detalle-cobro-desplegable .table {
    min-width: 620px;
}

.detalle-cobro-desplegable .table th {
    background: transparent;
    font-size: 0.62rem;
}

.detalle-cobro-desplegable .table td {
    background: transparent;
    border-color: #ece8ef;
    font-size: 0.72rem;
}

.boton-detalles-cobro i {
    display: inline-block;
    transition: transform 160ms ease;
}

.boton-detalles-cobro[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.tabla-categorias-cobros {
    min-width: 760px;
}

.tabla-cobros-portal {
    min-width: 820px;
}

.badge-cobro-pendiente,
.badge-cobro-parcial,
.badge-cobro-pagado,
.badge-cobro-vencido,
.badge-cobro-cancelado {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    display: inline-flex;
    font-size: 0.67rem;
    font-weight: 700;
    gap: 5px;
    padding: 5px 8px;
}

.tabla-servicios {
    min-width: 900px;
}

.servicio-categorias-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.servicio-categorias-resumen span {
    background: #f1edf5;
    border: 1px solid #e3dbe9;
    border-radius: 6px;
    color: #674d78;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 4px 7px;
}

.servicio-selector-categorias {
    display: grid;
    gap: 8px;
}

.servicio-categoria-fila {
    align-items: end;
    background: #fff;
    border: 1px solid #e2e5ec;
    border-radius: 8px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(220px, 1fr) 130px 110px;
    padding: 12px;
}

.servicio-categoria-identidad {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 10px;
    min-height: 38px;
}

.servicio-categoria-identidad span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.servicio-categoria-identidad strong {
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.servicio-categoria-identidad small {
    color: var(--ad-suave);
    font-size: 0.65rem;
    margin-top: 2px;
}

.servicio-categoria-fila .form-label {
    font-size: 0.64rem;
    margin-bottom: 4px;
}

.servicio-categoria-fila .form-control {
    height: 38px;
}

.tabla-contrataciones {
    min-width: 1180px;
}

.badge-contratacion-activa,
.badge-contratacion-pausada,
.badge-contratacion-finalizada {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    display: inline-flex;
    font-size: 0.67rem;
    font-weight: 700;
    gap: 5px;
    padding: 5px 8px;
}

.badge-contratacion-activa {
    background: #eaf7ef;
    border-color: #ccebd7;
    color: #247247;
}

.badge-contratacion-pausada {
    background: #fff5dc;
    border-color: #f2dfad;
    color: #8a6419;
}

.badge-contratacion-finalizada {
    background: #f0f1f4;
    border-color: #dfe1e7;
    color: #626876;
}

.contratacion-detalles {
    display: grid;
    gap: 8px;
}

.contratacion-detalle-fila {
    align-items: end;
    background: #fff;
    border: 1px solid #e2e5ec;
    border-radius: 8px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(220px, 1fr) 120px 170px 150px;
    padding: 12px;
}

.contratacion-detalle-identidad,
.contratacion-detalle-total {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.contratacion-detalle-identidad span,
.contratacion-detalle-total strong {
    font-size: 0.78rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.contratacion-detalle-identidad small,
.contratacion-detalle-total small {
    color: var(--ad-suave);
    font-size: 0.64rem;
}

.contratacion-detalle-total {
    align-items: flex-end;
    min-height: 38px;
    justify-content: center;
}

.contratacion-detalle-fila .form-label {
    font-size: 0.64rem;
    margin-bottom: 4px;
}

.contratacion-detalle-fila .form-control {
    height: 38px;
}

@media (max-width: 767.98px) {
    .contratacion-detalle-fila {
        grid-template-columns: 1fr 1fr;
    }

    .contratacion-detalle-identidad {
        grid-column: 1 / -1;
    }
}

.badge-cobro-pendiente {
    background: #eef3ff;
    border-color: #d5e0fa;
    color: #41629e;
}

.badge-cobro-pagado {
    background: #eaf7f0;
    border-color: #cce9d9;
    color: #347357;
}

.badge-cobro-parcial {
    background: #fff5dc;
    border-color: #f2dfad;
    color: #8a6419;
}

.badge-cobro-vencido {
    background: #fff1e8;
    border-color: #f4d7c4;
    color: #a65a32;
}

.badge-cobro-cancelado {
    background: #f3f4f7;
    border-color: #dcdee5;
    color: #686f7d;
}

.estado-icono {
    align-items: center;
    background: var(--ad-rojo-suave);
    border: 1px solid #f2ccd3;
    border-radius: 8px;
    color: var(--ad-rojo);
    display: inline-flex;
    font-size: 1.2rem;
    height: 44px;
    justify-content: center;
    width: 44px;
}

@media (max-width: 1199.98px) {
    .filtro-estado-cuenta-formulario {
        grid-template-columns: minmax(240px, 1fr) 160px 160px;
    }

    .filtro-estado-cuenta-formulario .btn {
        justify-self: start;
    }

    .estado-cuenta-datos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detalle-anulacion-pago {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .boton-menu {
        display: inline-flex;
    }

    .app-header {
        padding-inline: 14px;
    }

    .app-content-header {
        padding: 20px 18px 14px;
    }

    .app-content {
        padding: 0 18px 24px;
    }

    .login-layout {
        grid-template-columns: 1fr;
        min-height: auto;
        width: min(480px, 100%);
    }

    .login-visual {
        display: none;
    }

    .login-formulario {
        padding: 42px;
    }

    .login-marca-mobile {
        display: flex;
    }
}

@media (max-width: 767.98px) {
    .usuario-datos {
        display: none;
    }

    .app-content-header h1 {
        font-size: 1.25rem;
    }

    .bloque-operativo {
        padding: 14px;
    }

    .tabla-empresas {
        min-width: 780px;
    }

    .tabla-usuarios {
        min-width: 880px;
    }

    .tabla-clientes {
        min-width: 900px;
    }

    .filtros-usuarios,
    .filtros-clientes,
    .filtros-cobros {
        grid-template-columns: 1fr;
    }

    .panel-login {
        padding: 24px;
    }

    .login-premium {
        align-items: stretch;
        padding: 0;
    }

    .login-layout {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
        width: 100%;
    }

    .login-formulario {
        padding: 30px 24px;
    }

    .login-marca-mobile {
        margin-bottom: 54px;
    }

    .login-encabezado h1 {
        font-size: 1.6rem;
    }

    .login-confianza {
        gap: 12px;
    }

    .selector-empresa-pagina {
        align-items: stretch;
        padding: 0;
    }

    .selector-empresa-panel {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
        padding: 30px 24px;
        width: 100%;
    }

    .portal-lista-datos {
        grid-template-columns: 1fr;
    }

    .estado-cuenta-dato-ancho {
        grid-column: auto;
    }

    .filtro-estado-cuenta-formulario {
        grid-template-columns: 1fr 1fr;
    }

    .filtro-estado-cuenta-contexto {
        grid-column: 1 / -1;
    }

    .filtro-estado-cuenta-formulario .btn {
        justify-self: stretch;
    }

    .estado-cuenta-resumen-cliente {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detalle-anulacion-pago {
        grid-template-columns: 1fr;
    }

    .importacion-pasos small {
        display: none;
    }

    .importacion-selector {
        align-items: flex-start;
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .importacion-selector .btn {
        grid-column: 2;
        justify-self: start;
        margin-left: 0;
    }

    .importacion-confirmacion {
        align-items: stretch;
        flex-direction: column;
    }

    .importacion-confirmacion .btn {
        width: 100%;
    }

    .servicio-categoria-fila {
        align-items: stretch;
        grid-template-columns: 1fr 1fr;
    }

    .servicio-categoria-identidad {
        grid-column: 1 / -1;
    }
}