:root{--ink:#202522;--muted:#78807a;--subtle:#9ca39b;--paper:#f4f1e9;--card:#fffefa;--line:#e5e4dc;--lime:#cbe85b;--lime-dark:#849f24;--coral:#ef8b79;--sky:#9dd7e0;--gold:#f1b85d;--shadow:0 8px 26px rgba(40,45,35,.05);--tab-accent:#e8752e}*{box-sizing:border-box}body{margin:0;background:var(--as-bg-app);color:var(--as-text-primary);font-family:var(--as-font-sans);font-size:var(--as-font-size-sm);line-height:var(--as-line-height-normal)}.app-shell{display:flex;min-height:100vh}[hidden]{display:none!important}.sidebar{width:var(--as-sidebar-width);background:var(--as-surface);border-right:1px solid var(--as-border-subtle);display:flex;flex-direction:column;padding:29px 15px 18px;flex-shrink:0}.brand{display:flex;align-items:center;gap:10px;padding:0 12px 0}.brand-mark-img{width:44px;height:44px;object-fit:contain;display:block;flex-shrink:0} .brand-col{display:flex;flex-direction:column;gap:4px;min-width:0}.brand-word-img{height:18px;width:auto;display:block}.brand-tagline{display:block;color:#8b948b;font:8.5px var(--as-font-sans);letter-spacing:.1px;line-height:1}.sidebar-heading{display:block;color:var(--as-text-muted);font:12px var(--as-font-sans);letter-spacing:1px;padding:0 13px 10px}.nav-list{display:grid;gap:4px;margin-bottom:30px}.nav-item{display:flex;align-items:center;gap:12px;width:100%;height:43px;padding:0 13px;background:transparent;border:1px solid transparent;border-radius:var(--as-radius-sm);color:var(--as-text-secondary);text-align:left;font-weight:bold;cursor:pointer;transition:background-color var(--as-duration-fast) var(--as-ease-standard),color var(--as-duration-fast) var(--as-ease-standard)}.nav-item:hover{background:var(--as-surface-hover);color:var(--as-ink-primary)}.nav-item.active{border-color:var(--as-brand-600);background:var(--as-brand-gradient);color:var(--as-text-inverse);box-shadow:var(--as-shadow-brand)} .nav-item.active:hover, .nav-item.active:focus-visible{background:var(--as-brand-gradient);box-shadow:var(--as-shadow-brand)}.nav-glyph{width:17px;text-align:center;font-size:17px;font-weight:normal}.nav-badge{margin-left:auto;background:var(--as-danger-500);color:var(--as-text-inverse);border-radius:5px;padding:3px 7px;font:12px var(--as-font-sans);font-variant-numeric:tabular-nums}.sidebar-note{margin-top:auto;display:flex;gap:9px;padding:14px 10px;background:#dfe5dc;border:1px solid #d9e0d7;border-radius:9px}.note-mark{background:var(--lime);width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font-size:13px}.sidebar-note strong,.sidebar-note p{display:block;margin:0}.sidebar-note strong{font-size:13px}.sidebar-note p{color:var(--muted);font-size:13px;margin-top:3px}.sidebar-footer{display:flex;align-items:center;gap:9px;border-top:1px solid var(--as-border-subtle);margin-top:18px;padding:17px 7px 0}.sidebar-footer strong,.sidebar-footer span{display:block}.sidebar-footer strong{font-size:13px;color:var(--as-ink-primary)}.sidebar-footer span{color:var(--as-text-muted);font-size:13px;margin-top:2px}.user-avatar,.mini-avatar{display:grid;place-items:center;border-radius:50%;font-weight:bold;overflow:hidden;flex-shrink:0}.user-avatar img,.mini-avatar img,.user-panel-avatar img{width:100%;height:100%;object-fit:cover}.user-avatar{width:31px;height:31px;background:var(--as-brand-100);color:var(--as-ink-primary);font-size:13px;box-shadow:0 0 0 2px var(--as-surface)}.more-button{margin-left:auto;background:transparent;color:var(--muted);letter-spacing:2px}.main-content{flex:1;min-width:0}.topbar{height:73px;border-bottom:1px solid var(--as-border-subtle);display:flex;align-items:center;justify-content:space-between;padding:0 42px;background:var(--as-surface)}.crumb{display:flex;gap:12px;color:var(--as-text-muted);font-size:13px}.crumb b{font-weight:normal;color:var(--as-text-placeholder)}.crumb strong{color:var(--as-ink-primary)}.topbar-right{display:flex;align-items:center;gap:18px;position:relative}.notif-panel{position:absolute;top:40px;right:0;min-width:270px;background:var(--card);border:1px solid var(--line);border-radius:11px;box-shadow:0 16px 40px rgba(30,35,30,.14);padding:6px;z-index:15;overflow:hidden}.notif-panel[hidden]{display:none}.notif-header{padding:10px 12px 8px;font:11px var(--as-font-sans);letter-spacing:.7px;text-transform:uppercase;color:var(--subtle);border-bottom:1px solid var(--line);margin-bottom:4px}.notif-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;border-radius:6px;font-size:13px;font-weight:bold;color:var(--ink);cursor:pointer;transition:background-color .12s ease,opacity .16s ease,transform .16s ease,max-height .16s ease,padding .16s ease,margin .16s ease}.notif-row:hover{background:#f2f3ee}.notif-row:active{transform:scale(.98)}.notif-row.removing{opacity:0;transform:translateX(10px)}.notif-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.notif-dot.expired,.notif-dot.pending{background:#d0685e}.notif-dot.expiring{background:#c08023}.notif-dot.credit{background:#78931c}.notif-chevron{margin-left:auto;color:var(--subtle);flex-shrink:0}.notif-empty{padding:14px 12px;color:var(--muted);font-size:13px}.insight-card{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-radius:10px;margin-bottom:14px;border:1px solid transparent}.insight-card .insight-icon{flex-shrink:0;margin-top:1px}.insight-card strong{display:block;font-size:13px;margin-bottom:3px}.insight-card p{margin:0;font-size:13px;line-height:1.5;color:inherit;opacity:.92}.insight-card.good{background:#eef8d0;border-color:#d9ecab;color:#5f7616}.insight-card.warning{background:#fff0d8;border-color:#f2ddb0;color:#8a5f13}.insight-card.danger{background:#ffebe8;border-color:#f5c9c2;color:#a1382c}.insight-card.info{background:#e5f4f5;border-color:#c7e3e6;color:#2c6b73}.today-label{font:12px var(--as-font-sans);letter-spacing:.7px;color:var(--subtle)}.round-button,.mobile-menu{border:0;background:transparent;color:var(--as-text-muted);font-size:20px;position:relative;cursor:pointer;border-radius:50%;width:38px;height:38px;display:grid;place-items:center;transition:background-color var(--as-duration-fast) var(--as-ease-standard),color var(--as-duration-fast) var(--as-ease-standard)}.round-button:hover,.mobile-menu:hover{background:var(--as-surface-hover);color:var(--as-ink-primary);box-shadow:var(--as-shadow-xs)}.round-button:active,.mobile-menu:active{background:var(--as-border-subtle)}.round-button i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--as-danger-500);right:1px;top:1px}.mobile-menu{display:none}.content{max-width:var(--as-content-max-width);margin:auto;padding:var(--as-page-padding-desktop) var(--as-page-padding-desktop)}.page-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.page-heading-actions{display:flex;gap:8px}.eyebrow{margin:0 0 9px;color:var(--as-text-muted);font-family:var(--as-font-sans);font-size:var(--as-font-size-xs);font-weight:var(--as-font-weight-medium);letter-spacing:1px;text-transform:uppercase}.page-heading h1{font-family:var(--as-font-sans);font-weight:var(--as-font-weight-bold);font-size:var(--as-font-size-3xl);line-height:var(--as-line-height-tight);letter-spacing:-.5px;margin:0 0 var(--as-space-2)}.greeting-icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;flex-shrink:0;margin-left:2px}.page-subtitle{margin:0;color:var(--as-text-secondary)}.btn, .btn-primary, .btn-secondary, .btn-tertiary, .btn-warning, .btn-danger, .btn-danger-solid, .btn-danger-text, .btn-specialized-whatsapp, .primary-button, .secondary-button, .danger-button, .btn-payment, .small-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;font-family:inherit;font-weight:bold;line-height:1;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease,border-color .12s ease,color .12s ease,filter .12s ease} .btn-md, .primary-button, .secondary-button, .danger-button{height:var(--as-button-md);padding:0 19px;border-radius:7px;font-size:13px} .btn-sm, .small-button{height:var(--as-button-sm);padding:0 12px;border-radius:6px;font-size:13px} .btn-lg{height:var(--as-button-lg);padding:0 26px;border-radius:7px;font-size:14px} .btn-table-action{padding-left:10px;padding-right:10px} .btn-icon{width:var(--as-icon-container-sm);height:var(--as-icon-container-sm);padding:0;border-radius:50%} .btn-icon.btn-md{width:var(--as-icon-container-md);height:var(--as-icon-container-md)} /* BLOQUE K1 — icono SVG de línea reutilizable (ver js/icons.js). Tamaño y grosor por token para que todos los iconos migrados a este sistema compartan el mismo lenguaje visual (auditoría Bloque K, punto 5). No fija márgenes propios: la separación respecto al texto la resuelve quien lo use (gap del contenedor, o una clase específica si hace falta), para no imponer un espaciado fijo a futuros consumidores de este mismo icono. */ .as-icon{display:block;flex:0 0 auto;width:var(--as-icon-sm);height:var(--as-icon-sm);fill:none;stroke:currentColor;stroke-width:var(--as-icon-stroke-width);stroke-linecap:round;stroke-linejoin:round} /* BLOQUE K2 — contenedor tonal pequeño y reutilizable para .as-icon: círculo con fondo suave + icono en el color del tono (estilo duotono, ver docs/design/DESIGN.md §5). data-tone="brand" = acento de marca/acción; data-tone="warning" = pendiente que requiere atención (ej. recordatorios); data-tone="neutral" = información sin carga semántica (ej. hora calculada). Mismo token de tamaño que .btn-icon. */ .as-icon-tonal{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--as-icon-container-sm);height:var(--as-icon-container-sm);border-radius:50%} .as-icon-tonal[data-tone="brand"]{background:var(--as-brand-100);color:var(--as-brand-600)} .as-icon-tonal[data-tone="warning"]{background:var(--as-warning-50);color:var(--as-warning-600)} .as-icon-tonal[data-tone="neutral"]{background:var(--as-gray-100);color:var(--as-ink-secondary)} /* BLOQUE K1 — separación entre .as-icon y el texto en los enlaces de contacto de la ficha de Proveedores (Llamar/Correo). No se agrega a .secondary-button porque esa clase es compartida por toda la app. */ .sup-contact-link{gap:6px} .btn-primary, .primary-button{background:var(--as-brand-gradient);border-color:transparent;color:var(--as-text-inverse);box-shadow:var(--as-shadow-brand)} .btn-primary:hover, .primary-button:hover{transform:translateY(-1px);box-shadow:var(--as-shadow-md)} .btn-primary:active, .primary-button:active{transform:translateY(0);box-shadow:var(--as-shadow-xs)} .primary-button span{display:inline-flex;color:currentColor;margin-right:5px}.primary-button span .as-icon{width:14px;height:14px}.primary-button .qn-icon,.secondary-button .qn-icon{margin-right:5px} .btn-secondary, .secondary-button, .btn-tertiary, .small-button:not(.danger):not(.debts-whatsapp):not(.receipt-whatsapp):not(.btn-payment){background:linear-gradient(180deg,var(--as-gray-50) 0%,var(--as-gray-100) 100%);border-color:var(--as-border-default);color:var(--as-ink-secondary)} .btn-secondary, .secondary-button{box-shadow:inset 0 1px 0 var(--as-surface),var(--as-shadow-sm)} .btn-tertiary, .small-button:not(.danger):not(.debts-whatsapp):not(.receipt-whatsapp):not(.btn-payment){box-shadow:inset 0 1px 0 var(--as-surface),var(--as-shadow-xs)} .btn-secondary:hover, .secondary-button:hover, .btn-tertiary:hover, .small-button:not(.danger):not(.debts-whatsapp):not(.receipt-whatsapp):not(.btn-payment):hover{background:linear-gradient(180deg,var(--as-gray-100) 0%,var(--as-gray-200) 100%);border-color:var(--as-border-strong);color:var(--as-ink-primary);transform:translateY(-1px)} .btn-secondary:hover, .secondary-button:hover{box-shadow:inset 0 1px 0 var(--as-surface),var(--as-shadow-md)} .btn-tertiary:hover, .small-button:not(.danger):not(.debts-whatsapp):not(.receipt-whatsapp):not(.btn-payment):hover{box-shadow:inset 0 1px 0 var(--as-surface),var(--as-shadow-sm)} .btn-secondary:active, .secondary-button:active, .btn-tertiary:active, .small-button:not(.danger):not(.debts-whatsapp):not(.receipt-whatsapp):not(.btn-payment):active{background:var(--as-gray-200);border-color:var(--as-border-strong);color:var(--as-ink-primary);box-shadow:inset 0 1px 2px var(--as-gray-300);transform:translateY(1px)} .btn-payment{background:linear-gradient(180deg,var(--as-success-50) 0%,var(--as-success-100) 100%);border-color:var(--as-success-100);color:var(--as-success-700);box-shadow:inset 0 1px 0 var(--as-surface),var(--as-shadow-xs)} .btn-payment:hover{background:var(--as-success-100);border-color:var(--as-success-500);color:var(--as-success-700);box-shadow:inset 0 1px 0 var(--as-surface),var(--as-shadow-sm);transform:translateY(-1px)} .btn-payment:active{background:var(--as-success-100);border-color:var(--as-success-500);color:var(--as-success-700);box-shadow:inset 0 1px 2px var(--as-success-100);transform:translateY(1px)} .btn-warning{background:var(--as-warning-50);border-color:var(--as-warning-100);color:var(--as-warning-600)} .btn-warning:hover{background:var(--as-warning-100)} .btn-warning:active{background:var(--as-warning-100);filter:brightness(.96)} .btn-danger, .danger-button, .small-button.danger{background:var(--as-danger-50);border-color:var(--as-danger-100);color:var(--as-danger-600)} .btn-danger:hover, .danger-button:hover, .small-button.danger:hover{background:var(--as-danger-100);color:var(--as-danger-700)} .btn-danger:active, .danger-button:active, .small-button.danger:active{background:var(--as-danger-100);filter:brightness(.96)} .btn-danger-solid{background:var(--as-danger-600);border-color:var(--as-danger-700);color:var(--as-text-inverse)} .btn-danger-solid:hover{background:var(--as-danger-700)} .btn-danger-solid:active{background:var(--as-danger-700);filter:brightness(.92)} .btn-danger-text{background:transparent;border-color:transparent;color:var(--as-danger-600);padding-left:4px;padding-right:4px} .btn-danger-text:hover{color:var(--as-danger-700);text-decoration:underline} .btn-specialized-whatsapp{background:#25d366;border-color:#25d366;color:#fff} .btn-specialized-whatsapp:hover{background:#20bd5a;border-color:#20bd5a} .btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-tertiary:focus-visible, .btn-warning:focus-visible, .btn-danger:focus-visible, .btn-danger-solid:focus-visible, .btn-danger-text:focus-visible, .btn-specialized-whatsapp:focus-visible, .primary-button:focus-visible, .secondary-button:focus-visible, .danger-button:focus-visible, .small-button:focus-visible{outline:2px solid var(--as-focus-border);outline-offset:2px;box-shadow:var(--as-focus-ring)} .btn-secondary:focus-visible, .secondary-button:focus-visible{box-shadow:inset 0 1px 0 var(--as-surface),var(--as-shadow-sm),var(--as-focus-ring)} .btn-tertiary:focus-visible, .small-button:not(.danger):not(.debts-whatsapp):not(.receipt-whatsapp):focus-visible{box-shadow:inset 0 1px 0 var(--as-surface),var(--as-shadow-xs),var(--as-focus-ring)} .btn:disabled, .btn-primary:disabled, .btn-secondary:disabled, .btn-tertiary:disabled, .btn-warning:disabled, .btn-danger:disabled, .btn-danger-solid:disabled, .btn-danger-text:disabled, .primary-button:disabled, .secondary-button:disabled, .danger-button:disabled, .small-button:disabled, .small-button:not(.danger):not(.debts-whatsapp):not(.receipt-whatsapp):disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none;filter:none} .btn:disabled:hover, .btn-primary:disabled:hover, .btn-secondary:disabled:hover, .btn-tertiary:disabled:hover, .btn-warning:disabled:hover, .btn-danger:disabled:hover, .btn-danger-solid:disabled:hover, .btn-danger-text:disabled:hover, .primary-button:disabled:hover, .secondary-button:disabled:hover, .danger-button:disabled:hover, .small-button:disabled:hover, .small-button:not(.danger):not(.debts-whatsapp):not(.receipt-whatsapp):disabled:hover{box-shadow:none;transform:none} .btn-secondary:disabled, .secondary-button:disabled, .btn-tertiary:disabled, .btn-payment:disabled, .small-button:not(.danger):not(.debts-whatsapp):not(.receipt-whatsapp):disabled{background:var(--as-gray-100);border-color:var(--as-border-subtle);color:var(--as-text-muted);box-shadow:none}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:13px;margin-bottom:14px}.stats-grid-3col{grid-template-columns:repeat(3,1fr)}.stat-card{background:var(--card);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow)} .panel{background:var(--as-surface);border:1px solid var(--as-border-subtle);border-radius:var(--as-radius-lg);box-shadow:var(--as-shadow-sm)}.stat-card{padding:17px 18px;min-height:128px;display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.stat-card:hover{box-shadow:0 12px 30px rgba(40,45,35,.1);transform:translateY(-2px)}.stat-card:focus-visible{outline:2px solid var(--as-focus-border);outline-offset:2px}.stat-card header{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}.stat-icon{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-weight:bold}.stat-icon.lime{background:#eef8ce;color:var(--lime-dark)}.stat-icon.coral{background:#ffebe7;color:#d46b60}.stat-icon.sky{background:#e4f4f6;color:#559baa}.stat-icon.gold{background:#fff0dc;color:#c68228}.stat-card>strong{display:block;margin:12px 0 10px;font:bold 25px var(--as-font-sans);font-variant-numeric:tabular-nums}.stat-danger>strong{color:#d0685e}.stat-warning>strong{color:#c68228}.stat-positive>strong{color:#78931c}.stat-foot{color:var(--muted);font-size:13px}.positive{color:#809b20;font:12px Consolas,monospace;margin-right:5px}.negative{color:#d46d61;font:12px Consolas,monospace;margin-right:5px}.grid-two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:14px;margin-bottom:14px}.panel{padding:20px 21px}.panel-heading{display:flex;justify-content:space-between;align-items:start}.panel-heading h2{color:var(--as-ink-primary);font-size:var(--as-font-size-sm);margin:0 0 5px}.panel-heading p{color:var(--as-text-secondary);font-size:var(--as-font-size-sm);margin:0}.simple-link{background:none;border:0;color:var(--as-ink-secondary);font-size:13px;font-weight:bold;cursor:pointer;transition:color .12s ease}.simple-link:hover{color:var(--as-brand-700);text-decoration:underline}.simple-link:focus-visible{outline:2px solid var(--as-focus-border);outline-offset:2px}.simple-link:disabled{color:var(--as-text-muted);cursor:not-allowed}.bars{height:205px;display:flex;align-items:end;justify-content:space-around;gap:10px;padding:25px 8px 0;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to bottom,transparent 0,transparent 49px,#edf0e9 50px)}.bar-column{height:100%;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:9px;flex:1}.bar-value{font:11px Consolas,monospace;color:var(--muted)}.bar{width:100%;max-width:39px;border-radius:5px 5px 0 0;background:var(--lime);min-height:8px}.bar.today{background:var(--ink)}.bar-label{font:11px Consolas,monospace;color:var(--subtle);transform:translateY(27px)}.activity-list{margin-top:17px}.activity{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid #eff0eb}.activity:first-child{border-top:0}.mini-avatar{width:32px;height:32px;font-size:13px;background:var(--sky)}.mini-avatar.alt{background:var(--gold)}.mini-avatar.alt2{background:#d7b7d4}.activity-copy{flex:1}.activity-copy strong,.activity-copy small{display:block}.activity-copy strong{font-size:13px}.activity-copy small{color:var(--muted);font-size:13px;margin-top:2px}.activity-amount{font:bold 13px var(--as-font-sans);font-variant-numeric:tabular-nums}.activity-amount.paid{color:#78951d}.table-panel{margin-bottom:14px}.table-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px;margin:20px 0 14px}.search-box{position:relative;flex:1}.search-box input{width:100%;padding-left:32px}.search-box span{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--as-text-muted);line-height:1;transition:color var(--as-duration-fast) var(--as-ease-standard)}.search-box span svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .search-box:focus-within span{color:var(--as-brand-600)} .table-toolbar .search-box{flex:1 1 320px;min-width:320px} .table-toolbar .filter-select, .agenda-filters .filter-select{width:auto;flex:0 0 auto} input:not([type]), input[type="text"], input[type="search"], input[type="tel"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], select, textarea, .form-control{ background:var(--as-surface); border:1px solid var(--as-border-default); border-radius:var(--as-radius-xs); min-height:var(--as-control-md); padding:10px; color:var(--as-ink-primary); outline:none; width:100%; font-family:var(--as-font-sans); font-size:var(--as-font-size-sm); transition:border-color var(--as-duration-fast) var(--as-ease-standard),box-shadow var(--as-duration-fast) var(--as-ease-standard); } input:not([type])::placeholder, input[type="text"]::placeholder, input[type="search"]::placeholder, input[type="tel"]::placeholder, input[type="email"]::placeholder, input[type="password"]::placeholder, input[type="url"]::placeholder, input[type="number"]::placeholder, input[type="date"]::placeholder, input[type="time"]::placeholder, input[type="datetime-local"]::placeholder, input[type="month"]::placeholder, input[type="week"]::placeholder, select::placeholder, textarea::placeholder, .form-control::placeholder{ color:var(--as-text-muted); } input:not([type]):focus, input[type="text"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, select:focus, textarea:focus, .form-control:focus{ border-color:var(--as-focus-border); box-shadow:var(--as-focus-ring); } input:not([type]):disabled, input[type="text"]:disabled, input[type="search"]:disabled, input[type="tel"]:disabled, input[type="email"]:disabled, input[type="password"]:disabled, input[type="url"]:disabled, input[type="number"]:disabled, input[type="date"]:disabled, input[type="time"]:disabled, input[type="datetime-local"]:disabled, input[type="month"]:disabled, input[type="week"]:disabled, select:disabled, textarea:disabled, .form-control:disabled{ background:var(--as-gray-100); border-color:var(--as-border-subtle); color:var(--as-text-muted); cursor:not-allowed; box-shadow:none; opacity:1; } input:not([type])[readonly], input[type="text"][readonly], input[type="search"][readonly], input[type="tel"][readonly], input[type="email"][readonly], input[type="password"][readonly], input[type="url"][readonly], input[type="number"][readonly], input[type="date"][readonly], input[type="time"][readonly], input[type="datetime-local"][readonly], input[type="month"][readonly], input[type="week"][readonly], textarea[readonly], .form-control[readonly]{ background:var(--as-surface-secondary); border-color:var(--as-border-default); color:var(--as-ink-secondary); } input:not([type])[readonly], input[type="text"][readonly], input[type="search"][readonly], input[type="tel"][readonly], input[type="email"][readonly], input[type="password"][readonly], input[type="url"][readonly], textarea[readonly], .form-control[readonly]{ cursor:text; } input:not([type])[readonly]:focus, input[type="text"][readonly]:focus, input[type="search"][readonly]:focus, input[type="tel"][readonly]:focus, input[type="email"][readonly]:focus, input[type="password"][readonly]:focus, input[type="url"][readonly]:focus, input[type="number"][readonly]:focus, input[type="date"][readonly]:focus, input[type="time"][readonly]:focus, input[type="datetime-local"][readonly]:focus, input[type="month"][readonly]:focus, input[type="week"][readonly]:focus, textarea[readonly]:focus, .form-control[readonly]:focus{ border-color:var(--as-focus-border); box-shadow:var(--as-focus-ring); } .form-check{display:flex;align-items:center;gap:var(--as-space-2)} .form-check-input{width:16px;height:16px;margin:0;flex:0 0 auto;accent-color:var(--as-brand-600);cursor:pointer} .form-check-input:focus-visible{outline:2px solid var(--as-focus-border);outline-offset:2px} .form-check-input:disabled{cursor:not-allowed;opacity:.6} input:not([type]).form-control-sm, input[type="text"].form-control-sm, input[type="search"].form-control-sm, input[type="tel"].form-control-sm, input[type="email"].form-control-sm, input[type="password"].form-control-sm, input[type="url"].form-control-sm, input[type="number"].form-control-sm, input[type="date"].form-control-sm, input[type="time"].form-control-sm, input[type="datetime-local"].form-control-sm, input[type="month"].form-control-sm, input[type="week"].form-control-sm, select.form-control-sm, textarea.form-control-sm, .form-control.form-control-sm{ min-height:var(--as-control-sm); padding:var(--as-space-2); font-size:var(--as-font-size-xs); } input:not([type]).form-control-md, input[type="text"].form-control-md, input[type="search"].form-control-md, input[type="tel"].form-control-md, input[type="email"].form-control-md, input[type="password"].form-control-md, input[type="url"].form-control-md, input[type="number"].form-control-md, input[type="date"].form-control-md, input[type="time"].form-control-md, input[type="datetime-local"].form-control-md, input[type="month"].form-control-md, input[type="week"].form-control-md, select.form-control-md, textarea.form-control-md, .form-control.form-control-md{ min-height:var(--as-control-md); padding:10px; font-size:var(--as-font-size-sm); } input:not([type]).form-control-lg, input[type="text"].form-control-lg, input[type="search"].form-control-lg, input[type="tel"].form-control-lg, input[type="email"].form-control-lg, input[type="password"].form-control-lg, input[type="url"].form-control-lg, input[type="number"].form-control-lg, input[type="date"].form-control-lg, input[type="time"].form-control-lg, input[type="datetime-local"].form-control-lg, input[type="month"].form-control-lg, input[type="week"].form-control-lg, select.form-control-lg, textarea.form-control-lg, .form-control.form-control-lg{ min-height:var(--as-control-lg); padding:var(--as-space-3); font-size:var(--as-font-size-base); } .table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:690px;text-align:left}th{padding:0 10px 10px;color:#9ca49c;font:11px var(--as-font-sans);letter-spacing:.5px;font-weight:normal}td{padding:11px 10px;border-top:1px solid #eff0eb;color:#69736b;font-size:13px}.client-cell{display:flex;align-items:center;gap:9px}.client-cell strong{color:var(--ink);font-size:13px}.mini-avatar.coral{background:#f2b4a4}.status{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:5px;font-size:13px;font-weight:bold;white-space:nowrap}.status:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}.status.active{background:#eef8d0;color:#78931c}.status.expiring{background:#fff0d8;color:#c08023}.status.expired{background:#ffebe8;color:#d0685e}.status.paid{background:#e5f4f5;color:#4d8f99}.status.pending{background:#fff0d8;color:#bd7924}.row-actions{display:flex;gap:5px} .detail-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:18px}.detail-title{display:flex;align-items:center;gap:12px}.detail-title .mini-avatar{width:120px;height:120px;font-size:30px}.detail-title h1{margin:0 0 3px;font:25px var(--as-font-sans);font-weight:var(--as-font-weight-bold)}.detail-title p{margin:0;color:var(--muted);font-size:13px}.detail-actions{display:flex;gap:8px}.detail-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:14px}.info-card{background:var(--as-surface-secondary);border:1px solid var(--as-border-subtle);border-radius:var(--as-radius-md);padding:15px}.info-card span,.info-card strong{display:block}.info-card span{color:var(--as-text-muted);font-size:var(--as-font-size-sm);margin-bottom:7px}.info-card strong{font-family:var(--as-font-sans);font-weight:var(--as-font-weight-bold);font-size:var(--as-font-size-md)}.info-card small{display:block;color:var(--muted);font-size:13px;margin-top:4px}.modal-layer{position:fixed;inset:0;background:rgba(32,37,34,.38);display:grid;place-items:center;padding:18px;z-index:10}.modal-layer[hidden]{display:none}.modal{background:var(--card);width:min(100%,530px);max-height:90vh;overflow-y:auto;overflow-x:hidden;border-radius:10px;padding:25px;position:relative;box-shadow:0 24px 70px rgba(30,35,30,.24)} /* Alto real disponible en móvil (barra de direcciones que aparece/desaparece): 90vh puede ser más alto que lo que en verdad se ve, dejando contenido o los botones del final cortados. 100dvh sigue el viewport visual real; los 36px son el padding (18px arriba + 18px abajo) que .modal-layer ya reserva. */ @media(max-width:680px){.modal{max-height:calc(100dvh - 36px)}}.modal h2{font:25px var(--as-font-sans);font-weight:var(--as-font-weight-bold);margin:0 0 5px}.modal-intro{color:var(--muted);margin:0 0 20px;font-size:13px}.close-button{position:absolute;right:16px;top:12px;border:0;background:transparent;color:var(--muted);font-size:0;cursor:pointer;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;transition:background-color .12s ease,color .12s ease}.close-button::before{content:'';display:block;width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat}.close-button:hover{background:#eef0e9;color:var(--ink)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-field{display:grid;gap:6px}.form-field.full{grid-column:1/-1}.form-field label{font-size:13px;font-weight:bold;color:var(--as-ink-secondary)}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.calc-display{background:var(--ink);color:#fff;border-radius:8px;padding:18px 16px;text-align:right;font:bold 30px var(--as-font-sans);font-variant-numeric:tabular-nums;margin:16px 0;overflow-x:auto;white-space:nowrap}.calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.calc-btn{border:0;border-radius:8px;padding:16px 0;font:bold 16px var(--as-font-sans);background:#eef0e9;color:var(--ink);cursor:pointer;transition:transform .1s ease,box-shadow .1s ease,background-color .1s ease}.calc-btn:hover{background:#e2e5dc;transform:translateY(-1px);box-shadow:0 4px 10px rgba(40,45,35,.12)}.calc-btn:active{transform:translateY(0) scale(.96);box-shadow:none}.calc-op{background:#fbead0;color:#c68228}.calc-op:hover{background:#f6ddb2}.calc-equals{background:var(--ink);color:#fff}.calc-equals:hover{background:#39413b}.history-table{min-width:0}.history-table td{vertical-align:top}.history-table td:first-child{color:var(--muted);font:12px var(--as-font-sans)}.amount{font:bold 13px var(--as-font-sans);font-variant-numeric:tabular-nums;color:#78951d}.mora{font:bold 13px var(--as-font-sans);font-variant-numeric:tabular-nums;color:#d0685e}.credit-amount{font:bold 13px var(--as-font-sans);font-variant-numeric:tabular-nums;color:#78931c}.balance{font:12px var(--as-font-sans);font-variant-numeric:tabular-nums;color:var(--muted)}.empty{padding:32px;text-align:center;color:var(--as-text-muted);font-size:var(--as-font-size-sm)}.toast{position:fixed;bottom:22px;right:22px;background:var(--ink);color:white;padding:12px 16px;border-radius:7px;box-shadow:var(--shadow);font-size:13px;transform:translateY(20px);opacity:0;pointer-events:none;transition:.25s;z-index:20}.toast.show{transform:none;opacity:1}@media(max-width:1100px){.sidebar{width:210px}.content,.topbar{padding-left:var(--as-page-padding-tablet);padding-right:var(--as-page-padding-tablet)}.stats-grid{grid-template-columns:repeat(2,1fr)}.grid-two{grid-template-columns:1fr}.sidebar .brand-tagline{font-size:6.5px;letter-spacing:.1px}}@media(max-width:680px){.sidebar{position:fixed;left:-240px;top:0;bottom:0;z-index:12;transition:left .22s}.sidebar.open{left:0}.topbar{height:var(--as-topbar-height);padding:0 var(--as-page-padding-mobile)}.mobile-menu{display:block;margin-right:11px}.crumb span,.today-label{display:none}.topbar-right{margin-left:auto}.content{padding:var(--as-page-padding-mobile) var(--as-page-padding-mobile)}.page-heading{display:block}.page-heading h1{font-size:27px}.page-heading-actions{width:100%;flex-direction:column;margin-top:18px}.page-heading .primary-button,.page-heading .secondary-button{width:100%;margin-top:0}.page-heading>.primary-button{width:100%;margin-top:18px}.stats-grid{gap:9px}.stat-card{padding:14px;min-height:120px}.stat-card>strong{font-size:21px}.stat-foot{line-height:1.7}.grid-two{gap:10px}.panel{padding:17px 15px}.table-toolbar{display:block}.table-toolbar .search-box{width:100%}.filter-select{margin-top:9px}.detail-header{display:block}.detail-title .mini-avatar{width:88px;height:88px;font-size:22px}.detail-actions{margin-top:15px}.detail-grid{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.form-field.full{grid-column:auto}.form-actions{flex-direction:column-reverse}.form-actions button{width:100%}.toast{left:15px;right:15px;bottom:15px;text-align:center}}.receipt-list{margin-top:16px;display:grid;gap:8px}.receipt-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f8f8f3;border:1px solid var(--line);border-radius:7px}.receipt-icon{display:inline-flex;flex-shrink:0;color:var(--as-text-muted)}.receipt-icon .as-icon{width:18px;height:18px}.receipt-info{flex:1;min-width:0}.receipt-info strong{display:block;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.receipt-info small{display:block;color:var(--muted);font-size:13px;margin-top:2px}.row-num{width:1%;white-space:nowrap;color:var(--subtle);font:12px var(--as-font-sans);font-variant-numeric:tabular-nums;text-align:center}.ficha-cell{width:1%;white-space:nowrap;text-align:center}.row-num-badge{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:#eef0e9;color:var(--muted);font:bold 11px var(--as-font-sans);font-variant-numeric:tabular-nums;display:grid;place-items:center}.voided-row{opacity:.6}.voided-amount{text-decoration:line-through}.method-breakdown{margin-top:16px;display:grid;gap:8px}.method-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f8f8f3;border:1px solid var(--line);border-radius:7px;width:100%;font:inherit;text-align:left;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease,border-color .12s ease}.method-row:hover{background:#eef0e9;transform:translateY(-1px);box-shadow:0 4px 10px rgba(40,45,35,.1)}.method-row:active{transform:translateY(0);box-shadow:none}.method-row.active{border-color:var(--lime-dark);background:#eef8ce}.user-panel{min-width:262px;padding:0;overflow:hidden}.user-panel-header{display:flex;align-items:center;gap:11px;padding:16px 14px;background:#f8f8f3;border-bottom:1px solid var(--line)}.user-panel-avatar{width:38px;height:38px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font:bold 14px var(--as-font-sans);flex-shrink:0;overflow:hidden;box-shadow:0 0 0 2px #fff}.user-panel-header strong{display:block;font-size:13px;color:var(--ink)}.user-panel-header span{display:block;color:var(--muted);font-size:11px;margin-top:1px}.user-panel-role{display:inline-flex;align-items:center;gap:3px;margin-top:5px;padding:2px 7px;border-radius:4px;background:#eef8ce;color:var(--lime-dark);font:bold 9px var(--as-font-sans);letter-spacing:.4px;text-transform:uppercase}.user-panel-role .as-icon{width:10px;height:10px;fill:currentColor;stroke:none}.user-panel-role.owner{background:linear-gradient(135deg,#fff0dc,#f8ddb0);color:#a8761a}.receipt-row.needs-price{border-color:#f1cf94;background:#fff8ec}.needs-price-tag{color:#c68228;font-weight:bold}.fee-warning{display:block;color:#c68228;font-size:11px;margin-top:6px}.user-panel-group{padding:6px}.user-panel-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;padding:9px 10px;border-radius:6px;font-size:12px;font-weight:bold;color:var(--ink);cursor:pointer;transition:background-color .12s ease}.user-panel-row:hover{background:#f2f3ee}.user-panel-row svg{flex-shrink:0;color:var(--subtle)}.user-panel-row.danger{color:#cf645b}.user-panel-row.danger svg{color:#cf645b}.user-panel-row.danger:hover{background:#ffebe8}.user-panel-divider{height:1px;background:var(--line);margin:2px 6px}.method-name{font-weight:bold;font-size:13px;color:var(--ink)}.method-count{color:var(--muted);font-size:13px}.method-amount{margin-left:auto;font:bold 13px var(--as-font-sans);font-variant-numeric:tabular-nums;color:#78951d} .password-field{position:relative;display:block;width:100%}.password-field input{padding-right:38px}.password-toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:var(--muted);cursor:pointer;border-radius:6px}.password-toggle:hover{color:var(--ink);background:#eef1e6}.password-toggle:focus-visible{outline:2px solid var(--as-focus-border);outline-offset:2px}.password-toggle .eye-off-path{display:none}.password-toggle[aria-pressed="true"] .eye-open-path{display:none}.password-toggle[aria-pressed="true"] .eye-off-path{display:inline}.sidebar-backdrop{display:none} /* Sistema visual oficial de ASISTIDA — capa estructural (sidebar/topbar). */@media(max-width:680px){.sidebar-backdrop{position:fixed;inset:0;background:var(--as-overlay);z-index:11;opacity:0;pointer-events:none;transition:opacity .2s;display:block}.sidebar.open+.sidebar-backdrop{opacity:1;pointer-events:auto}.responsive-table thead{display:none}.responsive-table,.responsive-table tbody,.responsive-table tr{display:block;width:100%}.responsive-table{border:none;min-width:0;width:100%}.responsive-table tr{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:12px;padding:2px 14px}.table-wrap .responsive-table tr:last-child{margin-bottom:0}.responsive-table td{display:block;padding:9px 0;border-bottom:1px solid #eceee6;text-align:left}.responsive-table td:last-child{border-bottom:none}.responsive-table td[data-label]::before{content:attr(data-label);display:block;font:700 10px/1.3 var(--as-font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}.responsive-table td.row-num{display:none}.responsive-table td.actions-cell{padding-top:12px}.responsive-table .row-actions{flex-wrap:wrap}.responsive-table .row-actions .small-button{flex:1 1 auto}.responsive-table td.actions-cell,.responsive-table td.ficha-cell{display:inline-flex;vertical-align:middle;width:auto;border-bottom:0}.responsive-table td.actions-cell{padding-right:8px}}.receipt-row{flex-wrap:wrap}.receipt-info{flex:1 1 160px;min-width:0}.receipt-row .small-button{flex:0 0 auto} .pagination{display:flex;align-items:center;justify-content:center;gap:14px;padding:16px 0 4px}.pagination-label{color:var(--muted);font-size:12px}.pagination .small-button[disabled]{opacity:.45;cursor:default} .field-note{display:block;color:#9aa29a;font-size:10.5px;margin-top:4px} /* Ajuste visual de la marca en la barra lateral. */ .sidebar .brand-word-img{height:19.5px} .sidebar .brand-tagline{font-size:9.5px;line-height:1.1} @media(max-width:1100px){.sidebar .brand-tagline{font-size:8.5px}} /* Iconos de navegación: SVG de línea (mismo estilo que calculadora/notificaciones/usuario), escalan con el font-size ya definido en .nav-glyph. */ .nav-glyph{display:inline-flex;align-items:center;justify-content:center} .nav-glyph svg{width:1em;height:1em;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* Módulo independiente de Inventario y ventas */ .sidebar{overflow-y:auto} /* Separación de módulos: cada bloque del menú solo aparece si el negocio lo tiene activo. */ body[data-no-inventory] .inventory-heading,body[data-no-inventory] .inventory-nav,body[data-no-inventory] .as-mnav__set[data-core="comercial"]{display:none!important} body[data-no-services] .gestion-heading,body[data-no-services] .gestion-nav,body[data-no-services] .as-mnav__set[data-core="gestion"]{display:none!important} .inventory-heading{padding-top:2px;border-top:1px solid var(--as-border-subtle);margin-top:-12px;padding-top:18px} .inventory-nav{gap:3px;margin-bottom:20px}.inventory-nav .nav-item{height:39px} .inventory-nav .inventory-live-button{height:43px;margin:4px 0 5px;background:transparent;color:var(--as-text-secondary);border:1px solid transparent;box-shadow:none;font-size:13px}.inventory-nav .inventory-live-button:hover{background:var(--as-surface-hover);color:var(--as-ink-primary);transform:none;box-shadow:none}.inventory-nav .inventory-live-button.active{border-color:var(--as-brand-600);background:var(--as-brand-gradient);color:var(--as-text-inverse);transform:translateY(-1px);box-shadow:var(--as-shadow-brand)} .inventory-nav .inventory-live-button.active:hover, .inventory-nav .inventory-live-button.active:focus-visible{background:var(--as-brand-gradient);box-shadow:var(--as-shadow-brand)}.inventory-live-cart svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.inventory-live-dot{width:9px;height:9px;margin-left:auto;border-radius:50%;background:var(--as-danger-500);box-shadow:0 0 0 3px rgba(244,63,94,.1)}.inventory-live-button.active .inventory-live-dot{background:var(--as-success-500);box-shadow:0 0 0 3px rgba(16,185,129,.18)} .inventory-page-heading{align-items:center}.inventory-loading,.inventory-state{text-align:center;padding:44px 24px} .inventory-loading span{display:inline-block;width:26px;height:26px;border:3px solid #dfe5dc;border-top-color:var(--lime-dark);border-radius:50%;animation:inventory-spin .8s linear infinite} .inventory-loading p,.inventory-state p{color:var(--muted)}.inventory-state-icon{display:grid;place-items:center;width:38px;height:38px;margin:0 auto 12px;border-radius:50%;background:#ffebe8;color:#d0685e;font-weight:bold;font-size:0}.inventory-state-icon::before{content:'';display:block;width:19px;height:19px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat} @keyframes inventory-spin{to{transform:rotate(360deg)}} .inventory-family-grid{display:grid;gap:14px}.inventory-family-card{overflow:hidden}.inventory-family-card .panel-heading{margin-bottom:14px}.inventory-family-card h2{font:22px Georgia,serif;margin:0} .inventory-count{padding:5px 9px;border-radius:999px;background:#eef0e9;color:var(--muted);font-size:11px}.inventory-table strong{color:var(--ink)}.inventory-table small,.code-value{display:block}.code-value{font:11px Consolas,monospace;color:#5f6861}.inventory-table small{font:10px Consolas,monospace;color:var(--subtle);margin-top:3px}.inventory-code-action{display:block;margin-top:5px;font-size:11px;text-align:left} .inventory-alert-list{display:grid;margin-top:14px}.inventory-alert-list button{display:flex;justify-content:space-between;gap:12px;border:0;border-top:1px solid #eff0eb;background:transparent;padding:11px 0;text-align:left;cursor:pointer;color:var(--ink)}.inventory-alert-list button:first-child{border-top:0}.inventory-alert-list strong{color:#c68228;white-space:nowrap} /* Resumen de Inventario (centro de control operativo) — franja compacta de 4 indicadores. A propósito NO reutiliza .stat-card (esa es la cuadrícula de tarjetas grandes que este rediseño reemplaza): una sola fila dividida por bordes internos, cifras alineadas con tabular-nums, sin sombra propia por celda ni icono decorativo. */ .kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:6px;border:1px solid var(--line);border-radius:9px;background:var(--card);box-shadow:var(--shadow);overflow:hidden} .kpi{padding:13px 16px;border-left:1px solid var(--line);border-top:0;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:background-color .12s ease,transform .1s ease} .kpi:first-child{border-left:0} .kpi:hover{background:#f6f7f2} .kpi:active{transform:scale(.98)} .kpi:focus-visible{outline:2px solid var(--as-focus-border);outline-offset:-2px} .kpi-label{display:block;margin:0 0 6px;color:var(--muted);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px} .kpi-value{display:block;font:700 21px/1.15 Georgia,serif;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kpi-context{display:block;margin-top:4px;color:var(--subtle);font-size:11px} /* Mensaje único y compacto cuando "Requiere atención" no tiene nada que mostrar — mismo formato de caja que .commercial-credit-alert pero en tono positivo (paleta lima ya usada en .stat-positive/.stat-icon.lime), nunca solo por color: el texto ya dice "en orden". */ .inventory-alert-ok{display:flex;gap:10px;align-items:center;padding:13px 16px;border:1px solid #d7e8a8;border-radius:10px;background:#eef8ce;color:#5b7318} .inventory-alert-ok strong{color:#4b6014} /* Estados obligatorios de cada indicador del Resumen: cargando (subestilo discreto, mismo layout) y error (color de aviso + acción Reintentar) — nunca un valor vacío ni un "$ 0" que parezca un resultado real. */ .kpi-value-loading{color:var(--muted);font-style:italic;font-weight:400} .kpi-value-error{color:#d0685e} .dashboard-loading-note{margin:0;padding:26px 0;text-align:center;color:var(--muted);font-size:13px;font-style:italic} .dashboard-error-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border:1px solid #f5c9c2;border-radius:10px;background:#ffebe8;color:#a1382c;font-size:13px} @media(max-width:680px){ .kpi-strip{grid-template-columns:repeat(2,1fr)} .kpi:nth-child(3){border-left:0} .kpi:nth-child(3),.kpi:nth-child(4){border-top:1px solid var(--line)} .kpi-value{font-size:17px} } /* .bar-label se desplaza 27px por debajo de .bars a propósito (mismo truco que ya usa el gráfico de Gestión) — en ese panel no hay nada después, así que nunca chocaba con otro texto. Aquí sí sigue un resumen textual: le damos el espacio de sobra que ese desplazamiento necesita, sin tocar .history-summary-caption en los demás lugares donde ya se usa. */ .bars+.history-summary-caption{margin-top:38px} /* Tabla reducida de "Ventas recientes" (dashboardRecentSalesTable en inventory-module.js): solo 4 columnas, pensada para caber en la mitad del grid-two sin heredar el min-width:690px de las tablas completas — así no necesita desplazamiento horizontal en ese panel angosto. */ .dashboard-sales-table{min-width:0} .dashboard-sales-table td:nth-child(3){white-space:nowrap} .inventory-modal{width:min(100%,680px)}.inventory-modal h3{margin:20px 0 8px}.inventory-sale-builder{display:grid;gap:12px}.inventory-scan-row{display:grid;grid-template-columns:1fr auto;gap:8px}.inventory-product-matches{display:grid;max-height:210px;overflow:auto;border-radius:8px}.inventory-product-matches button{display:grid;grid-template-columns:1fr auto;gap:3px 12px;border:1px solid var(--line);border-bottom:0;background:#fbfcf8;padding:10px 12px;text-align:left;cursor:pointer}.inventory-product-matches button:first-child{border-radius:8px 8px 0 0}.inventory-product-matches button:last-child{border-bottom:1px solid var(--line);border-radius:0 0 8px 8px}.inventory-product-matches span{font-weight:bold}.inventory-product-matches small{grid-column:1;color:var(--muted)}.inventory-product-matches strong{grid-column:2;grid-row:1/3;align-self:center;color:var(--lime-dark)}.inventory-product-matches p{color:var(--muted);text-align:center} .inventory-cart{display:grid;border:1px solid var(--line);border-radius:8px;overflow:hidden}.inventory-cart>div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 12px;border-top:1px solid var(--line)}.inventory-cart>div:first-child{border-top:0}.inventory-cart label{display:flex;align-items:center;gap:9px}.inventory-cart label button{width:27px;height:27px;border:0;border-radius:5px;background:#eef0e9;cursor:pointer;font-size:16px}.inventory-cart b{min-width:90px;text-align:right} .inventory-cart-line>span{display:grid;gap:2px}.inventory-cart-line>span small{color:var(--muted)}.inventory-weight-controls{display:grid;grid-template-columns:auto 112px;gap:5px 8px;align-items:center}.inventory-weight-controls select,.inventory-weight-controls input{min-height:36px;border:1px solid var(--line);border-radius:6px;background:#fff;padding:6px 8px;color:var(--ink)}.inventory-weight-controls small{grid-column:1/-1;color:var(--muted);text-align:right} .inventory-sale-total{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:14px 2px 2px;margin-top:4px}.inventory-sale-total span{color:var(--muted)}.inventory-sale-total strong{font:24px Georgia,serif}.inventory-receipt-lines{display:grid;margin:14px 0}.inventory-receipt-lines>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}.inventory-receipt-lines>div:first-child{border-top:0}.inventory-scanner-video{display:block;width:100%;min-height:240px;max-height:380px;background:#111;border-radius:9px;object-fit:cover}.inventory-scanner-frame{position:relative;min-height:240px;max-height:380px;background:#111;border-radius:9px;display:flex;align-items:center;justify-content:center;overflow:hidden}.inventory-scanner-frame .inventory-scanner-video{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;border-radius:0}.inventory-scanner-feedback{margin:10px 0 0;padding:8px 12px;border-radius:8px;font-size:12.5px;font-weight:bold}.inventory-scanner-feedback.ok{background:#e8f5e0;color:#4f7a1c}.inventory-scanner-feedback.warn{background:#fdeeea;color:#a94430}.pos-unregistered{padding:16px;text-align:center;border:1px dashed var(--line);border-radius:8px}.pos-unregistered p{margin:0 0 4px;font-weight:bold}.pos-unregistered small{display:block;color:var(--muted);margin-bottom:10px}.inventory-code-actions{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:2px}.mp-scan-field{display:flex;align-items:flex-end;padding-bottom:1px}.mp-link-search{border:1px dashed var(--line);border-radius:10px;padding:14px;margin:10px 0}.mp-link-search .form-grid{margin-top:8px}.mp-link-divider{text-align:center;color:var(--muted);font-size:12.5px;margin:14px 0} @media(max-width:1100px){.inventory-nav .nav-item{font-size:12px;gap:8px}.inventory-nav .nav-glyph{font-size:15px}.inventory-page-heading .page-heading-actions{flex-wrap:wrap;justify-content:flex-end}} @media(max-width:680px){.inventory-heading{margin-top:0}.inventory-page-heading{display:block}.inventory-family-card{padding:15px 13px}.inventory-scan-row{grid-template-columns:1fr}.inventory-cart>div{grid-template-columns:1fr auto}.inventory-weight-controls{grid-column:1/-1;grid-template-columns:1fr 1fr}.inventory-cart b{grid-column:1/-1;text-align:right}.inventory-scanner-video{min-height:210px}.inventory-scanner-frame{min-height:210px}.inventory-modal{padding:21px 17px}} /* Punto de venta permanente */ .pos-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:-10px 0 14px}.pos-shortcuts button{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:8px;background:#eeefe9;color:#5f6861;padding:9px 11px;text-align:left;font:600 11px Arial,sans-serif;cursor:pointer;transition:.12s}.pos-shortcuts button:hover{background:#e3e6dd;color:var(--ink);transform:translateY(-1px)}.pos-shortcuts kbd,.pos-summary kbd,.pos-cart-empty kbd{display:inline-grid;place-items:center;min-width:27px;height:22px;padding:0 6px;border:1px solid #d1d5cc;border-bottom-width:2px;border-radius:5px;background:#fff;color:#59635b;font:700 10px Consolas,monospace;box-shadow:0 1px 0 rgba(30,35,30,.05)} .pos-layout{display:grid;grid-template-columns:minmax(0,1fr) 355px;gap:14px;align-items:start}.pos-workspace{display:grid;gap:14px;min-width:0}.pos-search-card,.pos-cart-card,.pos-summary{padding:18px}.pos-section-heading,.pos-summary-title{display:flex;align-items:center;justify-content:space-between;gap:14px}.pos-section-heading>div,.pos-summary-title>div{display:flex;align-items:center;gap:10px}.pos-section-heading strong,.pos-summary-title strong{display:block;font-size:13px}.pos-section-heading small,.pos-summary-title small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.pos-step{width:27px;height:27px;display:grid;place-items:center;flex-shrink:0;border-radius:7px;background:var(--ink);color:var(--lime);font:bold 12px Consolas,monospace}.pos-ready{display:flex;align-items:center;gap:7px;color:#78931c;font:700 10px Consolas,monospace;white-space:nowrap}.pos-ready i{width:8px;height:8px;border-radius:50%;background:#9ed51e;box-shadow:0 0 0 4px rgba(158,213,30,.12)} .pos-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:15px}.pos-search-box{position:relative}.pos-search-box>span{position:absolute;left:14px;top:50%;transform:translateY(-50%);line-height:1;color:var(--as-text-muted);pointer-events:none;transition:color var(--as-duration-fast) var(--as-ease-standard)}.pos-search-box>span svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pos-search-box:focus-within>span{color:var(--as-brand-600)}.pos-search-box input{height:46px;padding-left:42px;background:#fff;font-size:14px;border-color:#d9ddd5}.pos-search-box input:focus{border-color:#9db540;box-shadow:0 0 0 3px rgba(157,181,64,.1)}.pos-search-row .secondary-button{padding:0 16px}.pos-matches{margin-top:8px;box-shadow:0 10px 24px rgba(35,40,34,.08)}.pos-matches:empty{display:none} .pos-scan-tools{position:relative}.pos-scan-tools>.secondary-button{width:218px;height:46px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 13px 0 16px;white-space:nowrap;border-color:#aeb4ac;background:#fff}.pos-scan-tools>.secondary-button:hover,.pos-scan-tools>.secondary-button[aria-expanded="true"]{border-color:var(--ink);background:#f7f8f3}.pos-scan-button-label{color:var(--ink);font-size:12px;font-weight:700}.pos-scan-chevron{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:#566159;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s ease}.pos-scan-tools>.secondary-button[aria-expanded="true"] .pos-scan-chevron{transform:rotate(180deg)}.pos-scan-menu{position:absolute;right:0;top:calc(100% + 7px);z-index:30;width:265px;padding:7px;border:1px solid #dcded7;border-radius:9px;background:#fff;box-shadow:0 14px 32px rgba(30,36,31,.16)}.pos-scan-menu[hidden]{display:none}.pos-scan-menu-title{padding:8px 10px 6px;color:#858d86;font:9px Consolas,monospace;letter-spacing:.65px}.pos-scan-menu button{width:100%;min-height:44px;display:grid;align-content:center;gap:3px;padding:11px 10px;border:0;border-radius:7px;background:#fff;color:var(--ink);text-align:left;cursor:pointer}.pos-scan-menu button:hover,.pos-scan-menu button:focus{outline:0;background:#f0f3e9}.pos-scan-menu strong{font-size:11px}.pos-scan-menu small{color:var(--muted);font-size:9.5px} .pos-scan-menu button.active{position:relative;padding-right:36px;background:#f1f5e8}.pos-scan-menu button.active::after{content:'✓';position:absolute;right:12px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#9ed51e;color:#26301e;font:bold 11px Arial,sans-serif} .pos-search-row .pos-scan-tools>.secondary-button{border:1.5px solid #b9c0b7;border-radius:9px;background:#eef0e9;box-shadow:0 2px 5px rgba(35,42,36,.1);color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s,transform .15s}.pos-search-row .pos-scan-tools>.secondary-button:hover{border-color:#838e85;background:#e7eae2;box-shadow:0 4px 9px rgba(35,42,36,.14);transform:translateY(-1px)}.pos-search-row .pos-scan-tools>.secondary-button[aria-expanded="true"]{border-color:#29322c;background:#e3e7dc;box-shadow:0 0 0 3px rgba(41,50,44,.08)} .pos-payment-choice{min-height:101px;gap:6px;border-color:#d9ddd6;box-shadow:0 1px 2px rgba(36,42,36,.03)}.pos-payment-choice .pos-svg{box-sizing:content-box;width:19px;height:19px;padding:6px;border-radius:50%;background:#f0f2ed;color:#7d887f;stroke-width:2}.pos-payment-choice strong{color:#3e4740;font-size:10.5px}.pos-payment-choice small{color:#89918a}.pos-payment-choice.active{border-color:#9bbd2f;background:#f3f9df;box-shadow:0 0 0 1px rgba(155,189,47,.08) inset,0 3px 9px rgba(112,145,20,.08)}.pos-payment-choice.active .pos-svg{background:#dff0a6;color:#668d08}.pos-payment-choice.active strong{color:#587b08}.pos-payment-choice.active small{color:#719312;font-weight:700}.pos-payment-choice:hover:not(.active){border-color:#afb7ae;background:#fafbf8}.pos-payment-choice:hover:not(.active) .pos-svg{background:#e8ebe5;color:#59655c} .pos-sale-actions button:first-child{border-color:#efb6b0;background:#fff2f0;color:#c94d45}.pos-sale-actions button:first-child .pos-svg{color:#dc5d55}.pos-sale-actions button:first-child:hover:not(:disabled){border-color:#df6d64;background:#ffe5e1;color:#ae3029;box-shadow:0 3px 9px rgba(201,77,69,.12)}.pos-sale-actions button:first-child:active:not(:disabled){background:#dc5d55;color:#fff;transform:translateY(0)}.pos-sale-actions button:first-child:active:not(:disabled) .pos-svg{color:#fff}.pos-sale-actions button:last-child{border-color:#e2c98b;background:#fff8e8;color:#946815}.pos-sale-actions button:last-child .pos-svg{color:#aa791c}.pos-sale-actions button:last-child:hover:not(:disabled){border-color:#cda84d;background:#fff1c9;color:#78510a;box-shadow:0 3px 9px rgba(170,121,28,.12)}.pos-sale-actions button:last-child:active:not(:disabled){background:#b6811d;color:#fff;transform:translateY(0)}.pos-sale-actions button:last-child:active:not(:disabled) .pos-svg{color:#fff}.pos-sale-actions button.has-suspended{border-color:#a9c65a;background:#f2f8dc;color:#5e7e0d}.pos-sale-actions button.has-suspended .pos-svg{color:#709710}.pos-sale-actions button.has-suspended:hover:not(:disabled){border-color:#8eae32;background:#e8f4bd;color:#4d6c04} .pos-print-toggle{display:flex;align-items:center;gap:6px;padding:6px 7px;border:1px solid #d7dbd4;border-radius:8px;background:#fafbf8;color:#747e76;cursor:pointer;transition:.15s}.pos-summary-top .pos-print-toggle span{color:inherit;font:700 9px Arial,sans-serif;letter-spacing:0}.pos-print-toggle .pos-svg{width:15px;height:15px}.pos-print-toggle>.as-switch{pointer-events:none}.pos-print-toggle:hover{border-color:#aeb6ad;background:#f1f3ee}.pos-print-toggle:focus-visible{outline:2px solid var(--as-focus-border);outline-offset:2px}.pos-print-toggle:disabled{opacity:.6;cursor:default}.pos-print-toggle:disabled:hover{border-color:#d7dbd4;background:#fafbf8}.pos-print-toggle.active{border-color:#a4c34b;background:#f1f8d9;color:#668908}.pos-print-toggle.active .pos-svg{color:#668908}.pos-print-toggle.active>.as-switch{background:var(--as-success-500)}.pos-print-toggle.active>.as-switch .as-switch-knob{transform:translateX(calc(var(--as-switch-w) - var(--as-switch-knob) - (var(--as-switch-pad) * 2)))} .pos-cash-calculator{display:grid;gap:11px;padding:13px;border:1px solid #dce2d4;border-radius:11px;background:linear-gradient(145deg,#fbfdf5,#f3f6ec);box-shadow:0 4px 13px rgba(50,61,48,.06)}.pos-cash-calculator[hidden]{display:none}.pos-cash-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.pos-cash-heading>div{display:grid;gap:3px}.pos-cash-heading span{color:#687268;font:700 9px Consolas,monospace;letter-spacing:.65px}.pos-cash-heading small{color:#929990;font-size:9px}.pos-cash-heading>button{padding:6px 8px;border:1px solid #b9cb7a;border-radius:6px;background:#f2f8dc;color:#668709;font:700 9px Arial,sans-serif;cursor:pointer}.pos-cash-heading>button:hover,.pos-cash-heading>button.active{border-color:#8eaa30;background:#e5f2b9;color:#4f7000}.pos-cash-heading>button:disabled{opacity:.45;cursor:not-allowed}.pos-cash-input{display:grid;gap:6px}.pos-cash-input>span{color:#667067;font-size:9px;font-weight:700}.pos-cash-input>div{position:relative}.pos-cash-input b{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#7b951b;font:700 16px Georgia,serif}.pos-cash-input input{width:100%;height:45px;padding:0 12px 0 31px;border:1px solid #cfd6ca;border-radius:8px;background:#fff;color:#202722;font:700 18px Georgia,serif}.pos-cash-input input:focus{outline:0;border-color:#97b637;box-shadow:0 0 0 3px rgba(151,182,55,.11)}.pos-cash-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.pos-cash-quick button{min-height:31px;padding:5px 2px;border:1px solid #d5dad1;border-radius:6px;background:#fff;color:#687169;font:700 8.5px Arial,sans-serif;cursor:pointer}.pos-cash-quick button:hover,.pos-cash-quick button.active{border-color:#9db73e;background:#eef6d3;color:#587800}.pos-change-display{width:100%;display:grid;gap:3px;padding:12px;border:1px solid #343e38;border-radius:9px;background:linear-gradient(145deg,#202722,#151b17);color:#fff;text-align:left;cursor:pointer;box-shadow:0 7px 16px rgba(27,34,29,.15);transition:.15s}.pos-change-display>span{color:#b8c0b8;font:700 8.5px Consolas,monospace;letter-spacing:.7px}.pos-change-display>strong{color:#d1ec62;font:bold 25px Georgia,serif}.pos-change-display>small{color:#9fa8a1;font-size:8.5px}.pos-change-display:hover{transform:translateY(-1px);box-shadow:0 9px 19px rgba(27,34,29,.19)}.pos-change-display.ready{border-color:#7fa016;background:linear-gradient(145deg,#263616,#1b2810)}.pos-change-display.ready>strong{color:#d7f36b}.pos-change-display.insufficient{border-color:#df7770;background:linear-gradient(145deg,#4a2926,#321b19)}.pos-change-display.insufficient>strong{color:#ffafa8}.pos-change-display.insufficient>span,.pos-change-display.insufficient>small{color:#f0bbb7} .pos-cart-card{min-height:430px}.pos-clear:disabled{opacity:.35;cursor:default;text-decoration:none}.pos-cart-head,.pos-cart-line{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,270px) 105px 30px;gap:12px;align-items:center}.pos-cart-head{padding:18px 8px 8px;color:var(--subtle);font:10px Consolas,monospace;letter-spacing:.45px}.pos-cart-head span:nth-child(3){text-align:right}.pos-cart-body{border-top:1px solid var(--line)}.pos-cart-line{padding:13px 8px;border-bottom:1px solid #eff0eb}.pos-item-identity{display:flex;align-items:center;gap:10px;min-width:0}.pos-item-identity>span{display:grid;place-items:center;width:25px;height:25px;flex-shrink:0;border-radius:50%;background:#eef0e9;color:var(--muted);font:bold 10px Consolas,monospace}.pos-item-identity>div{min-width:0}.pos-item-identity strong,.pos-item-identity small{display:block}.pos-item-identity strong{color:var(--ink);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pos-item-identity small{color:var(--muted);font:10px Consolas,monospace;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pos-unit-control{display:grid;grid-template-columns:32px 64px 32px;gap:5px;justify-content:center}.pos-unit-control button,.pos-remove{border:0;border-radius:6px;background:#eef0e9;color:var(--ink);cursor:pointer;font-size:17px}.pos-unit-control input{padding:7px 5px;text-align:center;height:34px}.pos-weight-control{display:grid;grid-template-columns:105px 1fr;gap:5px 7px}.pos-weight-control select,.pos-weight-control input{height:34px;padding:6px 8px;font-size:11px;background:#fff}.pos-weight-control>div{position:relative}.pos-weight-control>div span{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--subtle);font:9px Consolas,monospace;pointer-events:none}.pos-weight-control>div input{padding-right:34px}.pos-weight-control small{grid-column:1/-1;text-align:right;color:var(--muted);font-size:9px}.pos-line-total{text-align:right;color:var(--ink);font:bold 12px Consolas,monospace}.pos-remove{width:28px;height:28px;color:#cf645b;background:#ffebe8}.pos-remove:hover{background:#ffd9d3}.pos-cart-empty{min-height:310px;display:grid;place-items:center;align-content:center;gap:8px;text-align:center;color:var(--muted)}.pos-cart-empty>span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#eef0e9;color:#869087}.pos-cart-empty>span svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.pos-cart-empty strong{color:var(--ink);font:20px Georgia,serif}.pos-cart-empty p{margin:0;max-width:330px} .pos-summary{position:sticky;top:88px}.pos-sale-number{padding:5px 8px;border-radius:5px;background:#eef8d0;color:#78931c;font:700 9px Consolas,monospace}.pos-summary form{display:grid;gap:13px;margin-top:18px}.pos-field{display:grid;gap:5px}.pos-field label{display:flex;align-items:center;justify-content:space-between;color:#5f6861;font-size:11px;font-weight:bold}.pos-field label kbd{height:19px;min-width:25px}.pos-field input,.pos-field select{height:39px;background:#fff}.pos-field>small{color:var(--muted);font-size:9.5px;line-height:1.35}.pos-total-block{padding:17px;border-radius:9px;background:linear-gradient(145deg,#202522,#151a17);color:#fff;box-shadow:0 8px 20px rgba(30,35,30,.16)}.pos-total-block span,.pos-total-block small{display:block;color:#aeb6ae;font:10px Consolas,monospace;letter-spacing:.5px}.pos-total-block strong{display:block;margin:7px 0 5px;color:#d2ef5d;font:bold 29px Georgia,serif}.pos-balance-row{display:flex;align-items:center;justify-content:space-between;padding:10px 2px;border-top:1px solid var(--line);color:var(--muted)}.pos-balance-row strong{font:bold 14px Consolas,monospace;color:var(--ink)}.pos-balance-row strong.pos-due{color:#c68228}.pos-balance-row strong.pos-change{color:#78931c}.pos-charge-button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:49px;border:0;border-radius:8px;background:var(--ink);color:#fff;font:bold 13px Arial,sans-serif;cursor:pointer;box-shadow:0 7px 17px rgba(25,30,26,.18)}.pos-charge-button:hover{background:#343c37;transform:translateY(-1px)}.pos-charge-button:disabled{opacity:.55;cursor:wait}.pos-charge-button kbd{background:#d2ef5d;color:#273019;border-color:#b5d247}.pos-safe-note{margin:0;text-align:center;color:var(--muted);font-size:9.5px} .pos-summary{background:#fffefb;border-color:#e2e1da;box-shadow:0 12px 28px rgba(39,42,35,.08)}.pos-summary form{gap:20px;margin-top:0}.pos-summary-top{display:flex;align-items:flex-start;justify-content:space-between}.pos-summary-top>div{display:grid;gap:7px}.pos-summary-top span,.pos-total-display>span,.pos-choice-group legend{color:#788078;font:10px Consolas,monospace;letter-spacing:.75px}.pos-summary-top strong{color:#7e9b18;font:700 11px Consolas,monospace}.pos-summary-code{display:grid;place-items:center;width:33px;height:33px;border:1px solid #d8d9d4;border-radius:8px;background:#fafaf7;color:#8b938b}.pos-svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}.pos-brand-svg{width:19px;height:19px;stroke:none}.pos-summary-code .pos-svg{width:18px;height:18px}.pos-total-display{display:grid;gap:4px;padding:3px 0 2px}.pos-total-display strong{color:#18201c;font:bold 43px Georgia,serif;line-height:1.05;letter-spacing:.3px}.pos-total-display small{color:#939991;font-size:10px}.pos-choice-group{min-width:0;margin:0;padding:0;border:0}.pos-choice-group legend{margin-bottom:9px}.pos-method-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.pos-choice{min-height:39px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #dedfd9;border-radius:8px;background:#fff;color:#313732;font:700 10px Arial,sans-serif;cursor:pointer;transition:.12s}.pos-choice:hover{border-color:#a9bd59;background:#fbfdf3}.pos-choice.active{border-color:#9db841;background:#f9fceb;box-shadow:0 0 0 1px rgba(157,184,65,.08) inset}.pos-choice[data-pos-method="Efectivo"] .pos-svg{color:#7fa213}.pos-choice[data-pos-method="Transferencia"] .pos-svg{color:#48524b}.pos-method-wide{grid-column:1/-1}.pos-payment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.pos-payment-choice{min-height:91px;display:grid;place-items:center;align-content:center;gap:5px;padding:9px 6px;border:1px solid #dedfd9;border-radius:9px;background:#fff;color:#424943;text-align:center;cursor:pointer;transition:.12s}.pos-payment-choice:hover{border-color:#a9bd59;background:#fbfdf3}.pos-payment-choice.active{border-color:#9db841;background:#f9fceb;box-shadow:0 0 0 1px rgba(157,184,65,.08) inset}.pos-payment-choice .pos-svg{width:18px;height:18px;color:#818981}.pos-payment-choice.active .pos-svg{color:#7ea016}.pos-payment-choice strong{font-size:10px}.pos-payment-choice small{color:#8d948d;font-size:9px;line-height:1.25}.pos-credit-fields{display:grid;gap:12px;padding-top:1px}.pos-credit-fields[hidden],.pos-credit-fields>*[hidden],.pos-balance-row[hidden]{display:none}.pos-balance-row{margin-top:-5px}.pos-charge-button{min-height:57px;justify-content:space-between;padding:0 14px}.pos-charge-button>i{display:grid;place-items:center;color:#9dd31c;font-style:normal}.pos-charge-button>i .pos-svg{width:20px;height:20px}.pos-charge-button>span{display:flex;align-items:baseline;gap:7px}.pos-charge-button b{font:700 13px Consolas,monospace}.pos-charge-button kbd{background:#262d29;color:#fff;border-color:#525a54;box-shadow:none}.pos-safe-note{margin-top:-9px} .pos-method-select{display:grid;gap:9px}.pos-method-select label{color:#788078;font:10px Consolas,monospace;letter-spacing:.75px}.pos-method-select select{width:100%;height:44px;padding:0 40px 0 13px;border:1px solid #d9dcd5;border-radius:8px;background:#fff;color:#303731;font:600 11px Arial,sans-serif;cursor:pointer}.pos-method-select select:focus{outline:0;border-color:#9db841;box-shadow:0 0 0 3px rgba(157,184,65,.11)}.pos-method-select optgroup{font-weight:700;color:#5f6861}.pos-method-select option{font-weight:400;color:#303731} .pos-payment-method-picker{position:relative}.pos-payment-method-picker>button{width:100%;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border:1.5px solid #cbd0c8;border-radius:8px;background:#fff;color:#303731;font:700 11px Arial,sans-serif;cursor:pointer;box-shadow:0 1px 3px rgba(36,42,36,.05)}.pos-payment-method-picker>button:hover,.pos-payment-method-picker>button[aria-expanded="true"]{border-color:#94aa44;background:#f8faef}.pos-payment-method-picker>button>svg{width:19px;height:19px;fill:none;stroke:#69736b;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}.pos-payment-method-picker>button[aria-expanded="true"]>svg{transform:rotate(180deg)}.pos-payment-method-menu{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:7px;border:1px solid #d8dcd5;border-radius:9px;background:#fff;box-shadow:0 14px 30px rgba(29,35,30,.17)}.pos-payment-method-menu[hidden]{display:none}.pos-payment-method-menu button{position:relative;min-height:44px;display:flex;align-items:center;padding:8px 10px;border:0;border-radius:6px;background:#f6f7f3;color:#3f4841;font:600 10px Arial,sans-serif;text-align:left;cursor:pointer}.pos-payment-method-menu button:hover,.pos-payment-method-menu button:focus{outline:0;background:#ebf1dc;color:#5c790e}.pos-payment-method-menu button.active{padding-right:28px;background:#edf6cf;color:#5d7e08}.pos-payment-method-menu button.active::after{content:'✓';position:absolute;right:9px;color:#6f970a;font-weight:800}.pos-payment-method-menu .custom-method-option{grid-column:1/-1;border-top:1px solid #e3e5df;background:#fff;color:#647066}.pos-custom-method{display:grid;gap:6px;padding:10px;border:1px solid #dce0d8;border-radius:8px;background:#f8f9f5}.pos-custom-method[hidden]{display:none}.pos-custom-method label{font-size:9px}.pos-custom-method input{height:39px;background:#fff} .pos-sale-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.pos-sale-actions button{min-height:42px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #dedfd9;border-radius:8px;background:#fff;color:#4c554e;font:700 10px Arial,sans-serif;cursor:pointer;transition:.12s}.pos-sale-actions button:hover:not(:disabled){border-color:#a9b0a8;background:#f7f8f4;transform:translateY(-1px)}.pos-sale-actions button:first-child .pos-svg{color:#e46861}.pos-sale-actions button:last-child .pos-svg{color:#59625b}.pos-sale-actions button:disabled{opacity:.42;cursor:not-allowed}.pos-sale-actions .pos-svg{width:16px;height:16px} @media(max-width:1180px){.pos-layout{grid-template-columns:minmax(0,1fr) 315px}.pos-cart-head,.pos-cart-line{grid-template-columns:minmax(180px,1fr) minmax(190px,230px) 90px 28px}.pos-shortcuts button span{font-size:10px}} @media(max-width:930px){.pos-shortcuts{grid-template-columns:repeat(2,1fr)}.pos-layout{grid-template-columns:1fr}.pos-summary{position:static}.pos-cart-card{min-height:360px}} @media(max-width:680px){.pos-shortcuts{display:none}.pos-search-row{grid-template-columns:1fr}.pos-search-row .secondary-button{height:42px}.pos-section-heading{align-items:flex-start}.pos-ready{display:none}.pos-cart-head{display:none}.pos-cart-line{grid-template-columns:1fr 32px;padding:14px 2px}.pos-item-identity{grid-column:1/2}.pos-unit-control,.pos-weight-control{grid-column:1/2;margin-top:5px;justify-content:start}.pos-line-total{grid-column:1/2;text-align:left;font-size:14px}.pos-remove{grid-column:2;grid-row:1;align-self:start}.pos-summary{padding:16px}.pos-total-block strong{font-size:26px}} @media(max-width:680px){.pos-scan-tools>.secondary-button{width:100%}.pos-scan-menu{left:0;right:auto;width:min(100%,300px)}} /* Venta en vivo: espacio de caja ajustado al alto de la ventana. */ @media (min-width:931px){ /* Sin esto, la barra lateral (overflow-y:auto pero sin altura propia acotada aquí) puede necesitar más alto que el viewport en pantallas bajas y estira .app-shell/body/html enteros — la página completa terminaba con scroll detrás de Venta en vivo aunque .content.pos-view ya estuviera clippeado. Mismo patrón que .app-shell.pos-expanded (abajo). */ .app-shell.pos-view{height:100dvh;min-height:0;overflow:hidden} .app-shell.pos-view .sidebar{height:100dvh;min-height:0} .content.pos-view{width:100%;max-width:none;height:calc(100dvh - 73px);padding:14px 28px;overflow:hidden} .pos-screen{height:100%;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:10px} .pos-screen>.page-heading{min-height:45px;margin:0;align-items:center} .pos-screen>.page-heading .eyebrow{display:none} .pos-screen>.page-heading h1{margin:0 0 2px;font-size:25px} .pos-screen>.page-heading .page-subtitle{font-size:11px} .pos-screen>.page-heading .secondary-button{padding:9px 14px} /* El indicador de caja (cash-status-strip) va SIEMPRE al final, como última fila del grid, debajo de .pos-layout — nunca arriba, nunca flotante. Solo existe en el HTML cuando el modo no es simple — .pos-screen-with-cash-strip es el gancho que añade JS ese mismo momento, así que la fila extra solo se reserva cuando de verdad hay algo que mostrar (sin eso dejaría un hueco vacío en modo simple). Como .pos-summary ahora se desplaza internamente (overflow-y:auto) si le falta alto, esta fila de abajo nunca tapa ni recorta el botón COBRAR. */ .pos-screen.pos-screen-with-cash-strip{grid-template-rows:auto auto minmax(0,1fr) auto} .pos-screen>.cash-status-strip{margin:0} .pos-screen .pos-shortcuts{min-height:36px;margin:0;gap:7px} .pos-screen .pos-shortcuts button{min-height:36px;padding:6px 10px} .pos-screen>.pos-layout{height:100%;min-height:0;gap:10px;align-items:stretch} .pos-screen .pos-workspace{min-height:0;grid-template-rows:auto minmax(0,1fr);gap:10px} .pos-screen .pos-search-card{position:relative;z-index:3;padding:11px 14px} .pos-screen .pos-search-row{margin-top:9px} .pos-screen .pos-matches{position:absolute;z-index:8;left:14px;right:14px;top:calc(100% - 5px);max-height:min(260px,38vh);margin:0;background:#fffefa;border:1px solid var(--line)} .pos-screen .pos-cart-card{height:100%;min-height:0;padding:13px 16px;display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden} .pos-screen .pos-cart-head{padding:12px 8px 7px} .pos-screen .pos-cart-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable} .pos-screen .pos-cart-empty{height:100%;min-height:220px} /* overflow-y:auto (no "hidden"): si el formulario de cobro no cabe en la altura disponible — pantalla baja, o el indicador de caja de abajo le resta espacio — se desplaza solo este panel, nunca la página completa, y así el botón COBRAR y la nota de abajo siempre quedan alcanzables en vez de recortados. */ .pos-screen .pos-summary{position:static;height:100%;min-height:0;padding:13px;overflow-y:auto;overflow-x:hidden} .pos-screen .pos-summary form{height:100%;min-height:0;gap:8px} .pos-screen .pos-summary-top>div{gap:3px} .pos-screen .pos-total-display{gap:2px;padding:0} .pos-screen .pos-total-display strong{font-size:35px;line-height:1} .pos-screen .pos-method-select{gap:5px} .pos-screen .pos-payment-method-picker>button{height:39px} .pos-screen .pos-choice-group legend{margin-bottom:5px} .pos-screen .pos-payment-choice{min-height:70px;gap:3px;padding:5px 4px} .pos-screen .pos-payment-choice .pos-svg{width:17px;height:17px;padding:5px} .pos-screen .pos-cash-calculator{gap:7px;padding:9px 10px} .pos-screen .pos-cash-heading small{display:none} .pos-screen .pos-cash-heading>button{padding:5px 7px} .pos-screen .pos-cash-input{gap:3px} .pos-screen .pos-cash-input input{height:38px;font-size:16px} .pos-screen .pos-cash-quick button{min-height:27px} .pos-screen .pos-change-display{gap:1px;padding:8px 10px} .pos-screen .pos-change-display>strong{font-size:21px} .pos-screen .pos-sale-actions button{min-height:38px} .pos-screen .pos-charge-button{min-height:49px} .pos-screen .pos-safe-note{margin-top:-4px} } @media (min-width:931px) and (max-height:760px){ .content.pos-view{padding-top:9px;padding-bottom:9px} .pos-screen{grid-template-rows:auto minmax(0,1fr);gap:7px} .pos-screen>.page-heading{min-height:39px} .pos-screen>.page-heading .page-subtitle{display:none} .pos-screen>.pos-shortcuts{position:absolute;left:-9999px} .pos-screen>.pos-layout{grid-row:2} .pos-screen.pos-screen-with-cash-strip{grid-template-rows:auto minmax(0,1fr) auto} .pos-screen.pos-screen-with-cash-strip>.cash-status-strip{margin:0;padding:8px 12px} .pos-screen .pos-summary form{gap:6px} .pos-screen .pos-payment-choice{min-height:63px} .pos-screen .pos-cash-calculator{gap:5px;padding:7px 9px} .pos-screen .pos-cash-quick button{min-height:24px} .pos-screen .pos-change-display{padding:6px 9px} } /* Barra lateral retráctil con navegación flotante. */ .sidebar{position:relative;z-index:6;overflow:visible;transition:width .24s ease,padding .24s ease,box-shadow .24s ease} .sidebar-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none} .sidebar-scroll::-webkit-scrollbar{display:none;width:0;height:0} .sidebar-toggle{position:absolute;z-index:9;top:82px;right:-14px;width:29px;height:29px;display:grid;place-items:center;padding:0;border:1px solid var(--as-border-default);border-radius:50%;background:var(--as-surface);color:var(--as-ink-secondary);box-shadow:var(--as-shadow-sm);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease} .sidebar-toggle:hover{transform:scale(1.08);background:var(--as-brand-50);color:var(--as-brand-hover);box-shadow:var(--as-shadow-md)} .sidebar-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .24s ease} .nav-label{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media (min-width:681px){ .sidebar.collapsed{width:var(--as-sidebar-collapsed-width);padding-left:10px;padding-right:10px;box-shadow:5px 0 20px rgba(31,38,32,.06)} .sidebar.collapsed .sidebar-toggle svg{transform:rotate(180deg)} .sidebar.collapsed .brand{justify-content:center;padding:0 0 37px!important} .sidebar.collapsed .brand-mark-img{width:42px;height:42px} .sidebar.collapsed .brand-col{display:none} .sidebar.collapsed .sidebar-heading{width:34px;height:1px;margin:4px auto 12px;padding:0;background:#d3d9d1;color:transparent;font-size:0;overflow:hidden} .sidebar.collapsed .nav-list{gap:7px;margin-bottom:20px;overflow:visible} .sidebar.collapsed .nav-item, .sidebar.collapsed .inventory-nav .inventory-live-button{position:relative;width:46px;height:46px;margin:0 auto;padding:0;justify-content:center;gap:0;border:1px solid rgba(211,217,209,.9);border-radius:12px;background:rgba(255,255,252,.48);color:#667168;box-shadow:0 3px 9px rgba(37,45,39,.045);overflow:visible;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease,border-color .16s ease} .sidebar.collapsed .nav-item .nav-glyph{width:20px;font-size:19px;line-height:1;text-align:center} .sidebar.collapsed .nav-item .nav-label{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap} .sidebar.collapsed .nav-item:hover, .sidebar.collapsed .nav-item:focus-visible{z-index:12;transform:translateX(5px) translateY(-2px) scale(1.06);border-color:#c1c9bf;background:#fffefa;color:#202522;box-shadow:0 11px 24px rgba(31,39,33,.18)} .sidebar.collapsed .nav-item.active{border-color:var(--as-brand-600);background:var(--as-brand-gradient);color:var(--as-text-inverse);box-shadow:var(--as-shadow-brand)} .sidebar.collapsed .nav-item.active:hover, .sidebar.collapsed .nav-item.active:focus-visible{background:var(--as-brand-gradient);box-shadow:var(--as-shadow-brand)} .sidebar.collapsed .nav-item::after{display:none} .sidebar.collapsed .nav-badge{position:absolute;top:3px;right:3px;width:8px;height:8px;min-width:0;margin:0;padding:0;border:2px solid #e9ece5;border-radius:50%;font-size:0;box-shadow:0 0 0 2px rgba(239,139,121,.1)} .sidebar.collapsed .inventory-live-dot{position:absolute;top:3px;right:3px;width:8px;height:8px;margin:0;border:2px solid #e9ece5;box-sizing:content-box} .sidebar.collapsed .sidebar-note, .sidebar.collapsed .sidebar-footer{display:none} } .sidebar-floating-tooltip{position:fixed;z-index:40;width:max-content;max-width:230px;padding:9px 12px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#202622;color:#fff;font:700 12px var(--as-font-sans);white-space:nowrap;box-shadow:0 10px 25px rgba(23,30,25,.24);opacity:0;visibility:hidden;transform:translate(-7px,-50%);pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s ease} .sidebar-floating-tooltip.visible{opacity:1;visibility:visible;transform:translate(0,-50%)} @media (max-width:680px){.sidebar-toggle{display:none}} /* Modo caja ampliado: ocupa el viewport del navegador sin activar F11. */ .pos-expand-button{display:inline-flex;align-items:center;gap:7px} .pos-expand-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .pos-expand-button[aria-pressed="true"]{border-color:var(--as-success-500);background:var(--as-success-50);color:var(--as-success-700)} .pos-expand-button[aria-pressed="true"]:hover{border-color:var(--as-success-500);background:var(--as-success-100)} .pos-expanded-hint{display:none} @media (min-width:931px){ .app-shell.pos-expanded{height:100dvh;min-height:0;overflow:hidden} .app-shell.pos-expanded .sidebar{height:100dvh;min-height:0} .app-shell.pos-expanded .sidebar-toggle{display:none} .app-shell.pos-expanded .main-content{height:100dvh;overflow:hidden} .app-shell.pos-expanded .topbar{display:none} .app-shell.pos-expanded .content.pos-view{height:100dvh;padding:10px 12px} .app-shell.pos-expanded .pos-screen{position:relative;grid-template-rows:minmax(0,1fr);gap:0} .app-shell.pos-expanded .pos-screen>.page-heading, .app-shell.pos-expanded .pos-screen>.pos-shortcuts, .app-shell.pos-expanded .pos-screen>.cash-status-strip{display:none} .app-shell.pos-expanded .pos-screen>.pos-layout{grid-row:1;height:100%;min-height:0} /* En modo ampliado el indicador de caja sigue siendo obligatorio (a diferencia del encabezado y los atajos): forma parte de la misma cuadrícula, como una fila fija ABAJO — nunca flotante, nunca superpuesta al resumen de cobro. */ .app-shell.pos-expanded .pos-screen.pos-screen-with-cash-strip{grid-template-rows:minmax(0,1fr) auto;gap:8px} .app-shell.pos-expanded .pos-screen.pos-screen-with-cash-strip>.pos-layout{grid-row:1;height:100%;min-height:0} .app-shell.pos-expanded .pos-screen.pos-screen-with-cash-strip>.cash-status-strip{display:flex;grid-row:2;margin:0} .app-shell.pos-expanded .pos-screen>.pos-expanded-hint{position:fixed;z-index:25;left:88px;bottom:12px;display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(29,35,31,.92);color:#eef1ed;font:700 10px Arial,sans-serif;box-shadow:0 8px 22px rgba(24,31,26,.22);cursor:pointer;backdrop-filter:blur(7px)} .app-shell.pos-expanded .pos-expanded-hint kbd{display:grid;place-items:center;min-width:31px;height:22px;padding:0 6px;border:1px solid #69736c;border-radius:5px;background:#313a34;color:#d3ee67;font:700 9px Consolas,monospace} .app-shell.pos-expanded .cash-status-strip .pos-expanded-hint{position:static;display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:7px 10px;border:1px solid #d8ddd5;border-radius:7px;background:#eef0e9;color:var(--ink);font:700 11px Arial,sans-serif;cursor:pointer} .app-shell.pos-expanded .cash-status-strip .pos-expanded-hint:hover{background:#e2e5dc} } @media (max-width:930px){.pos-expand-button{display:none}} /* Escala tipográfica legible para el punto de venta. */ .pos-screen .pos-section-heading strong{font-size:15px} .pos-screen .pos-section-heading small{font-size:12px;line-height:1.4} .pos-screen .pos-ready{font-size:11.5px} .pos-screen .pos-search-box input{font-size:15px} .pos-screen .pos-scan-button-label{font-size:13px} .pos-screen .pos-scan-menu-title{font-size:11px} .pos-screen .pos-scan-menu strong{font-size:13px} .pos-screen .pos-scan-menu small{font-size:11.5px} .pos-screen .pos-cart-head{font-size:11.5px} .pos-screen .pos-item-identity strong{font-size:13.5px} .pos-screen .pos-item-identity small{font-size:11.5px;line-height:1.35} .pos-screen .pos-unit-control input, .pos-screen .pos-weight-control select, .pos-screen .pos-weight-control input{font-size:12.5px} .pos-screen .pos-weight-control small{font-size:10.5px} .pos-screen .pos-line-total{font-size:13.5px} .pos-screen .pos-cart-empty strong{font-size:23px} .pos-screen .pos-cart-empty p{font-size:14px;line-height:1.55} .pos-screen .pos-summary-top span, .pos-screen .pos-total-display>span, .pos-screen .pos-choice-group legend, .pos-screen .pos-method-select>label{font-size:11.5px} .pos-screen .pos-summary-top strong{font-size:12px} .pos-screen .pos-total-display small{font-size:11.5px} .pos-screen .pos-payment-method-picker>button{font-size:13px} .pos-screen .pos-payment-method-menu button{font-size:12.5px} .pos-screen .pos-custom-method label, .pos-screen .pos-custom-method input{font-size:12px} .pos-screen .pos-payment-choice strong{font-size:12px} .pos-screen .pos-payment-choice small{font-size:10.5px} .pos-screen .pos-cash-heading span{font-size:10.5px} .pos-screen .pos-cash-heading small, .pos-screen .pos-cash-input>span{font-size:10.5px} .pos-screen .pos-cash-heading>button{font-size:10.5px} .pos-screen .pos-cash-input input{font-size:18px} .pos-screen .pos-cash-quick button{font-size:10.5px} .pos-screen .pos-change-display>span{font-size:10px} .pos-screen .pos-change-display>small{font-size:10.5px} .pos-screen .pos-sale-actions button{font-size:12px} .pos-screen .pos-charge-button{font-size:14px} .pos-screen .pos-charge-button b{font-size:15px} .pos-screen .pos-safe-note{font-size:11px} .pos-screen .inventory-product-matches button, .pos-screen .inventory-product-matches p{font-size:12.5px} .sidebar.collapsed .nav-item::after{font-size:12px} @media (min-width:931px){ .pos-screen>.page-heading .page-subtitle{font-size:12.5px} .pos-screen .pos-shortcuts button{font-size:12px} .app-shell.pos-expanded .pos-layout{grid-template-columns:minmax(0,1fr) clamp(375px,27vw,435px)} .app-shell.pos-expanded .pos-summary form{gap:7px} .app-shell.pos-expanded .pos-total-display{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:end;column-gap:10px} .app-shell.pos-expanded .pos-total-display>span{grid-column:1/-1} .app-shell.pos-expanded .pos-total-display strong{grid-column:1;grid-row:2;font-size:42px} .app-shell.pos-expanded .pos-total-display small{grid-column:2;grid-row:2;padding-bottom:4px;white-space:nowrap} .app-shell.pos-expanded .pos-payment-choice{min-height:74px} .app-shell.pos-expanded .pos-cash-calculator{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'heading heading' 'received change' 'quick quick';gap:7px 9px;padding:9px 10px} .app-shell.pos-expanded .pos-cash-heading{grid-area:heading} .app-shell.pos-expanded .pos-cash-input{grid-area:received} .app-shell.pos-expanded .pos-cash-quick{grid-area:quick} .app-shell.pos-expanded .pos-change-display{grid-area:change;min-height:59px;align-content:center;padding:7px 10px} .app-shell.pos-expanded .pos-change-display>strong{font-size:23px} } /* Tipo de pago compacto: selector desplegable equivalente al método de pago. */ .pos-payment-type-select{display:grid;gap:5px;min-width:0} .pos-payment-type-select>label{color:#788078;font:11.5px Consolas,monospace;letter-spacing:.75px} .pos-payment-type-picker{position:relative} .pos-payment-type-picker>button{width:100%;height:43px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border:1.5px solid #cbd0c8;border-radius:8px;background:#fff;color:#303731;font:700 13px Arial,sans-serif;cursor:pointer;box-shadow:0 1px 3px rgba(36,42,36,.05)} .pos-payment-type-picker>button:hover,.pos-payment-type-picker>button[aria-expanded="true"]{border-color:#94aa44;background:#f8faef} .pos-payment-type-picker>button>svg{width:19px;height:19px;fill:none;stroke:#69736b;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s} .pos-payment-type-picker>button[aria-expanded="true"]>svg{transform:rotate(180deg)} .pos-payment-type-menu{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:42;display:grid;gap:5px;padding:7px;border:1px solid #d8dcd5;border-radius:9px;background:#fff;box-shadow:0 14px 30px rgba(29,35,30,.17)} .pos-payment-type-menu[hidden]{display:none} .pos-payment-type-menu>button{position:relative;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 10px;border:0;border-radius:7px;background:#f6f7f3;color:#3f4841;text-align:left;cursor:pointer;transition:background .13s ease,color .13s ease} .pos-payment-type-menu>button:hover,.pos-payment-type-menu>button:focus{outline:0;background:#ebf1dc;color:#567409} .pos-payment-type-menu>button.active{background:#edf6cf;color:#587800} .pos-payment-type-menu>button>span{display:flex;align-items:center;gap:9px} .pos-payment-type-menu>button strong{font-size:12.5px} .pos-payment-type-menu>button small{color:#7f8880;font-size:11px} .pos-payment-type-menu .pos-svg{box-sizing:content-box;width:17px;height:17px;padding:5px;border-radius:50%;background:#e9ece6;color:#7c867e} .pos-payment-type-menu>button.active .pos-svg{background:#dff0a6;color:#668d08} .pos-screen .pos-cash-input input{height:48px;font-size:21px} .pos-screen .pos-cash-quick button{min-height:32px;font-size:11px} /* BLOQUE J — API visual reutilizable para grupos de botones donde solo puede seleccionarse una opción dentro de la misma vista (filtro o modo; no cambia de panel — eso sigue usando tablist/tab, sin tocar). Cada contenedor conserva su propia clase para layout (grid, tarjeta, chip); .as-choice solo resuelve color y estados (base/hover/focus/seleccionado/ disabled) con los tokens oficiales, para no repetir esa lógica en cada control. Las propiedades de layout que cada control ya tenía (grid, padding, min-height, border-radius, tamaños de texto) se conservan en su selector original y siguen ganando por especificidad. */ .as-choice-group{display:flex;flex-wrap:wrap;gap:var(--as-space-2)} .as-choice{border:1px solid var(--as-border-default);background:var(--as-surface);color:var(--as-text-secondary);font-weight:var(--as-font-weight-medium);transition:border-color var(--as-duration-fast) var(--as-ease-standard),background var(--as-duration-fast) var(--as-ease-standard),color var(--as-duration-fast) var(--as-ease-standard)} .as-choice:hover:not(:disabled):not(.active):not([aria-pressed="true"]){border-color:var(--as-border-strong);background:var(--as-surface-hover)} .as-choice:focus-visible{outline:2px solid var(--as-focus-border);outline-offset:2px;box-shadow:var(--as-focus-ring)} .as-choice.active,.as-choice[aria-pressed="true"]{border-color:var(--as-brand-primary);background:var(--as-brand-50);color:var(--as-brand-700);font-weight:var(--as-font-weight-semibold)} .as-choice.active strong,.as-choice[aria-pressed="true"] strong{color:var(--as-brand-700)} .as-choice.active small,.as-choice[aria-pressed="true"] small{color:var(--as-brand-600)} .as-choice:disabled{opacity:.6;cursor:not-allowed} /* Tipos de pago en la cabecera: visibles, explicativos y fuera del cobro. */ .pos-screen .page-heading-actions{align-items:center;justify-content:flex-end;flex-wrap:wrap} .pos-payment-type-toolbar{display:grid;grid-template-columns:repeat(3,minmax(118px,1fr));gap:6px} .pos-payment-type-toolbar>button{min-height:52px;display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;text-align:left;cursor:pointer} .pos-payment-type-toolbar .pos-svg{box-sizing:content-box;width:17px;height:17px;flex:0 0 auto;padding:5px;border-radius:50%;background:var(--as-gray-100);color:var(--as-text-muted)} .pos-payment-type-toolbar>button.active .pos-svg,.pos-payment-type-toolbar>button[aria-pressed="true"] .pos-svg{background:var(--as-brand-100);color:var(--as-brand-600)} .pos-payment-type-toolbar>button>span{min-width:0;display:grid;gap:2px} .pos-payment-type-toolbar strong{font-size:11.5px;white-space:nowrap} .pos-payment-type-toolbar small{max-width:150px;color:var(--as-text-muted);font-size:9.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pos-credit-modal-divider{display:flex;align-items:center;gap:10px;margin:17px 0;color:#939b94;font:10px Consolas,monospace;letter-spacing:.65px} .pos-credit-modal-divider::before,.pos-credit-modal-divider::after{content:'';height:1px;flex:1;background:#e1e4de} .pos-credit-modal-note{margin:11px 0 0;padding:10px 12px;border-radius:7px;background:#f3f7e8;color:#687852;font-size:11.5px} .pos-credit-modal-error{margin:9px 0 0;padding:9px 11px;border:1px solid #f0c1bb;border-radius:7px;background:#fff0ee;color:#b34238;font-size:11.5px} @media (min-width:931px){ .app-shell.pos-expanded .pos-screen>.page-heading{position:fixed;z-index:24;top:10px;right:calc(clamp(375px,27vw,435px) + 24px);display:block;min-height:0;margin:0;pointer-events:none} .app-shell.pos-expanded .pos-screen>.page-heading>div:first-child, .app-shell.pos-expanded .page-heading-actions>.secondary-button{display:none} .app-shell.pos-expanded .pos-screen>.page-heading .page-heading-actions{display:block;margin:0} .app-shell.pos-expanded .pos-payment-type-toolbar{pointer-events:auto} .app-shell.pos-expanded .pos-ready{display:none} /* El selector de tipo de pago queda flotando (position:fixed) sobre la columna izquierda del punto de venta — sin este margen, su fila de botones (top:10px + 52px de alto) se superpone con el encabezado de "1 Agregar productos". Reserva su propia fila para que no se toquen. */ .app-shell.pos-expanded .pos-workspace{margin-top:66px} } @media (min-width:931px) and (max-width:1180px){ .pos-payment-type-toolbar{grid-template-columns:repeat(3,minmax(78px,1fr))} .pos-payment-type-toolbar>button{min-height:44px;justify-content:center;padding:6px} .pos-payment-type-toolbar small{display:none} .pos-payment-type-toolbar strong{font-size:10.5px} /* Antes este right usaba un clamp distinto (315–375px) al que de verdad tiene la columna .pos-summary en este mismo rango (clamp(375–435px), definido arriba y no reescrito aquí) — el desfase de ~40px hacía que "Fiado" terminara tapando "RESUMEN DE COBRO" a 1024px. Se retira la regla para que herede el right correcto (clamp(375px,27vw,435px)+24px), igual que en el resto del rango ≥931px. */ .app-shell.pos-expanded .pos-workspace{margin-top:58px} } @media (max-width:930px){ .pos-payment-type-toolbar{width:100%;grid-template-columns:repeat(3,minmax(78px,1fr))} .pos-payment-type-toolbar>button{min-height:44px;justify-content:center;padding:6px} .pos-payment-type-toolbar small{display:none} .pos-payment-type-toolbar strong{font-size:10.5px} } /* Créditos comerciales: registro manual separado y ficha unificada. */ .credit-mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0} .credit-mode-picker button{display:grid;gap:4px;min-height:76px;padding:13px 15px;border-width:1.5px;border-radius:10px;text-align:left;cursor:pointer} .credit-mode-picker strong{font-size:14px} .credit-mode-picker small{color:var(--as-text-muted);font-size:11.5px;line-height:1.35} .credit-new-client{grid-column:1/-1;margin:0;padding:13px;border:1px solid #dfe3dc;border-radius:9px;background:#f7f8f4} .credit-new-client[hidden],.product-credit-message[hidden],#manualCreditFields[hidden]{display:none} .manual-credit-warning{display:flex;align-items:flex-start;gap:11px;margin-top:14px;padding:13px 14px;border:1px solid #efcd8e;border-radius:9px;background:#fff6e5;color:#7b5b20;line-height:1.45;cursor:pointer} .manual-credit-warning input{margin-top:2px} .manual-credit-warning span{font-size:12px}.manual-credit-warning strong{display:block;margin-bottom:2px;color:#684a13} .product-credit-message{display:grid;gap:6px;margin:15px 0;padding:16px;border:1px solid #b9cb7a;border-radius:10px;background:#f3f9df;color:#536a18;line-height:1.45} .product-credit-message span{font-size:12px;color:#66735f} /* Ficha del cliente comercial: enlace "Volver" discreto, arriba a la izquierda. */ .detail-back{margin:0 0 12px} .detail-back .simple-link{padding:0;font-size:12.5px} /* Mensaje de error persistente dentro de un modal (role="alert"). */ .modal-alert{margin:0 0 16px;padding:11px 13px;border:1px solid #f2c4bc;border-radius:8px;background:#ffece9;color:#a5382c;font-size:12.5px;line-height:1.45} .modal-alert[hidden]{display:none} .as-confirm-dialog{width:min(100%,500px)} .as-confirm-dialog .modal-intro{white-space:pre-line} .as-confirm-warning{font-weight:600} .as-confirm-error{display:block;margin-top:3px;color:var(--as-danger-600);font-size:var(--as-font-size-xs)} .as-confirm-error[hidden]{display:none} .as-danger-button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--as-control-md);padding:0 var(--as-space-5);border:1px solid var(--as-danger-600);border-radius:var(--as-radius-sm);background:var(--as-danger-600);color:var(--as-text-inverse);font:var(--as-font-weight-semibold) var(--as-font-size-sm) var(--as-font-sans);cursor:pointer} .as-danger-button:hover{background:var(--as-danger-700);border-color:var(--as-danger-700)} .as-danger-button:focus-visible{outline:2px solid var(--as-focus-border);outline-offset:2px;box-shadow:var(--as-focus-ring)} .as-danger-button:disabled{cursor:not-allowed;opacity:.6} /* GEF-1: ciclo de vida del cliente (Activo / Pausado / Archivado). */ .lifecycle-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:5px;font:bold 11px var(--as-font-sans);letter-spacing:.3px;text-transform:uppercase;vertical-align:middle;white-space:nowrap} .lifecycle-badge:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor} .lifecycle-badge.paused{background:#fff0d8;color:#a86a15} .lifecycle-badge.archived{background:#ececec;color:#666} .detail-title h1 .lifecycle-badge{font-size:11px} .lifecycle-note{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.45;max-width:520px} .detail-actions-wrap{display:flex;flex-direction:column;gap:8px;align-items:flex-end} .detail-actions-secondary{display:flex;flex-direction:column;gap:2px;align-items:flex-end;text-align:right} .detail-actions-secondary small{color:var(--muted);font-size:11px} .text-button{border:0;background:transparent;padding:4px 2px;font-size:12px;font-weight:bold;cursor:pointer;color:var(--muted);text-decoration:underline;text-underline-offset:2px} .text-button:hover{color:var(--ink)} .text-button.danger{color:#c07268} .text-button.danger:hover{color:#a5382c} .modal-hint{margin:0;padding:10px 12px;border:1px solid #d9e0d7;border-radius:8px;background:#f4f6f0;color:#5f6861;font-size:12px;line-height:1.45} @media(max-width:680px){.detail-actions-wrap{align-items:stretch;margin-top:15px}.detail-actions-secondary{align-items:stretch;text-align:left}.lifecycle-note{max-width:none}} .commercial-profile-identity{display:flex;align-items:center;gap:14px;margin:-8px 0 18px} .commercial-profile-identity>span{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#9edce7;color:#183d43;font-weight:800;font-size:16px} .commercial-profile-identity>div{display:grid;gap:4px}.commercial-profile-identity strong{font:28px Georgia,serif;color:var(--ink)}.commercial-profile-identity small{color:var(--muted);font-size:12px} .commercial-credit-stats{margin-bottom:15px}.commercial-credit-alert{display:flex;gap:12px;align-items:center;margin:0 0 16px;padding:13px 16px;border:1px solid #efcf98;border-radius:10px;background:#fff2d9;color:#875e1e} .commercial-credit-alert strong{white-space:nowrap}.commercial-credit-alert span{font-size:12px;line-height:1.45}.commercial-credit-alert.is-clear{border-color:#cfe09d;background:#f2f8df;color:#587613} .commercial-history-panel{margin-top:14px}.commercial-history-panel .panel-heading h2{margin:0 0 4px}.commercial-history-panel td small{display:block;margin-top:4px;color:var(--muted);font-size:10.5px}.commercial-history-panel .manual-credit-note{color:#b06e24} .credit-obligation-list{display:grid;gap:8px;margin:17px 0;max-height:360px;overflow:auto} .credit-obligation-list>button{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px;border:1px solid #dce0da;border-radius:9px;background:#fbfcf8;color:var(--ink);text-align:left;cursor:pointer} .credit-obligation-list>button:hover{border-color:#9cb648;background:#f3f8df}.credit-obligation-list span{display:grid;gap:4px}.credit-obligation-list small{color:var(--muted)}.credit-obligation-list b{color:#bd7425;white-space:nowrap} /* Créditos y deudas → "¿A qué crédito…?": bloque para saldar toda la deuda. */ .total-payment-cta{margin:14px 0 4px} .total-payment-cta p{margin:0 0 10px;font-size:13px;color:var(--muted)} .total-payment-cta p strong{color:var(--ink);font:bold 15px Georgia,serif} .total-payment-cta .primary-button{display:flex;align-items:center;justify-content:center;width:100%} .total-payment-divider{display:flex;align-items:center;gap:10px;margin:16px 0 4px;color:var(--muted);font-size:11.5px} .total-payment-divider::before,.total-payment-divider::after{content:"";flex:1;height:1px;background:var(--line)} /* Créditos con varios productos (Venta en vivo): botón "Ver N productos" dentro de la celda de detalle, y la fila de desglose que abre justo debajo — nunca un menú flotante, así que nunca tapa otras filas. */ .credit-products-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid #d8ddd5;border-radius:7px;padding:8px 11px;background:#f8f9f5;color:var(--ink);font:inherit;font-weight:bold;font-size:12.5px;cursor:pointer;transition:background-color .12s ease,border-color .12s ease} .credit-products-toggle:hover{background:#eef0e9;border-color:#c7cec2} .credit-products-chevron{width:13px;height:13px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease} .credit-products-toggle[aria-expanded="true"] .credit-products-chevron{transform:rotate(180deg)} .credit-products-detail-row>td{padding:0 10px 14px;border-top:0} .credit-products-list{display:grid;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:#f8f8f3} .credit-product-line{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:baseline;font-size:12.5px} .credit-product-name{font-weight:bold;color:var(--ink)} .credit-product-variant{color:var(--muted)} .credit-product-qty{color:var(--muted);font:12px Consolas,monospace;text-align:right;white-space:nowrap} @media(max-width:760px){.credit-mode-picker{grid-template-columns:1fr}.commercial-credit-alert{align-items:flex-start;flex-direction:column}.commercial-profile-identity strong{font-size:23px} .credit-products-detail-row>td{padding:0 0 12px} .credit-product-line{grid-template-columns:1fr;gap:1px} .credit-product-qty{text-align:left} } /* .responsive-table convierte cada en una tarjeta propia por debajo de 680px — sin esto, la fila de detalle quedaría con su propia tarjeta blanca duplicando el borde de .credit-products-list de adentro. */ @media(max-width:680px){ .responsive-table tr.credit-products-detail-row{background:transparent;border:0;padding:0;margin-top:-8px} } /* Buscador editable de clientes comerciales: nombre, documento o teléfono. */ .commercial-client-picker{position:relative;display:grid;gap:6px;margin-top:6px} .commercial-client-picker[hidden]{display:none} .commercial-client-picker-input{position:relative;display:block;min-height:48px;border:1.5px solid #cbd2c8;border-radius:9px;background:#fff;box-shadow:0 2px 5px rgba(35,42,36,.04);overflow:hidden;transition:border-color .15s,box-shadow .15s} .commercial-client-picker:focus-within .commercial-client-picker-input{border-color:#8fac29;box-shadow:0 0 0 3px rgba(143,172,41,.11)} .commercial-client-picker-input>span{position:absolute;z-index:2;left:14px;top:50%;width:16px;height:16px;color:var(--as-text-muted);transform:translateY(-50%);pointer-events:none;transition:color var(--as-duration-fast) var(--as-ease-standard)} .commercial-client-picker:focus-within .commercial-client-picker-input>span{color:var(--as-brand-600)} .commercial-client-picker-input>span svg,.commercial-client-picker-input button svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .commercial-client-picker-input input{display:block;width:100%;min-width:0;height:46px;border:0!important;outline:0!important;background:transparent!important;padding:0 58px 0 44px!important;box-shadow:none!important;color:var(--ink);font-size:14px} .commercial-client-picker-input button{position:absolute;z-index:3;top:0;right:0;width:48px;height:46px;border:0;border-left:1px solid #e1e4df;background:#f8faf5;color:#667168;cursor:pointer} .commercial-client-picker-input button svg{width:19px;height:19px;margin:auto;transition:transform .15s ease} .commercial-client-picker-input button:focus-visible{outline:2px solid #8fac29;outline-offset:-3px} .commercial-client-picker-input button:hover{background:#f1f4eb;color:#668508} .commercial-client-picker-results{position:absolute;z-index:80;top:calc(100% + 5px);left:0;right:0;display:grid;max-height:285px;overflow:auto;padding:6px;border:1px solid #d6dbd3;border-radius:10px;background:#fff;box-shadow:0 16px 34px rgba(30,37,31,.18)} .commercial-client-picker-results[hidden]{display:none} .commercial-client-picker-results>button{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:9px 11px;border:0;border-radius:7px;background:transparent;color:var(--ink);text-align:left;cursor:pointer} .commercial-client-picker-results>button:hover,.commercial-client-picker-results>button:focus{outline:0;background:#f0f6dc;color:#547400} .commercial-client-picker-results>button span{display:grid;gap:3px}.commercial-client-picker-results>button strong{font-size:13px}.commercial-client-picker-results>button small{color:#7d867f;font-size:11px}.commercial-client-picker-results>button b{color:#bd7425;font-size:11px;white-space:nowrap} .commercial-client-picker-results>p{margin:0;padding:15px;text-align:center;color:var(--muted);font-size:12px} .commercial-client-new-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;justify-self:start;min-height:39px;margin:7px 0 3px;padding:0 14px;border:1px solid #9db84a;border-radius:8px;background:#f1f8d9;color:#587700;font-weight:800;font-size:12.5px;cursor:pointer;box-shadow:0 2px 6px rgba(86,115,13,.07)} .commercial-client-new-button span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#d9ef8d;color:#4f7000;font-size:16px;line-height:1} .commercial-client-new-button:hover{border-color:#78991b;background:#eaf5c3;transform:translateY(-1px)} .commercial-client-new-button.active{border-color:#e4b1aa;background:#fff0ee;color:#b54b42}.commercial-client-new-button.active span{background:#ffd7d2;color:#a53c34} .commercial-client-picker-status{margin-top:2px;padding:8px 10px;border-left:3px solid #e0ad57;background:#fff8ea;color:#7a6544;font-size:11.5px;line-height:1.4} .commercial-client-picker-status[hidden]{display:none}.commercial-client-picker-status strong{color:#765116} /* Autocompletado de Categoría en "Agregar producto": el input sigue siendo un campo de texto normal (mismo estilo que el resto del formulario, sin icono ni botón de alternar) — solo se reutilizan .commercial-client- picker-results/-status para la lista de sugerencias y el mensaje de estado, ancladas aquí mediante position:relative. .active marca la opción resaltada por teclado (aria-activedescendant), ya que el foco real permanece en el input, no se mueve a los botones. */ .category-autocomplete{position:relative} .commercial-client-picker-results>button.active{outline:0;background:#f0f6dc;color:#547400} /* PC-2 — "Registrar consumo": total del consumo y campo de cantidad por línea. */ .consumption-total{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 4px;padding:10px 13px;border-radius:8px;background:#f4f6f2;font-size:12.5px;color:var(--muted)} .consumption-total strong{font-size:16px;color:var(--ink)} .consumption-line-table input[data-line-qty]{width:64px;max-width:100%} /* PC-3A — abonos y pago total de consumos: acción de deuda total, historial de abonos por consumo y resumen en la ventana de abono. */ .consumption-debt-actions{margin:0 0 16px} .consumption-payment-toggle{margin-top:6px;font-size:11.5px} .consumption-payment-toggle summary{cursor:pointer;color:var(--muted)} .consumption-payment-log{margin:6px 0 0;padding-left:16px;display:grid;gap:3px} .consumption-pay-summary{display:grid;gap:8px;margin:0 0 16px;padding:12px 13px;border-radius:8px;background:#f4f6f2} .consumption-pay-summary>div{display:flex;justify-content:space-between;gap:12px;font-size:12.5px} .consumption-pay-summary dt{color:var(--muted)} .consumption-pay-summary dd{margin:0;text-align:right;color:var(--ink)} .client-directory-search{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin:0 0 16px;padding:0 13px;border:1px solid #d8ddd5;border-radius:9px;background:#fff;transition:border-color .15s,box-shadow .15s} .client-directory-search>span{color:#778178;font-size:19px}.client-directory-search input{height:48px;border:0;outline:0;background:transparent;font-size:14px}.client-directory-search small{color:#7c857e;white-space:nowrap} /* Mismo anillo de foco que .commercial-client-picker: el input interno no tiene borde propio (outline:0), así que la señal de foco vive en el contenedor mediante :focus-within — antes no había ninguna. */ .client-directory-search:focus-within{border-color:#8fac29;box-shadow:0 0 0 3px rgba(143,172,41,.11)} @media(max-width:600px){.commercial-client-picker-results>button b{display:none}.client-directory-search{grid-template-columns:auto minmax(0,1fr)}.client-directory-search small{display:none}} /* Historial de inventario: consulta, auditoría, cierres y devoluciones. */ /* Pestañas "Ventas" / "Turnos de caja": cambian el panel visible con un simple repintado desde cache (ver setHistoryTab) — no hay navegación ni consulta nueva detrás de este control. */ .history-tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--line)} .history-tabs button{min-height:44px;padding:10px 18px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--as-text-secondary);font-weight:bold;font-size:13px;cursor:pointer;transition:color var(--as-duration-fast) var(--as-ease-standard),border-color var(--as-duration-fast) var(--as-ease-standard)} .history-tabs button:hover:not(.active){color:var(--as-ink-primary)} .history-tabs button.active{color:var(--as-brand-primary);border-color:var(--as-brand-primary)} .history-tabs button:focus-visible{outline:2px solid var(--as-focus-border);outline-offset:2px} .history-summary-caption{margin:0 0 10px;color:var(--muted);font-size:12px} .history-summary-caption strong{color:var(--ink)} .history-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(145px,1fr));gap:11px;margin-bottom:14px} .history-summary-grid article{position:relative;display:grid;gap:7px;padding:15px 16px;border:1px solid var(--border);border-radius:11px;background:var(--surface);box-shadow:0 8px 22px rgba(29,35,30,.045)} .history-summary-grid span{color:var(--muted);font-size:11.5px}.history-summary-grid strong{font:700 22px Georgia,serif;color:var(--ink)} /* Explicación emergente de cada tarjeta — ver bindHistorySummaryHelp en inventory-module.js. El icono es el disparador accesible (teclado y táctil); el hover de 1,5s sobre la tarjeta completa es un atajo extra solo para mouse. El popover se posiciona con JS (position/left/right/ top/bottom vía style.cssText) para no salirse de la pantalla ni tapar la cifra de su propia tarjeta — por eso nace pegado a top:100%. */ .history-summary-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px} .history-summary-help-trigger{flex-shrink:0;width:20px;height:20px;display:grid;place-items:center;border:0;border-radius:50%;padding:0;background:transparent;color:#9aa29a;cursor:pointer;transition:background-color .12s ease,color .12s ease} .history-summary-help-trigger:hover,.history-summary-help-trigger:focus-visible{background:#eef0e9;color:#567700} .history-summary-help-trigger:focus-visible{outline:2px solid var(--as-focus-border);outline-offset:1px} .history-summary-help-icon{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .history-summary-tooltip{position:absolute;z-index:30;width:230px;max-width:calc(100vw - 32px);padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:var(--card);box-shadow:0 14px 32px rgba(30,35,30,.16);color:#4b524c;font-size:12px;line-height:1.5} .history-summary-tooltip[hidden]{display:none} @media(max-width:700px){.history-summary-tooltip{width:200px}} .history-filter-panel{margin-bottom:14px;padding:14px}.history-filters{display:grid;grid-template-columns:minmax(220px,2fr) repeat(2,minmax(120px,1fr)) auto auto;align-items:end;gap:9px} .history-filters>label{display:grid;gap:5px;color:#687169;font-size:10px;font-weight:700;letter-spacing:.55px;text-transform:uppercase} .history-filters input{width:100%;height:43px;border:1px solid #d5dad3;border-radius:8px;background:#fff;padding:0 11px;color:var(--ink);font-size:12.5px;outline:0} .history-filters input:focus{border-color:#91ad2c;box-shadow:0 0 0 3px rgba(145,173,44,.1)} .history-search{position:relative}.history-search>span{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--as-text-muted);line-height:1;transition:color var(--as-duration-fast) var(--as-ease-standard)}.history-search>span svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .history-search:focus-within>span{color:var(--as-brand-600)}.history-search input{padding-left:39px} /* "Más filtros": mismo lenguaje visual que .credit-products-toggle (botón + chevron que rota). El panel (Estado/Método) ya está en el DOM oculto con [hidden]; toggleHistoryMoreFilters() solo cambia ese atributo, sin repintar ni volver a consultar Supabase. */ .history-more-filters-toggle{height:43px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid #d8ddd5;border-radius:8px;padding:0 14px;background:#f8f9f5;color:var(--ink);font:inherit;font-size:12.5px;font-weight:bold;cursor:pointer;transition:background-color .12s ease,border-color .12s ease} .history-more-filters-toggle:hover{background:#eef0e9;border-color:#c7cec2} .history-more-filters-toggle[aria-expanded="true"]{border-color:#91ad2c;background:#f0f8d5;color:#567700} .history-more-filters-toggle .credit-products-chevron{width:13px;height:13px} .history-more-filters-toggle[aria-expanded="true"] .credit-products-chevron{transform:rotate(180deg)} .history-more-filters{display:grid;grid-template-columns:repeat(2,minmax(140px,1fr));gap:9px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)} .history-more-filters[hidden]{display:none} .history-more-filters label{display:grid;gap:5px;color:#687169;font-size:10px;font-weight:700;letter-spacing:.55px;text-transform:uppercase} .history-more-filters select{width:100%} .history-result-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.history-result-heading span{color:var(--muted);font-size:11.5px} .history-date-group{margin-bottom:20px}.history-date-group:last-child{margin-bottom:0} .history-date-group-label{display:flex;align-items:baseline;gap:8px;margin:0 0 8px 2px} .history-date-group-label strong{font:700 14px Georgia,serif;color:var(--ink)} .history-date-group-label .history-date-group-count{color:var(--muted);font-size:11.5px} .sale-detail-title{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-right:34px}.sale-detail-title h2{margin:3px 0}.sale-detail-title .status{white-space:nowrap} .sale-detail-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:11px 0;border-bottom:1px solid #e5e7e2}.sale-detail-line>span{display:grid;gap:3px}.sale-detail-line small{color:var(--muted);font-size:10.5px}.sale-detail-line>small{grid-column:1/-1;color:#6e7d4e} .sale-detail-totals{display:grid;gap:7px;margin:15px 0;padding:13px 15px;border-radius:10px;background:#f5f7f1}.sale-detail-totals>div{display:flex;justify-content:space-between;gap:15px;color:#687168}.sale-detail-totals .grand{margin:3px -5px;padding:9px 5px;border-top:1px solid #dfe5d4;border-bottom:1px solid #dfe5d4;color:var(--ink);font-size:15px} .return-item-list{display:grid;gap:8px;margin:16px 0}.return-item-list label{display:grid;grid-template-columns:minmax(0,1fr) 110px;align-items:center;gap:12px;padding:11px 13px;border:1px solid #dce1d8;border-radius:9px;background:#fafbf8}.return-item-list label>span{display:grid;gap:3px}.return-item-list small{color:var(--muted);font-size:10.5px}.return-item-list input{height:42px;border:1px solid #cfd6cc;border-radius:7px;padding:0 10px;font-weight:700} .return-preview{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px 14px;margin:12px 0;padding:13px 15px;border:1px solid #cbdc95;border-radius:9px;background:#f3f8df;color:#5b721a}.return-preview strong{font-size:18px}.return-preview small{flex-basis:100%;color:#758260} .daily-close-content{margin-top:12px}.daily-close-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.daily-close-grid article{display:grid;gap:6px;padding:12px;border:1px solid #dfe3dc;border-radius:9px;background:#fafbf8}.daily-close-grid span{color:var(--muted);font-size:10.5px}.daily-close-grid strong{font-size:16px} .daily-method-list{display:grid;gap:2px;margin:8px 0 13px}.daily-method-list>div{display:flex;justify-content:space-between;gap:15px;padding:9px 4px;border-bottom:1px solid #e5e8e2}.daily-difference{display:grid;grid-template-columns:1fr auto;gap:5px 14px;padding:13px;border:1px solid #cddd9b;border-radius:9px;background:#f3f8df;color:#557018}.daily-difference small{grid-column:1/-1}.daily-difference.warning{border-color:#e8be79;background:#fff5e3;color:#865d1e} @media(max-width:1200px){.history-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.history-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.history-search{grid-column:1/-1}} @media(max-width:700px){.history-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.history-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.history-search{grid-column:1/-1}.history-more-filters{grid-template-columns:1fr}.history-result-heading{align-items:flex-start;flex-direction:column}.daily-close-grid{grid-template-columns:1fr 1fr}.history-tabs{gap:4px}.history-tabs button{flex:1;min-width:0;padding:10px 8px;font-size:12px}} .history-quick-filters{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 10px} .history-quick-filters button{min-height:var(--as-control-lg);padding:7px 13px;border-radius:var(--as-radius-pill);font-size:12px;font-weight:700;cursor:pointer} .history-pagination{display:flex;align-items:center;justify-content:center;gap:13px;padding:18px 0 2px;border-top:1px solid var(--line);margin-top:13px} .history-pagination span{color:var(--muted);font-size:12px;font-weight:700} .history-pagination .small-button[disabled]{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none} /* La regla global de la barra retráctil se declara después del CSS móvil. Esta corrección final restablece el comportamiento fuera de pantalla en teléfonos sin afectar el modo reducido de escritorio. */ @media(max-width:680px){ .sidebar{position:fixed;left:-240px;top:0;bottom:0;width:240px;z-index:12;overflow:visible;transition:left .22s} .sidebar.open{left:0} .sidebar-scroll{overflow-y:auto;overflow-x:hidden} } /* --- Configuración y Control de caja ------------------------------------- */ .settings-nav{margin-top:auto;padding-top:6px} .cash-settings-panel .panel-heading{margin-bottom:4px} .cash-mode-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0} .cash-mode-picker button{display:grid;gap:5px;min-height:82px;padding:14px 15px;border-width:1.5px;border-radius:10px;text-align:left;cursor:pointer} .cash-mode-picker strong{font-size:14px} .cash-mode-picker small{color:var(--as-text-muted);font-size:11.5px;line-height:1.35} @media(max-width:760px){.cash-mode-picker{grid-template-columns:1fr}} .cash-status-strip{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0 0 16px;padding:11px 15px;border:1px solid #dfe3dc;border-radius:10px;background:#fafbf8} .cash-status-strip>span:not(.status){flex:1;min-width:180px;color:#586158;font-size:12px} .cash-status-strip strong{color:var(--ink)} .cash-status-strip-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* "Tiempo abierto" — hereda el estilo base de .cash-status-strip>span (flex/min-width/color/tamaño); solo se ajustan los dígitos para que no salten de ancho cada segundo (tabular-nums) y se lean con más peso. */ .cash-status-strip-timer{white-space:nowrap} .cash-status-strip-timer b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums} /* Historial de turnos: duración de un turno todavía abierto (foto del último refresh, no cuenta en vivo — ver cashSessionDurationLabel). */ .cash-duration-open{color:#78931c;font-weight:600;white-space:nowrap} .cash-open-panel{max-width:560px} .cash-open-panel .form-actions{justify-content:flex-start} .cash-movement-type-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 16px} .cash-movement-type-picker button{min-height:46px;padding:10px 14px;border-width:1.5px;border-radius:9px;font-weight:600;cursor:pointer} .daily-close-highlight{background:#f0f8d5!important;border-color:#c9dc8f!important} .daily-close-highlight strong{font-size:19px!important} .cash-close-diff{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 0;padding:14px 16px;border-radius:10px;border:1px solid #dfe3dc;background:#fafbf8;color:#586158;font-weight:600} .cash-close-diff strong{font-size:19px;color:inherit} .cash-close-diff.exact{border-color:#cddd9b;background:#f3f8df;color:#557018} .cash-close-diff.over{border-color:#f0cf94;background:#fff3dc;color:#a06d17} .cash-close-diff.under{border-color:#f0b8b0;background:#ffece9;color:#b8493c} @media(max-width:700px){.cash-status-strip{flex-direction:column;align-items:flex-start}.cash-status-strip-actions{width:100%}.cash-status-strip-actions button{flex:1}} /* Agenda (Gestión de clientes) — agosto 2026 */ .agenda-controls{display:grid;gap:16px} .agenda-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px} .agenda-toolbar-nav{display:flex;align-items:center;gap:9px} .agenda-range-label{font-size:14px;min-width:170px} /* Segmentado Día/Semana/Mes: la pestaña activa se distingue por relleno sólido (fondo oscuro + texto blanco), no solo por color — igual convención que .mp-seg-btn en Productos y consumos. */ .agenda-view-switch{display:inline-flex;gap:4px;background:#eef0e9;border-radius:9px;padding:4px} .agenda-view-switch button{border:1px solid transparent;background:transparent;padding:8px 16px;border-radius:7px;font-size:12px;font-weight:bold;color:var(--muted);cursor:pointer;transition:background-color .14s ease,color .14s ease} .agenda-view-switch button:hover:not(.active){background:#e2e5dc;color:var(--ink)} .agenda-view-switch button.active{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 2px 6px rgba(40,45,35,.16)} .agenda-view-switch button:focus-visible{outline:2px solid var(--as-focus-border);outline-offset:2px} /* Resumen del periodo visible (AGENDA-2C-C1): misma franja compacta que .kpi-strip, pero cada tarjeta es ahora un