/* NoteFact — estilos
   Paleta: papel #F3F5F2 · tinta #16241F · esmeralda #0E7C66 · sol #F2B705 · teja #C2412D · musgo #6B7A73 */
:root {
  --papel: #f3f5f2;
  --blanco: #ffffff;
  --tinta: #16241f;
  --tinta-2: #2b3a34;
  --musgo: #6b7a73;
  --linea: #dfe5e1;
  --linea-2: #eef2ef;
  --pri: #0e7c66;
  --pri-2: #0a6352;
  --pri-suave: #e1f2ec;
  --sol: #f2b705;
  --sol-suave: #fff6d6;
  --teja: #c2412d;
  --teja-suave: #fbe9e5;
  --ambar: #b7791f;
  --ambar-suave: #fdf2dc;
  --r-s: 8px;
  --r: 12px;
  --r-l: 18px;
  --sombra: 0 1px 2px rgba(22, 36, 31, .06), 0 8px 24px -12px rgba(22, 36, 31, .18);
  --rail: 232px;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "tnum" 1;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
html, body { margin: 0; height: 100%; }
/* Siempre claro, aunque el navegador o Windows estén en modo oscuro */
input, select, textarea { background-color: var(--blanco); color: var(--tinta); color-scheme: light; }
body { background: var(--papel); color: var(--tinta); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
h1, h2, h3 { text-wrap: balance; }
img, svg { shape-rendering: geometricPrecision; }
img { image-rendering: -webkit-optimize-contrast; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--pri); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--pri) 45%, transparent); outline-offset: 2px; border-radius: 6px; }
.oculto { display: none !important; }

/* ---------- Estructura ---------- */
.app { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; background: var(--tinta); color: #cfdad5; display: flex; flex-direction: column; padding: 20px 14px; gap: 4px; }
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; color: #fff; }
.marca .logo { width: 34px; height: 34px; border-radius: 10px; background: var(--pri); display: grid; place-items: center; flex: none; overflow: hidden; }
.marca .logo img { width: 100%; height: 100%; object-fit: cover; }
.marca b { font-size: 15px; font-weight: 800; letter-spacing: -.2px; display: block; line-height: 1.15; }
.marca small { color: #8fa39b; font-size: 12px; }
.rail a.nav { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: inherit; text-decoration: none; font-weight: 600; font-size: 14.5px; }
.rail a.nav:hover { background: rgba(255,255,255,.06); color: #fff; }
.rail a.nav.activo { background: rgba(255,255,255,.1); color: #fff; }
.rail a.nav svg { width: 20px; height: 20px; flex: none; }
.rail a.nav.vender-btn { margin: 0 0 14px; background: var(--sol); color: var(--tinta); justify-content: center; font-weight: 800; }
.rail a.nav.vender-btn:hover { background: #ffc81f; color: var(--tinta); }
.rail a.nav.vender-btn.activo { background: var(--sol); color: var(--tinta); }
.rail .abajo { margin-top: auto; }
.ambiente { margin: 8px 6px 0; font-size: 12.5px; color: #8fa39b; display: flex; gap: 8px; align-items: center; }
.ambiente i { width: 8px; height: 8px; border-radius: 50%; background: var(--sol); }
.ambiente.prod i { background: #35c08f; }

main { min-width: 0; padding: 28px 36px 60px; max-width: 1280px; width: 100%; }
.titulo { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.titulo h1 { font-size: 26px; font-weight: 800; letter-spacing: -.6px; margin: 0; }
.titulo p { margin: 2px 0 0; color: var(--musgo); }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* Barra inferior (celular) */
.tabbar { display: none; }

/* ---------- Controles ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--linea); background: var(--blanco); padding: 10px 16px; border-radius: 10px; font-weight: 700; font-size: 14.5px; cursor: pointer; text-decoration: none; color: var(--tinta); white-space: nowrap; transition: background .15s, border-color .15s; }
.btn:hover { border-color: #c7d1cc; background: #fafbfa; }
.btn svg { width: 18px; height: 18px; }
.btn.pri { background: var(--pri); border-color: var(--pri); color: #fff; }
.btn.pri:hover { background: var(--pri-2); }
.btn.sol { background: var(--sol); border-color: var(--sol); color: var(--tinta); }
.btn.peligro { color: var(--teja); }
.btn.peligro:hover { background: var(--teja-suave); border-color: #f0c8bf; }
.btn.plano { border-color: transparent; background: transparent; }
.btn.plano:hover { background: var(--linea-2); }
.btn.grande { padding: 14px 22px; font-size: 16px; border-radius: 12px; }
.btn.ancho { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.cargando { position: relative; color: transparent !important; }
.btn.cargando::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.6); border-top-color: #fff; border-radius: 50%; animation: giro .7s linear infinite; }
.btn:not(.pri).cargando::after { border-color: var(--linea); border-top-color: var(--pri); }
@keyframes giro { to { transform: rotate(360deg); } }

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo > span { font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.campo small { color: var(--musgo); font-size: 12.5px; }
.input, .campo input, .campo select, .campo textarea { width: 100%; border: 1.5px solid var(--linea); background: var(--blanco); border-radius: 10px; padding: 10px 12px; outline: none; transition: border-color .15s, box-shadow .15s; }
.input:focus, .campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--pri); box-shadow: 0 0 0 4px var(--pri-suave); }
.campo textarea { min-height: 80px; resize: vertical; }
.fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 14px; }

.buscador { position: relative; }
.buscador svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--musgo); }
.buscador input { padding-left: 40px; }

.segmento { display: inline-flex; background: var(--linea-2); border-radius: 12px; padding: 4px; gap: 4px; }
.segmento button { border: 0; background: transparent; padding: 8px 16px; border-radius: 9px; font-weight: 700; cursor: pointer; color: var(--musgo); }
.segmento button.on { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 3px rgba(22,36,31,.15); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1.5px solid var(--linea); background: var(--blanco); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 13.5px; cursor: pointer; color: var(--tinta-2); }
.chip.on { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* Estados */
.estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado.aceptado, .estado.facturada { background: var(--pri-suave); color: var(--pri-2); }
.estado.observado, .estado.aceptada { background: #e3eefc; color: #1d5fb3; }
.estado.pendiente, .estado.error { background: var(--ambar-suave); color: var(--ambar); }
.estado.rechazado, .estado.rechazada { background: var(--teja-suave); color: var(--teja); }
.estado.vencida { background: var(--linea-2); color: var(--musgo); }

/* ---------- Superficies ---------- */
.panel { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 20px; min-width: 0; overflow-x: auto; }
.dos > *, .saludo > * { min-width: 0; }
.panel h2 { font-size: 16px; font-weight: 800; margin: 0 0 14px; letter-spacing: -.2px; }
.vacio { text-align: center; padding: 48px 20px; color: var(--musgo); }
.vacio b { display: block; color: var(--tinta); font-size: 16px; margin-bottom: 4px; }
.vacio .btn { margin-top: 16px; }

/* ---------- Inicio ---------- */
.saludo { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; margin-bottom: 18px; }
.hoy { background: var(--tinta); color: #e8efeb; border-radius: var(--r-l); padding: 24px 26px; display: flex; flex-direction: column; gap: 18px; position: relative; overflow: hidden; }
.hoy .cifra { font-size: 44px; font-weight: 800; letter-spacing: -1.5px; color: #fff; line-height: 1; }
.hoy .cifra small { font-size: 22px; color: var(--sol); margin-right: 6px; letter-spacing: 0; }
.hoy p { margin: 0; color: #9fb2aa; }
.hoy .btn { align-self: flex-start; }
.barras { display: flex; align-items: flex-end; gap: 6px; height: 72px; }
.barras div { flex: 1; background: rgba(255,255,255,.12); border-radius: 4px 4px 2px 2px; min-height: 3px; position: relative; }
.barras div.hoyb { background: var(--sol); }
.barras div:hover::after { content: attr(data-t); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #fff; color: var(--tinta); font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini .panel { padding: 16px 18px; }
.mini .n { font-size: 26px; font-weight: 800; letter-spacing: -.6px; }
.mini .l { color: var(--musgo); font-size: 13.5px; }
.mini a.panel { text-decoration: none; color: inherit; }
.mini a.panel:hover { border-color: #c7d1cc; }
.aviso { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r); background: var(--ambar-suave); color: #7a5212; margin-bottom: 12px; font-weight: 600; }
.aviso.rojo { background: var(--teja-suave); color: #8d2e20; }
.aviso.azul { background: #e3eefc; color: #1d4f8f; }
.aviso .btn { margin-left: auto; }
.dos { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; }

/* ---------- Listas ---------- */
.lista { display: flex; flex-direction: column; }
.item { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 12px 8px; border-bottom: 1px solid var(--linea-2); cursor: pointer; border-radius: 10px; }
.item:last-child { border-bottom: 0; }
.item:hover { background: #f8faf9; }
.item .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--linea-2); color: var(--tinta-2); }
.item .ico.f { background: #e3eefc; color: #1d5fb3; }
.item .ico.b { background: var(--pri-suave); color: var(--pri-2); }
.item .ico.n { background: var(--teja-suave); color: var(--teja); }
.item .ico.c { background: var(--sol-suave); color: #8a6a00; }
.item .t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .s { color: var(--musgo); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .m { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.item .m b { font-size: 15.5px; }
.item > div { min-width: 0; }

.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: 13px; color: var(--musgo); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.tabla td { padding: 12px; border-bottom: 1px solid var(--linea-2); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr { cursor: pointer; }
.tabla tbody tr:hover td { background: #f8faf9; }
.tabla .r { text-align: right; white-space: nowrap; }
.filtros { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.filtros .buscador { flex: 1; min-width: 220px; }

/* ---------- Vender (punto de venta) ---------- */
.pos { display: grid; grid-template-columns: 1fr 400px; gap: 22px; align-items: start; }
.catalogo .buscador input { padding-top: 13px; padding-bottom: 13px; font-size: 16px; border-radius: 12px; }
.productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 14px; }
.prod { text-align: left; border: 1.5px solid var(--linea); background: var(--blanco); border-radius: var(--r); padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; min-height: 104px; transition: border-color .12s, transform .12s; }
.prod:hover { border-color: var(--pri); }
.prod:active { transform: scale(.98); }
.prod .d { font-weight: 700; font-size: 14px; line-height: 1.3; }
.prod .p { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; flex-wrap: wrap; }
.prod .d { width: 100%; }
.prod .p b { font-size: 16px; }
.prod .p small { color: var(--musgo); font-size: 12px; }
.prod.libre { border-style: dashed; color: var(--pri-2); justify-content: center; align-items: center; text-align: center; font-weight: 700; }
.prod.libre svg { width: 22px; height: 22px; }

/* El ticket */
.ticket { position: sticky; top: 20px; background: var(--blanco); border-radius: var(--r-l) var(--r-l) 0 0; box-shadow: var(--sombra); display: flex; flex-direction: column; max-height: calc(100vh - 60px); }
.ticket::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background: linear-gradient(-45deg, transparent 7px, var(--blanco) 0) 0 0 / 14px 10px repeat-x,
              linear-gradient(45deg, transparent 7px, var(--blanco) 0) 0 0 / 14px 10px repeat-x;
  filter: drop-shadow(0 4px 3px rgba(22,36,31,.08)); }
.ticket .cab { padding: 18px 18px 14px; border-bottom: 1.5px dashed var(--linea); }
.ticket .cab .segmento { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.cliente-sel { margin-top: 12px; display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--linea); border-radius: 12px; padding: 10px 12px; cursor: pointer; background: #fbfcfb; }
.cliente-sel:hover { border-color: var(--pri); }
.cliente-sel .av { width: 34px; height: 34px; border-radius: 50%; background: var(--linea-2); display: grid; place-items: center; flex: none; }
.cliente-sel .av svg { width: 18px; height: 18px; color: var(--musgo); }
.cliente-sel div { min-width: 0; flex: 1; }
.cliente-sel b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cliente-sel small { color: var(--musgo); }
.cliente-sel.falta { border-color: var(--ambar); background: var(--ambar-suave); }
.lineas { overflow-y: auto; padding: 6px 18px; flex: 1; min-height: 120px; }
.linea { padding: 12px 0; border-bottom: 1px solid var(--linea-2); }
.linea:last-child { border-bottom: 0; }
.linea .top { display: flex; gap: 8px; align-items: flex-start; }
.linea .top input { flex: 1; border: 0; padding: 2px 0; font-weight: 700; outline: none; background: transparent; color: var(--tinta); min-width: 0; }
.linea .top input:focus { box-shadow: 0 1.5px 0 var(--pri); }
.linea .quitar { border: 0; background: none; color: var(--musgo); cursor: pointer; padding: 2px; border-radius: 6px; }
.linea .quitar:hover { color: var(--teja); background: var(--teja-suave); }
.linea .quitar svg { width: 16px; height: 16px; display: block; }
.linea .bot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.cant { display: inline-flex; align-items: center; border: 1.5px solid var(--linea); border-radius: 10px; overflow: hidden; }
.cant button { border: 0; background: var(--linea-2); width: 30px; height: 30px; cursor: pointer; font-weight: 800; font-size: 16px; }
.cant button:hover { background: var(--linea); }
.cant input { width: 52px; border: 0; text-align: center; outline: none; font-weight: 700; background: var(--blanco); color: var(--tinta); }
.precio { display: inline-flex; align-items: center; gap: 4px; color: var(--musgo); font-size: 13.5px; }
.precio input { width: 78px; border: 1.5px solid var(--linea); border-radius: 8px; padding: 4px 6px; text-align: right; outline: none; font-weight: 600; color: var(--tinta); background: var(--blanco); }
.precio input:focus { border-color: var(--pri); }
.linea .sub { margin-left: auto; font-weight: 800; }
.ticket .vacio { padding: 36px 10px; }
.ticket .pie { padding: 14px 18px 20px; border-top: 1.5px dashed var(--linea); }
.desglose { display: flex; justify-content: space-between; color: var(--musgo); font-size: 13.5px; margin-bottom: 4px; }
.total { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 14px; }
.total span { font-weight: 700; }
.total b { font-size: 32px; font-weight: 800; letter-spacing: -1px; }
.total b small { font-size: 18px; color: var(--musgo); margin-right: 4px; letter-spacing: 0; }
.total-movil { display: none; }

/* ---------- Ventanas (modal y panel lateral) ---------- */
.capa { position: fixed; inset: 0; background: rgba(22, 36, 31, .42); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; animation: aparece .15s ease-out; }
.modal { background: var(--blanco); border-radius: var(--r-l); width: 100%; max-width: 520px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; box-shadow: 0 24px 60px -20px rgba(22,36,31,.45); animation: sube .2s ease-out; }
.modal.ancho { max-width: 760px; }
.modal header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px; }
.modal header h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.modal .cuerpo { padding: 12px 20px; overflow-y: auto; }
.modal footer { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px 18px; border-top: 1px solid var(--linea-2); }
.cerrar { border: 0; background: var(--linea-2); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.cerrar svg { width: 18px; height: 18px; }
.capa.lateral { justify-content: flex-end; padding: 0; }
.capa.lateral .modal { max-width: 480px; height: 100vh; max-height: none; border-radius: 0; animation: entra .22s ease-out; }
@keyframes aparece { from { opacity: 0; } }
@keyframes sube { from { transform: translateY(12px); opacity: 0; } }
@keyframes entra { from { transform: translateX(40px); opacity: 0; } }

/* Detalle de documento */
.det-total { font-size: 34px; font-weight: 800; letter-spacing: -1px; margin: 4px 0 2px; }
.det-total small { font-size: 18px; color: var(--musgo); margin-right: 4px; letter-spacing: 0; }
.det-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.det-grid div span { display: block; color: var(--musgo); font-size: 12.5px; }
.det-grid div b { font-weight: 700; }
.sunat-msg { border-radius: var(--r); padding: 12px 14px; font-size: 14px; margin: 12px 0; background: var(--linea-2); }
.sunat-msg.aceptado { background: var(--pri-suave); color: #0b4e41; }
.sunat-msg.rechazado { background: var(--teja-suave); color: #7e2a1d; }
.sunat-msg.error, .sunat-msg.pendiente { background: var(--ambar-suave); color: #6c4a10; }
.sunat-msg ul { margin: 6px 0 0; padding-left: 18px; }
.mini-items { border: 1px solid var(--linea-2); border-radius: var(--r); padding: 4px 12px; margin: 12px 0; }
.mini-items div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linea-2); font-size: 14px; }
.mini-items div:last-child { border-bottom: 0; }
.botonera { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }

/* Éxito */
.exito { text-align: center; padding: 10px 0 4px; }
.exito .sello { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: var(--pri-suave); color: var(--pri); animation: pop .35s cubic-bezier(.2, 1.4, .4, 1); }
.exito .sello.warn { background: var(--ambar-suave); color: var(--ambar); }
.exito .sello svg { width: 38px; height: 38px; }
.exito h3 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.4px; }
.exito p { color: var(--musgo); margin: 6px 0 0; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

/* Estado de la consulta RUC / DNI */
.doc-estado { font-size: 13.5px; color: var(--musgo); margin: -6px 0 14px; min-height: 18px; display: flex; gap: 6px; align-items: center; }
.doc-estado:empty { display: none; }
.doc-estado small { color: var(--musgo); }
.doc-estado.ok { color: var(--pri-2); font-weight: 700; }
.doc-estado.ok::before { content: "✓"; }
.doc-estado.mal { color: var(--teja); font-weight: 700; }
.doc-estado.alerta { color: var(--teja); background: var(--teja-suave); padding: 8px 10px; border-radius: 8px; display: block; }
.doc-estado.aviso { color: #7a5212; }
.doc-estado.cargando::before { content: ""; width: 12px; height: 12px; border: 2px solid var(--linea); border-top-color: var(--pri); border-radius: 50%; animation: giro .7s linear infinite; }
/* Selector de archivo con el estilo del sistema (en vez del botón gris del navegador) */
.campo input[type=file] { padding: 8px; border-style: dashed; background: var(--papel); cursor: pointer; color: var(--musgo); font-size: 14px; }
.campo input[type=file]:hover { border-color: var(--pri); }
.campo input[type=file]::file-selector-button { font: inherit; font-weight: 700; color: var(--pri-2); background: var(--pri-suave); border: 0; border-radius: 8px; padding: 8px 14px; margin-right: 12px; cursor: pointer; }
.campo input[type=file]::file-selector-button:hover { background: color-mix(in srgb, var(--pri) 18%, var(--blanco)); }
.campo input.mal { border-color: var(--teja); box-shadow: 0 0 0 4px var(--teja-suave); }

/* Cobro */
.cobro-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px; border-radius: var(--r); background: var(--tinta); color: #cfdad5; }
.cobro-total b { font-size: 30px; color: #fff; letter-spacing: -1px; } .cobro-total small { font-size: 16px; color: var(--sol); margin-right: 4px; }
.metodos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 14px; }
.metodo { border: 1.5px solid var(--linea); background: var(--blanco); border-radius: var(--r); padding: 12px 4px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; font-size: 12.5px; color: var(--tinta-2); }
.metodo svg { width: 22px; height: 22px; color: var(--musgo); }
.metodo.on { border-color: var(--pri); background: var(--pri-suave); color: var(--pri-2); } .metodo.on svg { color: var(--pri); }
.billetes { display: flex; gap: 8px; flex-wrap: wrap; }
.billetes button { border: 1.5px solid var(--linea); background: var(--blanco); border-radius: 999px; padding: 7px 14px; font-weight: 700; cursor: pointer; color: var(--tinta); }
.billetes button:hover { border-color: var(--pri); }
.vuelto { margin-top: 14px; padding: 12px 16px; border-radius: var(--r); background: var(--linea-2); font-size: 16px; color: var(--tinta-2); }
.vuelto b { font-size: 22px; } .vuelto.ok { background: var(--pri-suave); color: var(--pri-2); } .vuelto.falta { background: var(--teja-suave); color: var(--teja); }
.vuelto-grande { display: inline-block; margin-top: 12px; padding: 8px 18px; border-radius: 999px; background: var(--sol-suave); color: #6b5300; font-weight: 700; }
.vuelto-grande b { font-size: 20px; margin-left: 6px; }
@media (max-width: 520px) { .metodos { grid-template-columns: repeat(3, 1fr); } }

/* Caja */
.caja-cerrada { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.caja-ico { width: 56px; height: 56px; border-radius: 16px; background: var(--sol-suave); color: #8a6a00; display: grid; place-items: center; }
.caja-cerrada .abrir { display: flex; gap: 10px; align-items: flex-end; }
.caja-cerrada .abrir .input { width: 160px; }
.desglose-caja { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.desglose-caja div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed rgba(255,255,255,.15); padding-bottom: 6px; }
.desglose-caja span { color: #9fb2aa; } .desglose-caja b { color: #fff; }
.metodos-res { display: flex; flex-direction: column; gap: 8px; }
.metodos-res div { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; }
.metodos-res .mi { width: 34px; height: 34px; border-radius: 10px; background: var(--linea-2); display: grid; place-items: center; color: var(--pri-2); }
.metodos-res .mi svg { width: 18px; height: 18px; }
.caja-aviso { background: var(--sol-suave); border-color: #f2dc8f; color: #6b5300; }
/* Reportes */
.fechas { display: flex; align-items: center; gap: 8px; color: var(--musgo); }
.fechas .input { width: auto; padding: 8px 10px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.kpis .panel { padding: 16px 18px; } .kpis span { color: var(--musgo); font-size: 13.5px; display: block; }
.kpis b { font-size: 24px; letter-spacing: -.5px; }
.grafico { display: flex; align-items: flex-end; gap: 4px; height: 190px; padding-top: 20px; }
.grafico .col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; }
.barra-v { width: 100%; max-width: 46px; background: var(--pri); border-radius: 6px 6px 2px 2px; position: relative; }
.barra-v span { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--tinta-2); }
.grafico.sin { position: relative; }
.grafico.sin .barra-v { background: var(--linea); }
.grafico.sin::before { content: attr(data-vacio); position: absolute; inset: 0 0 24px; display: grid; place-items: center; color: var(--musgo); font-weight: 600; }
.grafico small { color: var(--musgo); font-size: 11px; white-space: nowrap; min-height: 14px; }
.barra-h { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center; margin-bottom: 10px; }
.barra-h div { height: 10px; background: var(--linea-2); border-radius: 5px; overflow: hidden; }
.barra-h i { display: block; height: 100%; background: var(--pri); border-radius: 5px; }
.contador p { color: var(--musgo); margin: -6px 0 12px; }
@media (max-width: 860px) {
  .caja-cerrada { grid-template-columns: 1fr; } .caja-cerrada .abrir .input { width: 100%; } .caja-cerrada .abrir { flex-wrap: wrap; }
  .kpis { grid-template-columns: 1fr 1fr; } .desglose-caja { grid-template-columns: 1fr; }
}

/* Guías */
.guia { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.guia .panel { overflow: visible; }
.guia h2 { display: flex; align-items: center; gap: 10px; }
.guia h2 .n { width: 26px; height: 26px; border-radius: 50%; background: var(--tinta); color: #fff; display: grid; place-items: center; font-size: 13px; }
.recorrido { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; position: relative; }
.punto { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.punto > div > b { display: block; margin-bottom: 8px; }
.pin { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--pri); background: var(--blanco); margin-top: 3px; }
.pin.b { background: var(--pri); }
.ubi { position: relative; }
.ubi .input { padding-right: 34px; }
.ubi-op { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); box-shadow: var(--sombra); max-height: 240px; overflow-y: auto; padding: 4px; }
#u-partida.ok .ubi::after, #u-llegada.ok .ubi::after { content: "✓"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--pri); font-weight: 800; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--linea); border-radius: var(--r); margin-bottom: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--pri); }
.check small { color: var(--musgo); }
.peso { display: flex; gap: 8px; } .peso input { flex: 1; min-width: 0; } .peso select { width: auto; }
.bienes-t, .bien { display: grid; grid-template-columns: 1fr 100px 130px 40px; gap: 8px; align-items: center; }
.bienes-t { color: var(--musgo); font-size: 13px; font-weight: 700; margin: 4px 0 6px; }
.bien { margin-bottom: 8px; } .bien .btn { padding: 8px; }
.nota-04 { color: var(--musgo); margin: -4px 0 0; }
.guia-pie { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--sombra); }
.guia-pie span { color: var(--musgo); font-weight: 600; }
.ruta { margin: 14px 0; padding: 14px; border-radius: var(--r); background: var(--linea-2); display: flex; flex-direction: column; gap: 12px; position: relative; }
.ruta > div { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.ruta small { display: block; color: var(--musgo); font-size: 12.5px; }
@media (max-width: 860px) {
  .recorrido { grid-template-columns: 1fr; }
  .bienes-t { display: none; } .bien { grid-template-columns: 1fr 1fr 40px; } .bien [data-k=descripcion] { grid-column: 1 / -1; }
  .guia-pie { bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* Impresión */
.imprimiendo { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 14px; border-radius: var(--r); background: var(--pri-suave); color: var(--pri-2); font-weight: 700; }
.imprimiendo svg { width: 20px; height: 20px; animation: latido 1.2s ease-in-out infinite; }
.imprimiendo .btn { margin-left: auto; padding: 6px 10px; color: var(--pri-2); }
@keyframes latido { 50% { opacity: .35; } }
.formatos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.formato { border: 1.5px solid var(--linea); background: var(--blanco); border-radius: var(--r); padding: 16px 12px 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.formato:hover { border-color: #c7d1cc; }
.formato.on { border-color: var(--pri); box-shadow: 0 0 0 4px var(--pri-suave); }
.formato b { font-size: 14.5px; margin-top: 8px; }
.formato small { color: var(--musgo); font-size: 12.5px; }
.papel { height: 74px; display: flex; flex-direction: column; gap: 5px; padding: 9px 7px; background: var(--blanco); border: 1.5px solid var(--linea); border-radius: 3px; box-shadow: 0 2px 6px rgba(22,36,31,.08); }
.papel i { display: block; height: 4px; border-radius: 2px; background: var(--linea); }
.papel i:first-child { background: var(--musgo); width: 70%; align-self: center; }
.papel.p80 { width: 46px; } .papel.p58 { width: 34px; } .papel.pa4 { width: 56px; height: 74px; }
.papel.ppr { width: 46px; border-style: dashed; justify-content: center; align-items: center; }
.papel.ppr i { display: none; } .papel.ppr::after { content: "?"; font-weight: 800; color: var(--musgo); font-size: 22px; }
.formato.on .papel { border-color: var(--pri); } .formato.on .papel i:first-child { background: var(--pri); }
.pasos-imp { display: flex; flex-direction: column; gap: 12px; }
.pasos-imp div { display: flex; gap: 12px; align-items: flex-start; }
.pasos-imp span { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--tinta); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.pasos-imp p { margin: 2px 0 0; }
.escritorio { margin-top: 18px; padding: 22px; border-radius: var(--r); background: linear-gradient(135deg, #1d4f8f, #2c6db5); display: flex; gap: 28px; }
.acceso-ico { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; color: #fff; font-size: 12.5px; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.ico-img { width: 48px; height: 48px; border-radius: 12px; background: var(--pri); display: grid; place-items: center; color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.ico-img.claro { background: var(--blanco); color: var(--pri); }
.ico-img svg { width: 26px; height: 26px; }
.linea.nueva { animation: resalta .9s ease-out; }
@keyframes resalta { from { background: var(--sol-suave); } }
@media (max-width: 860px) { .formatos { grid-template-columns: 1fr 1fr; } }

/* Bluetooth */
.bt-caja { border: 1.5px solid var(--linea); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.bt-caja.on { border-color: var(--pri); background: #f6fbf9; }
.bt-fila { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; }
.bt-fila small { color: var(--musgo); }
.bt-ico { width: 40px; height: 40px; border-radius: 12px; background: #e3eefc; color: #1d5fb3; display: grid; place-items: center; }
.bt-ico svg { width: 22px; height: 22px; }
.bt-ancho { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-left: 52px; }
.bt-ancho > span { color: var(--musgo); font-weight: 600; font-size: 14px; }
.switch { position: relative; width: 46px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch i { position: absolute; inset: 0; background: var(--linea); border-radius: 999px; cursor: pointer; transition: background .15s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + i { background: var(--pri); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:disabled + i { opacity: .5; cursor: not-allowed; }
.switch input:focus-visible + i { outline: 3px solid color-mix(in srgb, var(--pri) 45%, transparent); outline-offset: 2px; }
@media (max-width: 520px) { .bt-ancho { padding-left: 0; } }

/* Lista de búsqueda en modal */
.opciones { max-height: 300px; overflow-y: auto; margin: 4px 0 8px; }
.opcion { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.opcion:hover { background: var(--linea-2); }
.opcion small { color: var(--musgo); }

/* Configuración */
.config { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: start; }
.subnav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 20px; }
.subnav button { text-align: left; border: 0; background: transparent; padding: 10px 14px; border-radius: 10px; font-weight: 700; cursor: pointer; color: var(--musgo); }
.subnav button.on { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 3px rgba(22,36,31,.1); }
.cert { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: var(--r); background: var(--linea-2); margin-bottom: 16px; }
.cert svg { width: 26px; height: 26px; color: var(--pri); flex: none; }
.cert.no svg { color: var(--ambar); }
.colores { display: flex; gap: 10px; flex-wrap: wrap; }
.colores button { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--blanco); box-shadow: 0 0 0 1.5px var(--linea); cursor: pointer; }
.colores button.on { box-shadow: 0 0 0 2.5px var(--tinta); }
.logo-prev { width: 84px; height: 84px; border-radius: 14px; border: 1.5px dashed var(--linea); display: grid; place-items: center; overflow: hidden; color: var(--musgo); font-size: 12px; text-align: center; }
.logo-prev img { width: 100%; height: 100%; object-fit: contain; }

/* Avisos flotantes */
.toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--tinta); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); animation: sube .2s ease-out; max-width: 90vw; }
.toast.error { background: var(--teja); }

/* ---------- Celular ---------- */
@media (max-width: 1080px) {
  .pos { grid-template-columns: 1fr 360px; }
  .saludo, .dos { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  body { font-size: 15.5px; }
  .app { grid-template-columns: 1fr; }
  .rail { display: none; }
  main { padding: 18px 16px 110px; }
  .titulo h1 { font-size: 22px; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; background: var(--blanco); border-top: 1px solid var(--linea); z-index: 40; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 700; color: var(--musgo); text-decoration: none; padding: 4px 0; }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a.activo { color: var(--pri); }
  .tabbar a.vender-tab span.b { width: 46px; height: 46px; margin-top: -20px; border-radius: 50%; background: var(--sol); color: var(--tinta); display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(0,0,0,.35); }
  .pos { grid-template-columns: 1fr; }
  .ticket { position: static; max-height: none; border-radius: var(--r-l); margin-bottom: 84px; }
  .ticket::after { display: none; }
  .total-movil { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 30; background: var(--tinta); color: #fff; border-radius: 14px; padding: 10px 10px 10px 16px; align-items: center; gap: 12px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }
  .total-movil b { font-size: 20px; }
  .total-movil small { color: #9fb2aa; display: block; font-size: 12px; }
  .total-movil .btn { margin-left: auto; }
  .ticket .pie .btn.emitir { display: none; }
  .productos { grid-template-columns: repeat(2, 1fr); }
  .config { grid-template-columns: 1fr; }
  .subnav { flex-direction: row; overflow-x: auto; position: static; }
  .subnav button { white-space: nowrap; }
  .tabla .ocultar-m { display: none; }
  .capa { padding: 0; align-items: flex-end; }
  .modal, .capa.lateral .modal { max-width: none; border-radius: var(--r-l) var(--r-l) 0 0; max-height: 92vh; height: auto; animation: sube .2s ease-out; }
  .det-grid, .botonera { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Libro de reclamaciones ---------- */
.rail a.nav .badge { margin-left: auto; background: var(--teja); color: #fff; font-size: 11.5px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 6px; }
.estado.respondido { background: var(--pri-suave); color: var(--pri-2); }
.estado.vencido { background: var(--teja-suave); color: var(--teja); }
.plazo { font-size: 12.5px; font-weight: 700; }
.plazo.ok { color: var(--musgo); }
.plazo.urge { color: var(--ambar); }
.plazo.vence { color: var(--teja); }
.item .ico.r { background: #f1e8fb; color: #6b3fa0; }
.item .ico.q { background: #e3eefc; color: #1d5fb3; }
.lr-enlace { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.lr-enlace .url { font-weight: 800; font-size: 15px; word-break: break-all; }
.lr-enlace .acciones { justify-content: flex-end; }
.texto-largo { white-space: pre-wrap; background: var(--papel); border-radius: var(--r-s); padding: 10px 12px; margin: 4px 0 12px; font-size: 14px; }
.etq { font-size: 12px; font-weight: 700; color: var(--musgo); text-transform: uppercase; letter-spacing: .3px; }
@media (max-width: 760px) { .lr-enlace { grid-template-columns: 1fr; } .lr-enlace .acciones { justify-content: flex-start; } }

/* ---------- Usuario conectado (barra lateral) ---------- */
.yo { margin: 14px 6px 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 8px; }
.yo:empty { display: none; }
.yo .yo-in { flex: 1; min-width: 0; }
.yo b { display: block; color: #fff; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yo small { color: #8fa39b; font-size: 12px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yo .btn.plano { color: #cfdad5; padding: 6px 10px; font-size: 13px; }
.yo .btn.plano:hover { background: rgba(255,255,255,.08); }

/* ---------- Avisos de suscripción ---------- */
.banda { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r); margin: -8px 0 18px; font-weight: 600; flex-wrap: wrap; }
.banda span { flex: 1; min-width: 200px; }
.banda.rojo { background: var(--teja); color: #fff; }
.banda.rojo .btn { border-color: transparent; }
.banda.ambar { background: var(--sol-suave); color: #6d5300; }
.banda.soporte { background: #1d5fb3; color: #fff; }

/* ---------- Mi plan ---------- */
.plan-actual { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; background: var(--papel); border-radius: var(--r-l); padding: 18px 20px; margin-bottom: 18px; }
.plan-actual h3 { margin: 0; font-size: 20px; }
.plan-actual .n { font-size: 26px; font-weight: 800; }
.plan-actual small { color: var(--musgo); }
.uso { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.uso div { border: 1px solid var(--linea); border-radius: var(--r); padding: 12px 14px; }
.uso span { color: var(--musgo); font-size: 12.5px; display: block; }
.uso b { font-size: 17px; }
.uso i { display: block; height: 6px; border-radius: 3px; background: var(--linea-2); margin-top: 8px; overflow: hidden; }
.uso i em { display: block; height: 100%; background: var(--pri); }
.planes-elegir { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 10px 0 20px; }
.planes-elegir .pe { border: 1.5px solid var(--linea); border-radius: var(--r-l); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.planes-elegir .pe.on { border-color: var(--pri); background: color-mix(in srgb, var(--pri) 5%, #fff); }
.planes-elegir .pe b { font-size: 16px; }
.planes-elegir .pe .pr { font-size: 24px; font-weight: 800; }
.planes-elegir .pe ul { margin: 4px 0 8px; padding-left: 18px; color: var(--tinta-2); font-size: 13.5px; }
.planes-elegir .pe .btn { margin-top: auto; }
.pagar-op { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; }
.pagar-op > div { border: 1px solid var(--linea); border-radius: var(--r-l); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.pagar-op h3 { margin: 0; font-size: 16px; }
.pagar-op p { margin: 0; color: var(--musgo); font-size: 13.5px; }
.pagar-op .btn { margin-top: auto; }
.tarjeta-guardada { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--pri-suave); color: var(--pri-2); font-weight: 700; }

/* ---------- Panel de administración ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi span { color: var(--musgo); font-weight: 600; font-size: 13.5px; }
.kpi b { font-size: 28px; letter-spacing: -.6px; }
.kpi small { color: var(--musgo); }
.kpi.destaca { background: var(--tinta); color: #fff; }
.kpi.destaca span, .kpi.destaca small { color: #b9c8c2; }
.kpi.mal b { color: var(--teja); }
.barras-adm { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; height: 200px; align-items: end; padding-top: 18px; }
.barras-adm div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; position: relative; }
.barras-adm i { width: 100%; max-width: 46px; background: var(--pri); border-radius: 8px 8px 3px 3px; }
.barras-adm div:last-child i { background: var(--sol); }
.barras-adm small { color: var(--musgo); font-weight: 700; }
.barras-adm b { font-size: 12px; color: var(--tinta-2); white-space: nowrap; }
.planes-adm { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.plan-card { display: flex; flex-direction: column; gap: 6px; }
.plan-card.inactivo { opacity: .65; }
.plan-card .pc-cab { display: flex; justify-content: space-between; align-items: center; font-size: 17px; }
.plan-card .pc-precio { font-size: 30px; font-weight: 800; letter-spacing: -.8px; }
.plan-card .pc-precio small { font-size: 14px; color: var(--musgo); font-weight: 600; }
.plan-card p { color: var(--musgo); margin: 0; }
.plan-card ul { margin: 6px 0 12px; padding-left: 18px; }
.plan-card .btn { margin-top: auto; }
.ajustes-adm { display: grid; gap: 16px; max-width: 900px; }
.estado.s-activa { background: var(--pri-suave); color: var(--pri-2); }
.estado.s-prueba { background: #e3eefc; color: #1d5fb3; }
.estado.s-por_vencer { background: var(--ambar-suave); color: var(--ambar); }
.estado.s-vencida, .estado.s-suspendida, .estado.s-bloqueada { background: var(--teja-suave); color: var(--teja); }
.estado.s-cancelada { background: var(--linea-2); color: var(--musgo); }
@media (max-width: 1000px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .plan-actual { grid-template-columns: 1fr; } .kpi b { font-size: 22px; } }
.pagar-op .segmento { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
.pagar-op .segmento button { padding: 8px 4px; font-size: 13px; white-space: nowrap; }
.pagar-op .segmento { display: flex; flex-wrap: wrap; }
.pagar-op .segmento button { padding: 7px 10px; flex: 1; }

/* ---------- Anulaciones, resúmenes, compras e importación ---------- */
.estado.anulado { background: var(--linea-2); color: var(--tinta-2); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.estado.anulado::before { background: var(--teja); }
.estado.proceso { background: #e3eefc; color: #1d5fb3; }
.sunat-msg.anulado { background: var(--linea-2); color: var(--tinta-2); }
.sunat-msg.proceso { background: #e3eefc; color: #1d4f8f; }
.sunat-msg a { color: inherit; font-weight: 700; }
.anular-btn { margin-top: 10px; color: var(--teja); justify-content: center; gap: 8px; }
.anular-btn small { color: var(--musgo); font-weight: 600; }
.aviso-suave { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-s); background: var(--ambar-suave); color: #6c4a10; font-size: 13.5px; line-height: 1.45; }
.aviso-suave svg { flex: none; margin-top: 1px; }
.volver { display: inline-block; color: var(--musgo); text-decoration: none; font-weight: 700; font-size: 13.5px; margin-bottom: 4px; }
.volver:hover { color: var(--pri); }
.nota-pie { color: var(--musgo); font-size: 13.5px; line-height: 1.55; margin: 14px 2px 0; max-width: 75ch; }
.sub-titulo { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--musgo); margin: 18px 0 8px; }
.mono { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; font-size: .92em; letter-spacing: -.2px; }
.tabla.compacta td, .tabla.compacta th { padding-top: 7px; padding-bottom: 7px; }
.tabla .input.r, .tabla input.r { text-align: right; }
.tabla-scroll { overflow-x: auto; border: 1px solid var(--linea-2); border-radius: var(--r-s); }
.tabla tr.tachada td { color: var(--musgo); }
.tabla tr.tachada td b { text-decoration: line-through; }
.fila.fila-4 { grid-template-columns: 1fr .8fr 1fr 1.2fr; }
.fila.fila-doc { grid-template-columns: 140px 1fr; }
.kpis-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.kpis-3 .panel { padding: 16px 18px; }
.kpis-3 .l { color: var(--musgo); font-size: 13.5px; font-weight: 600; }
.kpis-3 .n { font-size: 22px; font-weight: 800; letter-spacing: -.4px; margin-top: 2px; }
.sugerencias { display: grid; gap: 4px; margin: -4px 0 10px; }
.sugerencias:empty { display: none; }
.sugerencias button { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; border: 1.5px solid var(--linea); background: var(--blanco); border-radius: 10px; padding: 9px 12px; cursor: pointer; }
.sugerencias button:hover, .sugerencias button:focus-visible { border-color: var(--pri); background: var(--pri-suave); }
.sugerencias small { color: var(--musgo); white-space: nowrap; }
.sugerencias .nada { color: var(--musgo); font-size: 14px; padding: 6px 2px; }
.totales-compra { display: grid; gap: 4px; margin-top: 12px; margin-left: auto; max-width: 320px; }
.totales-compra div { display: flex; justify-content: space-between; color: var(--tinta-2); }
.totales-compra .g { border-top: 1px solid var(--linea); padding-top: 8px; margin-top: 4px; font-size: 17px; color: var(--tinta); }
.totales-compra .g b { font-weight: 800; }
.import-cuentas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.import-cuentas div { background: var(--papel); border-radius: var(--r); padding: 12px 14px; }
.import-cuentas b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.import-cuentas span { color: var(--musgo); font-size: 13.5px; font-weight: 600; }
.import-cuentas .mal { background: var(--teja-suave); }
.import-cuentas .mal b { color: var(--teja); }
.col-mapa { display: flex; flex-wrap: wrap; gap: 6px; }
.col-mapa span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: var(--papel); border: 1px solid var(--linea-2); font-size: 13.5px; }
.col-mapa small { color: var(--musgo); font-size: 12.5px; }
.col-mapa i { font-style: normal; color: var(--pri); }
.col-mapa b { color: var(--tinta); font-weight: 700; }
.ahorro { margin: 8px 0 0; padding: 8px 12px; border-radius: var(--r-s); background: var(--pri-suave); color: var(--pri-2); font-size: 13.5px; }
.errores-import { margin: 0; padding-left: 18px; color: var(--tinta-2); font-size: 14px; max-height: 180px; overflow: auto; }
.errores-import li { margin: 3px 0; }
@media (max-width: 760px) {
  .kpis-3 { grid-template-columns: 1fr; gap: 10px; }
  .fila.fila-4 { grid-template-columns: 1fr 1fr; }
  .totales-compra { max-width: none; }
}

/* ---------- Guía de activación SUNAT ---------- */
.act-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: -4px 0 18px; border-radius: var(--r); background: var(--pri-suave); color: var(--tinta); text-decoration: none; border: 1px solid #c9e6dc; }
.act-banner svg { flex: none; width: 28px; height: 28px; color: var(--pri); }
.act-banner span { flex: 1; min-width: 0; line-height: 1.4; }
.act-banner em { font-style: normal; font-weight: 700; color: var(--pri); white-space: nowrap; }
.act-banner:hover { border-color: var(--pri); }
.act-requisitos h2 { margin: 0 0 8px; font-size: 16px; }
.act-requisitos ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; color: var(--tinta-2); }
.act-progreso { display: flex; align-items: center; gap: 12px; margin: 18px 0 6px; font-weight: 600; color: var(--musgo); font-variant-numeric: tabular-nums; }
.act-progreso .barra { flex: 1; height: 8px; border-radius: 99px; background: var(--linea); overflow: hidden; }
.act-progreso .barra i { display: block; height: 100%; background: var(--pri); border-radius: 99px; transition: width .3s; }
.act-fase { margin-top: 22px; }
.act-fase > h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; margin: 0 0 12px; }
.act-fase > h2 span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--tinta); color: #fff; font-size: 14px; }
.act-paso { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 18px; margin-bottom: 12px; }
.act-paso.hecho { border-color: #bfe0d4; background: linear-gradient(0deg, var(--pri-suave), var(--pri-suave)) left/4px 100% no-repeat, var(--blanco); }
.act-num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--pri-suave); color: var(--pri-2); font-variant-numeric: tabular-nums; }
.act-paso.hecho .act-num { background: var(--pri); color: #fff; }
.act-txt h3 { margin: 4px 0 6px; font-size: 16px; text-wrap: balance; }
.act-txt p { margin: 0 0 12px; line-height: 1.55; color: var(--tinta-2); }
.act-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--musgo); cursor: pointer; }
.act-check input { width: 18px; height: 18px; accent-color: var(--pri); }
.act-img { padding: 0; border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; background: var(--linea-2); cursor: zoom-in; display: block; width: 100%; }
.act-img img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: cover; object-position: top left; }
.act-grande { display: block; width: 100%; height: auto; border-radius: var(--r-s); }
.act-fin { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.act-fin .btn { margin-left: auto; }
@media (max-width: 760px) {
  .act-paso { grid-template-columns: 34px minmax(0, 1fr); padding: 14px; gap: 12px; }
  .act-num { width: 32px; height: 32px; }
  .act-img { grid-column: 1 / -1; }
  .act-banner { flex-wrap: wrap; }
}

/* ---------- Ojito para ver la contraseña ---------- */
.clave-caja, .campo > .clave-caja { position: relative; display: block; width: 100%; font-size: inherit; font-weight: inherit; color: inherit; }
.clave-caja > input { width: 100%; padding-right: 46px; }
.ojito { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: var(--musgo); border-radius: 8px; cursor: pointer; padding: 0; }
.ojito:hover { color: var(--tinta); background: var(--linea-2); }

/* ---------- Límite mensual de comprobantes ---------- */
.banda.cupo span { flex: 1; min-width: 0; }
.cupo-barra { flex: none; width: 140px; height: 8px; border-radius: 99px; background: color-mix(in srgb, currentColor 22%, transparent); overflow: hidden; }
.cupo-barra em { display: block; height: 100%; background: currentColor; border-radius: 99px; }
.cupo-aviso { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--teja-suave); color: #8d2e20; text-align: left; font-size: 14px; line-height: 1.45; }
.cupo-aviso svg { flex: none; }
.cupo-aviso span { flex: 1; min-width: 0; }
.cupo-aviso .btn { flex: none; }
@media (max-width: 760px) { .cupo-barra { display: none; } .cupo-aviso { flex-wrap: wrap; } }