:root { --a-oscuro: #211e4d; --a-primario: #4f46e5; --a-acento: #10b981; --a-fondo: #f4f5fb; }
* { scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d6d9ea; border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }
body { background: var(--a-fondo); -webkit-tap-highlight-color: transparent; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; }
body.con-nav { padding-bottom: 96px; }
@media (min-width: 992px) { body.con-nav { padding-bottom: 40px; } }
h1, h2, h3, h4, h5, h6, .fw-bold, .fw-semibold { letter-spacing: -.01em; }
main { animation: aparecer .35s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
a, .btn, .lista-item, .atajo, .accion-grande, .nav-link, .tabbar a { transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.bg-app { background: linear-gradient(135deg, var(--a-oscuro), #322b74); }
.text-acento { color: var(--a-acento) !important; }
.btn { border-radius: 12px; font-weight: 600; }
.btn-sm { border-radius: 10px; }
.btn.rounded-circle { border-radius: 50% !important; }
.btn-acento { --bs-btn-bg: var(--a-acento); --bs-btn-border-color: var(--a-acento); --bs-btn-color: #fff; --bs-btn-hover-bg: #059669; --bs-btn-hover-border-color: #059669; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #047857; --bs-btn-active-color: #fff; --bs-btn-disabled-bg: #6ee7b7; --bs-btn-disabled-border-color: #6ee7b7; }
.btn-primary { --bs-btn-bg: var(--a-primario); --bs-btn-border-color: var(--a-primario); --bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca; }
.btn-primary:hover, .btn-acento:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(79,70,229,.25); }
.btn:focus-visible, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 .2rem rgba(79,70,229,.2); }
.navbar .nav-link { border-radius: 10px; margin: 0 2px; }
.navbar .nav-link:hover { background: rgba(255,255,255,.08); }
.navbar .nav-link.active { color: #fff !important; font-weight: 600; background: rgba(255,255,255,.12); box-shadow: inset 0 -2px 0 var(--a-acento); }
.card { border: 0; border-radius: 16px; box-shadow: 0 1px 3px rgba(30,27,75,.08); }
.card-header { background: transparent; font-weight: 700; border-bottom: 1px solid #eef0f6; }
.form-control, .form-select { border-radius: 10px; border-color: #dfe1ee; }
.form-control:focus, .form-select:focus { border-color: var(--a-primario); }
.input-group .btn { border-radius: 10px; }
.kpi { padding: 14px 16px; transition: transform .15s ease, box-shadow .15s ease; }
a.kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(30,27,75,.12); }
.kpi .v { font-size: 1.45rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: .72rem; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.kpi .ic, .ic-box { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.table td, .text-tabular { font-variant-numeric: tabular-nums; }
.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table > thead > tr > th { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; font-weight: 700; }
.table-hover > tbody > tr:hover > * { background-color: #f8f9fd; }
.spinner-border-sm { vertical-align: -1px; }
.vacio { padding: 48px 16px; text-align: center; color: #8b8fa3; }
.vacio > i { font-size: 2.6rem; display: block; margin-bottom: 10px; width: 72px; height: 72px; line-height: 72px; border-radius: 50%; background: #eef0fb; color: var(--a-primario); margin-inline: auto; }
.min-w-0 { min-width: 0; }
.chart-box { position: relative; height: 260px; }
.lista-item { display: flex; gap: 12px; align-items: center; padding: 13px 16px; border-bottom: 1px solid #eef0f6; color: inherit; text-decoration: none; }
.lista-item:last-child { border-bottom: 0; }
a.lista-item:hover { background: #f8f9fd; padding-left: 20px; }
.lista-item .ic { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.15rem; }
.badge { font-weight: 600; border-radius: 7px; }
.alert { border: 0; border-radius: 12px; }
.toast { border: 0; border-radius: 12px; box-shadow: 0 8px 24px rgba(30,27,75,.15); }
.login-bg { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(circle at 20% 20%, #4338ca, #1e1b4b 60%); }
.login-bg .card { border-radius: 20px; }

/* Barra inferior móvil */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: #fff; border-top: 1px solid #e5e7f0; display: flex; justify-content: space-around; align-items: flex-end; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(30,27,75,.06); border-radius: 18px 18px 0 0; }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; color: #9499ad; text-decoration: none; font-size: .68rem; font-weight: 600; gap: 2px; padding: 6px 0; border-radius: 10px; margin: 0 2px; }
.tabbar a i { font-size: 1.3rem; }
.tabbar a.active { color: var(--a-primario); background: #eef0fb; }
.tabbar .centro { width: 62px; height: 62px; margin-top: -28px; border-radius: 50%; border: 4px solid var(--a-fondo); background: var(--a-acento); color: #fff; font-size: 1.6rem; box-shadow: 0 6px 16px rgba(16,185,129,.4); flex-shrink: 0; }
.fab { position: fixed; right: 24px; bottom: 24px; z-index: 1030; width: 60px; height: 60px; font-size: 1.6rem; align-items: center; justify-content: center; }
.hoja.offcanvas-bottom { height: auto; max-height: 85vh; border-radius: 18px 18px 0 0; }
@media (min-width: 768px) { .hoja.offcanvas-bottom { max-width: 900px; margin: 0 auto; } }
.accion-grande { display: flex; gap: 14px; align-items: center; padding: 14px; border: 1px solid; border-left-width: 4px !important; border-radius: 12px; color: inherit; text-decoration: none; background: #fff; height: 100%; }
.accion-grande:hover { background: #f8f9fd; }
.accion-grande .ic { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }

/* Accesos rápidos inicio */
.atajo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px 8px; border-radius: 14px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 1px 3px rgba(30,27,75,.08); text-align: center; height: 100%; font-weight: 600; font-size: .9rem; }
.atajo i { font-size: 1.8rem; transition: transform .2s ease; }
.atajo:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30,27,75,.1); }
.atajo:active i { transform: scale(1.25); }

/* Escáner */
.scan-visor { position: relative; width: 100%; aspect-ratio: 4/3; background: #000; border-radius: 12px; overflow: hidden; }
.scan-visor video { width: 100% !important; height: 100% !important; object-fit: cover; }
.scan-visor #qr-shaded-region { border-color: rgba(0,0,0,.45) !important; }
.scan-linea { position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: #ef4444; box-shadow: 0 0 10px #ef4444; z-index: 5; animation: barrido 1.8s ease-in-out infinite; pointer-events: none; }
@keyframes barrido { 0%,100% { transform: translateY(-40px); } 50% { transform: translateY(40px); } }
.scan-ultimo { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(16,185,129,.18); border: 1px solid rgba(16,185,129,.5); animation: pop .25s ease; }
.scan-ultimo.error { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.5); }
@keyframes pop { from { transform: scale(.96); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.flash-ok { animation: flashok .8s ease; }
@keyframes flashok { from { background: #d1fae5; } to { background: transparent; } }

/* Documento en construcción */
.carrito-item { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #eef0f6; }
.carrito-item:last-child { border-bottom: 0; }
.qty { display: inline-flex; align-items: center; border: 1px solid #d1d5e0; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.qty button { border: 0; background: #f4f5fb; width: 34px; height: 36px; font-size: 1.1rem; }
.qty input { width: 64px; border: 0; text-align: center; font-weight: 600; height: 36px; font-variant-numeric: tabular-nums; }
.qty input:focus { outline: none; }
.precio-input { width: 110px; }
.barra-total { position: sticky; bottom: 84px; z-index: 10; }
@media (min-width: 992px) { .barra-total { bottom: 12px; } }
.buscador-res { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; max-height: 320px; overflow: auto; }
.badge-stock { font-variant-numeric: tabular-nums; }
.json-datos { font-size: .75rem; background: #f4f5fb; border-radius: 8px; padding: 8px; white-space: pre-wrap; word-break: break-all; margin: 0; }

@media print {
  .navbar, .tabbar, .fab, .no-print, .toast-container { display: none !important; }
  body { background: #fff; padding: 0 !important; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}

/* =====================================================================
   Tema v3 — mismo diseño que el manual: encabezados con degradado,
   un color por módulo, tarjetas suaves y pasos/tablas con color.
   ===================================================================== */
:root { --c: #4f46e5; --sombra: 0 10px 30px rgba(33,30,77,.08); }
body[data-pag="index"], body[data-pag="empresas"] { --c: #4f46e5; }
body[data-pag="productos"], body[data-pag="categorias"] { --c: #059669; }
body[data-pag="documentos"], body[data-pag="documento"], body[data-pag="nuevo"] { --c: #d97706; }
body[data-pag="ventas"] { --c: #16a34a; }
body[data-pag="contactos"] { --c: #db2777; }
body[data-pag="usuarios"], body[data-pag="empresa"] { --c: #0891b2; }
body[data-pag="perfil"], body[data-pag="plataforma"] { --c: #7c3aed; }
body[data-pag="bitacora"] { --c: #ea580c; }
body { overflow-x: clip; }

/* Encabezado de página: sobre el fondo claro (sin franja de color bajo el menú) */
body.con-nav main h1 { font-weight: 800; letter-spacing: -.02em; }
/* Ícono del título como en las secciones del manual */
main h1 > .bi:first-child {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; margin-right: .45rem;
  font-size: 1.25rem; vertical-align: middle; color: #fff !important;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #211e4d));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 40%, transparent);
}

/* Tarjetas, KPIs y listas */
.card { border-radius: 18px; box-shadow: var(--sombra); }
.card-header { font-weight: 800; padding: .85rem 1.1rem; }
.card-header:first-child { border-radius: 18px 18px 0 0; }
.card-header > span:first-child > .bi, .card-header > .bi:first-child { color: var(--c); }
.kpi { border-top: 4px solid var(--c); }
.kpi .v { letter-spacing: -.02em; }
a.lista-item:hover { background: color-mix(in srgb, var(--c) 6%, #fff); }
.vacio > i { background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }

/* Accesos rápidos de inicio con ícono en círculo */
.atajo { border-radius: 18px; box-shadow: var(--sombra); padding: 18px 8px; }
.atajo i { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; font-size: 1.6rem; background: color-mix(in srgb, currentColor 14%, transparent); }
.atajo:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(33,30,77,.14); }

/* Botones redondeados con degradado */
.btn:not(.input-group .btn):not(.rounded-circle) { border-radius: 999px; }
.btn-primary { background-image: linear-gradient(135deg, #4f46e5, #6d28d9); border: 0; }
.btn-acento { background-image: linear-gradient(135deg, #10b981, #059669); border: 0; box-shadow: 0 6px 16px rgba(16,185,129,.3); }
.btn-primary:hover { box-shadow: 0 8px 18px rgba(79,70,229,.35); }

/* Pestañas (documentos, contactos) */
.nav-pills .nav-link { border-radius: 999px; font-weight: 600; color: #4b5068; }
.nav-pills .nav-link.active { background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #211e4d)); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 35%, transparent); }

/* Tablas con cabecera de color */
.table > thead > tr > th, .table > thead.table-light > tr > th { background: var(--c); color: #fff; border-color: transparent; }
.table > thead > tr > th:first-child { border-top-left-radius: 10px; }
.table > thead > tr > th:last-child { border-top-right-radius: 10px; }
.table-striped > tbody > tr:nth-of-type(odd) > *, .table > tbody > tr:nth-child(even) > * { --bs-table-bg-type: color-mix(in srgb, var(--c) 4%, transparent); }

/* Alertas con barra lateral como las notas del manual */
.alert { border-left: 4px solid currentColor; }

/* Barra inferior y menú */
.tabbar a.active { color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.navbar .nav-link.active { box-shadow: inset 0 -3px 0 var(--a-acento); }
.dropdown-menu { border: 0; border-radius: 14px; box-shadow: 0 14px 34px rgba(33,30,77,.18); padding: .4rem; }
.dropdown-item { border-radius: 9px; }
.dropdown-item.active, .dropdown-item:active { background: linear-gradient(135deg, #4f46e5, #6d28d9); }

/* Ingreso y registro con el mismo fondo del manual */
.login-bg {
  background:
    radial-gradient(circle at 85% 10%, rgba(16,185,129,.45), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(129,140,248,.5), transparent 42%),
    linear-gradient(135deg, #211e4d 0%, #3b2f8f 55%, #4f46e5 100%);
}
.login-bg .card { border-radius: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }

@media print {
  body.con-nav main > :first-child:not(.alert), body.con-nav main > .alert + :not(.alert) { margin: 0 0 1rem !important; padding: 0; background: none; color: #000; box-shadow: none; }
  body.con-nav main > :first-child:not(.alert) :is(h1, .h4, .h5) { color: #000; }
}

/* Pantallas de acceso */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr; background:
    radial-gradient(circle at 85% 10%, rgba(16,185,129,.45), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(129,140,248,.5), transparent 42%),
    linear-gradient(135deg, #211e4d 0%, #3b2f8f 55%, #4f46e5 100%); }
@media (min-width: 992px) { .auth { grid-template-columns: 1.1fr 1fr; } }
.auth-hero { color: #fff; align-items: center; padding: 48px clamp(32px, 5vw, 80px); }
.auth-hero-in { max-width: 520px; }
.auth-logo { border-radius: 14px; box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.auth-h { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.auth-h span { background: linear-gradient(90deg, #6ee7b7, #a5b4fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-p { color: rgba(255,255,255,.82); font-size: 1.08rem; margin: 14px 0 28px; }
.auth-lista { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 14px; }
.auth-lista li { display: flex; gap: 14px; align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 12px 16px; }
.auth-lista i { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.3rem; background: linear-gradient(135deg, #10b981, #059669); }
.auth-lista li:nth-child(2) i { background: linear-gradient(135deg, #818cf8, #4f46e5); }
.auth-lista li:nth-child(3) i { background: linear-gradient(135deg, #f472b6, #db2777); }
.auth-lista b { display: block; }
.auth-lista span { color: rgba(255,255,255,.8); font-size: .92rem; line-height: 1.35; }
.auth-lista b { color: #fff; }
.auth-manual { color: #fff; text-decoration: none; font-weight: 600; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 8px 18px; background: rgba(255,255,255,.1); }
.auth-manual:hover { background: rgba(255,255,255,.2); color: #fff; }
.auth-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
.auth-card { width: 100%; max-width: 440px; background: #fff; border-radius: 26px; padding: 32px 28px; box-shadow: 0 30px 70px rgba(0,0,0,.35); animation: pop .35s ease; }
@media (max-width: 420px) { .auth-card { padding: 26px 18px; } }
.auth-card .input-group-text { background: #f4f5fb; border-color: #dfe1ee; color: #6b7280; border-radius: 14px 0 0 14px; }
.auth-card .input-group .form-control { border-color: #dfe1ee; }
.auth-card .form-floating > .form-control { border-radius: 14px; }
.auth-card .input-group > .form-floating > .form-control { border-radius: 0; }
.auth-card .input-group > .form-floating:last-child > .form-control { border-radius: 0 14px 14px 0; }
.btn-ver-clave { border: 1px solid #dfe1ee; border-left: 0; background: #fff; color: #6b7280; border-radius: 0 14px 14px 0 !important; padding: 0 16px; }
.btn-ver-clave:hover { color: var(--a-primario); background: #f4f5fb; }
.auth-sep { display: flex; align-items: center; gap: 10px; color: #9499ad; font-size: .82rem; margin: 22px 0 14px; }
.auth-sep:before, .auth-sep:after { content: ""; flex: 1; height: 1px; background: #e6e8f2; }
.auth-ok { width: 84px; height: 84px; margin: 0 auto; border-radius: 26px; display: grid; place-items: center; font-size: 2.4rem; color: #fff; background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 12px 26px rgba(16,185,129,.35); }
.auth-mal { background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 12px 26px rgba(225,29,72,.35); }

/* =====================================================================
   Temas del mes: --t1 / --t2 (degradado) y --glow (brillo) vienen del body.
   ===================================================================== */
body { --t1: #211e4d; --t2: #3b2f8f; --glow: #10b981; }
.bg-app { background: radial-gradient(circle at 92% -60%, color-mix(in srgb, var(--glow) 55%, transparent), transparent 40%), linear-gradient(135deg, var(--t1), var(--t2)); }
.navbar.bg-app { border-bottom: 3px solid var(--glow); }
.auth, .login-bg {
  background:
    radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--glow) 55%, transparent), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(129,140,248,.4), transparent 42%),
    linear-gradient(135deg, var(--t1) 0%, var(--t2) 60%, color-mix(in srgb, var(--t2) 70%, #4f46e5) 100%);
}
.tema-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 600; color: #fff; text-decoration: none; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid color-mix(in srgb, var(--glow) 60%, transparent); white-space: nowrap; }
a.tema-chip:hover { color: #fff; background: rgba(255,255,255,.22); }
.tema-saludo { display: inline-block; font-weight: 700; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid color-mix(in srgb, var(--glow) 60%, transparent); }
.auth-h span { background: linear-gradient(90deg, var(--glow), #c7d2fe); -webkit-background-clip: text; background-clip: text; }

/* Decoraciones: arriba en las páginas internas; pantalla completa en el ingreso */
.deco { position: absolute; left: 0; right: 0; top: 0; height: 300px; overflow: hidden; pointer-events: none; z-index: 1;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
body:not(.con-nav) .deco { position: fixed; height: 100vh; z-index: 0; -webkit-mask-image: none; mask-image: none; }
.auth-panel, .auth-hero { position: relative; z-index: 1; }
.deco span { position: absolute; left: var(--x); top: -40px; font-size: var(--s); opacity: var(--o); animation: var(--t) linear var(--d) infinite; will-change: transform; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.deco-cae span { animation-name: tema-cae; }
.deco-sube span { top: auto; bottom: -40px; animation-name: tema-sube; }
.deco-flota span { top: var(--y); animation-name: tema-flota; animation-timing-function: ease-in-out; animation-duration: calc(var(--t) / 2); }
body:not(.con-nav) .deco-cae span { --h: 105vh; }
body:not(.con-nav) .deco-sube span { --h: 105vh; }
@keyframes tema-cae { from { transform: translateY(0) rotate(0); } to { transform: translateY(var(--h, 340px)) rotate(var(--r)); } }
@keyframes tema-sube { from { transform: translateY(0) rotate(0); } to { transform: translateY(calc(-1 * var(--h, 340px))) rotate(calc(var(--r) / 4)); } }
@keyframes tema-flota { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(18px, -16px) rotate(calc(var(--r) / 10)); } }
@media (prefers-reduced-motion: reduce) { .deco span { animation: none; top: var(--y); bottom: auto; } }

/* Detalles especiales por mes */
body[data-tema="navidad"] .navbar.bg-app { border-bottom: 0; box-shadow: none; }
body[data-tema="navidad"] .navbar.bg-app::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 8px;
  background: radial-gradient(circle, #fbbf24 0 3px, transparent 4px) 0 0 / 28px 8px, radial-gradient(circle, #ef4444 0 3px, transparent 4px) 14px 0 / 28px 8px;
  animation: luces 1.2s steps(2) infinite; }
@keyframes luces { 50% { filter: hue-rotate(120deg) brightness(1.3); } }
body[data-tema="patrias"] .navbar.bg-app { border-bottom: 0; box-shadow: inset 0 -4px 0 #ef4444, inset 0 -7px 0 #fff; }
body[data-tema="halloween"] .tema-chip, body[data-tema="halloween"] .tema-saludo { box-shadow: 0 0 14px rgba(249,115,22,.55); }
@media print { .deco, .tema-chip { display: none !important; } }

/* =====================================================================
   v2: fotos, menú de módulos, etiquetas, ABC
   ===================================================================== */
.mini-foto { width: 40px; height: 40px; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: #f4f5fb; }
.foto-lista { object-fit: cover; padding: 0 !important; }
.foto-titulo { width: 48px; height: 48px; object-fit: cover; border-radius: 14px; border: 2px solid rgba(255,255,255,.6); }
.foto-producto { flex-shrink: 0; width: 96px; height: 96px; border-radius: 18px; border: 2px dashed #c7cbe0; display: grid; place-items: center; cursor: pointer; overflow: hidden; background: #f8f9fd; color: #8b8fa3; }
.foto-producto:hover { border-color: var(--c); color: var(--c); }
.foto-producto img { width: 100%; height: 100%; object-fit: cover; }
.foto-producto span { display: flex; flex-direction: column; align-items: center; font-size: 1.6rem; line-height: 1; }
.foto-producto small { font-size: .7rem; margin-top: 4px; }
.modulo-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 12px 6px; border-radius: 16px; text-decoration: none; color: inherit; font-size: .78rem; font-weight: 600; line-height: 1.2; background: #f8f9fd; height: 100%; }
.modulo-tile .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; }
.modulo-tile:hover, .modulo-tile.activo { background: #eef0fb; }
.abc-A { background: #10b981; } .abc-B { background: #4f46e5; } .abc-C { background: #9499ad; }
.nav-item.dropdown .dropdown-menu { min-width: 250px; }

/* Etiquetas con código de barras */
.hoja-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta { background: #fff; border: 1px dashed #c7cbe0; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2mm; overflow: hidden; text-align: center; color: #000; }
.etiqueta svg { max-width: 100%; height: auto; }
.et-nombre { font-size: 8pt; font-weight: 700; line-height: 1.1; max-height: 2.3em; overflow: hidden; }
.et-precio { font-size: 12pt; font-weight: 800; line-height: 1.1; }
.tam-50x25 .etiqueta { width: 50mm; height: 25mm; } .tam-50x25 .et-precio { font-size: 10pt; } .tam-50x25 svg { max-height: 12mm; }
.tam-40x30 .etiqueta { width: 40mm; height: 30mm; } .tam-40x30 svg { max-height: 15mm; }
.tam-60x40 .etiqueta { width: 60mm; height: 40mm; } .tam-60x40 svg { max-height: 20mm; } .tam-60x40 .et-precio { font-size: 15pt; }
.tam-a4 .etiqueta { width: 63mm; height: 33.9mm; } .tam-a4 svg { max-height: 16mm; }
@media print {
  body:has(.hoja-etiquetas) main > :not(.hoja-etiquetas) { display: none !important; }
  body:has(.hoja-etiquetas) main { padding: 0 !important; margin: 0 !important; max-width: none !important; animation: none; }
  .hoja-etiquetas { gap: 0; }
  .etiqueta { border: 0; border-radius: 0; break-inside: avoid; }
  .tam-50x25 .etiqueta, .tam-40x30 .etiqueta, .tam-60x40 .etiqueta { break-after: page; }
  .deco, .toast-container { display: none !important; }
}

/* Dentro del sistema: sin adornos animados ni chip del tema (solo en las pantallas de acceso) */
body.con-nav .deco { display: none !important; }
/* KPIs en dos columnas del teléfono: el monto no se parte en dos líneas */
@media (max-width: 575.98px) { .kpi .v { font-size: clamp(1rem, 5.2vw, 1.35rem); white-space: nowrap; } }

/* Factura de compra con datos del SII */
.prov-sii-card { position: relative; border: 1px solid #c7d2fe; background: #f5f7ff; border-radius: 14px; padding: .7rem .8rem; margin-bottom: .6rem; }
.prov-sii-card .prov-cerrar { position: absolute; top: .5rem; right: .5rem; }
.sii-verif .sii-ok { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px; padding: .4rem .6rem; }
.sii-pend-prov .list-group-item, .sii-pend .list-group-item { font-size: .85rem; }
.sii-cuadra { font-size: .8rem; font-weight: 600; margin-top: 2px; }
.sii-cuadra.ok { color: #059669; } .sii-cuadra.dif { color: #b45309; }
[data-bs-theme="dark"] .prov-sii-card { background: rgba(99,102,241,.1); } [data-bs-theme="dark"] .sii-verif .sii-ok { background: rgba(16,185,129,.1); }

/* ---------- Menú «Más» del computador: panel por áreas ---------- */
.navbar .nav-item.dropdown .menu-mas { padding: 14px; border: 0; border-radius: 20px; min-width: 760px; margin-top: 10px !important;
  display: none; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; }
.navbar .nav-item.dropdown .menu-mas.show { display: grid; }
.menu-mas-col { min-width: 0; }
.menu-mas-tit { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #8a8fa8; padding: 4px 10px 8px; border-bottom: 1px solid #eef0f6; margin-bottom: 6px; }
.menu-mas-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; color: inherit; text-decoration: none; }
.menu-mas-item:hover, .menu-mas-item:focus { background: #f3f4fb; color: inherit; }
.menu-mas-item.active { background: #eef2ff; }
.menu-mas-item .ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 1.05rem; }
.menu-mas-item b { display: block; font-size: .88rem; font-weight: 700; line-height: 1.2; }
.menu-mas-item small { display: block; font-size: .74rem; color: #8a8fa8; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1199.98px) { .navbar .nav-item.dropdown .menu-mas { min-width: 640px; } .menu-mas-item small { display: none; } }
[data-bs-theme="dark"] .menu-mas-tit { border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .menu-mas-item:hover { background: rgba(255,255,255,.06); }

/* ---------- Pantallas de acceso: diseño fijo de la marca (sin tema del mes) ---------- */
.auth, .login-bg {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(16,185,129,.28), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(99,102,241,.45), transparent 60%),
    linear-gradient(140deg, #16133a 0%, #241f5c 55%, #2f2a7a 100%) !important;
}
.auth-hero { position: relative; overflow: hidden; }
.auth-hero:before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.auth-hero-in { position: relative; }
.auth-h span { background: linear-gradient(90deg, #34d399, #a5b4fc) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent; }
.auth-lista li { backdrop-filter: blur(4px); }
.auth-card { border-radius: 24px; padding: 36px 32px; box-shadow: 0 30px 80px rgba(8,6,30,.45); }
.auth-card h1 { letter-spacing: -.02em; }
/* Campos: el ícono, el texto y el botón se ven como un solo campo, con un único borde y foco */
.auth-card .input-group { border: 1.5px solid #e1e3ef; border-radius: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; flex-wrap: nowrap; }
.auth-card .input-group:focus-within { border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,.14); }
.auth-card .input-group > .input-group-text, .auth-card .input-group > .form-floating > .form-control, .auth-card .input-group > .form-control,
.auth-card .input-group > .btn { border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
.auth-card .input-group > .input-group-text { padding-left: 16px; padding-right: 4px; color: #8a8fa8; }
.auth-card .input-group:focus-within > .input-group-text { color: #6366f1; }
.auth-card .input-group .form-floating > label { color: #8a8fa8; }
.auth-card .input-group .form-floating > .form-control:focus ~ label, .auth-card .input-group .form-floating > .form-control:not(:placeholder-shown) ~ label { color: #6366f1; }
.auth-card .form-floating > .form-control:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset !important; }
.auth-card .btn-ver-clave { color: #8a8fa8; padding: 0 16px; }
.auth-card .btn-ver-clave:hover { color: #6366f1; }
@media (max-width: 991.98px) { .auth-card { padding: 30px 22px; } }

/* ---------- Notificaciones ---------- */
.notif-activar { border: 0; background: linear-gradient(135deg, #fff 0%, #fff5f5 100%); box-shadow: 0 6px 22px rgba(30,27,75,.07); }
.notif-activar.resaltar { box-shadow: 0 0 0 3px #fecaca, 0 6px 22px rgba(30,27,75,.07); }
.notif-estado { display: flex; gap: .5rem; align-items: flex-start; padding: .6rem .8rem; border-radius: 12px; background: #f4f5fb; font-size: .9rem; }
.notif-estado.bien { background: #ecfdf5; color: #065f46; } .notif-estado.mal { background: #fef2f2; color: #991b1b; } .notif-estado.info { background: #eff6ff; color: #1e40af; }
.notif-ios { margin-top: .8rem; padding: .7rem .9rem; border: 1px dashed #93c5fd; border-radius: 12px; font-size: .88rem; background: #f8fbff; }
.notif-qr { display: flex; gap: 1rem; align-items: center; }
.notif-qr .qr { width: 160px; height: 160px; flex: none; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 14px; padding: 8px; border: 1px solid #e6e8f2; position: relative; }
.notif-qr .qr img, .notif-qr .qr canvas { width: 100% !important; height: auto !important; }
.notif-qr .qr.vencido img, .notif-qr .qr.vencido canvas { opacity: .12; }
.notif-qr .qr.vencido::after { content: 'Vencido'; position: absolute; font-weight: 800; color: #991b1b; }
#btnActivar.pulso { animation: notifPulso 1.6s ease-in-out infinite; }
@keyframes notifPulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.45); } 50% { box-shadow: 0 0 0 10px rgba(220,38,38,0); } }
.notif-tabs .nav-link { font-weight: 600; }
.notif-ev { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; padding: .75rem 1rem; }
.notif-ev .ic { width: 36px; height: 36px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: #f1f2f8; color: #6b7086; font-size: 1.05rem; transition: all .15s; }
.notif-ev.on .ic { background: #fee2e2; color: #dc2626; }
.notif-ev .form-switch .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }
.notif-param { display: inline-flex; align-items: center; gap: .35rem; margin-top: .3rem; font-size: .8rem; color: #5f6577; }
.notif-param input { width: 110px; }
.notif-guardar { position: sticky; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 5; text-align: center; margin-top: 1rem; }
@media (min-width: 992px) { .notif-guardar { bottom: 1rem; } }
.notif-guardar .btn { box-shadow: 0 10px 24px rgba(79,70,229,.35); }
.notif-bandeja .list-group-item { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem 1rem; }
.notif-bandeja .list-group-item.nueva { background: #fff7f7; border-left: 3px solid #dc2626; }
.notif-bandeja .ic { width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: #eef2ff; color: #4f46e5; }
.notif-bandeja .ic.ev-stock, .notif-bandeja .ic.ev-vencimientos, .notif-bandeja .ic.ev-ajuste { background: #fef3c7; color: #b45309; }
.notif-bandeja .ic.ev-caja, .notif-bandeja .ic.ev-venta, .notif-bandeja .ic.ev-resumen, .notif-bandeja .ic.ev-devolucion, .notif-bandeja .ic.ev-descuento { background: #dcfce7; color: #15803d; }
.notif-bandeja .ic.ev-login, .notif-bandeja .ic.ev-usuarios, .notif-bandeja .ic.ev-plat { background: #f3e8ff; color: #7e22ce; }
.notif-bandeja .ic.ev-dte, .notif-bandeja .ic.ev-folios, .notif-bandeja .ic.ev-compra, .notif-bandeja .ic.ev-fiados { background: #fee2e2; color: #dc2626; }
.nv-campana .badge { font-size: .62rem; }
[data-bs-theme="dark"] .notif-activar { background: rgba(255,255,255,.03); }
[data-bs-theme="dark"] .notif-estado, [data-bs-theme="dark"] .notif-ev .ic { background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .notif-bandeja .list-group-item.nueva { background: rgba(220,38,38,.08); }
/* Actividad de la plataforma */
.punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.punto.vivo { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
.act-dias .fila { display: grid; grid-template-columns: 78px 1fr auto; gap: .6rem; align-items: center; font-size: .84rem; padding: .18rem 0; }
.act-dias .barra { height: 10px; border-radius: 99px; background: #f1f2f8; overflow: hidden; }
.act-dias .barra span { display: block; height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 99px; }
.act-dias .dia { color: #5f6577; }
/* Cargos y permisos */
.cargos-lista .list-group-item.active small { color: rgba(255,255,255,.8); }
.permisos-grupo { border: 1px solid #eef0f6; border-radius: 14px; padding: .7rem .8rem; height: 100%; }
.permiso { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem .3rem; border-radius: 10px; cursor: pointer; }
.permiso:hover { background: #f6f7fb; }
.permiso .form-check-input { margin-top: .2rem; flex: none; width: 1.15em; height: 1.15em; }
.permiso.fuera-plan b { color: #8b8fa3; }
[data-bs-theme="dark"] .permisos-grupo { border-color: rgba(255,255,255,.1); } [data-bs-theme="dark"] .permiso:hover { background: rgba(255,255,255,.05); }
/* Planes */
.plan-card { border: 1px solid #e6e8f2; transition: transform .15s, box-shadow .15s; }
.plan-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(30,27,75,.1); }
.plan-card.destacado { border: 2px solid #4f46e5; }
.plan-card.actual { border: 2px solid #10b981; background: linear-gradient(180deg, #f0fdf4, #fff 40%); }
[data-bs-theme="dark"] .plan-card.actual { background: rgba(16,185,129,.06); }
/* Soporte (superadmin) */
.sop { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100dvh - 210px); min-height: 480px; background: #fff; border-radius: 18px; box-shadow: 0 4px 18px rgba(30,27,75,.06); overflow: hidden; border: 1px solid #eef0f6; }
.sop-lista { border-right: 1px solid #eef0f6; display: flex; flex-direction: column; min-height: 0; }
.sop-filtros { padding: .8rem; border-bottom: 1px solid #eef0f6; }
#sopTickets { overflow-y: auto; flex: 1; }
.sop-t { position: relative; padding: .7rem .9rem; } .sop-t.pend { background: #fffbeb; } .sop-t.active { background: #4f46e5 !important; }
.sop-punto { position: absolute; right: .8rem; bottom: .8rem; width: 10px; height: 10px; border-radius: 50%; background: #e11d48; }
.sop-chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.sop-vacio { margin: auto; text-align: center; color: #8b8fa3; display: grid; gap: .3rem; padding: 2rem; } .sop-vacio i { font-size: 3rem; opacity: .5; }
.sop-cab { display: flex; gap: .7rem; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid #eef0f6; }
.sop-msgs { flex: 1; overflow-y: auto; padding: 1rem; background: #f5f6fb; display: flex; flex-direction: column; gap: .5rem; }
.sop-m { max-width: 75%; padding: .55rem .8rem; border-radius: 14px; background: #fff; align-self: flex-start; box-shadow: 0 1px 2px rgba(0,0,0,.05); white-space: pre-wrap; word-wrap: break-word; }
.sop-m.soporte { align-self: flex-end; background: #4f46e5; color: #fff; }
.sop-m small { display: block; font-size: .7rem; opacity: .65; margin-top: .2rem; } .sop-m audio { max-width: 260px; height: 36px; display: block; }
.sop-pie { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid #eef0f6; align-items: flex-end; } .sop-pie textarea { resize: none; }
.sop-nota { padding: 0 .9rem .6rem; color: #8b8fa3; }
@media (max-width: 991.98px) { .sop { grid-template-columns: 1fr; height: calc(100dvh - 230px); } .sop.con-chat .sop-lista { display: none; } .sop:not(.con-chat) .sop-chat { display: none; } }
[data-bs-theme="dark"] .sop { background: transparent; } [data-bs-theme="dark"] .sop-msgs { background: rgba(255,255,255,.03); } [data-bs-theme="dark"] .sop-m:not(.soporte) { background: rgba(255,255,255,.08); }
/* Chat de soporte: respuestas del asistente IA */
.sop-m.ia { background: #eef2ff; border: 1px solid #e0e7ff; }
.sop-ia { display: block; font-size: .7rem; font-weight: 700; color: #4f46e5; margin-bottom: .15rem; }
[data-bs-theme="dark"] .sop-m.ia { background: rgba(99,102,241,.15); border-color: rgba(99,102,241,.3); } [data-bs-theme="dark"] .sop-ia { color: #a5b4fc; }
.sop-m.soporte .sop-ens { color: inherit; text-decoration: underline; }

/* Celular: en los indicadores el ícono va arriba y el monto ocupa todo el ancho (montos grandes como $1.158.824 se salían de la tarjeta) */
@media (max-width: 575.98px) {
  .kpi.flex-row { flex-direction: column !important; align-items: flex-start !important; gap: .45rem !important; }
  .kpi.flex-row .ic { width: 34px; height: 34px; font-size: 1.05rem; border-radius: 10px; }
  .kpi.flex-row > div { width: 100%; }
  .kpi .v { font-size: clamp(1rem, 5vw, 1.3rem); }
}

/* Franja de la demo pública */
.demo-franja { background: linear-gradient(90deg, #f59e0b, #f97316); color: #1f1300; font-size: .86rem; font-weight: 600; padding: .45rem 0; }
.demo-franja .container-xl { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.demo-franja span { flex: 1; min-width: 180px; }
.demo-franja .btn { padding: .2rem .8rem; font-size: .8rem; }

/* Guía de primeros pasos (inicio de empresas nuevas) */
.guia { border-top: 4px solid #6366f1; }
.guia-paso { display: flex; align-items: center; gap: .7rem; padding: .65rem .75rem; border: 1px solid #e5e7f0; border-radius: 12px; color: inherit; text-decoration: none; height: 100%; background: #fff; transition: border-color .15s, box-shadow .15s; }
.guia-paso:hover { border-color: #a5b4fc; box-shadow: 0 4px 12px rgba(79,70,229,.08); }
.guia-paso .ic { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #eef2ff; color: #4f46e5; }
.guia-paso b { display: block; font-size: .9rem; } .guia-paso small { display: block; color: #6b7280; font-size: .78rem; line-height: 1.25; }
.guia-paso.hecho { background: #f6fef9; border-color: #bbf7d0; } .guia-paso.hecho .ic { background: #16a34a; color: #fff; } .guia-paso.hecho b { text-decoration: line-through; color: #6b7280; }

/* Configurar empresa: índice lateral, secciones con título y accesos a otros ajustes */
.ajustes-indice { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; }
.ajustes-indice a { padding: .55rem .8rem; border-radius: 10px; color: #3b3f52; text-decoration: none; font-weight: 600; font-size: .92rem; }
.ajustes-indice a:hover { background: #eef0fb; color: #211e4d; }
.ajustes-indice a i { width: 1.4rem; display: inline-block; color: #6366f1; }
.ajustes section { scroll-margin-top: 84px; }
.ajustes-tit { background: transparent; padding: .9rem 1rem .7rem; }
.ajustes-tit b { display: block; font-size: 1rem; } .ajustes-tit small { display: block; color: #6b7280; font-size: .82rem; margin-top: 2px; }
.ajustes-sub { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 700; margin-bottom: .6rem; }
.ajustes-tile { display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; border: 1px solid #e5e7f0; border-radius: 14px; background: #fff; color: inherit; text-decoration: none; height: 100%; transition: border-color .15s, box-shadow .15s; }
.ajustes-tile:hover { border-color: #a5b4fc; box-shadow: 0 4px 12px rgba(79,70,229,.08); }
.ajustes-tile .ic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: #eef2ff; color: #4f46e5; font-size: 1.1rem; }
.ajustes-tile b { display: block; font-size: .92rem; } .ajustes-tile small { display: block; color: #6b7280; font-size: .78rem; line-height: 1.3; }
.navbar-nav .nav-link { white-space: nowrap; }
.nv-nuevo { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
/* Pantallas medianas (992–1299 px): menú solo con íconos para que quepan Nuevo, chat, campana y empresa */
@media (min-width: 992px) and (max-width: 1299.98px) { .navbar .nv-txt { display: none; } .navbar-nav .nav-link { padding-left: .6rem; padding-right: .6rem; } }
@media (min-width: 1300px) and (max-width: 1439.98px) { .navbar .dropdown-toggle .text-truncate { max-width: 96px !important; } .navbar-nav .nav-link { padding-left: .45rem; padding-right: .45rem; } }
.dropdown-item .scs-n.scs-n-barra { position: static !important; float: right; margin-top: 2px; }

/* Formulario de producto: foto grande, banco de imágenes y margen */
.foto-grande { aspect-ratio: 1 / 1; border-radius: 16px; background: #f1f3f9; border: 1px dashed #cfd4e3; display: grid; place-items: center; overflow: hidden; }
.foto-grande img { width: 100%; height: 100%; object-fit: cover; }
.foto-grande span { color: #9aa0b5; text-align: center; } .foto-grande span i { font-size: 2.6rem; display: block; } .foto-grande span small { font-weight: 600; }
.banco-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.banco-cats button { flex: none; border: 1px solid #e3e5ee; background: #fff; border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 600; color: #3b3f52; }
.banco-cats button.on { background: #211e4d; border-color: #211e4d; color: #fff; }
.banco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.banco-sug { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.banco-item { border: 2px solid transparent; background: #fff; border-radius: 14px; padding: 0; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(20,20,60,.08); transition: transform .1s, border-color .15s; }
.banco-item:hover { transform: translateY(-2px); border-color: #a5b4fc; } .banco-item.sel { border-color: #4f46e5; }
.banco-item img { width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; }
.banco-item span { font-size: .72rem; font-weight: 600; padding: 4px 6px; color: #3b3f52; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.margen { border-radius: 14px; padding: 12px 14px; background: #f6f7fb; color: #6b7280; font-size: .88rem; display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; }
.margen > div small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; opacity: .8; }
.margen > div b { font-size: 1.35rem; font-weight: 800; color: inherit; font-variant-numeric: tabular-nums; }
.margen p { flex-basis: 100%; margin: 0; font-size: .8rem; }
.margen.bien { background: #ecfdf3; color: #166534; } .margen.bajo { background: #fffbeb; color: #92400e; } .margen.mal { background: #fef2f2; color: #b91c1c; }
.banco-item img { background: #eef0f7; }
/* Centro de informes */
.inf-tile em { display: inline-block; margin-top: 4px; font-style: normal; font-size: .74rem; font-weight: 700; color: #4f46e5; background: #eef2ff; border-radius: 999px; padding: 1px 8px; }
.tabla-calor td { text-align: center; font-variant-numeric: tabular-nums; font-size: .8rem; } .tabla-calor td:first-child { text-align: left; font-weight: 600; }

/* Centro de informes: buscador, favoritos y tablas ordenables */
.inf-buscar { position: relative; width: 220px; max-width: 100%; } .inf-buscar i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #9499ad; font-size: .85rem; } .inf-buscar input { padding-left: 30px; }
.inf-col .inf-tile { padding-right: 2.4rem; }
.inf-fav { position: absolute; top: 6px; right: 12px; border: 0; background: none; color: #c3c6d4; padding: 2px 4px; line-height: 1; border-radius: 6px; }
.inf-fav:hover, .inf-fav:focus-visible { color: #f59e0b; } .inf-fav[aria-pressed="true"] { color: #f59e0b; }
.inf-tabla th.inf-ord { cursor: pointer; user-select: none; white-space: nowrap; } .inf-tabla th.inf-ord::after { content: '\2195'; opacity: .3; margin-left: 4px; font-size: .75em; }
.inf-tabla th.inf-ord[aria-sort="ascending"]::after { content: '\2191'; opacity: .9; } .inf-tabla th.inf-ord[aria-sort="descending"]::after { content: '\2193'; opacity: .9; }
.inf-tabla tfoot td { font-weight: 700; background: #f4f5fb; border-top: 2px solid #dfe2ee; white-space: nowrap; }
.inf-filtro { max-width: 260px; }
@media (max-width: 575px) { .inf-buscar { width: 100%; order: 3; } }
@media print { .inf-fav, .inf-filtro-wrap { display: none !important; } }

/* Opciones seleccionables (radio con tarjeta): tipo de promoción, tipo de producto, alcance */
.opcion { display: flex; gap: 10px; align-items: flex-start; height: 100%; margin: 0; padding: 11px 13px; border: 1.5px solid #e2e4f0; border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.opcion:hover { border-color: color-mix(in srgb, var(--a-primario) 45%, #e2e4f0); }
.opcion .ic { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; flex-shrink: 0; font-size: 1.05rem; background: #eef0fb; color: var(--a-primario); }
.opcion b { display: block; font-size: .93rem; line-height: 1.25; }
.opcion small { display: block; color: #6b7280; font-size: .78rem; line-height: 1.3; margin-top: 2px; }
.opcion.compacta { align-items: center; padding: 8px 12px; }
.opcion.compacta .ic { width: 28px; height: 28px; font-size: .9rem; }
.btn-check:checked + .opcion { border-color: var(--a-primario); background: color-mix(in srgb, var(--a-primario) 6%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-primario) 14%, transparent); }
.btn-check:checked + .opcion .ic { background: var(--a-primario); color: #fff; }
.btn-check:focus-visible + .opcion { outline: 2px solid var(--a-primario); outline-offset: 2px; }
[data-bs-theme="dark"] .opcion { background: transparent; border-color: rgba(255,255,255,.12); }
[data-bs-theme="dark"] .opcion .ic { background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .btn-check:checked + .opcion { background: rgba(99,102,241,.12); }
/* Pasos numerados (explicaciones «¿cómo funciona?») */
.paso-num { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; flex-shrink: 0; font-weight: 800; font-size: .9rem; background: var(--a-primario); color: #fff; }
.sec-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--a-primario); color: #fff; font-size: .75rem; font-weight: 800; margin-right: 6px; vertical-align: 1px; }
.promo-resumen { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #10b981 9%, #fff); border: 1px solid color-mix(in srgb, #10b981 30%, #fff); font-size: .88rem; }
[data-bs-theme="dark"] .promo-resumen { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.3); }