/* Billi: estilos del diseño nuevo (refactor frontend, F3), sobre Bootstrap 5.3.
   Reglas y razones: design-system/billi/MASTER.md e investigacion-colores.md. Prototipos: design-system/billi/prototipos/.
   El color primario lo escribe el layout por empresa (ColorMarca::variables); aquí va el de Billi.
   Uso de cada color:
     primario   = barra superior, el único botón sólido (acción principal), foco, títulos de sección, tintes de encabezados
     secundario = agregar, ingresar, confirmar; segunda serie de gráficos
     acento     = pendientes, ambiente de pruebas, traslados, marca del ítem activo; tercera serie
     oscuro     = menú lateral
   Rojo y verde de estado no son parte de la paleta: solo para eliminar/rechazado y aceptado. */

/* Paleta A (elegida por Luis, 2026-10-27), ajustada con design-system/billi/investigacion-colores.md para cumplir WCAG 2.2 AA:
   cada color en base, -700 (texto y hover), -100 y -50 (fondos). Tonos algo apagados para bajar el contraste. */
:root {
    --primario: #4a5bbf;   --primario-700: #3a479a;   --primario-100: #dfe3f7;   --primario-50: #f0f2fb;
    --secundario: #3aa17e; --secundario-700: #1f7558; --secundario-100: #d6efe6; --secundario-50: #edf8f3;
    --acento: #e6a23c;     --acento-600: #c6840b;     --acento-700: #965b0b;     --acento-100: #fbe9cc;     --acento-50: #fdf5e8;
    --oscuro: #3a3f75;     --oscuro-2: #4a5090;       --oscuro-100: #dadcee;     --oscuro-50: #eeeff7;
    --borde-campo: #8a939e;  /* bordes de campos: 3.11:1 sobre blanco (el de tarjetas, #e2e8f0, no alcanza para un campo) */
}
/* acento base: solo rellenos y marcas sobre el menú oscuro (2.19:1 sobre blanco); sobre blanco, íconos y líneas en --acento-600.
   Nunca texto blanco sobre ámbar ni texto blanco normal sobre secundario sólido. */

:root {
    --primario-texto: #ffffff;     /* blanco o #0F172A según contraste; lo calcula el servidor con el color de la empresa */
    --texto: #0f172a; --texto-2: #475569; --borde: #e2e8f0; --fondo: #f1f5f9; --superficie: #ffffff;
    --exito: #1f7a46; --exito-50: #e3f5ea; --error: #b4372f; --error-700: #93281f; --error-100: #f6d9d6; --error-50: #fcefee;
    --radio: 8px; --radio-tarjeta: 12px; --radio-modal: 16px;
    --sombra: 0 1px 2px rgba(15, 23, 42, .06); --sombra-lg: 0 10px 15px rgba(15, 23, 42, .12), 0 4px 6px rgba(15, 23, 42, .06);
    --lateral: 260px;

    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-font-size: .875rem; --bs-body-color: var(--texto); --bs-body-bg: var(--fondo);
    --bs-secondary-color: var(--texto-2); --bs-border-color: var(--borde); --bs-border-radius: var(--radio);
    --bs-link-color: var(--primario); --bs-link-hover-color: var(--primario-700);
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

a { color: var(--primario); }  /* Bootstrap 5.3 pinta los enlaces con --bs-link-color-rgb, que no sigue al color de la empresa */
a:hover { color: var(--primario-700); }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.texto-2 { color: var(--texto-2); }

/* ---- Botones: un color por tipo de acción ---- */
.btn { --bs-btn-padding-y: .4375rem; --bs-btn-padding-x: .875rem; --bs-btn-font-size: .8125rem; --bs-btn-font-weight: 600;
       --bs-btn-border-radius: var(--radio); display: inline-flex; align-items: center; gap: .375rem; transition: background-color .15s, border-color .15s, color .15s; }
.btn-sm { --bs-btn-padding-y: .3125rem; --bs-btn-padding-x: .625rem; --bs-btn-font-size: .75rem; }
.btn-primary  { --bs-btn-bg: var(--primario); --bs-btn-border-color: var(--primario); --bs-btn-color: var(--primario-texto);
                --bs-btn-hover-bg: var(--primario-700); --bs-btn-hover-border-color: var(--primario-700); --bs-btn-hover-color: #fff;
                --bs-btn-active-bg: var(--primario-700); --bs-btn-active-border-color: var(--primario-700);
                --bs-btn-disabled-bg: var(--primario); --bs-btn-disabled-border-color: var(--primario); --bs-btn-disabled-color: var(--primario-texto); }
.btn-secundario, .btn-acento, .btn-oscuro, .btn-peligro {
    --bs-btn-bg: var(--b-100); --bs-btn-border-color: var(--b-100); --bs-btn-color: var(--b-700);
    --bs-btn-hover-bg: var(--b-100); --bs-btn-hover-border-color: var(--b); --bs-btn-hover-color: var(--b-700);
    --bs-btn-active-bg: var(--b-100); --bs-btn-active-border-color: var(--b); --bs-btn-active-color: var(--b-700);
    --bs-btn-disabled-bg: var(--b-100); --bs-btn-disabled-border-color: var(--b-100); --bs-btn-disabled-color: var(--b-700); }  /* deshabilitado: el mismo tinte, atenuado */
.btn-secundario { --b: var(--secundario); --b-100: var(--secundario-100); --b-700: var(--secundario-700); }
.btn-acento { --b: var(--acento); --b-100: var(--acento-100); --b-700: var(--acento-700); }
.btn-oscuro { --b: var(--oscuro); --b-100: var(--oscuro-100); --b-700: var(--oscuro-2); }
.btn-peligro { --b: var(--error); --b-100: var(--error-100); --b-700: var(--error-700); }
.btn-claro { --bs-btn-bg: #fff; --bs-btn-border-color: var(--borde); --bs-btn-color: var(--texto); --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: var(--borde); --bs-btn-disabled-color: var(--texto-2);
             --bs-btn-hover-bg: var(--primario-50); --bs-btn-hover-border-color: var(--primario); --bs-btn-hover-color: var(--primario-700); }
.btn-group > .btn + .dropdown-toggle-split { border-left: 1px solid rgba(15, 23, 42, .1); }

/* ---- Campos ---- */
.form-control, .form-select { min-height: 36px; padding: .4375rem .75rem; font-size: .875rem; border-color: var(--borde-campo);
                              background-color: var(--superficie); }  /* Bootstrap usa el fondo de la página (gris) */
.form-select { padding-right: 2.25rem; }
.form-control:focus, .form-select:focus, .btn:focus-visible, a:focus-visible, .form-check-input:focus {
    border-color: var(--primario); box-shadow: 0 0 0 .2rem var(--primario-100); outline: 0; }  /* sigue al color de la empresa */
.form-label { font-weight: 600; font-size: .8125rem; margin-bottom: .25rem; color: var(--texto); }
.form-label i { color: var(--primario); margin-right: .25rem; }
.form-check-input { border-color: var(--borde-campo); }  /* el borde de Bootstrap (#e2e8f0) no llega a 3:1 */
.form-check-input:checked { background-color: var(--primario); border-color: var(--primario); }
.input-group-text { background: var(--primario-50); border-color: var(--borde-campo); color: var(--primario-700); }
.input-group > .btn-claro { border-color: var(--borde-campo); }  /* botón pegado a un campo (ver contraseña): mismo borde que el campo */
@media (max-width: 767.98px) { .form-control, .form-select { font-size: 1rem; } }

/* ---- Tarjetas y secciones ---- */
.card { --bs-card-border-color: var(--borde); --bs-card-border-radius: var(--radio-tarjeta); --bs-card-cap-bg: transparent; box-shadow: var(--sombra); }
.card-header { font-weight: 700; padding: .875rem 1rem; }
.seccion { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
           color: var(--primario-700); padding-bottom: .5rem; margin: 1.25rem 0 1rem; border-bottom: 2px solid var(--primario-50); }
.seccion::before { content: ''; width: 4px; height: 14px; border-radius: 2px; background: var(--primario); }
.dropdown-menu { --bs-dropdown-border-color: var(--borde); --bs-dropdown-font-size: .875rem; --bs-dropdown-link-active-bg: var(--primario);
                 box-shadow: var(--sombra-lg); border-radius: var(--radio); }
dialog.modal-billi { border: 0; border-radius: var(--radio-modal); box-shadow: var(--sombra-lg); padding: 0; width: min(720px, 94vw); }
dialog.modal-billi::backdrop { background: rgba(15, 23, 42, .55); }
.modal-billi .cabecera-modal { background: var(--primario-50); color: var(--primario-700); border-bottom: 1px solid var(--primario-100); display: flex; align-items: stretch; border-radius: var(--radio-modal) var(--radio-modal) 0 0; }
.modal-billi .cabecera-modal a { color: var(--texto-2); padding: .75rem 1rem; text-decoration: none; font-weight: 600; }
.modal-billi .cabecera-modal a.activo { color: var(--primario-700); background: #fff; box-shadow: inset 0 -2px 0 var(--primario); }
.modal-billi .cabecera-modal button { margin-left: auto; background: none; border: 0; color: var(--texto-2); padding: 0 1rem; font-size: 1.25rem; }

/* ---- Tablas: encabezado con tinte del primario ---- */
.tabla { --bs-table-hover-bg: var(--primario-50); margin: 0; }
.tabla > thead th { background: var(--primario-50); color: var(--primario-700); font-weight: 700; font-size: .75rem;
                    border-bottom: 1px solid var(--primario-100); padding: .625rem .75rem; white-space: nowrap; }
.tabla > tbody td { padding: .5rem .75rem; height: 40px; vertical-align: middle; border-color: var(--borde); }
.tabla > tbody tr.seleccionada td { background: var(--primario-50); box-shadow: inset 3px 0 0 var(--primario); }
.tabla > thead th[data-col] { cursor: pointer; user-select: none; }
.tabla > thead th[data-col]::after { content: '\F283'; font-family: bootstrap-icons; font-size: .7rem; margin-left: .375rem; opacity: .35; }  /* chevron-expand; caret-up/down al ordenar */
.tabla > thead th[aria-sort="ascending"]::after { content: '\F235'; opacity: 1; }
.tabla > thead th[aria-sort="descending"]::after { content: '\F229'; opacity: 1; }
.tabla-controles { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.tabla-filtro { width: 260px; max-width: 100%; }
.tabla-botones { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.tabla-pie { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; font-size: .8125rem; color: var(--texto-2); }
.tabla-pie nav { margin-left: auto; }
.pagination { --bs-pagination-color: var(--primario); --bs-pagination-hover-color: var(--primario-700); --bs-pagination-active-bg: var(--primario);
              --bs-pagination-active-border-color: var(--primario); --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--primario-100); }
.acciones-fila .dropdown-toggle::after { display: none; }

/* ---- Estados (texto + ícono) ---- */
.estado { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 600; padding: .125rem .5rem; border-radius: 999px; }
.estado-aceptado { color: var(--exito); background: var(--exito-50); }
.estado-rechazado { color: var(--error); background: var(--error-50); }
.estado-pendiente { color: var(--acento-700); background: var(--acento-100); }
.estado-anulado { color: var(--texto-2); background: #e2e8f0; }
.etiqueta-nuevo { font-size: .625rem; font-weight: 700; padding: .0625rem .375rem; border-radius: 999px; background: var(--secundario-100); color: var(--secundario-700); margin-left: auto; }
.stock-negativo { color: var(--error-700); background: var(--error-100); font-weight: 700; padding: .0625rem .5rem; border-radius: 999px; font-size: .75rem; }

/* ---- Layout: menú lateral oscuro + barra superior del color primario ---- */
.app { display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 100vh;
       background: linear-gradient(90deg, var(--oscuro) var(--lateral), var(--fondo) var(--lateral)); }  /* la columna del menú, oscura hasta abajo */
.app > * { min-width: 0; }
.lateral { background: var(--oscuro); color: rgba(255, 255, 255, .82); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.lateral .logo { height: 56px; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 0 1.25rem; text-decoration: none; font-weight: 800; font-size: 1.15rem; color: #fff;
                 background: rgba(0, 0, 0, .08); letter-spacing: .02em; overflow: hidden; }
.lateral .logo span { color: var(--acento); }
.perfil { text-align: center; padding: 1.25rem 1rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.perfil .avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--secundario); color: #fff; display: grid; place-items: center;
                  font-size: 1.5rem; font-weight: 700; margin: 0 auto .5rem; border: 3px solid rgba(255, 255, 255, .15); }
.perfil .nombre { color: #fff; font-weight: 600; }
.perfil .ruc { font-size: .75rem; color: rgba(255, 255, 255, .6); }
.perfil .rol { display: inline-block; margin-top: .5rem; font-size: .6875rem; font-weight: 700; padding: .125rem .625rem; border-radius: 999px; background: var(--acento-100); color: var(--acento-700); }
.menu { padding: .5rem .625rem 1.5rem; }
.menu a { display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem; border-radius: var(--radio); color: rgba(255, 255, 255, .82);
          text-decoration: none; font-weight: 500; transition: background-color .15s, color .15s; }
.menu a i { font-size: 1.05rem; color: rgba(255, 255, 255, .55); width: 18px; }
.menu a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.menu a.activo { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 3px 0 0 var(--acento); }
.menu a.activo i { color: #fff; }
.menu .abre::after { content: '\F285'; font-family: bootstrap-icons; margin-left: auto; font-size: .7rem; color: rgba(255, 255, 255, .45); }
.menu .abre[aria-expanded="true"]::after { content: '\F282'; }
.menu .separador { border-color: rgba(255, 255, 255, .12); margin: .375rem .75rem; opacity: 1; }
.menu .sub { padding-left: 1.75rem; }
.menu .sub a { font-size: .8125rem; padding: .375rem .75rem; }
.menu .sub a.activo { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 3px 0 0 var(--acento); }

.superior { height: 56px; background: var(--primario); color: #fff; display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; position: sticky; top: 0; z-index: 10; }
.superior .btn-icono { background: rgba(255, 255, 255, .12); border: 0; color: #fff; width: 36px; height: 36px; border-radius: var(--radio); display: grid; place-items: center; }
.superior .btn-icono:hover { background: rgba(255, 255, 255, .22); }
.ambiente { font-size: .6875rem; font-weight: 700; padding: .125rem .5rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.ambiente-pruebas { background: var(--acento-100); color: var(--acento-700); }
.ambiente-produccion { background: var(--secundario-100); color: var(--secundario-700); }
.contenido { padding: 1.5rem; }
@media (max-width: 991.98px) { .app { grid-template-columns: 1fr; background: var(--fondo); } .lateral { display: none; } .contenido { padding: 1rem; } }

/* ---- Barra de página: título + accesos rápidos (como hoy) ---- */
.barra-pagina { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.titulo-pagina { font-size: 1.25rem; font-weight: 700; margin: 0 auto 0 0; display: flex; align-items: center; gap: .5rem; }
.titulo-pagina i { color: var(--primario); }
.accesos { display: flex; gap: .25rem; flex-wrap: wrap; }
.accesos a { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: var(--radio); text-decoration: none;
             font-size: .8125rem; font-weight: 600; color: var(--texto); background: #fff; border: 1px solid var(--borde); }
.accesos a i { font-size: 1rem; }
.accesos a:nth-child(4n+1) i { color: var(--primario); }
.accesos a:nth-child(4n+2) i { color: var(--secundario-700); }
.accesos a:nth-child(4n+3) i { color: var(--acento-700); }
.accesos a:nth-child(4n+4) i { color: var(--oscuro-2); }
.accesos a:hover { border-color: var(--primario); background: var(--primario-50); }
.accesos a.activo { background: var(--primario); border-color: var(--primario); color: #fff; }
.accesos a.activo i { color: #fff; }

/* ---- Indicadores: tinte suave del color, número en su tono oscuro, ícono de marca de agua ---- */
.kpi { background: var(--k-50); border: 1px solid var(--k-100); color: var(--k-700); overflow: hidden; position: relative; box-shadow: none; }
.kpi .card-body { padding: 1rem 1.125rem; }
.kpi .etiqueta { font-size: .75rem; font-weight: 600; color: var(--texto-2); }
.kpi .valor { font-size: 1.375rem; font-size: clamp(1rem, 1.25vw, 1.375rem); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi i.fondo { position: absolute; right: -4px; bottom: -12px; font-size: 4.25rem; color: var(--k); opacity: .14; }
.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--k); }
.kpi-1 { --k: var(--primario); --k-50: var(--primario-50); --k-100: var(--primario-100); --k-700: var(--primario-700); }
.kpi-2 { --k: var(--secundario); --k-50: var(--secundario-50); --k-100: var(--secundario-100); --k-700: var(--secundario-700); }
.kpi-3 { --k: var(--acento-600); --k-50: var(--acento-50); --k-100: var(--acento-100); --k-700: var(--acento-700); }
.kpi-4 { --k: var(--error); --k-50: var(--error-50); --k-100: var(--error-100); --k-700: var(--error-700); }
.kpi-5 { --k: var(--oscuro); --k-50: var(--oscuro-50); --k-100: var(--oscuro-100); --k-700: var(--oscuro-2); }
.kpi-6 { --k: var(--primario-700); --k-50: var(--primario-100); --k-100: var(--primario-100); --k-700: var(--primario-700); }

/* ---- Resumen de totales ---- */
.resumen { background: var(--primario-50); border-radius: var(--radio-tarjeta); padding: 1rem 1.25rem; }
.resumen .fila { display: flex; justify-content: space-between; padding: .375rem 0; border-bottom: 1px dashed var(--primario-100); font-variant-numeric: tabular-nums; }
.resumen .fila:last-child { border: 0; }
.resumen .total { font-size: 1.375rem; font-weight: 800; color: var(--primario-700); }

/* ---- Menú plegado: en escritorio se oculta; en el celular se muestra encima del contenido ---- */
.app.menu-plegado { grid-template-columns: 1fr; background: var(--fondo); }  /* sin la franja oscura del menú */
.app.menu-plegado .lateral { display: none; }
@media (max-width: 991.98px) {
    .app.menu-abierto .lateral { display: block; position: fixed; left: 0; top: 0; width: var(--lateral); z-index: 40; box-shadow: var(--sombra-lg); }
    .app.menu-abierto::after { content: ''; position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 30; }
}

/* ---- Avisos flotantes (reemplazan a los swal de "Excelente!" y de error) ---- */
.avisos { position: fixed; top: 68px; right: 16px; z-index: 1080; display: flex; flex-direction: column; gap: .5rem; width: min(360px, calc(100vw - 32px)); }
.aviso { display: flex; gap: .625rem; align-items: flex-start; padding: .75rem 1rem; border-radius: var(--radio); background: #fff; box-shadow: var(--sombra-lg);
         border-left: 4px solid var(--a); font-size: .875rem; animation: aviso-entra .2s ease-out; }
.aviso i { color: var(--a); font-size: 1.1rem; }
.aviso-exito { --a: var(--exito); } .aviso-error { --a: var(--error); } .aviso-info { --a: var(--primario); } .aviso-aviso { --a: var(--acento-600); }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(-6px); } }

/* ---- Cargando (reemplaza a blockUI): capa sobre un bloque, que además queda inert ---- */
.cargando { position: relative; }
.cargando::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .7) center / 32px no-repeat
                   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='%234a5bbf' stroke-width='5' stroke-dasharray='90 60'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
                   border-radius: inherit; z-index: 5; cursor: wait; }

/* ---- Acceso (login, registro, recuperar): tarjeta centrada sobre el fondo (design-system/billi/pages/login.md) ---- */
.acceso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: var(--fondo); }
.acceso-panel { width: 100%; display: flex; justify-content: center; }
.acceso-caja { width: 100%; max-width: 440px; background: var(--superficie); border-radius: var(--radio-modal); box-shadow: var(--sombra-lg);
               border-top: 4px solid var(--primario); padding: 2.5rem 2rem 2rem; }
.acceso-caja-ancha { max-width: 560px; }
.acceso-logo { display: block; max-width: 220px; max-height: 72px; margin: 0 auto 1.5rem; object-fit: contain; }
.acceso h1 { font-size: 1.375rem; font-weight: 700; text-align: center; margin-bottom: 1.25rem; }
.acceso .captcha { display: flex; justify-content: center; margin: .5rem 0 1rem; min-height: 78px; }
.acceso-enlaces { display: flex; flex-direction: column; align-items: center; gap: .375rem; margin-top: 1.25rem; font-size: .875rem; }
.acceso-legal { font-size: .75rem; color: var(--texto-2); text-align: center; margin: 1.25rem 0 0; }
.acceso-redes { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
.acceso-redes a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--primario-50); color: var(--primario-700); text-decoration: none; }
.acceso-redes a:hover { background: var(--primario-100); }
@media (max-width: 575.98px) { .acceso { padding: 1rem .75rem; align-items: flex-start; } .acceso-caja { padding: 2rem 1.25rem 1.5rem; } }
@media (max-width: 360px) { .acceso .g-recaptcha { transform: scale(.85); transform-origin: center; } }

/* ---- Páginas de error y textos legales ---- */
.pagina-error { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 2rem 1rem; }
.pagina-error .codigo { font-size: 4.5rem; font-weight: 800; line-height: 1; color: var(--primario); }
.pagina-error .icono { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1rem; font-size: 2rem; background: var(--primario-50); color: var(--primario-700); }
.legal { background: var(--superficie); min-height: 100vh; }
.legal .cabecera-legal { border-bottom: 1px solid var(--borde); border-top: 4px solid var(--primario); padding: 1rem; text-align: center; }
.legal .cabecera-legal img { max-height: 48px; max-width: 220px; }
.legal .texto-legal { max-width: 860px; margin: 0 auto; padding: 2rem 1rem 4rem; font-size: .9375rem; line-height: 1.65; }
.legal .texto-legal h3 { font-weight: 800; margin-bottom: 1.5rem; }
.legal .texto-legal h4 { font-size: 1.0625rem; font-weight: 700; color: var(--primario-700); margin-top: 2rem; }

/* ---- Buscador (Tom Select sobre Bootstrap 5): mismos bordes, foco y alto que los campos ---- */
.ts-wrapper.form-select, .ts-wrapper.single .ts-control { min-height: 36px; }
.ts-wrapper .ts-control { border-color: var(--borde-campo); font-size: .875rem; }
.ts-wrapper.focus .ts-control { border-color: var(--primario); box-shadow: 0 0 0 .2rem var(--primario-100); }
.ts-dropdown { font-size: .875rem; box-shadow: var(--sombra-lg); }
.ts-dropdown .active { background: var(--primario-50); color: var(--primario-700); }
.girando { display: inline-block; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---- Reportes: selector de columnas largo, listas con casillas, grupos de columnas con tinte ---- */
.tabla-columnas { max-height: 60vh; overflow-y: auto; min-width: 280px; }
@media (min-width: 768px) { .tabla-columnas { column-count: 2; min-width: 460px; } }
@media (min-width: 1200px) { .tabla-columnas { column-count: 3; min-width: 640px; } }
.tabla-columnas .dropdown-item { break-inside: avoid; white-space: normal; font-size: .8125rem; }
.multiple .dropdown-menu { max-height: 320px; overflow-y: auto; }
.multiple .dropdown-item { white-space: normal; }
.tabla > * > tr > .col-tinte-1 { --bs-table-bg: var(--secundario-50); }  /* grupos de columnas que antes se pintaban de color fuerte */
.tabla > * > tr > .col-tinte-2 { --bs-table-bg: var(--primario-50); }
.tabla > * > tr > .col-tinte-3 { --bs-table-bg: var(--acento-50); }
.tabla-ancha th, .tabla-ancha td { white-space: nowrap; }
.tabla > tfoot th { background: var(--primario-50); color: var(--primario-700); font-weight: 700; border-top: 2px solid var(--primario-100); }

/* ---- SIRE: pasos numerados (el actual resaltado; los demás atenuados hasta llegar) ---- */
.pasos-sire .paso { display: flex; gap: 1rem; padding: 1rem; border-radius: var(--radio-tarjeta); opacity: .55; }
.pasos-sire .paso + .paso { margin-top: .5rem; }
.pasos-sire .paso.activo { opacity: 1; background: var(--primario-50); }
.pasos-sire .paso.hecho { opacity: .8; }
.pasos-sire .numero { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--primario-100); color: var(--primario-700); }
.pasos-sire .activo .numero { background: var(--primario); color: var(--primario-texto); }
.pasos-sire .hecho .numero { background: var(--secundario-100); color: var(--secundario-700); }

/* ---- Recortar imagen (Cropper.js) ---- */
.recorte-lienzo { height: 340px; background: var(--fondo); border-radius: var(--radio); overflow: hidden; }
.recorte-lienzo img { display: block; max-width: 100%; }
.recorte-vista { width: 100%; max-width: 200px; overflow: hidden; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); }

/* ---- Sucursal: miniaturas de plantillas de PDF ---- */
.miniatura-plantilla { display: block; height: 150px; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: var(--fondo); }
.miniatura-plantilla img { width: 100%; height: 100%; object-fit: contain; }
.opcion-plantilla { display: block; cursor: pointer; border: 1px solid var(--borde); border-radius: var(--radio); padding: .5rem; height: 100%; }
.opcion-plantilla img { width: 100%; height: 140px; object-fit: contain; background: var(--fondo); border-radius: calc(var(--radio) - 2px); margin-bottom: .5rem; }
.opcion-plantilla:has(input:checked) { border-color: var(--primario); box-shadow: 0 0 0 .2rem var(--primario-100); }

/* Ejemplos de código (Configurar empresa > Integración APIREST) */
.codigo-ejemplo { background: var(--oscuro); color: #e2e8f0; border-radius: var(--radio); padding: 1rem; font-size: .75rem; line-height: 1.5; max-height: 480px; overflow: auto; margin: 0; white-space: pre; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--primario); --bs-nav-link-color: var(--texto-2); --bs-nav-link-hover-color: var(--primario); --bs-nav-link-font-size: .8125rem; }

/* Aviso de suscripción (ControllerBase::get_html_suscripcion trae el marcado de Bootstrap 3) */
.alert .close { float: right; background: none; border: 0; font-size: 1.25rem; line-height: 1; padding: 0 0 0 1rem; color: inherit; opacity: .7; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
/* Opción elegida en grupos de botones (p. ej. Pruebas / Producción) */
.btn-check:checked + .btn-claro { --bs-btn-active-bg: var(--primario-50); --bs-btn-active-border-color: var(--primario); --bs-btn-active-color: var(--primario-700); position: relative; z-index: 1; }

/* Centro de entrenamiento */
.video-miniatura { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--fondo); border-radius: var(--radio) var(--radio) 0 0; overflow: hidden; cursor: pointer; }
.video-miniatura img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video-miniatura i { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); transition: transform .2s; }
.video-miniatura:hover i, .video-miniatura:focus-visible i { transform: scale(1.12); }
.numero-video { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; background: var(--primario-50); color: var(--primario-700); }

/* Filtros rápidos (Contribuyentes) */
.filtro-rapido { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; font-size: .8125rem; border: 1px solid var(--borde); border-radius: 999px; background: #fff; color: var(--texto); cursor: pointer; }
.filtro-rapido .num { font-weight: 700; }
.filtro-alerta { border-left: 3px solid var(--error); } .filtro-alerta .num { color: var(--error); }
.filtro-aviso { border-left: 3px solid var(--acento); } .filtro-aviso .num { color: var(--acento-700); }
.filtro-rapido.activo { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); }
.filtro-rapido.activo .num { color: inherit; }

/* Dashboard: pestañas de arriba, pestañas de documentos sobre tinte primario, leyenda de estados SUNAT */
.pestanas .nav-link { font-weight: 600; color: var(--texto-2); border-radius: var(--radio); padding: .4375rem .875rem; display: flex; gap: .375rem; align-items: center; background: none; border: 0; }
.pestanas .nav-link.active { background: var(--primario-100); color: var(--primario-700); }
.tabs-docs { background: var(--primario-50); border-bottom: 1px solid var(--primario-100); border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0; padding: 0 .5rem; }
.tabs-docs .nav-link { color: var(--texto-2); font-weight: 600; border: 0; border-radius: 0; padding: .875rem 1rem; display: flex; gap: .375rem; align-items: center; }
.tabs-docs .nav-link.active, .tabs-docs .btn-check:checked + .nav-link { color: var(--primario-700); background: #fff; box-shadow: inset 0 -2px 0 var(--primario); }
.tabs-docs label.nav-link { cursor: pointer; }  /* pestañas hechas con radios (registrar compra) */
.tabs-docs .btn-check:focus-visible + .nav-link { outline: 2px solid var(--primario); outline-offset: -2px; }
.leyenda { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; font-size: .8125rem; padding: .625rem .875rem; background: var(--fondo); border-radius: var(--radio); }
.doc-icono { font-size: 1.25rem; }
.fila-detalle > td { background: var(--fondo); }
.boton-detalle { width: 22px; height: 22px; justify-content: center; --bs-btn-padding-x: 0; }

/* Vista previa del mensaje de WhatsApp (js/billi/documentos.js) */
.whatsapp-vista { border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); overflow: hidden; box-shadow: var(--sombra); }
.whatsapp-cabecera { background: #ededed; padding: .6rem 1rem; display: flex; gap: .5rem; align-items: center; font-weight: 600; }
.whatsapp-cabecera .bi { font-size: 1.75rem; color: var(--texto-2); }
.whatsapp-chat { background: #ece5dd; height: 300px; display: flex; justify-content: flex-end; align-items: flex-end; padding: .75rem; overflow-y: auto; }
.whatsapp-burbuja { background: #dcf8c6; color: #0f172a; border-radius: .5rem; padding: .4rem .7rem; max-width: 90%; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); }

/* Etiquetas de documentos, por su color guardado (antes label-primary/success/info/danger) */
.etiqueta-primary { background: var(--primario-50); color: var(--primario-700); }
.etiqueta-success { background: var(--exito-50); color: var(--exito); }
.etiqueta-info { background: var(--secundario-50); color: var(--secundario-700); }
.etiqueta-danger { background: var(--error-50); color: var(--error); }
.etiqueta-color { cursor: pointer; border: 2px solid transparent; }
.btn-check:checked + .etiqueta-color { border-color: currentColor; }
.btn-check:focus-visible + .etiqueta-color { outline: 2px solid var(--primario); outline-offset: 2px; }

/* Barras de avance (envío en lote de Gestión CPE Total) con el color del sistema */
.progress { --bs-progress-bar-bg: var(--primario); }

/* Celdas que se editan en el lugar (lista de productos): se ven como texto, con un lápiz al lado */
.celda-editable { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: inherit; cursor: text; display: inline-flex; gap: .35rem; align-items: baseline; }
.celda-editable .bi-pencil { color: var(--primario); font-size: .75em; opacity: .55; }
.celda-editable:hover .bi-pencil, .celda-editable:focus-visible .bi-pencil { opacity: 1; }
.celda-editable:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; border-radius: 4px; }

/* Imágenes del producto (ventana de registrar/editar): miniatura con botón para quitarla */
.imagen-producto { position: relative; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: var(--superficie); }
.imagen-producto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.imagen-producto.imagen-cuadradas { width: 110px; aspect-ratio: 1; }
.imagen-producto.imagen-horizontales { width: 200px; aspect-ratio: 350 / 167; }
.imagen-producto.imagen-verticales { width: 90px; aspect-ratio: 167 / 350; }
.imagen-producto .btn { position: absolute; top: 4px; right: 4px; padding: 0 .3rem; }

/* Caja Chica: cuadro de totales con montos que abren su detalle */
.tabla-caja th { background: var(--primario-50); color: var(--primario-700); font-size: .8125rem; }
.tabla-caja td { padding: 0; }
.tabla-caja td:not(:has(> button)) { padding: .5rem .75rem; }
.celda-caja { all: unset; box-sizing: border-box; display: block; width: 100%; padding: .5rem .75rem; cursor: pointer; text-align: inherit; }
.celda-caja:hover { background: var(--primario-50); }
.celda-caja:focus-visible { outline: 2px solid var(--primario); outline-offset: -2px; }