/* ═══════════════════════════════════════════════════════════════
La Estancia Black — Stylesheet
WAGON Engine · Sistema de gestión
TABLE OF CONTENTS
═══════════════════════════════════════════════════════════════
FOUNDATION
L66 :ROOT VARIABLES
L242 RESETS GLOBALES
L372 @KEYFRAMES
L682 COMPONENTES/UTILIDADES COMUNES
LAYOUT
L2884 SIDEBAR + TOPBAR
L3933 v7.14.0 — LXTopbar Fase 2: Movimientos
L4053 v7.15.0 — LXTopbar Fase 2: Vencimientos
L4195 v7.16.0 — LXTopbar Fase 2: Clientes
L4197 v7.17.0 — LXTopbar Fase 2: Precios
COMPONENTS
L6549 NOTIFICACIONES
L6939 CHAT FLOAT
L7659 MODALES/CHANGELOG
L7872 UPDATE BANNER
L17132 TOTAL / SUBTOTAL number animations
L24687 v7.29.0 — Filter pills junto al título + action-zone a la derecha
PAGES
L7985 DASHBOARD
L8496 STOCK
L9227 MOVIMIENTOS
L9834 TRANSFERENCIAS
L10787 CARGA MASIVA
L11159 VENCIMIENTOS
L11813 CLIENTES
L12856 v7.27.0 — VENCIMIENTOS 2-COLUMN LAYOUT
L13448 COSTOS
L14973 PRECIOS
L15143 CIERRE DE CAJA
L16564 VENTA RAPIDA
L18932 PEDIDO
L24869 v7.30.0 — Dashboard dark chart cards with inner glow
L27334 GRID 40/60 — col izq (search + historial) · col der (carrito)
L27404 PREP STRIP colapsable
L27477 COLLAPSE TOGGLE (chevron — prep form / historial)
L27532 HISTORIAL
L27690 Cart empty state inteligente (con last cargas)
L28652 v7.53.0 — BANNER BORRADOR (info blue)
L28718 v7.60.0 — Suggest header + close button styling
L28762 v7.60.0 — Fix número visible cuando stage está "done"
L28767 v7.60.0 — Stage dots de "active" se ven como "pending" (neutral, no oscuro)
L28948 v7.64.0 — Overlay edición gasto/retiro de caja (cc-edit-egreso-*)
L29065 v7.65.0 — Historial del cliente: edit/delete actions
L29133 v7.68.0 — Nueva Venta del drawer · input qty + unidad inline
L30185 KPI strip (compacto, debajo del hero)
L34729 DRAWER REDISEÑADO con TABS internos
OVERRIDES
L19027 @MEDIA QUERIES
═══════════════════════════════════════════════════════════════ */
/* ═══ 01. :ROOT VARIABLES ═══ */
:root {
/* WAGON Identity 2026 — v7.31.0 Color System */
--char: #1a1410;
/* Variables semánticas v7.12 — reemplazan legacy parch/leather/gold/char */
--paper: #f5efe6;
--paper-2: #ede4d7;
--border-warm: #d9ccba;
--ink: #1a1410;
--ink-2: #2c2219;
--ink-dark: #1f1914;
--accent-warm: #E8663A;
--accent-warm-lt: #F0764A;
--accent-warm-bg: rgba(232, 102, 58, 0.10);
--accent-warm-ln: rgba(232, 102, 58, 0.30);
--ink-82: rgba(26, 20, 16, 0.82);
--ink-70: rgba(26, 20, 16, 0.70);
--ink-50: rgba(26, 20, 16, 0.50);
/* ── v7.31.0 · Semantic Color System ── */
/* Ember — Brand accent (WAGON) */
--c-ember: #E8663A;
--c-ember-hover: #F0764A;
--c-ember-soft: rgba(232,102,58,.10);
--c-ember-line: rgba(232,102,58,.28);
--c-ember-ink: #B84420;
/* Green — Success / Al día / Activo */
--c-green: #22A55A;
--c-green-soft: rgba(34,165,90,.10);
--c-green-line: rgba(34,165,90,.25);
--c-green-ink: #1A7A45;
/* Red — Error / Vencido / Danger */
--c-red: #E05252;
--c-red-soft: rgba(224,82,82,.10);
--c-red-line: rgba(224,82,82,.25);
--c-red-ink: #A83030;
/* Amber — Warning / Pendiente */
--c-amber: #D4882A;
--c-amber-soft: rgba(212,136,42,.10);
--c-amber-line: rgba(212,136,42,.25);
--c-amber-ink: #9A6200;
/* Blue — Info / Neutro / Local tags */
--c-blue: #3B82C4;
--c-blue-soft: rgba(59,130,196,.10);
--c-blue-line: rgba(59,130,196,.25);
--c-blue-ink: #3B82C4;
/* Info Blue — Apple iOS system blue · alertas informativas vibrantes (v7.53.0) */
--c-info: #0A84FF;
--c-info-soft: rgba(10,132,255,.10);
--c-info-line: rgba(10,132,255,.28);
--c-info-ink: #0058B5;
/* Plum — Secondary / Categoría / Local 2 */
--c-plum: #8B5CB8;
--c-plum-soft: rgba(139,92,184,.10);
--c-plum-line: rgba(139,92,184,.25);
--c-plum-ink: #6B3C98;
/* Slate — Neutral / Dim / Desactivado */
--c-slate: rgba(38,38,38,.55);
--c-slate-soft: rgba(38,38,38,.06);
--c-slate-line: rgba(38,38,38,.12);
--c-slate-ink: rgba(38,38,38,.72);
/* Legacy aliases */
--red: #E05252;
--green: #22A55A;
--amber: #D4882A;
--blue: #3B82C4;
--sidebar: 232px;
--topbar: 54px;
--r: 8px;
--r2: 14px;
/* ── v7.26.0 · Escala de radios unificada ── */
--radius-xs: 6px; /* tags, badges, pills pequeños */
--radius-sm: 10px; /* inputs, botones, pills */
--radius-md: 14px; /* sub-cards, items internos, mini-panels */
--radius-lg: 18px; /* cards principales, panels, KPIs */
--radius-xl: 22px; /* modales, shells, contenedores grandes */
--radius-full: 999px; /* avatares, dots, pills circulares */
--r-ctrl: 9px; /* radius unificado inputs+selects+botones */
--sh-r1: 2px 3px 6px rgba(26,20,16,.10); /* sombra principal (peso) */
--sh-r2: 0 1px 2px rgba(26,20,16,.06); /* sombra base suave */
--sh-hl: -1px -1.5px 3px rgba(255,252,248,.80); /* highlight arriba-izq */
--sh-it: inset 0 1px 0 rgba(255,255,255,.65); /* filo interno superior */
--sh-bd: 0 0 0 1px rgba(191,180,170,.28); /* hairline border */
var(--sh-r1), var(--sh-r2), var(--sh-hl), var(--sh-it), var(--sh-bd);
3px 4px 8px rgba(26,20,16,.13), 0 1px 2px rgba(26,20,16,.07),
var(--sh-hl), var(--sh-it), 0 0 0 1px rgba(191,180,170,.35);
3px 4px 10px rgba(26,20,16,.14), 0 1px 2px rgba(26,20,16,.07),
var(--sh-hl), var(--sh-it), 0 0 0 1px rgba(26,20,16,.22);
--sans: "Inter", system-ui, sans-serif;
--serif: "Inter", system-ui, sans-serif;
--display: "Inter", system-ui, sans-serif;
--sans-struct: "Inter", system-ui, sans-serif;
--mono: "Inter", system-ui, sans-serif;
/* ── Cards / Paneles contenedores ── */
--card-bg: #FFFFFF;
--card-bg-alt: var(--paper-2);
--card-border: 1px solid rgba(26, 20, 16, 0.06);
--card-border-thin: 1px solid rgba(26, 20, 16, 0.05);
--card-radius: var(--radius-lg);
/* v7.26.0 — Premium layered shadows */
--card-shadow:
0 0 0 1px rgba(26, 20, 16, 0.04),
0 1px 2px rgba(26, 20, 16, 0.04),
0 4px 12px rgba(26, 20, 16, 0.04),
0 8px 28px rgba(26, 20, 16, 0.03);
--card-shadow-hover:
0 0 0 1px rgba(26, 20, 16, 0.06),
0 2px 4px rgba(26, 20, 16, 0.05),
0 8px 24px rgba(26, 20, 16, 0.07),
0 16px 48px rgba(26, 20, 16, 0.05);
0 0 0 1px rgba(26, 20, 16, 0.03),
0 1px 2px rgba(26, 20, 16, 0.03),
0 2px 8px rgba(26, 20, 16, 0.02);
/* ── Texto sobre superficies oscuras ── */
--text-on-dark: #f0e6d6;
/* ── Fondo de página (body + .page) ── */
--surface-1: var(--paper-2);
/* ── Escala de texto ── */
--t1: #1a1410;
--t2: rgba(26, 20, 16, 0.72);
--t3: rgba(26, 20, 16, 0.52);
--t4: rgba(26, 20, 16, 0.34);
--text-meta: rgba(26, 20, 16, 0.72);
/* ── Líneas / separadores ── */
--line-soft: rgba(110, 83, 56, 0.18);
--line-strong: rgba(110, 83, 56, 0.38);
/* ── Ember (alias) ── */
--ember: var(--c-ember);
--ember-bg: var(--c-ember-soft);
--ember-ln: var(--c-ember-line);
0 2px 8px rgba(26,20,16,0.03);
/* ── Motion ── */
--motion-fast: 0.14s;
--motion-med: 0.22s;
--motion-slow: 0.38s;
--ease-ui: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-spring: cubic-bezier(0.16, 1, 0.30, 1);
--ease-out: cubic-bezier(0.0, 0, 0.2, 1);
/* ── LXMotion · Sistema de animación v7.9.0 ── */
/* Curvas — 4 intenciones */
--lx-curve-enter: cubic-bezier(0.16, 1, 0.3, 1);
--lx-curve-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--lx-d-fast: 180ms;
--lx-d-normal: 280ms;
--lx-d-slow: 420ms;
--lx-d-deliberate: 640ms;
/* Stagger — 3 ritmos */
--lx-stagger-tight: 30ms;
--lx-lift-md: 8px;
--lx-lift-lg: 14px;
}
:root {
--ios-chrome-bg: var(--page);
}
:root { --page: #fbfbfb; }
/* ═══════════════════════════════════════════════════════════════
v7.95.0 · DARK MODE ARCHITECTURE — "Editorial Operational Luxury Dark"
Inspirado en Linear / Apple / Stripe Dark.
Surfaces estratificadas (no shadows), ink suavizado, ember intacto.
Activación: [data-theme="dark"] en o auto via prefers-color-scheme.
═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
/* ── SURFACES (Notion style — tinte sepia cálido sutil) ── */
--floor: #191918; /* body, topbar, sidebar floor */
--surface-1: #1F1F1E; /* card body, #pages */
--surface-2: #252523; /* sidebar items, cards internas */
--surface-3: #2D2D2A; /* modales, drawers, dropdowns */
--surface-4: #363633; /* hover sobre surface-3 */
--surface-overlay: rgba(25, 25, 24, .72); /* modal backdrop con tinte */
/* ── INK (Notion — crema cálido, no blanco neutro) ── */
--ink-primary: #E4E2DE; /* títulos, body — crema sutil */
--ink-secondary: #9B9994; /* labels, captions — gris cálido */
--ink-tertiary: #6B6964; /* meta, timestamps — warm dim */
--ink-disabled: #44423E; /* disabled */
/* Aliases para compatibilidad con sistema actual */
--ink: #E4E2DE;
--ink-2: rgba(228, 226, 222, .82);
--ink-70: rgba(228, 226, 222, .70);
--ink-50: rgba(228, 226, 222, .50);
--ink-82: rgba(228, 226, 222, .82);
/* ── BORDERS (con tinte cálido sutil, no pure white) ── */
--line-soft: rgba(255, 250, 240, .06); /* separadores internos */
--line-medium: rgba(255, 250, 240, .09); /* cards, inputs */
--line-strong: rgba(255, 250, 240, .14); /* hover, focus, active */
--line-focus: rgba(232, 102, 58, .42); /* ember tint para focus */
/* ── ACCENTS (cálidos, mantienen identidad ember) ── */
--c-ember: #E8663A; /* ✓ mismo - perfect en sepia dark */
--c-ember-hover: #F0764A;
--c-ember-soft: rgba(232, 102, 58, .14);
--c-ember-line: rgba(232, 102, 58, .32);
--c-ember-ink: #FFB89A;
--c-green: #4FBE7A; /* warm green */
--c-green-soft: rgba(79, 190, 122, .12);
--c-green-line: rgba(79, 190, 122, .28);
--c-green-ink: #7DD49C;
--c-red: #E07370; /* warm red */
--c-red-soft: rgba(224, 115, 112, .12);
--c-red-line: rgba(224, 115, 112, .28);
--c-red-ink: #FF9590;
--c-amber: #D4992E; /* warm amber */
--c-amber-soft: rgba(212, 153, 46, .14);
--c-amber-line: rgba(212, 153, 46, .30);
--c-amber-ink: #F2BB60;
--c-blue: #6FA9D0; /* warm slate-blue */
--c-blue-soft: rgba(111, 169, 208, .12);
--c-blue-line: rgba(111, 169, 208, .28);
--c-blue-ink: #9BC4DE;
--c-info: #5E9CDD; /* warm info blue */
--c-info-soft: rgba(94, 156, 221, .12);
--c-info-line: rgba(94, 156, 221, .28);
--c-info-ink: #9BC0E8;
--c-plum: #A584C2; /* warm plum */
--c-plum-soft: rgba(165, 132, 194, .12);
--c-plum-line: rgba(165, 132, 194, .28);
--c-plum-ink: #C4A8DA;
--c-slate: rgba(255, 250, 240, .55);
--c-slate-soft: rgba(255, 250, 240, .06);
--c-slate-line: rgba(255, 250, 240, .12);
--c-slate-ink: rgba(255, 250, 240, .72);
/* ── CTA: Lacca Sepia (warm graphite) ── */
--grad-cta: linear-gradient(158deg, #38362F 0%, #2A2825 100%);
--grad-cta-hover: linear-gradient(158deg, #403D35 0%, #322F2B 100%);
--cta-highlight: inset 0 1px 0 rgba(255, 250, 240, .06);
--cta-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .25);
/* ── CONTROLS ── */
--controls-bg: rgba(255, 250, 240, .05);
--controls-bg-hover: rgba(255, 250, 240, .08);
--controls-bg-active: rgba(255, 250, 240, .12);
--controls-border: rgba(255, 250, 240, .07);
/* ── REAL SHADOWS (más sutiles en sepia) ── */
--shadow-card: 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 250, 240, .04);
--shadow-modal: 0 16px 48px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 250, 240, .06);
--shadow-popover: 0 8px 24px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 250, 240, .06);
/* ── PAPER (compat) ── */
--paper: var(--surface-2);
--paper-2: var(--surface-3);
--page: var(--floor);
--char: var(--surface-3);
--border-warm: var(--line-medium);
/* ── ALIASES LEGACY ── */
--red: var(--c-red);
--green: var(--c-green);
--amber: var(--c-amber);
--blue: var(--c-blue);
--ios-chrome-bg: var(--floor);
}
/* ═══ 02. RESETS GLOBALES ═══ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: var(--page);
color: var(--char);
font-family: var(--sans);
font-size: 13px;
line-height: 1.5;
font-feature-settings: "ss01" 1, "cv11" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(232,102,58, 0.18);
border-radius: 999px;
border: 2px solid var(--page);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(232,102,58, 0.38);
}
::placeholder {
color: var(--ink-70);
}
.lf input::placeholder {
color: rgba(240, 230, 214, 0.28);
}
a {
color: inherit;
text-decoration: none;
}
.mono {
font-family: var(--mono);
font-weight: 400;
font-feature-settings: "tnum" 1, "zero" 1;
font-variant-numeric: tabular-nums;
}
.modal-body::-webkit-scrollbar {
width: 6px;
}
.modal-body::-webkit-scrollbar-track {
background: transparent;
}
.modal-body::-webkit-scrollbar-thumb {
background: rgba(128, 103, 79, 0.45);
border-radius: 999px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
background: rgba(128, 103, 79, 0.62);
}
.cf-body::-webkit-scrollbar { width: 6px; }
.cf-body::-webkit-scrollbar-thumb { background: rgba(26, 20, 16, 0.16); border-radius: 999px; }
.cf-body::-webkit-scrollbar-thumb:hover { background: rgba(26, 20, 16, 0.28); }
.cf-input::placeholder { color: rgba(26, 20, 16, 0.36); }
html,
body{
height: 100%;
overflow: hidden;
background-color: var(--ios-chrome-bg);
}
.pr-search-input::placeholder { color:#766960; }
.co-search-input::placeholder { color: #B5ADA6; }
.tb-nav-dropdown::-webkit-scrollbar { display: none; }
.tb-nav-dropdown { scrollbar-width: none; }
.sk-search-input::placeholder { color: rgba(26,20,16,0.35); }
.trf-search input::placeholder,
.trf-filter-search input::placeholder {
color: rgba(26, 20, 16, 0.32);
}
.trf-prod-list::-webkit-scrollbar { width: 6px; }
.trf-prod-list::-webkit-scrollbar-thumb { background: rgba(26, 20, 16, 0.18); border-radius: 999px; }
#trf-obs::placeholder { color: rgba(26, 20, 16, 0.32); }
.trf-history::-webkit-scrollbar { width: 6px; }
.trf-history::-webkit-scrollbar-thumb { background: rgba(26, 20, 16, 0.18); border-radius: 999px; }
#page-cierre .cc3-arqueo-input::placeholder { color: rgba(26, 20, 16, 0.32); }
#page-cierre .cc3-nota-input::placeholder {
color: rgba(26, 20, 16, 0.32);
font-style: italic;
}
#page-cierre .cc3-ventas-scroll::-webkit-scrollbar {
width: 8px;
}
#page-cierre .cc3-ventas-scroll::-webkit-scrollbar-track {
background: transparent;
}
#page-cierre .cc3-ventas-scroll::-webkit-scrollbar-thumb {
background: rgba(26, 20, 16, 0.10);
border-radius: 999px;
border: 2px solid #FFFFFF;
}
#page-cierre .cc3-ventas-scroll::-webkit-scrollbar-thumb:hover {
background: rgba(26, 20, 16, 0.22);
}
#page-cierre .cc3-anatomy-row-2col .cc3-anatomy-ranking > .cc3-ranking-body::-webkit-scrollbar {
width: 8px;
}
#page-cierre .cc3-anatomy-row-2col .cc3-anatomy-ranking > .cc3-ranking-body::-webkit-scrollbar-thumb {
background: rgba(26, 20, 16, 0.10);
border-radius: 999px;
border: 2px solid #FFFFFF;
}
.mv2-search-input::placeholder { color: rgba(26, 20, 16, 0.32); }
.v3-tb-search-input::placeholder {
color: rgba(26,20,16,.32);
}
#mov-inspector .mvd-doc::-webkit-scrollbar { width: 6px; }
#mov-inspector .mvd-doc::-webkit-scrollbar-thumb { background: rgba(26,20,16,.14); border-radius: 999px; }
*, *::before, *::after {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.tb-action-zone .sk-search-input::placeholder,
.tb-action-zone .mv2-search-input::placeholder { color: rgba(26,20,16,.38); }
.vr-search-input::placeholder { color:rgba(26,20,16,.35); }
.vr-cat-pills::-webkit-scrollbar { display:none; }
.vr-cli-search-input::placeholder { color:rgba(26,20,16,.36); }
/* ═══ 04. @KEYFRAMES ═══ */
@keyframes venc-sonar {
0% { transform: scale(1); opacity: .7; }
100% { transform: scale(3.2); opacity: 0; }
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.25;
}
}
@keyframes page-enter {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
@keyframes page-leave {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-5px); }
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlay-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: scale(0.95) translateY(14px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes modal-out { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.96) translateY(8px); } }
@keyframes tk-progress {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
@keyframes badge-pulse {
0% {
box-shadow: 0 0 0 0 rgba(224,82,82, 0.7);
}
60% {
box-shadow: 0 0 0 7px rgba(224,82,82, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(224,82,82, 0);
}
}
@keyframes nav-shake {
0%,
100% {
transform: translateX(0);
}
25% {
transform: translateX(-3px);
}
75% {
transform: translateX(3px);
}
}
@keyframes chat-toast-in {
from {
transform: translateX(20px) translateY(10px);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
@keyframes urgente-shake-in {
0% { transform: translateX(-4px); }
20% { transform: translateX(4px); }
40% { transform: translateX(-3px); }
60% { transform: translateX(3px); }
80% { transform: translateX(-1px); }
100%{ transform: translateX(0); }
}
@keyframes urgente-pulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(0.85);
}
}
@keyframes urgente-pulse {
0% { box-shadow: 0 0 0 0 rgba(255,68,34,.9); transform: scale(1); }
50% { box-shadow: 0 0 0 8px rgba(255,68,34,0); transform: scale(1.2); }
100% { box-shadow: 0 0 0 0 rgba(255,68,34,0); transform: scale(1); }
}
@keyframes vrPriceBump {
0% { transform: translateY(6px); opacity: 0.4; }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes vrPriceBump {
0% { transform: translateY(6px); opacity: 0.4; }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes updateSlideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes updatePulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(232,102,58, 0.4);
}
50% {
box-shadow: 0 0 0 8px rgba(232,102,58, 0);
}
}
@keyframes urgente-bar-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .5; }
}
@keyframes urgente-bar-slide {
0% { background-position: 0% 0%; }
100% { background-position: 200% 0%; }
}
@keyframes ct-emerge {
0% {
transform: translateY(20px) scale(0.92);
opacity: 0;
filter: blur(2px);
}
50% { opacity: 1; filter: blur(0); }
100% {
transform: translateY(0) scale(1);
opacity: 1;
filter: blur(0);
}
}
@keyframes ct-out {
from { transform: translateY(0) scale(1); opacity: 1; }
to { transform: translateY(8px) scale(0.96); opacity: 0; }
}
@keyframes ct-pulse-btn {
0%, 100% {
box-shadow:
0 1px 2px rgba(26, 20, 16, 0.10),
0 8px 24px rgba(26, 20, 16, 0.20);
}
50% {
box-shadow:
0 1px 2px rgba(26, 20, 16, 0.10),
0 12px 36px rgba(232,102,58, 0.45),
0 0 0 6px rgba(232,102,58, 0.16);
}
}
@keyframes ct-avatar-ping {
0% { box-shadow: 0 0 0 0 rgba(232,102,58, 0.45); }
100% { box-shadow: 0 0 0 8px rgba(232,102,58, 0); }
}
@keyframes av-panel-in {
from {
opacity: 0;
transform: translateY(8px) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes pulse-green {
0%,100% { opacity:1; transform:scale(1); }
50% { opacity:.35; transform:scale(1.5); }
}
@keyframes ccFxCheck { to { stroke-dashoffset: 0; } }
@keyframes sbInvHeadBloom {
0% {
transform: translateY(2px) scale(.992);
background: rgba(232,102,58, 0.0);
box-shadow: 0 0 0 0 rgba(232,102,58,0);
}
55% {
transform: translateY(0) scale(1);
background: rgba(232,102,58, 0.09);
box-shadow: 0 0 0 5px rgba(232,102,58,.08);
}
100% {
transform: translateY(0) scale(1);
background: rgba(255, 255, 255, 0.04);
box-shadow: 0 0 0 0 rgba(232,102,58,0);
}
}
@keyframes sbInvItemReveal {
0% { opacity: 0; transform: translateY(-4px) scale(.985); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cf-badge-pop {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
@keyframes nuevo-pop {
from { transform: scale(0) translateY(4px); opacity: 0; }
to { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes dashClockDigitFlip {
0% { opacity: .2; transform: translateY(7px) rotateX(-62deg); filter: blur(1px); }
54% { opacity: .95; transform: translateY(-1px) rotateX(12deg); filter: blur(0); }
100% { opacity: 1; transform: translateY(0) rotateX(0deg); filter: blur(0); }
}
@keyframes vncPulseRed {
0% { box-shadow: 0 0 0 0 rgba(224,82,82, 0.7); }
70% { box-shadow: 0 0 0 7px rgba(224,82,82, 0); }
100% { box-shadow: 0 0 0 0 rgba(224,82,82, 0); }
}
@keyframes vncPulseAmber {
0% { box-shadow: 0 0 0 0 rgba(200, 158, 42, 0.7); }
70% { box-shadow: 0 0 0 7px rgba(200, 158, 42, 0); }
100% { box-shadow: 0 0 0 0 rgba(200, 158, 42, 0); }
}
@keyframes vncPulseBoth {
0% { background: #E05252; box-shadow: 0 0 0 0 rgba(224,82,82, 0.75); }
25% { background: #E05252; box-shadow: 0 0 0 7px rgba(224,82,82, 0); }
50% { background: #C89E2A; box-shadow: 0 0 0 0 rgba(200, 158, 42, 0.75); }
75% { background: #C89E2A; box-shadow: 0 0 0 7px rgba(200, 158, 42, 0); }
100% { background: #E05252; box-shadow: 0 0 0 0 rgba(224,82,82, 0); }
}
@keyframes engine-shimmer {
0% { background-position: 200% center; }
50% { background-position: 0% center; }
100% { background-position: 200% center; }
}
@keyframes trfDelBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
@keyframes ccNotifDotPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(232,102,58, 0.16); }
50% { box-shadow: 0 0 0 6px rgba(232,102,58, 0.06); }
}
@keyframes cc3HeroDot {
0%, 100% { box-shadow: 0 0 0 2px rgba(34,165,90, 0.16); }
50% { box-shadow: 0 0 0 5px rgba(34,165,90, 0.04); }
}
@keyframes cc3HeroDotUrg {
0%, 100% { box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.18); }
50% { box-shadow: 0 0 0 6px rgba(230, 126, 34, 0.04); }
}
@keyframes cc3ActionDot {
0%, 100% { box-shadow: 0 0 0 2px rgba(232,102,58, 0.20); }
50% { box-shadow: 0 0 0 5px rgba(232,102,58, 0.06); }
}
@keyframes cc3CompBarIn {
from { transform: scaleY(0); opacity: 0; }
to { transform: scaleY(1); opacity: 1; }
}
@keyframes cc3CompValIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes cc3CompTooltipIn {
from { opacity: 0; transform: translate(-50%, -98%); }
to { opacity: 1; transform: translate(-50%, -100%); }
}
@keyframes v3-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes v3-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(192,57,43,.12); }
50% { box-shadow: 0 0 0 7px rgba(192,57,43,.04); }
}
@keyframes v3-dd-in {
from { opacity: 0; transform: translateY(-6px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lx-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes lx-fade-up {
from { opacity: 0; transform: translateY(var(--lx-lift-md)); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes lx-scale-in {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
@keyframes lx-bar-rise {
from { transform: scaleY(0); }
to { transform: scaleY(1); }
}
@keyframes lx-stroke-draw {
from { stroke-dashoffset: 100; opacity: 0; }
to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes lx-bell-ring {
0% { transform: rotate(0deg); }
10% { transform: rotate(12deg); }
25% { transform: rotate(-10deg); }
40% { transform: rotate(8deg); }
55% { transform: rotate(-5deg); }
70% { transform: rotate(3deg); }
85% { transform: rotate(-1deg); }
100% { transform: rotate(0deg); }
}
@keyframes lx-notif-drop {
from { opacity: 0; transform: translateY(-10px) scale(.97); transform-origin: top right; }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lx-tb-actions-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ═══ 05. COMPONENTES/UTILIDADES COMUNES ═══ */
[hidden] {
display: none !important;
}
#app {
display: none;
height: 100vh;
overflow: hidden;
}
.wagon-sig {
display: flex;
flex-direction: column;
gap: 4px;
}
#nav-chrome-switch-input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.page {
display: none !important;
padding: 46px 46px 80px !important;
background: var(--page);
}
.page.active {
display: block !important;
animation: page-enter 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.page.leaving {
display: block !important;
animation: page-leave 0.15s ease forwards;
pointer-events: none;
}
.ph {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 24px;
gap: 12px;
flex-wrap: wrap;
padding-bottom: 18px;
border-bottom: 1px solid rgba(232,102,58, 0.12);
}
.btn-prime {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 11px 22px;
background: #1a1410;
color: rgba(240, 228, 204, 0.88);
border: none;
border-left: 2px solid rgba(232,102,58, 0.50);
font-family: var(--mono);
font-size: 8.5px;
font-weight: 400;
letter-spacing: 0.32em;
text-transform: uppercase;
cursor: pointer;
border-radius: 4px;
white-space: nowrap;
position: relative;
overflow: hidden;
transition:
background 0.22s ease,
border-color 0.22s ease,
box-shadow 0.22s ease;
}
.btn-prime::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(232,102,58,0.16) 40%,
rgba(232,102,58,0.08) 60%,
transparent 100%
);
transform: translateX(-160%);
transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);
pointer-events: none;
}
.btn-prime:hover {
background: #120e0b;
border-left-color: rgba(232,102,58, 0.88);
box-shadow: 0 6px 22px rgba(26, 20, 16, 0.16);
}
.btn-prime:hover::before { transform: translateX(160%); }
.btn-prime:active {
background: #0c0a07;
box-shadow: none;
}
.btn-prime svg { flex-shrink: 0; }
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 18px;
background: transparent;
color: rgba(26, 20, 16, 0.58);
border: 1px solid rgba(26, 20, 16, 0.16);
font-family: var(--mono);
font-size: 8.5px;
font-weight: 400;
letter-spacing: 0.28em;
text-transform: uppercase;
cursor: pointer;
border-radius: 4px;
white-space: nowrap;
transition:
color 0.18s ease,
border-color 0.18s ease,
background 0.18s ease;
}
.btn-ghost:hover {
border-color: rgba(232,102,58, 0.48);
background: rgba(232,102,58, 0.04);
color: rgba(26, 20, 16, 0.88);
}
.btn-ghost:active { background: rgba(232,102,58, 0.08); }
.btn-ghost svg { flex-shrink: 0; }
:where(input, select, textarea):focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--ember-bg);
border-color: var(--accent-warm);
}
table {
width: 100%;
border-collapse: collapse;
}
td {
padding: 11px 14px;
border-bottom: 1px solid rgba(232,102,58, 0.07);
color: var(--ink-82);
vertical-align: middle;
}
tr:last-child td {
border-bottom: none;
}
tr:hover td {
background: rgba(232,102,58, 0.03);
}
.empty {
text-align: center;
padding: 44px;
color: var(--ink-82);
font-size: 12px;
}
.tag {
display: inline-block;
padding: 2px 8px;
font-size: 9px;
letter-spacing: 0.08em;
font-weight: 600;
text-transform: uppercase;
border-radius: 3px;
font-family: var(--mono);
}
.tag-l1 {
background: var(--c-blue-soft);
color: var(--c-blue-ink);
border: 1px solid var(--c-blue-line);
}
.tag-l2 {
background: var(--c-plum-soft);
color: var(--c-plum-ink);
border: 1px solid var(--c-plum-line);
}
#page-chat {
display: none;
padding: 0;
}
#page-chat.active {
display: flex;
flex-direction: column;
height: 100%;
}
#chat-typing {display:none;align-self:flex-start;align-items:center;gap:7px;padding:2px 0 6px}
#chat-typing.visible {display:flex}
#chat-pinned-bar {display:none;padding:7px 20px;background:var(--accent-warm-bg);border-bottom:1.5px solid var(--accent-warm-ln);align-items:center;gap:10px;cursor:pointer;flex-shrink:0}
#chat-pinned-bar.visible {display:flex}
#chat-reply-preview {display:none;padding:8px 14px 6px;background:var(--paper-2);border-top:1.5px solid var(--border-warm);align-items:center;gap:8px}
#chat-reply-preview.visible {display:flex}
#chat-prod-picker {position:absolute;bottom:100%;left:0;right:0;z-index:200;background:var(--paper);border:1.5px solid var(--border-warm);border-radius:var(--r2) var(--r2) 0 0;box-shadow:0 -8px 24px rgba(26,20,16,.12);max-height:240px;overflow-y:auto;display:none}
#chat-prod-picker.visible {display:block}
#chat-prod-picker-search {width:100%;padding:10px 14px;border:none;border-bottom:1px solid var(--border-warm);background:var(--paper-2);color:var(--char);font-family:var(--sans);font-size:12px;outline:none}
#modal-overlay {
position: fixed;
inset: 0;
background: rgba(35, 29, 26, 0.52);
backdrop-filter: blur(2px);
z-index: 9000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
#modal-overlay.open {
display: flex;
animation: overlay-in 0.15s ease both;
}
#modal-overlay.closing {
display: flex;
animation: overlay-out 0.18s ease forwards;
pointer-events: none;
}
#modal-overlay.open .modal-entering {
animation: modal-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#modal-overlay.closing .modal {
animation: modal-out 0.16s ease forwards;
}
#modal-overlay.stock-fullscreen {
padding: clamp(12px, 2.2vw, 24px);
}
#m-stock:not(.lx-modal) {
width: min(980px, 100%);
max-width: 980px;
max-height: min(92vh, 980px);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.fg {
margin-bottom: 14px;
}
.fg label {
display: block;
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #766960;
font-weight: 500;
font-family: var(--sans);
margin-bottom: 6px;
}
.fg input,
.fg select,
.fg textarea {
width: 100%;
color: var(--char);
font-family: var(--sans);
font-size: 13px;
outline: none;
transition:
border-color 0.15s,
box-shadow 0.15s,
background 0.15s;
}
.fg input,
.fg select{
color-scheme: light;
min-height: 44px;
background: #fff;
border: 1.5px solid #E5E0DC;
padding: 10px 12px;
border-radius: 10px;
box-shadow: none;
}
.fg textarea{
color-scheme: light;
background: #fff;
border: 1.5px solid #E5E0DC;
padding: 11px 12px;
border-radius: 10px;
box-shadow: none;
resize: vertical;
min-height: 118px;
}
.fg input:focus,
.fg select:focus,
.fg textarea:focus {
border-color: #E8663A;
background: #fff;
box-shadow: 0 0 0 3px rgba(232,102,58, 0.12);
}
.fg select option {
background: var(--paper);
}
.fg select option:checked {
background: var(--accent-warm);
color: #fff;
}
.fg .hint {
font-size: 10px;
color: var(--ink-82);
margin-top: 6px;
font-family: var(--mono);
line-height: 1.45;
}
.qty-row {
display: flex;
gap: 8px;
}
.qty-row input {
flex: 1;
}
.qty-row select {
width: 112px;
flex-shrink: 0;
}
/* ─── KEYFRAMES GLOBALES ─── */
/* Toast container: spring desde arriba-derecha */
@keyframes tk-in {
0% { opacity: 0; transform: translateX(28px) translateY(-6px) scale(.94); }
60% { opacity: 1; transform: translateX(-3px) translateY(1px) scale(1.01); }
80% { transform: translateX(1px) translateY(0) scale(.995); }
100% { opacity: 1; transform: none; }
}
/* Toast salida: colapsa hacia arriba */
@keyframes tk-out {
0% { opacity: 1; transform: none; max-height: 120px; margin-bottom: 0; padding-top: 13px; padding-bottom: 13px; }
40% { opacity: 0; transform: translateX(18px) scale(.95); }
100% { opacity: 0; transform: translateX(20px); max-height: 0; margin-bottom: -8px; padding-top: 0; padding-bottom: 0; }
}
/* Acento izquierdo: dibuja de arriba a abajo */
@keyframes tk-accent-draw {
from { clip-path: inset(0 0 100% 0); }
to { clip-path: inset(0 0 0% 0); }
}
/* Ícono: pop con rebote */
@keyframes tk-icon-pop {
0% { opacity: 0; transform: scale(0.4) rotate(-8deg); }
55% { opacity: 1; transform: scale(1.18) rotate(3deg); }
75% { transform: scale(0.94) rotate(-1deg); }
100% { transform: scale(1) rotate(0); }
}
/* Flash de brillo en el ícono */
@keyframes tk-icon-flash {
0% { opacity: 0; }
30% { opacity: 1; }
100% { opacity: 0; }
}
/* Label: sube y aparece */
@keyframes tk-label-in {
from { opacity: 0; transform: translateY(5px); letter-spacing: .35em; }
to { opacity: 1; transform: none; letter-spacing: .2em; }
}
/* Mensaje: sube y aparece */
@keyframes tk-msg-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
/* Botón cerrar: fade */
@keyframes tk-close-in {
from { opacity: 0; transform: scale(.6) rotate(-45deg); }
to { opacity: 1; transform: none; }
}
/* Barra de progreso: shrink desde izq */
@keyframes tk-progress-run {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
/* Barra shimmer */
@keyframes tk-progress-shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
/* Panel: spring desde derecha */
@keyframes np-slide-in {
0% { opacity: 0; transform: translateX(32px); }
55% { opacity: 1; transform: translateX(-4px); }
80% { transform: translateX(1px); }
100% { opacity: 1; transform: none; }
}
/* Backdrop: fade */
@keyframes np-backdrop-in {
from { opacity: 0; backdrop-filter: blur(0); }
to { opacity: 1; backdrop-filter: blur(3px); }
}
/* Panel header: baja desde arriba */
@keyframes np-head-in {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: none; }
}
/* Título Fraunces: fade + ligero scale */
@keyframes np-title-in {
from { opacity: 0; transform: translateX(-8px) scale(.97); filter: blur(2px); }
to { opacity: 1; transform: none; filter: blur(0); }
}
/* Badge count: pop */
@keyframes np-badge-pop {
0% { opacity: 0; transform: scale(0) translateY(4px); }
65% { transform: scale(1.2) translateY(-1px); }
100% { opacity: 1; transform: none; }
}
/* Filter pills: cada pill entra desde abajo */
@keyframes np-pill-in {
from { opacity: 0; transform: translateY(8px) scale(.9); }
to { opacity: 1; transform: none; }
}
/* Item: entra desde la derecha con rebote */
@keyframes np-item-in {
0% { opacity: 0; transform: translateX(16px); }
60% { opacity: 1; transform: translateX(-2px); }
100% { opacity: 1; transform: none; }
}
/* Dot interno del item: pop */
@keyframes np-dot-pop {
0% { transform: scale(0) rotate(-12deg); opacity: 0; }
60% { transform: scale(1.15) rotate(3deg); opacity: 1; }
100% { transform: none; opacity: 1; }
}
/* Eyebrow del item */
@keyframes np-eyebrow-in {
from { opacity: 0; transform: translateX(10px); letter-spacing: .32em; }
to { opacity: 1; transform: none; letter-spacing: .2em; }
}
/* Título del item */
@keyframes np-item-title-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
/* Detalle del item */
@keyframes np-item-detail-in {
from { opacity: 0; transform: translateY(3px); }
to { opacity: 1; transform: none; }
}
/* Footer del item (time + CTA) */
@keyframes np-item-footer-in {
from { opacity: 0; transform: translateY(2px); }
to { opacity: 1; transform: none; }
}
/* Unread dot: pulso continuo */
@keyframes np-unread-pulse {
0%, 100% { box-shadow: 0 0 0 2px rgba(232,102,58,.20); transform: scale(1); }
50% { box-shadow: 0 0 0 5px rgba(232,102,58,.0); transform: scale(1.1); }
}
/* Badge topbar: pop al recibir */
@keyframes badge-pop {
0% { transform: scale(1); }
40% { transform: scale(1.4); }
70% { transform: scale(.88); }
100% { transform: scale(1); }
}
/* Bell ring mejorado */
@keyframes bell-ring {
0% { transform: rotate(0) scale(1); }
8% { transform: rotate(-18deg) scale(1.08); }
18% { transform: rotate(14deg) scale(1.06); }
28% { transform: rotate(-10deg) scale(1.04); }
38% { transform: rotate(7deg) scale(1.02); }
48% { transform: rotate(-4deg) scale(1.01); }
60% { transform: rotate(2deg); }
100% { transform: rotate(0) scale(1); }
}
/* Empty state: flota suavemente */
@keyframes np-empty-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* ── TOAST CONTAINER ── */
#toast-c {
position: fixed;
top: 20px;
right: 20px;
left: auto;
transform: none;
z-index: 99999;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
width: 340px;
max-width: calc(100vw - 24px);
align-items: stretch;
}
/* ── TOAST BASE ── */
.tk {
pointer-events: auto;
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 13px 14px 16px 18px;
background: linear-gradient(158deg, #201810 0%, #0e0b07 100%);
border: 1px solid rgba(255,255,255,.07);
border-radius: 16px;
box-shadow:
0 20px 50px rgba(8,5,2,.60),
0 6px 16px rgba(8,5,2,.35),
0 1px 0 rgba(255,255,255,.05) inset,
0 -1px 0 rgba(0,0,0,.4) inset;
overflow: hidden;
cursor: default;
animation: tk-in .55s cubic-bezier(.16,1,.3,1) both;
transition: transform .22s cubic-bezier(.16,1,.3,1),
box-shadow .22s ease;
}
.tk:hover {
transform: translateX(-4px) translateY(-1px);
box-shadow:
0 28px 60px rgba(8,5,2,.70),
0 8px 20px rgba(8,5,2,.40),
0 1px 0 rgba(255,255,255,.06) inset;
}
.tk.removing {
animation: tk-out .32s cubic-bezier(.4,0,1,1) forwards;
pointer-events: none;
}
/* Acento izquierdo dibujado */
.tk::before {
content: "";
position: absolute;
left: 0; top: 0;
width: 3px;
height: 100%;
border-radius: 16px 0 0 16px;
background: rgba(255,255,255,.15);
clip-path: inset(0 0 100% 0);
animation: tk-accent-draw .45s .08s cubic-bezier(.16,1,.3,1) forwards;
}
/* ── TOAST ICON ── */
.tk-icon {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.07);
margin-top: 1px;
position: relative;
overflow: hidden;
animation: tk-icon-pop .5s .06s cubic-bezier(.16,1,.3,1) both;
}
.tk-icon svg {
width: 14px; height: 14px;
position: relative; z-index: 1;
}
/* Shimmer de brillo post-pop */
.tk-icon::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(130deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
background-size: 200% 100%;
animation: tk-icon-flash .5s .2s ease forwards;
opacity: 0;
}
/* ── TOAST BODY ── */
.tk-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.tk-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(255,255,255,.30);
line-height: 1;
animation: tk-label-in .4s .12s cubic-bezier(.16,1,.3,1) both;
}
.tk-msg {
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,.88);
line-height: 1.4;
word-break: break-word;
animation: tk-msg-in .42s .18s cubic-bezier(.16,1,.3,1) both;
}
/* ── TOAST CLOSE ── */
.tk-close {
flex-shrink: 0;
width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
color: rgba(255,255,255,.20);
border-radius: 7px;
margin-top: 2px;
transition: color .15s, background .15s, transform .15s;
animation: tk-close-in .35s .26s cubic-bezier(.16,1,.3,1) both;
}
.tk-close:hover {
color: rgba(255,255,255,.85);
background: rgba(255,255,255,.09);
transform: scale(1.1) rotate(90deg);
}
.tk-close svg { width: 11px; height: 11px; }
/* ── PROGRESS BAR ── */
.tk-progress {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2.5px;
background: rgba(255,255,255,.04);
}
.tk-progress-bar {
height: 100%;
width: 100%;
transform-origin: left;
background: rgba(255,255,255,.22);
background-image: linear-gradient(
90deg,
rgba(255,255,255,.1) 0%,
rgba(255,255,255,.35) 50%,
rgba(255,255,255,.1) 100%
);
background-size: 200% 100%;
animation:
tk-progress-run var(--tk-life, 3500ms) .3s linear forwards,
tk-progress-shimmer 2.5s 1s ease-in-out infinite;
}
/* ── TOAST TYPES ── */
.tk.ok::before { background: #22A55A; }
.tk.ok .tk-icon { background: rgba(34,165,90,.16); color: #22A55A; }
.tk.ok .tk-icon::after { background-image: linear-gradient(130deg, transparent 30%, rgba(34,165,90,.45) 50%, transparent 70%); }
.tk.ok .tk-label { color: rgba(34,165,90,.65); }
.tk.ok .tk-progress-bar { background: #22A55A; background-image: linear-gradient(90deg, #1A8C45 0%, #22A55A 50%, #1A8C45 100%); }
.tk.er::before { background: #E05252; }
.tk.er .tk-icon { background: rgba(224,82,82,.16); color: #E05252; }
.tk.er .tk-icon::after { background-image: linear-gradient(130deg, transparent 30%, rgba(224,82,82,.45) 50%, transparent 70%); }
.tk.er .tk-label { color: rgba(224,82,82,.65); }
.tk.er .tk-progress-bar { background: #E05252; background-image: linear-gradient(90deg, #b83e3e 0%, #E05252 50%, #b83e3e 100%); }
.tk.wn::before { background: #D4882A; }
.tk.wn .tk-icon { background: rgba(212,136,42,.16); color: #D4882A; }
.tk.wn .tk-icon::after { background-image: linear-gradient(130deg, transparent 30%, rgba(212,136,42,.45) 50%, transparent 70%); }
.tk.wn .tk-label { color: rgba(212,136,42,.65); }
.tk.wn .tk-progress-bar { background: #D4882A; background-image: linear-gradient(90deg, #a86820 0%, #D4882A 50%, #a86820 100%); }
.tk.inf::before { background: rgba(255,255,255,.20); }
.tk.inf .tk-icon { background: rgba(255,255,255,.07); color: rgba(255,255,255,.50); }
.tk.inf .tk-label { color: rgba(255,255,255,.28); }
.tk.inf .tk-progress-bar { background: rgba(255,255,255,.22); }
/* ── TOPBAR NOTIF BUTTON ── */
.tb-notif-btn:hover {
background: rgba(26,20,16,.05);
border-color: rgba(26,20,16,.18);
color: #1A1410;
transform: translateY(-1px);
}
.tb-notif-btn.ringing {
animation: bell-ring .65s cubic-bezier(.36,.07,.19,.97);
}
/* ── BADGE ── */
/* ── NOTIF BACKDROP ── */
.notif-backdrop {
position: fixed;
inset: 0;
background: rgba(26,20,16,.20);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 8998;
cursor: default;
animation: np-backdrop-in .28s ease both;
}
/* ── NOTIF PANEL ── */
.notif-panel {
position: fixed;
top: 0; right: 0; bottom: 0;
width: 360px;
max-width: calc(100vw - 16px);
background: #fdfcfb;
border-left: 1px solid rgba(26,20,16,.08);
box-shadow:
-20px 0 60px rgba(26,20,16,.14),
-6px 0 16px rgba(26,20,16,.07);
z-index: 8999;
display: flex;
flex-direction: column;
overflow: hidden;
animation: np-slide-in .48s cubic-bezier(.16,1,.3,1) both;
}
.notif-mark-all-btn {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: #766960;
background: transparent;
border: 1px solid rgba(26,20,16,.10);
border-radius: 8px;
padding: 5px 10px;
cursor: pointer;
white-space: nowrap;
transition: border-color .15s, color .15s, background .15s, transform .15s;
flex-shrink: 0;
animation: np-badge-pop .4s .22s cubic-bezier(.16,1,.3,1) both;
}
.notif-mark-all-btn:hover {
border-color: #1A1410;
color: #1A1410;
background: rgba(26,20,16,.04);
transform: translateY(-1px);
}
.notif-filter-pill {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: #766960;
background: rgba(26,20,16,.04);
border: 1px solid rgba(26,20,16,.07);
border-radius: 8px;
padding: 5px 12px;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: background .15s, color .15s, border-color .15s, transform .18s;
/* stagger via nth-child */
animation: np-pill-in .38s cubic-bezier(.16,1,.3,1) both;
}
.notif-filter-pill:nth-child(1) { animation-delay: .14s; }
.notif-filter-pill:nth-child(2) { animation-delay: .18s; }
.notif-filter-pill:nth-child(3) { animation-delay: .22s; }
.notif-filter-pill:nth-child(4) { animation-delay: .26s; }
.notif-filter-pill:hover {
background: rgba(26,20,16,.07);
color: #3a3128;
border-color: rgba(26,20,16,.14);
transform: translateY(-1px);
}
.notif-filter-pill.on {
background: #1A1410;
color: rgba(255,255,255,.90);
border-color: #1A1410;
transform: none;
}
/* ── NOTIF LIST ── */
.notif-list::-webkit-scrollbar { width: 5px; }
.notif-list::-webkit-scrollbar-thumb {
background: rgba(26,20,16,.10);
border-radius: 5px;
}
/* ── GROUP LABEL ── */
.notif-group-label {
display: block;
font-family: var(--mono);
font-size: 8.5px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(26,20,16,.28);
padding: 14px 20px 6px;
pointer-events: none;
}
/* ── NOTIF ITEM ── */
.notif-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 13px 18px 13px 20px;
cursor: pointer;
position: relative;
border-left: 2.5px solid transparent;
transition: background .16s ease;
/* stagger por índice --i */
animation: np-item-in .44s cubic-bezier(.16,1,.3,1)
calc(.28s + var(--i, 0) * 0.05s) both;
}
.notif-item:hover { background: rgba(26,20,16,.03); }
.notif-item.unread {
background: rgba(232,102,58,.025);
border-left-color: #E8663A;
}
.notif-item.unread:hover { background: rgba(232,102,58,.045); }
/* ── ITEM: DOT ICONO ── */
.notif-item-dot {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 10px;
background: rgba(26,20,16,.05);
display: flex; align-items: center; justify-content: center;
margin-top: 1px;
font-size: 13px;
line-height: 1;
transition: transform .2s cubic-bezier(.16,1,.3,1);
animation: np-dot-pop .45s cubic-bezier(.16,1,.3,1)
calc(.32s + var(--i, 0) * 0.05s) both;
}
.notif-item:hover .notif-item-dot { transform: scale(1.08) rotate(-3deg); }
.notif-item[data-tipo="vencimiento"] .notif-item-dot { background: rgba(224,82,82,.10); }
.notif-item[data-tipo="stock"] .notif-item-dot { background: rgba(212,136,42,.10); }
.notif-item[data-tipo="fidelizacion"] .notif-item-dot { background: rgba(34,165,90,.10); }
.notif-item[data-tipo="sistema"] .notif-item-dot { background: rgba(26,20,16,.07); }
.notif-item[data-tipo="transferencia"].notif-item-dot { background: rgba(26,20,16,.06); }
.notif-item[data-tipo="vencimiento"] .notif-item-dot::before { content: "⚠"; font-size: 12px; }
.notif-item[data-tipo="stock"] .notif-item-dot::before { content: "📦"; font-size: 11px; }
.notif-item[data-tipo="fidelizacion"] .notif-item-dot::before { content: "★"; font-size: 12px; color: #22A55A; }
.notif-item[data-tipo="transferencia"].notif-item-dot::before { content: "↗"; font-size: 14px; color: #766960; font-weight: 700; }
.notif-item[data-tipo="sistema"] .notif-item-dot::before { content: "⚙"; font-size: 12px; color: #766960; }
.notif-item[data-tipo="cobranza"] .notif-item-dot { background: rgba(212,136,42,.10); }
.notif-item[data-tipo="cobranza"] .notif-item-dot::before { content: "🏦"; font-size: 11px; }
.notif-item[data-tipo="cobranza"] .notif-item-eyebrow { color: #D4882A; }
/* ── ITEM BODY ── */
.notif-item-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.notif-item-eyebrow {
font-family: var(--mono);
font-size: 8.5px;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: #766960;
line-height: 1;
margin-bottom: 3px;
animation: np-eyebrow-in .38s cubic-bezier(.16,1,.3,1)
calc(.34s + var(--i, 0) * 0.05s) both;
}
.notif-item[data-tipo="vencimiento"] .notif-item-eyebrow { color: #E8663A; }
.notif-item[data-tipo="stock"] .notif-item-eyebrow { color: #D4882A; }
.notif-item-title {
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
color: #1A1410;
line-height: 1.35;
animation: np-item-title-in .38s cubic-bezier(.16,1,.3,1)
calc(.38s + var(--i, 0) * 0.05s) both;
}
.notif-item.read .notif-item-title {
font-weight: 500;
color: #3a3128;
}
.notif-item-detail {
font-family: var(--sans);
font-size: 12px;
font-weight: 400;
color: #766960;
line-height: 1.4;
margin-top: 2px;
animation: np-item-detail-in .38s cubic-bezier(.16,1,.3,1)
calc(.42s + var(--i, 0) * 0.05s) both;
}
.notif-item-footer {
display: flex;
align-items: center;
gap: 10px;
margin-top: 6px;
animation: np-item-footer-in .38s cubic-bezier(.16,1,.3,1)
calc(.46s + var(--i, 0) * 0.05s) both;
}
.notif-item-time {
font-family: var(--mono);
font-size: 9px;
color: rgba(26,20,16,.28);
letter-spacing: .06em;
}
.notif-item-cta {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: #E8663A;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
transition: color .14s, gap .2s;
}
.notif-item-cta:hover { color: #a04e22; gap: 8px; }
.notif-item-cta svg { width: 9px; height: 9px; flex-shrink: 0; }
/* ── UNREAD DOT ── */
.notif-item-unread-dot {
flex-shrink: 0;
width: 7px; height: 7px;
border-radius: 50%;
background: #E8663A;
margin-top: 8px;
animation:
np-badge-pop .4s cubic-bezier(.16,1,.3,1)
calc(.32s + var(--i, 0) * 0.05s) both,
np-unread-pulse 2.4s 1s ease-in-out infinite;
}
/* ── EMPTY STATE ── */
.notif-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 60px 24px 40px;
text-align: center;
}
.notif-empty-ico {
color: rgba(26,20,16,.15);
display: block;
animation: np-empty-float 3.5s ease-in-out infinite;
}
.notif-empty-title {
font-family: var(--serif);
font-size: 16px;
font-weight: 500;
color: #3a3128;
letter-spacing: -.005em;
animation: np-item-title-in .5s .1s both;
}
.notif-empty-sub {
font-family: var(--sans);
font-size: 12px;
color: #766960;
animation: np-item-detail-in .5s .18s both;
}
.ni#nav-chat.has-notif {
background: rgba(224,82,82, 0.1);
box-shadow: inset 0 0 0 1.5px rgba(224,82,82, 0.5);
color: var(--text-on-dark);
animation: nav-shake 0.4s ease 0.2s;
}
.sound-toggle {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--paper);
border: 1.5px solid var(--border-warm);
border-radius: 20px;
cursor: pointer;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-70);
font-family: var(--sans);
transition: all 0.15s;
user-select: none;
}
.sound-toggle:hover {
border-color: var(--accent-warm-ln);
color: var(--char);
}
.sound-toggle.active {
border-color: var(--accent-warm-ln);
color: var(--accent-warm);
background: var(--accent-warm-bg);
}
.sound-toggle svg {
width: 13px;
height: 13px;
}
.pin-toggle:hover,
.pin-toggle.on {
opacity: 1;
filter: drop-shadow(0 1px 3px rgba(232,102,58, 0.4));
}
#urgente-banner {
position: fixed;
top: 0;
left: var(--sidebar);
right: 0;
z-index: 1000;
display: none;
flex-direction: column;
overflow: hidden;
pointer-events: none;
box-shadow: 0 4px 24px rgba(158, 26, 10, 0.35);
}
#venc-asistente:empty { display: none; }
#menu-toggle:hover {
border-color: var(--accent-warm);
background: var(--accent-warm-bg);
}
#menu-toggle span {
display: block;
width: 16px;
height: 1.5px;
background: var(--char);
border-radius: 2px;
transition: all 0.25s ease;
}
#menu-toggle.open span:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
}
#menu-toggle.open span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
#menu-toggle.open span:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
}
#btn-venta-rapida-float {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 500;
width: 56px;
height: 56px;
background: linear-gradient(135deg, var(--accent-warm), #e8924a);
border: none;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 6px 24px rgba(232,102,58, 0.45);
transition: all 0.2s;
color: #fff;
}
#btn-venta-rapida-float:hover {
transform: scale(1.08);
box-shadow: 0 8px 30px rgba(232,102,58, 0.55);
}
#btn-venta-rapida-float svg {
width: 24px;
height: 24px;
}
#urgente-flash {
position: fixed;
bottom: 0; left: var(--sidebar); right: 0;
height: 0;
z-index: 9790;
pointer-events: none;
background: linear-gradient(90deg, #8a0a04, #cc1a0a, #8a0a04);
background-size: 200% 100%;
opacity: 0;
transition: height .35s ease, opacity .35s ease;
}
#urgente-flash.visible {
height: 4px;
opacity: 1;
animation: urgente-bar-pulse 2s ease infinite,
urgente-bar-slide 3s linear infinite;
}
#changelog-overlay {
position: fixed; inset: 0;
background: rgba(10,8,7,.64);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
z-index: 9600;
display: none; align-items: center; justify-content: center;
padding: 20px;
}
#changelog-overlay.open { display: flex; }
#changelog-modal {
background: var(--paper);
border: 1.5px solid var(--border-warm);
border-radius: var(--r2);
width: 480px; max-width: 100%;
max-height: 80vh;
overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 24px 64px rgba(26,20,16,.35);
animation: pop .2s ease;
}
.stock-expand-btn {
width: 20px; height: 20px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--paper-2); border: 1.5px solid var(--border-warm);
border-radius: 999px; cursor: pointer; color: var(--ink-70);
padding: 0;
transition: transform .2s, border-color .15s, color .15s, background .15s;
line-height: 1; flex-shrink: 0;
}
.stock-expand-btn:hover {
border-color: var(--accent-warm-ln);
color: var(--accent-warm);
}
.stock-expand-btn.open { transform: rotate(90deg); color: var(--accent-warm); border-color: var(--accent-warm-ln); }
.stock-prod-name-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.stock-warn-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em;
color: var(--amber); background: rgba(232,102,58,.10);
border: 1px solid rgba(232,102,58,.30);
border-radius: 999px; padding: 2px 7px;
white-space: nowrap; flex-shrink: 0;
}
.stock-lotes-row { display: none; }
.stock-lotes-row.open { display: table-row; }
.stock-lotes-cell {
padding: 8px 14px 10px 38px !important;
background: rgba(237, 228, 215, 0.48);
border-bottom: 1px solid var(--border-warm);
}
#alerta-venc-overlay {
position: fixed;
top: max(0px, env(safe-area-inset-top, 0px));
right: 0;
bottom: max(0px, env(safe-area-inset-bottom, 0px));
left: 0;
background: rgba(245, 239, 230, 0.12);
backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
z-index: 9500;
display: none;
align-items: center;
justify-content: center;
padding: 22px;
}
#alerta-venc-overlay.open {
display: flex;
}
#alerta-venc-panel {
background: var(--paper);
border-radius: 20px;
border: 1px solid rgba(205, 188, 165, 0.95);
box-shadow: 0 24px 52px rgba(14, 10, 8, 0.34);
width: min(620px, 100%);
max-height: min(84vh, 780px);
display: flex;
flex-direction: column;
overflow: hidden;
animation: av-panel-in 0.22s ease-out;
}
#alerta-venc-overlay.open #alerta-venc-panel {
animation: av-panel-in 0.22s ease-out;
}
.ni[data-tip] { position: relative; }
.ni[data-tip]::after {
content: attr(data-tip);
position: fixed;
left: 192px;
background: var(--char);
color: var(--text-on-dark);
font-size: 11.5px;
font-family: var(--sans);
font-weight: 400;
line-height: 1.5;
padding: 9px 13px;
border-radius: 10px;
white-space: normal;
width: 200px;
pointer-events: none;
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 99999;
box-shadow: 0 6px 24px rgba(20,12,8,.22);
}
.ni[data-tip]::before {
content: "";
position: fixed;
left: 185px;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 7px solid var(--char);
pointer-events: none;
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 99999;
}
.ni[data-tip]:hover::after,
.ni[data-tip]:hover::before {
opacity: 1;
transform: translateX(0);
transition-delay: 0.4s;
}
.ticket-card::before,
.nota-item {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 9px 14px;
border-bottom: 1px solid rgba(217,204,186,.5);
transition: background .1s;
}
.nota-item:last-child { border-bottom: none; }
.nota-item:hover { background: #fdfcfb; }
.nota-body { flex: 1; min-width: 0; }
.nota-texto {
font-size: 12px;
color: var(--char);
line-height: 1.45;
word-break: break-word;
}
.nota-meta {
font-size: 9px;
color: var(--ink-70);
font-family: var(--mono);
margin-top: 2px;
}
.nota-del {
background: none;
border: none;
color: var(--ink-70);
cursor: pointer;
padding: 2px 3px;
border-radius: 4px;
opacity: .35;
transition: opacity .12s, color .12s;
flex-shrink: 0;
}
.nota-del:hover { opacity: 1; color: var(--red); }
/* v7.92.0 · Sidebar items refinement
- Más respiro vertical (1px → 3px) entre items
- Active sin border-left (el "rectángulo de color" que no gustaba)
- Active state limpio: solo background ember + color text + font-weight realzado
- Border-radius más generoso (6 → 8px) */
.ni{
cursor: pointer;
user-select: none;
position: relative;
display: flex;
align-items: center;
gap: 10px;
margin: 3px 10px;
padding: 8px 13px;
color: rgba(240, 230, 214, 0.52);
font-size: 12px;
border-radius: 8px;
transition: background var(--motion-fast) var(--ease-ui),
color var(--motion-fast) var(--ease-ui);
}
.ni svg {
width: 14px;
height: 14px;
flex-shrink: 0;
opacity: 0.55;
transition: opacity var(--motion-fast) var(--ease-ui);
}
.ni:hover {
color: rgba(240, 230, 214, 0.86);
background: rgba(255, 255, 255, 0.05);
}
.ni:hover svg { opacity: 0.80; }
.ni.active{
color: #f2e8d8;
background: rgba(232,102,58, 0.14);
font-weight: 600;
}
.ni.active svg {
opacity: 1;
color: rgba(232,102,58, 0.92);
}
.wagon-label {
font-family: var(--mono);
font-size: 7.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(246, 239, 226, 0.16);
margin-bottom: 5px;
display: block;
}
.wagon-logo{
height: auto;
width: auto;
object-fit: contain;
max-width: 100px;
opacity: 0.70;
transition: opacity var(--motion-med) var(--ease-ui);
filter: none;
}
.wagon-logo:hover { opacity: 1; }
.btn-out {
width: 100%;
padding: 8px 12px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(246, 239, 226, 0.34);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
cursor: pointer;
border-radius: 5px;
transition:
border-color var(--motion-fast) var(--ease-ui),
color var(--motion-fast) var(--ease-ui),
background var(--motion-fast) var(--ease-ui);
}
.btn-out:hover {
border-color: rgba(232,102,58, 0.35);
color: rgba(232,102,58, 0.80);
background: rgba(232,102,58, 0.05);
}
.topbar::after { display: none; }
.demo-pill {
font-family: var(--mono);
font-size: 8.5px;
letter-spacing: 0.12em;
color: var(--accent-warm);
border: 1px solid rgba(232,102,58, 0.28);
background: rgba(232,102,58, 0.07);
padding: 3px 9px;
border-radius: 4px;
}
th{
font-family: var(--mono);
text-align: left;
padding: 9px 14px;
font-size: 8.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-70);
font-weight: 600;
background: var(--paper-2);
border-bottom: 1.5px solid var(--border-warm);
white-space: nowrap;
}
table td {
padding: 10px 14px;
vertical-align: middle;
border-bottom: 1px solid rgba(217,204,186,.5);
font-size: 12.5px;
color: var(--char);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .1s; }
tbody tr:hover td { background: var(--paper-2); }
td strong, td .row-primary {
font-weight: 600;
color: var(--char);
font-size: 13px;
}
td.mono { font-family: var(--mono); }
#chat-float {
position: fixed;
inset: 0;
z-index: 8800;
pointer-events: none;
}
#chat-float-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 400px;
max-width: 100vw;
background: #fdfcfb;
border-left: 1px solid rgba(26, 20, 16, 0.08);
box-shadow:
-1px 0 0 rgba(26, 20, 16, 0.04),
-12px 0 32px rgba(26, 20, 16, 0.06),
-32px 0 80px rgba(26, 20, 16, 0.08);
display: flex;
flex-direction: column;
overflow: hidden;
pointer-events: all;
transform: translateX(0);
transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
will-change: transform;
}
#chat-float-panel.hidden {
transform: translateX(100%);
pointer-events: none;
}
#cf-pinned-bar {
display: none;
align-items: center;
gap: 10px;
padding: 10px 18px;
background: rgba(232,102,58, 0.05);
border-bottom: 1px solid rgba(232,102,58, 0.16);
cursor: pointer;
flex-shrink: 0;
transition: background 0.14s;
}
#cf-pinned-bar:hover { background: rgba(232,102,58, 0.08); }
#cf-pinned-bar.visible { display: flex; }
#cf-reply-preview {
display: none;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid rgba(26, 20, 16, 0.06);
background: rgba(232,102,58, 0.04);
}
#cf-reply-preview.visible { display: flex; }
#cf-prod-picker {
position: absolute;
left: 0;
right: 0;
bottom: 100%;
z-index: 20;
background: #FFFFFF;
border-top: 1px solid rgba(26, 20, 16, 0.06);
box-shadow: 0 -8px 24px rgba(26, 20, 16, 0.08);
display: none;
max-height: 240px;
overflow-y: auto;
}
#cf-prod-picker.visible { display: block; }
#cf-prod-picker-search {
width: 100%;
border: none;
border-bottom: 1px solid rgba(26, 20, 16, 0.06);
background: rgba(26, 20, 16, 0.025);
color: #1A1410;
padding: 11px 14px;
font-size: 12px;
font-family: var(--sans);
outline: none;
}
#chat-float-btn {
position: fixed;
right: 24px;
bottom: 24px;
width: 52px;
height: 52px;
background: #1A1410;
border: none;
border-radius: 50%;
box-shadow:
0 1px 2px rgba(26, 20, 16, 0.10),
0 8px 24px rgba(26, 20, 16, 0.20);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
pointer-events: all;
transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s, box-shadow 0.18s, opacity 0.24s;
z-index: 8801;
}
body:has(#mov-inspector .mvd-hd) #chat-float-btn,
body:has(#mov-inspector .mvd-doc) #chat-float-btn {
opacity: 0;
pointer-events: none;
transform: scale(0.7);
transition: opacity 0.18s ease, transform 0.18s ease;
}
#chat-float-btn:hover {
transform: scale(1.06);
background: #2A1F18;
box-shadow:
0 1px 2px rgba(26, 20, 16, 0.10),
0 12px 32px rgba(26, 20, 16, 0.28);
}
#chat-float-btn:active { transform: scale(0.96); }
#chat-float-btn svg {
width: 22px;
height: 22px;
stroke: #F5EFE6;
stroke-width: 2;
fill: none;
}
#cf-badge {
position: absolute;
top: -2px;
right: -2px;
background: #C0392B;
color: #FFF;
font-size: 9.5px;
font-weight: 800;
font-family: var(--mono);
min-width: 18px;
height: 18px;
border-radius: 999px;
display: none;
align-items: center;
justify-content: center;
padding: 0 5px;
border: 2px solid #fdfcfb;
letter-spacing: 0;
}
#cf-badge.visible {
display: flex;
animation: cf-badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#nuevo-chat-fab {
position: absolute;
top: -5px;
left: -5px;
margin-left: 0;
padding: 2px 4px;
font-size: 7px;
border: 2px solid #fdfcfb;
border-radius: 4px;
z-index: 1;
}
.fid-chart-fill.ok { background: linear-gradient(90deg, #617f54, #7f9f69); }
.fidx-row.on {
border-color: rgba(171, 132, 78, 0.75);
background: #f5ecdf;
}
#pages{
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
background: var(--page);
/* v7.28.0: border-top-left-radius moved to body-as-card section */
}
.section-core .ph {
margin-bottom: 12px;
}
@supports (padding: max(0px)) {
@media (max-width: 960px) {
body {
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
background-color: var(--ios-chrome-bg);
}
.topbar{
padding: 0 14px;
gap: 10px;
justify-content: space-between !important;
padding-top: max(0px, env(safe-area-inset-top, 0px));
height: calc(var(--topbar) + max(0px, env(safe-area-inset-top, 0px)));
}
#app,
#main {
background-color: var(--page);
}
}
}
#dash-venc-hover-card.show {
opacity: 1;
transform: translateY(0) scale(1);
}
#dash-venc-hover-card{
position: absolute;
z-index: 12000;
width: min(360px, 84vw);
max-height: 340px;
overflow: auto;
pointer-events: none;
opacity: 0;
transform: translateY(6px) scale(.985);
transition: opacity .16s ease, transform .16s ease;
border: 1px solid rgba(232,102,58, 0.34);
border-radius: 12px;
padding: 10px 10px 8px;
background: linear-gradient(180deg, #fffaf4 0%, #f5ece0 100%);
border-color: rgba(232,102,58,0.28);
box-shadow: 0 20px 48px rgba(26,20,16,0.22);
}
.dcs-period-btn.active {
background: #E8663A;
color: #F5EFE6;
box-shadow: 0 2px 8px rgba(232,102,58,0.4);
}
#co-suc-ranking { margin-top: 16px; }
#menu-toggle{
width: 38px;
height: 38px;
background: none;
border: 1.5px solid var(--border-warm);
border-radius: var(--r);
color: var(--char);
cursor: pointer;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
flex-shrink: 0;
transition: border-color 0.15s,
background 0.15s;
display: none;
}
#tb-ni-vencimientos.has-alert::after {
content: "";
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
pointer-events: none;
}
#tb-ni-vencimientos.has-vencidos:not(.has-sincontrolar)::after {
background: #E05252;
animation: vncPulseRed 1.6s ease-out infinite;
}
#tb-ni-vencimientos.has-sincontrolar:not(.has-vencidos)::after {
background: #C89E2A;
animation: vncPulseAmber 2s ease-out infinite;
}
#tb-ni-vencimientos.has-vencidos.has-sincontrolar::after {
animation: vncPulseBoth 2.8s ease-in-out infinite;
}
#tb-ni-vencimientos.active.has-alert::after { box-shadow: none; }
.topbar-right{
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* v7.83.0: action-zone se empuja a la derecha — todo el bloque (search + selects
+ primary CTA + indicators) queda agrupado a la derecha, junto al título sólo
por la izquierda hay espacio. */
.topbar #tb-action-zone.tb-action-zone {
margin-left: auto;
}
#loc-label { font-weight: 700; color: #1A1410; }
#tb-ni-vencimientos{
position: relative;
}
.topbar .rt-pill {
background: rgba(26,20,16,0.05);
border-color: rgba(26,20,16,0.12);
color: rgba(26,20,16,0.55);
}
.topbar .rt-pill span { color: rgba(26,20,16,0.55); }
#cc-donut-svg text { pointer-events: none; }
#pages > .page,
#pages > .page.section-core {
padding: 46px 46px 80px;
box-sizing: border-box;
}
#trf-obs {
width: 100%;
background: rgba(26, 20, 16, 0.025);
border: 1px solid rgba(26, 20, 16, 0.08);
border-radius: 10px;
padding: 10px 12px;
font-family: var(--sans);
font-size: 13px;
color: #1A1410;
resize: vertical;
min-height: 60px;
outline: none;
transition: border-color 0.16s, background 0.16s;
}
#trf-obs:focus {
border-color: rgba(232,102,58, 0.45);
background: #FFFFFF;
}
#mov-inspector .mvd-doc {
flex: 1;
overflow-y: auto;
min-height: 0;
padding: 0;
scrollbar-width: thin;
scrollbar-color: rgba(26,20,16,.18) transparent;
}
body, input, select, textarea, button {
font-family: var(--sans);
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
letter-spacing: -0.005em;
}
/* v7.83.0: removido margin-left:auto de topbar-right — ahora action-zone usa auto
y empuja TODO el bloque (search + selects + primary CTA) junto a la derecha,
sin dejar gap entre ellos. */
.topbar .topbar-right { margin-left: 0; }
.topbar .tb-nav-center { flex: 0 0 auto !important; }
#tb-primary-zone {
display: flex;
align-items: center;
margin-right: 4px;
}
/* ════════════════════════════════════════════════════
DRAWER DETALLE DE MOVIMIENTO — v7.25.0 Premium
════════════════════════════════════════════════════ */
/* ── Keyframes ── */
@keyframes mvdSlideIn {
from { opacity: 0; transform: translateX(24px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes mvdFadeUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes mvdPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .55; transform: scale(1.35); }
}
@keyframes mvdTotalReveal {
from { opacity: 0; transform: translateY(8px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mvdBtnIn {
from { opacity: 0; transform: translateY(6px) scale(.94); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
#mov-inspector {
background: linear-gradient(168deg, #FAFAF9 0%, #FFFFFF 38%, #FEFDFB 100%) !important;
display: flex;
flex-direction: column;
border-left: 1px solid rgba(26,20,16,.06);
}
#mov-inspector .mvd-doc {
animation: mvdSlideIn .44s cubic-bezier(.16,1,.3,1) both;
}
/* ── Header ── */
.mvd-hd {
padding: 22px 26px 18px;
border-bottom: 1px solid rgba(26,20,16,.06);
flex-shrink: 0;
background: linear-gradient(180deg, #F3F2F0 0%, #F8F7F6 100%);
animation: mvdFadeUp .4s cubic-bezier(.16,1,.3,1) .06s both;
}
.mvd-hd-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
/* Status badge */
.mvd-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: var(--radius-full);
background: rgba(34,165,90,.10);
color: rgba(22,84,46,.92);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s;
}
.mvd-status:hover {
transform: scale(1.04);
box-shadow: 0 2px 8px rgba(34,165,90,.12);
}
.mvd-st-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.mvd-st-completada .mvd-st-dot { animation: mvdPulse 2.2s ease-in-out infinite; }
/* Back button */
.mvd-esc {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(255,255,255,.7);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(26,20,16,.10);
border-radius: var(--radius-xs);
padding: 5px 11px 5px 8px;
font-family: var(--sans);
font-size: 11.5px;
font-weight: 500;
color: rgba(26,20,16,.58);
cursor: pointer;
transition: all .18s cubic-bezier(.16,1,.3,1);
}
.mvd-esc:hover {
background: rgba(26,20,16,.05);
border-color: rgba(26,20,16,.18);
color: #1A1410;
transform: translateX(-2px);
}
.mvd-esc:active { transform: translateX(-1px) scale(.97); }
.mvd-esc svg { color: rgba(26,20,16,.40); transition: color .18s, transform .18s; }
.mvd-esc:hover svg { color: #1A1410; transform: translateX(-1px); }
.mvd-esc-txt { font-size: 11.5px; }
.mvd-esc-key {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
background: rgba(26,20,16,.06);
border-radius: 4px;
padding: 2px 5px;
color: rgba(26,20,16,.42);
margin-left: 3px;
transition: background .15s;
}
.mvd-esc:hover .mvd-esc-key { background: rgba(26,20,16,.10); }
/* Ticket eyebrow + number */
.mvd-eyebrow {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(26,20,16,.35);
margin-bottom: 5px;
}
.mvd-num-wrap {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
.mvd-num {
font-family: var(--display);
font-size: 30px;
font-weight: 700;
letter-spacing: -0.03em;
color: #1A1410;
line-height: 1;
background: linear-gradient(135deg, #1A1410 60%, rgba(232,102,58,.7));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.mvd-copy {
display: flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
background: rgba(255,255,255,.6);
border: 1px solid rgba(26,20,16,.10);
border-radius: var(--radius-xs);
color: rgba(26,20,16,.40);
cursor: pointer;
transition: all .18s cubic-bezier(.16,1,.3,1);
flex-shrink: 0;
}
.mvd-copy:hover {
background: rgba(26,20,16,.05);
border-color: rgba(26,20,16,.18);
color: #1A1410;
transform: scale(1.08);
}
.mvd-copy:active { transform: scale(.92); }
.mvd-copy-ok {
color: rgba(22,84,46,.85);
border-color: rgba(22,84,46,.30);
background: rgba(34,165,90,.06);
}
.mvd-meta {
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
color: rgba(26,20,16,.42);
letter-spacing: 0.01em;
}
/* ── Sections ── */
.mvd-sec {
padding: 20px 26px;
border-bottom: 1px solid rgba(26,20,16,.05);
animation: mvdFadeUp .42s cubic-bezier(.16,1,.3,1) both;
}
.mvd-sec:nth-child(1) { animation-delay: .1s; }
.mvd-sec:nth-child(2) { animation-delay: .16s; }
.mvd-sec:nth-child(3) { animation-delay: .22s; }
.mvd-sec:nth-child(4) { animation-delay: .28s; }
.mvd-sec-title {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(26,20,16,.34);
margin-bottom: 14px;
position: relative;
padding-left: 12px;
}
.mvd-sec-title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 10px;
border-radius: 2px;
background: linear-gradient(180deg, #E8663A, rgba(232,102,58,.4));
}
/* ── Rows (Resumen / Cobro) ── */
.mvd-rows { display: flex; flex-direction: column; gap: 0; }
.mvd-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 8px;
margin: 0 -8px;
border-bottom: 1px solid rgba(26,20,16,.04);
border-radius: var(--radius-xs);
transition: background .18s cubic-bezier(.16,1,.3,1);
}
.mvd-row:hover { background: rgba(26,20,16,.025); }
.mvd-rows .mvd-row:last-child { border-bottom: none; padding-bottom: 8px; }
.mvd-row-l {
font-family: var(--sans);
font-size: 13.5px;
font-weight: 450;
color: rgba(26,20,16,.50);
flex-shrink: 0;
}
.mvd-row-v {
font-family: var(--sans);
font-size: 13.5px;
font-weight: 600;
color: #1A1410;
text-align: right;
display: flex;
align-items: center;
gap: 6px;
}
.mvd-row-v-mono {
font-family: var(--mono);
font-feature-settings: "tnum" 1;
font-variant-numeric: tabular-nums;
}
.mvd-row-disc .mvd-row-l,
.mvd-row-disc .mvd-row-v { color: rgba(34,165,90,.85); }
/* Payment dot */
.mvd-dot {
width: 7px; height: 7px;
border-radius: 50%;
flex-shrink: 0;
display: inline-block;
box-shadow: 0 0 0 2px rgba(255,255,255,.8);
}
/* ── Items ── */
.mvd-items { display: flex; flex-direction: column; gap: 6px; }
.mvd-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 10px 10px 10px 12px;
margin: 0 -10px;
border-bottom: none;
border-radius: var(--radius-sm);
background: transparent;
transition: background .2s cubic-bezier(.16,1,.3,1), box-shadow .2s;
}
.mvd-item:hover {
background: rgba(26,20,16,.028);
box-shadow: 0 1px 4px rgba(26,20,16,.04);
}
.mvd-item:last-child { border-bottom: none; padding-bottom: 10px; }
.mvd-item-info { flex: 1; min-width: 0; }
.mvd-item-name {
font-family: var(--sans);
font-size: 13.5px;
font-weight: 600;
letter-spacing: -0.012em;
color: #1A1410;
margin-bottom: 3px;
transition: color .15s;
}
.mvd-item:hover .mvd-item-name { color: #E8663A; }
.mvd-item-meta {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
color: rgba(26,20,16,.44);
letter-spacing: 0.01em;
margin-bottom: 6px;
}
.mvd-item-lote {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: rgba(26,20,16,.52);
background: rgba(26,20,16,.04);
border: 1px solid rgba(26,20,16,.08);
border-radius: 5px;
padding: 2px 7px 2px 5px;
transition: background .15s, border-color .15s;
}
.mvd-item:hover .mvd-item-lote {
background: rgba(26,20,16,.06);
border-color: rgba(26,20,16,.12);
}
.mvd-item-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
}
.mvd-item-price {
font-family: var(--mono);
font-size: 13.5px;
font-weight: 600;
color: #1A1410;
letter-spacing: -0.01em;
font-feature-settings: "tnum" 1;
font-variant-numeric: tabular-nums;
}
.mvd-item-del {
display: flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
background: transparent;
border: none;
border-radius: var(--radius-xs);
color: rgba(26,20,16,.25);
cursor: pointer;
padding: 0;
transition: all .18s cubic-bezier(.16,1,.3,1);
opacity: 0;
}
.mvd-item:hover .mvd-item-del { opacity: 1; }
.mvd-item-del:hover {
background: rgba(224,82,82,.08);
color: rgba(224,82,82,.80);
transform: scale(1.1);
}
.mvd-item-del:active { transform: scale(.9); }
/* ── Footer ── */
.mvd-foot {
flex-shrink: 0;
border-top: 1px solid rgba(26,20,16,.06);
padding: 20px 26px 22px;
background: linear-gradient(0deg, #ECEAE7 0%, #F3F2F0 100%);
animation: mvdFadeUp .44s cubic-bezier(.16,1,.3,1) .32s both;
}
/* Total: label izquierda, número derecha */
.mvd-total-block {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 16px;
animation: mvdTotalReveal .5s cubic-bezier(.16,1,.3,1) .38s both;
}
.mvd-total-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(26,20,16,.34);
flex-shrink: 0;
}
.mvd-total-val {
font-family: var(--display);
font-size: 36px;
font-weight: 700;
letter-spacing: -0.03em;
color: #1A1410;
line-height: 1.05;
text-align: right;
background: linear-gradient(135deg, #1A1410 50%, #E8663A);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.mvd-actions {
display: flex;
gap: 8px;
}
.mvd-act {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 38px;
padding: 0 14px;
background: rgba(255,255,255,.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: 1px solid rgba(26,20,16,.10);
border-radius: var(--radius-sm);
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
color: rgba(26,20,16,.68);
cursor: pointer;
transition: all .2s cubic-bezier(.16,1,.3,1);
white-space: nowrap;
animation: mvdBtnIn .38s cubic-bezier(.16,1,.3,1) both;
}
.mvd-act:nth-child(1) { animation-delay: .4s; }
.mvd-act:nth-child(2) { animation-delay: .46s; }
.mvd-act:nth-child(3) { animation-delay: .52s; }
.mvd-act svg { flex-shrink: 0; color: rgba(26,20,16,.40); transition: all .18s; }
.mvd-act:hover {
background: rgba(26,20,16,.05);
border-color: rgba(26,20,16,.18);
color: #1A1410;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(26,20,16,.06);
}
.mvd-act:hover svg { color: rgba(26,20,16,.65); }
.mvd-act:active { transform: translateY(0) scale(.97); box-shadow: none; }
.mvd-act-del:hover {
background: rgba(224,82,82,.05);
border-color: rgba(224,82,82,.22);
color: rgba(224,82,82,.85);
box-shadow: 0 4px 12px rgba(224,82,82,.08);
}
.mvd-act-del:hover svg { color: rgba(224,82,82,.70); }
.topbar{
flex-shrink: 0;
display: flex;
align-items: center;
background: #fbfbfb !important;
box-shadow: none;
border-bottom: none !important;
height: 56px !important;
padding: 0 20px !important;
justify-content: flex-start !important;
gap: 0 !important;
position: relative;
z-index: 200;
}
/* v7.29.0 — action-zone alineado a la derecha, junto al CTA primario */
#tb-action-zone {
margin-left: auto !important;
flex: none;
position: static;
transform: none;
}
#vr-total {
font-family:var(--serif);font-size:40px;font-weight:700;
letter-spacing:-.03em;font-optical-sizing:auto;color:#1A1410;
line-height:1;
}
#vr-resumen-total {
font-family:var(--serif);font-size:26px;font-weight:700;
letter-spacing:-.025em;font-optical-sizing:auto;color:#1A1410;
}
/* ═══ 07. SIDEBAR + TOPBAR ═══ */
.sb-nav {
flex: 1;
padding: 8px 0;
overflow-y: auto;
}
.sb-venc-dot {
display: none;
margin-left: auto;
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
position: relative;
}
.sb-venc-dot.visible { display: block; }
.sb-venc-dot.critico { background: #e05252; }
.sb-venc-dot.atencion { background: #d97c2a; }
.sb-venc-dot::before, .sb-venc-dot::after {
content: "";
position: absolute;
inset: 0; border-radius: 50%;
}
.sb-venc-dot.critico::before { background: #e05252; animation: venc-sonar 1.6s ease-out infinite; }
.sb-venc-dot.critico::after { background: #e05252; animation: venc-sonar 1.6s ease-out infinite .55s; }
.sb-venc-dot.atencion::before { background: #d97c2a; animation: venc-sonar 2s ease-out infinite; }
.sb-venc-dot.atencion::after { background: #d97c2a; animation: venc-sonar 2s ease-out infinite .7s; }
/* v7.95.1 · Toggle dark/light visible siempre */
.nav-chrome-switch,
#nav-chrome-toggle {
display: inline-flex !important;
align-items: center;
cursor: pointer;
flex-shrink: 0;
padding: 0;
margin: 0;
}
.nav-chrome-switch-track {
position: relative;
display: inline-flex;
align-items: center;
width: 30px;
height: 17px;
border-radius: 20px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(232,102,58,0.22);
transition: background 0.2s, border-color 0.2s;
}
.nav-chrome-switch-thumb {
position: absolute;
left: 2px;
width: 11px;
height: 11px;
border-radius: 50%;
background: rgba(232,102,58,0.55);
transition: left 0.2s, background 0.2s;
}
#nav-chrome-switch-input:checked ~ .nav-chrome-switch-track {
background: rgba(232,102,58,0.18);
border-color: rgba(232,102,58,0.50);
}
#nav-chrome-switch-input:checked ~ .nav-chrome-switch-track .nav-chrome-switch-thumb {
left: calc(100% - 13px);
background: rgba(232,102,58,0.90);
}
#sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(26, 20, 16, 0.6);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
z-index: 190;
}
.update-banner ~ #app .topbar,
.update-banner ~ #app #sidebar {
transition: top 0.35s ease;
}
.sb-collapsible-head svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .8; }
.sb-collapsible-head .sb-chevron {
margin-left: auto;
width: 10px;
height: 10px;
opacity: .4;
transition: transform 0.2s ease;
flex-shrink: 0;
}
.sb-collapsible-head.open .sb-chevron { transform: rotate(180deg); opacity: .7; }
.sb-collapsible-head.open {
color: var(--text-on-dark);
background: rgba(255, 255, 255, 0.04);
}
.sb-collapsible-head.intro-opening {
animation: sbInvHeadBloom .62s cubic-bezier(.2,.9,.25,1);
}
.sb-collapsible-body {
overflow: hidden;
max-height: 0;
transition: max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.sb-collapsible-body.open { max-height: 200px; }
.sb-collapsible-body.intro-opening .ni {
opacity: 0;
transform: translateY(-4px) scale(.985);
animation: sbInvItemReveal .42s cubic-bezier(.2,.9,.25,1) forwards;
}
.sb-collapsible-body.intro-opening .ni:nth-child(1) { animation-delay: .08s; }
.sb-collapsible-body.intro-opening .ni:nth-child(2) { animation-delay: .13s; }
.sb-collapsible-body.intro-opening .ni:nth-child(3) { animation-delay: .18s; }
.sb-collapsible-body.intro-opening .ni:nth-child(4) { animation-delay: .23s; }
.sb-collapsible-body.intro-opening .ni:nth-child(5) { animation-delay: .28s; }
#sidebar::after { display: none; }
.sb-logo {
padding: 26px 22px 22px;
border-bottom: 1px solid rgba(232,102,58, 0.12);
position: relative;
}
.sb-logo .brand {
font-family: var(--serif);
font-size: 21px;
font-weight: 300;
font-style: italic;
color: #f2e8d8;
letter-spacing: -0.025em;
line-height: 1.2;
display: block;
}
.sb-logo .sub {
font-family: var(--mono);
font-size: 7.5px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: rgba(232,102,58, 0.65);
font-weight: 400;
display: block;
margin-top: 7px;
}
.sb-local {
padding: 8px 22px;
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(240, 230, 214, 0.24);
border-bottom: 1px solid rgba(232,102,58, 0.08);
font-family: var(--mono);
display: flex;
align-items: center;
gap: 7px;
}
.sb-local::before {
content: '';
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(232,102,58, 0.55);
flex-shrink: 0;
}
.sb-local strong {
color: rgba(232,102,58, 0.72);
font-weight: 500;
}
.sb-collapsible-head{
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
margin: 3px 10px;
padding: 8px 13px;
border-radius: 8px;
color: rgba(246, 239, 226, 0.60);
font-size: 12px;
transition: background var(--motion-fast) var(--ease-ui),
color var(--motion-fast) var(--ease-ui);
}
.sb-collapsible-head:hover {
color: rgba(246, 239, 226, 0.88);
background: rgba(255, 255, 255, 0.05);
}
.sb-collapsible-head.child-active {
color: rgba(246, 239, 226, 0.90);
background: rgba(232,102,58, 0.07);
}
.sb-collapsible-body .ni {
padding-left: 36px;
font-size: 11.5px;
color: rgba(240, 230, 214, 0.44);
border-radius: 7px;
}
.sb-collapsible-body .ni:hover {
color: rgba(240, 230, 214, 0.80);
}
.sb-collapsible-body .ni.active {
color: #f2e8d8;
background: rgba(232,102,58, 0.14);
font-weight: 600;
}
.sb-foot{
display: flex;
flex-direction: column;
padding: 16px 20px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
gap: 12px;
}
.sb-vr-btn {
display: flex;
align-items: center;
gap: 9px;
margin: 8px 12px 4px;
padding: 9px 14px;
background: var(--accent-warm);
color: #fff;
border-radius: 9px;
cursor: pointer;
font-size: 12.5px;
font-weight: 600;
font-family: var(--sans);
letter-spacing: .01em;
transition: background .15s, box-shadow .15s;
border: none;
width: calc(100% - 24px);
box-shadow: 0 2px 8px rgba(232,102,58,.25);
user-select: none;
}
.sb-vr-btn:hover {
background: var(--accent-warm-lt);
box-shadow: 0 3px 12px rgba(232,102,58,.35);
}
.sb-vr-btn svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .95; }
.sb-nuevo-badge {
display: none;
align-items: center;
justify-content: center;
background: var(--c-green, #22A55A);
color: #fff;
font-size: 8px;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 2px 5px;
border-radius: 4px;
margin-left: auto;
flex-shrink: 0;
font-family: var(--mono, monospace);
animation: nuevo-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.sb-nuevo-badge.visible { display: inline-flex; }
#sidebar{
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: var(--sidebar);
display: flex;
flex-direction: column;
z-index: 250;
background: #0e0b08;
box-shadow: 2px 0 24px rgba(0, 0, 0, 0.32);
border-right: 0;
}
#sidebar, #sidebar-backdrop { display: none !important; }
.tb-mobile-menu {
display: none;
background: transparent;
border: 1px solid rgba(26,20,16,0.1);
border-radius: 8px;
width: 34px;
height: 34px;
align-items: center;
justify-content: center;
cursor: pointer;
color: #1A1410;
padding: 0;
}
.tb-mobile-menu:hover { background: rgba(26,20,16,0.05); }
.tb-mobile-menu svg { width: 18px; height: 18px; }
.tb-nav-center {
flex: 1;
display: flex;
justify-content: flex-start; /* alineado a la izquierda, junto al borde de la sidebar */
padding-left: 8px;
}
.tb-section-title {
display: flex;
align-items: center;
font-size: 15px;
font-weight: 700;
color: #1A1410;
letter-spacing: -0.005em;
font-family: var(--sans, sans-serif);
padding: 4px 0;
}
.tb-section-title #top-title { line-height: 1; }
.nav-wrap { display: contents; }
.nav-handle { display: none; }
.tb-dropdown-inner {
display: flex;
flex-direction: column;
gap: 6px;
min-height: 100%;
}
.sb-org-status.offline,
.sb-org-status.off { background: #C0392B; }
.sb-org-status.warning,
.sb-org-status.warn { background: #E67E22; }
.sb-org-db {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.sb-org-db-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #22A55A;
box-shadow: 0 0 0 2px rgba(34,165,90, 0.16);
flex-shrink: 0;
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.sb-org-db-dot.offline,
.sb-org-db-dot.off {
background: #C0392B;
box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.16);
}
.sb-org-db-dot.warning,
.sb-org-db-dot.warn {
background: #E67E22;
box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.16);
}
.sb-brand .tb-wagon-logo { height: 19px; }
.sb-brand .tb-engine-sep { height: 16px; }
#main{
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
margin-left: 248px !important;
width: calc(100% - 248px);
}
.tb-dd-item {
display: flex;
align-items: center;
gap: 10px;
background: none;
border: none;
border-radius: 9px;
padding: 9px 10px;
font-size: 13px;
font-weight: 500;
color: rgba(26,20,16,0.60);
cursor: pointer;
text-align: left;
width: 100%;
transition: all .12s ease;
font-family: var(--sans, sans-serif);
line-height: 1;
position: relative;
}
.tb-dd-item:hover {
background: rgba(26,20,16,.04);
color: #1A1410;
box-shadow: none;
}
.tb-dd-item.active {
background: rgba(232,102,58,.06);
color: #1A1410;
font-weight: 600;
box-shadow: none;
}
.tb-dd-item.active::before {
content: '';
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--accent-warm, #E8663A);
}
.tb-dd-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
color: rgba(26,20,16,.35);
transition: color .12s;
}
/* ═══════════════════════════════════════════
SIDEBAR v2 (sb2-*) — White card + accent bar
═══════════════════════════════════════════ */
/* ── Header: Brand ── */
.sb2-header {
padding: 20px 20px 0;
flex-shrink: 0;
}
.sb2-brand {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.sb2-brand-logo {
width: 28px;
height: 28px;
background: #1A1410;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sb2-brand-logo svg { width: 14px; height: 14px; }
.sb2-brand-text {
display: flex;
flex-direction: column;
gap: 0;
line-height: 1;
}
.sb2-brand-name {
font-family: var(--sans, 'Inter', sans-serif);
font-size: 14px;
font-weight: 600;
color: #1A1410;
letter-spacing: -.02em;
}
.sb2-brand-sub {
font-family: var(--sans, 'Inter', sans-serif);
font-size: 8.5px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(26,20,16,.35);
margin-top: 2px;
}
/* ── CTA Button ── */
.sb2-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 100%;
padding: 10px;
margin: 0 0 6px;
background: #1A1410;
color: #fff;
border: none;
border-radius: 10px;
font-family: var(--sans, 'Inter', sans-serif);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: all .15s;
line-height: 1;
}
.sb2-cta svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .85; }
.sb2-cta:hover {
background: #2d2520;
box-shadow: 0 4px 14px rgba(26,20,16,.2);
transform: translateY(-1px);
}
.sb2-cta:active { transform: scale(.97); }
/* ── Scrollable nav area ── */
.sb2-scroll {
flex: 1;
overflow-y: auto;
padding: 6px 10px 10px;
scrollbar-width: none;
min-height: 0;
}
.sb2-scroll::-webkit-scrollbar { display: none; }
/* ── Section groups ── */
.sb2-section {
margin-bottom: 4px;
}
.sb2-section-label {
font-family: var(--sans, 'Inter', sans-serif);
font-size: 9px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(26,20,16,.35);
padding: 12px 10px 6px;
user-select: none;
}
/* ── Badges ── */
.sb2-badge {
margin-left: auto;
min-width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 5px;
border-radius: 999px;
font-family: var(--sans, 'Inter', sans-serif);
font-size: 9px;
font-weight: 700;
line-height: 1;
flex-shrink: 0;
}
.sb2-badge--warn {
background: rgba(212,136,42,.12);
color: #b86c1c;
}
.sb2-badge--new {
background: rgba(34,165,90,.10);
color: #1a7a45;
}
.sb2-badge--danger {
background: rgba(224,82,82,.10);
color: #a83030;
}
/* ── Footer: User pill ── */
.sb2-footer {
flex-shrink: 0;
padding: 10px 10px 14px;
border-top: 1px solid rgba(0,0,0,.04);
}
.sb2-user {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 10px;
cursor: default;
transition: background .12s;
}
.sb2-user:hover {
background: rgba(26,20,16,.04);
}
.sb2-avatar {
width: 32px;
height: 32px;
border-radius: 9px;
background: linear-gradient(135deg, #d4a574, #b8825a);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.sb2-avatar-letter {
font-family: var(--sans, 'Inter', sans-serif);
font-size: 14px;
font-weight: 600;
color: #fff;
}
.sb2-user-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.sb2-user-name {
font-size: 12.5px;
font-weight: 600;
color: #1A1410;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sb2-user-loc {
font-family: var(--sans, 'Inter', sans-serif);
font-size: 9.5px;
font-weight: 500;
color: rgba(26,20,16,.40);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sb2-logout {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: none;
border-radius: 7px;
cursor: pointer;
color: rgba(26,20,16,.30);
transition: all .12s;
flex-shrink: 0;
}
.sb2-logout:hover {
background: rgba(224,82,82,.08);
color: #a83030;
}
.sb2-logout svg { width: 15px; height: 15px; }
.tb-vr-btn .tb-dd-icon { color: #E05252; }
.tb-vr-btn:hover .tb-dd-icon { color: #7A2A08; }
.tb-brand{
display: none;
align-items: center;
gap: 10px;
flex-shrink: 0;
margin-right: 8px;
background: none;
padding: 0;
border-radius: 0;
}
.tb-wagon-logo {
height: 22px;
width: auto;
display: block;
opacity: 0.94;
}
.tb-engine-sep {
width: 1px;
height: 18px;
background: rgba(26,20,16,0.14);
flex-shrink: 0;
}
.tb-engine {
font-family: var(--serif);
font-size: 17px;
font-weight: 600;
font-style: italic;
letter-spacing: -0.03em;
color: transparent;
background: linear-gradient(
100deg,
#1A1410 0%,
#1A1410 30%,
#E8663A 50%,
#1A1410 70%,
#1A1410 100%
);
background-size: 220% auto;
-webkit-background-clip: text;
background-clip: text;
animation: engine-shimmer 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
line-height: 1;
padding-bottom: 3px;
user-select: none;
}
.tb-notif-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
background: transparent;
border: none;
border-radius: 9px;
cursor: pointer;
color: rgba(26,20,16,.52);
transition: background .14s ease, color .14s ease;
flex-shrink: 0;
outline: none;
margin-right: 2px;
}
.tb-notif-btn:hover {
background: rgba(26,20,16,.06);
color: #1A1410;
}
.tb-notif-btn:active { transform: scale(.94); }
.tb-notif-badge {
position: absolute;
top: 4px; right: 4px;
min-width: 16px; height: 16px;
background: #C0392B;
color: #FFFFFF;
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
letter-spacing: 0;
border-radius: 999px;
padding: 0 4px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
border: 1.5px solid #fdfcfb;
animation: lx-scale-in var(--lx-d-slow) var(--lx-curve-spring) both;
}
.tb-notif-badge.warn { background: #E67E22; }
.tb-notif-btn.ringing svg {
animation: lx-bell-ring 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.tb-action-zone {
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
height: 100%;
padding: 0;
overflow: visible;
flex-shrink: 1;
}
.tb-action-zone:empty { display: none; }
.tb-relocated {
margin: 0 !important;
}
.tb-action-zone .sk-search-wrap,
.tb-action-zone .mv2-search-wrap {
flex: 0 1 200px;
max-width: 200px;
min-width: 145px;
position: relative;
}
.tb-action-zone .sk-search-ico {
position: absolute;
left: 9px;
top: 50%;
transform: translateY(-50%);
color: rgba(26,20,16,.45);
pointer-events: none;
width: 12px !important;
height: 12px !important;
}
.tb-action-zone .sk-fpill-row {
display: inline-flex;
align-items: center;
gap: 2px;
height: 30px;
background: rgba(26,20,16,.04);
border-radius: 7px;
padding: 2px;
flex-shrink: 0;
}
.tb-action-zone .sk-fpill {
height: 26px;
padding: 0 9px;
font-family: var(--sans);
font-size: 11.5px;
font-weight: 500;
letter-spacing: -0.005em;
color: rgba(26,20,16,.58);
background: transparent;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background .13s, color .13s;
white-space: nowrap;
display: inline-flex;
align-items: center;
}
.tb-action-zone .sk-fpill:hover {
background: rgba(26,20,16,.04);
color: #1A1410;
}
.tb-action-zone .sk-fpill.active {
background: #FFFFFF;
color: #1A1410;
font-weight: 600;
box-shadow: 0 1px 2px rgba(26,20,16,.06), 0 0 0 1px rgba(26,20,16,.05);
}
.tb-action-zone .sk-sucursal-wrap {
display: inline-flex;
align-items: center;
gap: 0;
height: 30px;
padding: 0 10px;
background: rgba(255,255,255,.72);
border: 1px solid rgba(191,180,170,.50);
border-radius: 7px;
flex-shrink: 0;
color: rgba(26,20,16,.72);
transition: background .13s, border-color .13s;
cursor: pointer;
}
.tb-action-zone .sk-sucursal-wrap:hover {
background: #FFFFFF;
border-color: rgba(191,180,170,.70);
}
.tb-action-zone .sk-sucursal-wrap > svg:first-child { display: none; }
.tb-action-zone .sk-locf-sel {
background: transparent;
border: none;
font-family: var(--sans);
font-size: 11.5px;
font-weight: 500;
letter-spacing: -0.005em;
color: rgba(26,20,16,.72);
outline: none;
cursor: pointer;
padding: 0;
padding-right: 18px;
height: 100%;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(26,20,16,0.50)' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 2px center;
background-size: 10px 10px;
}
.tb-action-zone .sk-sucursal-wrap:hover .sk-locf-sel { color: #1A1410; }
.tb-action-zone .sk-btn-primary,
.tb-action-zone .sk-btn-ghost {
height: 30px;
padding: 0 11px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: -0.005em;
border-radius: 7px;
display: inline-flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
white-space: nowrap;
border: 1px solid transparent;
cursor: pointer;
transition: background .14s, border-color .14s, color .14s;
}
.tb-action-zone .sk-btn-primary {
background: #1A1410;
color: #F5EFE6;
}
.tb-action-zone .sk-btn-primary:hover { background: #2A1F18; }
.tb-action-zone .sk-btn-ghost {
background: transparent;
color: rgba(26,20,16,.60);
border-color: rgba(26,20,16,.10);
}
.tb-action-zone .sk-btn-ghost:hover {
background: rgba(26,20,16,.04);
border-color: rgba(26,20,16,.16);
color: #1A1410;
}
.tb-action-zone .sk-btn-ghost svg,
.tb-action-zone .sk-btn-primary svg {
width: 11px !important;
height: 11px !important;
}
.tb-action-zone > * {
animation: lx-tb-actions-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tb-action-zone > *:nth-child(2) { animation-delay: 40ms; }
.tb-action-zone > *:nth-child(3) { animation-delay: 80ms; }
.tb-action-zone > *:nth-child(4) { animation-delay: 120ms; }
.tb-action-zone > *:nth-child(5) { animation-delay: 160ms; }
#tb-primary-zone .sk-btn-primary,
#tb-primary-zone .tb-relocated {
height: 32px;
padding: 0 13px;
font-size: 12px;
font-weight: 600;
letter-spacing: -0.005em;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
border: none;
cursor: pointer;
transition: background .14s, opacity .14s;
/* Color coral/naranja WAGON */
background: #E8663A;
color: #FFFFFF;
}
#tb-primary-zone .sk-btn-primary:hover,
#tb-primary-zone .tb-relocated:hover {
background: #B5551F;
}
#tb-primary-zone .sk-btn-primary:active,
#tb-primary-zone .tb-relocated:active {
transform: scale(.97);
}
.tb-cat-wrapper {
position: relative;
flex-shrink: 0;
}
.tb-collapse-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
height: 32px;
padding: 0 10px;
background: #E7E5E6;
border: none;
border-radius: 9px;
font-family: var(--sans);
font-size: 11.5px;
font-weight: 600;
letter-spacing: -0.005em;
color: rgba(26,20,16,.72);
cursor: pointer;
white-space: nowrap;
transition: background .15s;
outline: none;
}
.tb-collapse-toggle:hover,
.tb-cat-wrapper.is-open .tb-collapse-toggle {
background: #dfdcdd;
color: #1A1410;
}
.tb-collapse-toggle .tb-ct-chev {
transition: transform .22s cubic-bezier(0.16,1,0.3,1);
flex-shrink: 0;
}
.tb-cat-wrapper.is-open .tb-ct-chev { transform: rotate(180deg); }
.tb-cat-panel {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 500;
background: #FFFFFF;
border: 1px solid rgba(26,20,16,.09);
border-radius: 10px;
box-shadow: 0 4px 16px rgba(26,20,16,.10), 0 1px 3px rgba(26,20,16,.06);
padding: 4px;
min-width: 160px;
animation: lx-dd-in .16s cubic-bezier(0.16,1,0.3,1);
}
.tb-cat-wrapper.is-open .tb-cat-panel { display: block; }
.tb-cat-panel #sk-fpill-cat-row {
display: flex;
flex-direction: column;
gap: 1px;
background: transparent;
border-radius: 0;
padding: 0;
height: auto;
}
.tb-cat-panel .sk-fpill {
width: 100%;
height: 32px !important;
padding: 0 10px !important;
border-radius: 7px !important;
justify-content: flex-start;
font-size: 12.5px !important;
font-weight: 500 !important;
color: rgba(26,20,16,.65) !important;
background: transparent !important;
box-shadow: none !important;
}
.tb-cat-panel .sk-fpill:hover {
background: rgba(26,20,16,.045) !important;
color: #1A1410 !important;
}
.tb-cat-panel .sk-fpill.active {
background: rgba(26,20,16,.06) !important;
color: #1A1410 !important;
font-weight: 600 !important;
box-shadow: none !important;
}
.tb-sd-panel .tb-sd-item {
display: flex;
align-items: center;
width: 100%;
height: 32px;
padding: 0 10px;
background: transparent;
border: none;
border-radius: 7px;
font-family: var(--sans);
font-size: 12.5px;
font-weight: 500;
letter-spacing: -0.005em;
color: rgba(26,20,16,.65);
cursor: pointer;
text-align: left;
transition: background .12s, color .12s;
white-space: nowrap;
}
.tb-sd-panel .tb-sd-item:hover { background: rgba(26,20,16,.045); color: #1A1410; }
.tb-sd-panel .tb-sd-item.active { background: rgba(26,20,16,.06); color: #1A1410; font-weight: 600; }
.tb-nav-dropdown{
position: fixed;
top: 8px;
left: 8px;
height: calc(100vh - 16px);
width: 240px;
background: #FFFFFF !important;
border: none !important;
border-radius: 16px !important;
padding: 0;
z-index: 250;
overflow: hidden;
display: flex !important;
flex-direction: column;
box-shadow: 0 0 0 1px rgba(0,0,0,.04),
0 2px 8px rgba(0,0,0,.03) !important;
}
.sb-org-status{
position: absolute;
right: -2px;
bottom: -2px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #22A55A;
border: 2px solid #FFFFFF;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
transition: background 0.2s ease;
}
.tb-section-title,
#tb-section-btn,
#top-title {
color: rgba(26,20,16,.75) !important;
font-weight: 600 !important;
}
.tb-action-zone.has-content::before{
content: "";
display: none !important;
width: 1px;
height: 20px;
background: rgba(191,180,170,.45) !important;
margin: 0 12px 0 14px;
flex-shrink: 0;
}
.tb-action-zone .sk-sucursal-wrap:has(.tb-sd-wrapper) {
border: none !important;
background: transparent !important;
padding: 0 !important;
}
.tb-action-zone .sk-search-input,
.tb-action-zone .mv2-search-input,
.tb-action-zone .v3-tb-search-input{
height: 30px;
font-size: 12px;
padding-left: 28px;
padding-right: 10px;
background: #E7E5E6 !important;
border: none !important;
border-radius: 9px !important;
width: 100%;
font-family: var(--sans);
letter-spacing: -0.005em;
color: rgba(26,20,16,.80);
outline: none;
transition: background .15s;
}
.tb-action-zone .sk-search-input:focus,
.tb-action-zone .mv2-search-input:focus,
.tb-action-zone .v3-tb-search-input:focus{
background: #dfdcdd !important;
border: none !important;
box-shadow: none !important;
}
.sk-select,
.sk-cat-select,
select.sk-filter-select,
.tb-action-zone select {
background: #f2f1ef !important;
border-color: rgba(191,180,170,.45) !important;
}
/* ═══ v7.14.0 — LXTopbar Fase 2: Movimientos ═══ */
/* Hide container marker (generic) */
.lx-tb-hidden { display: none !important; }
/* Filtros (.mv2-filters) en el action-zone — quedan en linea con el resto */
.tb-action-zone .mv2-filters {
display: inline-flex;
align-items: center;
gap: 4px;
flex-wrap: nowrap;
flex-shrink: 0;
}
/* Dropdowns compactos en topbar — altura 30px, padding reducido */
.tb-action-zone .mv2-dropdown {
position: relative;
flex-shrink: 0;
}
.tb-action-zone .mv2-dd-btn {
height: 30px !important;
padding: 0 8px !important;
gap: 5px !important;
background: rgba(255,255,255,.72) !important;
border: 1px solid rgba(191,180,170,.50) !important;
border-radius: 7px !important;
font-family: var(--sans);
font-size: 11.5px !important;
font-weight: 500;
letter-spacing: -0.005em;
color: rgba(26,20,16,.78);
cursor: pointer;
white-space: nowrap;
display: inline-flex;
align-items: center;
transition: background .13s, border-color .13s, color .13s;
}
.tb-action-zone .mv2-dd-btn:hover {
background: #FFFFFF !important;
border-color: rgba(191,180,170,.70) !important;
color: #1A1410;
}
.tb-action-zone .mv2-dropdown.open .mv2-dd-btn {
background: #FFFFFF !important;
border-color: rgba(191,180,170,.85) !important;
color: #1A1410;
}
.tb-action-zone .mv2-dd-btn .mv2-dd-value {
font-weight: 500;
color: inherit;
font-size: 11.5px;
letter-spacing: -0.005em;
}
.tb-action-zone .mv2-dd-btn .mv2-dd-chev {
width: 10px !important;
height: 10px !important;
stroke-width: 2.4 !important;
opacity: .55;
}
/* Menu del dropdown anclado al boton en topbar (lista vertical, igual que en la pagina) */
.tb-action-zone .mv2-dd-menu {
margin-top: 6px;
z-index: 9050;
}
/* Boton Exportar en primary-zone (junto a la campana) */
#tb-primary-zone .mv2-export-btn {
height: 30px;
padding: 0 12px;
gap: 6px;
background: rgba(26,20,16,.04);
border: 1px solid rgba(26,20,16,.08);
border-radius: 7px;
color: rgba(26,20,16,.78);
font-family: var(--sans);
font-size: 11.5px;
font-weight: 600;
letter-spacing: -0.005em;
cursor: pointer;
display: inline-flex;
align-items: center;
transition: background .13s, color .13s, border-color .13s;
}
#tb-primary-zone .mv2-export-btn:hover {
background: rgba(26,20,16,.07);
border-color: rgba(26,20,16,.14);
color: #1A1410;
}
#tb-primary-zone .mv2-export-btn svg {
width: 13px;
height: 13px;
stroke-width: 1.9;
}
/* v7.18.0 — Espacio entre search y primer filtro/select en topbar
Solo este gap es mayor (16px). Entre filtros el gap normal se mantiene. */
.tb-action-zone .sk-search-wrap + .sk-sucursal-wrap,
.tb-action-zone .sk-search-wrap + .tb-cat-wrapper,
.tb-action-zone .mv2-search-wrap + .mv2-filters,
.tb-action-zone .v3-tb-search + .v3-dropdown,
.tb-action-zone .cli-master-bar + .cli-tier-filters,
.tb-action-zone .pr-search-wrap + .pr-filter-select {
margin-left: 16px !important;
}
/* Espacio entre filtros consecutivos (select/dropdowns entre sí) */
.tb-action-zone .sk-sucursal-wrap + .tb-cat-wrapper,
.tb-action-zone .v3-dropdown + .v3-dropdown,
.tb-action-zone .v3-dropdown + .v3-tb-export {
margin-left: 8px !important;
}
/* Movimientos: los dropdowns viven dentro de .mv2-filters */
.tb-action-zone .mv2-filters {
gap: 8px !important;
}
/* Vencimientos: export después del último dropdown */
.tb-action-zone .v3-tb-export {
margin-left: 8px !important;
}
/* ═══ v7.15.0 — LXTopbar Fase 2: Vencimientos ═══ */
/* Duplicar las CSS vars de v3 en las zonas del topbar (originalmente
estan scopeadas a #page-vencimientos y los elementos relocados las pierden) */
.tb-action-zone, #tb-primary-zone {
--v3-card: #FFFFFF;
--v3-ink: #1A1410;
--v3-ink-2: rgba(26,20,16,.62);
--v3-ink-3: rgba(26,20,16,.42);
--v3-hair: rgba(26,20,16,.10);
--v3-orange: #E8663A;
--v3-red: #C0392B;
--v3-amber: #E67E22;
--v3-green: #22A55A;
}
/* Search wrap en topbar — compacto */
.tb-action-zone .v3-tb-search {
flex: 0 1 220px;
max-width: 220px;
min-width: 160px;
position: relative;
}
.tb-action-zone .v3-tb-search-ico {
position: absolute;
left: 9px;
top: 50%;
transform: translateY(-50%);
width: 12px !important;
height: 12px !important;
color: rgba(26,20,16,.42);
}
.tb-action-zone .v3-tb-search-input {
width: 100%;
height: 30px;
padding: 0 28px 0 26px;
background: rgba(255,255,255,.72);
border: 1px solid rgba(191,180,170,.50);
border-radius: 7px;
font-family: var(--sans);
font-size: 11.5px;
font-weight: 500;
letter-spacing: -0.005em;
color: #1A1410;
outline: none;
transition: background .13s, border-color .13s;
}
.tb-action-zone .v3-tb-search-input:focus {
background: #FFFFFF;
border-color: rgba(191,180,170,.85);
}
.tb-action-zone .v3-tb-search-input::placeholder {
color: rgba(26,20,16,.40);
}
.tb-action-zone .v3-tb-search-clear {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
}
/* Dropdowns en topbar — compactos, 30px */
.tb-action-zone .v3-dropdown {
position: relative;
flex-shrink: 0;
}
.tb-action-zone .v3-dd-btn {
height: 30px !important;
padding: 0 9px !important;
gap: 6px !important;
background: rgba(255,255,255,.72) !important;
border: 1px solid rgba(191,180,170,.50) !important;
border-radius: 7px !important;
transition: background .13s, border-color .13s !important;
}
.tb-action-zone .v3-dd-btn:hover {
background: #FFFFFF !important;
border-color: rgba(191,180,170,.70) !important;
}
.tb-action-zone .v3-dropdown.is-open .v3-dd-btn {
background: #FFFFFF !important;
border-color: rgba(191,180,170,.85) !important;
}
.tb-action-zone .v3-dd-value {
font-size: 11.5px;
color: #1A1410;
letter-spacing: -0.005em;
}
.tb-action-zone .v3-dd-chevron {
width: 10px !important;
height: 10px !important;
opacity: .55;
}
/* Panel del dropdown anclado al boton en topbar */
.tb-action-zone .v3-dd-panel {
top: calc(100% + 6px);
z-index: 9050;
}
/* Boton Exportar en topbar — secundario, compacto */
.tb-action-zone .v3-tb-export {
height: 30px;
padding: 0 11px;
gap: 6px;
background: rgba(26,20,16,.04);
border: 1px solid rgba(26,20,16,.08);
border-radius: 7px;
color: rgba(26,20,16,.72);
font-size: 11.5px;
font-weight: 600;
}
.tb-action-zone .v3-tb-export:hover {
background: rgba(26,20,16,.07);
border-color: rgba(26,20,16,.14);
color: #1A1410;
}
.tb-action-zone .v3-tb-export svg {
width: 12px !important;
height: 12px !important;
}
/* Boton Agregar lote en primary-zone (junto a la campana) */
#tb-primary-zone .v3-btn-add {
height: 32px;
padding: 0 14px;
gap: 6px;
font-size: 11.5px;
border-radius: 999px;
background: var(--v3-ink);
color: #F5EFE6;
animation: none; /* anula el lx-fade-in interno */
}
#tb-primary-zone .v3-btn-add:hover {
background: #2a221c;
}
#tb-primary-zone .v3-btn-add svg {
width: 11px;
height: 11px;
}
/* ═══ v7.16.0 — LXTopbar Fase 2: Clientes ═══ */
/* ═══ v7.17.0 — LXTopbar Fase 2: Precios ═══ */
/* Search wrap compacto */
.tb-action-zone .pr-search-wrap {
display: flex;
align-items: center;
gap: 6px;
flex: 0 1 210px;
max-width: 210px;
min-width: 150px;
height: 30px !important;
background: rgba(255,255,255,.72) !important;
border: 1px solid rgba(191,180,170,.50) !important;
border-radius: 7px !important;
padding: 0 10px !important;
transition: background .13s, border-color .13s;
box-shadow: none !important;
}
.tb-action-zone .pr-search-wrap:focus-within {
background: #FFFFFF !important;
border-color: rgba(191,180,170,.85) !important;
box-shadow: none !important;
}
.tb-action-zone .pr-search-wrap svg {
width: 12px !important;
height: 12px !important;
flex-shrink: 0;
color: rgba(26,20,16,.42);
}
.tb-action-zone .pr-search-input {
font-size: 11.5px;
color: #1A1410;
}
.tb-action-zone .pr-search-input::placeholder { color: rgba(26,20,16,.40); }
/* Select categoria compacto — hereda .tb-action-zone select global */
.tb-action-zone .pr-filter-select {
height: 30px !important;
padding: 0 9px !important;
border: 1px solid rgba(191,180,170,.50) !important;
border-radius: 7px !important;
background: rgba(255,255,255,.72) !important;
font-size: 11.5px !important;
color: rgba(26,20,16,.78) !important;
outline: none;
cursor: pointer;
transition: border-color .13s, background .13s;
}
.tb-action-zone .pr-filter-select:focus {
border-color: rgba(191,180,170,.85) !important;
background: #FFFFFF !important;
box-shadow: none !important;
}
/* Boton Guardar en primary-zone — preserva la animacion de exito */
#tb-primary-zone .pr-save-btn {
height: 32px;
padding: 0 14px;
font-size: 11.5px !important;
border-radius: 999px;
gap: 6px;
animation: none !important;
}
#tb-primary-zone .pr-save-btn .pr-btn-label svg {
width: 10px;
height: 10px;
}
/* Search bar compacto en topbar */
.tb-action-zone .cli-master-bar {
flex: 0 1 220px;
max-width: 220px;
min-width: 150px;
display: flex;
align-items: center;
gap: 0;
margin: 0;
}
.tb-action-zone .cli-master-bar input {
width: 100%;
height: 30px;
min-height: 0 !important;
padding: 0 10px;
background: rgba(255,255,255,.72) !important;
border: 1px solid rgba(191,180,170,.50) !important;
border-radius: 7px !important;
font-family: var(--sans);
font-size: 11.5px;
color: #1A1410;
outline: none;
transition: background .13s, border-color .13s;
}
.tb-action-zone .cli-master-bar input:focus {
background: #FFFFFF !important;
border-color: rgba(191,180,170,.85) !important;
box-shadow: none;
}
.tb-action-zone .cli-master-bar input::placeholder { color: rgba(26,20,16,.40); }
/* Tier-pills compactas en topbar */
.tb-action-zone .cli-tier-filters {
display: inline-flex;
gap: 2px;
background: rgba(26,20,16,.05);
border-radius: 999px;
padding: 3px;
flex-shrink: 0;
}
.tb-action-zone .cli-tier-btn {
height: 24px;
padding: 0 10px !important;
font-size: 11px !important;
font-weight: 600;
border-radius: 999px;
color: rgba(26,20,16,.60);
background: transparent;
border: none;
cursor: pointer;
transition: background .12s, color .12s;
white-space: nowrap;
}
.tb-action-zone .cli-tier-btn:hover { color: #1A1410; background: rgba(255,255,255,.70); }
.tb-action-zone .cli-tier-btn.active { background: #FFFFFF !important; color: #1A1410 !important; box-shadow: 0 1px 2px rgba(26,20,16,.08); }
/* CTA Nuevo cliente en primary-zone */
/* v7.18.0: Lacca Nera style (override del orange legacy) */
#tb-primary-zone .cli-btn-new {
height: 32px;
padding: 0 14px;
font-size: 11.5px !important;
border-radius: 9px;
background: linear-gradient(158deg, #261d15 0%, #0d0a07 100%) !important;
border: none !important;
color: rgba(245,235,215,.90) !important;
margin: 0;
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
cursor: pointer;
letter-spacing: -0.01em;
position: relative;
overflow: hidden;
animation: none !important;
}
#tb-primary-zone .cli-btn-new svg { width: 10px !important; height: 10px !important; }
/* ══════════════════════════════════════════════════════════════════
v7.18.0 — SISTEMA 3D EMBOSSED
Inputs, selects, botones y sidebar activo emergen del papel.
Gris sidebar #f2f1ef · border-radius: 9px · focus sin naranja.
══════════════════════════════════════════════════════════════════ */
/* ── 1 & 2. INPUTS Y SELECTS IN-PAGE: mismo estilo que btn Exportar ── */
.sk-search-input,
.mv2-search-input,
.v3-tb-search-input,
.pr-search-input,
.cli-master-bar input,
.pr-filter-select {
background: #E7E5E6 !important;
border: none !important;
border-radius: 9px !important;
box-shadow: none !important;
color: rgba(26,20,16,.78) !important;
font-family: "Inter", system-ui, sans-serif !important;
font-size: 11.5px !important;
font-weight: 600 !important;
transition: background .15s !important;
}
.sk-search-input:hover,.mv2-search-input:hover,.v3-tb-search-input:hover,
.pr-search-input:hover,.cli-master-bar input:hover,.pr-filter-select:hover {
background: #dfdcdd !important;
}
.sk-search-input:focus,.mv2-search-input:focus,.v3-tb-search-input:focus,
.pr-search-input:focus,.cli-master-bar input:focus,.pr-filter-select:focus {
background: #dfdcdd !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* Wrappers: transparentes */
.sk-search-wrap,.mv2-search-wrap,.v3-tb-search,.pr-search-wrap {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.pr-search-wrap:hover { background: rgba(26,20,16,.07) !important; border-color: rgba(26,20,16,.14) !important; }
.pr-search-wrap:focus-within { background: rgba(26,20,16,.06) !important; border-color: rgba(26,20,16,.20) !important; }
/* ── 3. BOTONES: radius 9px en todos los CTAs de módulos ────────── */
.sk-btn-primary,
.v3-btn-add,
.cli-btn-new,
.pr-save-btn,
.mv2-export-btn,
.v3-tb-export,
#tb-primary-zone .sk-btn-primary,
#tb-primary-zone .v3-btn-add,
#tb-primary-zone .cli-btn-new,
#tb-primary-zone .pr-save-btn,
#tb-primary-zone .mv2-export-btn {
border-radius: var(--r-ctrl);
}
/* Ghost/export buttons en topbar también */
.tb-action-zone .mv2-export-btn,
.tb-action-zone .v3-tb-export {
border-radius: var(--r-ctrl) !important;
}
/* ── 4. MISMO ESTILO QUE BOTON EXPORTAR: flat, hairline, semi-bold ─── */
/* v7.18.0: inputs, selects y dropdowns custom = exactamente el estilo del btn Exportar
bg: rgba(26,20,16,.04) · border: 1px rgba(26,20,16,.08) · r:9px · no shadow */
.tb-action-zone input,
.tb-action-zone select,
.tb-action-zone .tb-collapse-toggle,
.tb-action-zone .mv2-dd-btn,
.tb-action-zone .v3-dd-btn,
.tb-action-zone .pr-search-wrap {
background: #E7E5E6 !important;
border: none !important;
border-radius: 9px !important;
box-shadow: none !important;
color: rgba(26,20,16,.78) !important;
font-family: "Inter", system-ui, sans-serif !important;
font-size: 11.5px !important;
font-weight: 600 !important;
height: 32px !important;
}
/* Hover */
.tb-action-zone input:hover,
.tb-action-zone select:hover,
.tb-action-zone .tb-collapse-toggle:hover,
.tb-action-zone .mv2-dd-btn:hover,
/* Focus (solo inputs) */
.tb-action-zone input:focus {
background: #dfdcdd !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* Placeholder — mismo tono que el btn Exportar */
.tb-action-zone input::placeholder { color: rgba(26,20,16,.42) !important; font-weight: 400 !important; }
/* Search wrappers — transparentes, solo el input tiene el estilo */
.tb-action-zone .mv2-search-wrap,
.tb-action-zone .v3-tb-search,
.tb-action-zone .sk-search-wrap {
background: transparent !important;
border: none !important;
box-shadow: none !important;
height: 32px !important;
}
/* Search inputs en topbar — estilo unificado v7.28.0 */
.tb-action-zone .mv2-search-wrap .mv2-search-input,
.tb-action-zone .mv2-search-input,
.tb-action-zone .v3-tb-search-input,
.tb-action-zone .cli-master-bar input,
.tb-action-zone .pr-search-input {
background: #E7E5E6 !important;
border: none !important;
border-radius: 9px !important;
box-shadow: none !important;
font-size: 11.5px !important;
font-weight: 600 !important;
height: 32px !important;
}
.tb-action-zone .mv2-search-input:focus,
.tb-action-zone .v3-tb-search-input:focus,
.tb-action-zone .cli-master-bar input:focus,
.tb-action-zone .pr-search-input:focus {
background: #dfdcdd !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* ── 5. TITLE-ONLY + ICONS — todos los selects muestran solo el título ── */
/* Ocultar valores — solo el título es visible */
.tb-action-zone .mv2-dd-value { display: none !important; }
.tb-action-zone .v3-dd-value { display: none !important; }
/* mv2-dd-label: de mono-uppercase a texto normal legible */
.tb-action-zone .mv2-dd-btn .mv2-dd-label {
display: inline !important;
font-family: var(--sans) !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
text-transform: none !important;
color: rgba(26,20,16,.78) !important;
margin-right: 0 !important;
}
/* v3-dd-content: apilar en fila ya que solo hay un elemento */
.tb-action-zone .v3-dd-content { flex-direction: row !important; align-items: center !important; gap: 0 !important; }
.tb-action-zone .v3-dd-eyebrow {
font-family: var(--sans) !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
text-transform: none !important;
color: rgba(26,20,16,.78) !important;
}
/* ── Iconos via ::before para dropdowns de Movimientos ── */
.tb-action-zone .mv2-dd-btn::before {
content: '';
display: inline-block;
width: 13px; height: 13px;
flex-shrink: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 5px;
opacity: .55;
}
/* Rango → calendario */
.tb-action-zone .mv2-dropdown[data-name="rango"] .mv2-dd-btn::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1410' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
/* Tipo → filtro */
.tb-action-zone .mv2-dropdown[data-name="tipo"] .mv2-dd-btn::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1410' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E");
}
/* Pago → tarjeta */
.tb-action-zone .mv2-dropdown[data-name="pago"] .mv2-dd-btn::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1410' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E");
}
/* Local (mv) → pin */
.tb-action-zone .mv2-dropdown[data-name="local"] .mv2-dd-btn::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1410' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
/* ── Iconos para dropdowns de Vencimientos ── */
.tb-action-zone .v3-dd-btn::before {
content: '';
display: inline-block;
width: 13px; height: 13px;
flex-shrink: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 6px;
opacity: .55;
}
/* Estado → círculo con punto */
.tb-action-zone #v3-dd-estado .v3-dd-btn::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1410' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%231A1410' stroke='none'/%3E%3C/svg%3E");
}
/* Local (v3) → pin */
.tb-action-zone #v3-dd-local .v3-dd-btn::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1410' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
/* ── Icono en tb-ct-label (Stock: Sucursal + Categoría — inyectado por JS) ── */
.tb-action-zone .tb-collapse-toggle svg:first-child {
flex-shrink: 0;
opacity: .55;
}
/* ── 5. CUSTOM DROPDOWN BUTTONS en topbar ────────────────────────── */
/* .tb-collapse-toggle = Categoría y Sucursal custom (botones, no select) — v7.28.0 unificado */
.tb-action-zone .tb-collapse-toggle,
.tb-action-zone .mv2-dd-btn,
.tb-action-zone .v3-dd-btn {
background: #E7E5E6 !important;
border: none !important;
border-radius: 9px !important;
height: 32px !important;
font-size: 11.5px !important;
font-weight: 600 !important;
box-shadow: none !important;
transition: background .15s !important;
}
.tb-action-zone .tb-collapse-toggle:hover,
.tb-action-zone .mv2-dd-btn:hover,
.tb-action-zone .v3-dd-btn:hover {
background: #dfdcdd !important;
box-shadow: none !important;
}
.tb-action-zone .mv2-dropdown.open .mv2-dd-btn,
.tb-action-zone .v3-dropdown.is-open .v3-dd-btn,
.tb-action-zone .tb-cat-wrapper.is-open .tb-collapse-toggle {
background: #dfdcdd !important;
box-shadow: none !important;
}
/* ── 6. BOTÓN PRINCIPAL "LACCA NERA" — mismo estilo todos los módulos ── */
/* Targets: topbar primary zone + todos los CTAs in-page */
#tb-primary-zone button,
.sk-btn-primary,
.v3-btn-add,
.cli-btn-new,
.pr-save-btn,
.mv2-export-btn {
background: linear-gradient(158deg, #261d15 0%, #0d0a07 100%) !important;
color: rgba(245,235,215,.90) !important;
border: none !important;
border-radius: 9px !important;
font-family: var(--sans) !important;
font-size: 11.5px !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
position: relative !important;
overflow: hidden !important;
cursor: pointer !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
inset 0 -1px 0 rgba(0,0,0,.30),
0 2px 8px rgba(26,20,16,.28),
0 1px 2px rgba(26,20,16,.15) !important;
transition:
transform .18s cubic-bezier(.16,1,.3,1),
box-shadow .20s ease !important;
animation: none !important;
}
/* Glow naranja/ocre que asoma desde la derecha — no cubre todo el botón */
#tb-primary-zone button::before,
.sk-btn-primary::before,
.v3-btn-add::before,
.cli-btn-new::before,
.pr-save-btn::before,
.mv2-export-btn::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(to right,
rgba(232,102,58,.35) 0%,
rgba(232,102,58,.14) 30%,
rgba(232,102,58,.04) 52%,
transparent 68%
) !important;
opacity: 0 !important;
transform: none !important;
pointer-events: none !important;
transition: opacity .28s ease !important;
}
/* Hover: glow aparece + elevación */
#tb-primary-zone button:hover::before,
.sk-btn-primary:hover::before,
.v3-btn-add:hover::before,
.cli-btn-new:hover::before,
.pr-save-btn:hover::before,
.mv2-export-btn:hover::before {
opacity: 1 !important;
animation: none !important;
}
#tb-primary-zone button:hover,
.sk-btn-primary:hover,
.v3-btn-add:hover,
.cli-btn-new:hover,
.pr-save-btn:hover,
.mv2-export-btn:hover {
transform: translateY(-2px) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.14),
inset 0 -1px 0 rgba(0,0,0,.40),
0 8px 24px rgba(26,20,16,.38),
0 3px 8px rgba(26,20,16,.20) !important;
}
/* Active: press */
#tb-primary-zone button:active,
.sk-btn-primary:active,
.v3-btn-add:active,
.cli-btn-new:active,
.pr-save-btn:active,
.mv2-export-btn:active {
transform: translateY(1px) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 3px 6px rgba(0,0,0,.22),
0 1px 3px rgba(26,20,16,.15) !important;
}
#tb-primary-zone button:active::before,
.sk-btn-primary:active::before,
.v3-btn-add:active::before,
.cli-btn-new:active::before,
.pr-save-btn:active::before,
.mv2-export-btn:active::before {
opacity: 0 !important;
}
/* SVG icons heredan color del botón */
#tb-primary-zone button svg,
.sk-btn-primary svg,
.v3-btn-add svg,
.cli-btn-new svg,
.pr-save-btn .pr-btn-label svg,
.mv2-export-btn svg {
color: rgba(245,235,215,.80) !important;
stroke: rgba(245,235,215,.80) !important;
}
/* ── 7. DASHBOARD CARDS — v7.26.0 premium shadow system ────── */
/* Especificidad con ID para ganar a la consolidated rule (0,1,0 → 1,1,0) */
#page-dashboard .nd-card {
border: 1px solid rgba(26,20,16,.05) !important;
box-shadow: var(--card-shadow) !important;
background: #FFFFFF !important;
}
#page-dashboard .nd-card:hover {
border-color: rgba(26,20,16,.07) !important;
box-shadow: var(--card-shadow-hover) !important;
transform: translateY(-1px);
}
/* ══════════════════════════════════════════════════════════════════
v7.18.0 — KPI CARDS REDISEÑO EDITORIAL
══════════════════════════════════════════════════════════════════ */
/* Card shell — mantiene el estilo flat blanco con border ink */
#page-stock .sk-kpi-card {
background: #FFFFFF !important;
border: 1px solid rgba(26,20,16,.08) !important;
border-radius: var(--radius-lg);
padding: 18px 20px 14px;
display: flex !important;
flex-direction: column;
gap: 14px;
position: relative;
cursor: pointer;
transition: border-color .18s, transform .18s !important;
overflow: hidden;
box-shadow: none !important;
}
#page-stock .sk-kpi-card:hover {
border-color: rgba(26,20,16,.16) !important;
transform: translateY(-1px);
}
/* Accent line en hover (sobre el lado izquierdo, sutil) */
#page-stock .sk-kpi-card::before {
content: '';
position: absolute;
left: 0; top: 22%; bottom: 22%;
width: 2px;
background: var(--kpi-accent, transparent);
opacity: 0;
transition: opacity .25s;
}
#page-stock .sk-kpi-card:hover::before { opacity: 1; }
/* Variantes de color por tipo */
#page-stock .sk-kpi-card.k-activos { --kpi-accent: rgba(26,20,16,.45); }
#page-stock .sk-kpi-card.k-lotes { --kpi-accent: #22A55A; }
#page-stock .sk-kpi-card.k-critico { --kpi-accent: #C0392B; }
#page-stock .sk-kpi-card.k-valor { --kpi-accent: #E8663A; }
/* ── 1. TOP: eyebrow + delta chip ── */
.sk-kpi-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.sk-kpi-eyebrow {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(26,20,16,.40);
}
.sk-kpi-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: 999px;
letter-spacing: 0.03em;
background: rgba(34,165,90,.10);
color: rgba(22,84,46,.92);
white-space: nowrap;
}
.sk-kpi-delta.down { background: rgba(192,57,43,.10); color: rgba(140,30,20,.92); }
.sk-kpi-delta.flat { background: rgba(26,20,16,.06); color: rgba(26,20,16,.50); }
.sk-kpi-delta svg { width: 9px; height: 9px; stroke-width: 2.8; }
/* ── 2. CORE: número héroe + subtítulo ── */
.sk-kpi-core { display: flex; flex-direction: column; gap: 3px; }
#page-stock .sk-kpi-num {
font-family: var(--serif) !important;
font-size: 44px !important;
font-weight: 600 !important;
letter-spacing: -0.035em;
color: #1A1410 !important;
line-height: 1;
font-variant-numeric: tabular-nums !important;
font-feature-settings: "tnum" 1, "lnum" 1 !important;
font-optical-sizing: auto !important;
margin: 0;
background: none !important;
-webkit-text-fill-color: initial !important;
}
#page-stock .sk-kpi-num.is-crit { color: #C0392B !important; }
#page-stock .sk-kpi-num .cur {
font-weight: 400;
font-size: 28px;
letter-spacing: 0;
color: rgba(26,20,16,.60);
margin-right: 2px;
vertical-align: 5px;
}
.sk-kpi-num-sub {
font-size: 11.5px;
font-weight: 500;
color: rgba(26,20,16,.40);
letter-spacing: -0.005em;
}
/* Card crítica: underline decorativo bajo el número */
#page-stock .sk-kpi-card.k-critico .sk-kpi-num {
position: relative;
display: inline-block;
}
#page-stock .sk-kpi-card.k-critico .sk-kpi-num::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
height: 2px;
width: 24px;
background: #C0392B;
border-radius: 1px;
opacity: .35;
}
/* ── 3. FOOT: hairline + meta + link hover ── */
.sk-kpi-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 12px;
border-top: 1px solid rgba(26,20,16,.08);
}
.sk-kpi-meta {
font-size: 11px;
font-weight: 500;
color: rgba(26,20,16,.60);
letter-spacing: -0.005em;
display: flex;
align-items: center;
gap: 6px;
}
.sk-kpi-meta-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--kpi-accent, rgba(26,20,16,.25));
flex-shrink: 0;
}
.sk-kpi-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--sans);
font-size: 10.5px;
font-weight: 600;
color: rgba(26,20,16,.60);
letter-spacing: 0.02em;
opacity: 0;
transform: translateX(-4px);
transition: opacity .2s, transform .2s, color .15s;
white-space: nowrap;
}
#page-stock .sk-kpi-card:hover .sk-kpi-link {
opacity: 1;
transform: translateX(0);
color: #1A1410;
}
/* Reset/hide elementos viejos por si quedan */
#page-stock .sk-kpi-icon,
#page-stock .sk-kpi-body,
#page-stock .sk-kpi-content,
#page-stock .sk-kpi-cta,
#page-stock .sk-kpi-label,
#page-stock .sk-kpi-val,
#page-stock .sk-kpi-sub,
#page-stock .sk-kpi-val-sm,
/* Pero ojo: los #sk-total, #sk-kg-total, #sk-crit, #sk-valor que también
son .sk-kpi-val NO deben ocultarse porque ahora son .sk-kpi-num.
Esto está OK porque los nuevos NO tienen la clase .sk-kpi-val. */
/* ══════════════════════════════════════════════════════════════════
v7.18.0 — DASHBOARD "Cortes más vendidos" (ranking editorial)
══════════════════════════════════════════════════════════════════ */
.nd-rank-row {
display: grid !important;
grid-template-columns: 38px 1fr auto;
align-items: center;
gap: 14px;
padding: 10px 0;
border-bottom: 1px solid rgba(26,20,16,.06);
}
.nd-rank-row:last-child { border-bottom: none; }
/* Número de puesto — Fraunces editorial */
.nd-rank-num {
font-family: var(--serif);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.025em;
color: rgba(26,20,16,.30);
line-height: 1;
text-align: center;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
}
.nd-rank-row:nth-child(1) .nd-rank-num { color: #C8962A; } /* oro */
.nd-rank-row:nth-child(2) .nd-rank-num { color: #8A99A8; } /* plata */
.nd-rank-row:nth-child(3) .nd-rank-num { color: #A87047; } /* bronce */
/* Info: name + meta + bar */
.nd-rank-info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.nd-rank-name {
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
letter-spacing: -0.01em;
color: #1A1410;
line-height: 1.15;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nd-rank-meta {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 500;
color: rgba(26,20,16,.42);
letter-spacing: 0.02em;
}
.nd-rank-bar-wrap {
height: 3px;
background: rgba(26,20,16,.06);
border-radius: 2px;
overflow: hidden;
margin-top: 2px;
}
.nd-rank-bar {
height: 100%;
/* v7.95.2 · Vibrant Linear paleta azul → naranja */
background: linear-gradient(90deg, #0A84FF 0%, #FF6B35 100%);
border-radius: 2px;
transition: width .4s cubic-bezier(.16,1,.3,1);
}
/* Precio — Fraunces hero */
.nd-rank-row .nd-rank-price,
#page-dashboard .nd-rank-price {
font-family: var(--serif) !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: -0.018em;
color: #1A1410 !important;
font-variant-numeric: tabular-nums !important;
font-feature-settings: "tnum" 1, "lnum" 1 !important;
font-optical-sizing: auto !important;
white-space: nowrap;
text-align: right;
line-height: 1;
}
/* v7.95.2 · Stock bajo bar — semántico (rojo indica criticidad) */
.nd-sb-bar-wrap {
height: 3px;
background: rgba(26,20,16,.06);
border-radius: 2px;
overflow: hidden;
margin-top: 4px;
}
.nd-sb-bar {
height: 100%;
background: linear-gradient(90deg, #E05252 0%, #F86969 100%);
border-radius: 2px;
transition: width .4s cubic-bezier(.16,1,.3,1);
}
/* ══════════════════════════════════════════════════════════════════
v7.18.0 — VENTAS ROWS EDITORIAL
Usadas en: Dashboard "Ventas recientes" (.nd-venta-row)
Cierre de caja "Detalle del día" (.cc2-row)
══════════════════════════════════════════════════════════════════ */
.nd-venta-row,
.cc2-row {
display: grid !important;
grid-template-columns: 36px 1fr auto auto;
align-items: center;
gap: 12px;
padding: 10px 4px;
border-bottom: 1px solid rgba(26,20,16,.06);
transition: background .12s;
}
.nd-venta-row:last-child,
.cc2-row-wrap:last-child .cc2-row { border-bottom: none; }
.cc2-row-clickable { cursor: pointer; }
.cc2-row-clickable:hover { background: rgba(26,20,16,.025); }
/* Avatar circular con iniciales */
.nd-venta-avatar,
.cc2-row-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(26,20,16,.06);
color: rgba(26,20,16,.62);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.04em;
flex-shrink: 0;
}
/* Info: name + meta */
.cc2-row-info { min-width: 0; }
.nd-venta-name,
.cc2-row-name {
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
letter-spacing: -0.01em;
color: #1A1410;
line-height: 1.15;
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nd-venta-meta,
.cc2-row-meta {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 500;
color: rgba(26,20,16,.42);
letter-spacing: 0.02em;
line-height: 1.1;
display: inline-flex;
align-items: center;
gap: 4px;
}
/* Chevron expansible */
.cc2-row-chevron {
font-size: 9px;
color: rgba(26,20,16,.30);
margin-left: 4px;
transition: transform .15s;
}
.cc2-row-clickable.is-open .cc2-row-chevron { transform: rotate(180deg); }
/* Pago: dot + label */
.nd-pago-pill,
.cc2-pago-pill {
display: inline-flex !important;
align-items: center;
gap: 6px;
font-family: var(--sans) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
color: rgba(26,20,16,.78) !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
text-transform: none !important;
white-space: nowrap;
}
.nd-pago-pill::before,
.cc2-pago-pill::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(26,20,16,.30);
flex-shrink: 0;
}
.nd-pago-pill.efectivo::before,
.cc2-pago-pill.efectivo::before { background: #C8962A; }
.nd-pago-pill.debito::before,
.cc2-pago-pill.debito::before { background: rgba(26,20,16,.55); }
.nd-pago-pill.transferencia::before,
.cc2-pago-pill.transferencia::before{ background: #22A55A; }
.nd-pago-pill.caja::before,
.cc2-pago-pill.caja::before { background: #7a4a16; }
/* v7.19.0: stack de pills para ventas con múltiples medios */
.cc2-pago-stack {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.cc2-pago-pill.cc2-pago-pill-mini {
font-size: 10px !important;
opacity: .88;
}
.cc2-pago-pill.cc2-pago-pill-mini::before {
width: 5px; height: 5px;
}
/* Desglose de pago en el ticket expandido */
.cc2-detail-desglose {
margin-top: 10px;
padding: 10px 12px;
background: rgba(26,20,16,.025);
border: 1px solid rgba(26,20,16,.06);
border-radius: 9px;
}
.cc2-detail-desglose-lbl {
font-family: var(--mono);
font-size: 8.5px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(26,20,16,.40);
margin-bottom: 7px;
}
.cc2-detail-desglose-row {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
font-family: var(--sans);
font-size: 12px;
color: rgba(26,20,16,.78);
}
.cc2-detail-desglose-row .cc2-dot {
width: 6px; height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.cc2-detail-desglose-amt {
margin-left: auto;
font-family: var(--mono);
font-weight: 600;
color: #1A1410;
font-variant-numeric: tabular-nums;
}
/* Total: Fraunces hero (specificity arriba para vencer al [class*="-total"]) */
.nd-venta-row .nd-venta-total,
.cc2-row .cc2-row-total,
#page-dashboard .nd-venta-total,
#page-cierre .cc2-row-total {
font-family: var(--serif) !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: -0.018em;
color: #1A1410 !important;
font-variant-numeric: tabular-nums !important;
font-feature-settings: "tnum" 1, "lnum" 1 !important;
font-optical-sizing: auto !important;
white-space: nowrap;
text-align: right;
line-height: 1;
}
/* Expandable detail (cc2 only) */
.cc2-row-detail {
background: rgba(26,20,16,.02);
border-bottom: 1px solid rgba(26,20,16,.06);
padding: 10px 16px 12px 52px;
display: flex;
flex-direction: column;
gap: 6px;
}
.cc2-detail-item {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 12px;
align-items: center;
font-size: 11.5px;
}
.cc2-detail-prod {
font-family: var(--sans);
font-weight: 500;
color: rgba(26,20,16,.78);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cc2-detail-qty {
font-family: var(--mono);
font-size: 10.5px;
color: rgba(26,20,16,.42);
letter-spacing: 0.02em;
}
.cc2-detail-sub {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: rgba(26,20,16,.62);
font-variant-numeric: tabular-nums;
text-align: right;
min-width: 60px;
}
.cc2-detail-desc {
font-family: var(--sans);
font-size: 11px;
font-style: italic;
color: #22A55A;
padding: 4px 0 0;
border-top: 1px dashed rgba(26,20,16,.08);
margin-top: 4px;
}
.cc2-detail-total {
font-family: var(--serif);
font-size: 13px;
font-weight: 600;
letter-spacing: -0.012em;
color: #1A1410;
text-align: right;
padding-top: 6px;
border-top: 1px solid rgba(26,20,16,.08);
margin-top: 4px;
}
/* Empty state */
.nd-empty {
font-size: 12px;
color: rgba(26,20,16,.40);
font-style: italic;
text-align: center;
padding: 24px 0;
}
/* ══════════════════════════════════════════════════════════════════
v7.18.0 — CLIENTES DRAWER: rediseño editorial
══════════════════════════════════════════════════════════════════ */
/* Cuando el drawer está abierto, neutralizar el transform de la page
(`page-enter` deja una matrix identity que crea containing block
para `position: fixed` y rompe el anclaje al viewport) */
#page-clientes.cli-drawer-open {
transform: none;
animation: none !important;
}
/* SHELL — contenedor transparente, sin mask (el mask iría al drawer hijo) */
#page-clientes.cli-drawer-open .cli-drawer-shell {
position: fixed;
inset: 0 !important;
top: var(--topbar, 54px);
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
z-index: 99;
display: block !important;
pointer-events: auto;
}
/* OVERLAY masked — vía ::before del shell, NO afecta al drawer (es sibling) */
#page-clientes.cli-drawer-open .cli-drawer-shell::before {
content: '';
position: absolute;
inset: 0;
background: rgba(250,246,241,.35);
backdrop-filter: blur(12px) saturate(0.85);
-webkit-backdrop-filter: blur(12px) saturate(0.85);
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
transparent 44%,
rgba(0,0,0,.15) 57%,
rgba(0,0,0,.72) 70%,
black 80%,
black 93%,
rgba(0,0,0,.10) 97%,
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0%,
transparent 44%,
rgba(0,0,0,.15) 57%,
rgba(0,0,0,.72) 70%,
black 80%,
black 93%,
rgba(0,0,0,.10) 97%,
transparent 100%
);
pointer-events: none;
z-index: 0;
}
/* Drawer flotante — mismo patrón que Movimientos (.mv-inspector) */
#page-clientes .cli-drawer.cd-v2 {
position: fixed;
top: calc(var(--topbar, 54px) + 12px);
right: 12px;
bottom: 12px;
left: auto;
width: 440px;
max-width: 94vw;
/* Altura calculada explícita — top + bottom solos no constraina con height:auto */
height: calc(100vh - var(--topbar, 54px) - 24px);
max-height: calc(100vh - var(--topbar, 54px) - 24px);
background: #FFFFFF !important;
border-radius: 14px;
border: 1px solid rgba(26,20,16,.08) !important;
overflow: hidden;
display: flex !important;
flex-direction: column;
box-shadow:
0 12px 40px rgba(26,20,16,.18),
0 4px 12px rgba(26,20,16,.08) !important;
padding: 0;
grid-template-rows: none;
z-index: 100;
}
/* ── HEADER ── */
#page-clientes .cd-head {
padding: 22px 24px 18px;
border-bottom: 1px solid rgba(26,20,16,.08);
position: relative;
flex-shrink: 0;
}
/* ── BODY scrollable ── */
#page-clientes .cd-body {
flex: 1 1 auto;
min-height: 0; /* clave: permite que flex item shrink y active overflow */
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(26,20,16,.18) transparent;
}
#page-clientes .cd-body::-webkit-scrollbar { width: 6px; }
#page-clientes .cd-body::-webkit-scrollbar-thumb { background: rgba(26,20,16,.18); border-radius: 999px; }
#page-clientes .cd-head { flex-shrink: 0 !important; }
/* ── SECTIONS ── */
#page-clientes .cd-sec {
padding: 18px 24px;
border-bottom: 1px solid rgba(26,20,16,.06);
}
#page-clientes .cd-sec:last-child { border-bottom: none; }
#page-clientes .cd-sec-kpis { padding: 16px 20px; }
#page-clientes .cd-sec-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(26,20,16,.40);
margin-bottom: 14px;
}
/* ── PUNTOS / NIVEL ── */
#page-clientes .cd-pts-wrap {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
#page-clientes .cd-pts-num {
display: inline-flex;
align-items: baseline;
gap: 8px;
font-family: var(--serif);
font-size: 36px;
font-weight: 600;
letter-spacing: -0.03em;
color: #1A1410;
font-variant-numeric: tabular-nums;
line-height: 1;
}
#page-clientes .cd-pts-star {
font-family: var(--sans);
font-size: 22px;
color: #C8962A;
line-height: 1;
}
#page-clientes .cd-pts-next {
font-size: 11px;
color: rgba(26,20,16,.40);
letter-spacing: -0.005em;
text-align: right;
font-style: italic;
}
#page-clientes .cd-prog-track {
height: 4px;
background: rgba(26,20,16,.05);
border-radius: 2px;
overflow: hidden;
}
#page-clientes .cd-prog-fill {
height: 100%;
background: linear-gradient(90deg, #A87047 0%, #C8962A 50%, #7B5C9E 100%);
border-radius: 2px;
transition: width .4s;
}
#page-clientes .cd-prog-marks {
display: flex;
justify-content: space-between;
margin-top: 6px;
font-family: var(--mono);
font-size: 8.5px;
font-weight: 600;
letter-spacing: 0.10em;
color: rgba(26,20,16,.25);
}
#page-clientes .cd-prog-marks span.active { color: rgba(26,20,16,.60); }
/* ── 4 KPIs ── */
#page-clientes .cd-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
}
#page-clientes .cd-kpi {
padding: 8px 4px;
text-align: center;
}
#page-clientes .cd-kpi-val {
font-family: var(--serif);
font-size: 19px;
font-weight: 600;
letter-spacing: -0.025em;
color: #1A1410;
font-variant-numeric: tabular-nums;
line-height: 1.1;
margin-bottom: 3px;
white-space: nowrap;
}
#page-clientes .cd-kpi-val.zero { color: rgba(26,20,16,.25); }
#page-clientes .cd-kpi-val.green { color: #22A55A; }
#page-clientes .cd-kpi-lbl {
font-family: var(--mono);
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(26,20,16,.40);
}
/* ── CONTACTO ── */
#page-clientes .cd-contact {
display: flex;
flex-direction: column;
gap: 9px;
}
#page-clientes .cd-cline {
display: flex;
align-items: center;
gap: 10px;
font-size: 12.5px;
color: rgba(26,20,16,.78);
}
#page-clientes .cd-cline-ico {
width: 14px; height: 14px;
color: rgba(26,20,16,.40);
flex-shrink: 0;
}
#page-clientes .cd-cline.is-empty { color: rgba(26,20,16,.25); }
#page-clientes .cd-cline.is-empty .cd-cline-ico { color: rgba(26,20,16,.25); }
#page-clientes .cd-cline a { color: inherit; text-decoration: none; }
#page-clientes .cd-cline a:hover { color: #1A1410; }
#page-clientes .cd-cline-wa a:hover { color: #22A55A; }
/* ── NOTAS ── */
#page-clientes .cd-note {
font-size: 12.5px;
font-style: italic;
color: rgba(26,20,16,.78);
background: rgba(26,20,16,.03);
padding: 10px 12px;
border-left: 2px solid rgba(26,20,16,.25);
border-radius: 4px;
line-height: 1.5;
}
/* ── HISTORIAL ── */
#page-clientes .cd-hist-list {
display: flex;
flex-direction: column;
}
#page-clientes .cd-hist-row {
display: grid;
grid-template-columns: 70px 1fr auto;
gap: 12px;
align-items: center;
padding: 9px 0;
border-bottom: 1px solid rgba(26,20,16,.05);
}
#page-clientes .cd-hist-row:last-child { border-bottom: none; }
#page-clientes .cd-hist-row:first-child { padding-top: 0; }
#page-clientes .cd-hist-date {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 500;
color: rgba(26,20,16,.40);
letter-spacing: 0.02em;
}
#page-clientes .cd-hist-desc {
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
color: rgba(26,20,16,.78);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: -0.005em;
}
#page-clientes .cd-hist-amt {
font-family: var(--serif);
font-size: 13px;
font-weight: 600;
letter-spacing: -0.01em;
color: #1A1410;
font-variant-numeric: tabular-nums;
text-align: right;
}
#page-clientes .cd-hist-empty {
font-size: 12px;
color: rgba(26,20,16,.40);
font-style: italic;
text-align: center;
padding: 20px 0;
}
/* ── FOOTER ── */
#page-clientes .cd-foot {
flex-shrink: 0;
padding: 14px 18px;
border-top: 1px solid rgba(26,20,16,.08);
background: #FFFFFF;
display: flex;
gap: 8px;
align-items: center;
}
#page-clientes .cd-prime {
flex: 1;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
padding: 0 16px;
border: none !important;
border-radius: 9px;
cursor: pointer;
position: relative;
overflow: hidden;
background: linear-gradient(158deg, #261d15 0%, #0d0a07 100%) !important;
color: rgba(245,235,215,.90) !important;
font-family: var(--sans) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: -0.01em;
box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.30), 0 2px 8px rgba(26,20,16,.25) !important;
transition: transform .18s, box-shadow .20s !important;
}
#page-clientes .cd-prime::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(232,102,58,.35) 0%, rgba(232,102,58,.14) 30%, rgba(232,102,58,.04) 52%, transparent 68%);
opacity: 0;
transition: opacity .28s;
pointer-events: none;
}
#page-clientes .cd-prime:hover { transform: translateY(-1px); }
#page-clientes .cd-prime:hover::before { opacity: 1; }
#page-clientes .cd-prime svg {
width: 12px;
height: 12px;
color: rgba(245,235,215,.85);
}
#page-clientes .cd-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
padding: 0 14px;
background: transparent;
border: 1px solid rgba(26,20,16,.12);
border-radius: 9px;
font-family: var(--sans);
font-size: 11.5px;
font-weight: 600;
color: rgba(26,20,16,.78);
cursor: pointer;
white-space: nowrap;
transition: background .13s, border-color .13s, color .13s;
}
#page-clientes .cd-ghost:hover {
background: rgba(26,20,16,.04);
border-color: rgba(26,20,16,.18);
color: #1A1410;
}
/* Reset legacy drawer styles that interfere */
#page-clientes .cli-drawer.cd-v2 .cli-drw-head,
#page-clientes .cli-drawer.cd-v2 .cli-drw-points,
#page-clientes .cli-drawer.cd-v2 .cli-drw-kpis,
#page-clientes .cli-drawer.cd-v2 .cli-drw-contact,
#page-clientes .cli-drawer.cd-v2 .cli-drw-history,
#page-clientes .cli-drawer.cd-v2 .cli-drw-foot { display: none !important; }
/* ══════════════════════════════════════════════════════════════════
v7.18.0 — CLIENTES TABLE: rediseño editorial (de cards a tabla)
══════════════════════════════════════════════════════════════════ */
#page-clientes .cli-master-list { padding: 0 !important; max-width: none !important; }
#page-clientes .cli-tbl {
width: 100%;
border-collapse: collapse;
background: #FFFFFF;
border: 1px solid rgba(26,20,16,.08);
border-radius: 9px;
overflow: hidden;
}
#page-clientes .cli-tbl thead tr {
background: #f2f1ef !important;
border-bottom: 1.5px solid rgba(26,20,16,.08);
}
#page-clientes .cli-tbl thead th {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(26,20,16,.40);
padding: 11px 14px;
text-align: left;
background: transparent;
white-space: nowrap;
}
#page-clientes .cli-tbl thead th.right { text-align: right; }
/* Row */
#page-clientes .cli-tbl tbody tr.cli-row {
border-bottom: 1px solid rgba(26,20,16,.08);
transition: background .12s;
cursor: pointer;
}
#page-clientes .cli-tbl tbody tr.cli-row:hover { background: rgba(26,20,16,.025); }
#page-clientes .cli-tbl tbody tr.cli-row:last-child { border-bottom: none; }
#page-clientes .cli-tbl tbody tr.cli-row.is-selected {
background: rgba(232,102,58,.05);
box-shadow: inset 3px 0 0 0 #E8663A;
}
#page-clientes .cli-tbl td {
padding: 10px 14px;
vertical-align: middle;
font-size: 13px;
}
/* CLIENTE: avatar + name + tier */
#page-clientes .cli-name-cell {
display: flex;
align-items: center;
gap: 10px;
min-width: 180px;
}
#page-clientes .cli-avatar {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
color: #1A1410;
}
/* v7.93.1 · Tiers FID v3 — SELECTO bronce champagne / PRIVADO noir / LEGADO gold */
#page-clientes .cli-avatar.t-selecto { background: linear-gradient(135deg, rgba(181,167,147,.18), rgba(156,142,127,.14)); color: #6B5F50; }
#page-clientes .cli-avatar.t-privado { background: linear-gradient(135deg, rgba(58,58,58,.10), rgba(26,26,26,.16)); color: #1A1A1A; }
#page-clientes .cli-avatar.t-legado { background: linear-gradient(135deg, rgba(216,184,114,.20), rgba(201,169,97,.18)); color: #8C6F2E; box-shadow: 0 0 0 1px rgba(201,169,97,.22); }
/* Backcompat legacy */
#page-clientes .cli-avatar.t-bronce,
#page-clientes .cli-avatar.t-plata { background: rgba(156,142,127,.14); color: #6B5F50; }
#page-clientes .cli-avatar.t-oro { background: rgba(26,26,26,.10); color: #1A1A1A; }
#page-clientes .cli-avatar.t-platino { background: rgba(201,169,97,.16); color: #8C6F2E; }
.cli-name-info { min-width: 0; flex: 1; }
#page-clientes .cli-name {
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
letter-spacing: -0.012em;
color: #1A1410;
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 180px;
}
.cli-tier {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10.5px;
font-weight: 500;
color: rgba(26,20,16,.40);
letter-spacing: 0.01em;
}
.cli-tier-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
/* v7.93.1 · Dot color identitario por nivel v3 */
.cli-tier.t-selecto .cli-tier-dot { background: #9C8E7F; }
.cli-tier.t-privado .cli-tier-dot { background: #1A1A1A; }
.cli-tier.t-legado .cli-tier-dot { background: #C9A961; box-shadow: 0 0 6px rgba(201,169,97,.4); }
/* Backcompat */
.cli-tier.t-bronce .cli-tier-dot { background: #9C8E7F; }
.cli-tier.t-plata .cli-tier-dot { background: #9C8E7F; }
.cli-tier.t-oro .cli-tier-dot { background: #1A1A1A; }
.cli-tier.t-platino .cli-tier-dot { background: #C9A961; }
/* WHATSAPP */
.cli-wa {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 11.5px;
font-weight: 500;
color: rgba(26,20,16,.78);
letter-spacing: 0.02em;
white-space: nowrap;
text-decoration: none;
}
.cli-wa:hover { color: #22A55A; }
.cli-wa-ico {
display: inline-flex;
width: 12px;
height: 12px;
color: #22A55A;
flex-shrink: 0;
}
.cli-wa-ico svg { width: 100%; height: 100%; }
.cli-wa.is-empty { color: rgba(26,20,16,.25); }
.cli-wa.is-empty .cli-wa-ico { color: rgba(26,20,16,.25); }
/* EMAIL */
.cli-email {
font-family: var(--sans);
font-size: 11.5px;
font-weight: 500;
color: rgba(26,20,16,.60);
letter-spacing: -0.005em;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
.cli-email.is-empty { color: rgba(26,20,16,.25); }
/* COMPRAS */
.cli-compras-val {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: #1A1410;
font-variant-numeric: tabular-nums;
line-height: 1;
margin-bottom: 2px;
}
.cli-compras-sub {
font-size: 10.5px;
font-weight: 500;
color: rgba(26,20,16,.40);
}
/* CAJA — saldo monetario */
.cli-caja {
font-family: var(--mono);
font-size: 12.5px;
font-weight: 600;
color: #22A55A;
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
white-space: nowrap;
}
.cli-caja.is-empty { color: rgba(26,20,16,.25); font-weight: 500; }
/* PUNTOS — héroe Fraunces */
#page-clientes .cli-pts-cell { text-align: right; }
.cli-pts {
display: inline-flex;
align-items: baseline;
gap: 5px;
font-family: var(--serif);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.02em;
color: #1A1410;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.cli-pts-star {
font-family: var(--sans);
font-size: 13px;
color: #C8962A;
line-height: 1;
}
.cli-pts.zero { color: rgba(26,20,16,.25); }
.cli-pts.zero .cli-pts-star { color: rgba(26,20,16,.25); }
/* ALTA */
.cli-alta {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 500;
color: rgba(26,20,16,.40);
letter-spacing: 0.02em;
white-space: nowrap;
}
/* ACTIONS — hover only */
.cli-acts {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 2px;
opacity: 0;
transition: opacity .15s;
}
#page-clientes .cli-row:hover .cli-acts { opacity: 1; }
#page-clientes .cli-act-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: transparent !important;
border: none !important;
border-radius: 8px;
color: rgba(26,20,16,.42) !important;
cursor: pointer;
padding: 0;
margin: 0;
transition: background .14s, color .14s;
}
#page-clientes .cli-act-btn svg { width: 14px !important; height: 14px !important; }
#page-clientes .cli-act-btn:hover { background: rgba(26,20,16,.08) !important; color: #1A1410 !important; }
#page-clientes .cli-act-btn.del { color: rgba(192,57,43,.55) !important; }
#page-clientes .cli-act-btn.del:hover {
background: rgba(192,57,43,.10) !important;
color: #C0392B !important;
}
/* ══════════════════════════════════════════════════════════════════
v7.18.0 — VENCIMIENTOS TABLE: rediseño editorial
══════════════════════════════════════════════════════════════════ */
/* Header gris unificado */
#page-vencimientos .vc2-table thead tr {
background: #f2f1ef !important;
border-bottom: 1.5px solid rgba(26,20,16,.08) !important;
}
.vc-group.g-vencido .vc-group-dot { background: #C0392B; }
.vc-group.g-hoy .vc-group-dot { background: #C0392B; }
.vc-group.g-vencido .vc-group-label { color: #C0392B; }
.vc-dias.d-vencido { background: rgba(192,57,43,.12); color: #C0392B; }
.vc-dias.d-vencido .vc-dias-dot { background: #C0392B; }
.vc-dias.d-hoy { background: rgba(192,57,43,.12); color: #C0392B; }
.vc-dias.d-hoy .vc-dias-dot { background: #C0392B; }
.vc-dias.d-urgente { background: rgba(230,126,34,.12); color: #E67E22; }
.vc-dias.d-urgente .vc-dias-dot { background: #E67E22; }
.vc-dias.d-semana { background: rgba(232,102,58,.10); color: #E8663A; }
.vc-dias.d-semana .vc-dias-dot { background: #E8663A; }
.vc-dias.d-bien { background: rgba(26,20,16,.05); color: rgba(26,20,16,.60); }
.vc-dias.d-bien .vc-dias-dot { background: rgba(26,20,16,.25); }
/* ACTIONS — override legacy td:last-child display:flex */
#page-vencimientos .vc2-table tbody td:last-child {
display: table-cell !important;
vertical-align: middle !important;
white-space: nowrap;
text-align: right;
}
#page-vencimientos .vc-act-btn.del { color: rgba(192,57,43,.55) !important; }
#page-vencimientos .vc-act-btn.del:hover {
background: rgba(192,57,43,.10) !important;
color: #C0392B !important;
}
/* ══════════════════════════════════════════════════════════════════
v7.18.0 — MOVIMIENTOS KPI Cards (editorial, 4 cards)
══════════════════════════════════════════════════════════════════ */
#page-movimientos .mv2-kpi-strip {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 22px !important;
}
/* Card shell */
#page-movimientos .mv2-kpi {
background: #FFFFFF !important;
border: 1px solid rgba(26,20,16,.08) !important;
border-radius: 9px;
padding: 18px 20px 14px;
display: flex !important;
flex-direction: column;
gap: 14px;
position: relative;
cursor: default;
transition: border-color .18s, transform .18s !important;
overflow: hidden;
box-shadow: none !important;
}
#page-movimientos .mv2-kpi:hover {
border-color: rgba(26,20,16,.16) !important;
transform: translateY(-1px);
}
/* Accent line en hover */
#page-movimientos .mv2-kpi::before {
content: '';
position: absolute;
left: 0; top: 22%; bottom: 22%;
width: 2px;
background: var(--kpi-accent, transparent);
opacity: 0;
transition: opacity .25s;
}
#page-movimientos .mv2-kpi:hover::before { opacity: 1; }
/* Variantes */
#page-movimientos .mv2-kpi.k-activos { --kpi-accent: rgba(26,20,16,.45); }
#page-movimientos .mv2-kpi.k-valor { --kpi-accent: #E8663A; }
#page-movimientos .mv2-kpi.k-critico { --kpi-accent: #C0392B; }
/* Top: eyebrow + delta chip */
#page-movimientos .mv2-kpi-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.mv2-kpi-eyebrow {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(26,20,16,.40);
}
.mv2-kpi-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: 999px;
letter-spacing: 0.03em;
background: rgba(26,20,16,.06);
color: rgba(26,20,16,.50);
white-space: nowrap;
}
.mv2-kpi-delta.up { background: rgba(34,165,90,.10); color: rgba(22,84,46,.92); }
.mv2-kpi-delta.down { background: rgba(192,57,43,.10); color: rgba(140,30,20,.92); }
.mv2-kpi-delta.flat { background: rgba(26,20,16,.06); color: rgba(26,20,16,.50); }
/* Core: número héroe + sub */
#page-movimientos .mv2-kpi-core {
display: flex;
flex-direction: column;
gap: 3px;
}
#page-movimientos .mv2-kpi-num {
font-family: var(--serif) !important;
font-size: 38px !important;
font-weight: 600 !important;
letter-spacing: -0.035em;
color: #1A1410 !important;
line-height: 1;
font-variant-numeric: tabular-nums !important;
font-feature-settings: "tnum" 1, "lnum" 1 !important;
font-optical-sizing: auto !important;
margin: 0;
text-align: left !important;
background: none !important;
-webkit-text-fill-color: initial !important;
}
#page-movimientos .mv2-kpi-num.is-crit { color: #C0392B !important; }
.mv2-kpi-num-sub {
font-size: 11.5px;
font-weight: 500;
color: rgba(26,20,16,.40);
letter-spacing: -0.005em;
}
/* Card crítica: underline decorativo bajo el número */
#page-movimientos .mv2-kpi.k-critico .mv2-kpi-num {
position: relative;
display: inline-block;
}
#page-movimientos .mv2-kpi.k-critico .mv2-kpi-num::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
height: 2px;
width: 24px;
background: #C0392B;
border-radius: 1px;
opacity: .35;
}
/* Foot: hairline + meta */
#page-movimientos .mv2-kpi-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 12px;
border-top: 1px solid rgba(26,20,16,.08);
}
.mv2-kpi-meta {
font-size: 11px;
font-weight: 500;
color: rgba(26,20,16,.60);
letter-spacing: -0.005em;
display: flex;
align-items: center;
gap: 6px;
}
.mv2-kpi-meta b {
font-weight: 700;
color: #1A1410;
font-variant-numeric: tabular-nums;
}
.mv2-kpi-meta-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--kpi-accent, rgba(26,20,16,.25));
flex-shrink: 0;
}
/* Hide legacy elements */
#page-movimientos .mv2-kpi .mv2-kpi-label,
#page-movimientos .mv2-kpi .mv2-kpi-value { display: none !important; }
/* ══════════════════════════════════════════════════════════════════
v7.18.0 — MOVIMIENTOS TABLE: rediseño editorial
══════════════════════════════════════════════════════════════════ */
/* Header gris + thead → unifica con Stock */
#page-movimientos .mv-table thead tr {
background: #f2f1ef !important;
border-bottom: 1.5px solid rgba(26,20,16,.08) !important;
}
#page-movimientos .mv-table thead th {
font-family: var(--mono) !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 0.18em;
text-transform: uppercase !important;
color: rgba(26,20,16,.40) !important;
padding: 11px 14px;
text-align: left !important;
background: transparent !important;
white-space: nowrap !important;
}
#page-movimientos .mv-table thead th:nth-last-child(2) { text-align: right; }
/* Row base */
#page-movimientos .mv-table tbody tr.mv-row {
border-bottom: 1px solid rgba(26,20,16,.08) !important;
transition: background .12s;
cursor: pointer;
}
#page-movimientos .mv-table tbody tr.mv-row:hover { background: rgba(26,20,16,.025); }
#page-movimientos .mv-table tbody tr.mv-row:last-child { border-bottom: none !important; }
#page-movimientos .mv-table td { padding: 8px 14px !important; vertical-align: middle; }
/* Row selected highlight (drawer abierto) */
#page-movimientos .mv-row-selected { background: rgba(232,102,58,.045) !important; }
#page-movimientos .mv-row-selected:hover { background: rgba(232,102,58,.07) !important; }
/* ── Date separator editorial (con stats) ── */
#page-movimientos .mv-day-sep {
background: rgba(26,20,16,.02) !important;
border-top: 1px solid rgba(26,20,16,.08) !important;
border-bottom: 1px solid rgba(26,20,16,.08) !important;
}
#page-movimientos .mv-day-sep td { padding: 8px 14px !important; }
.mv-day-content {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(26,20,16,.60);
}
.mv-day-label { color: #1A1410; }
.mv-day-date {
font-weight: 500;
color: rgba(26,20,16,.45);
letter-spacing: 0.14em;
}
.mv-day-sep-divider {
width: 14px; height: 1px;
background: rgba(26,20,16,.25);
}
.mv-day-stat {
font-weight: 500;
color: rgba(26,20,16,.45);
letter-spacing: 0.10em;
}
.mv-day-total {
margin-left: auto;
font-family: var(--mono);
font-weight: 700;
color: #1A1410;
font-size: 11px;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
/* ── TIPO: dot + label (override del viejo pill) ── */
.mv-tipo {
display: inline-flex !important;
align-items: center;
gap: 7px;
font-family: var(--sans) !important;
font-size: 11.5px !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
text-transform: none !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
border-radius: 0 !important;
}
.mv-tipo-dot {
width: 7px; height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.mv-tipo.t-venta { color: rgba(26,20,16,.78); }
.mv-tipo.t-venta .mv-tipo-dot { background: #22A55A; }
.mv-tipo.t-ingreso { color: #2563EB; }
.mv-tipo.t-ingreso .mv-tipo-dot { background: #2563EB; }
.mv-tipo.t-merma { color: #C0392B; font-weight: 600 !important; }
.mv-tipo.t-merma .mv-tipo-dot { background: #C0392B; }
.mv-tipo.t-ajuste { color: #E8663A; font-weight: 600 !important; }
.mv-tipo.t-ajuste .mv-tipo-dot { background: #E8663A; }
.mv-tipo.t-transferencia { color: rgba(26,20,16,.78); }
.mv-tipo.t-transferencia .mv-tipo-dot { background: #1A1410; }
/* ── FECHA: stack date + hora ── */
.mv-fecha {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
color: rgba(26,20,16,.65);
letter-spacing: 0.01em;
white-space: nowrap;
}
.mv-fecha-hora {
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
color: rgba(26,20,16,.40);
margin-top: 1px;
letter-spacing: 0.02em;
}
/* ── CLIENTE ── */
.mv-cliente {
font-family: var(--sans);
font-size: 12.5px;
font-weight: 600;
color: #1A1410;
letter-spacing: -0.005em;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mv-cliente.is-empty { color: rgba(26,20,16,.25); font-weight: 400; }
/* ── PRODUCTO con ellipsis + chip "+N" ── */
.mv-producto-cell { max-width: 320px; }
.mv-producto {
font-family: var(--sans);
font-size: 12.5px;
font-weight: 500;
color: rgba(26,20,16,.78);
letter-spacing: -0.005em;
display: flex;
align-items: center;
gap: 6px;
}
.mv-producto-txt {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.mv-producto-more {
font-family: var(--mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.06em;
background: #f2f1ef;
border: 1px solid rgba(26,20,16,.08);
border-radius: 4px;
padding: 1px 5px;
color: rgba(26,20,16,.60);
flex-shrink: 0;
}
/* ── LOCAL compact chip ── */
#page-movimientos .mv-local {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 22px;
padding: 0 7px;
background: rgba(26,20,16,.05);
border: 1px solid rgba(26,20,16,.08);
border-radius: 5px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
color: rgba(26,20,16,.60);
letter-spacing: 0.04em;
}
/* ── PAGO: dot + label (override del viejo pill) ── */
.mv-pago {
display: inline-flex !important;
align-items: center;
gap: 6px;
font-family: var(--sans) !important;
font-size: 11.5px !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
color: rgba(26,20,16,.78) !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
border-radius: 0 !important;
text-transform: none !important;
}
.mv-pago-dot {
width: 6px; height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.mv-pago.efectivo .mv-pago-dot { background: #C8962A; }
.mv-pago.debito .mv-pago-dot { background: rgba(26,20,16,.55); }
.mv-pago.transferencia .mv-pago-dot { background: #22A55A; }
.mv-pago.caja .mv-pago-dot { background: #7a4a16; }
.mv-pago.caja { color: #7a4a16; }
/* v7.19.0 — MODO ELIMINACIÓN de movimientos (comando oculto Ctrl+Shift+M) */
#page-movimientos.is-mv-delete-mode {
position: relative;
}
#page-movimientos.is-mv-delete-mode::before {
content: "⚠ MODO ELIMINACIÓN · Ctrl+Shift+M para salir";
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
padding: 7px 16px;
background: linear-gradient(158deg, #7a1c1c 0%, #3d0d0d 100%);
color: #fff;
font-family: var(--mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
border-radius: 999px;
box-shadow: 0 8px 24px rgba(100,20,20,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
animation: mv-del-pulse 2s ease-in-out infinite;
pointer-events: none;
}
@keyframes mv-del-pulse {
0%,100% { box-shadow: 0 8px 24px rgba(100,20,20,.35), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 0 0 rgba(224,82,82,.4); }
50% { box-shadow: 0 8px 24px rgba(100,20,20,.35), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 0 10px rgba(224,82,82,0); }
}
/* Las filas en modo delete: borde sutil rojo a la izquierda */
#page-movimientos.is-mv-delete-mode .mv-row {
position: relative;
}
#page-movimientos.is-mv-delete-mode .mv-row::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: rgba(224,82,82,.25);
pointer-events: none;
}
#page-movimientos.is-mv-delete-mode .mv-row:hover::before {
background: #E05252;
}
/* Botón de eliminar individual */
.mv-td-delete {
width: 44px;
text-align: right;
padding-right: 10px;
}
.mv-del-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
border: 1px solid rgba(224,82,82,.20);
background: rgba(224,82,82,.05);
color: #c43a3a;
cursor: pointer;
transition: all .15s ease;
}
.mv-del-btn:hover {
background: rgba(224,82,82,.12);
border-color: rgba(224,82,82,.45);
color: #a83030;
transform: scale(1.06);
}
.mv-del-btn:active {
transform: scale(.94);
}
.mv-pago.is-empty { color: rgba(26,20,16,.25) !important; }
.mv-pago.is-empty .mv-pago-dot { background: rgba(26,20,16,.25); }
/* v7.19.0 — Caja como medio de pago dedicado */
.mvd-dot-caja { background: #7a4a16; }
.cc2-pago-pill.caja {
background: rgba(122,74,22,.10);
color: #7a4a16;
border-color: rgba(122,74,22,.20);
}
/* ── TOTAL (héroe) ── */
#page-movimientos .mv-td-total { text-align: right !important; }
#page-movimientos .mv-row .mv-total,
#page-movimientos td .mv-total {
font-family: var(--serif) !important;
font-size: 16px !important;
font-weight: 600 !important;
letter-spacing: -0.018em;
color: #1A1410;
font-variant-numeric: tabular-nums !important;
font-feature-settings: "tnum" 1, "lnum" 1 !important;
font-optical-sizing: auto;
white-space: nowrap;
line-height: 1.1;
}
#page-movimientos .mv-row .mv-total.is-neg { color: #C0392B; }
/* ── Hover chevron arrow ── */
.mv-row-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
color: rgba(26,20,16,.25);
opacity: 0;
transform: translateX(-4px);
transition: opacity .15s, transform .15s, color .15s;
}
#page-movimientos tr.mv-row:hover .mv-row-arrow {
opacity: 1;
transform: translateX(0);
color: rgba(26,20,16,.60);
}
.mv-row-arrow svg { width: 12px; height: 12px; }
/* ── Override viejos estilos (legacy) ── */
#page-movimientos .mv-tipo-pill,
/* ── 8. STOCK TABLE — simplificación visual (v7.18.0) ─────────────── */
/* Categoría: solo texto muted (sin pill) */
.sk-cat {
font-size: 11.5px;
font-weight: 500;
color: rgba(26,20,16,.60);
white-space: nowrap;
}
/* Sucursal: chip compacto */
.sk-loc {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 22px;
padding: 0 6px;
background: rgba(26,20,16,.05);
border: 1px solid rgba(26,20,16,.08);
border-radius: 5px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
color: rgba(26,20,16,.60);
letter-spacing: 0.04em;
}
/* v7.31.0 — Local tags con color */
.sk-loc.tag-l1, #page-movimientos .mv-local.tag-l1 {
background: var(--c-blue-soft);
color: var(--c-blue-ink);
border-color: var(--c-blue-line);
}
.sk-loc.tag-l2, #page-movimientos .mv-local.tag-l2 {
background: var(--c-plum-soft);
color: var(--c-plum-ink);
border-color: var(--c-plum-line);
white-space: nowrap;
}
/* Cantidad: número grande mono + subtítulo "mín. X u." */
.sk-qty-val {
font-family: var(--mono);
font-size: 14px;
font-weight: 600;
color: #1A1410;
font-variant-numeric: tabular-nums;
line-height: 1;
margin-bottom: 2px;
}
.sk-qty-val.is-critical { color: #C0392B; }
.sk-qty-sub {
font-size: 10.5px;
font-weight: 500;
color: rgba(26,20,16,.40);
}
/* Precio: valor mono + subtítulo "por kg" */
.sk-price-val {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: #1A1410;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.sk-price-sub {
font-size: 10.5px;
color: rgba(26,20,16,.40);
}
/* Acciones: hidden por default, aparecen al hover de la fila */
#stock-tbody tr .sk-row-acts {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
opacity: 0;
transition: opacity .15s;
}
#stock-tbody tr:hover .sk-row-acts { opacity: 1; }
.sk-act-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
background: transparent;
border: none;
border-radius: 7px;
color: rgba(26,20,16,.40);
cursor: pointer;
padding: 0;
transition: background .12s, color .12s;
}
.sk-act-btn svg { width: 13px; height: 13px; }
.sk-act-btn:hover { background: rgba(26,20,16,.07); color: #1A1410; }
.sk-act-btn.del:hover { background: rgba(192,57,43,.08); color: #C0392B; }
/* ── 9. NIVEL — Segmented Bar System (v7.18.0) ────────────────────── */
/* Cada barra = 1 unidad en stock · MAX 20 barras · degradado reactivo */
.sk-seg-bars {
display: flex;
align-items: flex-end;
gap: 2px;
height: 14px;
min-width: 96px;
}
.sk-seg-bar {
width: 4px;
border-radius: 2px;
flex-shrink: 0;
transition: opacity .15s;
}
.sk-seg-filled { height: 14px; }
.sk-seg-empty {
height: 9px;
background: rgba(26,20,16,.09);
}
tr:hover .sk-seg-empty { background: rgba(26,20,16,.16); }
/* ── 9. SIDEBAR: item activo v7.25.0 ───────────────────── */
.tb-dd-item.active {
background: rgba(232,102,58,.06) !important;
color: #1A1410 !important;
font-weight: 600 !important;
box-shadow: none !important;
}
.tb-dd-item.active .tb-dd-icon {
color: var(--accent-warm, #E8663A) !important;
}
/* Hover */
.tb-dd-item:hover {
background: rgba(26,20,16,.04) !important;
color: #1A1410 !important;
box-shadow: none !important;
transition: all .12s ease !important;
}
/* ═══ 08. NOTIFICACIONES ═══ */
.ph-venc-dot.visible { display: inline-block; }
.ph-title {
font-family: var(--serif);
font-size: 26px;
font-weight: 700;
color: var(--char);
letter-spacing: -0.02em;
line-height: 1.1;
position: relative;
padding-left: 14px;
}
.ph-title::before {
content: "";
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 3px;
background: linear-gradient(180deg, var(--accent-warm) 0%, var(--accent-warm-lt) 100%);
border-radius: 99px;
}
.ph-sub {
font-size: 10.5px;
color: var(--ink-70);
margin-top: 4px;
font-family: var(--mono);
padding-left: 14px;
letter-spacing: 0.02em;
}
.ph-sub,
.kpi-sub {
color: var(--text-meta);
}
.urgente-item.visible {
height: 58px;
opacity: 1;
animation: urgente-shake-in .4s cubic-bezier(.36,.07,.19,.97) both;
}
.va-card {
display: grid;
grid-template-columns: 44px 1fr;
grid-template-rows: auto auto;
gap: 0 14px;
border-radius: var(--r2);
border: 1.5px solid transparent;
padding: 16px 18px;
position: relative;
overflow: hidden;
}
.va-card::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0;
width: 4px; border-radius: 4px 0 0 4px;
}
.va-card.ok { background: rgba(34,165,90,.06); border-color: rgba(34,165,90,.18); }
.va-card.atencion { background: rgba(232,102,58,.07); border-color: rgba(232,102,58,.22); }
.va-card.critico { background: rgba(224,82,82,.07); border-color: rgba(224,82,82,.22); }
.va-card.ok::before { background: var(--green); }
.va-card.atencion::before { background: var(--amber); }
.va-card.critico::before { background: var(--red); }
.va-icon {
grid-row: 1 / 3;
width: 40px; height: 40px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; align-self: center;
}
.va-icon.ok { background: rgba(34,165,90,.12); color: var(--green); }
.va-icon.atencion { background: rgba(232,102,58,.12); color: var(--amber); }
.va-icon.critico { background: rgba(224,82,82,.12); color: var(--red); }
.va-body { display: flex; flex-direction: column; gap: 4px; }
.va-titulo {
font-size: 13px; font-weight: 700;
color: var(--char); font-family: var(--sans); line-height: 1.3;
}
.va-cuerpo {
font-size: 12px; color: var(--ink-82);
font-family: var(--sans); line-height: 1.5;
}
.va-foot {
grid-column: 2;
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-top: 10px; flex-wrap: wrap;
}
.va-ts {
font-size: 10px; color: var(--ink-70);
font-family: var(--mono);
}
.va-card.ok .va-btn-ok { border-color: rgba(34,165,90,.4); color: var(--green); }
.va-card.atencion .va-btn-ok { border-color: rgba(232,102,58,.4); color: var(--amber); }
.va-card.critico .va-btn-ok { border-color: rgba(224,82,82,.4); color: var(--red); }
.va-card.ok .va-btn-ok:hover { background: rgba(34,165,90,.1); }
.va-card.atencion .va-btn-ok:hover { background: rgba(232,102,58,.1); }
.va-card.critico .va-btn-ok:hover { background: rgba(224,82,82,.1); }
.va-btn-ok {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .04em;
padding: 6px 14px;
border-radius: 6px;
border: 1.5px solid;
background: none;
cursor: pointer;
transition: background .14s, transform .12s;
white-space: nowrap;
}
.va-btn-ok:active { transform: scale(.97); }
.va-prods {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 6px;
grid-column: 2;
}
.va-prod-pill {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
padding: 3px 9px;
border-radius: 5px;
letter-spacing: .02em;
line-height: 1.3;
}
.va-prod-pill.critico {
background: rgba(224,82,82,.10);
color: #E05252;
border: 1px solid rgba(224,82,82,.18);
}
.va-prod-pill.atencion {
background: rgba(232,102,58,.10);
color: #E8663A;
border: 1px solid rgba(232,102,58,.18);
}
/* ── v7.26.0 Asistente posicionado entre tríptico y toolbar ── */
#page-vencimientos #venc-asistente {
margin: 0 0 6px;
}
.vc-group-chevron.expanded {
transform: rotate(90deg);
}
.vc-group.collapsed .vc-group-content {
opacity: .7;
}
.av-head {
padding: 18px 20px 14px;
border-bottom: 1px solid rgba(205, 188, 165, 0.9);
display: grid;
grid-template-columns: auto 1fr;
gap: 12px;
align-items: start;
background: #f2eadd;
}
.av-icon {
width: 34px;
height: 34px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
background: rgba(232,102,58, 0.12);
border: 1px solid rgba(232,102,58, 0.26);
flex-shrink: 0;
}
.av-title {
font-size: 15px;
font-weight: 600;
font-family: var(--serif);
color: var(--char);
line-height: 1.1;
}
.av-sub {
font-size: 11px;
color: var(--ink-82);
margin-top: 4px;
}
.av-kpis {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.av-kpi {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 999px;
padding: 4px 9px;
border: 1px solid rgba(26, 20, 16, 0.14);
color: var(--ink-82);
background: rgba(255, 255, 255, 0.62);
}
.av-kpi.crit {
border-color: rgba(224,82,82, 0.34);
color: #8a1a0f;
background: rgba(224,82,82, 0.1);
}
.av-kpi.warn {
border-color: rgba(160, 98, 10, 0.34);
color: #7f4c00;
background: rgba(160, 98, 10, 0.1);
}
.av-body {
overflow-y: auto;
padding: 10px 20px 12px;
flex: 1;
}
.av-item {
display: grid;
grid-template-columns: 10px 1fr auto;
gap: 10px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid rgba(217, 204, 186, 0.82);
}
.av-item:last-child {
border-bottom: none;
}
.av-semaforo {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.av-main {
min-width: 0;
}
.av-nombre {
font-size: 13px;
font-weight: 600;
color: var(--char);
line-height: 1.18;
}
.av-meta {
display: block;
margin-top: 3px;
font-size: 10.5px;
color: var(--ink-82);
}
.av-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 5px 9px;
border-radius: 999px;
white-space: nowrap;
border: 1px solid;
}
.av-item.critico .av-nombre {
color: #5a0a04;
}
.av-item.proximo .av-nombre {
color: #6f4310;
}
.av-foot {
padding: 13px 20px;
border-top: 1px solid rgba(205, 188, 165, 0.88);
display: flex;
gap: 8px;
justify-content: flex-end;
background: #f2eadd;
}
.notif-backdrop {
position: fixed;
inset: 0;
z-index: 1199;
}
.notif-panel {
position: fixed;
top: calc(var(--topbar, 54px) + 8px);
right: 12px;
width: 380px;
max-height: calc(100vh - var(--topbar, 54px) - 24px);
background: #FFFFFF;
border: none;
border-radius: 16px;
box-shadow:
inset 0 0 0 1px #FFFFFF,
0 0 0 1px #fdfcfb,
0 4px 12px rgba(26,20,16,.06),
0 12px 32px rgba(26,20,16,.10),
0 32px 64px rgba(26,20,16,.08);
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 1200;
animation: lx-notif-drop var(--lx-d-slow) var(--lx-curve-spring) both;
}
.notif-mark-all-btn {
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
color: rgba(26,20,16,.50);
background: transparent;
border: 1px solid rgba(26,20,16,.10);
border-radius: 7px;
padding: 5px 10px;
cursor: pointer;
transition: background .13s, color .13s, border-color .13s;
outline: none;
}
.notif-mark-all-btn:hover {
background: rgba(26,20,16,.05);
color: #1A1410;
border-color: rgba(26,20,16,.18);
}
.notif-filter-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: rgba(26,20,16,.05);
border: none;
border-radius: 999px;
font-family: var(--sans);
font-size: 11.5px;
font-weight: 500;
color: rgba(26,20,16,.55);
cursor: pointer;
white-space: nowrap;
transition: background .13s, color .13s;
outline: none;
flex-shrink: 0;
}
.notif-filter-pill:hover { background: rgba(26,20,16,.09); color: #1A1410; }
.notif-filter-pill.on {
background: #1A1410;
color: #F5EFE6;
}
.notif-filter-pill .nfp-dot {
width: 5px; height: 5px;
border-radius: 50%;
flex-shrink: 0;
}
.notif-panel::after {
content: '';
display: none; /* solo para referencia */
}
.notif-list {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0 10px 10px;
scrollbar-width: thin;
scrollbar-color: rgba(26,20,16,.12) transparent;
}
[class*="-eyebrow"],
[class*="-kicker"],
[class*="-label"][class*="kpi"],
.mv2-kpi-label,
.notif-item-eyebrow,
.mvd-eyebrow,
.mvd-total-label,
.v3-c-eyebrow,
[class*="-fecha"],
[class*="-time"],
[class*="-meta"],
.mv-td-fecha,
.notif-item-time,
.mvd-meta,
.mvd-item-meta,
.mvd-item-lote {
font-family: var(--mono) !important;
letter-spacing: 0.03em !important;
font-weight: 500 !important;
}
[class*="-item-name"],
[class*="-prod-name"],
.vc2-prod-name,
.mvd-item-name,
.notif-item-title,
.mv-td-producto,
[class*="-prod-prov"],
[class*="-detail"],
.vc2-prod-prov,
.notif-item-detail,
.mvd-item-detail,
.mvd-row-l {
font-family: var(--sans) !important;
font-weight: 400 !important;
letter-spacing: -0.005em !important;
}
.mvd-act, .mv2-dd-value, .notif-filter-pill, .notif-mark-all-btn {
font-family: var(--sans) !important;
letter-spacing: -0.005em !important;
}
/* ═══ 09. CHAT FLOAT ═══ */
.chat-topbar {
padding: 16px 28px;
border-bottom: 1.5px solid var(--border-warm);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
background: var(--paper-2);
}
.chat-topbar h2 {
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
color: var(--char);
letter-spacing: -.01em;
}
.chat-topbar p {
font-size: 11px;
color: var(--ink-82);
font-family: var(--sans);
font-weight: 400;
margin-top: 2px;
}
.chat-body {
flex: 1;
overflow-y: auto;
padding: 20px 28px;
display: flex;
flex-direction: column;
gap: 10px;
background: var(--paper);
}
.chat-msg.mine {
align-self: flex-end;
align-items: flex-end;
}
.chat-msg.other {
align-self: flex-start;
align-items: flex-start;
}
.chat-msg.mine .chat-bubble {
background: var(--accent-warm);
color: #fff;
border-radius: 12px 12px 3px 12px;
}
.chat-msg.other .chat-bubble {
background: var(--paper-2);
border: 1.5px solid var(--border-warm);
color: var(--char);
border-radius: 12px 12px 12px 3px;
}
.chat-footer {
padding: 14px 28px;
border-top: 1.5px solid var(--border-warm);
display: flex;
gap: 8px;
align-items: flex-end;
flex-shrink: 0;
background: var(--paper-2);
}
.chat-input {
flex: 1;
background: var(--paper);
border: 1.5px solid var(--border-warm);
color: var(--char);
padding: 10px 14px;
font-family: var(--sans);
font-size: 13px;
font-weight: 400;
line-height: 1.5;
outline: none;
border-radius: 20px;
resize: none;
transition: border-color 0.15s, box-shadow 0.15s;
max-height: 100px;
}
.chat-input:focus {
border-color: var(--accent-warm);
box-shadow: 0 0 0 3px var(--accent-warm-bg);
}
.chat-send {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--accent-warm), #e8924a);
border: none;
border-radius: var(--r);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
box-shadow: 0 3px 10px rgba(232,102,58, 0.3);
}
.chat-send:hover {
transform: scale(1.05);
box-shadow: 0 4px 14px rgba(232,102,58, 0.4);
}
.chat-send svg {
width: 16px;
height: 16px;
stroke: var(--paper);
}
.chat-read.seen {color:var(--accent-warm)}
.chat-msg.mine .chat-quote {background:rgba(255,255,255,.15);border-left-color:rgba(255,255,255,.5)}
.chat-msg.mine .chat-quote-autor {color:rgba(255,255,255,.9)}
.chat-msg.mine .chat-quote-texto {color:rgba(255,255,255,.75)}
.chat-msg.mine .chat-prod-card {background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.chat-msg.mine .cpc-tag {color:rgba(255,255,255,.6)}
.chat-msg.mine .cpc-nombre {color:#fff}
.chat-msg.mine .cpc-info {color:rgba(255,255,255,.7)}
.chat-badge {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
background: var(--red);
color: #fff;
font-size: 10px;
font-family: var(--mono);
font-weight: 700;
padding: 2px 7px;
border-radius: 10px;
display: none;
animation: badge-pulse 1.4s ease infinite;
box-shadow: 0 0 0 0 rgba(224,82,82, 0.6);
}
.chat-toast {
position: fixed;
bottom: 92px;
right: 24px;
z-index: 8900;
width: 320px;
max-width: calc(100vw - 32px);
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(26, 20, 16, 0.08);
border-radius: 14px;
box-shadow:
0 1px 2px rgba(26, 20, 16, 0.04),
0 8px 28px rgba(26, 20, 16, 0.10),
0 24px 60px rgba(26, 20, 16, 0.06);
animation: ct-emerge 0.42s cubic-bezier(0.32, 0.72, 0, 1) forwards;
cursor: pointer;
overflow: hidden;
/* v7.25.0 perf: blur removido — background .96 ya es casi opaco, blur imperceptible */
transform-origin: bottom right;
will-change: transform, opacity;
transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.chat-toast:hover {
border-color: rgba(26, 20, 16, 0.14);
box-shadow:
0 1px 2px rgba(26, 20, 16, 0.04),
0 12px 36px rgba(26, 20, 16, 0.14),
0 32px 72px rgba(26, 20, 16, 0.08);
}
.chat-toast.removing {
animation: ct-out 0.26s cubic-bezier(0.55, 0, 0.65, 0.2) forwards;
pointer-events: none;
}
.chat-toast-inner {
padding: 12px 14px;
display: flex;
gap: 11px;
align-items: center;
}
.chat-toast-icon {
position: relative;
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #2A1F18 0%, #1A1410 100%);
color: #F5EFE6;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-size: 14px;
font-weight: 600;
flex-shrink: 0;
box-shadow:
0 0 0 1px rgba(26, 20, 16, 0.10),
0 1px 2px rgba(26, 20, 16, 0.10);
text-transform: uppercase;
user-select: none;
animation: ct-avatar-ping 1.4s ease-out;
}
.chat-toast-icon::after {
content: "";
position: absolute;
right: -1px;
bottom: -1px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #E8663A;
border: 2px solid #FFFFFF;
box-shadow: 0 0 0 1px rgba(26, 20, 16, 0.06);
}
.chat-toast-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.25;
}
.chat-toast-from {
font-family: var(--serif);
font-size: 14px;
font-weight: 600;
letter-spacing: -0.01em;
color: #1A1410;
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-toast-msg {
font-family: var(--sans);
font-size: 12.5px;
font-weight: 400;
color: rgba(26, 20, 16, 0.65);
line-height: 1.35;
letter-spacing: -0.005em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.chat-toast-close {
position: absolute;
top: 8px;
right: 8px;
width: 22px;
height: 22px;
border-radius: 6px;
background: transparent;
border: none;
color: rgba(26, 20, 16, 0.40);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
opacity: 0;
transform: scale(0.85);
transition: opacity 0.16s ease, color 0.14s ease, background 0.14s ease, transform 0.16s ease;
padding: 0;
}
.chat-toast:hover .chat-toast-close {
opacity: 1;
transform: scale(1);
}
.chat-toast-close:hover {
background: rgba(26, 20, 16, 0.08);
color: #1A1410;
}
.chat-toast-close::before,
.chat-toast-close::after {
content: "";
position: absolute;
width: 11px;
height: 1.6px;
background: currentColor;
border-radius: 2px;
}
.chat-toast-close::before { transform: rotate(45deg); }
.chat-toast-close::after { transform: rotate(-45deg); }
.chat-toast-bar,
.chat-toast-header,
.chat-toast-time,
.chat-toast-autor,
.chat-toast-footer,
.cf-head {
padding: 18px 20px 16px;
background: #FFFFFF;
border-bottom: 1px solid rgba(26, 20, 16, 0.06);
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
position: relative;
}
.cf-head > svg:first-child {
width: 18px;
height: 18px;
color: #E8663A;
flex-shrink: 0;
opacity: 1;
}
.cf-peer-avatar {
position: relative;
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, #2A1F18 0%, #1A1410 100%);
color: #F5EFE6;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
flex-shrink: 0;
box-shadow:
0 0 0 1px rgba(26, 20, 16, 0.10),
0 1px 2px rgba(26, 20, 16, 0.10);
text-transform: uppercase;
user-select: none;
}
.cf-peer-avatar::after {
content: "";
position: absolute;
right: -1px;
bottom: -1px;
width: 11px;
height: 11px;
border-radius: 50%;
background: #22A55A;
border: 2px solid #FFFFFF;
box-shadow: 0 0 0 1px rgba(26, 20, 16, 0.06);
}
.cf-peer-avatar.offline::after { background: #C0392B; }
.cf-peer-avatar.away::after { background: #E67E22; }
.cf-peer-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.15;
}
.cf-head-title {
font-family: var(--serif);
font-size: 15px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.015em;
color: #1A1410;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cf-peer-sub {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(26, 20, 16, 0.45);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cf-head-tags {
display: flex;
gap: 6px;
align-items: center;
}
.cf-pres {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #1F7A42;
line-height: 1;
white-space: nowrap;
padding: 4px 8px;
background: rgba(34,165,90, 0.08);
border: 1px solid rgba(34,165,90, 0.18);
border-radius: 999px;
}
.cf-pres.dim {
background: rgba(26, 20, 16, 0.04);
border-color: rgba(26, 20, 16, 0.10);
color: rgba(26, 20, 16, 0.50);
}
.cf-head-close {
width: 30px;
height: 30px;
border-radius: 8px;
border: none;
background: transparent;
color: rgba(26, 20, 16, 0.45);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
padding: 0;
flex-shrink: 0;
transition: background 0.14s ease, color 0.14s ease;
}
.cf-head-close::before {
content: "";
width: 14px;
height: 2px;
background: currentColor;
border-radius: 2px;
}
.cf-head-close:hover {
background: rgba(26, 20, 16, 0.06);
color: #1A1410;
}
.cf-pin-ico {
font-family: var(--mono);
font-size: 8.5px;
font-weight: 800;
letter-spacing: 0.16em;
color: #E8663A;
background: rgba(232,102,58, 0.14);
border: 1px solid rgba(232,102,58, 0.28);
border-radius: 999px;
padding: 3px 8px;
flex-shrink: 0;
}
.cf-pin-txt {
min-width: 0;
flex: 1;
font-size: 12.5px;
color: rgba(26, 20, 16, 0.70);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cf-body {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 14px;
background: #fdfcfb;
scrollbar-width: thin;
scrollbar-color: rgba(26, 20, 16, 0.18) transparent;
}
.cf-msg {
max-width: 82%;
display: flex;
flex-direction: column;
gap: 4px;
}
.cf-msg.mine { align-self: flex-end; align-items: flex-end; }
.cf-msg.other { align-self: flex-start; align-items: flex-start; }
.cf-sender {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(26, 20, 16, 0.42);
line-height: 1;
margin-bottom: 2px;
padding: 0 4px;
}
.cf-bubble {
padding: 10px 14px;
font-size: 13.5px;
font-family: var(--sans);
font-weight: 500;
line-height: 1.45;
word-break: break-word;
letter-spacing: -0.005em;
}
.cf-msg.mine .cf-bubble {
background: #1A1410;
color: #F5EFE6;
border-radius: 14px 14px 4px 14px;
box-shadow: 0 1px 2px rgba(26, 20, 16, 0.10);
}
.cf-msg.other .cf-bubble {
background: #FFFFFF;
color: #1A1410;
border: 1px solid rgba(26, 20, 16, 0.07);
border-radius: 14px 14px 14px 4px;
box-shadow: 0 1px 2px rgba(26, 20, 16, 0.03);
}
.cf-meta {
font-family: var(--mono);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.04em;
color: rgba(26, 20, 16, 0.42);
line-height: 1;
padding: 0 4px;
}
.cf-read {
font-size: 10px;
margin-left: 4px;
}
.cf-read.sent { color: rgba(26, 20, 16, 0.32); }
.cf-read.seen { color: #E8663A; }
.cf-sep {
align-self: center;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(26, 20, 16, 0.32);
padding: 6px 12px;
background: rgba(26, 20, 16, 0.04);
border-radius: 999px;
}
.cf-msg-actions {
margin-top: 2px;
display: flex;
gap: 4px;
opacity: 0;
transition: opacity 0.16s ease;
}
.cf-msg:hover .cf-msg-actions { opacity: 1; }
.cf-msg-actions.other { justify-content: flex-start; }
.cf-msg-actions.mine { justify-content: flex-end; }
.cf-act-btn {
width: 26px;
height: 26px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(26, 20, 16, 0.08);
color: rgba(26, 20, 16, 0.55);
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.cf-act-btn:hover {
background: #FFFFFF;
border-color: rgba(26, 20, 16, 0.16);
color: #1A1410;
}
.cf-act-ico { width: 12px; height: 12px; stroke-linecap: round; stroke-linejoin: round; }
.cf-msg-actions.mine .cf-act-btn { color: rgba(26, 20, 16, 0.50); }
.cf-footer {
padding: 0;
border-top: 1px solid rgba(26, 20, 16, 0.06);
background: #FFFFFF;
display: flex;
flex-direction: column;
flex-shrink: 0;
position: relative;
}
.cf-footer-row {
display: flex;
gap: 8px;
align-items: flex-end;
padding: 12px 14px 14px;
}
.cf-rp-bar {
width: 3px;
align-self: stretch;
background: #E8663A;
border-radius: 2px;
}
.cf-rp-body { flex: 1; min-width: 0; }
.cf-rp-autor {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: #E8663A;
font-weight: 700;
}
.cf-rp-texto {
margin-top: 2px;
font-size: 11px;
color: rgba(26, 20, 16, 0.62);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cf-rp-close {
width: 24px;
height: 24px;
border-radius: 6px;
border: none;
background: transparent;
color: rgba(26, 20, 16, 0.40);
font-size: 14px;
line-height: 1;
cursor: pointer;
transition: background 0.14s, color 0.14s;
}
.cf-rp-close:hover { background: rgba(26, 20, 16, 0.06); color: #1A1410; }
.cf-add-prod {
width: 38px;
height: 38px;
border-radius: 10px;
border: 1px solid rgba(26, 20, 16, 0.10);
background: rgba(26, 20, 16, 0.025);
color: rgba(26, 20, 16, 0.55);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.cf-add-prod:hover {
background: #FFFFFF;
border-color: rgba(26, 20, 16, 0.18);
color: #1A1410;
}
.cf-input {
flex: 1;
background: rgba(26, 20, 16, 0.025);
border: 1px solid rgba(26, 20, 16, 0.10);
color: #1A1410;
padding: 9px 12px;
font-family: var(--sans);
font-size: 13.5px;
line-height: 1.4;
outline: none;
border-radius: 10px;
resize: none;
max-height: 120px;
min-height: 38px;
transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.cf-input:focus {
border-color: rgba(232,102,58, 0.45);
background: #FFFFFF;
box-shadow: 0 0 0 3px rgba(232,102,58, 0.10);
}
.cf-send {
width: 38px;
height: 38px;
background: #1A1410;
border: none;
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.16s, transform 0.10s;
}
.cf-send:hover { background: #2A1F18; }
.cf-send:active { transform: scale(0.96); }
.cf-send svg { width: 14px; height: 14px; stroke: #F5EFE6; stroke-width: 2.4; fill: none; }
body.cf-open #chat-float-btn {
opacity: 0;
transform: scale(0.8) translateX(20px);
pointer-events: none;
}
.cf-quote {
border-left: 2px solid #E8663A;
background: rgba(232,102,58, 0.06);
border-radius: 8px;
padding: 6px 10px;
margin-bottom: 6px;
}
.cf-quote-autor {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
color: #E8663A;
text-transform: uppercase;
letter-spacing: 0.10em;
}
.cf-quote-texto {
font-size: 11px;
color: rgba(26, 20, 16, 0.65);
margin-top: 2px;
}
.cf-prod-card {
border: 1px solid rgba(232,102,58, 0.22);
background: rgba(232,102,58, 0.05);
border-radius: 10px;
padding: 9px 11px;
}
.cf-prod-tag {
font-family: var(--mono);
font-size: 8.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #E8663A;
}
.cf-prod-name {
margin-top: 4px;
font-size: 12.5px;
font-weight: 600;
color: #1A1410;
}
.cf-prod-info {
margin-top: 2px;
font-family: var(--mono);
font-size: 10px;
color: rgba(26, 20, 16, 0.55);
}
.cf-pick-item {
padding: 10px 14px;
border-bottom: 1px solid rgba(26, 20, 16, 0.05);
display: flex;
justify-content: space-between;
gap: 10px;
cursor: pointer;
transition: background 0.12s;
}
.cf-pick-item:hover { background: rgba(232,102,58, 0.06); }
.cf-pick-name { font-size: 12.5px; color: #1A1410; font-weight: 500; }
.cf-pick-meta {
font-family: var(--mono);
font-size: 10px;
color: rgba(26, 20, 16, 0.45);
white-space: nowrap;
}
/* ═══ 10. MODALES/CHANGELOG ═══ */
.modal {
position: relative;
background: #fff;
border: 1px solid #E5E0DC;
width: 560px;
max-width: 100%;
max-height: min(88vh, 920px);
overflow: hidden;
display: flex;
flex-direction: column;
border-radius: 20px;
animation: pop 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
box-shadow:
0 20px 60px rgba(35, 29, 26, 0.16),
0 4px 16px rgba(35, 29, 26, 0.08);
min-height: 0;
}
#modal-overlay .modal[style*="display: block"],
#modal-overlay .modal[style*="display:block"],
#modal-overlay .modal[style*="display: flex"],
#modal-overlay .modal[style*="display:flex"] {
display: flex !important;
flex-direction: column;
}
.modal-head {
padding: 24px 28px 20px;
border-bottom: 1px solid #E5E0DC;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
background: #fff;
z-index: 2;
}
.modal-head::after {
display: none;
}
.modal-head h3 {
font-family: var(--serif);
font-size: 22px;
font-weight: 600;
color: #231D1A;
text-align: left;
letter-spacing: -0.01em;
}
.modal-close {
position: static;
transform: none;
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1.5px solid #E5E0DC;
color: #766960;
cursor: pointer;
font-size: 12px;
line-height: 1;
border-radius: 50%;
transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}
.modal-close:hover {
color: #231D1A;
background: #F2F0ED;
border-color: #E8663A;
transform: rotate(90deg);
}
.modal-body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 24px 28px 20px;
background: #fdfcfb;
scrollbar-width: thin;
scrollbar-color: #E5E0DC transparent;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
touch-action: pan-y;
}
.modal-foot {
padding: 16px 28px 20px;
border-top: 1px solid #E5E0DC;
display: flex;
gap: 9px;
justify-content: flex-end;
position: sticky;
bottom: 0;
background: #fff;
z-index: 2;
}
.fg input,
.fg select,
.qty-row select,
.modal-body select:not([size]),
.modal-body input:not([type="hidden"]),
.modal-body textarea {
color-scheme: light;
}
.modal-body select[size] {
width: 100%;
border: 1px solid rgba(232,102,58, 0.16) !important;
border-radius: 14px !important;
background: rgba(255, 255, 255, 0.62) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 6px 14px rgba(26, 20, 16, 0.03);
padding: 8px !important;
}
.modal-body select[size]:focus {
border-color: rgba(232,102,58, 0.42) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.82),
0 0 0 3px var(--accent-warm-bg) !important;
}
.modal-body select[size] option {
padding: 8px 10px;
border-radius: 9px;
margin: 2px 0;
}
.modal-body select[size] option:checked {
background: rgba(232,102,58, 0.16) linear-gradient(0deg, rgba(232,102,58, 0.16), rgba(232,102,58, 0.16));
color: var(--char);
}
.modal-foot .btn-prime {
background: #E8663A;
color: #fff;
border: none;
border-radius: 10px;
padding: 11px 22px;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s;
}
.modal-foot .btn-prime::before { display: none; }
.modal-foot .btn-prime:hover {
background: #b35525;
box-shadow: 0 4px 14px rgba(232,102,58, 0.32);
border-left: none;
}
.modal-foot .btn-ghost {
background: transparent;
color: #766960;
border: 1.5px solid #E5E0DC;
border-radius: 10px;
padding: 10px 18px;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.modal-foot .btn-ghost:hover {
border-color: #E8663A;
color: #231D1A;
background: rgba(232,102,58, 0.04);
}
.changelog-head {
padding: 22px 24px 18px;
border-bottom: 1.5px solid var(--border-warm);
background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
position: relative; overflow: hidden;
}
.changelog-head::after {
content: '';
position: absolute; top: 0; right: 0;
width: 160px; height: 100%;
background: radial-gradient(ellipse at right, rgba(232,102,58,.2) 0%, transparent 65%);
}
.changelog-version {
font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
text-transform: uppercase; color: var(--accent-warm); font-weight: 600;
margin-bottom: 6px;
}
.changelog-title {
font-family: var(--serif); font-size: 22px; font-weight: 500;
color: var(--text-on-dark); line-height: 1.2;
}
.changelog-date {
font-family: var(--mono); font-size: 10px;
color: rgba(246,239,226,.4); margin-top: 4px;
}
.changelog-body {
padding: 20px 24px; overflow-y: auto; flex: 1;
}
.changelog-item {
display: flex; gap: 12px; align-items: flex-start;
padding: 9px 0; border-bottom: 1px solid var(--border-warm);
}
.changelog-item:last-child { border-bottom: none; }
.changelog-icon {
font-size: 15px; flex-shrink: 0; margin-top: 1px;
}
.changelog-item-text {
font-size: 13px; color: var(--ink-82); line-height: 1.5;
}
.changelog-item-text b { color: var(--char); font-weight: 500; }
.changelog-foot {
padding: 14px 24px;
border-top: 1.5px solid var(--border-warm);
display: flex; justify-content: flex-end; gap: 8px;
background: var(--paper-2);
}
/* ═══ 11. UPDATE BANNER ═══ */
.update-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99999;
background: linear-gradient(
135deg,
#1a2a1a 0%,
#1a3320 50%,
#1a2a1a 100%
);
border-bottom: 2px solid var(--green);
padding: 0;
animation: updateSlideDown 0.35s ease-out;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.update-banner-inner {
max-width: 900px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 14px;
padding: 12px 20px;
}
.update-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(34,165,90, 0.25);
display: flex;
align-items: center;
justify-content: center;
color: #5be88e;
}
.update-text {
flex: 1;
min-width: 0;
}
.update-text span {
color: #d0f0d8;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
}
.update-progress-bar {
margin-top: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
}
.update-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--green), #5be88e);
border-radius: 3px;
transition: width 0.3s ease;
}
.update-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.update-btn-primary {
background: var(--green);
color: #fff;
border: none;
padding: 7px 18px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
font-family: var(--sans);
cursor: pointer;
transition: all 0.15s;
}
.update-btn-primary:hover {
background: #38975f;
transform: scale(1.03);
}
.update-btn-install {
background: linear-gradient(135deg, var(--accent-warm), #e8924a);
color: #fff;
border: none;
padding: 7px 18px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
font-family: var(--sans);
cursor: pointer;
animation: updatePulse 2s infinite;
transition: all 0.15s;
}
.update-btn-install:hover {
transform: scale(1.05);
}
.update-btn-close {
background: none;
border: none;
color: rgba(255, 255, 255, 0.4);
font-size: 15px;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.15s;
}
.update-btn-close:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
/* ═══ 12. DASHBOARD ═══ */
.dash-status-dot.open { background: rgba(34,165,90,.10); color: var(--green); border: 1px solid rgba(34,165,90,.25); }
.dash-status-dot.closed { background: rgba(224,82,82,.09); color: var(--red); border: 1px solid rgba(224,82,82,.22); }
.dash-status-dot.break { background: rgba(160,98,10,.09); color: var(--amber); border: 1px solid rgba(160,98,10,.22); }
.dash-status-dot.rest { background: rgba(59,130,196,.09); color: var(--blue); border: 1px solid rgba(59,130,196,.22); }
.dash-status-dot.open::before { animation: pulse-green 2s ease-in-out infinite; }
.dash-panel {
background: var(--card-bg);
border: var(--card-border-thin);
border-radius: var(--card-radius);
overflow: hidden;
box-shadow: var(--card-shadow);
}
.dash-panel-empty {
padding: 32px 18px;
text-align: center;
font-size: 12px;
color: var(--ink-70);
}
.dash-timeline { padding: 4px 0; }
.dash-tl-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 18px;
border-bottom: 1px solid rgba(217,204,186,.5);
transition: background .1s;
}
.dash-tl-item:last-child { border-bottom: none; }
.dash-tl-item:hover { background: #fdfcfb; }
.dash-tl-icon {
width: 30px; height: 30px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 13px;
flex-shrink: 0;
margin-top: 1px;
}
.dash-tl-icon.venta { background: rgba(34,165,90,.08); }
.dash-tl-icon.ingreso { background: rgba(59,130,196,.08); }
.dash-tl-icon.merma { background: rgba(224,82,82,.07); }
.dash-tl-icon.ajuste { background: rgba(160,98,10,.07); }
.dash-tl-icon.transferencia_salida { background: rgba(232,102,58,.07); }
.dash-tl-icon.transferencia_entrada { background: rgba(34,165,90,.07); }
.dash-tl-body { flex: 1; min-width: 0; }
.dash-tl-prod {
font-size: 12px;
font-weight: 500;
color: var(--char);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dash-tl-meta { font-size: 10px; color: var(--ink-70); margin-top: 1px; }
.dash-tl-right { text-align: right; flex-shrink: 0; }
.dash-tl-delta {
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.dash-tl-delta.pos { color: var(--green); }
.dash-tl-delta.neg { color: var(--red); }
.dash-tl-hora {
font-size: 9px;
color: var(--ink-70);
font-family: var(--mono);
margin-top: 3px;
}
#page-dashboard .dash-tl-item:last-child { border-bottom: none; }
#page-dashboard .dash-tl-icon {
width: 28px;
height: 28px;
border-radius: 6px;
}
#page-dashboard .dash-tl-delta {
font-family: var(--serif);
font-size: 14px;
font-weight: 700;
font-style: italic;
letter-spacing: -0.02em;
}
#page-dashboard .dash-tl-delta.pos { color: var(--green); }
#page-dashboard .dash-tl-delta.neg { color: var(--red); }
#page-dashboard #ds-venc-cell.venc-alert-critical {
--venc-edge: rgba(224,82,82, 0.55);
box-shadow: inset 0 0 0 1px var(--venc-edge);
}
#page-dashboard #ds-venc-cell.venc-alert-warn {
--venc-edge: rgba(232,102,58, 0.46);
box-shadow: inset 0 0 0 1px var(--venc-edge);
}
#page-dashboard #ds-venc-cell.venc-alert-ok {
--venc-edge: rgba(34,165,90, 0.36);
box-shadow: inset 0 0 0 1px var(--venc-edge);
}
#page-dashboard #ds-sparkline {
opacity: 0.42;
}
#page-dashboard .dash-body-grid > .dash-panel:nth-child(1) { grid-area: stock; }
#page-dashboard .dash-body-grid > .dash-panel:nth-child(2) { grid-area: sesion; }
#page-dashboard .dash-tl-item,
#page-dashboard .dash-tl-item:hover,
#page-dashboard .dash-tl-meta,
#page-dashboard .dash-tl-hora,
#page-dashboard.dashboard-core {
--db-surface-0: var(--paper);
--db-line-soft: rgba(205, 188, 165, 0.56);
--db-text-meta: rgba(26, 20, 16, 0.68);
--db-gap: 12px;
background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
#page-dashboard.dashboard-core .dash-panel,
#page-dashboard.dashboard-core #ds-venc-cell {
background: var(--db-surface-0);
border: 1px solid rgba(26,20,16,.05);
box-shadow: var(--card-shadow);
}
#page-dashboard.dashboard-core .dash-panel { border-radius: var(--radius-lg); }
#page-dashboard.dashboard-core .dash-tl-meta,
#page-dashboard.dashboard-core .dash-tl-hora,
#page-dashboard.dashboard-core .nota-meta { color: var(--db-text-meta); }
#page-dashboard.dashboard-core .dash-body-grid {
display: grid;
grid-template-columns: 1.2fr 1fr 0.85fr;
grid-template-areas: "sesion stock tools";
gap: var(--db-gap);
align-items: start;
}
#page-dashboard.dashboard-core .dash-body-grid > .dash-panel:nth-child(1) { grid-area: stock; }
#page-dashboard.dashboard-core .dash-body-grid > .dash-panel:nth-child(2) { grid-area: sesion; }
#page-dashboard.dashboard-core .dash-tl-item,
#page-dashboard.dashboard-core .nota-item { border-bottom-color: var(--db-line-soft); }
#page-dashboard.dashboard-core .dash-tl-item:hover,
#page-dashboard.dashboard-core .nota-item:hover { background: rgba(232,102,58, 0.06); }
#page-dashboard .dash-venc-empty {
margin-top: 10px;
font-size: 11px;
color: var(--ink-70);
}
#page-dashboard .dash-venc-head,
#page-dashboard .dash-venc-row {
display: grid;
grid-template-columns: 1.5fr .76fr .44fr;
gap: 8px;
align-items: center;
}
#page-dashboard .dash-venc-row:last-child { border-bottom: none; }
#page-dashboard .dash-venc-state {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: .02em;
padding: 3px 8px;
}
#page-dashboard .dash-venc-days {
font-family: var(--mono);
font-weight: 700;
text-align: right;
}
#page-dashboard .nota-list { max-height: 360px; }
#page-dashboard #dth.clock-digit-flip,
#page-dashboard #dtm.clock-digit-flip {
display: inline-block;
animation: dashClockDigitFlip .46s cubic-bezier(.16,.84,.28,1);
will-change: transform, opacity, filter;
}
#dash-venc-hover-card .dash-vh-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
#dash-venc-hover-card .dash-vh-date {
font-family: var(--serif);
font-size: 15px;
color: var(--char);
font-weight: 600;
}
#dash-venc-hover-card .dash-vh-total {
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-82);
font-weight: 700;
}
#dash-venc-hover-card .dash-vh-list {
border: 1px solid rgba(232,102,58, 0.2);
border-radius: 9px;
background: rgba(255, 255, 255, 0.62);
overflow: hidden;
}
#dash-venc-hover-card .dash-vh-row {
display: grid;
grid-template-columns: 1.4fr .7fr .35fr;
gap: 6px;
align-items: center;
padding: 6px 8px;
border-bottom: 1px solid rgba(232,102,58, 0.14);
}
#dash-venc-hover-card .dash-vh-row:last-child {
border-bottom: none;
}
#dash-venc-hover-card .dash-vh-prod {
font-size: 12px;
color: var(--char);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#dash-venc-hover-card .dash-vh-state {
justify-self: start;
border: 1px solid transparent;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
}
#dash-venc-hover-card .dash-vh-days {
justify-self: end;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
}
#dash-venc-hover-card .dash-vh-empty {
font-size: 11px;
color: var(--ink-70);
padding: 10px 8px;
}
#dash-venc-hover-card .dash-vh-more {
margin-top: 6px;
font-size: 10px;
font-family: var(--mono);
color: var(--ink-70);
}
#page-dashboard .dash-time{
font-family: var(--serif);
line-height: 1;
font-style: normal;
letter-spacing: -0.02em;
font-weight: 420;
transform-origin: left center;
color: #1a1410;
font-size: 58px;
}
#page-dashboard .dash-local-name{
font-family: var(--mono);
font-size: 8.5px;
text-transform: uppercase;
display: inline-block;
font-weight: 600;
color: rgba(232,102,58,0.55);
letter-spacing: .20em;
}
#page-dashboard .dash-panel{
overflow: hidden;
border-radius: var(--radius-lg);
background: #ffffff;
border: 1px solid rgba(26,20,16,0.05) !important;
border-top: 2px solid rgba(232,102,58,0.16) !important;
box-shadow: var(--card-shadow);
transition: box-shadow .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1);
}
#page-dashboard .dash-panel:hover {
box-shadow: var(--card-shadow-hover);
transform: translateY(-1px);
}
#page-dashboard .dash-panel-empty{
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.06em;
padding: 32px 18px;
text-align: center;
color: rgba(26,20,16,0.28);
}
#page-dashboard .dash-tl-item{
padding: 11px 18px;
border-bottom: 1px solid rgba(26,20,16,0.05);
transition: background var(--motion-fast) var(--ease-ui);
border-bottom-color: rgba(26,20,16,0.07);
}
#page-dashboard .dash-tl-item:hover { background: rgba(232,102,58,0.03); }
#page-dashboard .dash-tl-prod{
font-size: 12px;
font-weight: 500;
color: #1a1410;
}
#page-dashboard .dash-tl-meta{
font-family: var(--mono);
font-size: 9.5px;
margin-top: 2px;
letter-spacing: 0.03em;
color: rgba(26,20,16,0.36);
}
#page-dashboard .dash-tl-hora{
font-family: var(--mono);
font-size: 9px;
margin-top: 3px;
letter-spacing: 0.04em;
color: rgba(26,20,16,0.28);
}
#page-dashboard .dash-venc-table{
border: 1px solid rgba(232,102,58, 0.18);
border-radius: 11px;
overflow: hidden;
border-color: rgba(26,20,16,0.10);
background: #ffffff;
}
#page-dashboard .dash-venc-head{
padding: 9px 11px;
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
border-bottom: 1px solid rgba(232,102,58, 0.15);
background: rgba(245,241,235,0.70);
border-bottom-color: rgba(26,20,16,0.08);
color: rgba(26,20,16,0.44);
}
#page-dashboard .dash-venc-row{
padding: 8px 11px;
border-bottom: 1px solid rgba(232,102,58, 0.12);
border-bottom-color: rgba(26,20,16,0.07);
}
#page-dashboard .dash-venc-col{
font-size: 12px;
color: rgba(26,20,16,0.56);
}
#page-dashboard .dash-venc-prod{
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #1a1410;
}
#page-dashboard .dash-venc-more{
margin-top: 6px;
font-family: var(--mono);
font-size: 10px;
color: rgba(26,20,16,0.36);
}
#page-dashboard .nota-item{
border-bottom: 1px solid rgba(26,20,16,0.05);
padding: 9px 14px;
border-bottom-color: rgba(26,20,16,0.07);
}
#page-dashboard .nota-item:hover { background: rgba(232,102,58,0.03); }
#page-dashboard .nota-texto{
font-size: 12px;
line-height: 1.45;
font-weight: 500;
color: #1a1410;
}
#page-dashboard .nota-meta{
font-family: var(--mono);
font-size: 9px;
margin-top: 2px;
color: rgba(26,20,16,0.32);
}
#page-dashboard .nota-del{
opacity: 0.45;
color: rgba(26,20,16,0.26);
}
#page-dashboard .nota-del:hover{
opacity: 1;
color: var(--red);
}
.nd-date {
font-family: var(--sans); font-size: 13px; color: rgba(26,20,16,0.48); margin: 0;
}
.nd-kpi-badge {
font-family: var(--mono); font-size: 10.5px; font-weight: 600;
letter-spacing: 0.04em; padding: 3px 8px; border-radius: 5px;
background: rgba(26,20,16,0.06); color: rgba(26,20,16,0.50);
}
.nd-kpi-badge.up { background: rgba(34,165,90,0.10); color: rgba(20,110,55,0.92); }
.nd-kpi-badge.down { background: rgba(224,82,82,0.10); color: rgba(150,40,25,0.90); }
.nd-body {
display: grid;
grid-template-columns: 1fr 370px;
gap: 20px;
align-items: start;
}
.nd-col-main { display:flex; flex-direction:column; gap:20px; }
.nd-col-side { display:flex; flex-direction:column; gap:20px; }
.nd-card {
background: #fff; border: 1px solid rgba(26,20,16,0.05);
border-radius: var(--radius-lg); padding: 22px 24px; box-sizing: border-box;
box-shadow: var(--card-shadow);
transition: box-shadow .28s cubic-bezier(.16,1,.3,1), border-color .22s ease, transform .28s cubic-bezier(.16,1,.3,1);
}
.nd-card:hover {
box-shadow: var(--card-shadow-hover);
border-color: rgba(26,20,16,.07);
transform: translateY(-1px);
}
.nd-card-kicker {
font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.20em;
text-transform: uppercase; color: rgba(26,20,16,0.42); margin-bottom: 4px; font-weight:600;
}
.nd-card-title {
font-family: var(--serif); font-size: 20px; font-weight: 700;
letter-spacing: -0.02em; color: #1a1410; margin: 0 0 18px; line-height: 1.1;
}
.nd-card-head {
display: flex; justify-content: space-between; align-items: flex-start;
margin-bottom: 18px;
}
.nd-card-head .nd-card-title { margin-bottom: 0; }
.nd-card-link {
font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
color: rgba(26,20,16,0.42); background: none; border: none; cursor: pointer;
padding: 0; transition: color .12s; white-space: nowrap; align-self:flex-end;
}
.nd-card-link:hover { color: rgba(107,26,26,0.85); }
.nd-empty {
font-family: var(--mono); font-size: 11px; color: rgba(26,20,16,0.32);
letter-spacing: 0.06em; padding: 20px 0; text-align: center;
}
.nd-chart-wrap { position:relative; height:160px; }
.nd-chart-wrap canvas { width:100% !important; height:100% !important; }
/* ═══════════════════════════════════════════════════════════════════
v7.96.0 · Dashboard "Ventas del mes" — pulsing dot + value pill
DOM-overlay sobre el canvas. Performance friendly (CSS keyframes).
═══════════════════════════════════════════════════════════════════ */
.nd-trend-wrap {
position: relative;
height: 160px;
overflow: visible;
}
.nd-trend-pulse {
position: absolute;
width: 0; height: 0;
pointer-events: none;
z-index: 4;
transform: translate(-50%, -50%);
transition: left .42s cubic-bezier(.16, 1, .3, 1), top .42s cubic-bezier(.16, 1, .3, 1);
}
.nd-trend-pulse-core {
position: absolute;
left: 50%; top: 50%;
width: 9px; height: 9px;
margin-left: -4.5px;
margin-top: -4.5px;
border-radius: 50%;
background: #FF6B35;
box-shadow:
0 0 0 2px #fff,
0 0 0 3px rgba(255, 107, 53, .35),
0 2px 6px rgba(255, 107, 53, .35);
animation: ndTrendCorePulse 1.8s ease-in-out infinite;
}
.nd-trend-pulse-halo {
position: absolute;
left: 50%; top: 50%;
width: 9px; height: 9px;
margin-left: -4.5px;
margin-top: -4.5px;
border-radius: 50%;
background: rgba(255, 107, 53, .42);
animation: ndTrendHaloPulse 1.8s ease-out infinite;
}
@keyframes ndTrendCorePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.18); }
}
@keyframes ndTrendHaloPulse {
0% { opacity: .65; transform: scale(1); }
70% { opacity: 0; transform: scale(3.6); }
100% { opacity: 0; transform: scale(3.6); }
}
.nd-trend-vlabel {
position: absolute;
pointer-events: none;
z-index: 5;
transform: translate(8px, -50%);
display: inline-flex;
align-items: baseline;
gap: 5px;
padding: 4px 8px 4px 9px;
background: #FFFFFF;
border-radius: 7px;
box-shadow:
0 0 0 1px rgba(26, 20, 16, .055),
0 4px 12px rgba(26, 20, 16, .10);
font-family: var(--sans, "Inter Tight", sans-serif);
font-size: 11px;
line-height: 1.1;
white-space: nowrap;
opacity: 0;
animation: ndTrendVlabelIn .42s cubic-bezier(.16, 1, .3, 1) .35s forwards;
transition: left .42s cubic-bezier(.16, 1, .3, 1), top .42s cubic-bezier(.16, 1, .3, 1);
}
@keyframes ndTrendVlabelIn {
from { opacity: 0; transform: translate(0, -50%) scale(.94); }
to { opacity: 1; transform: translate(8px, -50%) scale(1); }
}
.nd-trend-vlabel-day {
font-family: var(--mono, "JetBrains Mono", monospace);
font-size: 8.5px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #FF6B35;
}
.nd-trend-vlabel-amt {
font-weight: 700;
letter-spacing: -.01em;
color: #262626;
font-variant-numeric: tabular-nums;
}
/* Dark mode adjustments */
[data-theme="dark"] .nd-trend-pulse-core {
box-shadow:
0 0 0 2px var(--surface-1),
0 0 0 3px rgba(255, 140, 90, .35),
0 2px 6px rgba(255, 140, 90, .35);
}
[data-theme="dark"] .nd-trend-vlabel {
background: var(--surface-3);
box-shadow:
0 0 0 1px var(--line-soft),
0 4px 14px rgba(0, 0, 0, .40);
}
[data-theme="dark"] .nd-trend-vlabel-amt {
color: var(--ink-primary);
}
@media (prefers-reduced-motion: reduce) {
.nd-trend-pulse-core,
.nd-trend-pulse-halo { animation: none !important; }
.nd-trend-pulse-halo { opacity: .42; }
.nd-trend-vlabel { animation: none !important; opacity: 1; }
}
.nd-ventas-list { display:flex; flex-direction:column; gap:0; }
.nd-mix-wrap { display:flex; align-items:center; gap:20px; }
.nd-mix-donut { flex-shrink:0; width:140px; height:140px; position:relative; }
.nd-mix-donut canvas { width:100% !important; height:100% !important; }
.nd-mix-legend { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.nd-ranking-list { display:flex; flex-direction:column; gap:14px; }
.nd-stockbajo-list { display:flex; flex-direction:column; gap:14px; }
#page-dashboard{
min-height: calc(100vh - var(--topbar));
padding-bottom: 36px;
padding: 32px 32px 40px;
box-sizing: border-box;
background: #fdfcfb;
}
#page-dashboard > [aria-hidden="true"] {
display: none !important;
visibility: hidden !important;
height: 0;
overflow: hidden;
position: absolute;
pointer-events: none !important;
}
.mv2-page-head-title,
.v3-title,
.sk-title,
.vc2-title,
.pr-title,
.cc2-title,
.cc3-page-head-title,
.co-title,
.cam-title,
.cmv2-title,
.trf-title,
#page-clientes .cli-title,
.nd-card,
.mv-table-card,
#page-movimientos .mv2-kpi,
.v3-card,
.v3-card.v3-card-critico,
.v3-card.v3-card-hero,
.v3-card.v3-card-control,
.co-card,
.trf-card,
.cc3-hero,
#page-cierre .cc3-ops-card,
#page-cierre .cc3-hist-card,
#page-clientes .cli-card-item,
#page-precios .pr-card,
.mvd-foot,
#mov-inspector {
background: #FFFFFF !important;
border: 1px solid rgba(26,20,16,.05) !important;
border-radius: var(--radius-lg);
box-shadow: var(--card-shadow) !important;
transition: box-shadow .28s cubic-bezier(.16,1,.3,1),
border-color .22s ease,
transform .28s cubic-bezier(.16,1,.3,1) !important;
}
.nd-card:hover,
.mv-table-card:hover,
#page-movimientos .mv2-kpi:hover,
.v3-card:hover,
.co-card:hover,
.trf-card:hover,
#page-cierre .cc3-ops-card:hover,
#page-cierre .cc3-hist-card:hover,
#page-clientes .cli-card-item:hover,
.nd-card,
.mv-table-card,
#page-movimientos .mv2-kpi,
.v3-card,
.v3-card.v3-card-critico,
.v3-card.v3-card-hero,
.v3-card.v3-card-control,
.co-card,
.trf-card,
.cc3-hero,
#page-cierre .cc3-ops-card,
#page-cierre .cc3-hist-card,
#page-clientes .cli-card-item,
.sk-kpi-card,
.sk-filter-bar,
/* ═══ 13. STOCK ═══ */
#page-stock .ph {
margin-bottom: 14px;
}
#page-stock th:first-child,
#page-stock th:nth-child(3),
#page-stock td:nth-child(3) { width: 90px; text-align: center; }
#page-stock th:nth-child(4),
#page-stock td:nth-child(4) { width: 122px; }
#page-stock th:nth-child(5),
#page-stock td:nth-child(5) { width: 132px; }
#page-stock th:nth-child(7),
#page-stock td:nth-child(7) { width: 150px; }
#page-stock th:nth-child(9),
#page-stock td:nth-child(9) { width: 108px; }
#page-stock .stock-qty-sub,
#page-stock .stock-price-sub,
#page-stock .stock-next-sub,
#page-stock .stock-updated,
#page-stock th:nth-child(6),
#page-stock td:nth-child(6),
#page-stock th:nth-child(8),
#page-stock td:nth-child(8) {
display: none;
}
#page-stock table thead {
background: #f0e8db;
}
#page-stock th:first-child {
z-index: 4;
background: #f0e8db;
}
#page-stock td{
padding-top: 15px;
padding-bottom: 15px;
padding: 18px 14px;
vertical-align: top;
border-bottom: 1px solid rgba(26, 20, 16, 0.06);
background: #ffffff;
}
#page-stock td:first-child {
position: sticky;
left: 0;
z-index: 2;
background: #ffffff;
}
#page-stock tbody tr:not(.stock-lotes-row):hover td {
background: rgba(245, 239, 230, 0.70);
}
#page-stock tbody tr:hover td:first-child {
background: rgba(245, 239, 230, 0.70);
}
#page-stock tbody tr:not(.stock-lotes-row){
border-bottom-color: var(--line-soft);
border-bottom: none;
transition: background var(--motion-fast) var(--ease-ui);
}
#page-stock .stock-prod-main {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 8px;
}
#page-stock .stock-prod-name {
font-size: 14px;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.25;
color: var(--t1);
margin-bottom: 6px;
}
#page-stock .stock-prod-meta {
gap: 6px;
}
#page-stock .stock-mini-pill{
border-color: var(--line-strong);
font-family: var(--mono);
font-size: 8.5px;
padding: 3px 8px;
border-radius: 3px;
background: var(--surface-1);
border: 1px solid var(--line-soft);
color: var(--t3);
letter-spacing: 0.06em;
}
#page-stock .stock-notes {
margin-top: 8px;
font-size: 10px;
line-height: 1.50;
color: var(--t3);
border-left: 2px solid rgba(232,102,58, 0.30);
padding: 4px 9px;
background: rgba(232,102,58, 0.04);
border-radius: 0 4px 4px 0;
}
#page-stock .tag {
border-radius: 3px;
padding: 3px 7px;
font-size: 8.5px;
letter-spacing: 0.10em;
}
#page-stock .tag-cr {
background: var(--c-red-soft);
color: var(--c-red-ink);
border: 1px solid var(--c-red-line);
}
#page-stock .stock-next {
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
color: var(--t2);
letter-spacing: -0.01em;
}
#page-stock .stock-next-empty {
color: var(--t4);
font-family: var(--mono);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.04em;
}
#page-stock .stock-next-sub {
font-family: var(--mono);
font-size: 9px;
color: var(--t4);
margin-top: 5px;
}
#page-stock .stock-updated {
font-family: var(--mono);
font-size: 10.5px;
color: var(--t3);
letter-spacing: 0.02em;
}
#page-stock .stock-level .bar {
width: 100%;
height: 5px;
border-radius: 2px;
background: rgba(26, 20, 16, 0.08);
overflow: hidden;
}
#page-stock .stock-level .bar-fill {
height: 100%;
border-radius: 2px;
transition: width var(--motion-med) var(--ease-out);
}
#page-stock .stock-actions .btn-icon {
width: 28px;
height: 28px;
border-radius: 5px;
background: transparent;
border-color: rgba(26, 20, 16, 0.10);
color: var(--t3);
}
#page-stock .stock-actions .btn-icon:hover {
background: var(--ember-bg);
border-color: var(--ember-ln);
color: var(--accent-warm);
transform: scale(1.08);
}
#page-stock.stock-compact td {
padding-top: 12px;
padding-bottom: 12px;
}
#page-stock.stock-compact .stock-notes { display: none; }
#page-stock.stock-compact .stock-mini-pill:nth-child(n+2) { display: none; }
#page-stock.stock-compact .stock-prod-name { font-size: 13px; }
#page-stock.stock-compact .stock-qty { font-size: 14px; }
#page-stock > .ph {
display: none;
}
#page-stock.stock-compact th:nth-child(8),
#page-stock.stock-compact td:nth-child(8) {
display: none !important;
}
#page-stock.stock-compact th:nth-child(4),
#page-stock.stock-compact td:nth-child(4) { width: 110px; }
#page-stock.stock-compact th:nth-child(5),
#page-stock.stock-compact td:nth-child(5) { width: 120px; }
#page-stock.stock-compact th:nth-child(6),
#page-stock.stock-compact td:nth-child(6) { width: 100px; }
#page-stock.stock-compact th:nth-child(7),
#page-stock.stock-compact td:nth-child(7) { width: 148px; }
#page-stock.stock-compact th:nth-child(9),
#page-stock.stock-compact td:nth-child(9) { width: 100px; }
#page-stock .table-wrap{
flex: 1;
min-height: 0;
max-height: none;
background: #ffffff;
border: 1px solid rgba(26,20,16,0.10) !important;
border-top: none !important;
border-radius: 0 0 8px 8px;
box-shadow: 0 4px 24px rgba(26,20,16,0.06);
overflow: auto;
position: relative;
}
#page-stock table thead,
#page-stock table thead tr {
position: sticky;
top: 0;
z-index: 18;
}
#page-stock th{
padding-top: 13px;
padding-bottom: 13px;
font-family: var(--mono);
font-size: 8.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 500;
padding: 14px 14px;
border-bottom: 1px solid rgba(232,102,58, 0.18);
white-space: nowrap;
position: sticky;
top: 0;
z-index: 20;
background: #f0e8db;
color: rgba(26, 20, 16, 0.52);
backdrop-filter: blur(3px);
}
#page-stock .table-wrap.stock-scrolled th {
box-shadow: inset 0 -1px 0 rgba(196, 164, 126, 0.28), 0 8px 14px -12px rgba(28, 20, 14, 0.34);
}
#page-stock {
padding: 46px 46px 60px;
overflow: visible;
flex-direction: column;
gap: 0;
min-height: 100%;
box-sizing: border-box;
}
#page-stock.active { display: flex; }
.sk-bc {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: rgba(26,20,16,0.45);
margin-bottom: 20px;
}
.sk-bc-link {
cursor: pointer;
transition: color 0.12s;
}
.sk-bc-link:hover { color: #1A1410; }
.sk-bc-sep { opacity: 0.4; }
.sk-bc-cur { color: rgba(26,20,16,0.65); font-weight: 500; }
.sk-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.sk-eyebrow {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
color: rgba(26,20,16,0.4);
text-transform: uppercase;
margin-bottom: 6px;
}
.sk-title {
font-family: var(--serif, Georgia, serif);
font-size: 40px;
font-weight: 500;
color: #1A1410;
line-height: 1;
margin: 0 0 8px;
letter-spacing: -0.02em;
}
.sk-subtitle {
font-size: 13px;
color: rgba(26,20,16,0.5);
margin: 0;
}
.sk-header-right {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.sk-btn-primary {
display: flex;
align-items: center;
gap: 7px;
background: var(--accent-warm, #E8663A);
border: none;
border-radius: 10px;
padding: 9px 18px;
font-size: 13px;
font-weight: 600;
color: #fff;
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s;
font-family: var(--sans, sans-serif);
white-space: nowrap;
}
.sk-btn-primary:hover {
background: var(--accent-warm-lt, #F0764A);
box-shadow: 0 4px 14px rgba(232,102,58,0.3);
}
.sk-kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 20px;
}
.sk-filter-bar {
background: #fff;
border-radius: 14px;
padding: 16px 20px;
box-shadow: 0 1px 3px rgba(26,20,16,0.06), 0 4px 16px rgba(26,20,16,0.04);
margin-bottom: 16px;
display: flex;
flex-direction: column;
gap: 14px;
}
.sk-filter-top {
display: flex;
align-items: center;
gap: 12px;
}
.sk-search-wrap {
flex: 1;
position: relative;
}
.sk-search-ico {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 14px; height: 14px;
color: rgba(26,20,16,0.35);
pointer-events: none;
}
.sk-sucursal-wrap {
display: flex;
align-items: center;
gap: 6px;
color: rgba(26,20,16,0.5);
flex-shrink: 0;
}
.sk-locf-sel {
border: 1.5px solid rgba(26,20,16,0.1);
border-radius: 8px;
padding: 8px 10px;
font-size: 12px;
font-family: var(--sans, sans-serif);
color: #1A1410;
background: #fdfcfb;
outline: none;
cursor: pointer;
transition: border-color 0.15s;
}
.sk-locf-sel:focus { border-color: rgba(26,20,16,0.3); }
.sk-filter-divider {
height: 1px;
background: rgba(26,20,16,0.07);
}
.sk-filter-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.sk-fpill-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.sk-fpill {
border: 1.5px solid rgba(26,20,16,0.12);
border-radius: 20px;
padding: 5px 14px;
font-size: 12px;
font-weight: 500;
color: rgba(26,20,16,0.6);
background: none;
cursor: pointer;
transition: all 0.12s;
font-family: var(--sans, sans-serif);
white-space: nowrap;
}
.sk-fpill:hover {
border-color: rgba(26,20,16,0.3);
color: #1A1410;
}
.sk-fpill.active {
background: var(--accent-warm, #E8663A);
border-color: var(--accent-warm, #E8663A);
color: #fff;
font-weight: 600;
}
.sk-results-bar {
margin-bottom: 10px;
padding: 0 2px;
}
.sk-results-count {
font-size: 12px;
color: rgba(26,20,16,0.45);
font-weight: 500;
}
.sk-table-wrap {
background: #fff;
border-radius: 14px;
box-shadow: 0 1px 3px rgba(26,20,16,0.06), 0 4px 16px rgba(26,20,16,0.04);
overflow: hidden;
overflow-x: auto;
}
.sk-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.sk-table thead tr {
background: #f2f1ef;
border-bottom: 1.5px solid rgba(26,20,16,.08);
}
.sk-table th {
padding: 10px 14px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(26,20,16,.40);
text-align: left;
white-space: nowrap;
background: transparent;
}
.sk-table td {
padding: 14px 16px;
border-bottom: 1px solid rgba(26,20,16,0.05);
vertical-align: middle;
color: #1A1410;
}
.sk-table tbody tr:last-child td { border-bottom: none; }
.sk-table tbody tr:hover td { background: rgba(26,20,16,0.02); }
#page-stock .stock-shell,
#page-stock .stock-hero,
#page-stock .table-wrap,
#page-stock .ph { display: none !important; }
#page-stock .sk-table-wrap table,
#page-stock .sk-table-wrap .sk-table { border-collapse: collapse; width: 100%; font-size: 13px; }
#page-stock .sk-table-wrap th {
background: transparent !important;
color: rgba(26,20,16,.40);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 10px 14px;
border: none !important;
box-shadow: none;
}
#page-stock .sk-table-wrap td {
padding: 14px 16px;
border-bottom: 1px solid rgba(26,20,16,0.05) !important;
border-top: none !important;
background: transparent;
vertical-align: middle !important;
}
#page-stock .sk-table-wrap tbody tr:last-child td { border-bottom: none !important; }
#page-stock .sk-table-wrap tbody tr:hover td { background: rgba(26,20,16,0.018); }
#page-stock .sk-table-wrap .stock-prod-name {
font-size: 13px;
font-weight: 600;
color: #1A1410;
letter-spacing: -0.01em;
}
#page-stock .sk-table-wrap .stock-prod-meta { margin-top: 3px; }
#page-stock .sk-table-wrap .stock-notes { font-size: 11px; color: rgba(26,20,16,0.45); margin-top: 2px; }
#page-stock .sk-table-wrap .stock-mini-pill {
font-size: 10px;
background: rgba(26,20,16,0.05);
color: rgba(26,20,16,0.55);
border: none !important;
border-radius: 4px;
padding: 1px 6px;
font-weight: 500;
}
#page-stock .sk-table-wrap .stock-warn-badge {
font-size: 10px;
background: rgba(232,102,58,0.08);
color: var(--accent-warm, #E8663A);
border-radius: 4px;
padding: 1px 6px;
border: none !important;
}
#page-stock .sk-table-wrap .tag {
font-size: 10px;
font-weight: 600;
border-radius: 6px;
padding: 3px 8px;
border: 1.5px solid transparent !important;
letter-spacing: 0.03em;
white-space: nowrap !important;
}
#page-stock .sk-table-wrap .tag-dim {
background: rgba(26,20,16,0.05);
color: rgba(26,20,16,0.65);
border-color: rgba(26,20,16,0.08);
}
#page-stock .sk-table-wrap .tag-l1 {
background: var(--c-blue-soft);
color: var(--c-blue-ink);
border-color: var(--c-blue-line);
}
#page-stock .sk-table-wrap .tag-l2 {
background: var(--c-plum-soft);
color: var(--c-plum-ink);
border-color: var(--c-plum-line);
}
#page-stock .sk-table-wrap .tag-ok {
background: var(--c-green-soft);
color: var(--c-green-ink);
border-color: var(--c-green-line);
}
#page-stock .sk-table-wrap .tag-lo {
background: var(--c-amber-soft);
color: var(--c-amber-ink);
border-color: var(--c-amber-line);
}
#page-stock .sk-table-wrap .tag-cr {
background: var(--c-red-soft);
color: var(--c-red-ink);
border-color: var(--c-red-line);
}
#page-stock .sk-table-wrap .stock-qty {
font-size: 14px;
font-weight: 600;
line-height: 1.2;
}
#page-stock .sk-table-wrap .stock-qty-sub,
#page-stock .sk-table-wrap .stock-price-sub,
#page-stock .sk-table-wrap .stock-next-sub,
#page-stock .sk-table-wrap .stock-updated {
font-size: 11px;
color: rgba(26,20,16,0.4);
margin-top: 2px;
}
#page-stock .sk-table-wrap .stock-price {
font-size: 13px;
font-weight: 600;
color: #1A1410;
}
#page-stock .sk-table-wrap .stock-next { font-size: 13px; font-weight: 600; }
#page-stock .sk-table-wrap .stock-next-empty { color: rgba(26,20,16,0.3); }
#page-stock .sk-table-wrap .stock-level { min-width: 120px; }
#page-stock .sk-table-wrap .stock-level-top {
display: flex !important;
align-items: center;
justify-content: space-between;
margin-bottom: 5px;
}
#page-stock .sk-table-wrap .stock-level-value {
font-size: 11px;
color: rgba(26,20,16,0.45);
}
#page-stock .sk-table-wrap .bar {
height: 4px;
background: rgba(26,20,16,0.07);
border-radius: 2px;
overflow: hidden;
}
#page-stock .sk-table-wrap .bar-fill {
height: 100%;
border-radius: 2px;
transition: width 0.4s ease !important;
}
#page-stock .sk-table-wrap .stock-actions { display: flex; gap: 4px; align-items: center; }
#page-stock .sk-table-wrap .btn-icon {
width: 28px !important; height: 28px;
border-radius: 7px;
border: 1.5px solid rgba(26,20,16,0.1) !important;
background: #fff;
color: rgba(26,20,16,0.5);
display: flex !important; align-items: center; justify-content: center;
cursor: pointer;
transition: border-color 0.12s, color 0.12s !important;
}
#page-stock .sk-table-wrap .btn-icon:hover {
border-color: rgba(26,20,16,0.3);
color: #1A1410;
}
#page-stock .sk-table-wrap .btn-icon svg { width: 12px !important; height: 12px !important; }
#page-stock .sk-table-wrap .stock-expand-btn {
width: 18px !important; height: 18px;
border-radius: 5px;
border: 1px solid rgba(26,20,16,.12) !important;
background: transparent !important;
color: rgba(26,20,16,.40);
display: inline-flex !important;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
margin-top: 1px; /* alinea con la primera línea del nombre */
}
.sk-bc, .vc2-breadcrumb, .cc2-breadcrumb, .cli-breadcrumb,
nav.sk-bc { display: none !important; }
.sk-eyebrow,
.vc2-eyebrow,
.pr-eyebrow,
.cam-eyebrow,
.cmv2-eyebrow,
.co-eyebrow,
.cli-eyebrow { display: none !important; }
.sk-title,
.vc2-title,
.pr-title,
.cam-title,
.cmv2-title,
.cc2-title,
.co-title,
.sk-subtitle,
.vc2-subtitle,
.pr-subtitle,
.cam-subtitle,
.co-subtitle,
.mv2-page-head-eyebrow,
.v3-eyebrow,
.sk-eyebrow,
.vc2-eyebrow,
.pr-eyebrow,
.cc3-page-head-eyebrow,
.co-eyebrow,
.cam-eyebrow,
.cmv2-eyebrow,
.cli-eyebrow,
.trf-kicker { display: none !important; }
.mv2-page-head-title,
.v3-title,
.sk-title,
.vc2-title,
.pr-title,
.cc2-title,
.cc3-page-head-title,
.co-title,
.cam-title,
.cmv2-title,
.trf-title,
[class*="-page-head-sub"],
[class*="-subtitle"],
.cc3-page-head-sub,
.v3-subtitle,
.sk-subtitle,
.pr-subtitle,
.co-subtitle {
font-family: var(--sans-struct) !important;
font-weight: 400 !important;
letter-spacing: -0.003em !important;
}
#page-movimientos .mv2-kpi-value,
#page-cierre .cc3-hero-num,
#page-cierre .cc3-hero-total-val,
#page-vencimientos .v3-c-num,
#page-vencimientos .v3-hero-num,
#page-stock [class*="kpi-value"],
#mov-inspector .mvd-total-val,
#mov-inspector .mvd-num,
.mvd-total-val,
.mvd-num {
font-family: var(--display) !important;
font-style: normal !important;
font-weight: 700 !important;
font-optical-sizing: auto !important;
}
.sk-kpi-card,
.sk-filter-bar,
.sk-table-wrap {
background: #FFFFFF !important;
border-radius: var(--radius-lg) !important;
border: 1px solid rgba(26,20,16,.05) !important;
box-shadow: var(--card-shadow) !important;
transition: box-shadow .28s cubic-bezier(.16,1,.3,1), border-color .22s ease, transform .28s cubic-bezier(.16,1,.3,1);
}
.sk-kpi-card:hover {
box-shadow: var(--card-shadow-hover) !important;
border-color: rgba(26,20,16,.07) !important;
transform: translateY(-2px);
}
#page-stock .sk-filter-bar { display: none !important; }
#page-stock .sk-table thead tr { background: #f2f1ef !important; }
#page-stock .sk-table-wrap thead tr{
border-bottom: 1.5px solid rgba(26,20,16,.08);
background: #f2f1ef !important;
}
#page-stock .sk-table th { color: rgba(26,20,16,.62) !important; }
.sk-kpi-card::after {
content: "";
display: block;
height: 1px;
background: rgba(191, 180, 170, 0.25);
margin: 12px 0 10px;
}
.sk-kpi-card{
background: #fff;
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
padding: 16px 20px !important;
box-shadow: 0 1px 3px rgba(26,20,16,0.06), 0 4px 16px rgba(26,20,16,0.04);
display: flex;
flex-direction: column;
gap: 0 !important;
}
.sk-search-input{
width: 100%;
box-sizing: border-box;
padding: 9px 12px 9px 36px;
border: 1.5px solid rgba(26,20,16,0.1);
border-radius: 8px;
font-size: 13px;
font-family: var(--sans, sans-serif);
color: #1A1410;
background: #f2f1ef !important;
outline: none;
transition: border-color 0.15s;
}
.sk-search-input:focus{
border-color: rgba(26,20,16,0.3);
background: #f8f6f3 !important;
}
/* ═══ 14. MOVIMIENTOS ═══ */
#page-movimientos .mov-inspector,
.mov-filter:hover,
.mov-filter.on {
border-color: rgba(26, 20, 16, 0.16);
color: var(--char);
background: rgba(26, 20, 16, 0.07);
}
#page-movimientos .mov-search-clr:hover {
background: transparent;
color: rgba(232,102,58, 0.70);
border: none;
}
#page-movimientos .mov-filter.on{
border-color: rgba(232,102,58, 0.46);
color: rgba(232,102,58, 1);
background: transparent;
border-bottom: 2px solid rgba(232,102,58, 0.80);
font-weight: 700;
}
#page-movimientos .mov-list::before,
#page-movimientos .mov-list::after {
display: none;
}
#page-movimientos .mov-hl {
background: rgba(232,102,58, 0.14);
border-radius: 2px;
padding: 0 1px;
color: inherit;
opacity: 1
}
.mov-ins-empty {
font-family: var(--mono);
font-size: 8.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(26, 20, 16, 0.24);
padding: 36px 0;
text-align: center;
line-height: 1.8;
}
#page-movimientos > .ph {
padding: 0 0 18px;
margin-bottom: 18px;
background: none;
border: none;
border-radius: 0;
border-bottom: 1px solid var(--line-soft);
}
#page-movimientos .ph-title {
font-family: var(--serif);
font-size: 24px;
font-weight: 300;
font-style: italic;
color: var(--t1);
letter-spacing: -0.02em;
line-height: 1.1;
}
#page-movimientos .ph-sub {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--t3);
margin-top: 5px;
}
#page-movimientos .mov-search-clr{
color: rgba(26, 20, 16, 0.35);
font-family: var(--mono);
font-size: 11px;
box-shadow: none;
border: none !important;
border-radius: 0;
padding: 0 10px;
background: transparent;
align-self: stretch;
display: flex !important;
align-items: center;
}
#page-movimientos #mov-results { flex-shrink: 0; }
#page-movimientos #mov-ver-mas-wrap {
flex-shrink: 0;
margin-top: 10px;
margin-bottom: 14px;
}
#page-movimientos .mov-list{
border-color: var(--line-strong);
background: var(--paper);
border: 1px solid rgba(26, 20, 16, 0.10);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 16px rgba(26, 20, 16, 0.05);
transition: margin-right var(--motion-slow) var(--ease-spring) !important;
height: 100%;
max-height: none;
overflow-y: auto;
box-sizing: border-box;
}
#page-movimientos:has(.mov-inspector .mov-ins-kicker, .mov-inspector .mvd-hd) .mov-list {
margin-right: 416px !important;
}
#page-movimientos .mov-inspector{
min-height: 300px;
position: absolute;
top: 0;
right: -420px;
width: 400px;
height: 100%;
max-height: none;
overflow: hidden;
z-index: 4;
border-radius: 0;
border: none !important;
border-left: 1px solid rgba(26,20,16,0.10) !important;
box-shadow: -12px 0 48px rgba(26,20,16,0.10);
background: #faf7f2;
padding: 0;
transition: right var(--motion-slow) var(--ease-spring) !important;
display: flex !important;
flex-direction: column;
}
#page-movimientos .mov-inspector:has(.mov-ins-kicker, .mvd-hd) {
right: 0;
}
#page-movimientos .mov-ins-empty {
font-family: var(--mono);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--t4);
padding: 40px 22px;
text-align: center;
line-height: 1.7;
}
#page-movimientos.section-core .mov-list {
background: var(--paper);
border: var(--card-border);
border-radius: var(--r2);
box-shadow: none;
padding: 0;
overflow: hidden;
}
#page-movimientos.section-core .mov-inspector {
background: var(--paper);
border: var(--card-border);
border-radius: var(--r2);
box-shadow: none;
}
#page-movimientos.section-core .mov-filter,
#page-movimientos.section-core .mov-mobile-btn,
#page-movimientos.section-core .mov-search-clr {
background: var(--paper-2);
border: var(--card-border-thin);
color: var(--ink-82);
box-shadow: none;
font-weight: 650;
font-size: 11.5px;
letter-spacing: .09em;
text-transform: uppercase;
}
#page-movimientos.section-core .mov-filter.on {
background: var(--ink-dark);
border-color: var(--ink-dark);
color: var(--text-on-dark);
font-weight: 700;
}
#page-movimientos.section-core .mov-search-clr:hover {
color: var(--char);
border-color: rgba(232,102,58, 0.42);
background: rgba(232,102,58, 0.08);
}
#page-movimientos.section-core > .ph {
display: flex;
}
.mv-pill { font-family:var(--sans); font-size:12.5px; padding:6px 14px; border-radius:999px; border:1px solid rgba(26,20,16,0.18); background:transparent; color:rgba(26,20,16,0.68); cursor:pointer; transition:background .15s,border-color .15s,color .15s; font-weight:500; }
.mv-pill:hover { background:rgba(232,102,58,0.07); border-color:rgba(232,102,58,0.32); color:rgba(160,70,14,0.90); }
.mv-pill.on { background:rgba(232,102,58,0.88); border-color:rgba(232,102,58,0.88); color:#fff; font-weight:600; }
.mv-body { display:flex; gap:0; position:relative; flex:1; min-height:0; }
.mv-table-card { flex:1; background:#fff; border:1px solid rgba(26,20,16,0.05); border-radius:var(--radius-lg); overflow:hidden; box-shadow: var(--card-shadow); transition:filter 0.38s cubic-bezier(0.16,1,0.3,1), box-shadow .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1); }
body:has(#mov-inspector .mov2-ins-hd, #mov-inspector .mvd-hd) #page-movimientos .mv-table-card { filter: none; }
/* v7.25.0 — Scrim Gradiente lateral + blur progresivo
Gradiente lateral: transparente → scrim cálido cerca del drawer.
Backdrop-blur progresivo via mask: nítido izq → borroso der.
Cubre toda la pantalla; sidebar (z-index: 250) lo tapa naturalmente. */
.mv-ins-overlay {
position: fixed;
inset: 0;
background: linear-gradient(
to right,
transparent 0%,
transparent 30%,
rgba(26,20,16,.012) 44%,
rgba(26,20,16,.04) 55%,
rgba(26,20,16,.08) 65%,
rgba(26,20,16,.13) 75%,
rgba(26,20,16,.17) 85%,
rgba(26,20,16,.20) 94%,
rgba(26,20,16,.22) 100%
);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
transparent 30%,
rgba(0,0,0,.05) 44%,
rgba(0,0,0,.18) 55%,
rgba(0,0,0,.38) 65%,
rgba(0,0,0,.58) 75%,
rgba(0,0,0,.78) 85%,
rgba(0,0,0,.92) 94%,
black 100%
);
mask-image: linear-gradient(
to right,
transparent 0%,
transparent 30%,
rgba(0,0,0,.05) 44%,
rgba(0,0,0,.18) 55%,
rgba(0,0,0,.38) 65%,
rgba(0,0,0,.58) 75%,
rgba(0,0,0,.78) 85%,
rgba(0,0,0,.92) 94%,
black 100%
);
z-index: 201;
opacity: 0;
pointer-events: none;
transition: opacity .42s cubic-bezier(.16,1,.3,1);
}
.mv-ins-overlay.open { opacity: 1; pointer-events: none; }
.mv-table { width:100%; border-collapse:collapse; }
.mv-table thead tr { border-bottom:1px solid rgba(26,20,16,0.08); }
.mv-table th { font-family:var(--mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(26,20,16,0.42); font-weight:600; padding:13px 16px; text-align:left; white-space:nowrap; background:#fff; position:sticky; top:0; z-index:2; }
.mv-table th:last-child { width:28px; }
.mv-table td { padding:14px 16px; border-bottom:1px solid rgba(26,20,16,0.06); vertical-align:middle; }
.mv-table tbody tr:last-child td { border-bottom:none; }
.mv-table tbody tr:hover td { background:rgba(232,102,58,0.04); }
.mv-table tbody tr.mv-row-selected td { background:rgba(232,102,58,0.06); }
.mv-table tbody tr:hover .mv-td-arrow { opacity:1; }
.mv-table tbody tr.mv-row-selected .mv-td-arrow { opacity:1; color:rgba(232,102,58,0.72); }
.mv2-tipo-ico { flex-shrink:0; display:block; }
.mv-inspector {
position: fixed;
/* v7.25.0: flotante — gap simétrico arriba y abajo */
top: 12px;
right: -460px;
bottom: 12px;
width: 440px;
background: #FFFFFF;
border: none;
border-radius: 16px;
box-shadow:
/* Definición: solo inset blanco — sin outline exterior que genere sombra superior */
inset 0 0 0 1px #FFFFFF,
/* Profundidad direccional hacia la izquierda — escala de opacidad del STYLE-GUIDE */
-2px 2px 8px rgba(26,20,16,.06),
-8px 4px 24px rgba(26,20,16,.08),
-20px 8px 48px rgba(26,20,16,.06);
display: flex;
flex-direction: column;
overflow: hidden;
transition: right 0.42s cubic-bezier(0.16,1,0.3,1);
z-index: 210;
}
body:has(#page-movimientos.active) .mv-inspector:has(.mov2-ins-hd, .mvd-hd) { right: 12px; }
body:not(:has(#page-movimientos.active)) .mv-ins-overlay {
opacity: 0;
pointer-events: none !important;
}
.mv-load-more-btn { font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; padding:10px 20px; border-radius:8px; border:1px solid rgba(26,20,16,0.16); background:#fff; color:rgba(26,20,16,0.58); cursor:pointer; transition:background .14s; font-weight:600; }
.mv-load-more-btn:hover { background:rgba(26,20,16,0.05); }
#page-movimientos{
display: flex !important;
flex-direction: column;
box-sizing: border-box;
background: #fdfcfb;
min-height: calc(100vh - 56px);
height: auto;
overflow: visible;
padding-bottom: 28px;
position: relative;
}
#page-movimientos:not(.active):not(.leaving) {
display: none !important;
}
#page-movimientos .mv-body {
min-height: 400px;
}
#page-movimientos .mv-table-card {
transition: filter 0.38s cubic-bezier(0.16,1,0.3,1);
}
#page-movimientos .mv2-page-head { margin-bottom: 22px; }
#page-movimientos .mv2-page-head-eyebrow {
font-family: var(--mono, "Inter", "IBM Plex Mono", monospace);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
color: rgba(26, 20, 16, 0.42);
margin-bottom: 12px;
}
#page-movimientos .mv2-page-head-title {
font-family: var(--serif);
font-size: 32px;
font-weight: 700;
letter-spacing: -0.025em;
color: #1A1410;
line-height: 1.1;
margin: 0 0 10px 0;
}
#page-movimientos .mv2-page-head-sub {
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 14px;
font-weight: 400;
letter-spacing: -0.005em;
color: rgba(26, 20, 16, 0.55);
margin: 0;
}
#page-movimientos .mv2-kpi-strip {
/* v7.18.0: cada card tiene su propio border — el strip es solo grid */
display: grid;
grid-template-columns: repeat(4, 1fr);
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
margin-bottom: 16px;
overflow: visible;
}
#page-movimientos .mv2-kpi {
padding: 16px 22px;
display: flex;
flex-direction: column;
gap: 6px;
border-right: 1px solid rgba(26, 20, 16, 0.06);
}
#page-movimientos .mv2-kpi:last-child { border-right: none; }
#page-movimientos .mv2-toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.mv2-search-wrap {
position: relative;
display: flex;
align-items: center;
flex: 1 1 320px;
min-width: 240px;
}
.mv2-search-icon {
position: absolute;
left: 14px;
width: 14px;
height: 14px;
color: rgba(26, 20, 16, 0.42);
pointer-events: none;
}
.mv2-search-clr {
position: absolute;
right: 8px;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 6px;
color: rgba(26, 20, 16, 0.55);
cursor: pointer;
transition: background 0.14s ease, color 0.14s ease;
}
.mv2-search-clr svg { width: 13px; height: 13px; }
.mv2-search-clr:hover { background: rgba(26, 20, 16, 0.06); color: #1A1410; }
.mv2-filters {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.mv2-dropdown { position: relative; }
.mv2-dropdown.open .mv2-dd-btn {
border-color: rgba(26, 20, 16, 0.32);
box-shadow: 0 0 0 3px rgba(26, 20, 16, 0.04);
}
.mv2-dd-label {
font-family: var(--mono, "Inter", monospace);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(26, 20, 16, 0.42);
}
.mv2-dd-value { color: #1A1410; }
.mv2-dd-chev {
width: 13px;
height: 13px;
color: rgba(26, 20, 16, 0.42);
transition: transform 0.18s ease;
}
.mv2-dropdown.open .mv2-dd-chev { transform: rotate(180deg); }
.mv2-dd-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 50;
min-width: 200px;
margin: 0;
padding: 6px;
list-style: none;
background: #FFFFFF;
border: 1px solid rgba(26, 20, 16, 0.10);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(26, 20, 16, 0.14), 0 4px 10px rgba(26, 20, 16, 0.06);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.16s;
}
.mv2-dropdown.open .mv2-dd-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mv2-dd-item {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 10px;
border-radius: 7px;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 12.5px;
font-weight: 500;
letter-spacing: -0.005em;
color: rgba(26, 20, 16, 0.75);
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
}
.mv2-dd-item:hover {
background: rgba(26, 20, 16, 0.04);
color: #1A1410;
}
.mv2-dd-item.on {
background: rgba(232,102,58, 0.08);
color: #1A1410;
font-weight: 600;
}
.mv2-dd-item-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cc-dot-color, #1A1410);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc-dot-color, #1A1410) 14%, transparent);
flex-shrink: 0;
}
.mv2-dd-item-dot-none {
background: transparent;
border: 1px dashed rgba(26, 20, 16, 0.30);
box-shadow: none;
}
.mv2-export-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 14px;
background: transparent;
border: 1px solid rgba(26, 20, 16, 0.10);
border-radius: 11px;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 12.5px;
font-weight: 600;
letter-spacing: -0.005em;
color: rgba(26, 20, 16, 0.65);
cursor: pointer;
transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.mv2-export-btn svg { width: 13px; height: 13px; }
.mv2-export-btn:hover {
background: rgba(26, 20, 16, 0.04);
border-color: rgba(26, 20, 16, 0.20);
color: #1A1410;
}
#page-movimientos .mv2-active-chips {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 14px;
}
#page-movimientos .mv2-active-chips[hidden] { display: none; }
#page-movimientos .mv2-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 6px 5px 11px;
background: rgba(232,102,58, 0.08);
border: 1px solid rgba(232,102,58, 0.20);
border-radius: 999px;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 11.5px;
font-weight: 600;
letter-spacing: -0.005em;
color: #8C4517;
cursor: pointer;
transition: background 0.14s ease, border-color 0.14s ease;
}
#page-movimientos .mv2-chip:hover {
background: rgba(232,102,58, 0.14);
border-color: rgba(232,102,58, 0.35);
}
#page-movimientos .mv2-chip svg {
width: 10px;
height: 10px;
margin-left: 2px;
margin-right: 2px;
}
#page-movimientos .mv2-chip-clear {
display: inline-flex;
align-items: center;
padding: 5px 11px;
background: transparent;
border: none;
border-radius: 999px;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 11.5px;
font-weight: 600;
letter-spacing: -0.005em;
color: rgba(26, 20, 16, 0.55);
cursor: pointer;
transition: color 0.14s ease;
}
#page-movimientos .mv2-chip-clear:hover { color: #1A1410; text-decoration: underline; }
#page-movimientos .mv-pill[data-group] {
position: absolute;
left: -9999px;
}
#mov-inspector .mov2-ins-ticket-btn,
#mov-inspector .mv-ins-actions { display: none !important; }
[class*="kpi-value"],
[class*="-total-val"],
[class*="-hero-num"],
[class*="-num"][class*="critico"],
[class*="-num"][class*="proximo"],
[class*="-num"][class*="sc-num"],
[class*="nd-val"],
[class*="cc3-hero-total"],
[class*="cc3-histo-monto"],
.mv2-kpi-value,
.cc3-hero-num,
.mvd-total-val,
.mov2-ins-total-val,
.v3-c-num,
.v3-hero-num {
font-family: var(--display) !important;
font-style: normal !important;
font-weight: 700 !important;
font-optical-sizing: auto !important;
letter-spacing: -0.025em !important;
font-feature-settings: "tnum" 1, "kern" 1 !important;
font-variant-numeric: tabular-nums !important;
}
[class*="-qty"],
[class*="-price"],
[class*="-monto"],
[class*="-total"]:not([class*="-total-val"]):not([class*="-total-num"]),
.vc2-qty,
.mvd-item-price,
.mv-td-total,
.mov2-ins-item-price {
font-family: var(--mono) !important;
letter-spacing: -0.01em !important;
font-feature-settings: "tnum" 1, "kern" 1 !important;
font-variant-numeric: tabular-nums !important;
}
.mv2-search-wrap {
background: #E7E5E6 !important;
border: none !important;
border-radius: 9px !important;
}
.mv2-search-input{
width: 100%;
padding: 11px 38px 11px 38px;
background: #E7E5E6 !important;
border: none !important;
border-radius: 9px !important;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 11.5px;
font-weight: 600;
letter-spacing: -0.005em;
color: #1A1410;
transition: background 0.15s ease;
}
.mv2-search-input:focus{
outline: none;
border: none !important;
box-shadow: none !important;
background: #dfdcdd !important;
}
.mv2-dd-btn{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: #f2f1ef !important;
border: 1px solid rgba(26, 20, 16, 0.08);
border-radius: 11px;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
color: #1A1410;
cursor: pointer;
transition: border-color 0.16s ease, background 0.14s ease, box-shadow 0.18s ease;
border-color: rgba(191,180,170,.45) !important;
}
.mv2-dd-btn:hover{
border-color: rgba(191,180,170,.65) !important;
background: #ece9e5 !important;
}
/* ═══ 15. TRANSFERENCIAS ═══ */
.trf-page-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 28px;
gap: 24px;
}
.trf-kicker {
font-family: var(--mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
color: rgba(26, 20, 16, 0.42);
margin-bottom: 10px;
}
.trf-title {
font-family: var(--serif);
font-size: 32px;
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.025em;
color: #1A1410;
margin: 0 0 8px;
}
.trf-subtitle {
font-size: 14px;
font-weight: 400;
color: rgba(26, 20, 16, 0.55);
margin: 0;
line-height: 1.5;
}
.trf-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.trf-col { min-width: 0; }
.trf-card {
background: #FFFFFF;
border: 1px solid rgba(26, 20, 16, 0.07);
border-radius: 18px;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 1px 2px rgba(26, 20, 16, 0.02);
}
.trf-card-head {
padding: 22px 26px 16px;
border-bottom: 1px solid rgba(26, 20, 16, 0.06);
}
.trf-card-eyebrow {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(26, 20, 16, 0.40);
margin-bottom: 6px;
}
.trf-card-title {
font-family: var(--serif);
font-size: 20px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.015em;
color: #1A1410;
margin: 0;
}
.trf-card-body {
padding: 22px 26px;
display: flex;
flex-direction: column;
gap: 22px;
}
.trf-card-foot {
padding: 16px 26px 20px;
border-top: 1px solid rgba(26, 20, 16, 0.06);
background: rgba(250, 246, 241, 0.5);
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.trf-label {
display: block;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(26, 20, 16, 0.45);
margin-bottom: 8px;
}
.trf-label-opt {
font-family: var(--sans);
font-weight: 400;
font-size: 10px;
text-transform: none;
letter-spacing: 0;
color: rgba(26, 20, 16, 0.32);
margin-left: 6px;
}
.trf-route {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: end;
gap: 14px;
}
.trf-route-field { display: flex; flex-direction: column; }
.trf-route-arrow {
font-family: var(--serif);
font-size: 22px;
font-weight: 600;
color: #E8663A;
padding: 0 4px 14px;
line-height: 1;
}
.trf-pill-input {
display: flex;
align-items: center;
gap: 9px;
height: 44px;
padding: 0 12px;
background: rgba(26, 20, 16, 0.025);
border: 1px solid rgba(26, 20, 16, 0.08);
border-radius: 10px;
transition: border-color 0.16s ease, background 0.16s ease;
}
.trf-pill-input:focus-within {
border-color: rgba(232,102,58, 0.45);
background: #FFFFFF;
}
.trf-pill-input svg {
width: 14px;
height: 14px;
color: rgba(26, 20, 16, 0.40);
flex-shrink: 0;
}
.trf-pill-input select {
flex: 1;
border: none;
background: transparent;
outline: none;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
color: #1A1410;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0 center;
padding-right: 18px;
}
.trf-section { display: flex; flex-direction: column; gap: 10px; }
.trf-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.trf-section-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(26, 20, 16, 0.45);
}
.trf-section-count {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
color: rgba(26, 20, 16, 0.55);
background: rgba(26, 20, 16, 0.05);
padding: 2px 8px;
border-radius: 999px;
}
.trf-search,
.trf-filter-search {
display: flex;
align-items: center;
gap: 9px;
height: 38px;
padding: 0 12px;
background: rgba(26, 20, 16, 0.025);
border: 1px solid rgba(26, 20, 16, 0.08);
border-radius: 10px;
transition: border-color 0.16s, background 0.16s;
}
.trf-search:focus-within,
.trf-filter-search:focus-within {
border-color: rgba(232,102,58, 0.45);
background: #FFFFFF;
}
.trf-search svg,
.trf-filter-search svg {
width: 14px;
height: 14px;
color: rgba(26, 20, 16, 0.40);
flex-shrink: 0;
}
.trf-search input,
.trf-filter-search input {
flex: 1;
border: none;
background: transparent;
outline: none;
font-family: var(--sans);
font-size: 13px;
color: #1A1410;
}
.trf-prod-list {
max-height: 280px;
overflow-y: auto;
border: 1px solid rgba(26, 20, 16, 0.06);
border-radius: 10px;
background: rgba(250, 246, 241, 0.5);
display: flex;
flex-direction: column;
scrollbar-width: thin;
scrollbar-color: rgba(26, 20, 16, 0.18) transparent;
}
.trf-prod-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
background: transparent;
border: none;
border-bottom: 1px solid rgba(26, 20, 16, 0.05);
text-align: left;
cursor: pointer;
transition: background 0.14s ease;
font-family: var(--sans);
}
.trf-prod-row:last-child { border-bottom: none; }
.trf-prod-row:hover:not(:disabled) { background: #FFFFFF; }
.trf-prod-row.added {
background: rgba(34,165,90, 0.04);
cursor: default;
}
.trf-prod-row:disabled { opacity: 0.6; }
.trf-prod-info {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.trf-prod-name {
font-size: 13px;
font-weight: 500;
color: #1A1410;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.trf-prod-stock {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: rgba(26, 20, 16, 0.50);
letter-spacing: 0.04em;
}
.trf-prod-cta {
font-family: var(--mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: #E8663A;
white-space: nowrap;
flex-shrink: 0;
}
.trf-prod-row.added .trf-prod-cta { color: #1F7A42; }
.trf-prod-dest-hint {
color: rgba(26,20,16,.32);
font-weight: 500;
margin-left: 4px;
}
.trf-cart {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 60px;
}
/* ── Cart row ── */
.trf-cart-row {
background: #FFFFFF;
border: 1px solid rgba(26,20,16,.08);
border-radius: var(--radius-sm);
overflow: hidden;
transition: border-color .16s;
}
.trf-cart-row:hover { border-color: rgba(26,20,16,.14); }
.trf-cart-main {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
}
.trf-cart-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.trf-cart-name {
font-size: 13px;
font-weight: 600;
color: #1A1410;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.trf-cart-meta {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: rgba(26,20,16,.50);
letter-spacing: .02em;
}
/* Stock destino badge */
.trf-cart-dest {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: var(--mono);
font-size: 9.5px;
font-weight: 600;
color: rgba(26,20,16,.40);
letter-spacing: .02em;
margin-top: 1px;
}
.trf-cart-dest .trf-dest-arrow {
color: rgba(26,20,16,.22);
font-size: 9px;
}
.trf-cart-dest .trf-dest-val {
color: #1F7A42;
background: rgba(34,165,90,.08);
padding: 1px 5px;
border-radius: 4px;
}
.trf-cart-dest .trf-dest-val.is-zero {
color: #E8663A;
background: rgba(232,102,58,.08);
}
/* Qty input */
.trf-cart-qty {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.trf-cart-qty input {
width: 60px;
padding: 6px 8px;
border: 1px solid rgba(26,20,16,.12);
border-radius: 6px;
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
text-align: center;
color: #1A1410;
background: rgba(26,20,16,.02);
transition: border-color .14s;
}
.trf-cart-qty input:focus {
outline: none;
border-color: #E8663A;
box-shadow: 0 0 0 3px rgba(232,102,58,.08);
}
.trf-cart-unit {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: rgba(26,20,16,.45);
}
/* Remove btn */
.trf-cart-remove {
background: none;
border: none;
cursor: pointer;
padding: 4px 6px;
border-radius: 6px;
font-size: 12px;
color: rgba(26,20,16,.30);
transition: color .12s, background .12s;
flex-shrink: 0;
line-height: 1;
}
.trf-cart-remove:hover {
color: var(--red);
background: rgba(192,57,43,.06);
}
/* Lote selector */
.trf-cart-lote {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px 8px;
border-top: 1px solid rgba(26,20,16,.05);
background: rgba(26,20,16,.015);
}
.trf-cart-lote svg {
width: 13px;
height: 13px;
color: rgba(26,20,16,.32);
flex-shrink: 0;
}
.trf-cart-lote select {
flex: 1;
font-family: var(--sans);
font-size: 11px;
color: #1A1410;
border: none;
background: transparent;
cursor: pointer;
padding: 2px 0;
}
/* ── FIFO preview (desglose de lotes) ── */
.trf-fifo-preview {
display: flex;
flex-direction: column;
gap: 2px;
padding: 5px 12px 8px;
border-top: 1px solid rgba(26,20,16,.05);
background: rgba(26,20,16,.015);
}
.trf-fifo-label {
font-family: var(--mono);
font-size: 8.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(26,20,16,.35);
margin-bottom: 1px;
}
.trf-fifo-row {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: rgba(26,20,16,.65);
line-height: 1.4;
}
.trf-fifo-icon {
font-size: 9px;
color: rgba(26,20,16,.28);
width: 10px;
text-align: center;
flex-shrink: 0;
}
.trf-fifo-lote {
font-weight: 600;
color: #1A1410;
}
.trf-fifo-qty {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: #E8663A;
background: rgba(232,102,58,.06);
padding: 1px 5px;
border-radius: 4px;
}
.trf-fifo-venc {
font-family: var(--mono);
font-size: 9.5px;
color: rgba(26,20,16,.40);
}
.trf-fifo-rest {
font-size: 10px;
color: rgba(26,20,16,.38);
font-style: italic;
}
.trf-cart-empty {
padding: 20px 16px;
text-align: center;
font-size: 12px;
color: rgba(26, 20, 16, 0.42);
background: rgba(26, 20, 16, 0.025);
border: 1px dashed rgba(26, 20, 16, 0.10);
border-radius: 10px;
line-height: 1.5;
}
.trf-btn-confirm {
display: inline-flex;
align-items: center;
gap: 8px;
}
.trf-btn-confirm svg {
width: 14px;
height: 14px;
}
.trf-btn-clear {
font-size: 12px;
}
.trf-kpis {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(26, 20, 16, 0.06);
border-bottom: 1px solid rgba(26, 20, 16, 0.06);
}
.trf-kpis.trf-kpis-4 { grid-template-columns: repeat(4, 1fr); }
.trf-kpi {
background: #FFFFFF;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.trf-kpi-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(26, 20, 16, 0.42);
}
.trf-kpi-value {
font-family: var(--serif);
font-size: 24px;
font-weight: 600;
line-height: 1;
color: #1A1410;
letter-spacing: -0.02em;
}
.trf-kpi-value-sm { font-size: 14px; font-family: var(--mono); font-weight: 600; }
.trf-filters {
padding: 16px 22px;
border-bottom: 1px solid rgba(26, 20, 16, 0.06);
display: flex;
flex-direction: column;
gap: 12px;
}
.trf-filter-group {
display: flex;
align-items: center;
gap: 12px;
}
.trf-filter-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(26, 20, 16, 0.42);
flex-shrink: 0;
min-width: 56px;
}
.trf-filter-pills {
display: inline-flex;
gap: 4px;
background: rgba(26, 20, 16, 0.04);
padding: 3px;
border-radius: 8px;
}
.trf-pill {
background: transparent;
border: none;
padding: 5px 10px;
font-family: var(--sans);
font-size: 11.5px;
font-weight: 600;
color: rgba(26, 20, 16, 0.55);
border-radius: 6px;
cursor: pointer;
transition: background 0.14s, color 0.14s;
}
.trf-pill:hover { color: #1A1410; }
.trf-pill.on {
background: #FFFFFF;
color: #1A1410;
box-shadow: 0 1px 2px rgba(26, 20, 16, 0.06);
}
.trf-history {
padding: 8px 12px 16px;
display: flex;
flex-direction: column;
gap: 6px;
max-height: 540px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(26, 20, 16, 0.18) transparent;
}
.trf-empty {
padding: 30px 16px;
text-align: center;
font-size: 12px;
color: rgba(26, 20, 16, 0.42);
}
/* ── Historial: filas ── */
.trf-history-row {
background: #FFFFFF;
border: 1px solid rgba(26,20,16,.07);
border-radius: var(--radius-sm);
overflow: hidden;
flex-shrink: 0;
transition: border-color .14s, box-shadow .14s;
}
.trf-history-row:hover {
border-color: rgba(26,20,16,.12);
box-shadow: 0 1px 4px rgba(26,20,16,.04);
}
.trf-history-row.is-pending {
border-left: 3px solid #E8663A;
}
.trf-history-top {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px 4px;
}
.trf-history-prod {
flex: 1;
min-width: 0;
font-size: 13px;
font-weight: 600;
color: #1A1410;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.trf-history-qty {
flex-shrink: 0;
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
color: #E8663A;
background: rgba(232,102,58,.06);
padding: 2px 8px;
border-radius: 5px;
letter-spacing: .02em;
}
.trf-history-bot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 4px 12px 10px;
}
.trf-history-route {
display: inline-flex;
align-items: center;
gap: 5px;
}
.trf-history-loc {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: .04em;
color: rgba(26,20,16,.50);
}
.trf-history-loc.dest {
color: #1F7A42;
}
.trf-history-arrow {
font-size: 10px;
color: rgba(26,20,16,.22);
}
.trf-history-meta {
font-family: var(--mono);
font-size: 9.5px;
font-weight: 500;
color: rgba(26,20,16,.35);
letter-spacing: .02em;
white-space: nowrap;
}
/* Delete btn inside row */
.trf-history-del {
background: none;
border: none;
cursor: pointer;
padding: 3px 5px;
border-radius: 5px;
color: rgba(26,20,16,.22);
transition: color .12s, background .12s;
flex-shrink: 0;
line-height: 1;
display: none;
}
.trf-history-del svg { width: 13px; height: 13px; }
#page-transferencia.trf-delete-mode .trf-history-del { display: inline-flex; }
.trf-history-del:hover {
color: #C0392B;
background: rgba(192,57,43,.06);
}
#page-transferencia.trf-delete-mode .trf-col-history .trf-card {
border-color: rgba(192, 57, 43, 0.32);
box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08);
}
#page-transferencia.trf-delete-mode .trf-col-history .trf-card-head::before {
content: "MODO ELIMINACIÓN ACTIVO";
display: inline-block;
font-family: var(--mono);
font-size: 8.5px;
font-weight: 800;
letter-spacing: 0.20em;
color: #C0392B;
background: rgba(192, 57, 43, 0.10);
border: 1px solid rgba(192, 57, 43, 0.22);
border-radius: 999px;
padding: 3px 9px;
margin-bottom: 8px;
animation: trfDelBlink 1.6s ease-in-out infinite;
}
#page-transferencia.trf-delete-mode .trf-history-row {
transition: background 0.14s ease;
}
#page-transferencia.trf-delete-mode .trf-history-row:hover {
background: rgba(192, 57, 43, 0.04);
}
/* ── Lotes en historial ── */
.trf-history-lotes {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 0 12px 4px;
}
.trf-history-lote-pill {
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: .02em;
color: rgba(26,20,16,.55);
background: rgba(26,20,16,.04);
padding: 2px 7px;
border-radius: 4px;
line-height: 1.4;
}
/* ── Recepción badge/botón ── */
.trf-recep-badge {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
font-family: var(--mono);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .03em;
border-radius: 0;
line-height: 1.3;
}
.trf-recep-badge svg { width: 11px; height: 11px; flex-shrink: 0; }
.trf-recep-badge.confirmed {
color: #1F7A42;
background: rgba(34,165,90,.04);
border-top: 1px solid rgba(34,165,90,.08);
cursor: default;
}
.trf-recep-badge.pending {
color: #E8663A;
background: rgba(232,102,58,.03);
border: none;
border-top: 1px dashed rgba(232,102,58,.18);
cursor: pointer;
width: 100%;
transition: background .12s, color .12s;
}
.trf-recep-badge.pending:hover {
background: rgba(232,102,58,.08);
color: #a14520;
}
/* ── Botón devolver ── */
.trf-history-dev {
background: none;
border: none;
cursor: pointer;
padding: 3px 5px;
border-radius: 5px;
color: rgba(26,20,16,.28);
transition: color .12s, background .12s;
flex-shrink: 0;
line-height: 1;
}
.trf-history-dev svg { width: 13px; height: 13px; }
.trf-history-dev:hover {
color: #E8663A;
background: rgba(232,102,58,.06);
}
/* ── Resumen/comprobante overlay ── */
.trf-resumen-overlay {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(26,20,16,.35);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .2s ease;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.trf-resumen-overlay.open { opacity: 1; }
.trf-resumen-card {
background: #FFFFFF;
border-radius: var(--radius-lg);
box-shadow: 0 24px 64px rgba(26,20,16,.18), 0 2px 8px rgba(26,20,16,.06);
width: 380px;
max-width: 92vw;
max-height: 85vh;
overflow-y: auto;
transform: translateY(12px);
transition: transform .22s cubic-bezier(.16,1,.3,1);
}
.trf-resumen-overlay.open .trf-resumen-card { transform: translateY(0); }
.trf-resumen-head {
padding: 28px 24px 16px;
text-align: center;
border-bottom: 1px solid rgba(26,20,16,.06);
}
.trf-resumen-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(34,165,90,.10);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.trf-resumen-icon svg {
width: 20px;
height: 20px;
color: #1F7A42;
}
.trf-resumen-title {
font-family: var(--serif);
font-size: 18px;
font-weight: 600;
color: #1A1410;
letter-spacing: -.02em;
}
.trf-resumen-sub {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: rgba(26,20,16,.40);
letter-spacing: .08em;
margin-top: 4px;
}
.trf-resumen-route {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 24px;
border-bottom: 1px solid rgba(26,20,16,.06);
}
.trf-resumen-loc {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(26,20,16,.55);
background: rgba(26,20,16,.04);
padding: 4px 10px;
border-radius: 6px;
}
.trf-resumen-loc.dest { color: #1F7A42; background: rgba(34,165,90,.08); }
.trf-resumen-arrow {
font-size: 14px;
color: rgba(26,20,16,.22);
}
.trf-resumen-items {
padding: 12px 24px;
display: flex;
flex-direction: column;
gap: 6px;
}
.trf-res-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid rgba(26,20,16,.04);
}
.trf-res-item:last-child { border-bottom: none; }
.trf-res-item-name {
font-size: 13px;
font-weight: 500;
color: #1A1410;
}
.trf-res-item-qty {
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
color: #E8663A;
flex-shrink: 0;
}
.trf-resumen-total {
display: flex;
justify-content: space-between;
padding: 10px 24px;
border-top: 1px solid rgba(26,20,16,.08);
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(26,20,16,.45);
}
.trf-resumen-obs {
padding: 8px 24px;
font-size: 11px;
color: rgba(26,20,16,.50);
background: rgba(26,20,16,.02);
border-top: 1px solid rgba(26,20,16,.04);
}
.trf-resumen-emp {
padding: 8px 24px;
font-family: var(--mono);
font-size: 9.5px;
font-weight: 600;
color: rgba(26,20,16,.35);
letter-spacing: .04em;
}
.trf-resumen-actions {
padding: 12px 24px 20px;
display: flex;
justify-content: center;
gap: 10px;
}
.trf-resumen-btn-close {
padding: 8px 28px;
border: 1px solid rgba(26,20,16,.12);
border-radius: var(--radius-sm);
background: #FFFFFF;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
color: #1A1410;
cursor: pointer;
transition: background .12s, border-color .12s;
}
.trf-resumen-btn-close:hover {
background: rgba(26,20,16,.03);
border-color: rgba(26,20,16,.20);
}
/* ═══ 16. CARGA MASIVA ═══ */
#page-carga { padding-bottom: 40px; }
#page-carga .ph {
padding: 0 0 20px 0;
margin-bottom: 22px;
background: none;
border: none;
border-radius: 0;
border-bottom: 1px solid var(--line-soft);
}
#page-carga .ph-title {
font-family: var(--serif);
font-size: 26px;
font-weight: 300;
font-style: italic;
color: var(--t1);
letter-spacing: -0.02em;
line-height: 1.1;
}
#page-carga .ph-sub {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--t3);
margin-top: 5px;
}
#page-carga > div:has(#carga-local) {
background: #ffffff;
border: 1px solid var(--line-soft);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 14px;
box-shadow: 0 1px 6px rgba(26,20,16,0.04);
}
#page-carga > div:has(#carga-local) > div > div:first-child {
font-family: var(--mono) !important;
font-size: 8.5px !important;
letter-spacing: 0.16em;
text-transform: uppercase !important;
color: var(--t3) !important;
margin-bottom: 5px !important;
}
#page-carga label {
font-family: var(--mono) !important;
font-size: 9px !important;
letter-spacing: 0.12em;
text-transform: uppercase !important;
color: var(--t2) !important;
}
#page-carga select,
#page-carga input[type="text"],
#page-carga input[type="date"],
#page-carga input[type="number"] {
background: #fdfcfb !important;
border: 1px solid rgba(26,20,16,0.16) !important;
border-radius: 8px;
color: #1a1410 !important;
font-family: var(--sans) !important;
font-size: 13px !important;
height: 36px;
min-height: unset;
padding: 0 10px;
box-shadow: none !important;
outline: none !important;
transition: border-color 0.15s, box-shadow 0.15s;
}
#page-carga select:focus,
#page-carga input[type="text"]:focus,
#page-carga input[type="date"]:focus,
#page-carga input[type="number"]:focus {
border-color: rgba(232,102,58,0.60) !important;
box-shadow: 0 0 0 3px rgba(232,102,58,0.10) !important;
}
#page-carga input[type="checkbox"] {
min-height: unset;
width: 15px;
height: 15px;
padding: 0;
box-shadow: none !important;
border: none !important;
accent-color: var(--ember);
}
#page-carga > div:has(#carga-base-global) {
background: #1a1410 !important;
border: 1px solid rgba(232,102,58,0.20) !important;
border-top: 2px solid rgba(232,102,58,0.72);
border-radius: 10px;
padding: 16px 20px;
margin-bottom: 18px;
position: relative;
overflow: hidden;
}
#page-carga > div:has(#carga-base-global)::before {
content: '';
position: absolute;
top: -24px;
right: -24px;
width: 110px;
height: 110px;
background: radial-gradient(circle, rgba(232,102,58,0.16) 0%, transparent 68%);
pointer-events: none;
}
#page-carga > div:has(#carga-base-global) > div:first-child {
font-family: var(--mono) !important;
font-size: 8.5px !important;
font-weight: 600 !important;
letter-spacing: 0.22em;
text-transform: uppercase !important;
color: rgba(232,102,58,0.90) !important;
margin-bottom: 5px !important;
}
#page-carga > div:has(#carga-base-global) > div:nth-child(2) {
font-family: var(--sans) !important;
font-size: 11px !important;
color: rgba(240,230,214,0.48) !important;
margin-bottom: 14px !important;
letter-spacing: 0.01em;
}
#page-carga > div:has(#carga-base-global) select,
#page-carga > div:has(#carga-base-global) input[type="date"] {
background: rgba(255,255,255,0.07) !important;
border: 1px solid rgba(232,102,58,0.22) !important;
border-radius: 8px;
color: rgba(240,230,214,0.88) !important;
min-height: 36px;
font-size: 12px !important;
box-shadow: none !important;
}
#page-carga > div:has(#carga-base-global) select:focus,
#page-carga > div:has(#carga-base-global) input[type="date"]:focus {
border-color: rgba(232,102,58,0.72) !important;
box-shadow: 0 0 0 3px rgba(232,102,58,0.12) !important;
}
#page-carga > div:has(#carga-base-global) > div:last-child > div > div:first-child {
font-family: var(--mono) !important;
font-size: 8.5px !important;
letter-spacing: 0.12em;
text-transform: uppercase !important;
color: rgba(240,230,214,0.38) !important;
margin-bottom: 4px !important;
}
#page-carga #carga-tabla-wrap {
border: 1px solid var(--line-soft) !important;
border-radius: 10px;
background: #ffffff !important;
overflow: auto;
box-shadow: 0 2px 12px rgba(26,20,16,0.05) !important;
}
#page-carga #carga-tabla-content {
background: #ffffff;
}
#page-carga #carga-tabla-content table {
background: #ffffff !important;
width: 100%;
border-collapse: collapse;
font-size: 13px !important;
}
#page-carga #carga-tabla-content thead tr {
border-bottom: 1.5px solid rgba(232,102,58,0.30) !important;
}
#page-carga #carga-tabla-content th {
background: #1a1410 !important;
font-family: var(--mono) !important;
font-size: 8.5px !important;
letter-spacing: 0.16em;
text-transform: uppercase !important;
color: rgba(240,230,214,0.56) !important;
font-weight: 500 !important;
padding: 11px 14px;
white-space: nowrap !important;
border-bottom: none !important;
}
#page-carga #carga-tabla-content tr {
border-bottom: 1px solid var(--line-soft) !important;
}
#page-carga #carga-tabla-content tbody tr:last-child {
border-bottom: none !important;
}
#page-carga #carga-tabla-content td {
padding: 12px 14px;
background: #ffffff !important;
vertical-align: middle !important;
transition: background var(--motion-fast) var(--ease-ui);
color: var(--t1) !important;
}
#page-carga #carga-tabla-content tbody tr:hover td {
background: rgba(232,102,58,0.04) !important;
}
#page-carga #carga-tabla-content td > div[style*="font-weight:500"],
#page-carga #carga-tabla-content td > div[style*="font-weight: 500"] {
font-family: var(--serif) !important;
font-size: 14px !important;
font-weight: 700 !important;
font-style: italic !important;
color: var(--t1) !important;
letter-spacing: -0.01em;
line-height: 1.2;
}
#page-carga #carga-tabla-content td > div[style*="font-size:10px"],
#page-carga #carga-tabla-content td > div[style*="font-size: 10px"] {
font-family: var(--mono) !important;
font-size: 9px !important;
letter-spacing: 0.10em;
text-transform: uppercase !important;
color: var(--t3) !important;
margin-top: 2px !important;
}
#page-carga #carga-tabla-content td:nth-child(2) {
font-family: var(--mono) !important;
font-size: 13px !important;
color: var(--t2) !important;
white-space: nowrap !important;
}
#page-carga #carga-tabla-content input[type="number"],
#page-carga #carga-tabla-content input[type="date"],
#page-carga #carga-tabla-content input:not([type="checkbox"]),
#page-carga #carga-tabla-content select {
background: #fdfcfb !important;
border: 1px solid rgba(26,20,16,0.16) !important;
border-radius: 8px;
color: #1a1410 !important;
font-family: var(--mono) !important;
font-size: 12px !important;
height: 32px;
min-height: unset;
padding: 0 8px;
box-shadow: none !important;
outline: none !important;
transition: border-color 0.15s, box-shadow 0.15s;
}
#page-carga #carga-tabla-content input[type="number"]:focus,
#page-carga #carga-tabla-content input[type="date"]:focus,
#page-carga #carga-tabla-content input:not([type="checkbox"]):focus,
#page-carga #carga-tabla-content select:focus {
border-color: rgba(232,102,58,0.60) !important;
box-shadow: 0 0 0 3px rgba(232,102,58,0.10) !important;
}
#page-carga #carga-tabla-content [id^="carga-preview-"] {
font-family: var(--mono) !important;
font-size: 10px !important;
color: #3a7d44 !important;
letter-spacing: 0.06em;
margin-top: 4px !important;
}
#page-carga #carga-tabla-content span {
font-family: var(--mono) !important;
font-size: 9px !important;
letter-spacing: 0.10em;
text-transform: uppercase !important;
color: var(--t3) !important;
}
#page-carga #carga-resumen {
margin-top: 14px;
padding: 13px 18px;
background: #ffffff;
border: 1px solid var(--line-soft);
border-radius: 10px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--t2);
box-shadow: 0 2px 8px rgba(26,20,16,0.04);
display: flex;
align-items: center;
gap: 8px;
}
#page-carga #carga-resumen strong {
font-family: var(--serif);
font-size: 15px;
font-weight: 700;
font-style: italic;
color: var(--t1);
letter-spacing: -0.02em;
}
#page-carga .empty {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--t4);
padding: 52px 24px;
text-align: center;
}
#page-carga.cmv2 .cmv2-btn-primary svg,
#page-carga.cmv2 .cmv2-field select,
#page-carga.cmv2 .cmv2-field input[type="text"],
#page-carga.cmv2 .cmv2-field select:hover,
#page-carga.cmv2 .cmv2-field select:focus,
#page-carga.cmv2 .cmv2-global .cmv2-field select,
#page-carga.cmv2 .cmv2-global .cmv2-field select:focus,
/* Producto cell */
#page-carga.cmv2 .cm-prod-name {
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
color: #1A1410;
letter-spacing: -.01em;
line-height: 1.2;
}
#page-carga.cmv2 .cm-prod-meta {
font-family: var(--mono);
font-size: 9.5px;
font-weight: 500;
color: rgba(26,20,16,.35);
letter-spacing: .10em;
text-transform: uppercase;
margin-top: 3px;
}
/* Stock actual */
#page-carga.cmv2 .cm-qty-actual {
font-family: var(--mono);
font-size: 13px;
font-weight: 500;
color: rgba(26,20,16,.50);
white-space: nowrap;
display: flex;
align-items: baseline;
gap: 4px;
}
#page-carga.cmv2 .cm-unit {
font-family: var(--mono);
font-size: 9.5px;
letter-spacing: .10em;
text-transform: uppercase;
color: rgba(26,20,16,.32);
}
/* Preview fecha de vencimiento */
#page-carga.cmv2 .cm-preview {
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
letter-spacing: .04em;
color: #2a8a44;
margin-top: 5px;
display: flex;
align-items: center;
gap: 4px;
}
/* Inputs inline dentro de la tabla */
#page-carga.cmv2 #carga-tabla-content .cm-input,
#page-carga.cmv2 #carga-tabla-content input[type="number"],
#page-carga.cmv2 #carga-tabla-content input[type="date"],
#page-carga.cmv2 #carga-tabla-content input:not([type="checkbox"]),
#page-carga.cmv2 #carga-tabla-content .cm-input-wide,
#page-carga.cmv2 #carga-tabla-content input[type="number"]:focus,
#page-carga.cmv2 #carga-tabla-content input[type="date"]:focus,
#page-carga.cmv2 #carga-tabla-content input:not([type="checkbox"]):focus,
/* Wrapper qty con unidad */
#page-carga.cmv2 .cm-qty-wrap {
display: flex;
align-items: center;
gap: 7px;
}
/* Lote input */
#page-carga.cmv2 .cm-lote-input {
width: 120px;
}
/* ═══ 17. VENCIMIENTOS ═══ */
.venc-chip.active {
background: var(--char);
border-color: var(--char);
color: #efe7d8;
box-shadow: 0 4px 12px rgba(26, 20, 16, 0.12);
}
#page-vencimientos .ph-title {
display: flex;
align-items: center;
gap: 10px;
}
#page-vencimientos .venc-chip { /* override scoped removido — los estilos vienen de .vc2-chip */ }
#page-vencimientos #venc-asistente:empty { display: none; }
#page-vencimientos .va-card {
border-radius: 4px;
}
#page-vencimientos .venc-row {
display: grid;
grid-template-columns: 52px 1fr 150px 110px 56px;
gap: 14px;
align-items: center;
padding: 10px 16px;
border-bottom: 1px solid rgba(26,20,16,.06);
transition: background .1s ease;
}
#page-vencimientos .venc-row:last-child { border-bottom: none; }
#page-vencimientos .venc-row:hover { background: rgba(232,102,58,.04); }
.vc2-chip.active {
background: var(--accent-warm, #E8663A);
border-color: var(--accent-warm, #E8663A);
color: #fff;
font-weight: 600;
box-shadow: none;
}
.vc2-table-meta { font-size:12px; color:var(--ink-70); margin-bottom:10px; }
.vc2-table { width:100%; border-collapse:collapse; }
.vc2-table thead tr { border-bottom:1.5px solid var(--border-warm); }
.vc2-table thead th { padding:11px 14px; font-size:9px; font-weight:700; letter-spacing:0.1em; color:var(--ink-70); text-transform:uppercase; font-family:var(--mono); text-align:left; background:#f2f1ef; white-space:nowrap; position:sticky; top:0; z-index:2; }
.vc2-table tbody tr { border-bottom:1px solid var(--border-warm); transition:background 0.1s; }
.vc2-table tbody tr:last-child { border-bottom:none; }
.vc2-table tbody tr:hover { background: rgba(26,20,16,.025); }
.vc2-table tbody td { padding:12px 14px; font-size:12px; vertical-align:middle; }
.vc2-empty-cell { text-align:center; padding:32px 14px !important; color:var(--ink-70); font-size:13px; }
.vc2-venc-date.ok { color:var(--ink-82); }
.vc2-table tbody td:last-child { white-space:nowrap; display:flex; align-items:center; gap:2px; }
.vc2-table tbody tr:hover .vc2-row-edit,
.vc2-table tbody tr:hover .vc2-row-del { opacity:1; }
#page-vencimientos {
--v3-card: #FFFFFF;
--v3-ink: #1A1410;
--v3-ink-2: rgba(26,20,16,.62);
--v3-ink-3: rgba(26,20,16,.42);
--v3-hair: rgba(26,20,16,.10);
--v3-orange: #E8663A;
--v3-red: #C0392B;
--v3-amber: #E67E22;
--v3-green: #22A55A;
--v3-paper-2: #F5EFE6;
}
#page-vencimientos .v3-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
padding: 8px 0 24px;
margin-bottom: 28px;
border-bottom: 1px solid var(--v3-hair);
}
#page-vencimientos .v3-header-left { min-width: 0; }
.v3-btn-add:hover {
background: #2a221c;
transform: translateY(-1px);
}
.v3-btn-add svg { stroke: currentColor; }
#page-vencimientos .v3-triptico {
display: grid;
grid-template-columns: 1fr 1.35fr 1fr;
gap: 16px;
margin-bottom: 28px;
}
#page-vencimientos .v3-card {
position: relative;
background: var(--v3-card);
border: 1px solid var(--v3-hair);
border-radius: 14px;
padding: 24px 24px 22px;
display: flex;
flex-direction: column;
gap: 14px;
min-height: 280px;
box-shadow: 0 1px 0 rgba(26,20,16,.02);
transition: box-shadow .2s ease, border-color .2s ease;
animation: v3-fade-in .5s ease both;
}
#page-vencimientos .v3-card:hover {
box-shadow: 0 6px 24px -12px rgba(26,20,16,.12);
}
#page-vencimientos .v3-card-critico::before {
content: "";
position: absolute;
left: 0; top: 18%; bottom: 18%;
width: 3px;
background: var(--v3-red);
border-radius: 2px 0 0 2px;
opacity: .9;
transition: opacity .2s ease;
}
#page-vencimientos .v3-card-critico[data-state="empty"]::before {
background: var(--v3-green);
opacity: .55;
}
#page-vencimientos .v3-card-control{
animation-delay: .08s;
background: var(--v3-paper-2);
border-color: rgba(26,20,16,.08);
}
#page-vencimientos .v3-card-critico[data-state="empty"] .v3-dot-critico {
background: var(--v3-green);
box-shadow: none;
animation: none;
}
#page-vencimientos .v3-card-critico[data-state="empty"] .v3-c-num-critico { color: var(--v3-green); }
#page-vencimientos .v3-card-control .v3-c-empty { background: var(--v3-paper-2); }
#page-vencimientos .v3-card[data-state="empty"] .v3-c-empty { display: flex; }
#page-vencimientos .v3-card[data-state="empty"] .v3-c-cta,
#page-vencimientos .v3-card[data-state="empty"] .v3-sc-list,
#page-vencimientos .v3-card[data-state="empty"] .v3-c-eyebrow-r { visibility: hidden; }
#page-vencimientos .v3-card-hero{
animation-delay: .04s;
background: var(--v3-card);
}
#page-vencimientos .v3-timeline {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 6px;
align-items: end;
height: 86px;
padding-top: 12px;
border-top: 1px solid var(--v3-hair);
}
#page-vencimientos .v3-sc-chip:hover {
border-color: rgba(26,20,16,.28);
background: #fff;
transform: translateY(-1px);
}
#page-vencimientos .v3-sc-chip-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 130px;
text-transform: capitalize;
}
#page-vencimientos .v3-sc-chip-diff {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
padding: 2px 6px;
border-radius: 4px;
background: rgba(26,20,16,.06);
color: var(--v3-ink-2);
}
#page-vencimientos .v3-card-control .v3-c-cta {
background: var(--v3-card);
}
.v3-tb-search {
position: relative;
display: flex;
align-items: center;
flex: 1 1 240px;
min-width: 0;
gap: 0;
}
.v3-tb-search-ico {
position: absolute;
left: 10px;
color: rgba(26,20,16,.38);
pointer-events: none;
flex-shrink: 0;
}
.v3-tb-search-clear {
position: absolute;
right: 8px;
display: none;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
border: none;
background: rgba(26,20,16,.10);
border-radius: 50%;
color: rgba(26,20,16,.55);
cursor: pointer;
padding: 0;
transition: background .14s;
}
.v3-tb-search-clear:hover { background: rgba(26,20,16,.18); }
.v3-tb-search-input:not(:placeholder-shown) ~ .v3-tb-search-clear,
.v3-tb-search.has-value .v3-tb-search-clear {
display: flex;
}
#page-vencimientos .v3-tb-divider {
width: 1px;
height: 24px;
background: rgba(26,20,16,.08);
flex-shrink: 0;
margin: 0 2px;
}
#page-vencimientos .v3-tb-spacer { flex: 1 1 0; }
.v3-dropdown {
position: relative;
flex-shrink: 0;
}
.v3-dd-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: transparent;
border: 1px solid rgba(26,20,16,.08);
border-radius: 8px;
cursor: pointer;
transition: border-color .15s, background .15s;
white-space: nowrap;
outline: none;
}
.v3-dd-btn:hover {
background: rgba(26,20,16,.035);
border-color: rgba(26,20,16,.14);
}
.v3-dropdown.is-open .v3-dd-btn {
background: rgba(26,20,16,.05);
border-color: rgba(26,20,16,.16);
}
.v3-dd-content {
display: flex;
flex-direction: column;
gap: 1px;
text-align: left;
}
.v3-dd-eyebrow {
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(26,20,16,.40);
line-height: 1;
}
.v3-dd-value {
font-family: var(--sans);
font-size: 12.5px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--v3-ink);
line-height: 1.2;
}
.v3-dd-chevron {
color: rgba(26,20,16,.38);
transition: transform .2s cubic-bezier(.16,1,.3,1);
flex-shrink: 0;
}
.v3-dropdown.is-open .v3-dd-chevron {
transform: rotate(180deg);
}
.v3-dd-panel {
display: none;
position: absolute;
top: calc(100% + 5px);
left: 0;
z-index: 120;
background: #FFFFFF;
border: 1px solid rgba(26,20,16,.10);
border-radius: 10px;
box-shadow: 0 4px 16px rgba(26,20,16,.10), 0 1px 3px rgba(26,20,16,.06);
padding: 4px;
min-width: 180px;
animation: v3-dd-in .16s cubic-bezier(.16,1,.3,1);
}
.v3-dropdown.is-open .v3-dd-panel { display: block; }
.v3-dd-opt {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 8px 10px;
background: transparent;
border: none;
border-radius: 7px;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
color: rgba(26,20,16,.72);
cursor: pointer;
text-align: left;
transition: background .12s, color .12s;
outline: none;
}
.v3-dd-opt:hover {
background: rgba(26,20,16,.045);
color: var(--v3-ink);
}
.v3-dd-opt.is-active {
background: rgba(26,20,16,.06);
color: var(--v3-ink);
font-weight: 600;
}
.v3-dd-opt-dot {
width: 6px; height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.v3-dod-neutral { background: rgba(26,20,16,.28); }
.v3-dod-red { background: var(--v3-red); }
.v3-dod-amber { background: var(--v3-amber); }
.v3-dod-green { background: var(--v3-green); }
.v3-dod-orange { background: var(--v3-orange); }
.v3-tb-export {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
background: transparent;
border: 1px solid rgba(26,20,16,.10);
border-radius: 8px;
font-family: var(--sans);
font-size: 12.5px;
font-weight: 600;
letter-spacing: -0.005em;
color: rgba(26,20,16,.60);
cursor: pointer;
white-space: nowrap;
transition: background .14s, border-color .14s, color .14s;
outline: none;
flex-shrink: 0;
}
.v3-tb-export:hover {
background: rgba(26,20,16,.04);
border-color: rgba(26,20,16,.18);
color: var(--v3-ink);
}
.v3-tb-export:active { transform: scale(.97); }
#page-vencimientos .v3-tb-chips {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 2px 2px;
flex-wrap: wrap;
}
#page-vencimientos .v3-af-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 8px 4px 10px;
background: rgba(26,20,16,.06);
border: 1px solid rgba(26,20,16,.10);
border-radius: 999px;
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--v3-ink);
}
#page-vencimientos .v3-af-chip-label {
font-family: var(--mono);
font-size: 7.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(26,20,16,.42);
margin-right: 1px;
}
#page-vencimientos .v3-af-chip-remove {
display: flex;
align-items: center;
justify-content: center;
width: 14px; height: 14px;
border: none;
background: rgba(26,20,16,.12);
border-radius: 50%;
color: rgba(26,20,16,.50);
cursor: pointer;
padding: 0;
transition: background .12s, color .12s;
flex-shrink: 0;
line-height: 1;
}
#page-vencimientos .v3-af-chip-remove:hover {
background: rgba(26,20,16,.22);
color: var(--v3-ink);
}
#page-vencimientos .v3-af-clear-all {
font-family: var(--mono);
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(26,20,16,.40);
background: none;
border: none;
cursor: pointer;
padding: 2px 4px;
border-radius: 4px;
transition: color .12s, background .12s;
outline: none;
margin-left: 2px;
}
#page-vencimientos .v3-af-clear-all:hover {
color: var(--v3-ink);
background: rgba(26,20,16,.06);
}
#page-vencimientos .vc2-table {
width: 100%;
border-collapse: collapse;
}
#page-vencimientos .vc2-table thead tr {
border-bottom: 1px solid rgba(26,20,16,.07);
}
#page-vencimientos .vc2-table thead th {
padding: 12px 16px;
font-family: var(--mono);
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(26,20,16,.36);
background: #FFFFFF;
text-align: left;
white-space: nowrap;
}
#page-vencimientos .vc2-table .v3-group-header td {
padding: 7px 16px 6px;
background: rgba(26,20,16,.022);
border-top: 1px solid rgba(26,20,16,.06);
border-bottom: 1px solid rgba(26,20,16,.06);
}
#page-vencimientos .vc2-table .v3-group-header:first-child td {
border-top: none;
}
#page-vencimientos .vc2-table tbody tr.v3-tr {
border-bottom: 1px solid rgba(26,20,16,.05);
transition: background .13s ease;
}
#page-vencimientos .vc2-table tbody tr.v3-tr:last-child {
border-bottom: none;
}
#page-vencimientos .vc2-table tbody tr.v3-tr:hover {
background: rgba(26,20,16,.022);
}
#page-vencimientos .vc2-table tbody tr.v3-tr[data-state="vencido"] { box-shadow: inset 3px 0 0 var(--v3-red); }
#page-vencimientos .vc2-table tbody tr.v3-tr[data-state="hoy"] { box-shadow: inset 3px 0 0 var(--v3-red); }
#page-vencimientos .vc2-table tbody tr.v3-tr[data-state="urgente"] { box-shadow: inset 3px 0 0 var(--v3-amber); }
#page-vencimientos .vc2-table tbody tr.v3-tr[data-state="semana"] { box-shadow: inset 3px 0 0 var(--v3-orange); }
#page-vencimientos .vc2-table tbody tr.v3-tr[data-state="bien"] { box-shadow: inset 3px 0 0 rgba(26,20,16,.10); }
#page-vencimientos .vc2-table tbody td {
padding: 13px 16px;
vertical-align: middle;
}
#page-vencimientos .v3-db-red { color: var(--v3-red); }
#page-vencimientos .v3-db-amber { color: var(--v3-amber); }
#page-vencimientos .v3-db-orange { color: var(--v3-orange); }
#page-vencimientos .v3-db-muted { color: rgba(26,20,16,.32); }
#page-vencimientos .vc2-estado.vencido {
background: rgba(192,57,43,.10);
color: var(--v3-red);
border-color: rgba(192,57,43,.18);
}
#page-vencimientos .vc2-estado.vencido::before { background: var(--v3-red); }
#page-vencimientos .vc2-estado.hoy {
background: rgba(192,57,43,.10);
color: var(--v3-red);
border-color: rgba(192,57,43,.18);
}
#page-vencimientos .vc2-estado.hoy::before { background: var(--v3-red); }
#page-vencimientos .vc2-estado.urgente {
background: rgba(230,126,34,.10);
color: var(--v3-amber);
border-color: rgba(230,126,34,.18);
}
#page-vencimientos .vc2-estado.urgente::before { background: var(--v3-amber); }
#page-vencimientos .vc2-estado.pronto {
background: rgba(232,102,58,.08);
color: var(--v3-orange);
border-color: rgba(232,102,58,.16);
}
#page-vencimientos .vc2-estado.pronto::before { background: var(--v3-orange); }
#page-vencimientos .vc2-estado.bien {
background: rgba(34,165,90,.08);
color: var(--v3-green);
border-color: rgba(34,165,90,.16);
}
#page-vencimientos .vc2-estado.bien::before {
background: var(--v3-green);
}
#page-vencimientos .vc2-cat {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: -0.005em;
background: rgba(26,20,16,.055);
color: rgba(26,20,16,.58);
border: 1px solid rgba(26,20,16,.08);
}
#page-vencimientos .vc2-table tbody td.v3-td-actions {
white-space: nowrap;
padding: 0 10px;
width: 1px; /* colapsa al mínimo */
}
#page-vencimientos .vc2-table tbody tr.v3-tr:hover .vc2-row-edit,
#page-vencimientos .vc2-table tbody tr.v3-tr:hover .vc2-row-del {
opacity: 1;
}
#page-vencimientos .vc2-empty-cell {
text-align: center;
padding: 60px 24px;
color: inherit;
background: transparent;
}
#page-vencimientos .v3-eyebrow{
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--v3-ink-3);
margin-bottom: 12px;
animation: lx-fade-in var(--lx-d-normal) var(--lx-curve-enter) 0ms both;
}
#page-vencimientos .v3-title{
font-family: var(--serif);
font-size: 32px;
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.015em;
color: var(--v3-ink);
margin: 0 0 8px;
animation: lx-fade-up var(--lx-d-slow) var(--lx-curve-enter) 80ms both;
}
#page-vencimientos .v3-subtitle{
font-family: 'Inter', system-ui, sans-serif;
font-size: 13px;
color: var(--v3-ink-2);
margin: 0;
animation: lx-fade-up var(--lx-d-slow) var(--lx-curve-enter) 160ms both;
}
.v3-btn-add{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: var(--v3-ink);
color: #F5EFE6;
border: none;
border-radius: 999px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
transition: transform .16s ease, background .16s ease;
white-space: nowrap;
animation: lx-fade-in var(--lx-d-normal) var(--lx-curve-enter) 200ms both;
}
#page-vencimientos .v3-triptico .v3-card:nth-child(1) {
animation: lx-fade-up var(--lx-d-slow) var(--lx-curve-enter) 280ms both;
}
#page-vencimientos .v3-triptico .v3-card:nth-child(2) {
animation: lx-fade-up var(--lx-d-slow) var(--lx-curve-enter) 360ms both;
}
#page-vencimientos .v3-triptico .v3-card:nth-child(3) {
animation: lx-fade-up var(--lx-d-slow) var(--lx-curve-enter) 440ms both;
}
#page-vencimientos .v3-sc-chip{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 9px 5px 11px;
background: var(--v3-card);
border: 1px solid var(--v3-hair);
border-radius: 999px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.005em;
color: var(--v3-ink);
cursor: pointer;
max-width: 100%;
transition: border-color .14s ease, transform .14s ease, background .14s ease;
animation: lx-fade-in var(--lx-d-normal) var(--lx-curve-enter) both;
animation-delay: calc(900ms + var(--lx-stagger-tight) * var(--i, 0));
}
#page-vencimientos .v3-toolbar{
margin-bottom: 4px;
display: flex;
flex-direction: column;
gap: 0;
position: relative;
z-index: 30;
animation: lx-fade-up var(--lx-d-normal) var(--lx-curve-enter) 520ms both;
}
#page-vencimientos .vc2-table-meta{
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(26,20,16,.38);
padding: 10px 2px 8px;
animation: lx-fade-in var(--lx-d-fast) var(--lx-curve-enter) 560ms both;
}
#page-vencimientos .v3-card[data-state="empty"] .v3-c-empty svg polyline {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: lx-stroke-draw var(--lx-d-deliberate) var(--lx-curve-enter) 300ms forwards;
}
#page-vencimientos .v3-tr {
animation: lx-fade-up var(--lx-d-normal) var(--lx-curve-enter) both;
animation-delay: calc(var(--lx-stagger-tight) * var(--i, 0));
}
#page-vencimientos .vc2-row-edit,
#page-vencimientos .v3-tb-row{
display: flex;
align-items: center;
gap: 6px;
background: #f2f1ef !important;
border: 1px solid rgba(26,20,16,.08);
border-radius: 12px;
padding: 6px 8px;
border-color: rgba(191,180,170,.32) !important;
}
.v3-tb-search-input{
width: 100%;
background: transparent !important;
border: 1px solid rgba(26,20,16,.08);
border-radius: 8px;
padding: 8px 32px 8px 32px;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--v3-ink);
outline: none;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.v3-tb-search-input:focus{
background: rgba(255,255,255,.55) !important;
border-color: rgba(232,102,58,.40);
box-shadow: 0 0 0 3px rgba(232,102,58,.10);
}
/* ═══ 18. CLIENTES ═══ */
.cpb-icon {font-size:13px;flex-shrink:0}
.cpb-label {font-size:10px;font-weight:600;color:var(--accent-warm);font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0}
.cpb-text {flex:1;font-size:12px;color:var(--ink-82);font-family:var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crp-bar {width:3px;min-height:28px;align-self:stretch;background:var(--accent-warm);border-radius:2px;flex-shrink:0}
.crp-body {flex:1;min-width:0}
.crp-autor {font-size:11px;font-weight:600;color:var(--accent-warm);font-family:var(--sans);margin-bottom:1px}
.crp-texto {font-size:11px;color:var(--ink-82);font-family:var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crp-close {background:none;border:none;cursor:pointer;font-size:18px;color:var(--ink-70);padding:0 4px;transition:color .15s;flex-shrink:0}
.crp-close:hover {color:var(--char)}
#page-clientes .ph-title {
color: var(--char);
letter-spacing: 0.01em;
}
#page-clientes .btn-icon {
border: 1.5px solid var(--border-warm);
background: var(--paper-2);
box-shadow: none;
}
#page-clientes .btn-icon:hover {
border-color: var(--accent-warm-ln);
background: rgba(232,102,58, 0.08);
}
#page-clientes .ph{
margin-bottom: 12px;
padding: 14px 16px;
border-radius: var(--r2);
border: 1.5px solid var(--border-warm);
border-color: var(--line-strong);
background: var(--surface-1);
}
#page-clientes .ph-sub{
letter-spacing: 0.1em;
color: var(--text-meta);
}
#page-clientes .cli-whatsapp,
#page-clientes .cli-email {
font-size: 12px;
color: var(--char);
}
#page-clientes .cli-points,
#page-clientes .cli-caja {
font-family: var(--mono);
font-size: 14px;
font-weight: 700;
color: var(--char);
letter-spacing: -0.015em;
}
#page-clientes .cli-points-sub,
#page-clientes .cli-gestion,
#page-clientes .cli-gestion .btn-ghost {
font-size: 10px;
padding: 5px 10px;
}
#page-clientes .cli-actions .btn-icon {
width: 29px;
height: 29px;
}
.cli-layout {
display: grid;
grid-template-columns: 520px 1fr;
flex: 1;
min-height: 0;
overflow: hidden;
}
.cli-master {
display: flex;
flex-direction: column;
border-right: 1px solid rgba(26,20,16,.12);
background: #faf7f2;
overflow: hidden;
}
.cli-master-head {
padding: 16px 14px 14px;
border-bottom: 1px solid rgba(26,20,16,.1);
background: #f3ede2;
flex-shrink: 0;
}
.cli-mkpi {
padding: 8px 6px;
text-align: center;
border-right: 1px solid rgba(26,20,16,.1);
}
.cli-mkpi:last-of-type { border-right: none; }
.cli-mkpi-lbl {
display: block;
font-size: 8.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(26,20,16,.45);
margin-top: 2px;
}
.cli-master-bar input {
flex: 1;
min-height: 36px;
padding: 0 10px;
border: 1px solid rgba(26,20,16,.18);
border-radius: 4px;
background: #faf7f2;
font-family: var(--sans);
font-size: 12px;
color: #1a1410;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.cli-master-bar input:focus {
border-color: rgba(232,102,58,.5);
box-shadow: 0 0 0 3px rgba(232,102,58,.08);
}
.cli-btn-new {
white-space: nowrap;
flex-shrink: 0;
font-size: 10px !important;
padding: 0 12px !important;
height: 36px;
}
.cli-master-list {
flex: 1;
overflow-y: auto;
padding: 4px 0;
}
.cli-detail {
background: #f5ede0;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.cli-detail-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: rgba(26,20,16,.35);
}
.cli-detail-empty-icon { opacity: .6; }
.cli-detail-empty-text {
font-size: 13px;
letter-spacing: 0.06em;
font-family: var(--mono);
}
#page-clientes { background:#fdfcfb; padding:28px 24px 36px; }
#page-clientes .cli-layout { display:block; }
#page-clientes .cli-master { display:block; background:transparent; border:0; }
.cli-btn-new:hover { background:#b75823; }
.cli-tier-btn.active { background:#fff; color:#231d1a; box-shadow:0 1px 3px rgba(26,20,16,.08); }
#page-clientes .cli-master-list { max-height:none; overflow:visible; padding:0; }
#page-clientes .cli-card-item.is-selected { border-color:#e4b699; box-shadow:0 2px 8px rgba(232,102,58,.12); }
#page-clientes .cli-drw-actions .btn-icon { width:32px; height:32px; border:0; background:transparent; color:rgba(35,29,26,.6); }
#page-clientes .cli-drw-hist-row { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid #efe8e1; }
#page-clientes .cli-drw-hist-date { color:rgba(35,29,26,.55); font-size:13px; }
#page-clientes .cli-drw-hist-desc { color:#231d1a; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#page-clientes .cli-drw-foot .btn-prime { border-radius:10px; }
#page-clientes .cli-detail-empty { display: none !important; }
#page-clientes .cli-master-head{
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 10px;
background: transparent;
border: 0;
padding: 0;
}
.cli-btn-new{
margin-left: 0;
border-radius: 999px;
background: #E8663A;
border-color: #E8663A;
color: #fff;
padding: 10px 20px;
margin-top: 12px;
}
.cli-controls { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.cli-master-bar{
display: flex;
align-items: center;
gap: 12px;
margin: 0;
}
.cli-tier-filters{
display: inline-flex;
gap: 8px;
background: #f1edea;
border-radius: 999px;
padding: 4px;
width: fit-content;
margin: 0;
}
.cli-tier-btn{
border: 0;
background: transparent;
color: rgba(35,29,26,.64);
font-weight: 600;
padding: 7px 14px;
border-radius: 999px;
cursor: pointer;
font-size: 12px;
}
#page-clientes .cli-list-count{
margin: 2px 0 10px;
color: rgba(35,29,26,.64);
font-size: 13px;
}
#page-clientes .cli-drw-hist-amt{
color: #231d1a;
font-family: var(--serif);
font-size: 15px;
}
#page-clientes.active{
display: flex;
flex-direction: column;
padding: 0;
height: auto;
overflow: hidden;
min-height: 0;
overflow-y: auto;
}
#page-clientes .cli-layout,
#page-clientes .cli-master,
#page-clientes .cli-master-list {
overflow: visible;
min-height: 0;
}
#page-clientes .cli-mkpi{
border: 1px solid #e2dbd3;
border-radius: 16px;
background: #fff;
padding: 24px 22px;
min-height: 158px;
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
align-items: flex-start;
justify-content: flex-start;
}
#page-clientes .cli-mkpi-lbl{
color: rgba(35,29,26,.62);
text-transform: uppercase;
letter-spacing: .22em;
font-size: 11px;
font-weight: 700;
order: 2;
margin-top: 2px;
}
#page-clientes.cli-drawer-open { overflow: hidden; }
#page-clientes .cli-detail{
position: fixed;
inset: 0 !important;
z-index: 9100;
pointer-events: none;
display: none;
background: transparent !important;
overflow: visible;
}
#page-clientes.cli-drawer-open .cli-detail{
display: block !important;
}
#page-clientes .cli-drawer{
height: 100dvh;
max-height: 100dvh;
overflow: hidden;
display: grid !important;
grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
position: fixed;
right: 0;
top: 0;
bottom: 0;
width: min(430px, 94vw);
background: #fff !important;
border-left: 1px solid #e2dbd3 !important;
}
#page-clientes.cli-drawer-open,
#page-clientes.cli-drawer-open .cli-layout,
#page-clientes.cli-drawer-open .cli-master {
background: transparent !important;
}
#page-clientes .cli-drawer-shell{
position: fixed;
inset: 0 !important;
background: rgba(35, 29, 26, 0.48) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex !important;
justify-content: flex-end;
pointer-events: auto;
}
.cli-master-bar input{
flex: 0 0 390px;
max-width: 100%;
border: 1px solid #dfd7cd;
border-radius: 999px;
background: #f2f1ef !important;
height: 38px;
padding: 0 16px;
color: #231d1a;
font-size: 13px;
border-color: rgba(191,180,170,.50) !important;
}
.cli-master-bar input:focus {
background: #f8f6f3 !important;
border-color: rgba(232,102,58,.40) !important;
}
/* ═══ 20. COSTOS ═══ */
.costo-empty {
text-align: center;
padding: 36px 20px;
color: var(--ink-70);
font-size: 13px;
}
.costo-alert-item { padding:10px 12px; border:1px solid rgba(26,20,16,.08); border-radius:8px; background:var(--paper); }
.costo-alert-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
.costo-alert-cat { font-size:11px; font-weight:600; color:var(--ink-82); }
.costo-alert-pct { font-size:10px; font-weight:700; font-family:var(--mono); }
.costo-alert-pct.ok { color:var(--green); }
.costo-alert-pct.warn { color:var(--amber); }
.costo-alert-pct.danger { color:var(--red); }
.costo-alert-bar-wrap { height:5px; background:rgba(26,20,16,.1); border-radius:3px; margin-bottom:5px; overflow:hidden; }
.costo-alert-bar-fill { height:100%; border-radius:3px; transition:width .4s; }
.costo-alert-amounts { display:flex; justify-content:space-between; font-size:9px; font-family:var(--mono); color:var(--ink-70); }
.costo-alert-lim-row { display:flex; align-items:center; gap:4px; margin-top:6px; padding-top:5px; border-top:1px solid rgba(26,20,16,.07); }
.costo-alert-lim-row label { font-size:9px; color:var(--ink-70); white-space:nowrap; }
.costo-alert-lim-inp { font-size:10px; font-family:var(--mono); border:1px solid rgba(26,20,16,.15); border-radius:5px; padding:2px 5px; width:68px; background:var(--paper); color:var(--char); outline:none; }
.costo-alert-lim-btn { font-size:9px; padding:2px 7px; border-radius:5px; background:var(--char); color: var(--text-on-dark); border:none; cursor:pointer; flex-shrink:0; }
.costo-cal-header-row { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.costo-cal-hdr { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-70); text-align:center; padding:2px 0; }
.costo-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.costo-cal-day { min-height:40px; border-radius:5px; padding:3px 4px; background:var(--paper); border:1px solid rgba(26,20,16,.06); cursor:pointer; transition:all .12s; }
.costo-cal-day:hover { border-color:rgba(26,20,16,.2); }
.costo-cal-day.has-data { background:rgba(232,102,58,.07); border-color:rgba(232,102,58,.2); }
.costo-cal-day.today { border-color:var(--accent-warm) !important; }
.costo-cal-day.selected { background:rgba(26,20,16,.07) !important; border-color:var(--char) !important; }
.costo-cal-day.empty { background:transparent; border-color:transparent; cursor:default; pointer-events:none; }
.costo-cal-num { font-size:9px; color:var(--ink-70); font-weight:500; }
.costo-cal-day.today .costo-cal-num { color:var(--accent-warm); font-weight:700; }
.costo-comp-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(26,20,16,.07); }
.costo-comp-row:last-child { border-bottom:none; }
.costo-comp-label { font-size:11px; color:var(--ink-70); flex:1; }
.costo-comp-vals { display:flex; align-items:center; gap:10px; }
.costo-comp-prev { font-size:11px; color:var(--ink-70); font-family:var(--mono); min-width:70px; text-align:right; }
.costo-comp-curr { font-size:12px; font-weight:600; color:var(--char); font-family:var(--mono); min-width:80px; text-align:right; }
.costo-delta { font-size:10px; font-weight:700; padding:2px 6px; border-radius:5px; font-family:var(--mono); min-width:40px; text-align:center; }
.costo-delta-neu { background:rgba(26,20,16,.07); color:var(--ink-70); }
.costo-comp-month-labels { display:flex; justify-content:flex-end; gap:10px; padding-bottom:6px; margin-bottom:2px; border-bottom:1px solid rgba(26,20,16,.1); }
.costo-comp-month-lbl { font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-70); }
.costo-comp-month-lbl span { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:3px; vertical-align:middle; }
.costo-proj-stat { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.costo-proj-stat-label { font-size:11px; color:var(--ink-70); }
.costo-proj-stat-val { font-size:13px; font-weight:700; font-family:var(--mono); color:var(--char); }
.costo-proj-bar-wrap { height:8px; background:rgba(26,20,16,.1); border-radius:4px; margin:4px 0 8px; overflow:hidden; }
.costo-proj-bar-fill { height:100%; border-radius:4px; transition:width .5s ease; }
.costo-proj-alert.ok { background:rgba(34,165,90,.1); color:var(--green); }
.costo-proj-budget-row { display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid rgba(26,20,16,.08); }
.costo-proj-budget-row label { font-size:10px; color:var(--ink-70); white-space:nowrap; }
.costo-proj-budget-inp { font-size:11px; font-family:var(--mono); border:1px solid rgba(26,20,16,.15); border-radius:6px; padding:4px 8px; width:100px; background:var(--paper); color:var(--char); outline:none; }
.costo-proj-budget-btn { font-size:10px; padding:4px 9px; border-radius:6px; background:var(--char); color: var(--text-on-dark); border:none; cursor:pointer; white-space:nowrap; }
.costo-proj-budget-btn:hover { opacity:.85; }
.costo-suc-table { width:100%; border-collapse:collapse; font-size:12px; }
.costo-suc-table th { font-size:9px; font-weight:700; color:var(--ink-70); text-transform:uppercase; letter-spacing:.06em; padding:5px 10px; border-bottom:1px solid rgba(26,20,16,.12); text-align:right; }
.costo-suc-table th:first-child { text-align:left; }
.costo-suc-table td { padding:8px 10px; border-bottom:1px solid rgba(26,20,16,.06); font-family:var(--mono); font-size:11px; text-align:right; color:var(--char); }
.costo-suc-table td:first-child { font-family:inherit; font-size:11px; font-weight:500; color:var(--ink-82); text-align:left; }
.costo-suc-table tr:last-child td { border-bottom:none; font-weight:700; background:rgba(26,20,16,.025); }
.costo-suc-tag { display:inline-block; padding:2px 7px; border-radius:4px; font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.costo-suc-tag.l1 { background:rgba(59,130,196,.12); color:rgba(59,130,196,.9); }
.costo-suc-tag.l2 { background:rgba(232,102,58,.12); color:rgba(232,102,58,.9); }
#page-costos .costo-period-range {
font-family: var(--mono);
font-size: 9px;
color: var(--t4);
margin-left: auto;
letter-spacing: 0.06em;
}
#page-costos .costo-cat-leg-name {
font-size: 12px;
color: var(--t2);
}
#page-costos .costo-cat-leg-pct {
font-family: var(--mono);
font-size: 9.5px;
color: var(--t4);
}
#page-costos .costo-cat-leg-amt {
font-family: var(--serif);
font-size: 13px;
font-weight: 700;
font-style: italic;
letter-spacing: -0.02em;
color: var(--t1);
}
#page-costos .costo-rank-item {
padding: 10px 0;
border-bottom: 1px solid rgba(26,20,16,0.05);
}
#page-costos .costo-rank-num {
width: 18px; height: 18px;
border-radius: 50%;
background: rgba(26,20,16,0.05);
border: 1px solid rgba(26,20,16,0.10);
font-family: var(--mono);
font-size: 8.5px;
font-weight: 700;
color: var(--t4);
}
#page-costos .costo-rank-desc {
font-size: 12px;
font-weight: 500;
color: var(--t1);
}
#page-costos .costo-rank-meta {
font-family: var(--mono);
font-size: 9px;
color: var(--t4);
margin-top: 2px;
}
#page-costos .costo-rank-monto {
font-family: var(--serif);
font-size: 14px;
font-weight: 700;
font-style: italic;
letter-spacing: -0.02em;
color: var(--t1);
}
#page-costos .costo-table-card {
background: #ffffff;
border: 1px solid rgba(26,20,16,0.08);
border-radius: 8px;
overflow: hidden;
overflow-x: auto;
box-shadow: 0 2px 10px rgba(26,20,16,0.04);
}
#page-costos .costo-table th {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--t4);
font-weight: 500;
padding: 11px 16px;
border-bottom: 1px solid rgba(26,20,16,0.07);
background: #faf7f2;
white-space: nowrap;
}
#page-costos .costo-table td {
padding: 12px 16px;
border-bottom: 1px solid rgba(26,20,16,0.05);
color: var(--t2);
vertical-align: middle;
}
#page-costos .costo-table tbody tr:nth-child(even) td {
background: rgba(26,20,16,0.018);
}
#page-costos .costo-table tr:last-child td { border-bottom: none; }
#page-costos .costo-table tr:hover td {
background: rgba(245,239,230,0.55);
}
#page-costos .costo-monto {
font-family: var(--serif);
font-size: 15px;
font-weight: 700;
font-style: italic;
letter-spacing: -0.02em;
color: var(--t1);
}
#page-costos .costo-cat-pill {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.10em;
padding: 3px 9px;
border-radius: var(--radius-xs, 6px);
}
#page-costos .costo-edit,
#page-costos .costo-del,
#page-costos .costo-dup {
border-radius: 4px;
padding: 3px 6px;
font-size: 13px;
opacity: 0;
transition:
opacity .18s var(--ease-ui),
color var(--motion-fast) var(--ease-ui),
background var(--motion-fast) var(--ease-ui);
}
#page-costos .costo-table tr:hover .costo-edit,
#page-costos .costo-table tr:hover .costo-del,
#page-costos .costo-table tr:hover .costo-dup {
opacity: 1;
}
#page-costos .costo-empty {
font-family: var(--mono);
font-size: 11px;
color: var(--t4);
letter-spacing: 0.08em;
padding: 40px 20px;
}
#page-costos .costo-alert-grid {
gap: 10px;
}
#page-costos .costo-alert-item {
background: #ffffff;
border: 1px solid rgba(26,20,16,0.08);
border-radius: 8px;
padding: 13px 14px;
box-shadow: 0 1px 6px rgba(26,20,16,0.03);
transition: box-shadow var(--motion-fast) var(--ease-ui);
}
#page-costos .costo-alert-item:hover {
box-shadow: 0 4px 16px rgba(26,20,16,0.08);
}
#page-costos .costo-alert-cat {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--t3);
}
#page-costos .costo-alert-pct {
font-family: var(--serif);
font-size: 15px;
font-weight: 700;
font-style: italic;
letter-spacing: -0.02em;
}
#page-costos .costo-alert-bar-wrap {
height: 4px;
background: rgba(26,20,16,0.08);
border-radius: 2px;
}
#page-costos .costo-alert-bar-fill { border-radius: 2px; }
#page-costos .costo-alert-amounts {
font-family: var(--mono);
font-size: 8.5px;
color: var(--t4);
letter-spacing: 0.04em;
}
#page-costos .costo-alert-lim-inp {
font-family: var(--mono);
font-size: 10px;
border: 1px solid rgba(26,20,16,0.12);
border-radius: 4px;
background: rgba(245,239,230,0.60);
color: var(--t1);
padding: 3px 6px;
}
#page-costos .costo-alert-lim-inp:focus {
border-color: var(--accent-warm);
outline: none;
}
#page-costos .costo-alert-lim-btn {
font-family: var(--mono);
font-size: 8.5px;
letter-spacing: 0.10em;
background: #1a1410;
color: rgba(240,230,214,0.88);
border: none;
border-radius: 4px;
padding: 3px 9px;
cursor: pointer;
}
#page-costos .costo-prov-item {
padding: 9px 0;
border-bottom: 1px solid rgba(26,20,16,0.05);
}
#page-costos .costo-prov-rank {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
color: var(--t4);
}
#page-costos .costo-prov-name {
font-size: 12px;
font-weight: 600;
color: var(--t1);
letter-spacing: -0.01em;
}
#page-costos .costo-prov-meta {
font-family: var(--mono);
font-size: 9px;
color: var(--t4);
margin-top: 2px;
}
#page-costos .costo-prov-bar-fill {
background: rgba(232,102,58,0.55);
border-radius: 2px;
}
#page-costos .costo-prov-monto {
font-family: var(--serif);
font-size: 13px;
font-weight: 700;
font-style: italic;
letter-spacing: -0.02em;
color: var(--t1);
}
#page-costos .costo-comp-label {
font-size: 12px;
color: var(--t2);
}
#page-costos .costo-comp-prev {
font-family: var(--mono);
font-size: 11px;
color: var(--t4);
}
#page-costos .costo-comp-curr {
font-family: var(--serif);
font-size: 14px;
font-weight: 700;
font-style: italic;
letter-spacing: -0.02em;
color: var(--t1);
}
#page-costos .costo-delta {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
border-radius: 3px;
padding: 2px 6px;
letter-spacing: 0.04em;
}
#page-costos .costo-proj-stat-label {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.10em;
color: var(--t3);
text-transform: uppercase;
}
#page-costos .costo-proj-stat-val {
font-family: var(--serif);
font-size: 15px;
font-weight: 700;
font-style: italic;
letter-spacing: -0.02em;
color: var(--t1);
}
#page-costos .costo-proj-bar-wrap {
height: 6px;
background: rgba(26,20,16,0.08);
border-radius: 2px;
}
#page-costos .costo-proj-bar-fill { border-radius: 2px; }
#page-costos .costo-proj-budget-inp {
font-family: var(--mono);
font-size: 11px;
border: 1px solid rgba(26,20,16,0.12);
border-radius: 5px;
background: rgba(245,239,230,0.60);
color: var(--t1);
padding: 5px 9px;
}
#page-costos .costo-proj-budget-btn {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.12em;
background: #1a1410;
color: rgba(240,230,214,0.88);
border-radius: 5px;
padding: 5px 10px;
}
#page-costos .costo-cal-hdr {
font-family: var(--mono);
font-size: 8px;
letter-spacing: 0.14em;
color: var(--t4);
text-transform: uppercase;
}
#page-costos .costo-cal-day {
background: rgba(255,255,255,0.70);
border: 1px solid rgba(26,20,16,0.06);
border-radius: 5px;
min-height: 42px;
transition:
border-color var(--motion-fast) var(--ease-ui),
background var(--motion-fast) var(--ease-ui);
}
#page-costos .costo-cal-day:hover {
border-color: rgba(26,20,16,0.18);
background: #ffffff;
}
#page-costos .costo-cal-day.has-data {
background: rgba(232,102,58,0.06);
border-color: rgba(232,102,58,0.18);
}
#page-costos .costo-cal-day.today {
border-color: var(--accent-warm) !important;
}
#page-costos .costo-cal-num {
font-family: var(--mono);
font-size: 9px;
color: var(--t4);
font-weight: 500;
}
#page-costos .costo-cal-day.today .costo-cal-num {
color: var(--accent-warm);
font-weight: 700;
}
#page-costos .costo-cal-amt {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
color: rgba(232,102,58,0.80);
margin-top: 2px;
}
#page-costos .costo-quick-section {
background: rgba(59,130,196,0.04);
border: 1px dashed rgba(59,130,196,0.20);
border-radius: 6px;
padding: 10px 14px;
margin-bottom: 10px;
}
#page-costos .costo-quick-btn {
font-family: var(--mono);
font-size: 9.5px;
letter-spacing: 0.06em;
border: 1px solid rgba(26,20,16,0.10);
background: #ffffff;
color: var(--t2);
border-radius: 4px;
padding: 5px 10px;
transition:
background var(--motion-fast) var(--ease-ui),
color var(--motion-fast) var(--ease-ui);
}
#page-costos .costo-quick-btn:hover {
background: #1a1410;
color: rgba(240,230,214,0.88);
border-color: #1a1410;
}
body #page-costos.section-core {
--cos-gap: 18px;
--cos-pad-x: 24px;
}
body #page-costos.section-core .costo-table-card,
body #page-costos.section-core #costo-quick-section,
body #page-costos.section-core .costo-quick-section{
background: var(--paper);
border: var(--card-border);
border-radius: var(--r2);
box-shadow: none;
margin-bottom: var(--cos-gap);
padding-left: var(--cos-pad-x);
padding-right: var(--cos-pad-x);
}
body #page-costos.section-core .costo-alert-grid {
gap: var(--cos-gap);
}
body #page-costos.section-core .costo-table-card {
padding-top: 0;
padding-bottom: 22px;
}
body #page-costos.section-core .costo-quick-section,
body #page-costos.section-core #costo-quick-section {
padding-top: 14px;
padding-bottom: 14px;
}
body #page-costos.section-core .costo-table {
border-collapse: collapse;
border-spacing: 0;
margin-top: 0;
}
body #page-costos.section-core .costo-table tbody td:first-child {
border-left: 0;
border-radius: 0;
}
body #page-costos.section-core .costo-table tbody td:last-child {
border-right: 0;
border-radius: 0;
}
body #page-costos.section-core .costo-table tbody tr:last-child td {
border-bottom: none;
}
body #page-costos.section-core .costo-table tbody tr:hover td {
background: var(--paper-2);
}
body #page-costos.section-core .costo-rank-item {
border-radius: 0;
background: transparent;
border: none;
border-bottom: 1px solid var(--border-warm);
padding: 13px 0;
}
body #page-costos.section-core .costo-rank-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
body #page-costos.section-core .costo-alert-item {
border-radius: var(--r2);
background: var(--paper-2);
border: 1.5px solid var(--border-warm);
padding: 14px 16px;
}
body #page-costos.section-core .costo-comp-row {
padding-top: 11px;
padding-bottom: 11px;
border-bottom-color: var(--border-warm);
}
body #page-costos.section-core .costo-prov-item {
padding-top: 11px;
padding-bottom: 11px;
border-bottom-color: var(--border-warm);
}
body #page-costos.section-core .costo-alert-lim-inp,
body #page-costos.section-core .costo-proj-budget-inp,
body #page-costos.section-core .costo-quick-btn {
background: var(--paper-2);
border: var(--card-border-thin);
color: var(--ink-82);
}
body #page-costos.section-core .costo-proj-budget-btn,
body #page-costos.section-core .costo-alert-lim-btn {
background: var(--ink-dark);
border-color: var(--ink-dark);
color: var(--text-on-dark);
}
body #page-costos.section-core .costo-monto,
body #page-costos.section-core .costo-rank-monto,
body #page-costos.section-core .costo-table td,
body #page-costos.section-core .costo-table th,
body #page-costos.section-core .costo-period-range,
body #page-costos.section-core .costo-comp-prev,
body #page-costos.section-core .costo-comp-curr,
body #page-costos.section-core .costo-prov-monto,
body #page-costos.section-core .costo-cat-leg-pct,
body #page-costos.section-core .costo-cat-leg-amt {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
}
body #page-costos.section-core .costo-table tbody td{
background: transparent;
border-top: none;
border-bottom: 1px solid var(--border-warm);
border-left: 0;
border-right: 0;
border-radius: 0;
padding-top: 16px;
padding-bottom: 16px;
font-size: 13px;
color: var(--ink-82);
}
body #page-costos.section-core .costo-table thead th{
border-bottom: 1.5px solid var(--border-warm);
padding: 0 16px 10px 16px;
font-weight: 600;
text-transform: uppercase;
color: var(--ink-70);
padding-top: 4px;
padding-bottom: 12px;
font-size: 9px;
letter-spacing: .12em;
}
body #page-costos.section-core .costo-monto {
font-size: 14px;
font-weight: 700;
color: var(--char);
}
body #page-costos.section-core .costo-cat-pill {
padding: 3px 10px;
font-size: 10.5px;
}
body #page-costos.section-core .costo-rank-num {
width: 22px;
height: 22px;
font-size: 10px;
flex-shrink: 0;
}
body #page-costos.section-core .costo-rank-desc {
font-size: 13px;
font-weight: 600;
color: var(--char);
margin-bottom: 2px;
}
body #page-costos.section-core .costo-rank-meta {
font-size: 11px;
color: var(--ink-70);
margin-top: 3px;
}
body #page-costos.section-core .costo-rank-monto {
font-size: 14px;
font-weight: 700;
color: var(--char);
}
body #page-costos.section-core .costo-cat-leg-item {
font-size: 12.5px;
gap: 10px;
padding: 3px 0;
}
body #page-costos.section-core .costo-cat-leg-name {
font-size: 12.5px;
color: var(--ink-82);
}
body #page-costos.section-core .costo-cat-leg-pct {
font-size: 11px;
color: var(--ink-70);
}
body #page-costos.section-core .costo-cat-leg-amt {
font-size: 12px;
font-weight: 700;
color: var(--char);
}
body #page-costos.section-core .costo-comp-label {
font-size: 12.5px;
color: var(--ink-82);
font-weight: 500;
}
body #page-costos.section-core .costo-comp-prev {
font-size: 12px;
color: var(--ink-70);
}
body #page-costos.section-core .costo-comp-curr {
font-size: 13px;
font-weight: 700;
color: var(--char);
}
body #page-costos.section-core .costo-delta {
font-size: 11px;
}
body #page-costos.section-core .costo-prov-name {
font-size: 12.5px;
font-weight: 600;
}
body #page-costos.section-core .costo-prov-meta {
font-size: 10.5px;
margin-top: 2px;
}
body #page-costos.section-core .costo-prov-monto {
font-size: 13px;
font-weight: 700;
}
#page-costos{
padding-bottom: 40px;
background: #fdfcfb;
padding: 36px 40px 60px;
gap: 0;
min-height: 100%;
box-sizing: border-box;
}
#page-costos.active { display: flex; flex-direction: column; }
.co-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 28px;
}
.co-header-left { display: flex; flex-direction: column; }
.co-eyebrow {
font-size: 11px;
letter-spacing: 0.1em;
color: #9A8F86;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 4px;
}
.co-title {
font-family: var(--serif);
font-size: 28px;
font-weight: 700;
color: #1A1410;
line-height: 1.1;
margin: 0 0 4px;
}
.co-subtitle {
font-size: 13px;
color: #9A8F86;
margin: 0;
}
.co-btn-primary {
display: flex;
align-items: center;
gap: 7px;
background: #C4522A;
color: #fff;
border: none;
border-radius: 100px;
padding: 11px 22px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background 0.18s;
margin-top: 8px;
flex-shrink: 0;
}
.co-btn-primary:hover { background: #A84220; }
.co-topbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
gap: 16px;
flex-wrap: wrap;
}
.co-topbar .co-subnav { margin-bottom: 0; }
.co-period-bar {
display: flex;
gap: 2px;
background: #EDE9E2;
border-radius: 10px;
padding: 4px;
flex-shrink: 0;
}
.co-filters-group {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
flex-wrap: wrap;
}
.co-period-btn {
background: none;
border: none;
padding: 7px 16px;
font-size: 13px;
font-weight: 500;
color: #7A6F66;
cursor: pointer;
border-radius: 7px;
transition: all 0.18s;
white-space: nowrap;
font-family: inherit;
}
.co-period-btn.active {
background: #fff;
color: #1A1410;
font-weight: 600;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.co-period-btn:not(.active):hover {
color: #1A1410;
background: rgba(255,255,255,0.45);
}
.co-subnav {
display: flex;
gap: 2px;
background: #EDE9E2;
border-radius: 10px;
padding: 4px;
width: fit-content;
}
.co-subnav-btn {
background: none;
border: none;
padding: 8px 18px;
font-size: 14px;
font-weight: 500;
color: #7A6F66;
cursor: pointer;
border-radius: 7px;
transition: all 0.18s;
white-space: nowrap;
font-family: inherit;
}
.co-subnav-btn.active {
background: #fff;
color: #1A1410;
font-weight: 600;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.co-subnav-btn:not(.active):hover {
color: #1A1410;
background: rgba(255,255,255,0.45);
}
.co-subpage {
display: flex;
flex-direction: column;
gap: 20px;
}
.co-card {
background: #fff;
border: 1px solid rgba(26,20,16,.05);
border-radius: var(--radius-lg);
padding: 24px 28px;
box-shadow: var(--card-shadow);
transition: box-shadow .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1);
}
.co-card:hover {
box-shadow: var(--card-shadow-hover);
transform: translateY(-1px);
}
.co-card-eyebrow {
font-size: 10px;
letter-spacing: 0.1em;
color: #9A8F86;
font-weight: 700;
margin-bottom: 4px;
text-transform: uppercase;
}
.co-card-title {
font-family: var(--serif);
font-size: 22px;
font-weight: 600;
color: #1A1410;
margin-bottom: 20px;
}
.co-chart-card { }
.co-chart-wrap {
height: 300px;
position: relative;
}
.co-chart-suc-wrap { height: 240px; }
.co-chart-legend {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 16px;
flex-wrap: wrap;
}
.co-leg-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #7A6F66;
}
.co-leg-dot {
width: 10px;
height: 10px;
border-radius: 2px;
flex-shrink: 0;
}
.co-leg-dash {
width: 18px;
height: 2.5px;
border-radius: 2px;
flex-shrink: 0;
}
.co-kpi-row-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.co-kpi3 {
background: #fff;
border-radius: 14px;
padding: 22px 24px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
text-align: center;
}
.co-kpi3-label {
font-size: 10px;
letter-spacing: 0.1em;
color: #9A8F86;
font-weight: 700;
margin-bottom: 10px;
text-transform: uppercase;
}
.co-kpi3-val {
font-family: var(--serif);
font-size: 32px;
font-weight: 700;
color: #1A1410;
line-height: 1;
}
.co-kpi3-red { color: #C4522A !important; }
.co-kpi3-delta {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.04em;
margin-top: 8px;
font-weight: 600;
}
.co-delta-green { color: #2D6B4A; }
.co-delta-red { color: #C4522A; }
.co-kpi3-sub {
font-size: 11px;
color: #9A8F86;
margin-top: 8px;
line-height: 1.3;
}
.co-insights-row { margin-top: 0; }
/* ── Alerta de tendencia ── */
.co-alert-trend {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 22px;
border-radius: 14px;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
}
.co-alert-trend.co-alert-warning {
border-left: 4px solid #D4A017;
background: linear-gradient(135deg, #FFFDF5 0%, #fff 100%);
}
.co-alert-trend.co-alert-danger {
border-left: 4px solid #C4522A;
background: linear-gradient(135deg, #FFF8F6 0%, #fff 100%);
}
.co-alert-trend.co-alert-success {
border-left: 4px solid #2D6B4A;
background: linear-gradient(135deg, #F5FFF9 0%, #fff 100%);
}
.co-alert-trend-icon {
font-size: 20px;
flex-shrink: 0;
line-height: 1;
}
.co-alert-trend-title {
font-size: 14px;
font-weight: 700;
color: #1A1410;
margin-bottom: 4px;
}
.co-alert-trend-desc {
font-size: 13px;
color: #5A4F47;
line-height: 1.5;
}
/* ── Top categorías ── */
.co-top-cats-card { margin-top: 0; }
.co-top-cats-list {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 16px;
}
.co-top-cat-item {
display: flex;
flex-direction: column;
gap: 8px;
}
.co-top-cat-head {
display: flex;
align-items: center;
gap: 10px;
}
.co-top-cat-rank {
font-family: var(--serif);
font-size: 16px;
font-weight: 700;
color: #9A8F86;
width: 20px;
text-align: center;
flex-shrink: 0;
}
.co-top-cat-pct {
font-family: var(--mono);
font-size: 11px;
color: #7A6F66;
margin-left: auto;
letter-spacing: 0.02em;
}
.co-top-cat-monto {
font-family: var(--serif);
font-size: 15px;
font-weight: 700;
font-style: italic;
color: #1A1410;
min-width: 80px;
text-align: right;
}
.co-top-cat-bar {
height: 6px;
background: rgba(26,20,16,0.06);
border-radius: 3px;
overflow: hidden;
}
.co-top-cat-bar-fill {
height: 100%;
background: linear-gradient(90deg, #C4522A, #D4956A);
border-radius: 3px;
transition: width .4s cubic-bezier(.16,1,.3,1);
}
/* ── Breakdown por categoría ── */
.co-breakdown-list { margin-top: 16px; }
.co-bd-header {
display: grid;
grid-template-columns: 1fr 100px 80px 90px;
gap: 8px;
padding: 0 0 10px;
border-bottom: 1px solid #F0EDE8;
margin-bottom: 4px;
}
.co-bd-th {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.1em;
color: #9A8F86;
font-weight: 700;
text-transform: uppercase;
}
.co-bd-right { text-align: right; }
.co-bd-row {
display: grid;
grid-template-columns: 1fr 100px 80px 90px;
gap: 8px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #F8F6F3;
}
.co-bd-row:last-child { border-bottom: none; }
.co-bd-cat { display: flex; align-items: center; }
.co-bd-monto {
font-family: var(--serif);
font-size: 14px;
font-weight: 700;
font-style: italic;
color: #1A1410;
text-align: right;
}
.co-bd-pct {
font-family: var(--mono);
font-size: 11px;
color: #7A6F66;
text-align: right;
}
.co-bd-delta {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-align: right;
}
/* ── Punto de equilibrio ── */
.co-equil-card { text-align: center; }
.co-equil-val {
font-family: var(--serif);
font-size: 28px;
font-weight: 700;
color: #1A1410;
margin: 12px 0 6px;
}
.co-equil-sub {
font-size: 12px;
color: #7A6F66;
line-height: 1.4;
margin-bottom: 16px;
}
.co-equil-bar-wrap {
height: 8px;
background: #F0EDE8;
border-radius: 4px;
overflow: hidden;
margin-bottom: 10px;
}
.co-equil-bar-fill {
height: 100%;
border-radius: 4px;
transition: width .5s cubic-bezier(.16,1,.3,1);
}
.co-equil-legend {
display: flex;
justify-content: space-between;
font-family: var(--mono);
font-size: 9px;
color: #9A8F86;
letter-spacing: 0.04em;
}
/* ── Proyección utilidad ── */
.co-proy-util-card { text-align: center; }
.co-proy-util-val {
font-family: var(--serif);
font-size: 28px;
font-weight: 700;
margin: 12px 0 6px;
}
.co-proy-util-label {
font-size: 12px;
color: #7A6F66;
margin-bottom: 12px;
}
.co-proy-util-detail {
font-size: 12px;
color: #9A8F86;
line-height: 1.4;
}
.co-proy-util-detail strong {
color: #5A4F47;
font-weight: 600;
}
/* ── Fijos vs Variables ── */
.co-fv-row {
display: flex;
align-items: center;
gap: 0;
margin-top: 16px;
}
.co-fv-block {
flex: 1;
text-align: center;
}
.co-fv-label {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.12em;
color: #9A8F86;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 6px;
}
.co-fv-val {
font-family: var(--serif);
font-size: 24px;
font-weight: 700;
color: #1A1410;
line-height: 1;
}
.co-fv-pct {
font-family: var(--mono);
font-size: 10px;
color: #9A8F86;
margin-top: 4px;
}
.co-fv-divider {
width: 1px;
height: 48px;
background: #F0EDE8;
flex-shrink: 0;
}
.co-fv-bar-wrap {
display: flex;
height: 8px;
border-radius: 4px;
overflow: hidden;
margin: 16px 0 12px;
background: #F0EDE8;
}
.co-fv-bar-fijos {
height: 100%;
background: #C4522A;
transition: width .5s cubic-bezier(.16,1,.3,1);
}
.co-fv-bar-vars {
height: 100%;
background: #D4956A;
transition: width .5s cubic-bezier(.16,1,.3,1);
}
.co-fv-items { margin-top: 4px; }
.co-fv-items-title {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.1em;
color: #9A8F86;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 8px;
}
.co-fv-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #F8F6F3;
}
.co-fv-item:last-child { border-bottom: none; }
.co-fv-item-val {
font-family: var(--serif);
font-size: 14px;
font-weight: 700;
font-style: italic;
color: #1A1410;
}
/* ── Margen por sucursal ── */
.co-suc-compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 16px;
}
.co-suc-cmp-item {
background: #FDFCFA;
border-radius: 12px;
padding: 18px 20px;
border: 1px solid #F0EDE8;
}
.co-suc-cmp-name {
font-family: var(--serif);
font-size: 15px;
font-weight: 700;
color: #1A1410;
margin-bottom: 14px;
}
.co-suc-cmp-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.co-suc-cmp-cell {
display: flex;
flex-direction: column;
gap: 3px;
}
.co-suc-cmp-lbl {
font-family: var(--mono);
font-size: 8px;
letter-spacing: 0.12em;
color: #9A8F86;
font-weight: 700;
text-transform: uppercase;
}
.co-suc-cmp-val {
font-family: var(--serif);
font-size: 16px;
font-weight: 700;
color: #1A1410;
}
.co-body-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.co-gauge-wrap {
position: relative;
width: 200px;
height: 112px;
margin: 20px auto 4px;
}
.co-gauge-center {
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
text-align: center;
pointer-events: none;
white-space: nowrap;
}
.co-gauge-pct {
font-family: var(--serif);
font-size: 28px;
font-weight: 700;
color: #1A1410;
line-height: 1;
}
.co-gauge-unit {
font-size: 11px;
color: #9A8F86;
margin-top: 2px;
}
.co-gauge-status {
text-align: center;
margin-top: 16px;
font-size: 13px;
font-weight: 600;
}
.co-cat-inner {
display: flex;
align-items: center;
gap: 20px;
margin-top: 12px;
}
.co-cat-donut-wrap {
width: 130px;
height: 130px;
flex-shrink: 0;
}
.co-cat-legend {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.co-search-wrap {
display: flex;
align-items: center;
background: #fff;
border-radius: 100px;
padding: 10px 18px;
gap: 10px;
width: 340px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.07);
}
.co-search-icon { color: #9A8F86; flex-shrink: 0; }
.co-search-input {
border: none;
outline: none;
background: transparent;
font-size: 14px;
color: #1A1410;
flex: 1;
font-family: inherit;
}
.co-table-card { padding: 0; overflow: hidden; overflow-x: auto; }
.co-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.co-table thead th {
font-size: 10px;
letter-spacing: 0.08em;
color: #9A8F86;
font-weight: 700;
text-transform: uppercase;
padding: 14px 20px;
text-align: left;
border-bottom: 1px solid #F0EDE8;
background: #FDFCFA;
}
.co-table tbody tr {
border-bottom: 1px solid #F5F2EC;
transition: background 0.12s;
}
.co-table tbody tr:nth-child(even) {
background: rgba(26,20,16,0.018);
}
.co-table tbody tr:last-child { border-bottom: none; }
.co-table tbody tr:hover { background: #F8F6F3; }
.co-table tbody td { padding: 14px 20px; color: #1A1410; }
.co-td-date {
font-family: var(--mono);
font-size: 12px;
color: #7A6F66;
white-space: nowrap;
}
.co-td-monto {
font-family: var(--serif);
font-size: 16px;
font-weight: 700;
font-style: italic;
letter-spacing: -0.02em;
color: #1A1410;
text-align: right;
white-space: nowrap;
}
.co-cat-pill {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: var(--radius-xs, 6px);
font-weight: 600;
white-space: nowrap;
}
.co-td-acciones-wrap {
display: flex;
align-items: center;
gap: 4px;
opacity: 0;
transition: opacity .18s ease;
}
.co-table tbody tr:hover .co-td-acciones-wrap {
opacity: 1;
}
.co-row-edit,
.co-row-del {
background: none;
border: none;
cursor: pointer;
padding: 5px;
border-radius: 5px;
color: #9A8F86;
transition: color .15s, background .15s;
}
.co-row-edit:hover { color: #1A1410; background: rgba(26,20,16,.05); }
.co-row-del:hover { color: #C4522A; background: rgba(196,82,42,.08); }
.co-suc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.co-suc-card {
background: #fff;
border-radius: 14px;
padding: 22px 24px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
}
.co-suc-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 4px;
}
.co-suc-card-name {
display: flex;
align-items: center;
gap: 9px;
font-family: var(--serif);
font-size: 18px;
font-weight: 700;
color: #1A1410;
}
.co-suc-icon {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.co-suc-total {
font-family: var(--serif);
font-size: 22px;
font-weight: 700;
color: #1A1410;
text-align: right;
}
.co-suc-pct {
font-size: 12px;
color: #9A8F86;
text-align: right;
}
.co-suc-meta {
font-size: 12px;
color: #9A8F86;
margin-bottom: 10px;
}
.co-suc-bar {
height: 3px;
border-radius: 2px;
margin-bottom: 14px;
transition: width 0.5s ease;
}
.co-suc-breakdown {
display: flex;
flex-direction: column;
gap: 8px;
}
.co-suc-kpi-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 14px 0 16px;
padding: 14px;
background: #FBF8F4;
border: 1px solid #EEE8DF;
border-radius: 10px;
}
.co-suc-kpi { min-width: 0; }
.co-suc-kpi-lbl {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.12em;
color: #9A8F86;
text-transform: uppercase;
margin-bottom: 4px;
}
.co-suc-kpi-val {
font-family: var(--serif);
font-size: 17px;
font-weight: 700;
color: #1A1410;
line-height: 1.05;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.co-util-pos { color: #2D6B4A !important; }
.co-util-neg { color: #C4522A !important; }
.co-suc-breakdown-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
color: #9A8F86;
text-transform: uppercase;
margin-bottom: 8px;
}
.co-suc-breakdown-empty {
font-size: 12px;
color: #9A8F86;
padding: 8px 0;
font-style: italic;
}
.co-rank-card { padding: 22px 24px; }
.co-rank-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 16px;
}
.co-rank-row {
display: grid;
grid-template-columns: 52px 1fr auto auto;
align-items: center;
gap: 16px;
padding: 14px 16px;
background: #FBF8F4;
border: 1px solid #EEE8DF;
border-radius: 12px;
}
.co-rank-row:first-child {
background: linear-gradient(135deg, #FDF6E9 0%, #FBF8F4 100%);
border-color: #E5D4A8;
}
.co-rank-pos {
display: flex;
align-items: center;
gap: 6px;
color: #9A8F86;
font-family: var(--sans, 'Inter', sans-serif);
font-size: 13px;
font-weight: 600;
}
.co-rank-medal { display: inline-flex; align-items: center; }
.co-rank-name { min-width: 0; }
.co-rank-name-top {
font-family: var(--serif);
font-size: 17px;
font-weight: 700;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.co-rank-name-sub {
font-size: 11.5px;
color: #9A8F86;
margin-top: 3px;
}
.co-rank-metric { text-align: right; min-width: 0; }
.co-rank-metric-lbl {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
color: #9A8F86;
text-transform: uppercase;
margin-bottom: 3px;
}
.co-rank-metric-val {
font-family: var(--serif);
font-size: 15px;
font-weight: 700;
color: #1A1410;
line-height: 1;
white-space: nowrap;
}
.co-rank-footer {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid #EEE8DF;
font-size: 12px;
color: #7A6F66;
text-align: center;
}
.co-rank-footer b { color: #1A1410; font-weight: 600; }
/* ═══ 21. PRECIOS ═══ */
.pr-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
.pr-header-left { display:flex; flex-direction:column; gap:2px; }
.pr-eyebrow { font-size:10px; font-weight:700; letter-spacing:0.12em; color:#766960; text-transform:uppercase; font-family:var(--mono); }
.pr-title { font-family:var(--serif); font-size:36px; font-weight:700; color:#231D1A; line-height:1.05; margin:0; }
.pr-subtitle { font-size:12px; color:#766960; margin:0; margin-top:2px; }
.pr-save-btn {
display: inline-flex; align-items: center; gap: 7px;
background: #E8663A; color: #fff;
border: none; border-radius: 22px;
padding: 11px 20px; font-size: 13px; font-weight: 600;
font-family: var(--sans); cursor: pointer;
position: relative; overflow: hidden;
transition: background .2s, box-shadow .2s;
}
.pr-save-btn:hover { background: #b35525; box-shadow: 0 4px 14px rgba(232,102,58,.32); }
.pr-filter-bar { display:flex; gap:8px; align-items:center; margin-bottom:20px; }
.pr-search-wrap {
display:flex; align-items:center; gap:8px;
background:#fff; border:1.5px solid #E5E0DC; border-radius:10px;
padding:0 12px; height:40px; width:280px;
transition:border-color .15s;
}
.pr-search-wrap:focus-within { border-color:#E8663A; box-shadow:0 0 0 3px rgba(232,102,58,.10); }
.pr-search-wrap svg { color:#766960; flex-shrink:0; }
.pr-search-input {
border:none; background:transparent; flex:1;
font-size:13px; color:#231D1A; outline:none; font-family:var(--sans);
}
.pr-filter-select {
height:40px; padding:0 12px;
border:1.5px solid #E5E0DC; border-radius:10px;
background:#fff; color:#231D1A;
font-family:var(--sans); font-size:13px; outline:none; cursor:pointer;
transition:border-color .15s;
}
.pr-filter-select:focus { border-color:#E8663A; box-shadow:0 0 0 3px rgba(232,102,58,.10); }
.pr-group { margin-bottom:20px; }
.pr-group-head {
display:flex; align-items:center; gap:8px;
padding:0 0 10px 0; margin-bottom:0;
border-bottom:1.5px solid #E5E0DC;
}
.pr-group-title {
font-family:var(--sans); font-size:11px; font-weight:700;
letter-spacing:0.08em; text-transform:uppercase; color:#766960;
}
.pr-group-count {
font-family:var(--mono); font-size:10px; color:#E8663A;
background:rgba(232,102,58,.1); border-radius:20px;
padding:1px 7px; font-weight:600;
}
.pr-rows-wrap {
border: 1.5px solid #E5E0DC;
border-radius: 14px;
overflow: hidden;
background: #fff;
}
.pr-row {
border-bottom: 1px solid #F2F0ED;
background: #fff;
}
.pr-row:last-child { border-bottom: none; }
.pr-row-head {
display:grid; grid-template-columns:1fr auto auto auto;
gap:16px; align-items:center;
padding:12px 16px; cursor:pointer;
transition:background .1s;
}
.pr-row-head:hover { background:#fdfcfb; }
.pr-row.is-open .pr-row-head { background:#fdfcfb; }
.pr-row-nombre {
font-family:var(--sans); font-size:13px; font-weight:600;
color:#231D1A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pr-row-meta { font-family:var(--sans); font-size:11px; color:#766960; white-space:nowrap; text-align:right; }
.pr-row-toggle {
font-family:var(--sans); font-size:11px; color:#766960;
white-space:nowrap; display:flex; align-items:center; gap:5px;
transition:color .12s;
}
.pr-row-head:hover .pr-row-toggle { color:#E8663A; }
.pr-row-chevron { display:inline-block; transition:transform .2s; }
.pr-row.is-open .pr-row-chevron { transform:rotate(180deg); }
.pr-hist { display:none; border-top:1px solid #F2F0ED; background:#fdfcfb; }
.pr-row.is-open .pr-hist { display:block; }
.pr-hist-empty { padding:14px 16px; font-size:12px; color:#766960; font-family:var(--sans); }
.pr-save-btn .pr-btn-label {
display: inline-flex;
align-items: center;
gap: 7px;
transition: opacity .22s ease, transform .30s cubic-bezier(.4,0,.2,1);
will-change: transform, opacity;
}
.pr-save-btn .pr-btn-success {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--mono);
font-size: 8.5px;
font-weight: 400;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(210,240,220,.92);
opacity: 0;
transform: translateY(12px);
transition: opacity .28s ease .08s, transform .34s cubic-bezier(.16,1,.3,1) .08s;
pointer-events: none;
will-change: transform, opacity;
}
.pr-save-btn .pr-btn-check {
width: 17px;
height: 17px;
flex-shrink: 0;
}
.pr-btn-check-circle {
transition: stroke-dashoffset .5s cubic-bezier(.16,1,.3,1);
}
.pr-btn-check-mark {
stroke-dasharray: 26;
stroke-dashoffset: 26;
transition: stroke-dashoffset 0s;
}
.pr-save-btn.is-saving {
transform: scale(.97);
transition: transform .08s ease;
}
.pr-save-btn.is-success {
background: var(--c-green, #22A55A);
box-shadow: 0 4px 20px rgba(34,165,90,.35);
transform: scale(1);
transition: background .30s cubic-bezier(.16,1,.3,1), box-shadow .38s cubic-bezier(.16,1,.3,1), transform .18s ease;
}
.pr-save-btn.is-success .pr-btn-label { opacity:0; transform:translateY(-9px); }
.pr-save-btn.is-success .pr-btn-success { opacity:1; transform:translateY(0); }
.pr-save-btn.is-success .pr-btn-check-mark {
stroke-dashoffset: 0;
transition: stroke-dashoffset .38s cubic-bezier(.16,1,.3,1) .20s;
}
.pr-save-btn.is-returning {
transition: background .50s ease, box-shadow .50s ease;
}
.pr-save-btn.is-returning .pr-btn-label {
opacity:1; transform:translateY(0);
transition: opacity .32s ease .12s, transform .38s cubic-bezier(.16,1,.3,1) .12s;
}
.pr-save-btn.is-returning .pr-btn-success {
opacity:0; transform:translateY(12px);
transition: opacity .18s ease, transform .26s cubic-bezier(.4,0,.6,1);
}
.pr-precio-input {
font-family: var(--mono); font-size:15px; font-weight:700;
color:#E8663A; background:transparent;
border:1.5px solid transparent; border-radius:8px;
padding:4px 8px; width:120px; text-align:right;
outline:none; transition:border-color .15s, background .15s;
-moz-appearance: textfield;
}
.pr-precio-input::-webkit-outer-spin-button,
.pr-precio-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.pr-precio-input:focus {
border-color:#E5E0DC; background:#fdfcfb;
}
.pr-precio-input.is-dirty {
border-color:#E8663A; background:rgba(232,102,58,.06); color:#E8663A;
}
/* ═══ 22. CIERRE DE CAJA ═══ */
.cc-pago-filtro-btn {
padding: 3px 9px;
font-family: var(--sans);
font-size: 10px;
font-weight: 500;
border: 1.5px solid var(--border-warm);
border-radius: 20px;
background: var(--paper);
color: var(--ink-70);
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.cc-pago-filtro-btn.on {
background: var(--ink);
color: var(--text-on-dark);
border-color: var(--ink);
}
.cc-arqueo-val { font-family: var(--mono); font-weight: 500; color: var(--char); }
.cc-dif-neutral { color: var(--ink-70); }
.cc-retiro-row {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 10px;
}
.cc-retiro-btns {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.cc-comp-delta {
font-size: 10px;
font-family: var(--mono);
padding: 2px 6px;
border-radius: 6px;
font-weight: 600;
}
.cc-comp-delta.up { background: rgba(34,165,90,.1); color: var(--green); }
.cc-comp-delta.down { background: rgba(224,82,82,.1); color: var(--red); }
.cc-comp-delta.flat { background: var(--paper-2); color: var(--ink-70); }
/* ═══════════════════════════════════════════════════════════════
v7.70.0 · CIERRE DE CAJA — Confirmación operativa light
(Legacy ceremonial eliminado — ver backup v7.69.0)
═══════════════════════════════════════════════════════════════ */
#page-cierre .cc-hero {
background:
radial-gradient(ellipse 120% 90% at 100% 0%, rgba(232,102,58,0.22) 0%, transparent 55%),
radial-gradient(ellipse 80% 70% at 0% 100%, rgba(232,102,58,0.10) 0%, transparent 55%),
linear-gradient(158deg, #1c1510 0%, #271d15 55%, #160f0b 100%);
border: 1px solid rgba(232,102,58, 0.24);
border-radius: 10px;
box-shadow:
0 16px 40px rgba(26, 20, 16, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
padding: 28px 28px 24px;
position: relative;
overflow: hidden;
}
#page-cierre .cc-hero::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(
90deg, transparent 0%,
rgba(232, 146, 74, 0.70) 35%,
rgba(232, 146, 74, 0.90) 55%,
rgba(232, 146, 74, 0.70) 75%,
transparent 100%
);
pointer-events: none;
}
#page-cierre .cc-pago-filtro-btn{
border-color: var(--line-strong);
font-family: var(--mono);
font-size: 8.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
background: rgba(26, 20, 16, 0.04);
border: 1px solid rgba(26, 20, 16, 0.10);
color: var(--t3);
border-radius: 4px;
padding: 5px 10px;
cursor: pointer;
transition: background var(--motion-fast) var(--ease-ui),
border-color var(--motion-fast) var(--ease-ui),
color var(--motion-fast) var(--ease-ui);
}
#page-cierre .cc-pago-filtro-btn.on {
background: var(--ember-bg);
border-color: var(--ember-ln);
color: var(--accent-warm);
}
#page-cierre .cc-top-item{
border-bottom-color: var(--line-soft);
display: flex;
align-items: center;
gap: 12px;
padding: 11px 0;
border-bottom: 1px solid rgba(26, 20, 16, 0.06);
}
#page-cierre .cc-top-name {
font-size: 12.5px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--t1);
flex: 1;
}
#page-cierre .cc-arqueo-row{
border-bottom-color: var(--line-soft);
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid rgba(26, 20, 16, 0.06);
}
#page-cierre .cc-arqueo-val {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--t1);
letter-spacing: -0.01em;
}
#page-cierre .cc-btn-cerrar {
width: 100%;
background: var(--accent-warm);
color: #fff;
border: none;
border-radius: 8px;
padding: 15px 20px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
cursor: pointer;
box-shadow:
0 8px 24px rgba(232,102,58, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.16);
transition:
background var(--motion-fast) var(--ease-ui),
box-shadow var(--motion-fast) var(--ease-ui),
transform var(--motion-fast) var(--ease-ui);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
#page-cierre .cc-btn-cerrar::before { display: none; }
#page-cierre .cc-btn-cerrar:hover {
background: #b05422;
box-shadow:
0 12px 30px rgba(232,102,58, 0.38),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
transform: translateY(-1px);
}
#page-cierre .cc-btn-cerrar:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 4px 12px rgba(232,102,58, 0.22);
}
#page-cierre .cc-btn-cerrar.is-closing {
pointer-events: none;
opacity: 0.85;
}
#page-cierre .cc-btn-preview{
border-color: var(--line-strong);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
background: rgba(26, 20, 16, 0.04);
border: 1px solid rgba(26, 20, 16, 0.12);
color: var(--t3);
border-radius: 6px;
padding: 8px 14px;
cursor: pointer;
transition: background var(--motion-fast) var(--ease-ui),
border-color var(--motion-fast) var(--ease-ui),
color var(--motion-fast) var(--ease-ui);
}
#page-cierre .cc-btn-preview:hover {
border-color: rgba(232,102,58, 0.30);
color: var(--t1);
background: rgba(232,102,58, 0.05);
}
body #page-cierre.section-core {
background: var(--page);
}
#page-cierre.section-core .cc-hero {
background: linear-gradient(162deg, #1e1712 0%, #2a2018 62%, #18120e 100%);
border: 1px solid rgba(232,102,58, 0.28);
box-shadow: 0 14px 34px rgba(26, 20, 16, 0.22);
position: relative;
overflow: hidden;
}
#page-cierre.section-core .cc-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(120% 100% at 100% 0%, rgba(232,102,58,.22) 0%, transparent 58%),
radial-gradient(90% 80% at 0% 100%, rgba(232,102,58,.12) 0%, transparent 55%);
}
#page-cierre.section-core .cc-hero::after {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(232,146,74,.65), transparent);
pointer-events: none;
}
#page-cierre.section-core .cc-obs-save {
background: var(--ink-dark);
color: var(--text-on-dark);
border-color: var(--ink-dark);
}
#page-cierre.active { display: flex; flex-direction: column; }
#page-cierre {
padding: 28px 32px 48px;
gap: 22px;
background: var(--page);
min-height: 100vh;
box-sizing: border-box;
}
.cc2-empty-state {
padding: 24px 0; text-align: center;
color: var(--ink-70); font-size: 13px;
}
.cc2-hist-list {
display: flex;
flex-direction: column;
gap: 2px;
max-height: 320px;
overflow-y: auto;
}
#page-cierre .cc-obs-editor {
margin: -2px 0 10px;
padding: 14px 16px;
background: #fdfcfb;
border: 1px solid rgba(26, 20, 16, 0.07);
border-radius: 12px;
}
#page-cierre .cc-obs-editor textarea {
width: 100%;
box-sizing: border-box;
min-height: 72px;
padding: 10px 12px;
background: rgba(26, 20, 16, 0.025);
border: 1px solid rgba(26, 20, 16, 0.08);
border-radius: 10px;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
color: #1A1410;
resize: vertical;
transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
#page-cierre .cc-obs-editor textarea:focus {
outline: none;
background: #FFFFFF;
border-color: rgba(232,102,58, 0.45);
box-shadow: 0 0 0 3px rgba(232,102,58, 0.10);
}
#page-cierre .cc-obs-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 10px;
}
#page-cierre .cc-obs-cancel,
#page-cierre .cc-obs-save {
padding: 8px 16px;
border-radius: 10px;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 12px;
font-weight: 600;
letter-spacing: -0.005em;
cursor: pointer;
border: 1px solid;
transition:
background 0.16s ease,
border-color 0.16s ease,
color 0.16s ease,
transform 0.14s ease,
box-shadow 0.16s ease;
}
#page-cierre .cc-obs-cancel {
background: transparent;
border-color: rgba(26, 20, 16, 0.10);
color: rgba(26, 20, 16, 0.55);
}
#page-cierre .cc-obs-cancel:hover {
background: rgba(26, 20, 16, 0.04);
border-color: rgba(26, 20, 16, 0.18);
color: #1A1410;
}
#page-cierre .cc-obs-save {
background: #1A1410;
border-color: #1A1410;
color: #F5EFE6;
box-shadow: 0 1px 2px rgba(26, 20, 16, 0.10);
}
#page-cierre .cc-obs-save:hover {
background: #2A1F18;
box-shadow: 0 4px 14px rgba(26, 20, 16, 0.18);
transform: translateY(-1px);
}
#page-cierre .cc-obs-save:active { transform: scale(0.98); }
#page-cierre .cc3-page-head {
margin-bottom: 36px;
}
#page-cierre .cc3-hero {
position: relative;
background: #FFFFFF;
border: 1px solid rgba(26, 20, 16, 0.05);
border-radius: var(--radius-lg);
box-shadow: var(--card-shadow);
padding: 28px 30px 26px;
overflow: hidden;
isolation: isolate;
}
#page-cierre .cc3-hero::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 18%, rgba(232,102,58, 0.04) 0%, transparent 38%),
radial-gradient(circle at 92% 10%, rgba(26, 20, 16, 0.025) 0%, transparent 42%);
pointer-events: none;
z-index: 0;
}
#page-cierre .cc3-hero > * { position: relative; z-index: 1; }
#page-cierre .cc3-hero-status {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 11px 5px 9px;
border-radius: 999px;
background: rgba(34,165,90, 0.08);
border: 1px solid rgba(34,165,90, 0.20);
margin-bottom: 22px;
font-family: var(--mono, "Inter", monospace);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
#page-cierre .cc3-hero-status-label { color: #1F7A42; }
#page-cierre .cc3-hero-status-meta {
color: rgba(31, 122, 66, 0.65);
font-weight: 600;
letter-spacing: 0.10em;
}
#page-cierre .cc3-hero-status[data-state="cerrada"] {
background: rgba(26, 20, 16, 0.04);
border-color: rgba(26, 20, 16, 0.10);
}
#page-cierre .cc3-hero-status[data-state="cerrada"] .cc3-hero-status-dot {
background: rgba(26, 20, 16, 0.42);
box-shadow: 0 0 0 2px rgba(26, 20, 16, 0.06);
animation: none;
}
#page-cierre .cc3-hero-status[data-state="cerrada"] .cc3-hero-status-label,
#page-cierre .cc3-hero-status[data-state="cerrada"] .cc3-hero-status-meta {
color: rgba(26, 20, 16, 0.55);
}
#page-cierre .cc3-hero-status[data-state="pendiente"] {
background: rgba(230, 126, 34, 0.08);
border-color: rgba(230, 126, 34, 0.25);
}
#page-cierre .cc3-hero-status[data-state="pendiente"] .cc3-hero-status-dot {
background: #E67E22;
box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.16);
animation: cc3HeroDotUrg 1.4s ease-in-out infinite;
}
#page-cierre .cc3-hero-status[data-state="pendiente"] .cc3-hero-status-label {
color: #B85F12;
}
#page-cierre .cc3-hero-status[data-state="pendiente"] .cc3-hero-status-meta {
color: rgba(184, 95, 18, 0.7);
}
#page-cierre .cc3-hero-delta {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(34,165,90, 0.08);
border: 1px solid rgba(34,165,90, 0.18);
color: #1F7A42;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 11.5px;
font-weight: 600;
letter-spacing: -0.005em;
white-space: nowrap;
transform: translateY(-3px);
}
#page-cierre .cc3-hero-delta svg { width: 12px; height: 12px; flex-shrink: 0; }
#page-cierre .cc3-hero-delta[data-state="negative"] {
background: rgba(192, 57, 43, 0.07);
border-color: rgba(192, 57, 43, 0.18);
color: #B33323;
}
#page-cierre .cc3-hero-delta[data-state="negative"] svg { transform: rotate(90deg); }
#page-cierre .cc3-hero-delta[data-state="negative"] .cc3-hero-delta-suffix {
color: rgba(179, 51, 35, 0.55);
}
#page-cierre .cc3-hero-delta[data-state="neutral"] {
background: rgba(26, 20, 16, 0.04);
border-color: rgba(26, 20, 16, 0.08);
color: rgba(26, 20, 16, 0.55);
}
#page-cierre .cc3-hero-stat {
position: relative;
padding-left: 14px;
}
#page-cierre .cc3-hero-stat::before {
content: "";
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 1px;
background: rgba(26, 20, 16, 0.10);
}
#page-cierre .cc3-hero-stat:first-child { padding-left: 0; }
#page-cierre .cc3-hero-stat:first-child::before { display: none; }
#page-cierre .cc3-action {
position: relative;
background: #1A1410;
color: #F5EFE6;
border: 1px solid #1A1410;
border-radius: var(--radius-lg);
padding: 24px 26px 22px;
box-shadow:
0 1px 2px rgba(26, 20, 16, 0.10),
0 8px 24px rgba(26, 20, 16, 0.10);
overflow: hidden;
isolation: isolate;
}
#page-cierre .cc3-action::before {
content: "";
position: absolute;
top: -40%;
right: -20%;
width: 60%;
height: 80%;
background: radial-gradient(ellipse, rgba(232,102,58, 0.18) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
#page-cierre .cc3-action > * { position: relative; z-index: 1; }
#page-cierre .cc3-action-sub {
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
color: rgba(245, 239, 230, 0.55);
line-height: 1.5;
margin: 0 0 18px 0;
}
#page-cierre .cc3-action-sub strong {
color: #F5EFE6;
font-weight: 600;
}
#page-cierre .cc3-action-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 18px;
background: #F5EFE6;
color: #1A1410;
border: 1px solid #F5EFE6;
border-radius: 11px;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
cursor: pointer;
box-shadow:
0 1px 2px rgba(26, 20, 16, 0.20),
0 0 0 0 rgba(245, 239, 230, 0);
transition:
background 0.16s ease,
box-shadow 0.20s ease,
transform 0.14s ease;
}
#page-cierre .cc3-action-cta:hover {
background: #FFFFFF;
box-shadow:
0 4px 14px rgba(26, 20, 16, 0.35),
0 0 0 4px rgba(245, 239, 230, 0.08);
transform: translateY(-1px);
}
#page-cierre .cc3-action-cta:hover .cc3-action-cta-arrow { transform: translateX(3px); }
#page-cierre .cc3-action-cta:active { transform: scale(0.98); }
#page-cierre .cc3-action-cta:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
#page-cierre .cc3-action-foot {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(245, 239, 230, 0.08);
}
#page-cierre .cc3-action-foot-meta {
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 12.5px;
font-weight: 500;
letter-spacing: -0.005em;
color: rgba(245, 239, 230, 0.75);
text-transform: capitalize;
font-variant-numeric: tabular-nums;
}
#page-cierre .cc3-action-foot[hidden] { display: none; }
#page-cierre .cc3-anatomy-card {
background: #FFFFFF;
border: 1px solid rgba(26, 20, 16, 0.07);
border-radius: 18px;
box-shadow: 0 1px 2px rgba(26, 20, 16, 0.02);
margin-bottom: 16px;
overflow: hidden;
transition: border-color 0.16s ease, box-shadow 0.18s ease;
}
#page-cierre .cc3-anatomy-row { display: grid; gap: 16px; margin-bottom: 16px; }
#page-cierre .cc3-anatomy-row-2col .cc3-anatomy-card { margin-bottom: 0; }
#page-cierre .cc3-anatomy-head { padding: 24px 28px 18px; border-bottom: 1px solid rgba(26, 20, 16, 0.06); }
#page-cierre .cc3-anatomy-head-tight { padding: 20px 24px 14px; }
#page-cierre .cc3-anatomy-head-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
}
#page-cierre .cc3-anatomy-eyebrow {
font-family: var(--mono, "Inter", "IBM Plex Mono", monospace);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
color: rgba(26, 20, 16, 0.42);
margin-bottom: 8px;
}
#page-cierre .cc3-anatomy-title {
font-family: var(--serif);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.018em;
color: #1A1410;
margin: 0 0 4px 0;
line-height: 1.18;
}
#page-cierre .cc3-anatomy-title-sm {
font-family: var(--serif);
font-size: 17px;
font-weight: 600;
letter-spacing: -0.012em;
color: #1A1410;
margin: 0;
line-height: 1.2;
}
#page-cierre .cc3-anatomy-sub {
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 13px;
font-weight: 400;
color: rgba(26, 20, 16, 0.55);
margin: 0;
letter-spacing: -0.005em;
}
#page-cierre .cc3-anatomy-sub-sm {
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 12px;
font-weight: 400;
color: rgba(26, 20, 16, 0.55);
margin: 4px 0 0 0;
letter-spacing: -0.005em;
}
#page-cierre .cc3-sub-eyebrow {
font-family: var(--mono, "Inter", monospace);
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(26, 20, 16, 0.42);
margin-bottom: 14px;
}
#page-cierre .cc3-sub-eyebrow-spaced { margin-top: 22px; }
#page-cierre .cc3-anatomy-empty {
padding: 32px 20px;
text-align: center;
font-family: var(--serif);
font-style: italic;
font-size: 14px;
font-weight: 400;
color: rgba(26, 20, 16, 0.42);
}
#page-cierre .cc3-arqueo-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 0;
}
#page-cierre .cc3-arqueo-grid > section { padding: 22px 28px 26px; }
#page-cierre .cc3-medios-body {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
#page-cierre .cc3-donut-wrap {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
#page-cierre .cc3-medios-list {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
min-width: 160px;
display: flex;
flex-direction: column;
}
#page-cierre .cc3-medios-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid rgba(26, 20, 16, 0.06);
}
#page-cierre .cc3-medios-item:last-child { border-bottom: none; }
#page-cierre .cc3-medios-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--cc-dot-color, #1A1410);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-dot-color, #1A1410) 14%, transparent);
flex-shrink: 0;
}
#page-cierre .cc3-medios-name {
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 13px;
font-weight: 500;
color: rgba(26, 20, 16, 0.75);
flex: 1;
letter-spacing: -0.005em;
}
#page-cierre .cc3-medios-amount {
font-family: var(--serif);
font-size: 15px;
font-weight: 600;
letter-spacing: -0.012em;
color: #1A1410;
font-variant-numeric: tabular-nums;
}
#page-cierre .cc3-arqueo-rows { display: flex; flex-direction: column; }
#page-cierre .cc3-arqueo-row,
#page-cierre .cc3-arqueo .cc-arqueo-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
padding: 11px 0;
border-bottom: 1px solid rgba(26, 20, 16, 0.05);
margin-top: 0 !important;
border-top: none !important;
}
#page-cierre .cc3-arqueo-rows > *:last-child { border-bottom: none; }
#page-cierre .cc3-arqueo-label {
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 13px;
font-weight: 500 !important;
color: rgba(26, 20, 16, 0.65) !important;
letter-spacing: -0.005em;
}
#page-cierre .cc3-arqueo-val,
#page-cierre .cc3-arqueo .cc-arqueo-val {
font-family: var(--serif);
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.012em;
color: #1A1410;
font-variant-numeric: tabular-nums;
}
#page-cierre .cc3-arqueo-row-strong {
border-top: 1px solid rgba(26, 20, 16, 0.10) !important;
padding-top: 14px !important;
margin-top: 4px !important;
}
#page-cierre .cc3-arqueo-row-strong .cc3-arqueo-val { font-size: 16.5px; }
#page-cierre .cc3-arqueo-row-egresos .cc3-arqueo-label,
#page-cierre .cc3-arqueo-val-neg,
#page-cierre .cc3-arqueo .cc-egreso-val {
color: #C0392B !important;
font-weight: 600 !important;
}
#page-cierre .cc3-arqueo-row-diff {
border-top: 1px solid rgba(26, 20, 16, 0.10) !important;
padding-top: 14px !important;
margin-top: 4px !important;
}
#page-cierre .cc3-arqueo-row-diff .cc3-arqueo-label { color: #1A1410 !important; font-weight: 600 !important; }
#page-cierre .cc3-arqueo-row-diff .cc3-arqueo-val,
#page-cierre .cc3-arqueo-row-diff #cc-arq-dif {
font-size: 17px;
transition: color 0.18s ease;
}
#page-cierre .cc-dif-neutral { color: rgba(26, 20, 16, 0.42) !important; }
#page-cierre .cc-dif-positivo { color: #B47800 !important; }
#page-cierre .cc-dif-negativo { color: #C0392B !important; }
#page-cierre .cc3-arqueo-row-input { align-items: center; }
#page-cierre .cc3-arqueo-input-wrap {
position: relative;
display: flex;
align-items: center;
flex-shrink: 0;
}
#page-cierre .cc3-arqueo-input-prefix {
position: absolute;
left: 12px;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 13px;
font-weight: 500;
color: rgba(26, 20, 16, 0.42);
pointer-events: none;
}
#page-cierre .cc3-arqueo-input {
width: 160px;
padding: 9px 12px 9px 24px;
background: rgba(26, 20, 16, 0.025);
border: 1px solid rgba(26, 20, 16, 0.08);
border-radius: 10px;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
color: #1A1410;
text-align: right;
font-variant-numeric: tabular-nums;
transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.18s ease;
}
#page-cierre .cc3-arqueo-input:focus {
outline: none;
border-color: rgba(232,102,58, 0.45);
background: #FFFFFF;
box-shadow: 0 0 0 3px rgba(232,102,58, 0.10);
}
#page-cierre .cc3-arqueo-input-text {
padding-left: 12px;
text-align: left;
width: auto;
flex: 1;
}
#page-cierre .cc3-arq-retiros {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(26, 20, 16, 0.08);
}
#page-cierre .cc3-arq-retiros-form {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 8px;
}
#page-cierre .cc3-arq-retiros-form .cc-retiro-row {
display: flex;
gap: 8px;
align-items: center;
}
#page-cierre .cc3-arq-retiros-form .cc-retiro-btns {
display: flex;
gap: 8px;
justify-content: flex-end;
}
#page-cierre .cc3-retiro-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 10px 14px;
background: transparent;
border: 1px dashed rgba(26, 20, 16, 0.18);
border-radius: 10px;
color: rgba(26, 20, 16, 0.65);
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 12.5px;
font-weight: 600;
letter-spacing: -0.005em;
cursor: pointer;
transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
#page-cierre .cc3-retiro-toggle-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
#page-cierre .cc3-retiro-toggle-btn:hover {
background: rgba(26, 20, 16, 0.04);
border-color: rgba(26, 20, 16, 0.32);
border-style: solid;
color: #1A1410;
}
#page-cierre .cc3-btn-ghost {
padding: 8px 14px;
background: transparent;
border: 1px solid rgba(26, 20, 16, 0.10);
border-radius: 8px;
color: rgba(26, 20, 16, 0.65);
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 12px;
font-weight: 600;
letter-spacing: -0.005em;
cursor: pointer;
transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
#page-cierre .cc3-btn-ghost:hover {
background: rgba(26, 20, 16, 0.04);
border-color: rgba(26, 20, 16, 0.18);
color: #1A1410;
}
#page-cierre .cc3-btn-prime {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 14px;
background: #1A1410;
color: #F5EFE6;
border: 1px solid #1A1410;
border-radius: 8px;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 12px;
font-weight: 600;
letter-spacing: -0.005em;
cursor: pointer;
box-shadow: 0 1px 2px rgba(26, 20, 16, 0.10);
transition: background 0.14s ease, transform 0.14s ease, box-shadow 0.18s ease;
}
#page-cierre .cc3-btn-prime:hover {
background: #2A1F18;
box-shadow: 0 4px 14px rgba(26, 20, 16, 0.22);
transform: translateY(-1px);
}
#page-cierre .cc3-btn-prime:active { transform: scale(0.98); }
#page-cierre .cc3-anatomy-controls {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
#page-cierre .cc3-anatomy-count {
font-family: var(--mono, "Inter", monospace);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.10em;
color: rgba(26, 20, 16, 0.42);
text-transform: uppercase;
white-space: nowrap;
}
#page-cierre .cc3-pago-filtro {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 11px;
background: transparent;
border: none;
border-radius: 6px;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 11.5px;
font-weight: 600;
letter-spacing: -0.005em;
color: rgba(26, 20, 16, 0.55);
cursor: pointer;
transition: background 0.14s ease, color 0.14s ease, box-shadow 0.18s ease;
}
#page-cierre .cc3-pago-filtro svg { width: 13px; height: 13px; }
#page-cierre .cc3-ventas-body > [class*="-row"]:hover { background: rgba(26, 20, 16, 0.02); }
#page-cierre .cc3-ventas-foot {
padding: 14px 24px;
border-top: 1px solid rgba(26, 20, 16, 0.06);
background: rgba(26, 20, 16, 0.015);
}
#page-cierre .cc3-ranking-body {
padding: 12px 24px 20px;
display: flex;
flex-direction: column;
}
#page-cierre .cc3-ranking-body > .cc2-empty {
padding: 24px 0;
text-align: center;
font-family: var(--serif);
font-style: italic;
font-size: 13px;
color: rgba(26, 20, 16, 0.42);
}
#page-cierre .cc3-anatomy-nota { display: flex; flex-direction: column; }
#page-cierre .cc3-nota-input {
width: calc(100% - 48px);
margin: 4px 24px 24px;
padding: 14px 16px;
background: rgba(26, 20, 16, 0.025);
border: 1px solid rgba(26, 20, 16, 0.08);
border-radius: 12px;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 13.5px;
font-weight: 400;
letter-spacing: -0.005em;
color: #1A1410;
line-height: 1.55;
resize: vertical;
min-height: 92px;
transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.18s ease;
}
#page-cierre .cc3-nota-input:focus {
outline: none;
border-color: rgba(232,102,58, 0.45);
background: #FFFFFF;
box-shadow: 0 0 0 3px rgba(232,102,58, 0.10);
}
#page-cierre .cc3-context-comp { margin-bottom: 16px; }
#page-cierre .cc3-comp-stats { display: flex; gap: 14px; align-items: flex-start; }
#page-cierre .cc3-comp-stat {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 120px;
padding: 12px 16px;
background: rgba(26, 20, 16, 0.025);
border: 1px solid rgba(26, 20, 16, 0.06);
border-radius: 11px;
}
#page-cierre .cc3-comp-stat-label {
font-family: var(--mono, "Inter", monospace);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(26, 20, 16, 0.42);
}
#page-cierre .cc3-comp-stat-val {
font-family: var(--serif);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.014em;
color: #1A1410;
font-variant-numeric: tabular-nums;
}
#page-cierre .cc3-comp-stat-val[data-state="positive"] { color: #1F7A42; }
#page-cierre .cc3-comp-stat-val[data-state="negative"] { color: #B33323; }
#page-cierre .cc3-comp-stat-val[data-state="neutral"] { color: rgba(26, 20, 16, 0.42); }
#page-cierre .cc3-comp-body { position: relative; padding: 22px 24px 26px; }
#page-cierre .cc3-comp-chart { width: 100%; display: flex; justify-content: center; }
#page-cierre .cc3-comp-svg { width: 100%; max-width: 880px; height: auto; overflow: visible; }
#page-cierre .cc3-comp-empty {
padding: 60px 0;
text-align: center;
font-family: var(--serif);
font-style: italic;
font-size: 14px;
color: rgba(26, 20, 16, 0.42);
}
#page-cierre .cc3-comp-col { cursor: pointer; transition: opacity 0.18s ease; }
#page-cierre .cc3-comp-col:hover .cc3-comp-rect { opacity: 0.85; }
#page-cierre .cc3-comp-tooltip {
position: absolute;
z-index: 20;
pointer-events: none;
transform: translate(-50%, -100%);
background: #1A1410;
color: #F5EFE6;
border: 1px solid rgba(245, 239, 230, 0.10);
border-radius: 10px;
padding: 10px 14px;
min-width: 160px;
box-shadow: 0 12px 32px rgba(26, 20, 16, 0.30), 0 4px 10px rgba(26, 20, 16, 0.18);
font-family: var(--sans, "Inter", system-ui, sans-serif);
animation: cc3CompTooltipIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
#page-cierre .cc3-comp-tooltip::after {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
margin-left: -5px;
width: 10px;
height: 10px;
background: #1A1410;
transform: rotate(45deg);
border-right: 1px solid rgba(245, 239, 230, 0.10);
border-bottom: 1px solid rgba(245, 239, 230, 0.10);
}
#page-cierre .cc3-comp-tooltip-day {
font-family: var(--mono, "Inter", monospace);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245, 239, 230, 0.55);
margin-bottom: 4px;
}
#page-cierre .cc3-comp-tooltip-monto {
font-family: var(--serif);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.018em;
color: #F5EFE6;
font-variant-numeric: tabular-nums;
margin-bottom: 2px;
}
#page-cierre .cc3-comp-tooltip-meta {
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 11.5px;
font-weight: 500;
color: rgba(245, 239, 230, 0.70);
}
#page-cierre .cc3-context-hist { margin-bottom: 16px; }
#page-cierre .cc3-hist-controls {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
#page-cierre .cc3-hist-search {
position: relative;
display: flex;
align-items: center;
width: 260px;
max-width: 100%;
}
#page-cierre .cc3-hist-search svg {
position: absolute;
left: 12px;
width: 14px;
height: 14px;
color: rgba(26, 20, 16, 0.42);
pointer-events: none;
}
#page-cierre .cc3-hist-search input {
width: 100%;
padding: 9px 12px 9px 34px;
background: rgba(26, 20, 16, 0.025);
border: 1px solid rgba(26, 20, 16, 0.08);
border-radius: 10px;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 12.5px;
font-weight: 500;
letter-spacing: -0.005em;
color: #1A1410;
transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.18s ease;
}
#page-cierre .cc3-hist-search input:focus {
outline: none;
border-color: rgba(232,102,58, 0.45);
background: #FFFFFF;
box-shadow: 0 0 0 3px rgba(232,102,58, 0.10);
}
#page-cierre .cc3-hist-filter {
padding: 6px 12px;
background: transparent;
border: none;
border-radius: 6px;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 11.5px;
font-weight: 600;
letter-spacing: -0.005em;
color: rgba(26, 20, 16, 0.55);
cursor: pointer;
transition: background 0.14s ease, color 0.14s ease, box-shadow 0.18s ease;
}
#page-cierre .cc3-hist-empty {
padding: 48px 24px;
text-align: center;
font-family: var(--serif);
font-style: italic;
font-size: 14px;
color: rgba(26, 20, 16, 0.42);
}
#page-cierre .cc3-hist-row {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 18px;
padding: 14px 24px;
border-bottom: 1px solid rgba(26, 20, 16, 0.04);
cursor: pointer;
transition: background 0.14s ease;
}
#page-cierre .cc3-hist-row:last-child { border-bottom: none; }
#page-cierre .cc3-hist-row:hover { background: rgba(26, 20, 16, 0.025); }
#page-cierre .cc3-hist-date-pill {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 56px;
height: 60px;
flex-shrink: 0;
background: rgba(26, 20, 16, 0.04);
border: 1px solid rgba(26, 20, 16, 0.06);
border-radius: 11px;
padding: 6px 4px;
transition: background 0.14s ease, border-color 0.14s ease;
}
#page-cierre .cc3-hist-row:hover .cc3-hist-date-pill {
background: #FFFFFF;
border-color: rgba(26, 20, 16, 0.12);
}
#page-cierre .cc3-hist-date-day {
font-family: var(--serif);
font-size: 19px;
font-weight: 600;
letter-spacing: -0.020em;
color: #1A1410;
line-height: 1;
}
#page-cierre .cc3-hist-date-mon {
font-family: var(--mono, "Inter", monospace);
font-size: 8px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(26, 20, 16, 0.55);
margin-top: 1px;
}
#page-cierre .cc3-hist-date-week {
font-family: var(--mono, "Inter", monospace);
font-size: 7.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(26, 20, 16, 0.32);
margin-top: 4px;
}
#page-cierre .cc3-hist-info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
#page-cierre .cc3-hist-title {
font-family: var(--serif);
font-size: 15.5px;
font-weight: 600;
letter-spacing: -0.012em;
color: #1A1410;
line-height: 1.25;
text-transform: capitalize;
}
#page-cierre .cc3-hist-year {
color: rgba(26, 20, 16, 0.42);
font-weight: 400;
}
#page-cierre .cc3-hist-meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 12px;
font-weight: 500;
color: rgba(26, 20, 16, 0.55);
letter-spacing: -0.005em;
}
#page-cierre .cc3-hist-meta strong { color: #1A1410; font-weight: 600; }
#page-cierre .cc3-hist-meta-item { white-space: nowrap; }
#page-cierre .cc3-hist-sep { color: rgba(26, 20, 16, 0.24); }
#page-cierre .cc3-hist-meta-tag {
display: inline-flex;
align-items: center;
font-family: var(--mono, "Inter", monospace);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(232,102,58, 0.85);
}
#page-cierre .cc3-hist-medios {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 2px;
}
#page-cierre .cc3-hist-medio {
display: inline-flex;
align-items: center;
gap: 6px;
}
#page-cierre .cc3-hist-medio-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--cc-dot-color, #1A1410);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc-dot-color, #1A1410) 14%, transparent);
flex-shrink: 0;
}
#page-cierre .cc3-hist-medio-amt {
font-family: var(--mono, "Inter", monospace);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
color: rgba(26, 20, 16, 0.65);
font-variant-numeric: tabular-nums;
}
#page-cierre .cc3-hist-amounts {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
}
#page-cierre .cc3-hist-total {
font-family: var(--serif);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.018em;
color: #1A1410;
font-variant-numeric: tabular-nums;
}
#page-cierre .cc3-hist-diff {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: 999px;
font-family: var(--mono, "Inter", monospace);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
}
#page-cierre .cc3-hist-actions {
display: flex;
gap: 4px;
align-items: center;
flex-shrink: 0;
opacity: 0;
transform: translateX(6px);
transition: opacity 0.18s ease, transform 0.18s ease;
}
#page-cierre .cc3-hist-row:hover .cc3-hist-actions,
#page-cierre .cc3-hist-row:focus-within .cc3-hist-actions {
opacity: 1;
transform: translateX(0);
}
#page-cierre .cc3-hist-actions:has(.has-obs) {
opacity: 1;
transform: translateX(0);
}
#page-cierre .cc3-hist-act {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid rgba(26, 20, 16, 0.10);
border-radius: 8px;
color: rgba(26, 20, 16, 0.55);
cursor: pointer;
padding: 0;
transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.12s ease;
}
#page-cierre .cc3-hist-act svg { width: 13px; height: 13px; }
#page-cierre .cc3-hist-act:hover { background: #FFFFFF; transform: translateY(-1px); }
#page-cierre .cc3-hist-act-edit:hover { border-color: rgba(26, 20, 16, 0.32); color: #1A1410; }
#page-cierre .cc3-hist-act-del:hover { border-color: #C0392B; color: #C0392B; }
#page-cierre .cc3-hist-act-obs:hover { border-color: rgba(232,102,58, 0.55); color: #E8663A; }
#page-cierre .cc3-hist-act-obs.has-obs {
border-color: rgba(232,102,58, 0.45);
color: #E8663A;
background: rgba(232,102,58, 0.06);
}
#page-cierre .cc3-hist-obs-editor {
margin: 0 24px 12px 92px;
padding: 14px 16px;
background: rgba(26, 20, 16, 0.025);
border: 1px solid rgba(26, 20, 16, 0.08);
border-radius: 11px;
}
#page-cierre .cc3-hist-obs-editor textarea {
width: 100%;
min-height: 64px;
padding: 10px 12px;
background: #FFFFFF;
border: 1px solid rgba(26, 20, 16, 0.08);
border-radius: 8px;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 13px;
color: #1A1410;
resize: vertical;
margin-bottom: 10px;
}
#page-cierre .cc3-hist-obs-editor textarea:focus {
outline: none;
border-color: rgba(232,102,58, 0.45);
box-shadow: 0 0 0 3px rgba(232,102,58, 0.10);
}
#page-cierre.section-core #cc-total-dia,
#page-cierre.section-core #cc-ticket-prom,
#page-cierre.section-core #cc-desc-dia,
#page-cierre.section-core #cc-clientes-dia,
#page-cierre.section-core #cc-total-ambos{
color: #1A1410;
position: relative;
z-index: 1;
text-shadow: none;
}
#page-cierre .cc3-hero-total,
#page-cierre .cc3-anatomy-ventas {
display: flex;
flex-direction: column;
height: 560px;
}
#page-cierre .cc3-anatomy-ventas > .cc3-anatomy-head {
flex-shrink: 0;
}
#page-cierre .cc3-ventas-scroll {
flex: 1;
overflow-y: auto;
min-height: 0;
padding: 6px 0 8px;
}
#page-cierre .cc3-ventas-body{
display: flex;
flex-direction: column;
padding: 0;
}
#page-cierre .cc3-ventas-body > .cc2-row,
#page-cierre .cc3-ventas-body > .cc2-row-wrap > .cc2-row {
padding: 14px 24px;
border-radius: 0;
border-bottom: 1px solid rgba(26, 20, 16, 0.05) !important;
}
#page-cierre .cc3-ventas-body > .cc2-row-wrap > .cc2-row-detail {
padding: 14px 24px 16px 76px;
background: rgba(26, 20, 16, 0.02) !important;
border-bottom: 1px solid rgba(26, 20, 16, 0.05) !important;
border-radius: 0;
margin: 0;
}
#page-cierre .cc3-ventas-body > .cc2-row-wrap:last-child > .cc2-row-detail,
#page-cierre .cc3-ventas-body > .cc2-row-wrap:last-child > .cc2-row,
#page-cierre .cc3-ventas-body > .cc2-row:last-child {
border-bottom: none !important;
}
#page-cierre .cc3-ventas-body .cc2-row-clickable:hover {
background: rgba(26, 20, 16, 0.025) !important;
border-radius: 0;
}
#page-cierre .cc3-ventas-body .cc2-row-clickable.is-open {
background: rgba(26, 20, 16, 0.025) !important;
border-radius: 0;
}
#page-cierre .cc3-ventas-body > .cc2-empty-state,
#page-cierre .cc3-ventas-body > .cc3-anatomy-empty {
padding: 64px 24px;
text-align: center;
font-family: var(--serif);
font-style: italic;
font-size: 14px;
color: rgba(26, 20, 16, 0.42);
}
#page-cierre .cc3-ventas-foot-fixed {
flex-shrink: 0;
padding: 16px 24px;
background: #FFFFFF;
border-top: 1px solid rgba(26, 20, 16, 0.08);
box-shadow: 0 -1px 0 rgba(26, 20, 16, 0.02);
border-radius: 0 0 18px 18px;
}
#page-cierre .cc3-ventas-foot-fixed .cc2-list-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
border-top: none !important;
margin: 0;
}
#page-cierre .cc3-ventas-foot-fixed .cc2-list-foot-label {
font-family: var(--mono, "Inter", monospace) !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(26, 20, 16, 0.42) !important;
}
#page-cierre .cc3-ventas-foot-fixed .cc2-list-foot-total {
font-family: var(--serif) !important;
font-size: 19px !important;
font-weight: 600 !important;
letter-spacing: -0.018em;
color: #1A1410 !important;
font-variant-numeric: tabular-nums;
}
#page-cierre .cc3-ventas-foot-fixed:empty {
display: none;
}
#page-cierre .cc3-anatomy-row-2col{
grid-template-columns: 1.15fr 1fr;
align-items: stretch;
}
#page-cierre .cc3-anatomy-row-2col .cc3-anatomy-ranking {
display: flex;
flex-direction: column;
}
#page-cierre .cc3-anatomy-row-2col .cc3-anatomy-ranking > .cc3-anatomy-head {
flex-shrink: 0;
}
#page-cierre .cc3-anatomy-row-2col .cc3-anatomy-ranking > .cc3-ranking-body {
flex: 1;
overflow-y: auto;
min-height: 0;
}
/* ═══ 23. VENTA RAPIDA ═══ */
.vr-right {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: #ffffff;
}
.vr-search-block {
padding: 12px 16px;
border-bottom: 1px solid rgba(26, 20, 16, 0.08);
background: #ffffff;
}
.vr-scan-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
}
.vr-scan-indicator {
width: 28px;
height: 28px;
border-radius: 8px;
border: 1px solid rgba(26, 20, 16, 0.10);
background: #fdfcfb;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
.vr-scan-hint {
font-size: 10px;
color: var(--ink-70);
font-family: var(--mono);
letter-spacing: 0.03em;
}
.vr-products-wrap {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 12px 16px;
}
.vr-cart-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.vr-cart-title {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--char);
}
.vr-items-count {
font-size: 12px;
color: var(--accent-warm);
font-weight: 700;
}
.vr-carrito {
border: 1px solid rgba(26, 20, 16, 0.08);
border-radius: 14px;
overflow: hidden;
margin-bottom: 0;
background: #ffffff;
}
.vr-carrito-empty {
padding: 24px;
text-align: center;
font-size: 12px;
color: var(--ink-70);
}
.vr-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto auto;
gap: 10px;
align-items: center;
padding: 10px 12px;
border-bottom: 1px solid rgba(26, 20, 16, 0.07);
transition: background 0.12s;
}
.vr-item:last-child {
border-bottom: none;
}
.vr-item:hover {
background: rgba(232,102,58, 0.05);
}
.vr-item-name {
font-size: 14px;
font-weight: 700;
color: var(--char);
letter-spacing: -0.01em;
}
.vr-item-tag {
font-size: 11px;
color: var(--ink-82);
margin-top: 3px;
font-weight: 500;
}
.vr-qty-wrap {
display: flex;
align-items: center;
gap: 6px;
}
.vr-qty-input {
width: 70px;
background: #fdfcfb;
border: 1px solid rgba(26, 20, 16, 0.12);
color: var(--char);
padding: 5px 7px;
font-size: 13px;
font-weight: 600;
outline: none;
border-radius: 10px;
text-align: right;
transition: border-color 0.15s;
}
.vr-qty-input:focus {
border-color: rgba(232,102,58, 0.50);
background: #fff;
}
.vr-qty-unit {
font-size: 12px;
color: var(--ink-82);
font-weight: 500;
}
.vr-uds-input {
width: 48px !important;
}
.vr-qty-sep {
font-size: 11px;
color: var(--border-warm);
font-weight: 400;
user-select: none;
}
.vr-item-subtotal {
font-family: var(--mono);
font-size: 15px;
font-weight: 700;
color: var(--char);
white-space: nowrap;
min-width: 76px;
text-align: right;
letter-spacing: -0.02em;
}
.vr-item-del {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
color: var(--ink-70);
cursor: pointer;
font-size: 15px;
border-radius: 999px;
transition: color 0.15s, border-color 0.15s, background 0.15s;
flex-shrink: 0;
}
.vr-item-del:hover {
color: var(--red);
border-color: rgba(224,82,82, 0.3);
background: rgba(224,82,82, 0.08);
}
.vr-total-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px;
background: var(--accent-warm);
border-top: none;
border-bottom: none;
}
.vr-total-label {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.80);
font-weight: 700;
font-family: var(--mono);
margin-bottom: 4px;
}
.vr-total-num {
font-family: var(--mono);
font-size: 36px;
font-weight: 500;
color: #fff;
letter-spacing: -0.03em;
line-height: 1;
display: inline-block;
}
.vr-price-bump {
animation: vrPriceBump .22s cubic-bezier(.25,.46,.45,.94);
}
.vr-total-pts {
font-family: var(--mono);
font-size: 11px;
color: rgba(255, 255, 255, 0.72);
margin-top: 6px;
font-weight: 500;
}
.vr-panel {
padding: 12px 16px;
border-top: 1px solid rgba(26, 20, 16, 0.07);
background: #ffffff;
flex-shrink: 0;
}
.vr-panel-title {
font-size: 10px;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ink-70);
font-weight: 600;
font-family: var(--mono);
margin-bottom: 9px;
}
.vr-panel-sub {
font-weight: 400;
opacity: 0.7;
font-family: var(--sans);
letter-spacing: 0;
text-transform: none;
font-size: 10px;
}
.vr-cli-select {
width: 100%;
background: #fdfcfb;
border: 1px solid rgba(26, 20, 16, 0.12);
color: var(--char);
font-family: var(--sans);
font-size: 12px;
padding: 6px 8px;
outline: none;
border-radius: 10px;
transition: border-color 0.15s;
}
.vr-cli-select:focus {
border-color: rgba(232,102,58, 0.50);
}
.vr-inline {
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
}
.vr-caja-toggle input {
accent-color: var(--green);
}
.vr-actions {
padding: 12px 16px;
border-top: 1px solid rgba(26, 20, 16, 0.08);
display: flex;
gap: 8px;
flex-shrink: 0;
background: #ffffff;
}
.vr-actions .btn-prime {
background: var(--accent-warm);
border: 1px solid var(--accent-warm);
border-left: 1px solid var(--accent-warm);
border-radius: 999px;
box-shadow: 0 2px 10px rgba(232,102,58, 0.30);
color: #ffffff;
letter-spacing: 0.18em;
}
.vr-actions .btn-prime::before { display: none; }
.vr-actions .btn-prime:hover {
filter: brightness(1.08);
background: var(--accent-warm);
border-color: var(--accent-warm);
border-left-color: var(--accent-warm);
box-shadow: 0 4px 16px rgba(232,102,58, 0.38);
}
.vr-actions .btn-prime:disabled {
opacity: 0.45;
filter: none;
box-shadow: none;
}
.vr-actions .btn-ghost {
background: #ffffff;
border: 1px solid rgba(26, 20, 16, 0.12);
border-radius: 999px;
box-shadow: none;
color: var(--ink-82);
}
.vr-actions .btn-ghost:hover {
background: #fdfcfb;
border-color: rgba(26, 20, 16, 0.20);
color: var(--char);
}
.vr-desc-row {
display: flex;
gap: 8px;
align-items: center;
}
.vr-desc-seg {
display: flex;
gap: 6px;
align-items: center;
flex-shrink: 0;
}
.vr-desc-btn {
flex-shrink: 0;
background: #fdfcfb;
border: 1px solid rgba(26, 20, 16, 0.11);
border-radius: 999px;
padding: 7px 14px;
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
color: var(--ink-82);
cursor: pointer;
transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
white-space: nowrap;
}
.vr-desc-btn:hover {
border-color: rgba(232,102,58, 0.30);
color: var(--char);
background: rgba(232,102,58, 0.05);
}
.vr-desc-btn.active {
background: var(--accent-warm);
border-color: var(--accent-warm);
color: #ffffff;
font-weight: 700;
box-shadow: 0 2px 8px rgba(232,102,58, 0.28);
}
.vr-pago-btn svg {
opacity: .50;
flex-shrink: 0;
transition: opacity .2s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.vr-pago-btn:hover svg { opacity: .8; transform: translateY(-2px) scale(1.12); }
.vr-pago-btn:active svg { transform: translateY(0) scale(.9); transition-duration: .08s; }
/* ── Animaciones por ícono en estado activo ── */
@keyframes vrIconEfectivo {
0% { transform: scale(1) rotate(0deg); }
25% { transform: scale(1.15) rotate(-4deg); }
50% { transform: scale(1.08) rotate(2deg); }
75% { transform: scale(1.12) rotate(-1deg); }
100% { transform: scale(1.1) rotate(0deg); }
}
@keyframes vrIconDebito {
0% { transform: scale(1) translateY(0); }
30% { transform: scale(1.12) translateY(-3px); }
60% { transform: scale(1.08) translateY(-1px); }
100% { transform: scale(1.1) translateY(0); }
}
@keyframes vrIconTransferencia {
0% { transform: scale(1) translateX(0); }
25% { transform: scale(1.1) translateX(2px); }
50% { transform: scale(1.1) translateX(-2px); }
75% { transform: scale(1.1) translateX(1px); }
100% { transform: scale(1.1) translateX(0); }
}
@keyframes vrIconCtaCte {
0% { transform: scale(1); }
40% { transform: scale(1.15); }
100% { transform: scale(1.1); }
}
/* Float suave continuo en activo */
@keyframes vrIconFloat {
0%, 100% { transform: translateY(0) scale(1.1); }
50% { transform: translateY(-1.5px) scale(1.1); }
}
.vr-pago-btn.active svg {
opacity: 1;
filter: drop-shadow(0 1px 3px rgba(26,20,16,.12));
}
.vr-pago-btn.active[data-medio="efectivo"] svg {
animation: vrIconEfectivo .45s cubic-bezier(.16,1,.3,1) both, vrIconFloat 2.5s ease-in-out 0.45s infinite;
}
.vr-pago-btn.active[data-medio="debito"] svg {
animation: vrIconDebito .4s cubic-bezier(.16,1,.3,1) both, vrIconFloat 2.5s ease-in-out 0.4s infinite;
}
.vr-pago-btn.active[data-medio="transferencia"] svg {
animation: vrIconTransferencia .5s cubic-bezier(.16,1,.3,1) both, vrIconFloat 2.5s ease-in-out 0.5s infinite;
}
.vr-pago-btn.active.vr-pago-ctacte svg {
animation: vrIconCtaCte .4s cubic-bezier(.16,1,.3,1) both, vrIconFloat 2.5s ease-in-out 0.4s infinite;
}
/* ── Per-method active colors ── */
.vr-pago-btn.active[data-medio="efectivo"] {
background: rgba(34, 110, 65, 0.06);
border-color: rgba(34, 110, 65, 0.50);
color: #1a6636;
box-shadow: 0 0 0 3px rgba(34, 110, 65, 0.08), 0 2px 8px rgba(34, 110, 65, 0.12);
}
.vr-pago-btn.active[data-medio="efectivo"]::before {
opacity: 1;
background: radial-gradient(ellipse at 50% 0%, rgba(34,110,65,.08) 0%, transparent 70%);
}
.vr-pago-btn.active[data-medio="efectivo"] svg { opacity: 1; stroke: #1a6636; }
.vr-pago-btn.active[data-medio="debito"] {
background: rgba(30, 80, 152, 0.06);
border-color: rgba(30, 80, 152, 0.50);
color: #1e4e96;
box-shadow: 0 0 0 3px rgba(30, 80, 152, 0.08), 0 2px 8px rgba(30, 80, 152, 0.12);
}
.vr-pago-btn.active[data-medio="debito"]::before {
opacity: 1;
background: radial-gradient(ellipse at 50% 0%, rgba(30,80,152,.08) 0%, transparent 70%);
}
.vr-pago-btn.active[data-medio="debito"] svg { opacity: 1; stroke: #1e4e96; }
.vr-pago-btn.active[data-medio="transferencia"] {
background: rgba(140, 80, 10, 0.06);
border-color: rgba(140, 80, 10, 0.50);
color: #8c500a;
box-shadow: 0 0 0 3px rgba(140, 80, 10, 0.08), 0 2px 8px rgba(140, 80, 10, 0.12);
}
.vr-pago-btn.active[data-medio="transferencia"]::before {
opacity: 1;
background: radial-gradient(ellipse at 50% 0%, rgba(140,80,10,.08) 0%, transparent 70%);
}
.vr-pago-btn.active[data-medio="transferencia"] svg { opacity: 1; stroke: #8c500a; }
.vr-overlay {
position: fixed;
inset: 0;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(26,20,16,.45);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
overflow: hidden;
animation: vrOverlayIn .35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes vrOverlayIn {
from { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
to { opacity: 1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}
/* ── VR Close animation ── */
.vr-overlay.vr-closing {
animation: vrOverlayOut .28s cubic-bezier(.4,0,.6,1) forwards;
}
.vr-overlay.vr-closing > .vr-shell {
animation: vrShellOut .26s cubic-bezier(.4,0,.6,1) forwards !important;
}
@keyframes vrOverlayOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes vrShellOut {
from { opacity: 1; transform: scale(1) translateY(0); }
to { opacity: 0; transform: scale(.97) translateY(10px); }
}
.vr-overlay > .vr-shell {
width: calc(100% - 60px);
max-width: 1360px;
height: calc(100% - 48px);
max-height: 880px;
background: #fdfcfb;
border-radius: var(--radius-xl);
box-shadow: 0 8px 40px rgba(26,20,16,.18), 0 0 0 1px rgba(26,20,16,.06);
overflow: hidden;
animation: vrShellIn .4s cubic-bezier(.16,1,.3,1) .05s both;
}
@keyframes vrShellIn {
from { opacity: 0; transform: scale(.94) translateY(18px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* ═══════════════════════════════════════════════════════
VR ANIMATION SYSTEM — Professional micro-interactions
═══════════════════════════════════════════════════════ */
/* ── Keyframes ── */
@keyframes vrFadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes vrFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes vrScaleIn {
from { opacity: 0; transform: scale(.92); }
to { opacity: 1; transform: scale(1); }
}
@keyframes vrSlideRight {
from { opacity: 0; transform: translateX(-12px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes vrSlideLeft {
from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes vrPopIn {
0% { opacity: 0; transform: scale(.8); }
60% { transform: scale(1.04); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes vrBadgePop {
0% { transform: scale(1); }
40% { transform: scale(1.25); }
100% { transform: scale(1); }
}
@keyframes vrShimmer {
from { background-position: -200% 0; }
to { background-position: 200% 0; }
}
@keyframes vrPulseGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(232,102,58,.0); }
50% { box-shadow: 0 0 0 6px rgba(232,102,58,.10); }
}
@keyframes vrCheckmark {
0% { stroke-dashoffset: 24; opacity: 0; }
50% { opacity: 1; }
100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes vrSubtotalFlash {
0% { color: #E8663A; }
100% { color: #1A1410; }
}
@keyframes vrRowRemove {
0% { opacity: 1; transform: translateX(0) scale(1); max-height: 80px; }
70% { opacity: 0; transform: translateX(16px) scale(.97); }
100% { opacity: 0; transform: translateX(16px) scale(.97); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; }
}
@keyframes vrCountUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── 1. Header entrance ── */
.vr-head {
animation: vrFadeIn .3s cubic-bezier(.16,1,.3,1) .12s both;
}
.vr-head-left {
animation: vrSlideRight .4s cubic-bezier(.16,1,.3,1) .18s both;
}
.vr-head-close {
animation: vrFadeIn .3s ease .3s both;
transition: background .15s ease, color .15s ease, transform .2s cubic-bezier(.16,1,.3,1) !important;
}
.vr-head-close:hover {
transform: rotate(90deg);
}
.vr-head-close:active {
transform: rotate(90deg) scale(.88);
}
/* ── 2. Column entrances (staggered left → right) ── */
.vr-col-productos {
animation: vrSlideRight .45s cubic-bezier(.16,1,.3,1) .15s both;
}
.vr-col-carrito {
animation: vrFadeUp .45s cubic-bezier(.16,1,.3,1) .22s both;
}
.vr-col-right {
animation: vrSlideLeft .45s cubic-bezier(.16,1,.3,1) .28s both;
}
/* ── 3. Search bar ── */
.vr-search-input {
transition: border-color .2s ease, background .2s ease, box-shadow .25s ease, transform .2s cubic-bezier(.16,1,.3,1) !important;
}
.vr-search-input:focus {
transform: scale(1.005);
}
/* ── 4. Category pills ── */
.vr-cat-pill {
transition: background .18s ease, color .18s ease, border-color .18s ease, transform .2s cubic-bezier(.16,1,.3,1), box-shadow .18s ease !important;
}
.vr-cat-pill:hover {
transform: translateY(-1px);
}
.vr-cat-pill:active {
transform: translateY(0) scale(.96);
}
.vr-cat-pill.active {
animation: vrPopIn .3s cubic-bezier(.16,1,.3,1);
}
/* ── 5. Product cards ── */
.vr-overlay .vr-prod-card {
transition: background .15s ease, transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease !important;
}
.vr-overlay .vr-prod-card:hover {
transform: translateX(3px) !important;
}
.vr-overlay .vr-prod-card:active {
transform: translateX(1px) scale(.985) !important;
transition-duration: .08s !important;
}
/* Product add button */
.vr-overlay .vr-prod-add {
transition: background .15s ease, color .15s ease, transform .22s cubic-bezier(.16,1,.3,1), box-shadow .2s ease !important;
}
.vr-overlay .vr-prod-add:hover {
transform: scale(1.15) !important;
box-shadow: 0 2px 8px rgba(232,102,58,.25) !important;
background: #E8663A !important;
color: #FFF !important;
}
.vr-overlay .vr-prod-add:active {
transform: scale(.92) !important;
transition-duration: .06s !important;
}
/* ── 6. Cart rows ── */
.vr-cart-row {
animation: vrFadeUp .35s cubic-bezier(.16,1,.3,1) both !important;
transition: background .15s ease, opacity .2s ease;
}
.vr-cart-row:hover {
background: rgba(26,20,16,.02);
}
/* Cart row removing */
.vr-cart-row.vr-removing {
animation: vrRowRemove .35s cubic-bezier(.4,0,.6,1) forwards !important;
pointer-events: none;
overflow: hidden;
}
/* Subtotal flash on change */
.vr-cart-subtotal.vr-updated {
animation: vrSubtotalFlash .6s ease both;
}
/* ── 7. Cart badge (item count) ── */
.vr-cart-badge {
transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.vr-cart-badge.vr-bumped {
animation: vrBadgePop .35s cubic-bezier(.16,1,.3,1);
}
/* ── 8. Stepper buttons ── */
.vr-stepper {
transition: border-color .18s ease, box-shadow .18s ease;
}
.vr-stepper:focus-within {
border-color: rgba(232,102,58,.35);
box-shadow: 0 0 0 3px rgba(232,102,58,.08);
}
.vr-stepper-btn {
transition: background .12s ease, color .12s ease, transform .15s cubic-bezier(.16,1,.3,1) !important;
}
.vr-stepper-btn:active {
transform: scale(.85);
transition-duration: .06s !important;
}
/* ── 9. Delete button ── */
.vr-cart-del {
transition: background .15s ease, color .15s ease, transform .2s cubic-bezier(.16,1,.3,1) !important;
}
.vr-cart-del:hover {
transform: scale(1.12);
}
.vr-cart-del:active {
transform: scale(.85);
transition-duration: .06s !important;
}
/* ── 10. Vaciar carrito button ── */
.vr-vaciar-btn {
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .2s cubic-bezier(.16,1,.3,1) !important;
}
.vr-vaciar-btn:hover {
transform: translateY(-1px);
}
.vr-vaciar-btn:active {
transform: translateY(0) scale(.96);
transition-duration: .06s !important;
}
/* ── 11. Right panel sections ── */
.vr-rpanel {
animation: vrFadeUp .4s cubic-bezier(.16,1,.3,1) both;
}
.vr-rpanel:nth-child(1) { animation-delay: .32s; }
.vr-rpanel:nth-child(2) { animation-delay: .38s; }
.vr-rpanel:nth-child(3) { animation-delay: .44s; }
.vr-rpanel:nth-child(4) { animation-delay: .50s; }
.vr-rpanel-title {
animation: vrSlideRight .35s cubic-bezier(.16,1,.3,1) both;
}
/* ── 12. Client card ── */
.vr-cli-card {
transition: border-color .18s ease, box-shadow .18s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
.vr-cli-card[style*="display: flex"],
.vr-cli-card[style*="display:flex"] {
animation: vrScaleIn .3s cubic-bezier(.16,1,.3,1) both;
}
.vr-cli-card:hover {
border-color: rgba(191,180,170,.50);
box-shadow: 0 2px 12px rgba(26,20,16,.06);
}
.vr-cli-avatar {
transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;
}
.vr-cli-card:hover .vr-cli-avatar {
transform: scale(1.06);
}
.vr-cli-desel {
transition: background .12s ease, color .12s ease, transform .2s cubic-bezier(.16,1,.3,1) !important;
border-radius: 50% !important;
}
.vr-cli-desel:hover {
transform: rotate(90deg) scale(1.1);
}
.vr-cli-desel:active {
transform: rotate(90deg) scale(.85);
transition-duration: .06s !important;
}
/* ── 13. Client search dropdown ── */
.vr-cli-dd-item {
transition: background .13s ease, transform .15s cubic-bezier(.16,1,.3,1), padding-left .15s ease;
}
.vr-cli-dd-item:hover {
padding-left: 14px;
}
/* ── 14. Saldo wrap ── */
.vr-saldo-wrap.vr-visible {
animation: vrFadeUp .3s cubic-bezier(.16,1,.3,1) both;
}
.vr-saldo-empty-msg {
animation: vrFadeIn .3s ease both;
}
/* ── 15. Reward banner ── */
.vr-reward-banner {
transition: opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.vr-reward-banner[style*="display: block"],
.vr-reward-banner[style*="display:block"],
.vr-reward-banner:not([style*="display: none"]):not([style*="display:none"]) {
animation: vrFadeUp .35s cubic-bezier(.16,1,.3,1) both;
}
/* ── 16. Descuento pills ── */
.vr-desc-pill {
transition: background .15s ease, border-color .15s ease, color .15s ease,
transform .2s cubic-bezier(.16,1,.3,1), box-shadow .18s ease !important;
}
.vr-desc-pill:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(26,20,16,.06);
}
.vr-desc-pill:active {
transform: translateY(0) scale(.95);
transition-duration: .06s !important;
}
.vr-desc-pill.active {
animation: vrPopIn .28s cubic-bezier(.16,1,.3,1);
box-shadow: 0 0 0 3px rgba(232,102,58,.08);
}
/* ── 17. Custom amount wrap ── */
.vr-desc-monto-wrap:not([style*="display: none"]):not([style*="display:none"]) {
animation: vrFadeUp .25s cubic-bezier(.16,1,.3,1) both;
}
.vr-desc-applied:not(:empty) {
animation: vrFadeUp .3s cubic-bezier(.16,1,.3,1) both;
}
/* ── 18. Medio de pago buttons ── */
.vr-medio-btn {
transition: background .15s ease, border-color .15s ease, color .15s ease,
transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease !important;
}
.vr-medio-btn:hover {
transform: translateY(-2px);
box-shadow: 0 3px 12px rgba(26,20,16,.08);
}
.vr-medio-btn:active {
transform: translateY(0) scale(.95);
transition-duration: .06s !important;
}
.vr-medio-btn.active {
animation: vrPopIn .3s cubic-bezier(.16,1,.3,1);
}
/* ── 19. Resumen de pago / Totals ── */
/* ═══ TOTAL / SUBTOTAL number animations ═══ */
/* ── Subtotal: sutil, profesional ── */
#vr-subtotal-display,
#vr-resumen-subtotal {
display: inline-block;
transition: color .35s ease, transform .3s cubic-bezier(.16,1,.3,1);
will-change: transform, color;
}
#vr-subtotal-display.vr-num-up,
#vr-resumen-subtotal.vr-num-up {
color: #1A6636;
}
#vr-subtotal-display.vr-num-down,
#vr-resumen-subtotal.vr-num-down {
color: #E8663A;
}
#vr-subtotal-display.vr-num-done,
#vr-resumen-subtotal.vr-num-done {
animation: vrSubDone .4s cubic-bezier(.16,1,.3,1) both;
color: inherit;
}
@keyframes vrSubDone {
0% { transform: scale(1.04); }
50% { transform: scale(0.98); }
100% { transform: scale(1); }
}
/* ── Total principal (columna carrito): grande, dramático ── */
#vr-total {
display: inline-block;
position: relative;
transition: transform .3s cubic-bezier(.16,1,.3,1);
will-change: transform, color;
}
#vr-total.vr-total-counting {
animation: vrTotalPulse .5s ease infinite alternate;
}
#vr-total.vr-num-up {
color: #1A6636;
text-shadow: 0 0 20px rgba(26,102,54,.12);
}
#vr-total.vr-num-down {
color: #E8663A;
text-shadow: 0 0 20px rgba(232,102,58,.12);
}
#vr-total.vr-num-done {
animation: vrTotalLand .55s cubic-bezier(.16,1,.3,1) both;
color: #1A1410;
text-shadow: none;
}
@keyframes vrTotalPulse {
from { transform: scale(1); }
to { transform: scale(1.015); }
}
@keyframes vrTotalLand {
0% { transform: scale(1.08); filter: brightness(1.1); }
40% { transform: scale(0.97); }
70% { transform: scale(1.02); }
100% { transform: scale(1); filter: brightness(1); }
}
/* ── Total resumen (panel derecho): elegante ── */
#vr-resumen-total {
display: inline-block;
position: relative;
will-change: transform, color;
}
#vr-resumen-total.vr-total-counting {
animation: vrResumenPulse .48s ease infinite alternate;
}
#vr-resumen-total.vr-num-up {
color: #1A6636;
}
#vr-resumen-total.vr-num-down {
color: #E8663A;
}
#vr-resumen-total.vr-num-done {
animation: vrResumenLand .5s cubic-bezier(.16,1,.3,1) both;
color: inherit;
}
@keyframes vrResumenPulse {
from { transform: scale(1); opacity: 1; }
to { transform: scale(1.02); opacity: .88; }
}
@keyframes vrResumenLand {
0% { transform: scale(1.06) translateY(-2px); }
45% { transform: scale(0.97) translateY(1px); }
100% { transform: scale(1) translateY(0); }
}
/* ── Glow ring debajo del total al cambiar ── */
#vr-total.vr-num-up::after,
#vr-total.vr-num-down::after {
content: '';
position: absolute;
bottom: -4px; left: 50%;
transform: translateX(-50%);
width: 60%;
height: 3px;
border-radius: 2px;
animation: vrTotalGlow .5s ease both;
}
#vr-total.vr-num-up::after {
background: linear-gradient(90deg, transparent, rgba(26,102,54,.25), transparent);
}
#vr-total.vr-num-down::after {
background: linear-gradient(90deg, transparent, rgba(232,102,58,.25), transparent);
}
#vr-total.vr-num-done::after {
content: none;
}
@keyframes vrTotalGlow {
0% { opacity: 0; width: 0%; }
40% { opacity: 1; width: 70%; }
100% { opacity: 0; width: 60%; }
}
/* ── 20. Confirmar button ── */
.vr-confirmar-btn {
transition: background .2s ease, box-shadow .25s ease, transform .25s cubic-bezier(.16,1,.3,1),
opacity .2s ease !important;
position: relative;
overflow: hidden;
}
.vr-confirmar-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);
background-size: 200% 100%;
animation: vrShimmer 3s ease infinite;
pointer-events: none;
}
.vr-confirmar-btn:hover:not(:disabled) {
transform: translateY(-2px) !important;
box-shadow: 0 6px 24px rgba(26,20,16,.22), 0 16px 40px rgba(26,20,16,.12) !important;
}
.vr-confirmar-btn:active:not(:disabled) {
transform: translateY(0) scale(.98) !important;
transition-duration: .08s !important;
}
.vr-confirmar-btn:disabled {
animation: none;
}
.vr-confirmar-btn:disabled::before {
animation: none;
}
.vr-confirmar-btn .vr-confirmar-arrow {
transition: transform .2s cubic-bezier(.16,1,.3,1);
}
.vr-confirmar-btn:hover:not(:disabled) .vr-confirmar-arrow {
transform: translateX(3px);
}
/* ── 21. Obs toggle ── */
.vr-obs-toggle {
transition: color .15s ease, transform .15s cubic-bezier(.16,1,.3,1) !important;
}
.vr-obs-toggle:hover {
transform: translateX(2px);
}
.vr-obs-input {
transition: border-color .2s ease, box-shadow .2s ease, height .3s cubic-bezier(.16,1,.3,1) !important;
}
.vr-obs-input:focus {
box-shadow: 0 0 0 3px rgba(232,102,58,.06);
}
/* ── 22. Tipocliente toggle ── */
.vr-tipocli-btn {
transition: background .15s ease, color .15s ease, border-color .15s ease,
transform .18s cubic-bezier(.16,1,.3,1) !important;
}
.vr-tipocli-btn:active {
transform: scale(.95);
transition-duration: .06s !important;
}
.vr-tipocli-btn.active {
animation: vrPopIn .25s cubic-bezier(.16,1,.3,1);
}
/* ── 23. Scrollbar fade ── */
.vr-prod-scroll,
.vr-cart-body,
.vr-right-scroll {
scrollbar-color: rgba(26,20,16,.0) transparent;
transition: scrollbar-color .3s ease;
}
.vr-prod-scroll:hover,
.vr-cart-body:hover,
.vr-right-scroll:hover {
scrollbar-color: rgba(26,20,16,.12) transparent;
}
/* ── 24. Cart empty state ── */
.vr-cart-empty {
animation: vrFadeIn .5s cubic-bezier(.16,1,.3,1) .2s both;
}
.vr-cart-empty svg {
animation: vrFadeUp .5s cubic-bezier(.16,1,.3,1) .3s both;
}
/* ── 25. Location chip ── */
.vr-head-loc {
transition: background .15s ease, transform .15s cubic-bezier(.16,1,.3,1) !important;
}
.vr-head-loc:hover {
transform: scale(1.03);
}
.vr-shell { display:flex;flex-direction:column;height:100%;overflow:hidden; }
.vr-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
height: 56px;
background: #FFFFFF;
border-bottom: 1px solid rgba(191,180,170,.22);
flex-shrink: 0;
border-radius: 18px 18px 0 0;
}
.vr-head-left { display:flex;align-items:center;gap:0; }
.vr-head-wordmark { padding-right: 20px; }
.vr-head-wm-name {
font-family: var(--serif);
font-size: 16px;
font-weight: 700;
letter-spacing: 0.02em;
color: #1A1410;
line-height: 1.1;
}
.vr-head-wm-sub {
font-family: var(--mono);
font-size: 7.5px;
font-weight: 700;
letter-spacing: 0.14em;
color: rgba(26,20,16,.42);
text-transform: uppercase;
margin-top: 1px;
}
.vr-head-sep-v {
width: 1px;
height: 28px;
background: rgba(191,180,170,.40);
margin: 0 20px;
flex-shrink: 0;
}
.vr-head-context { display:flex;align-items:center;gap:10px; }
.vr-head-ico { color:#E8663A;flex-shrink:0; }
.vr-head-title {
font-family: var(--serif);
font-size: 16px;
font-weight: 700;
letter-spacing: -0.015em;
color: #1A1410;
line-height: 1.1;
}
.vr-head-sub {
font-family: var(--sans);
font-size: 11px;
color: rgba(26,20,16,.48);
margin-top: 1px;
letter-spacing: -0.005em;
}
.vr-head-right { display:flex;align-items:center;gap:10px; }
.vr-head-local {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
background: rgba(26,20,16,.05);
border: 1px solid rgba(191,180,170,.40);
border-radius: 999px;
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
color: rgba(26,20,16,.72);
white-space: nowrap;
letter-spacing: -0.005em;
}
.vr-head-close {
display:flex;align-items:center;justify-content:center;
width:34px;height:34px;border:none;background:transparent;
border-radius:8px;color:rgba(26,20,16,.45);cursor:pointer;
transition:background .13s,color .13s;
}
.vr-head-close:hover { background:rgba(26,20,16,.07);color:#1A1410; }
.vr-col { display:flex;flex-direction:column;overflow:hidden;border-right:1px solid rgba(191,180,170,.20); }
.vr-col:last-child { border-right:none; }
.vr-col-title {
font-family: var(--serif);
font-size: 20px;
font-weight: 700;
letter-spacing: -0.02em;
color: #1A1410;
margin: 0;
}
.vr-col-head {
display:flex;align-items:center;justify-content:space-between;
flex-shrink:0;
}
.vr-col-head .vr-col-title { margin:0; }
.vr-col-productos { background:#FFFFFF;padding:24px 22px 0; }
.vr-search-wrap { position:relative;flex-shrink:0;margin-bottom:14px; }
.vr-search-ico { position:absolute;left:12px;top:50%;transform:translateY(-50%);color:rgba(26,20,16,.36);pointer-events:none; }
.vr-search-input{
width: 100%;
box-sizing: border-box;
background: rgba(26,20,16,.04);
border: 1px solid rgba(191,180,170,.38);
border-radius: 11px;
color: #1A1410;
padding: 0 42px 0 34px;
font-size: 12.5px;
font-family: var(--sans);
outline: none;
transition: border-color .15s,background .15s,box-shadow .15s;
height: 42px;
letter-spacing: -0.005em;
}
.vr-search-input:focus{
border-color: rgba(232,102,58,.40);
background: #FFF;
box-shadow: 0 0 0 3px rgba(232,102,58,.08);
}
.vr-search-kbd {
position:absolute;right:10px;top:50%;transform:translateY(-50%);
font-family:var(--mono);font-size:9px;font-weight:700;
color:rgba(26,20,16,.30);background:rgba(26,20,16,.06);
border-radius:4px;padding:2px 6px;letter-spacing:.04em;
}
.vr-cat-pills { display:flex;gap:5px;flex-wrap:nowrap;overflow-x:auto;margin-bottom:16px;flex-shrink:0;scrollbar-width:none;padding-bottom:2px; }
.vr-cat-pill {
padding:6px 14px;border-radius:999px;
font-family:var(--sans);font-size:12px;font-weight:500;
color:rgba(26,20,16,.58);background:rgba(26,20,16,.05);
border:1px solid transparent;cursor:pointer;
transition:background .13s,color .13s,border-color .13s;
white-space:nowrap;letter-spacing:-0.005em;
flex-shrink:0;
}
.vr-cat-pill:hover { background:rgba(26,20,16,.09);color:#1A1410; }
.vr-cat-pill.active { background:#1A1410;color:#F5EFE6;border-color:#1A1410; }
.vr-prod-scroll { flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(26,20,16,.10) transparent;padding-bottom:16px; }
.vr-prod-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 2px;
margin-bottom: 0;
}
.vr-prod-card:hover{
border-color: rgba(191,180,170,.55);
background: rgba(232,102,58, 0.06);
box-shadow: 0 4px 16px rgba(32,24,18,.08);
transform: translateY(-1px);
}
.vr-prod-card.agotado{
opacity: .38;
pointer-events: none;
}
.vr-prod-avatar::after {
content:'';position:absolute;inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,rgba(0,0,0,.06) 100%);
}
.vr-prod-info { flex:1;min-width:0; }
.vr-prod-bottom { display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
.vr-prod-add:hover { background:#B5551F;transform:scale(1.10); }
.vr-prod-empty { grid-column:1/-1;text-align:center;padding:40px 0;font-size:13px;color:rgba(26,20,16,.36);font-family:var(--sans); }
.vr-col-carrito { background:#fbfbfb;padding:24px 24px 0; }
.vr-vaciar-btn {
display:inline-flex;align-items:center;gap:5px;padding:6px 12px;
border:1px solid rgba(191,180,170,.40);border-radius:8px;background:transparent;
font-family:var(--sans);font-size:12px;font-weight:500;
color:rgba(26,20,16,.50);cursor:pointer;
transition:background .13s,color .13s,border-color .13s;
}
.vr-vaciar-btn:hover { background:rgba(26,20,16,.05);color:#1A1410;border-color:rgba(191,180,170,.65); }
.vr-cart-badge {
display:inline-flex;align-items:center;justify-content:center;
min-width:24px;height:24px;
background:#E8663A;color:#FFF;
border-radius:999px;font-family:var(--mono);font-size:11px;font-weight:700;padding:0 6px;
}
.vr-cart-headers {
display:grid;grid-template-columns:1.8fr 90px 140px 88px 28px;gap:8px;
padding:12px 6px 10px;
border-bottom:1px solid rgba(191,180,170,.28);
margin-bottom:0;flex-shrink:0;margin-top:14px;
}
.vr-cart-headers span {
font-family:var(--mono);font-size:8px;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;color:rgba(26,20,16,.38);
}
.vr-cart-body { flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(26,20,16,.10) transparent; }
.vr-cart-empty {
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:12px;height:140px;color:rgba(26,20,16,.35);font-size:13px;
text-align:center;font-family:var(--sans);
}
.vr-cart-row {
display:grid;grid-template-columns:1.8fr 90px 140px 88px 28px;gap:8px;
align-items:center;padding:14px 6px;
border-bottom:1px solid rgba(191,180,170,.16);
animation:lx-fade-up var(--lx-d-normal) var(--lx-curve-enter) both;
}
.vr-cart-row:last-child { border-bottom:none; }
.vr-cart-prod { display:flex;align-items:center;gap:10px;min-width:0; }
.vr-cart-prod .vr-prod-avatar { width:40px;height:40px;font-size:16px;border-radius:8px; }
.vr-cart-prod-info { min-width:0; }
.vr-cart-prod-name {
font-family:var(--sans);font-size:12.5px;font-weight:600;
letter-spacing:-.012em;color:#1A1410;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vr-cart-prod-tag { font-family:var(--mono);font-size:9.5px;color:rgba(26,20,16,.40);margin-top:1px; }
.vr-cart-precio {
font-family:var(--mono);font-size:11.5px;font-weight:600;
color:rgba(26,20,16,.55);white-space:nowrap;
}
.vr-stepper {
display:inline-flex;align-items:center;
background:#FFFFFF;
border:1px solid rgba(191,180,170,.45);
border-radius:999px;overflow:hidden;height:34px;
}
.vr-stepper-btn {
width:34px;height:34px;border:none;background:transparent;
color:rgba(26,20,16,.60);font-size:16px;line-height:1;
cursor:pointer;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
transition:background .12s,color .12s;
font-weight:300;
}
.vr-stepper-btn:hover { background:rgba(26,20,16,.06);color:#1A1410; }
.vr-stepper-input {
width:52px;height:100%;text-align:center;border:none;
border-left:1px solid rgba(191,180,170,.35);
border-right:1px solid rgba(191,180,170,.35);
font-family:var(--mono);font-size:11.5px;font-weight:700;color:#1A1410;
background:transparent;outline:none;padding:0;
}
.vr-stepper-input:focus { background:rgba(232,102,58,.04); }
.vr-stepper-unit {
font-family:var(--mono);font-size:10px;color:rgba(26,20,16,.45);
padding:0 8px 0 4px;flex-shrink:0;
}
.vr-cart-subtotal {
font-family:var(--serif);font-size:14px;font-weight:700;
letter-spacing:-.015em;color:#1A1410;text-align:right;white-space:nowrap;
font-optical-sizing:auto;
}
.vr-cart-del {
display:flex;align-items:center;justify-content:center;
width:28px;height:28px;border:none;background:transparent;
border-radius:7px;color:rgba(26,20,16,.24);cursor:pointer;
transition:background .13s,color .13s;
}
.vr-cart-del:hover { background:rgba(192,57,43,.09);color:#C0392B; }
.vr-obs-wrap { flex-shrink:0;padding:10px 6px 6px; }
.vr-obs-toggle {
display:inline-flex;align-items:center;gap:6px;
font-family:var(--sans);font-size:12.5px;font-weight:500;
color:rgba(26,20,16,.42);background:none;border:none;cursor:pointer;padding:0;
transition:color .13s;
}
.vr-obs-toggle:hover { color:#1A1410; }
.vr-obs-input {
width:100%;margin-top:8px;padding:10px 14px;
background:#FFF;border:1px solid rgba(191,180,170,.38);
border-radius:10px;font-family:var(--sans);font-size:12.5px;
color:#1A1410;resize:none;outline:none;
transition:border-color .15s;
}
.vr-obs-input:focus { border-color:rgba(232,102,58,.38); }
.vr-cart-totals {
flex-shrink:0;padding:14px 6px 0;
border-top:1px solid rgba(191,180,170,.24);
margin-top:6px;
}
.vr-totals-row {
display:flex;justify-content:space-between;align-items:center;
padding:5px 0;font-family:var(--sans);font-size:13px;color:rgba(26,20,16,.55);
}
.vr-totals-desc span:last-child { color:#E8663A;font-weight:600; }
.vr-totals-caja span:last-child { color:#22A55A;font-weight:600; }
.vr-totals-total {
display:flex;justify-content:space-between;align-items:baseline;
padding:10px 0 2px;border-top:1px solid rgba(191,180,170,.22);margin-top:6px;
}
.vr-totals-total>span:first-child {
font-family:var(--sans);font-size:15px;font-weight:600;
letter-spacing:-.01em;color:#1A1410;
}
.vr-pts-row { padding:3px 0 10px; }
.vr-pts-preview { font-family:var(--mono);font-size:9.5px;color:rgba(26,20,16,.38);letter-spacing:.04em; }
.vr-confirmar-btn:hover:not(:disabled) {
background:#2A1F18;
box-shadow:0 4px 16px rgba(26,20,16,.24),0 12px 32px rgba(26,20,16,.16);
}
.vr-confirmar-btn:disabled { opacity:.40;cursor:not-allowed;box-shadow:none; }
.vr-right-scroll {
flex:1;overflow-y:auto;
padding:16px 14px;
display:flex;flex-direction:column;gap:12px;
scrollbar-width:thin;scrollbar-color:rgba(26,20,16,.10) transparent;
}
.vr-rpanel-title {
font-family:var(--serif);font-size:17px;font-weight:700;
letter-spacing:-.018em;color:#1A1410;margin:0 0 14px;
font-optical-sizing:auto;
}
.vr-rpanel-label {
font-family:var(--mono);font-size:8.5px;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;color:rgba(26,20,16,.40);
}
.vr-cli-search-wrap { position:relative;margin-bottom:10px; }
.vr-cli-search-input {
width:100%;height:38px;padding:0 14px 0 34px;
background:rgba(26,20,16,.04);border:1px solid rgba(191,180,170,.38);
border-radius:9px;font-family:var(--sans);font-size:12.5px;color:#1A1410;
outline:none;transition:border-color .15s,background .15s;
letter-spacing:-.005em;
}
.vr-cli-search-input:focus { background:#FFF;border-color:rgba(232,102,58,.38); }
.vr-cli-select-hidden { display:none !important; }
.vr-cli-card {
padding:12px 14px;
background:rgba(26,20,16,.028);
border:1px solid rgba(191,180,170,.30);
border-radius:12px;margin-bottom:10px;
}
.vr-cli-row-top {
display:flex;align-items:center;gap:10px;
}
.vr-cli-avatar {
width:36px;height:36px;border-radius:50%;
background:#C4A882;display:flex;align-items:center;justify-content:center;
font-family:var(--serif);font-size:14px;font-weight:700;
color:rgba(255,255,255,.88);flex-shrink:0;
}
.vr-cli-info { flex:1;min-width:0; }
.vr-cli-name {
font-family:var(--sans);font-size:13.5px;font-weight:600;
letter-spacing:-.012em;color:#1A1410;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vr-cli-dni { font-family:var(--mono);font-size:10px;color:rgba(26,20,16,.44);margin-top:1px; }
.vr-cli-row-pts {
display:flex;align-items:center;gap:6px;
margin-top:10px;
padding:8px 10px;
background:rgba(232,102,58,.05);
border:1px solid rgba(232,102,58,.12);
border-radius:8px;
}
.vr-cli-row-pts svg { color:#E8663A;flex-shrink:0; }
.vr-cli-pts-num { font-family:var(--serif);font-size:15px;font-weight:700;color:#E8663A;letter-spacing:-.015em; }
.vr-cli-pts-lbl { font-family:var(--mono);font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(26,20,16,.40);margin-left:2px; }
.vr-reward-banner {
padding:12px 14px;background:rgba(232,102,58,.07);
border:1px solid rgba(232,102,58,.18);border-radius:11px;margin-bottom:10px;
font-family:var(--sans);font-size:12.5px;color:#8C4218;line-height:1.5;
}
.vr-saldo-wrap { margin-top:10px; }
.vr-saldo-line{
margin-top: 7px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12.5px;
color: rgba(26,20,16,.58);
font-family: var(--sans);
margin-bottom: 8px;
}
.vr-saldo-line strong{
color: #1A1410;
font-size: 12px;
letter-spacing: -0.01em;
font-weight: 600;
}
.vr-saldo-empty-msg{
font-size: 12px;
color: rgba(26,20,16,.45);
font-style: italic;
padding: 6px 0;
font-family: var(--sans);
}
.vr-caja-toggle{
margin-top: 7px;
display: flex;
align-items: center;
gap: 7px;
font-size: 12.5px;
color: rgba(26,20,16,.62);
user-select: none;
font-family: var(--sans);
cursor: pointer;
}
.vr-caja-help{
font-size: 9.5px;
color: rgba(26,20,16,.42);
font-family: var(--mono);
}
.vr-desc-pills { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px; }
.vr-desc-pill-custom { grid-column: 1 / -1; }
.vr-desc-pill {
padding:9px 4px;text-align:center;
background:rgba(26,20,16,.04);
border:1px solid rgba(191,180,170,.35);
border-radius:9px;font-family:var(--sans);font-size:12.5px;font-weight:500;
color:rgba(26,20,16,.62);cursor:pointer;
transition:background .13s,border-color .13s,color .13s;
}
.vr-desc-pill:hover { background:rgba(26,20,16,.07);border-color:rgba(191,180,170,.55); }
.vr-desc-pill.active {
background:rgba(232,102,58,.08);
border-color:rgba(232,102,58,.35);
color:#8C4218;
font-weight:600;
}
/* v7.19.0: hover sobre pill activo = previsualizar deselección */
.vr-desc-pill.active:hover {
background: rgba(232,102,58,.14);
border-color: rgba(232,102,58,.50);
position: relative;
}
.vr-desc-pill.active:hover::after {
content: "×";
position: absolute;
top: 2px; right: 4px;
font-size: 10px;
color: rgba(140,66,24,.65);
font-weight: 700;
line-height: 1;
}
/* Mismo patrón para los botones de medio de pago */
.vr-pago-btn.active:hover:not(.is-caja-covered) {
background: rgba(26,20,16,.04);
position: relative;
}
.vr-pago-btn.active:hover:not(.is-caja-covered)::after {
content: "×";
position: absolute;
top: 4px; right: 6px;
font-size: 11px;
color: rgba(26,20,16,.50);
font-weight: 700;
line-height: 1;
}
.vr-desc-monto-wrap { margin-top:4px; }
.vr-money-wrap{
display: flex;
align-items: center;
flex: 1;
min-width: 0;
border: 1px solid rgba(191,180,170,.38);
border-radius: 9px;
background: rgba(26,20,16,.03);
padding: 0 12px;
transition: border-color 0.15s, background 0.15s;
overflow: hidden;
gap: 6px;
height: 38px;
margin-top: 8px;
}
.vr-money-wrap:focus-within{
border-color: rgba(232,102,58,.38);
background: #FFF;
}
.vr-money-symbol{
font-size: 13px;
color: rgba(26,20,16,.42);
font-family: var(--mono);
margin-right: 4px;
flex-shrink: 0;
font-weight: 600;
}
.vr-money-input{
flex: 1;
min-width: 0;
width: 0;
background: transparent;
border: none;
color: #1A1410;
padding: 7px 0;
font-family: var(--mono);
font-size: 14px;
outline: none;
text-align: left;
font-weight: 700;
}
.vr-resumen-rows { margin-bottom:16px; }
.vr-resumen-row {
display:flex;justify-content:space-between;padding:5px 0;
font-family:var(--sans);font-size:13px;color:rgba(26,20,16,.58);
}
.vr-resumen-desc span:last-child { color:#E8663A;font-weight:600; }
.vr-resumen-caja span:last-child { color:#22A55A;font-weight:600; }
.vr-resumen-total {
display:flex;justify-content:space-between;align-items:baseline;
padding-top:10px;border-top:1px solid rgba(191,180,170,.24);margin-top:6px;
}
.vr-resumen-total>span:first-child {
font-family:var(--sans);font-size:13px;font-weight:600;color:rgba(26,20,16,.65);
}
.vr-medio-section { margin-top:16px; }
.vr-pago-grid{
display: grid;
gap: 7px;
grid-template-columns: repeat(3,1fr);
margin-top: 9px;
}
.vr-pago-btn{
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 6px;
position: relative;
background: rgba(26,20,16,.04);
border: 1.5px solid rgba(191,180,170,.32);
border-radius: 12px;
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
color: rgba(26,20,16,.62);
cursor: pointer;
transition: background .22s ease, border-color .22s ease, color .22s ease, box-shadow .28s ease, transform .18s cubic-bezier(.16,1,.3,1);
white-space: nowrap;
overflow: hidden;
}
.vr-pago-btn::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 13px;
opacity: 0;
transition: opacity .3s ease;
pointer-events: none;
z-index: 0;
}
.vr-pago-btn > * { position: relative; z-index: 1; }
.vr-pago-btn:hover{
border-color: rgba(191,180,170,.55);
background: rgba(26,20,16,.06);
color: var(--char);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(26,20,16,.06);
}
.vr-pago-btn:active {
transform: translateY(0) scale(.97);
transition-duration: .06s;
}
@keyframes vrPagoSelect {
0% { transform: scale(.96); opacity: .8; }
50% { transform: scale(1.02); }
100% { transform: scale(1); opacity: 1; }
}
.vr-pago-btn.active {
animation: vrPagoSelect .35s cubic-bezier(.16,1,.3,1) both;
font-weight: 600;
}
/* Hint pulse when no payment method selected */
@keyframes vrPagoHint {
0%, 100% { border-color: rgba(232,102,58,.25); box-shadow: 0 0 0 0 rgba(232,102,58,.15); }
50% { border-color: rgba(232,102,58,.6); box-shadow: 0 0 0 4px rgba(232,102,58,.08); }
}
.vr-pago-btn.vr-pago-hint {
animation: vrPagoHint .4s ease 2 !important;
}
/* v7.19.0: cuando el pago está 100% cubierto por caja del cliente */
.vr-pago-btn.is-caja-covered,
.vr-pago-btn.is-caja-covered.active {
background: rgba(26,20,16,.025);
border-color: rgba(191,180,170,.20);
color: rgba(26,20,16,.28);
box-shadow: none;
cursor: not-allowed;
opacity: .55;
}
.vr-pago-btn.is-caja-covered svg { opacity: .4; }
/* Tag editorial "Pagando con caja del cliente" */
.vr-caja-cover-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 13px;
background: linear-gradient(158deg, rgba(122,74,22,.10) 0%, rgba(122,74,22,.05) 100%);
border: 1px solid rgba(122,74,22,.20);
border-radius: 10px;
font-family: var(--mono);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: #7a4a16;
margin-bottom: 9px;
animation: vr-caja-tag-in .28s cubic-bezier(.16,1,.3,1) both;
}
.vr-caja-cover-tag svg { flex-shrink: 0; }
/* Variante "caja parcial" — fondo más suave, label normal */
.vr-caja-cover-tag.is-partial {
background: rgba(122,74,22,.06);
border-color: rgba(122,74,22,.16);
font-family: var(--sans);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: #5d3a12;
padding: 9px 14px;
}
.vr-caja-cover-tag.is-partial em {
color: rgba(122,74,22,.40);
font-style: normal;
margin: 0 4px;
}
@keyframes vr-caja-tag-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
.vr-cols{
display: grid;
grid-template-columns: 1fr 1.35fr 0.9fr;
flex: 1;
overflow: hidden;
padding: 14px !important;
gap: 12px !important;
background: #fbfbfb;
align-items: stretch !important;
}
.vr-col-productos,
.vr-col-carrito {
background: #FFFFFF !important;
border-radius: 9px !important;
border: 1px solid rgba(26,20,16,.08) !important;
box-shadow: none !important;
overflow: hidden;
height: auto !important;
}
.vr-col-right{
background: transparent !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow-y: auto;
}
.vr-rpanel{
background: #FFFFFF;
border: 1px solid rgba(26,20,16,.05);
border-radius: var(--radius-lg);
box-shadow: var(--card-shadow);
padding: 22px 20px;
box-shadow: none !important;
flex-shrink: 0;
position: relative;
}
.vr-col-right .vr-rpanel:first-child {
z-index: 2;
overflow: visible;
}
.vr-confirmar-btn{
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 56px;
background: #1A1410;
color: #F5EFE6;
border: none;
border-radius: 13px;
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
letter-spacing: -.005em;
cursor: pointer;
margin-top: 12px;
flex-shrink: 0;
transition: background .15s,box-shadow .15s;
box-shadow: none !important;
}
.vr-overlay .vr-search-input,
.vr-overlay .vr-obs-input,
.vr-overlay .vr-cli-card,
.vr-overlay .vr-cli-search-input,
.vr-overlay .vr-money-wrap,
.vr-overlay .vr-desc-pill,
.vr-overlay .vr-prod-card,
.vr-overlay .vr-prod-add,
.vr-overlay .vr-prod-avatar,
.vr-overlay .vr-pago-btn,
.vr-overlay .vr-vaciar-btn,
.vr-overlay .vr-reward-banner,
.vr-overlay .vr-rpanel,
.vr-overlay .vr-confirmar-btn,
.vr-overlay .vr-stepper-input,
.vr-overlay .vr-stepper-btn { border-radius: 9px !important; }
.vr-overlay .vr-col-title,
.vr-overlay .vr-head-title,
.vr-overlay .vr-head-wm-name,
.vr-overlay .vr-rpanel-title,
.vr-overlay .vr-prod-avatar,
.vr-overlay .vr-prod-precio,
.vr-overlay .vr-cart-subtotal,
.vr-overlay #vr-total,
.vr-overlay #vr-resumen-total,
.vr-overlay .vr-cli-pts-num { font-family: var(--sans) !important; }
.vr-prod-card{
background: #FFFFFF;
border: 1px solid rgba(191,180,170,.25);
border-radius: 14px;
padding: 14px 12px 42px !important;
cursor: pointer;
transition: border-color .15s,box-shadow .15s,transform .15s;
user-select: none;
display: flex;
align-items: flex-start;
gap: 12px !important;
position: relative;
overflow: hidden;
min-height: 110px !important;
}
.vr-prod-avatar{
width: 56px !important;
height: 56px !important;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-size: 22px;
font-weight: 700;
color: rgba(255,255,255,.82);
flex-shrink: 0;
position: relative;
overflow: hidden;
align-self: flex-start;
margin-top: 2px;
}
.vr-prod-name{
font-size: 13px !important;
font-weight: 600;
color: #1A1410;
margin-bottom: 3px !important;
letter-spacing: -.015em;
font-family: var(--sans);
line-height: 1.4 !important;
white-space: normal !important;
}
.vr-prod-sku{
font-family: var(--mono);
font-size: 9px;
color: rgba(26,20,16,.38);
letter-spacing: .05em;
margin-bottom: 6px !important;
}
.vr-prod-precio{
font-size: 13px !important;
color: #1A1410;
font-weight: 700 !important;
font-family: var(--serif);
letter-spacing: -.01em;
font-optical-sizing: auto;
margin-bottom: 5px !important;
display: block;
}
.vr-prod-stock-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.vr-prod-stock{
font-size: 10px;
color: var(--ink-82);
margin-top: 2px;
font-family: var(--mono);
font-weight: 600;
letter-spacing: 0.02em;
}
.vr-prod-lote{
font-family: var(--mono);
font-size: 10px !important;
font-weight: 600;
}
.vr-prod-add{
position: absolute;
bottom: 10px !important;
right: 10px !important;
width: 28px !important;
height: 28px !important;
border-radius: 8px;
border: none;
background: #E8663A;
color: #FFF;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .15s,transform .15s;
box-shadow: 0 2px 6px rgba(232,102,58,.30);
}
.vr-overlay .vr-prod-add:hover {
background: rgba(26,20,16,.30) !important;
}
/* (moved to VR Redesign block below) */
/* (cart element sizes moved to VR Redesign block below) */
.vr-overlay .vr-stepper {
border: 1px solid rgba(26,20,16,.14) !important;
border-radius: 9px !important;
height: 36px !important;
background: #FFFFFF !important;
}
.vr-overlay .vr-stepper-btn {
width: 32px !important;
height: 34px !important;
font-size: 18px !important;
color: rgba(26,20,16,.55) !important;
font-weight: 300 !important;
}
.vr-overlay .vr-stepper-btn:hover { color: #1A1410 !important; }
.vr-overlay .vr-stepper-input {
font-size: 13px !important;
font-weight: 600 !important;
width: 58px !important;
border-color: rgba(26,20,16,.12) !important;
}
.vr-overlay .vr-stepper-unit {
font-size: 11px !important;
color: rgba(26,20,16,.45) !important;
padding: 0 8px 0 3px !important;
}
.vr-overlay .vr-cart-del {
font-size: 18px !important;
color: rgba(26,20,16,.28) !important;
width: 28px !important;
height: 28px !important;
font-weight: 300 !important;
line-height: 1 !important;
}
.vr-overlay .vr-obs-wrap {
margin: 8px 6px !important;
padding: 14px 16px !important;
background: rgba(26,20,16,.025) !important;
border: 1px solid rgba(26,20,16,.08) !important;
border-radius: 9px !important;
}
.vr-overlay .vr-cart-totals {
padding: 16px 6px 0 !important;
border-top: 1px solid rgba(26,20,16,.10) !important;
margin-top: 8px !important;
}
.vr-overlay .vr-totals-row {
font-size: 14px !important;
color: rgba(26,20,16,.58) !important;
padding: 6px 0 !important;
}
.vr-overlay .vr-totals-total {
padding: 14px 0 0 !important;
margin-top: 10px !important;
}
.vr-overlay .vr-totals-total > span:first-child {
font-size: 16px !important;
font-weight: 700 !important;
}
.vr-overlay #vr-total {
font-size: 38px;
font-weight: 800;
letter-spacing: -0.03em;
}
.vr-overlay .vr-col-carrito {
padding-bottom: 24px !important;
}
.vr-overlay .vr-confirmar-btn {
margin-top: 20px !important;
height: 52px !important;
border-radius: 9px !important;
font-size: 15px !important;
font-weight: 600 !important;
}
.vr-overlay *{
box-shadow: none !important;
}
.vr-overlay .vr-col-productos,
.vr-overlay .vr-col-carrito {
box-shadow: 0 1px 2px rgba(32,24,18,.02), 0 6px 20px rgba(32,24,18,.05) !important;
}
.vr-overlay .vr-qty-field {
display: inline-flex;
align-items: center;
background: #FFFFFF;
border: 1px solid rgba(26,20,16,.14);
border-radius: 9px;
height: 36px;
overflow: hidden;
padding: 0 10px;
gap: 4px;
}
.vr-overlay .vr-qty-field .vr-stepper-input {
border: none !important;
border-left: none !important;
border-right: none !important;
box-shadow: none !important;
width: 64px !important;
text-align: center;
padding: 0 !important;
}
.vr-overlay .vr-qty-field .vr-stepper-unit {
padding: 0 !important;
font-size: 11px !important;
color: rgba(26,20,16,.45) !important;
}
.vr-overlay .vr-cart-qty-inline {
display: flex !important;
flex-direction: row;
align-items: center !important;
gap: 6px !important;
flex-wrap: nowrap !important;
}
.vr-overlay .vr-cart-qty-inline .vr-qty-field { flex-shrink: 0; }
/* (grid-template moved to VR Redesign block below) */
.vr-overlay .vr-cart-subtotal{
font-family: var(--sans) !important;
font-weight: 600 !important;
white-space: nowrap !important;
}
.vr-overlay .vr-cli-search-area { position: relative; z-index: 10; }
.vr-overlay .vr-cli-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0; right: 0;
background: #FFFFFF;
border: 1px solid rgba(191,180,170,.35);
border-radius: 9px;
box-shadow: 0 4px 16px rgba(32,24,18,.10);
z-index: 100;
overflow: hidden;
max-height: 260px;
overflow-y: auto;
}
.vr-overlay .vr-cli-dd-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
transition: background .12s;
border-bottom: 1px solid rgba(191,180,170,.14);
}
.vr-overlay .vr-cli-dd-item:last-child { border-bottom: none; }
.vr-overlay .vr-cli-dd-item:hover { background: rgba(26,20,16,.04); }
.vr-overlay .vr-cli-dd-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: #C4A882;
display: flex; align-items: center; justify-content: center;
font-family: var(--sans); font-size: 13px; font-weight: 700;
color: rgba(255,255,255,.88); flex-shrink: 0;
}
.vr-overlay .vr-cli-dd-name {
font-family: var(--sans); font-size: 13px; font-weight: 600;
color: #1A1410; letter-spacing: -.01em;
}
.vr-overlay .vr-cli-dd-pts {
font-family: var(--mono); font-size: 10px;
color: rgba(26,20,16,.42); margin-top: 1px;
}
.vr-overlay .vr-cli-dd-empty {
padding: 14px 12px;
font-family: var(--sans); font-size: 12.5px;
color: rgba(26,20,16,.40); text-align: center;
}
.vr-cli-desel {
display: flex; align-items: center; justify-content: center;
width: 26px; height: 26px;
border: none; background: transparent; border-radius: 6px;
color: rgba(26,20,16,.30); cursor: pointer;
transition: background .12s, color .12s;
flex-shrink: 0; margin-left: auto;
}
.vr-cli-desel:hover { background: rgba(26,20,16,.08); color: #1A1410; }
.vr-overlay .vr-desc-pill.active {
background: rgba(232,102,58,.10) !important;
border-color: rgba(232,102,58,.40) !important;
color: #8C4218 !important;
font-weight: 600 !important;
}
/* Active pago btn inherits per-method colored styles — no crude override needed */
.vr-overlay .vr-desc-applied-sep {
color: rgba(140,66,24,.40);
font-size: 12px;
}
.vr-overlay .vr-resumen-desc span:last-child,
.vr-overlay .vr-totals-desc span:last-child {
font-family: var(--mono) !important;
font-size: 12.5px !important;
font-weight: 600 !important;
color: #E8663A !important;
}
.vr-overlay .vr-desc-pills {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 6px !important;
margin-bottom: 10px !important;
}
.vr-overlay .vr-desc-pill {
padding: 9px 14px !important;
min-width: 0 !important;
width: auto !important;
font-size: 13px !important;
font-weight: 500 !important;
height: 38px !important;
}
.vr-overlay .vr-desc-pill-custom {
grid-column: 1 / -1 !important; /* ancho completo debajo */
white-space: nowrap;
}
.vr-overlay .vr-desc-monto-wrap {
margin-top: 6px !important;
margin-bottom: 6px !important;
}
.vr-overlay .vr-desc-monto-wrap .vr-money-wrap {
background: rgba(26,20,16,.04) !important;
border-color: rgba(191,180,170,.40) !important;
height: 40px !important;
}
.vr-overlay .vr-desc-monto-wrap .vr-money-input {
font-size: 14px !important;
}
.vr-overlay .vr-desc-applied{
align-items: center;
gap: 6px;
margin-top: 8px !important;
padding: 11px 14px !important;
background: rgba(26,20,16,.035) !important;
border: 1px solid rgba(191,180,170,.28) !important;
border-radius: 9px !important;
}
.vr-overlay .vr-desc-applied:empty { display: none !important; }
.vr-overlay .vr-desc-applied-label {
font-family: var(--sans);
font-size: 11px;
color: rgba(26,20,16,.48);
margin-bottom: 5px;
letter-spacing: -.005em;
}
.vr-overlay .vr-desc-applied-row {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.vr-overlay .vr-desc-applied-monto{
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
color: #1A1410;
letter-spacing: -.015em;
}
.vr-overlay .vr-desc-applied-pct{
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
color: rgba(26,20,16,.45);
letter-spacing: -.01em;
}
.vr-overlay .vr-cli-card {
padding: 14px 14px !important;
gap: 11px !important;
margin-bottom: 12px !important;
}
.vr-overlay .vr-cli-avatar {
width: 42px !important;
height: 42px !important;
font-size: 15px !important;
}
.vr-overlay .vr-cli-name { font-size: 14px !important; margin-bottom: 3px !important; }
.vr-overlay .vr-cli-dni { font-size: 12px !important; color: rgba(26,20,16,.45) !important; }
.vr-overlay .vr-cli-pts { text-align: right; flex-shrink: 0; }
.vr-overlay .vr-cli-pts-row {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
color: #E8663A;
margin-bottom: 2px;
}
.vr-overlay .vr-cli-pts-row svg { color: #E8663A; }
.vr-overlay .vr-cli-pts-num {
font-family: var(--sans) !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #E8663A !important;
letter-spacing: -.015em !important;
}
.vr-overlay .vr-cli-pts-lbl {
font-family: var(--mono) !important;
font-size: 8.5px !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: rgba(26,20,16,.38) !important;
display: block;
text-align: right;
}
.vr-overlay .vr-reward-has {
background: rgba(232,102,58,.07) !important;
border: 1px solid rgba(232,102,58,.18) !important;
border-radius: 9px !important;
padding: 13px 14px !important;
margin-bottom: 10px !important;
display: flex !important;
flex-direction: column;
gap: 10px !important;
}
.vr-overlay .vr-reward-body {
display: flex;
align-items: flex-start;
gap: 9px;
}
.vr-overlay .vr-reward-text { flex: 1; min-width: 0; }
.vr-overlay .vr-reward-title {
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
color: #7A3910;
margin-bottom: 2px;
letter-spacing: -.01em;
}
.vr-overlay .vr-reward-desc {
font-family: var(--sans);
font-size: 12px;
color: rgba(122,57,16,.75);
}
.vr-overlay .vr-reward-btn {
align-self: flex-end;
padding: 7px 13px;
background: #FFFFFF;
border: 1px solid rgba(232,102,58,.30);
border-radius: 8px;
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
color: #8C4218;
cursor: pointer;
transition: background .13s, border-color .13s;
}
.vr-overlay .vr-reward-btn:hover { background: rgba(232,102,58,.06); border-color: rgba(232,102,58,.45); }
.vr-overlay .vr-reward-empty {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 11px 14px !important;
background: rgba(26,20,16,.03) !important;
border: 1px solid rgba(26,20,16,.08) !important;
border-radius: 9px !important;
margin-bottom: 10px !important;
font-family: var(--sans) !important;
font-size: 12.5px !important;
color: rgba(26,20,16,.42) !important;
}
.vr-overlay .vr-saldo-wrap {
padding: 12px 14px !important;
background: rgba(26,20,16,.03) !important;
border: 1px solid rgba(26,20,16,.08) !important;
border-radius: 9px !important;
flex-direction: column;
gap: 8px !important;
margin-top: 2px !important;
}
.vr-overlay .vr-saldo-wrap.vr-visible {
display: flex !important;
}
.vr-overlay .vr-saldo-wrap.vr-hidden {
display: none !important;
}
.vr-overlay .vr-saldo-line {
font-size: 13px !important;
font-weight: 500 !important;
margin-bottom: 0 !important;
}
.vr-overlay .vr-saldo-line span { color: rgba(26,20,16,.55) !important; }
.vr-overlay .vr-saldo-line strong {
font-size: 14px !important;
font-weight: 700 !important;
color: #1A1410 !important;
}
.vr-overlay .vr-caja-toggle {
font-size: 12.5px !important;
color: rgba(26,20,16,.60) !important;
gap: 8px !important;
}
/* (vr-rpanel, vr-cols, vr-right-scroll moved to VR Redesign block below) */
/* ── Split toggle button ── */
.vr-overlay .vr-split-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 7px 0;
background: none;
border: none;
font-family: var(--sans);
font-size: 12.5px;
font-weight: 500;
color: rgba(26,20,16,.48);
cursor: pointer;
transition: color .18s ease;
letter-spacing: -.005em;
}
.vr-overlay .vr-split-toggle:hover { color: #1A1410; }
/* ── Split section — redesigned card ── */
@keyframes vrSplitIn {
from { opacity: 0; transform: translateY(-6px) scaleY(.97); }
to { opacity: 1; transform: translateY(0) scaleY(1); }
}
.vr-overlay .vr-split-section {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
background: linear-gradient(160deg, rgba(26,20,16,.028) 0%, rgba(26,20,16,.05) 100%);
border: 1.5px solid rgba(191,180,170,.22);
border-radius: 14px;
overflow: hidden;
animation: vrSplitIn .35s cubic-bezier(.16,1,.3,1) both;
}
/* ── Split block (each medio) ── */
.vr-overlay .vr-split-block {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.vr-overlay .vr-split-block-header {
display: flex;
align-items: center;
gap: 8px;
}
.vr-overlay .vr-split-block-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(26,20,16,.07);
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
color: rgba(26,20,16,.50);
flex-shrink: 0;
}
.vr-overlay .vr-split-block-title {
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
color: rgba(26,20,16,.65);
letter-spacing: -.005em;
}
/* ── Monto stack (label above input) ── */
.vr-overlay .vr-split-monto-stack {
display: flex;
flex-direction: column;
gap: 5px;
}
.vr-overlay .vr-split-monto-label {
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
color: rgba(26,20,16,.42);
letter-spacing: .01em;
}
.vr-overlay .vr-split-money-wrap {
flex: unset !important;
width: 100%;
margin-top: 0 !important;
height: 42px;
border-radius: 10px;
background: rgba(26,20,16,.02);
}
.vr-overlay .vr-split-money-wrap:focus-within {
border-color: rgba(232,102,58,.40);
background: #FFFFFF;
box-shadow: 0 0 0 3px rgba(232,102,58,.06);
}
.vr-overlay .vr-split-money-wrap .vr-money-input {
width: 100%;
font-size: 18px !important;
font-weight: 600;
padding: 8px 6px !important;
letter-spacing: -.01em;
}
/* ── Monto auto (segundo medio — read-only) ── */
.vr-overlay .vr-split-monto-auto {
margin-top: 4px;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
background: rgba(26,20,16,.03);
border-radius: 8px;
}
.vr-overlay .vr-split-monto2 {
font-family: var(--mono);
font-size: 16px;
font-weight: 700;
color: #1A1410;
letter-spacing: -.02em;
}
/* ── Divider ── */
.vr-overlay .vr-split-divider {
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(26,20,16,.28);
}
.vr-overlay .vr-split-divider::before,
.vr-overlay .vr-split-divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(191,180,170,.28);
}
/* ── Grid 2 ── */
.vr-overlay .vr-pago-grid-2 { margin: 0 !important; }
/* ── Warning ── */
.vr-overlay .vr-split-warning {
display: flex;
align-items: center;
gap: 7px;
margin: 0 14px 14px;
padding: 9px 12px;
background: rgba(192,57,43,.06);
border: 1px solid rgba(192,57,43,.15);
border-radius: 8px;
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
color: #8E2A20;
}
/* (product card overrides moved to VR Redesign block below) */
.vr-overlay .vr-prod-sku { display: none !important; }
.vr-overlay .vr-prod-card.agotado { opacity: .45 !important; }
.vr-overlay .vr-cat-pills { display: none !important; }
.vr-overlay .vr-head-logo-img{
height: 32px;
width: auto;
object-fit: contain;
display: block;
border-radius: 9px !important;
}
.vr-overlay .vr-head{
background: #FFFFFF !important;
padding: 0 22px !important;
height: 56px !important;
border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
border-bottom: 1px solid rgba(26,20,16,.06) !important;
}
.vr-overlay .vr-head-wordmark { padding-right: 16px !important; }
.vr-overlay .vr-head-logo-img { height: 28px !important; border-radius: 7px !important; }
.vr-overlay .vr-head-sep-v { margin: 0 16px !important; height: 24px !important; }
.vr-overlay .vr-head-context { gap: 10px !important; }
.vr-overlay .vr-head-title { font-size: 14px !important; }
.vr-overlay .vr-head-sub { font-size: 10px !important; }
/* ── VR Redesign: 3-column compact layout ── */
.vr-overlay .vr-cols {
grid-template-columns: 240px 1fr 310px !important;
padding: 0 !important;
gap: 0 !important;
background: #fbfbfb !important;
}
/* ── Products: slim left panel, list view ── */
.vr-overlay .vr-col-productos {
border-radius: 0 !important;
border: none !important;
border-right: 1px solid rgba(26,20,16,.06) !important;
background: #FFFFFF !important;
padding: 16px 12px 0 !important;
}
.vr-overlay .vr-col-productos .vr-col-title {
font-size: 14px !important;
font-weight: 700 !important;
margin-bottom: 10px !important;
}
.vr-overlay .vr-prod-grid {
grid-template-columns: 1fr !important;
gap: 2px !important;
padding: 0 !important;
}
.vr-overlay .vr-prod-card {
background: transparent !important;
border: none !important;
border-radius: 10px !important;
padding: 8px 10px !important;
min-height: auto !important;
align-items: center !important;
gap: 10px !important;
box-shadow: none !important;
transition: background .12s !important;
}
.vr-overlay .vr-prod-card:hover {
background: rgba(26,20,16,.04) !important;
border-color: transparent !important;
box-shadow: none !important;
transform: none !important;
}
.vr-overlay .vr-prod-avatar {
width: 36px !important;
height: 36px !important;
border-radius: 8px !important;
font-size: 14px !important;
}
.vr-overlay .vr-prod-name {
font-size: 12px !important;
font-weight: 600 !important;
margin-bottom: 1px !important;
line-height: 1.2 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.vr-overlay .vr-prod-row-price {
margin-bottom: 0 !important;
gap: 2px !important;
}
.vr-overlay .vr-prod-precio-num {
font-size: 12px !important;
font-weight: 600 !important;
}
.vr-overlay .vr-prod-precio-unit {
font-size: 9px !important;
}
.vr-overlay .vr-prod-row-meta {
gap: 4px !important;
}
.vr-overlay .vr-prod-stock {
font-size: 9.5px !important;
}
.vr-overlay .vr-prod-lote {
font-size: 9.5px !important;
}
.vr-overlay .vr-prod-add {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
width: 26px !important;
height: 26px !important;
border-radius: 7px !important;
flex-shrink: 0 !important;
background: rgba(26,20,16,.08) !important;
color: #1A1410 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: none !important;
}
.vr-overlay .vr-prod-add:hover {
background: #E8663A !important;
color: #fff !important;
}
.vr-overlay .vr-prod-add svg {
width: 12px !important;
height: 12px !important;
}
.vr-overlay .vr-search-input {
height: 36px !important;
font-size: 12px !important;
border-radius: 9px !important;
padding: 0 36px 0 30px !important;
}
.vr-overlay .vr-search-wrap {
margin-bottom: 10px !important;
}
/* ── Cart: center column, flex col ── */
.vr-overlay .vr-col-carrito {
display: flex !important;
flex-direction: column !important;
border-radius: 0 !important;
border: none !important;
border-right: 1px solid rgba(26,20,16,.06) !important;
background: #FFFFFF !important;
padding: 16px 18px 0 !important;
}
.vr-overlay .vr-col-title {
font-size: 14px !important;
letter-spacing: -.01em !important;
}
.vr-overlay .vr-cart-badge {
width: 20px !important;
height: 20px !important;
font-size: 10px !important;
}
.vr-overlay .vr-vaciar-btn {
font-size: 11px !important;
padding: 5px 10px !important;
}
/* Cart headers + rows: flexible columns that stretch with available space */
.vr-overlay .vr-cart-headers,
.vr-overlay .vr-cart-row {
grid-template-columns: 1.4fr 0.7fr 1fr 0.6fr 22px !important;
gap: 10px !important;
}
.vr-overlay .vr-cart-headers {
padding: 8px 6px !important;
margin-top: 8px !important;
border-bottom: 1.5px solid rgba(26,20,16,.08) !important;
}
.vr-overlay .vr-cart-headers span {
font-family: var(--sans) !important;
font-size: 8px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: .1em !important;
color: rgba(26,20,16,.45) !important;
}
.vr-overlay .vr-cart-row {
padding: 10px 6px !important;
border-bottom: 1px solid rgba(26,20,16,.06) !important;
align-items: center !important;
}
.vr-overlay .vr-cart-prod .vr-prod-avatar {
width: 34px !important;
height: 34px !important;
font-size: 14px !important;
border-radius: 7px !important;
}
.vr-overlay .vr-cart-prod { gap: 8px !important; }
.vr-overlay .vr-cart-prod-name {
font-size: 12px !important;
font-weight: 600 !important;
margin-bottom: 1px !important;
}
.vr-overlay .vr-cart-prod-tag {
font-size: 9px !important;
color: rgba(26,20,16,.48) !important;
}
.vr-overlay .vr-cart-precio {
font-family: var(--sans) !important;
font-size: 11px !important;
font-weight: 500 !important;
white-space: nowrap !important;
color: rgba(26,20,16,.70) !important;
}
.vr-overlay .vr-cart-precio-unit {
font-size: 9px !important;
color: rgba(26,20,16,.42) !important;
}
.vr-overlay .vr-cart-precio .vr-cart-precio-unit {
font-size: 9px !important;
}
.vr-overlay .vr-qty-field {
height: 28px !important;
border-radius: 7px !important;
}
.vr-overlay .vr-qty-field .vr-stepper-input {
width: 44px !important;
font-size: 11px !important;
height: 26px !important;
padding: 0 2px !important;
}
.vr-overlay .vr-qty-field .vr-stepper-unit {
font-size: 9px !important;
padding: 0 5px 0 1px !important;
}
.vr-overlay .vr-cart-qty-inline {
gap: 3px !important;
flex-wrap: nowrap !important;
}
.vr-overlay .vr-cart-qty-inline .vr-qty-field {
flex: 1 1 0 !important;
min-width: 0 !important;
}
.vr-overlay .vr-cart-subtotal {
font-size: 12.5px !important;
white-space: nowrap !important;
}
/* ── Totals compact ── */
.vr-overlay .vr-cart-totals {
padding: 10px 0 12px !important;
border-top: 1px solid rgba(26,20,16,.06) !important;
}
.vr-overlay .vr-totals-row { font-size: 12px !important; }
.vr-overlay .vr-totals-total { font-size: 13px !important; }
.vr-overlay #vr-total { font-size: 22px !important; }
.vr-overlay .vr-pts-preview { font-size: 10px !important; }
/* ── Confirmar button ── */
.vr-overlay .vr-confirmar-btn {
border-radius: 11px !important;
font-size: 13px !important;
padding: 12px !important;
margin: 0 0 14px !important;
}
/* ── Right panel: client, discounts, payment ── */
.vr-overlay .vr-col-right {
display: flex !important;
flex-direction: column !important;
overflow-y: auto !important;
background: #FFFFFF !important;
padding: 0 !important;
border: none !important;
border-radius: 0 0 18px 0 !important;
}
.vr-overlay .vr-right-scroll {
padding: 16px !important;
gap: 10px !important;
}
.vr-overlay .vr-rpanel {
border: 1px solid rgba(26,20,16,.04) !important;
border-radius: var(--radius-lg) !important;
padding: 16px !important;
background: #FFFFFF !important;
box-shadow:
0 0 0 1px rgba(26,20,16,.03),
0 1px 3px rgba(26,20,16,.03),
0 4px 10px rgba(26,20,16,.02) !important;
}
.vr-overlay .vr-rpanel-title {
font-size: 13px !important;
margin-bottom: 10px !important;
}
/* ═══ 24. PEDIDO ═══ */
.pedido-header-box {
background: var(--card-bg-alt);
border: var(--card-border);
border-radius: var(--card-radius);
padding: 16px 20px;
margin-bottom: 20px;
display: flex;
gap: 24px;
align-items: center;
flex-wrap: wrap;
}
.pedido-info-item {
display: flex;
flex-direction: column;
gap: 3px;
}
.pedido-info-label {
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-70);
font-weight: 500;
}
.pedido-info-val {
font-family: var(--mono);
font-size: 13px;
color: var(--char);
font-weight: 500;
}
.pedido-whatsapp-box {
background: rgba(34,165,90, 0.06);
border: 1.5px solid rgba(34,165,90, 0.2);
border-radius: var(--r2);
padding: 14px 16px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.pedido-wa-label {
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--green);
font-weight: 600;
margin-bottom: 4px;
}
.pedido-wa-input {
background: var(--paper);
border: 1.5px solid rgba(34,165,90, 0.25);
color: var(--char);
padding: 8px 10px;
font-family: var(--mono);
font-size: 12px;
outline: none;
border-radius: var(--r);
transition: border-color 0.15s;
width: 220px;
}
.pedido-wa-input:focus {
border-color: rgba(34,165,90, 0.5);
}
.pedido-wa-sub {
font-size: 10px;
color: var(--ink-82);
margin-top: 3px;
}
.pedido-table-wrap {
border: var(--card-border);
border-radius: var(--card-radius);
overflow: hidden;
background: var(--card-bg);
margin-bottom: 20px;
}
.pedido-table-wrap th {
background: var(--paper-2);
}
.pedido-notice {
background: rgba(232,102,58, 0.08);
border: 1.5px solid rgba(232,102,58, 0.28);
border-radius: var(--r2);
padding: 12px 16px;
font-size: 12px;
color: var(--ink-82);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.pedido-notice svg {
flex-shrink: 0;
}
/* ═══ 25. @MEDIA QUERIES ═══ */
@media (max-width: 640px) {
#page-stock .table-wrap {
max-height: none;
}
#page-stock th:first-child,
#page-stock td:first-child {
position: static;
}
#page-stock .stock-prod-name {
font-size: 15px;
line-height: 1.2;
}
}
@media (max-width: 820px) {
#page-stock .table-wrap {
max-height: 60vh !important;
}
}
@media (max-width: 960px) {
#page-movimientos .mov-inspector { display: none; }
}
@media (max-width: 1100px) {
#page-movimientos:has(.mov-inspector .mov-ins-kicker, .mov-inspector .mvd-hd) .mov-list {
margin-right: 340px;
}
#page-movimientos .mov-inspector {
width: 320px !important;
right: -330px !important;
}
}
@media (max-width: 900px) {
#page-movimientos:has(.mov-inspector .mov-ins-kicker, .mov-inspector .mvd-hd) .mov-list {
margin-right: 0;
}
#page-movimientos .mov-inspector:has(.mov-ins-kicker, .mvd-hd) {
right: 0 !important;
}
}
@media (max-width: 640px) {
#page-movimientos .mov-inspector { display: none !important; }
#page-movimientos:has(.mov-inspector .mov-ins-kicker, .mov-inspector .mvd-hd) .mov-list {
margin-right: 0 !important;
}
}
@media (max-width: 600px) {
#toast-c { top: 12px; gap: 8px; }
}
@media (max-width: 960px) {
#sidebar {
position: fixed;
left: -270px;
top: 0;
bottom: 0;
z-index: 200;
width: 260px !important;
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: none;
}
#sidebar.open {
left: 0;
box-shadow: 4px 0 32px rgba(26, 20, 16, 0.35);
}
#sidebar-backdrop.open {
display: block;
}
#main {
margin-left: 0 !important;
}
#urgente-banner {
left: 0;
}
.page {
padding: 36px 18px 80px !important;
}
/* Page header */
.ph {
flex-wrap: wrap;
gap: 10px;
}
/* Stats row: 2 columnas */
/* KPI row: 2 columnas */
/* Charts: una columna */
/* Dual stock */
/* Forms */
.form-row {
grid-template-columns: 1fr;
}
/* Tables: scroll horizontal */
/* Pedido table */
.pedido-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.pedido-table-wrap table {
min-width: 560px;
}
/* Modal */
.modal {
width: 94vw;
max-width: 94vw;
}
/* Transfer */
/* Chat */
.chat-topbar {
padding: 12px 16px;
flex-wrap: wrap;
gap: 8px;
}
.chat-body {
padding: 16px;
}
.chat-footer {
padding: 10px 16px;
}
/* Stats period buttons */
.ph > div:last-child {
flex-wrap: wrap;
}
/* ── DASHBOARD RESPONSIVE ── */
/* Header */
/* KPIs: 2 columnas */
/* Acciones rápidas: 2×2 */
/* Body grid: 1 columna */
/* Tools grid: 1 columna */
/* Panel heads: comprimir */
/* Tabla stock crítico */
/* Sesión / ventas del día */
/* Notas y tareas */
}
@media (max-width: 600px) {
/* Nota + Tareas: apilar en mobile */
#page-dashboard > div[style*="grid-template-columns:1fr 1fr"] {
grid-template-columns: 1fr !important;
}
.topbar {
padding: 0 10px;
gap: 8px;
}
/* Mobile: en la topbar solo se ve logo WAGON/Engine + dropdown del menú.
Todas las acciones de la derecha (Venta rápida, local, usuario, chrome switch,
rt-pill, logout) quedan accesibles desde el dropdown de secciones.
!important necesario porque .topbar-right { display:flex } está declarado
sin media query más adelante en el archivo (línea ~11806) y gana por orden. */
.topbar-right {
display: none !important;
}
/* Menú de secciones alineado a la derecha (topbar-right oculto en mobile) */
.tb-nav-center {
justify-content: flex-end !important;
}
.page {
padding: 32px 12px 72px !important;
}
/* Page header full width */
.ph {
flex-direction: column;
align-items: flex-start;
}
.ph .btn-prime,
.ph .btn-ghost {
width: 100%;
justify-content: center;
}
/* Stats: 2 columnas compactas */
/* KPI */
/* Tables */
/* Modal: slide desde abajo */
#modal-overlay {
position: fixed;
inset: 0;
background:
radial-gradient(120% 120% at 50% 50%, rgba(232,102,58, 0.08) 0%, rgba(232,102,58, 0) 58%),
linear-gradient(180deg, rgba(24, 18, 14, 0.56), rgba(24, 18, 14, 0.48));
z-index: 9000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.modal {
width: 100vw;
max-width: 100vw;
height: auto;
min-height: 0;
max-height: 92dvh;
border-radius: 24px 24px 0 0;
animation: slide-up 0.25s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden; /* hidden para que el body sea quien scrollee */
display: flex;
flex-direction: column;
}
.modal-head {
padding: 22px 18px 16px;
}
.modal-head h3 {
font-family: var(--sans);
font-size: 20px;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--char);
text-align: center;
}
.modal-body {
padding: 18px;
overflow-y: auto; /* scroll real en mobile */
min-height: 0;
flex: 1 1 auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.modal-foot {
padding: 12px 18px 16px;
}
@keyframes slide-up {
from {
transform: translateY(100%);
opacity: 0.5;
}
to {
transform: none;
opacity: 1;
}
}
/* Forms */
.form-row {
grid-template-columns: 1fr;
}
.qty-row {
flex-wrap: wrap;
}
.qty-row select {
width: 100%;
}
/* Mov filters: scroll horizontal */
/* Chat */
.chat-topbar {
padding: 10px 12px;
}
.chat-topbar h2 {
font-size: 15px;
}
.chat-topbar > div:last-child {
flex-wrap: wrap;
gap: 6px;
}
.chat-body {
padding: 12px;
}
.chat-footer {
padding: 8px 12px;
}
/* Ocultar tags de locales en chat topbar */
.chat-topbar .tag {
display: none;
}
/* WA box dashboard */
/* Pedido */
.pedido-header-box {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.pedido-whatsapp-box {
flex-direction: column;
align-items: stretch;
}
.pedido-whatsapp-box > div:last-child {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pedido-whatsapp-box .btn-ghost,
.pedido-whatsapp-box .btn-prime {
flex: 1;
justify-content: center;
font-size: 10px;
}
.pedido-wa-input {
width: 100%;
}
/* Transfer */
/* Urgente banner */
/* Vencimientos */
/* Precios */
/* Login mobile — manejado por breakpoints en la sección login */
/* Mov row más compacto */
/* Rev card */
/* ph-actions en mobile: full width */
}
@media (max-width: 640px) {
.vr-search-block,
.vr-products-wrap,
.vr-panel,
.vr-prod-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
}
.vr-prod-card {
padding: 10px 11px;
}
.vr-prod-name {
font-size: 13px;
}
.vr-item {
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: start;
}
.vr-item-subtotal,
}
@media (max-width: 960px) {
#urgente-flash { left: 0; }
}
@media (max-width: 600px) {
.chat-toast { right: 16px; bottom: 80px; width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) {
.chat-toast { animation: none; opacity: 1; transform: none; }
.chat-toast-icon { animation: none; }
}
@media (max-width: 640px) {
#alerta-venc-overlay {
padding-left: 12px;
padding-right: 12px;
padding-top: max(12px, env(safe-area-inset-top, 0px));
padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
align-items: flex-end;
}
#alerta-venc-panel {
width: 100%;
max-height: calc(100vh - max(12px, env(safe-area-inset-top, 0px)) - max(12px, env(safe-area-inset-bottom, 0px)));
border-radius: 18px 18px 0 0;
}
.av-head,
.av-body,
.av-foot {
padding-left: 14px;
padding-right: 14px;
}
.av-item {
grid-template-columns: 10px 1fr;
gap: 10px;
align-items: start;
}
.av-badge {
margin-top: 6px;
justify-self: start;
}
}
@media (max-width: 600px) {
.cc-comp-delta { font-size: 9px; padding: 2px 5px; }
.cc-pago-filtro-btn { font-size: 10px; padding: 3px 8px; }
#chat-float-panel { width: 100vw; }
.cf-head { padding: 14px 16px 12px; }
.cf-head-title { font-size: 16px; }
.cf-body { padding: 14px 14px; gap: 12px; }
#chat-float-btn { right: 16px; bottom: 16px; width: 48px; height: 48px; }
#chat-float-btn svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
#chat-float-panel { transition: opacity 0.18s ease; }
#chat-float-panel.hidden { transform: translateX(0); opacity: 0; }
}
@media (max-width:640px) {
.costo-cal-day { min-height:32px; }
}
@media (max-width: 960px) {
#page-dashboard .dash-time {
font-size: 34px;
}
}
@media (max-width: 600px) {
#page-dashboard .dash-time {
font-size: 28px;
}
#page-dashboard .dash-status-dot {
font-size: 9px;
padding: 3px 7px;
}
#page-dashboard #ds-sparkline {
display: none;
}
#page-dashboard #ds-medios {
gap: 4px;
margin-top: 7px;
}
#page-dashboard .dash-panel {
border-radius: var(--radius-md);
}
#page-dashboard .nota-item {
padding-left: 10px;
padding-right: 10px;
}
}
@media (max-width: 640px) {
#page-carga .ph { padding: 0 0 16px 0; }
#page-carga #carga-tabla-wrap { border-radius: 8px; }
#page-carga #carga-tabla-content table { min-width: 920px; }
#page-carga > div:has(#carga-local) { padding: 12px !important; border-radius: 8px; }
#page-carga > div:has(#carga-base-global) { padding: 13px 14px !important; border-radius: 8px !important; }
}
@media (prefers-reduced-motion: reduce) {
#page-clientes .btn-icon {
transition: none;
}
}
@media (max-width: 640px) {
#page-clientes .ph {
padding: 11px 11px;
border-radius: var(--r);
}
}
@media (max-width: 1100px) {
#pages {
border-top-left-radius: 0;
}
#page-dashboard.dashboard-core .dash-body-grid {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"sesion stock"
"tools tools";
}
}
@media (max-width: 960px) {
#page-dashboard.dashboard-core .dash-time { font-size: 34px; }
#page-dashboard.dashboard-core .dash-body-grid {
grid-template-columns: 1fr;
grid-template-areas:
"sesion"
"stock"
"tools";
gap: 10px;
}
}
@media (max-width: 600px) {
#page-dashboard.dashboard-core .dash-panel { border-radius: var(--radius-md); }
}
@media (max-width: 960px) {
#menu-toggle{
display: flex;
margin-right: 10px;
}
.topbar-right{
gap: 8px;
margin-left: auto;
}
}
@media (max-width: 600px) {
#menu-toggle {
margin-right: 8px;
}
}
@media (hover: none), (pointer: coarse) {
.ni[data-tip]::before,
.ni[data-tip]::after {
content: none;
display: none !important;
}
}
@media (max-width: 720px) {
#page-dashboard .dash-venc-head,
#page-dashboard .dash-venc-row {
grid-template-columns: 1.2fr .8fr .45fr;
}
}
@media (max-width: 900px) {
#page-dashboard {
padding: 12px;
}
}
@media (max-width: 760px) {
#page-dashboard .dash-venc-head {
display: none;
}
#page-dashboard .dash-venc-row {
grid-template-columns: 1fr;
gap: 5px;
padding: 8px 10px;
}
#page-dashboard .dash-venc-days {
text-align: left;
}
}
@media (prefers-reduced-motion: reduce) {
#page-dashboard #dth.clock-digit-flip,
#page-dashboard #dtm.clock-digit-flip {
animation: none;
}
}
@media (max-width: 900px) {
body #page-costos.section-core {
--cos-gap: 14px;
--cos-pad-x: 18px;
}
body #page-costos.section-core .costo-table-card,
body #page-costos.section-core #costo-quick-section,
body #page-costos.section-core .costo-quick-section {
padding-left: var(--cos-pad-x);
padding-right: var(--cos-pad-x);
}
}
@media (max-width: 1200px) {
#page-dashboard.page,
.page#page-dashboard{
padding: 48px 48px 48px !important;
}
.nd-body{
grid-template-columns: 1fr 290px;
}
.nd-mix-donut { width: 110px; height: 110px; }
}
@media (max-width: 960px) {
#page-dashboard.page,
.page#page-dashboard { padding: 32px 24px 40px !important; }
.nd-date { font-size: 12px; }
/* Body: una sola columna */
.nd-body { grid-template-columns: 1fr; gap: 16px; }
/* Columna lateral pasa a grilla 2 cols */
.nd-col-side {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
/* El primer card (mix) ocupa ancho completo */
.nd-col-side > .nd-card:first-child { grid-column: 1 / -1; }
/* Donut mix más pequeño */
.nd-mix-donut { width: 100px; height: 100px; }
/* Ventas recientes: ocultar total en mobile */
}
@media (max-width: 640px) {
#page-dashboard.page,
.page#page-dashboard { padding: 20px 16px 32px !important; }
/* Body col-side: 1 columna en mobile */
.nd-col-side {
grid-template-columns: 1fr;
}
.nd-col-side > .nd-card:first-child { grid-column: auto; }
/* Cards */
.nd-card { padding: 16px; }
.nd-card-title { font-size: 15px; }
/* Ventas recientes: avatar más pequeño + grid reducido para evitar overflow */
/* Oculto en mobile: el total se ve al tocar el row / en el listado */
/* Ranking: ocultar barra en mobile muy chico */
}
@media (max-width: 768px) {
.tb-brand { display: flex; }
.tb-mobile-menu { display: flex; }
/* v7.24.0 · Topbar mobile limpio: solo hamburguesa + controles de sección + campana.
Ocultar logo WAGON, separador y "Engine" SOLO dentro de .topbar > .tb-brand.
Los mismos elementos dentro del sidebar (.tb-nav-dropdown .sb-brand) NO se tocan. */
.topbar .tb-brand .tb-wagon-logo { display: none !important; }
.topbar .tb-brand .tb-engine-sep { display: none !important; }
.topbar .tb-brand .tb-engine { display: none !important; }
/* Ocultar título de sección — libera espacio horizontal para los controles (search, selects).
El usuario sabe en qué página está por el header de la propia página. */
.tb-nav-center { display: none !important; }
/* tb-brand queda solo con el hamburger — reducir gap y margin */
.tb-brand { gap: 0; margin-right: 6px; }
/* tb-action-zone: overflow VISIBLE para que los dropdowns no se corten */
#tb-action-zone {
flex: 1 !important;
max-width: none !important;
overflow: visible !important;
}
/* tb-action-scroll-inner: scroll horizontal sin mask-image.
mask-image crearía un stacking context que convierte position:fixed hijos
en relativos al inner — los dropdown menus quedarían mal posicionados. */
.tb-action-scroll-inner {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
width: 100%;
}
.tb-action-scroll-inner::-webkit-scrollbar { display: none; }
/* Fade de affordance: div hermano inyectado por JS (.tb-action-fade).
Está en #tb-action-zone (overflow: visible) → no recorta ni crea stacking context.
pointer-events: none para no bloquear clicks en los controles. */
#tb-action-zone { position: relative; }
.tb-action-fade {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 32px;
background: linear-gradient(to right, transparent 0%, #fdfcfb 100%);
pointer-events: none;
z-index: 2;
flex-shrink: 0;
}
/* Los items del inner no se encogen */
.tb-action-scroll-inner > * { flex-shrink: 0; }
/* Buscadores: tamaño fijo razonable para dejar controles visibles al lado */
.tb-action-scroll-inner .sk-search-wrap,
.tb-action-scroll-inner .mv2-search-wrap,
.tb-action-scroll-inner .v3-tb-search,
.tb-action-scroll-inner .pr-search-wrap,
.tb-action-scroll-inner .cli-master-bar { flex: 0 0 160px !important; min-width: 0 !important; }
/* Topbar más compacto horizontalmente */
.topbar { gap: 8px; padding: 0 14px; }
.tb-nav-dropdown {
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.26, 1);
box-shadow: 6px 0 24px rgba(26, 20, 16, 0.10);
width: min(280px, 84vw);
}
.tb-nav-dropdown.open { transform: translateX(0); }
#main { margin-left: 0 !important; width: 100% !important; }
.nav-handle { display: flex; }
}
@media (max-width:800px) {
.vc2-table { min-width:700px; }
}
@media (max-width: 760px) {
.cli-master-bar { flex-wrap:wrap; }
.cli-master-bar input { flex:1 1 100%; }
.cli-btn-new { margin-left:0; }
}
@media (max-width: 900px) {
.cli-btn-new { margin-top: 0; }
.cli-controls { flex-direction: column; align-items: stretch; }
.cli-master-bar input { flex: 1 1 auto; width: 100%; }
#page-clientes .cli-mkpi { min-height: 132px; }
}
@media (max-width: 820px) {
#page-carga.cmv2 .cmv2-toolbar,
}
@media (max-width: 960px) {
#page-stock { padding: 48px 32px 40px !important; }
.sk-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.sk-title { font-size: 32px; }
}
@media (max-width: 640px) {
#page-stock { padding: 32px 14px 72px !important; }
.sk-header { margin-bottom: 18px; }
.sk-title { font-size: 26px; }
.sk-subtitle { font-size: 12px; }
.sk-header-right { width: 100%; }
.sk-header-right .sk-btn-ghost,
.sk-header-right .sk-btn-primary { flex: 1; justify-content: center; white-space: nowrap; padding: 9px 10px; font-size: 12px; }
.sk-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; margin-bottom: 16px; }
.sk-kpi-card { padding: 14px 14px; border-radius: var(--radius-md); min-width: 0; }
.sk-filter-bar { padding: 12px 12px; border-radius: 12px; }
.sk-filter-top { flex-wrap: wrap; gap: 8px; }
.sk-search-wrap { flex: 1 1 100%; min-width: 0; }
.sk-sucursal-wrap { flex: 1 1 100%; min-width: 0; }
.sk-locf-sel { flex: 1; min-width: 0; }
.sk-filter-bottom { gap: 10px; }
.sk-fpill { padding: 5px 10px; font-size: 11px; }
.sk-table-wrap { border-radius: 10px; }
/* Primera columna (PRODUCTO) sticky: fondo opaco + sombra para no superponerse */
#page-stock .sk-table-wrap th:first-child,
#page-stock .sk-table-wrap td:first-child,
#page-stock th:first-child,
#page-stock td:first-child {
background: #fff !important;
z-index: 3;
box-shadow: 2px 0 6px rgba(26,20,16,0.06);
}
#page-stock .sk-table-wrap thead th:first-child {
background: #fff !important;
z-index: 4;
}
#page-stock .sk-table-wrap tbody tr:hover td:first-child { background: #fdfcfa !important; }
#page-stock .sk-table-wrap tbody tr.stock-lotes-row td:first-child { background: #fafaf7 !important; }
/* Header + título compactos */
/* Filters: apilados verticales */
.mv-pill { font-size: 11.5px; padding: 5px 10px; }
/* Tabla: scroll horizontal dentro del card */
.mv-table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); }
.mv-table { min-width: 640px; } /* fuerza scroll horizontal si viewport < 640 */
.mv-table th { padding: 11px 12px; font-size: 8.5px; }
.mv-table td { padding: 12px 12px; }
/* Inspector drawer: full-screen en mobile (sin floating) */
.mv-inspector {
width: 100vw !important;
right: -100vw;
top: var(--topbar, 54px) !important;
bottom: 0;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
}
body:has(#page-movimientos.active) .mv-inspector:has(.mov2-ins-hd, .mvd-hd) { right: 0 !important; }
/* Botón "Registrar gasto" reducido */
#page-costos .co-btn-primary {
padding: 9px 14px;
font-size: 12.5px;
gap: 6px;
margin-top: 4px;
}
#page-costos .co-btn-primary svg { width: 11px; height: 11px; }
/* Header compacto */
#page-costos .co-header { margin-bottom: 16px; gap: 10px; }
#page-costos .co-title { font-size: 26px; }
#page-costos .co-subtitle { font-size: 12px; }
/* Sub-nav: scroll horizontal (4 tabs no entran en 375px) */
#page-costos .co-topbar { gap: 10px; margin-bottom: 18px; }
#page-costos .co-subnav {
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
flex-wrap: nowrap;
}
#page-costos .co-subnav::-webkit-scrollbar { display: none; }
#page-costos .co-subnav-btn {
padding: 7px 14px;
font-size: 12.5px;
flex-shrink: 0;
}
/* Período bar: misma lógica, compact */
#page-costos .co-period-bar { flex-wrap: nowrap; }
#page-costos .co-period-btn { padding: 7px 12px; font-size: 12px; }
/* Cards de chart */
#page-costos .co-card { padding: 16px 14px; border-radius: var(--radius-md); }
#page-costos .co-card-title { font-size: 18px; margin-bottom: 12px; }
#page-costos .co-chart-wrap { height: 240px; }
/* KPI row 3 (Evolución): 3 cols compactas, sin overflow */
#page-costos .co-kpi-row-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#page-costos .co-kpi3 {
padding: 12px 8px;
border-radius: 12px;
min-width: 0;
overflow: hidden;
}
#page-costos .co-kpi3-label {
font-size: 8.5px;
letter-spacing: 0.08em;
margin-bottom: 6px;
line-height: 1.2;
}
#page-costos .co-kpi3-val {
font-size: 17px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#page-costos .co-kpi3-delta { font-size: 9px; margin-top: 5px; }
#page-costos .co-kpi3-sub { font-size: 10px; margin-top: 5px; }
#page-costos .co-alert-trend { padding: 14px 16px; gap: 10px; border-radius: 12px; }
#page-costos .co-alert-trend-title { font-size: 13px; }
#page-costos .co-alert-trend-desc { font-size: 12px; }
#page-costos .co-top-cat-monto { font-size: 13px; min-width: 60px; }
#page-costos .co-top-cat-head { gap: 6px; }
/* --- RENTABILIDAD: responsive --- */
#page-costos .co-body-2col {
grid-template-columns: 1fr;
gap: 12px;
}
#page-costos .co-bd-header,
#page-costos .co-bd-row {
grid-template-columns: 1fr 80px 60px 70px;
gap: 4px;
}
#page-costos .co-bd-monto { font-size: 12px; }
#page-costos .co-bd-pct { font-size: 10px; }
#page-costos .co-bd-delta { font-size: 9px; }
#page-costos .co-equil-val { font-size: 22px; }
#page-costos .co-proy-util-val { font-size: 22px; }
#page-costos .co-fv-val { font-size: 18px; }
#page-costos .co-suc-compare { grid-template-columns: 1fr; gap: 12px; }
#page-costos .co-suc-cmp-item { padding: 14px 16px; }
#page-costos .co-suc-cmp-val { font-size: 14px; }
/* Gauge: escala al ancho disponible */
#page-costos .co-gauge-wrap {
width: 100%;
max-width: 220px;
margin: 16px auto 4px;
}
/* Gastos por categoría: donut arriba + leyenda abajo */
#page-costos .co-cat-inner {
flex-direction: column;
align-items: stretch;
gap: 14px;
}
#page-costos .co-cat-donut-wrap {
width: 140px;
height: 140px;
margin: 0 auto;
}
#page-costos .co-cat-legend { width: 100%; }
#page-costos .co-cat-leg-item { font-size: 12px; }
/* --- REGISTRO DE GASTOS: search + tabla con scroll horizontal --- */
#page-costos .co-search-wrap {
width: 100%;
padding: 9px 14px;
}
#page-costos .co-search-input { font-size: 13px; }
#page-costos .co-table-card {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 12px;
}
#page-costos .co-table { min-width: 720px; font-size: 13px; }
#page-costos .co-table thead th {
padding: 11px 14px;
font-size: 9px;
letter-spacing: 0.1em;
white-space: nowrap;
}
#page-costos .co-table tbody td { padding: 12px 14px; }
#page-costos .co-td-date { font-size: 12px !important; }
#page-costos .co-td-monto { font-size: 14px; }
#page-costos .co-td-acciones-wrap { opacity: 1; }
/* --- POR SUCURSAL: grid 2-col → 1 col apilado --- */
#page-costos .co-suc-grid {
grid-template-columns: 1fr;
gap: 12px;
}
#page-costos .co-suc-card {
padding: 16px 16px;
border-radius: 12px;
min-width: 0;
overflow: hidden;
}
#page-costos .co-suc-card-head { gap: 10px; flex-wrap: wrap; }
#page-costos .co-suc-card-name { font-size: 16px; gap: 7px; min-width: 0; }
#page-costos .co-suc-icon { width: 26px; height: 26px; }
#page-costos .co-suc-total { font-size: 20px; }
#page-costos .co-suc-pct { font-size: 11px; }
#page-costos .co-suc-meta { font-size: 11px; margin-bottom: 8px; }
#page-costos .co-suc-breakdown-row { font-size: 12.5px; gap: 10px; min-width: 0; }
#page-costos .co-suc-breakdown-amt {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* KPI grid dentro de card de sucursal: 2 columnas compactas */
#page-costos .co-suc-kpi-grid {
gap: 8px;
padding: 10px;
margin: 12px 0 12px;
}
#page-costos .co-suc-kpi-lbl { font-size: 8.5px; letter-spacing: 0.08em; }
#page-costos .co-suc-kpi-val { font-size: 14px; }
#page-costos .co-suc-breakdown-title { font-size: 9px; }
/* Ranking: filas más compactas */
#page-costos .co-rank-card { padding: 16px 14px; }
#page-costos .co-rank-row {
grid-template-columns: 40px 1fr auto;
gap: 10px;
padding: 10px 12px;
row-gap: 6px;
}
#page-costos .co-rank-row .co-rank-metric:nth-child(4) {
grid-column: 2 / 4;
text-align: left;
display: flex;
align-items: center;
gap: 8px;
}
#page-costos .co-rank-row .co-rank-metric:nth-child(4) .co-rank-metric-lbl { margin-bottom: 0; }
#page-costos .co-rank-pos { font-size: 11px; gap: 4px; }
#page-costos .co-rank-medal svg { width: 14px; height: 14px; }
#page-costos .co-rank-name-top { font-size: 14.5px; }
#page-costos .co-rank-name-sub { font-size: 10.5px; }
#page-costos .co-rank-metric-lbl { font-size: 8.5px; }
#page-costos .co-rank-metric-val { font-size: 13px; }
#page-costos .co-rank-footer { font-size: 11px; line-height: 1.5; }
#page-precios .pr-header {
flex-direction: row;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
#page-precios .pr-header-left { flex: 1; min-width: 0; }
#page-precios .pr-eyebrow { font-size: 9px; letter-spacing: 0.18em; margin-bottom: 3px; }
#page-precios .pr-title { font-size: 26px; letter-spacing: -0.02em; line-height: 1.05; }
#page-precios .pr-subtitle { font-size: 11.5px; line-height: 1.35; margin-top: 3px; }
.pr-save-btn {
padding: 9px 14px !important;
font-size: 12px !important;
border-radius: 100px;
flex-shrink: 0;
}
.pr-save-btn .pr-btn-label { gap: 5px; }
.pr-save-btn svg { width: 11px; height: 11px; }
/* Filtros: search + select en fila, compactos */
.pr-filter-bar { gap: 8px; margin-bottom: 14px; }
.pr-search-wrap { width: auto; flex: 1 1 60%; height: 38px; min-width: 0; }
.pr-search-input { font-size: 12.5px; }
.pr-filter-select {
flex: 1 1 40%;
height: 38px;
font-size: 12.5px;
padding: 0 10px;
min-width: 0;
}
}
@media (max-width: 1399px) {
#pages > .page,
#pages > .page.section-core {
padding: 46px 36px 60px !important;
}
}
@media (max-width: 1100px) {
#pages > .page,
#pages > .page.section-core {
padding: 40px 28px 64px !important;
}
}
@media (max-width: 768px) {
#pages > .page,
}
@media (max-width: 1100px) {
.trf-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.trf-route { grid-template-columns: 1fr; }
.trf-route-arrow { display: none; }
.trf-card-head { padding: 18px 18px 14px; }
.trf-card-body { padding: 18px; gap: 18px; }
.trf-card-foot { padding: 14px 18px 16px; }
.trf-kpis { grid-template-columns: 1fr 1fr; }
.trf-kpis .trf-kpi:last-child { grid-column: 1 / -1; }
.trf-filters { padding: 14px 16px; }
.trf-filter-group { flex-direction: column; align-items: stretch; gap: 6px; }
.trf-history { padding: 6px 8px 12px; }
}
@media (max-width: 1100px) {
#page-cierre .cc3-hero { padding: 24px 24px 22px; }
}
@media (max-width: 768px) {
#page-cierre .cc3-page-head { margin-bottom: 26px; }
#page-cierre .cc3-hero { padding: 22px 20px 20px; border-radius: var(--radius-md); }
#page-cierre .cc3-hero-stat { padding-left: 0; padding-top: 12px; }
#page-cierre .cc3-hero-stat::before {
top: 0; left: 0; right: 0; bottom: auto;
width: auto; height: 1px;
}
#page-cierre .cc3-hero-stat:first-child { padding-top: 0; }
#page-cierre .cc3-action { padding: 20px 20px 18px; border-radius: var(--radius-md); }
}
@media (max-width: 1100px) {
#page-cierre .cc3-anatomy-row-2col { grid-template-columns: 1fr; }
#page-cierre .cc3-arqueo-grid { grid-template-columns: 1fr; }
#page-cierre .cc3-arqueo-grid > section + section {
border-left: none;
border-top: 1px solid rgba(26, 20, 16, 0.06);
}
}
@media (max-width: 768px) {
#page-cierre .cc3-pago-filtro span:not(:only-child) { display: none; }
#page-cierre .cc3-pago-filtro { padding: 6px 9px; }
#page-cierre .cc3-anatomy-head { padding: 18px 18px 14px; }
#page-cierre .cc3-anatomy-head-tight { padding: 16px 18px 12px; }
#page-cierre .cc3-anatomy-title { font-size: 19px; }
#page-cierre .cc3-arqueo-grid > section { padding: 18px 18px 22px; }
#page-cierre .cc3-medios-body { gap: 16px; }
#page-cierre .cc3-arqueo-input { width: 130px; }
#page-cierre .cc3-nota-input { width: calc(100% - 36px); margin: 4px 18px 18px; }
}
@media (max-width: 900px) {
#page-cierre .cc3-hist-row {
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto;
gap: 12px;
}
#page-cierre .cc3-hist-actions {
grid-column: 1 / -1;
opacity: 1;
transform: none;
justify-content: flex-end;
}
#page-cierre .cc3-comp-stat { padding: 10px 12px; min-width: 100px; }
#page-cierre .cc3-comp-stat-val { font-size: 16px; }
#page-cierre .cc3-hist-search { width: 100%; }
}
@media (max-width: 768px) {
#page-cierre .cc3-comp-body { padding: 16px 12px 18px; }
#page-cierre .cc3-hist-row { padding: 12px 16px; }
#page-cierre .cc3-hist-date-pill { width: 48px; height: 54px; }
#page-cierre .cc3-hist-date-day { font-size: 17px; }
#page-cierre .cc3-hist-total { font-size: 16px; }
#page-cierre .cc3-hist-medios { gap: 10px; }
#page-cierre .cc3-hist-obs-editor { margin: 0 16px 12px; }
}
@media (max-width: 1100px) {
#page-cierre .cc3-anatomy-ventas { height: 520px; }
#page-cierre .cc3-anatomy-row-2col .cc3-anatomy-ranking { display: block; }
#page-cierre .cc3-anatomy-row-2col .cc3-anatomy-ranking > .cc3-ranking-body {
overflow: visible;
max-height: none;
}
#page-movimientos .mv2-kpi-strip { grid-template-columns: repeat(3, 1fr); }
#page-movimientos .mv2-kpi:nth-child(3) { border-right: none; }
#page-movimientos .mv2-kpi:nth-child(n+4) { border-top: 1px solid rgba(26, 20, 16, 0.06); }
}
@media (max-width: 640px) {
#page-movimientos .mv2-kpi-strip { grid-template-columns: repeat(2, 1fr); }
#page-movimientos .mv2-kpi { border-right: none !important; }
#page-movimientos .mv2-kpi:nth-child(odd) { border-right: 1px solid rgba(26, 20, 16, 0.06) !important; }
#page-movimientos .mv2-kpi:nth-child(n+3) { border-top: 1px solid rgba(26, 20, 16, 0.06); }
}
@media (max-width: 920px) {
#page-vencimientos .v3-triptico {
grid-template-columns: 1fr 1fr;
}
#page-vencimientos .v3-card-hero { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
#page-vencimientos .v3-triptico { grid-template-columns: 1fr; }
#page-vencimientos .v3-card-hero { grid-column: auto; }
}
@media (max-width: 768px) {
#page-vencimientos .v3-tb-row {
flex-wrap: wrap;
gap: 6px;
}
.v3-tb-search { flex-basis: 100%; }
#page-vencimientos .v3-tb-divider { display: none; }
#page-vencimientos .v3-tb-spacer { display: none; }
.v3-tb-export { margin-left: auto; }
}
@media (max-width: 800px) {
#page-vencimientos .vc2-table { min-width: 640px; }
#page-vencimientos .vc2-table tbody td { padding: 10px 12px; }
#page-vencimientos .vc2-table thead th { padding: 10px 12px; }
}
@media (max-width: 768px) {
#mov-inspector .mvd-doc { padding: 18px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 1ms !important;
animation-delay: 0ms !important;
transition-duration: 1ms !important;
animation-iteration-count: 1 !important;
}
}
@media (max-width: 480px) {
.notif-panel { width: calc(100vw - 16px); right: 8px; }
}
@media (max-width: 1300px) {
.tb-action-zone .sk-fpill-row .sk-fpill[data-val="Otros"],
.tb-action-zone .sk-fpill-row .sk-fpill[data-val="Condimentos"] { display: none; }
}
@media (max-width: 1100px) {
.tb-action-zone { gap: 4px; }
.tb-action-zone .sk-search-wrap { flex-basis: 180px; }
.tb-action-zone .sk-btn-ghost { display: none; }
.tb-action-zone .sk-fpill-row .sk-fpill[data-val="Especiales"] { display: none; }
}
@media (max-width: 900px) {
.tb-action-zone .sk-fpill-row { display: none; }
}
@media (max-width: 768px) {
.tb-action-zone .sk-search-wrap { flex-basis: 130px; }
.tb-action-zone .sk-sucursal-wrap { display: none; }
}
@media (max-width: 960px) {
#tb-action-zone {
position: static;
transform: none;
flex: 1 !important;
max-width: none;
justify-content: flex-start;
}
.tb-action-zone.has-content::before { display: block !important; }
}
/* ═══════════════════════════════════════════════════════════════
v7.19.0 — MODAL EDITORIAL (Lacca Nera redesign)
Aplica a .modal.lx-modal y derivados (.lx-*).
═══════════════════════════════════════════════════════════════ */
.modal.lx-modal{
width: 480px;
max-width: calc(100vw - 32px);
max-height: min(90vh, 940px);
background: #fff;
border: 1px solid rgba(26,20,16,.08);
border-radius: 22px;
box-shadow:
0 32px 80px rgba(26,20,16,.22),
0 8px 24px rgba(26,20,16,.10),
0 1px 0 rgba(255,255,255,.6) inset;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 0;
}
/* HEAD */
.lx-modal .lx-modal-head{
padding: 22px 24px 18px;
border-bottom: 1px solid rgba(26,20,16,.08);
background: #fff;
position: relative;
}
.lx-modal .lx-modal-corner{
position: absolute;
top: 18px; right: 62px;
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: #766960;
display: flex;
align-items: center;
gap: 8px;
}
.lx-modal .lx-modal-corner::before{
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: #22a96a;
box-shadow: 0 0 0 3px rgba(34,169,106,.18);
}
.lx-modal .lx-modal-head-row{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
.lx-modal .lx-modal-eyebrow{
font-family: var(--mono);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: #E8663A;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.lx-modal .lx-modal-eyebrow::before{
content: "";
width: 18px; height: 1px;
background: #E8663A;
}
.lx-modal .lx-modal-title{
font-family: var(--serif);
font-size: 22px;
font-weight: 600;
letter-spacing: -.015em;
line-height: 1.08;
color: #1A1410;
margin: 0 0 6px;
text-align: left;
}
.lx-modal .lx-modal-sub{
font-size: 13px;
line-height: 1.5;
color: #766960;
max-width: 50ch;
margin: 0;
}
.lx-modal .lx-modal-sub .lx-req-dot{
color: #E8663A;
font-weight: 700;
}
.lx-modal .lx-modal-close{
flex-shrink: 0;
width: 34px; height: 34px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid rgba(26,20,16,.14);
color: #766960;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0;
transition: .18s ease;
}
.lx-modal .lx-modal-close:hover{
background: #f6f4f1;
border-color: #1A1410;
color: #1A1410;
transform: rotate(90deg);
}
/* BODY */
.lx-modal .lx-modal-body{
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 6px 24px 20px;
background: #fdfcfb;
scrollbar-width: thin;
scrollbar-color: rgba(26,20,16,.14) transparent;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.lx-modal .lx-modal-body::-webkit-scrollbar{ width: 8px; }
.lx-modal .lx-modal-body::-webkit-scrollbar-thumb{
background: rgba(26,20,16,.14);
border-radius: 8px;
}
/* SECTIONS */
.lx-modal .lx-section{ padding: 20px 0 2px; }
.lx-modal .lx-section + .lx-section{
border-top: 1px solid rgba(26,20,16,.08);
margin-top: 6px;
}
.lx-modal .lx-section-label{
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: #766960;
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 16px;
}
.lx-modal .lx-section-label .lx-dot{
width: 5px; height: 5px;
border-radius: 50%;
background: #1A1410;
}
/* GRID */
.lx-modal .lx-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 14px;
}
.lx-modal .lx-fg{
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
}
.lx-modal .lx-fg.span-2{ grid-column: 1 / -1; }
.lx-modal .lx-fg > label{
font-family: var(--mono);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: #3a3128;
display: flex;
align-items: center;
gap: 6px;
margin: 0;
}
.lx-modal .lx-fg > label .lx-opt{
font-family: var(--sans);
font-weight: 500;
font-size: 9px;
letter-spacing: .06em;
text-transform: none;
color: #766960;
padding: 2px 7px;
background: #f6f4f1;
border-radius: 999px;
}
.lx-modal .lx-fg > label .lx-req{
color: #E8663A;
font-weight: 700;
}
.lx-modal .lx-fg input,
.lx-modal .lx-fg select{
width: 100%;
font-family: var(--sans);
font-size: 13.5px;
font-weight: 500;
color: #1A1410;
background: rgba(26,20,16,.035);
border: 1px solid rgba(26,20,16,.08);
border-radius: 11px;
padding: 11px 14px;
margin: 0;
transition: .16s ease;
-webkit-appearance: none;
appearance: none;
box-shadow: none;
height: auto;
letter-spacing: 0;
text-transform: none;
}
.lx-modal .lx-fg input::placeholder{
color: rgba(26,20,16,.30);
font-weight: 400;
}
.lx-modal .lx-fg input:hover,
.lx-modal .lx-fg select:hover{
background: rgba(26,20,16,.05);
border-color: rgba(26,20,16,.14);
}
.lx-modal .lx-fg input:focus,
.lx-modal .lx-fg select:focus{
outline: none;
background: #fff;
border-color: #1A1410;
box-shadow: 0 0 0 3px rgba(26,20,16,.06);
}
.lx-modal .lx-fg select{
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 11px;
padding-right: 38px;
cursor: pointer;
}
.lx-modal .lx-fg input.mono{
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: .02em;
}
.lx-modal .lx-hint{
font-size: 11px;
color: #766960;
line-height: 1.45;
padding-left: 2px;
}
/* SUB-GRID (peso min/max) */
.lx-modal .lx-sub-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.lx-modal .lx-sf{
display: flex;
flex-direction: column;
gap: 4px;
}
.lx-modal .lx-sf-lbl{
font-family: var(--mono);
font-size: 8.5px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: #766960;
}
/* FOOT */
.lx-modal .lx-modal-foot{
border-top: 1px solid rgba(26,20,16,.08);
padding: 14px 24px 16px;
background: #fff;
display: flex;
flex-direction: column;
gap: 12px;
position: sticky;
bottom: 0;
z-index: 2;
}
.lx-modal .lx-switch-row{
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
background: #f6f4f1;
border: 1px solid rgba(26,20,16,.08);
border-radius: 12px;
font-size: 12.5px;
color: #3a3128;
cursor: pointer;
transition: .16s;
}
.lx-modal .lx-switch-row:hover{
border-color: rgba(26,20,16,.14);
}
.lx-modal .lx-switch-row input[type="checkbox"]{
width: 15px;
height: 15px;
accent-color: #1A1410;
margin: 0;
}
.lx-modal .lx-switch-row strong{
color: #1A1410;
font-weight: 600;
}
.lx-modal .lx-switch-row .lx-switch-tag{
margin-left: auto;
font-family: var(--mono);
font-size: 9px;
letter-spacing: .16em;
text-transform: uppercase;
color: #5a4f47;
background: rgba(26,20,16,.05);
padding: 3px 8px;
border-radius: var(--radius-xs, 6px);
}
/* ── Error states para validación ── */
.lx-modal .lx-fg.has-error input,
.lx-modal .lx-fg.has-error select {
border-color: #d44a2c !important;
box-shadow: 0 0 0 3px rgba(212,74,44,.08);
}
.lx-modal .lx-fg.has-error label {
color: #d44a2c;
}
.lx-modal .lx-fg .lx-error-msg {
display: none;
font-family: var(--sans);
font-size: 11px;
color: #d44a2c;
margin-top: 4px;
letter-spacing: 0;
}
.lx-modal .lx-fg.has-error .lx-error-msg {
display: block;
}
.lx-modal .lx-modal-actions{
display: flex;
gap: 9px;
justify-content: flex-end;
}
/* GHOST BUTTON (scoped) */
.lx-modal .lx-btn-ghost{
background: transparent;
border: 1px solid rgba(26,20,16,.14);
color: #3a3128;
border-radius: 11px;
padding: 11px 20px;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
transition: .18s ease;
}
.lx-modal .lx-btn-ghost:hover{
background: #f6f4f1;
border-color: #1A1410;
color: #1A1410;
}
/* LACCA NERA PRIMARY BUTTON (scoped al modal) */
.lx-modal .lx-btn-prime{
position: relative;
overflow: hidden;
background: linear-gradient(158deg, #261d15 0%, #0d0a07 100%);
color: #fff;
border: 1px solid rgba(0,0,0,.4);
border-radius: 11px;
padding: 11px 22px;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
letter-spacing: .005em;
text-transform: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 9px;
box-shadow:
0 1px 0 rgba(255,255,255,.06) inset,
0 -1px 0 rgba(0,0,0,.35) inset,
0 8px 20px rgba(13,10,7,.30);
transition: transform .15s, box-shadow .25s;
}
.lx-modal .lx-btn-prime::before{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(232,102,58,.55) 0%, rgba(232,102,58,.18) 30%, transparent 70%);
opacity: 0;
transition: opacity .35s ease;
pointer-events: none;
}
.lx-modal .lx-btn-prime:hover::before{ opacity: 1; }
.lx-modal .lx-btn-prime:hover{
box-shadow:
0 1px 0 rgba(255,255,255,.08) inset,
0 -1px 0 rgba(0,0,0,.4) inset,
0 12px 28px rgba(13,10,7,.42),
0 0 24px rgba(232,102,58,.25);
}
.lx-modal .lx-btn-prime:active{ transform: translateY(1px); }
.lx-modal .lx-btn-prime svg{
flex-shrink: 0;
position: relative;
z-index: 1;
}
.lx-modal .lx-btn-prime span{
position: relative;
z-index: 1;
}
/* Neutralizar reglas legacy del .modal-head dentro de .lx-modal */
.lx-modal .lx-modal-head::after{ display: none; }
/* ── MODAL DE CONFIRMACIÓN EDITORIAL (lx-confirm) ── */
@keyframes lx-confirm-overlay-in {
from { opacity: 0; backdrop-filter: blur(0); }
to { opacity: 1; backdrop-filter: blur(10px); }
}
@keyframes lx-confirm-in {
0% { opacity: 0; transform: scale(.92) translateY(10px); }
60% { opacity: 1; transform: scale(1.02) translateY(-2px); }
100% { opacity: 1; transform: none; }
}
@keyframes lx-confirm-out {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: scale(.94) translateY(6px); }
}
@keyframes lx-confirm-icon-in {
0% { transform: scale(0) rotate(-15deg); opacity: 0; }
60% { transform: scale(1.15) rotate(4deg); opacity: 1; }
100% { transform: none; opacity: 1; }
}
.lx-confirm-overlay {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(14,10,7,.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
animation: lx-confirm-overlay-in .22s ease both;
}
.lx-confirm-overlay-out {
animation: lx-confirm-overlay-in .22s ease reverse both;
}
.lx-confirm-box {
background: #fff;
border: 1px solid rgba(26,20,16,.08);
border-radius: 20px;
width: 380px;
max-width: calc(100vw - 32px);
box-shadow:
0 32px 80px rgba(14,10,7,.40),
0 8px 24px rgba(14,10,7,.20),
0 1px 0 rgba(255,255,255,.8) inset;
overflow: hidden;
animation: lx-confirm-in .38s cubic-bezier(.16,1,.3,1) both;
display: flex;
flex-direction: column;
}
.lx-confirm-box.lx-confirm-out {
animation: lx-confirm-out .24s cubic-bezier(.4,0,1,1) both;
}
/* Ícono de advertencia */
.lx-confirm-icon {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 14px;
background: rgba(224,82,82,.10);
color: #C94040;
margin: 28px auto 0;
animation: lx-confirm-icon-in .45s .06s cubic-bezier(.16,1,.3,1) both;
flex-shrink: 0;
}
/* Contenido */
.lx-confirm-content {
padding: 16px 28px 22px;
text-align: center;
display: flex;
flex-direction: column;
gap: 6px;
}
.lx-confirm-eyebrow {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: #C94040;
animation: np-eyebrow-in .34s .10s cubic-bezier(.16,1,.3,1) both;
}
.lx-confirm-title {
font-family: var(--serif);
font-size: 20px;
font-weight: 600;
color: #1A1410;
letter-spacing: -.012em;
line-height: 1.1;
animation: np-title-in .38s .14s cubic-bezier(.16,1,.3,1) both;
}
.lx-confirm-msg {
font-family: var(--sans);
font-size: 13px;
font-weight: 400;
color: #766960;
line-height: 1.55;
max-width: 30ch;
margin: 0 auto;
animation: np-item-detail-in .38s .18s cubic-bezier(.16,1,.3,1) both;
}
/* Footer de acciones */
.lx-confirm-actions {
display: flex;
gap: 8px;
padding: 0 20px 22px;
animation: np-item-footer-in .36s .22s cubic-bezier(.16,1,.3,1) both;
}
/* Cancelar */
.lx-confirm-cancel {
flex: 1;
background: transparent;
border: 1px solid rgba(26,20,16,.12);
color: #3a3128;
border-radius: 11px;
padding: 11px 16px;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background .16s, border-color .16s, color .16s;
}
.lx-confirm-cancel:hover {
background: #f6f4f1;
border-color: rgba(26,20,16,.22);
color: #1A1410;
}
/* Eliminar — rojo Lacca */
.lx-confirm-ok {
flex: 1;
position: relative;
overflow: hidden;
background: linear-gradient(158deg, #7a1c1c 0%, #3d0d0d 100%);
color: #fff;
border: 1px solid rgba(0,0,0,.35);
border-radius: 11px;
padding: 11px 16px;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow:
0 1px 0 rgba(255,255,255,.06) inset,
0 -1px 0 rgba(0,0,0,.30) inset,
0 6px 18px rgba(100,20,20,.35);
transition: box-shadow .22s, transform .15s;
}
.lx-confirm-ok::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(224,82,82,.55) 0%, rgba(224,82,82,.18) 35%, transparent 70%);
opacity: 0;
transition: opacity .32s ease;
}
.lx-confirm-ok:hover::before { opacity: 1; }
.lx-confirm-ok:hover {
box-shadow:
0 1px 0 rgba(255,255,255,.08) inset,
0 -1px 0 rgba(0,0,0,.35) inset,
0 10px 28px rgba(100,20,20,.50),
0 0 22px rgba(224,82,82,.22);
}
.lx-confirm-ok:active { transform: translateY(1px); }
.lx-confirm-ok svg {
position: relative;
z-index: 1;
flex-shrink: 0;
}
.lx-confirm-ok span, .lx-confirm-ok {
position: relative;
z-index: 1;
}
/* ── EDITAR VENTA — venta context card ── */
.ev-venta-card {
background: linear-gradient(158deg, #201810 0%, #0e0b07 100%);
border: 1px solid rgba(255,255,255,.06);
border-radius: 14px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 6px;
box-shadow:
0 8px 24px rgba(10,7,4,.22),
0 2px 6px rgba(10,7,4,.14),
0 1px 0 rgba(255,255,255,.04) inset;
}
.ev-card-count {
font-family: var(--serif);
font-size: 18px;
font-weight: 600;
color: rgba(255,255,255,.92);
letter-spacing: -.01em;
line-height: 1.1;
}
.ev-card-nombres {
font-family: var(--sans);
font-size: 12.5px;
font-weight: 400;
color: rgba(255,255,255,.50);
line-height: 1.4;
}
.ev-card-more {
font-family: var(--mono);
font-size: 10px;
color: rgba(255,255,255,.30);
letter-spacing: .06em;
}
.ev-card-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 6px;
}
.ev-card-fecha {
font-family: var(--mono);
font-size: 10px;
color: rgba(255,255,255,.35);
letter-spacing: .04em;
}
.ev-card-cli {
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
color: rgba(255,255,255,.45);
}
.ev-card-cli-empty {
color: rgba(255,255,255,.22);
font-style: italic;
}
/* ── AJUSTE DE INVENTARIO — product card ── */
.aj-product-card {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 14px;
background: linear-gradient(158deg, #201810 0%, #0e0b07 100%);
border: 1px solid rgba(255,255,255,.06);
border-radius: 14px;
padding: 16px 18px;
box-shadow:
0 8px 24px rgba(10,7,4,.22),
0 2px 6px rgba(10,7,4,.14),
0 1px 0 rgba(255,255,255,.04) inset;
}
.aj-product-card-inner {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
min-width: 0;
}
.aj-product-name {
font-family: var(--serif);
font-size: 17px;
font-weight: 600;
color: rgba(255,255,255,.92);
letter-spacing: -.01em;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.aj-product-stats {
display: flex;
align-items: center;
gap: 14px;
}
.aj-stat {
display: flex;
flex-direction: column;
gap: 3px;
}
.aj-stat-label {
font-family: var(--mono);
font-size: 8.5px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255,255,255,.30);
line-height: 1;
}
.aj-stat-value {
font-family: var(--mono);
font-size: 20px;
font-weight: 500;
color: rgba(255,255,255,.90);
letter-spacing: -.01em;
line-height: 1;
}
.aj-stat-unit {
font-size: 14px;
color: rgba(255,255,255,.55);
}
.aj-stat-divider {
width: 1px;
align-self: stretch;
background: rgba(255,255,255,.10);
margin: 2px 0;
}
.aj-product-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
flex-shrink: 0;
color: rgba(255,255,255,.18);
align-self: center;
}
/* Qty input sin prefijo $ */
.lx-modal .aj-qty-input {
padding-left: 14px;
font-size: 28px;
}
/* Delta hint */
.aj-delta-hint {
font-family: var(--mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: .03em;
padding: 7px 12px;
border-radius: 8px;
background: rgba(26,20,16,.04);
border: 1px solid rgba(26,20,16,.07);
margin-top: 2px;
animation: tk-msg-in .25s cubic-bezier(.16,1,.3,1) both;
}
/* ── MODAL CAJA CLIENTE ── */
#modal-caja-cli-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(14,10,7,.52);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: lx-confirm-overlay-in .22s ease both;
}
#modal-caja-cli-overlay .modal.lx-modal {
width: 440px;
max-width: calc(100vw - 32px);
display: flex !important;
flex-direction: column;
}
.mcj-saldo-card {
background: linear-gradient(158deg, #201810 0%, #0e0b07 100%);
border: 1px solid rgba(255,255,255,.06);
border-radius: 14px;
padding: 18px 20px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 8px 24px rgba(10,7,4,.22), 0 1px 0 rgba(255,255,255,.04) inset;
}
.mcj-saldo-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255,255,255,.30);
}
.mcj-saldo-value {
font-family: var(--mono);
font-size: 26px;
font-weight: 600;
color: rgba(255,255,255,.92);
letter-spacing: -.01em;
line-height: 1;
}
.mcj-op-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.mcj-op-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
border-radius: 11px;
border: 1.5px solid rgba(26,20,16,.10);
background: rgba(26,20,16,.03);
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
color: rgba(26,20,16,.45);
cursor: pointer;
transition: all .18s ease;
}
.mcj-op-btn:hover {
border-color: rgba(26,20,16,.20);
color: rgba(26,20,16,.70);
background: rgba(26,20,16,.05);
}
.mcj-op-btn.mcj-op-sumar.active {
background: rgba(34,169,106,.10);
border-color: rgba(34,169,106,.35);
color: #1a7a45;
}
.mcj-op-btn.mcj-op-restar.active {
background: rgba(224,82,82,.10);
border-color: rgba(224,82,82,.30);
color: #a83030;
}
.mcj-preview {
font-family: var(--mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: .03em;
padding: 7px 12px;
border-radius: 8px;
background: rgba(26,20,16,.04);
border: 1px solid rgba(26,20,16,.07);
margin-top: 2px;
animation: tk-msg-in .25s cubic-bezier(.16,1,.3,1) both;
}
.mcj-preview.sumar { color: #1a7a45; border-color: rgba(34,169,106,.20); background: rgba(34,169,106,.06); }
.mcj-preview.restar { color: #a83030; border-color: rgba(224,82,82,.20); background: rgba(224,82,82,.06); }
#mcj-btn-confirm.op-restar {
background: linear-gradient(158deg, #7a1c1c 0%, #3d0d0d 100%);
box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 8px 20px rgba(100,20,20,.30);
}
#mcj-btn-confirm.op-restar::before {
background: linear-gradient(90deg, rgba(224,82,82,.55) 0%, rgba(224,82,82,.18) 30%, transparent 70%);
}
/* MONTO HERO INPUT */
.lx-modal .lx-monto-wrap{
position: relative;
display: flex;
align-items: center;
}
.lx-modal .lx-monto-prefix{
position: absolute;
left: 16px;
font-family: var(--mono);
font-size: 22px;
font-weight: 400;
color: rgba(26,20,16,.35);
pointer-events: none;
z-index: 1;
line-height: 1;
}
.lx-modal .lx-monto-input{
width: 100%;
font-family: var(--mono);
font-size: 28px;
font-weight: 500;
color: #1A1410;
background: rgba(26,20,16,.035);
border: 1px solid rgba(26,20,16,.08);
border-radius: 11px;
padding: 14px 16px 14px 38px;
letter-spacing: -.01em;
transition: .16s ease;
-webkit-appearance: none;
appearance: none;
}
.lx-modal .lx-monto-input::placeholder{
color: rgba(26,20,16,.20);
font-weight: 300;
}
.lx-modal .lx-monto-input:hover{
background: rgba(26,20,16,.05);
border-color: rgba(26,20,16,.14);
}
.lx-modal .lx-monto-input:focus{
outline: none;
background: #fff;
border-color: #1A1410;
box-shadow: 0 0 0 3px rgba(26,20,16,.06);
}
/* TEXTAREA editorial */
.lx-modal .lx-textarea{
width: 100%;
font-family: var(--sans);
font-size: 13.5px;
font-weight: 500;
color: #1A1410;
background: rgba(26,20,16,.035);
border: 1px solid rgba(26,20,16,.08);
border-radius: 11px;
padding: 11px 14px;
resize: vertical;
min-height: 76px;
line-height: 1.5;
transition: .16s ease;
-webkit-appearance: none;
appearance: none;
}
.lx-modal .lx-textarea::placeholder{
color: rgba(26,20,16,.30);
font-weight: 400;
}
.lx-modal .lx-textarea:hover{
background: rgba(26,20,16,.05);
border-color: rgba(26,20,16,.14);
}
.lx-modal .lx-textarea:focus{
outline: none;
background: #fff;
border-color: #1A1410;
box-shadow: 0 0 0 3px rgba(26,20,16,.06);
}
/* INPUT READONLY */
.lx-modal .lx-input-readonly{
color: #766960 !important;
background: rgba(26,20,16,.025) !important;
border-color: rgba(26,20,16,.05) !important;
cursor: default;
}
/* LISTBOX editorial (select[size]) */
.lx-modal .lx-listbox{
width: 100%;
height: auto;
min-height: 96px;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
color: #1A1410;
background: rgba(26,20,16,.035) !important;
border: 1px solid rgba(26,20,16,.08) !important;
border-radius: 11px !important;
padding: 6px !important;
outline: none;
box-shadow: none !important;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.lx-modal .lx-listbox:focus{
border-color: #1A1410 !important;
box-shadow: 0 0 0 3px rgba(26,20,16,.06) !important;
background: #fff !important;
}
.lx-modal .lx-listbox option{
padding: 7px 10px;
border-radius: 8px;
margin: 2px 0;
font-size: 13px;
}
.lx-modal .lx-listbox option:checked{
background: rgba(26,20,16,.08) linear-gradient(0deg, rgba(26,20,16,.08), rgba(26,20,16,.08));
color: #1A1410;
font-weight: 600;
}
/* ═══════════════════════════════════════════════════════════════
v7.20.0 — MODAL PEDIDO EMPRESA B2B
═══════════════════════════════════════════════════════════════ */
/* Modal ancho para el carrito */
.lx-modal.lx-modal-wide { width: 700px; max-width: calc(100vw - 32px); }
/* Empresa selector */
.pe-emp-search-wrap {
position: relative;
display: flex;
align-items: center;
}
.pe-emp-search-wrap svg {
position: absolute; left: 12px;
color: rgba(26,20,16,.35); pointer-events: none;
}
.pe-emp-search-wrap input,
.lx-fg .pe-emp-search-wrap + input {
width: 100%;
height: 38px;
padding: 0 12px 0 34px;
font-family: var(--sans); font-size: 13.5px; font-weight: 500;
color: #1A1410;
background: rgba(26,20,16,.035);
border: 1px solid rgba(26,20,16,.08);
border-radius: 11px;
outline: none;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.pe-emp-search-wrap input:focus {
background: #fff; border-color: #1A1410;
box-shadow: 0 0 0 3px rgba(26,20,16,.06);
}
/* Dropdown empresas */
.pe-emp-dropdown, .pe-prod-dropdown {
position: absolute;
left: 0; right: 0;
background: #fff;
border: 1px solid rgba(26,20,16,.12);
border-radius: 12px;
box-shadow: 0 12px 36px rgba(26,20,16,.14), 0 4px 12px rgba(26,20,16,.08);
z-index: 10;
overflow: hidden;
margin-top: 6px;
}
.pe-dd-item {
display: flex;
flex-direction: column;
gap: 3px;
width: 100%;
text-align: left;
background: transparent;
border: none;
border-bottom: 1px solid rgba(26,20,16,.06);
padding: 10px 14px;
cursor: pointer;
transition: background .13s;
}
.pe-dd-item:last-child { border-bottom: none; }
.pe-dd-item:hover { background: rgba(26,20,16,.035); }
.pe-dd-razon {
font-family: var(--serif); font-size: 13.5px; font-weight: 600;
color: #1A1410; letter-spacing: -.005em;
}
.pe-dd-meta {
font-family: var(--mono); font-size: 9.5px;
color: rgba(26,20,16,.45); letter-spacing: .04em;
}
.pe-dd-meta em { color: #E8663A; font-style: normal; }
/* Posición relativa para dropdowns dentro de .lx-fg */
.lx-fg { position: relative; }
/* Empresa seleccionada */
.pe-emp-selected {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 12px 16px;
background: linear-gradient(158deg, rgba(122,74,22,.08) 0%, rgba(122,74,22,.03) 100%);
border: 1px solid rgba(122,74,22,.22);
border-radius: 11px;
}
.pe-emp-sel-info { flex: 1; min-width: 0; }
.pe-emp-sel-razon {
font-family: var(--serif); font-size: 15px; font-weight: 600;
color: #1A1410; letter-spacing: -.01em;
}
.pe-emp-sel-meta {
font-family: var(--mono); font-size: 9.5px; font-weight: 500;
color: rgba(26,20,16,.50); letter-spacing: .04em; margin-top: 3px;
}
.pe-emp-sel-change {
font-family: var(--mono); font-size: 9px; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase;
color: #7a4a16; background: transparent;
border: 1px solid rgba(122,74,22,.25); border-radius: 8px;
padding: 5px 10px; cursor: pointer; white-space: nowrap;
transition: .15s;
}
.pe-emp-sel-change:hover {
background: rgba(122,74,22,.08); border-color: rgba(122,74,22,.45);
}
/* Buscador de productos */
.pe-prod-search-wrap {
position: relative; display: flex; align-items: center; margin-bottom: 10px;
}
.pe-prod-search-wrap svg {
position: absolute; left: 12px;
color: rgba(26,20,16,.35); pointer-events: none;
}
.pe-prod-search-wrap input {
width: 100%; height: 38px; padding: 0 12px 0 34px;
font-family: var(--sans); font-size: 13px; font-weight: 500; color: #1A1410;
background: rgba(26,20,16,.035); border: 1px solid rgba(26,20,16,.08);
border-radius: 11px; outline: none;
transition: border-color .15s, background .15s;
}
.pe-prod-search-wrap input:focus {
background: #fff; border-color: #1A1410;
box-shadow: 0 0 0 3px rgba(26,20,16,.06);
}
.pe-prod-search-wrap { position: relative; }
.pe-prod-dropdown { position: relative; margin-bottom: 8px; }
/* Carrito */
.pe-cart-empty {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 28px; text-align: center;
color: rgba(26,20,16,.35);
font-family: var(--sans); font-size: 12.5px;
background: rgba(26,20,16,.025); border-radius: 11px;
border: 1.5px dashed rgba(26,20,16,.10);
}
.pe-cart-empty svg { opacity: .35; }
.pe-cart-table {
width: 100%; border-collapse: collapse;
font-size: 12.5px;
background: #fff; border-radius: 11px; overflow: hidden;
border: 1px solid rgba(26,20,16,.08);
}
.pe-cart-table thead tr {
background: #f6f4f1; border-bottom: 1px solid rgba(26,20,16,.08);
}
.pe-cart-table th {
font-family: var(--mono); font-size: 9px; font-weight: 600;
letter-spacing: .18em; text-transform: uppercase;
color: rgba(26,20,16,.40); padding: 10px 12px; text-align: left;
}
.pe-cart-table td {
padding: 10px 12px; border-bottom: 1px solid rgba(26,20,16,.05);
vertical-align: middle;
}
.pe-cart-table tbody tr:last-child td { border-bottom: none; }
.pe-cart-table tbody tr:hover td { background: rgba(26,20,16,.018); }
.pe-cart-prod { font-family: var(--sans); font-size: 13px; font-weight: 600; color: #1A1410; }
.pe-cart-unit { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: rgba(26,20,16,.40); margin-top: 2px; }
.pe-cart-stock { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: rgba(26,20,16,.55); }
.pe-cart-stock.pe-stock-warn { color: #E8663A; font-weight: 700; }
.pe-cart-subtotal { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: #1A1410; font-variant-numeric: tabular-nums; text-align: right; }
.pe-qty-input {
width: 80px; height: 32px;
font-family: var(--mono); font-size: 12px; font-weight: 500; text-align: right;
color: #1A1410; background: rgba(26,20,16,.04);
border: 1px solid rgba(26,20,16,.09); border-radius: 8px;
padding: 0 8px; outline: none; -webkit-appearance: none; appearance: none;
transition: border-color .15s;
}
.pe-qty-input:focus { border-color: #1A1410; background: #fff; box-shadow: 0 0 0 3px rgba(26,20,16,.06); }
.pe-qty-input.pe-qty-warn { border-color: rgba(232,102,58,.45); color: #E8663A; }
.pe-price-wrap { position: relative; display: flex; align-items: center; }
.pe-price-sym { position: absolute; left: 9px; font-family: var(--mono); font-size: 11px; color: rgba(26,20,16,.40); pointer-events: none; }
.pe-price-input {
width: 90px; height: 32px; padding: 0 8px 0 20px;
font-family: var(--mono); font-size: 12px; font-weight: 500; text-align: right;
color: #1A1410; background: rgba(26,20,16,.04);
border: 1px solid rgba(26,20,16,.09); border-radius: 8px;
outline: none; -webkit-appearance: none; appearance: none;
transition: border-color .15s;
}
.pe-price-input:focus { border-color: #1A1410; background: #fff; }
.pe-remove-btn {
width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid rgba(26,20,16,.10); border-radius: 7px;
color: rgba(26,20,16,.38); cursor: pointer; transition: .15s;
}
.pe-remove-btn:hover { background: rgba(224,82,82,.08); border-color: rgba(224,82,82,.30); color: #a83030; }
/* Footer pedido con totales */
.lx-modal-foot.pe-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.pe-totales { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.pe-total-row {
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-family: var(--sans); font-size: 12px; color: rgba(26,20,16,.60);
}
.pe-total-amt { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: #1A1410; }
.pe-total-disc { color: #1a7a45; }
.pe-total-row.pe-total-final {
font-size: 13px; font-weight: 600; color: #1A1410;
padding-top: 6px; border-top: 1px solid rgba(26,20,16,.08); margin-top: 2px;
}
.pe-total-hero {
font-family: var(--serif); font-size: 22px; font-weight: 700;
letter-spacing: -.015em; color: #1A1410; font-variant-numeric: tabular-nums;
}
/* Tabla de pedidos dentro del detalle de empresa */
.emp-pedidos-card {
border: 1px solid rgba(26,20,16,.08); border-radius: var(--radius-md); overflow: hidden;
}
.emp-pedidos-head {
padding: 12px 16px; background: #f6f4f1;
border-bottom: 1px solid rgba(26,20,16,.08);
}
.emp-pedidos-table {
width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.emp-pedidos-table th {
font-family: var(--mono); font-size: 8.5px; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase;
color: rgba(26,20,16,.40); padding: 10px 14px; text-align: left;
background: #fafaf9;
}
.emp-pedidos-table td {
padding: 10px 14px; border-bottom: 1px solid rgba(26,20,16,.05);
}
.emp-pedidos-table tbody tr:last-child td { border-bottom: none; }
.emp-pedidos-table tbody tr:hover td { background: rgba(26,20,16,.018); }
.emp-pedido-num { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: #1A1410; letter-spacing: .04em; }
.emp-pedido-fecha { font-family: var(--mono); font-size: 11px; color: rgba(26,20,16,.55); }
.emp-pedido-venc { font-family: var(--mono); font-size: 11px; color: rgba(26,20,16,.55); }
.emp-pedido-venc.is-vencida { color: #a83030; font-weight: 700; }
.emp-pedido-total, .emp-pedido-saldo {
font-family: var(--mono); font-size: 12px; font-weight: 600;
color: #1A1410; font-variant-numeric: tabular-nums;
}
.emp-pedido-saldo { color: var(--emp-warn, #D4882A); }
/* Badges de estado */
.emp-badge {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--mono); font-size: 9px; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase;
padding: 3px 8px; border-radius: 999px;
}
.emp-badge-ok { background: rgba(26,122,69,.10); color: #1a7a45; }
.emp-badge-warn { background: rgba(212,136,42,.12); color: #b86c1c; }
.emp-badge-amber { background: rgba(184,108,28,.10); color: #8c4a16; }
.emp-badge-danger { background: rgba(224,82,82,.10); color: #a83030; }
.emp-badge-neutral { background: rgba(26,20,16,.07); color: rgba(26,20,16,.55); }
/* ═══════════════════════════════════════════════════════════════
v7.20.0 — MODAL PAGO EMPRESA B2B (Fase 3)
═══════════════════════════════════════════════════════════════ */
/* Card empresa en modal pago */
.pp-emp-card {
background: linear-gradient(158deg, #201810 0%, #0e0b07 100%);
border: 1px solid rgba(255,255,255,.06);
border-radius: var(--radius-lg);
padding: 16px 18px;
box-shadow: 0 8px 24px rgba(10,7,4,.22), 0 1px 0 rgba(255,255,255,.04) inset;
}
.pp-emp-info { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pp-emp-razon {
font-family: var(--serif); font-size: 17px; font-weight: 600;
color: rgba(255,255,255,.92); letter-spacing: -.01em;
}
.pp-emp-deuda { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pp-emp-deuda-lbl {
font-family: var(--mono); font-size: 8.5px; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.30);
}
.pp-emp-deuda-val {
font-family: var(--mono); font-size: 22px; font-weight: 700;
color: #D4882A; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
/* Toggle modo de aplicación */
.pp-modo-toggle {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.pp-modo-btn {
display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
padding: 11px 13px;
background: rgba(26,20,16,.03);
border: 1.5px solid rgba(26,20,16,.10);
border-radius: 11px;
color: rgba(26,20,16,.45);
font-family: var(--sans); font-size: 12.5px; font-weight: 600;
cursor: pointer; text-align: left;
transition: all .18s ease;
}
.pp-modo-btn svg { color: currentColor; opacity: .65; margin-bottom: 2px; }
.pp-modo-btn em {
font-style: normal; font-family: var(--mono); font-size: 8.5px;
font-weight: 600; letter-spacing: .10em; text-transform: uppercase;
color: rgba(26,20,16,.30);
}
.pp-modo-btn:hover { background: rgba(26,20,16,.06); border-color: rgba(26,20,16,.18); color: rgba(26,20,16,.75); }
.pp-modo-btn.active {
background: rgba(26,122,69,.07); border-color: rgba(26,122,69,.35);
color: #1a7a45;
}
.pp-modo-btn.active svg { opacity: 1; }
.pp-modo-btn.active em { color: rgba(26,122,69,.55); }
/* Preview de distribución */
.pp-preview-wrap {
background: rgba(26,20,16,.025); border: 1px solid rgba(26,20,16,.07);
border-radius: 11px; padding: 14px;
display: flex; flex-direction: column; gap: 8px;
}
.pp-preview-empty {
font-family: var(--sans); font-size: 12.5px;
color: rgba(26,20,16,.42); text-align: center; padding: 8px 0;
}
.pp-preview-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 8px 10px;
background: #fff; border-radius: 8px;
border: 1px solid rgba(26,20,16,.06);
}
.pp-preview-row-info {
display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
font-size: 12px;
}
.pp-preview-num {
font-family: var(--mono); font-size: 11.5px; font-weight: 700;
color: #1A1410; letter-spacing: .04em; white-space: nowrap;
}
.pp-preview-saldo-prev {
font-family: var(--mono); font-size: 11.5px; color: rgba(26,20,16,.55);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pp-preview-saldo-new {
font-family: var(--mono); font-size: 11.5px; font-weight: 700;
color: #D4882A; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pp-preview-saldo-new.pp-saldo-zero { color: #1a7a45; }
.pp-preview-badge-ok {
font-family: var(--mono); font-size: 8.5px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: #1a7a45; background: rgba(26,122,69,.10);
padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.pp-preview-aplicar {
font-family: var(--mono); font-size: 12.5px; font-weight: 700;
color: #1A1410; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pp-preview-hint {
font-family: var(--sans); font-size: 11.5px; color: rgba(26,20,16,.55);
padding: 0 4px; line-height: 1.4;
}
.pp-preview-sobrante { color: var(--emp-warn, #D4882A); }
.pp-preview-cuenta {
padding: 10px 12px; background: rgba(26,122,69,.07);
border-radius: 8px; border: 1px solid rgba(26,122,69,.15);
}
.pp-preview-lbl { font-family: var(--sans); font-size: 13px; font-weight: 500; color: #1a7a45; }
.pp-preview-amt { font-family: var(--mono); font-size: 14px; font-weight: 700; color: #1a7a45; }
/* ── AGING v2 (Fase 4) — barras horizontales proporcionales ── */
#page-empresas .emp-aging-bars-v2 {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 2px;
}
#page-empresas .emp-aging-row {
display: grid;
grid-template-columns: 90px 1fr 80px;
align-items: center;
gap: 10px;
}
#page-empresas .emp-aging-row-zero { opacity: .38; }
#page-empresas .emp-aging-lbl {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(26,20,16,.55);
white-space: nowrap;
}
#page-empresas .emp-aging-bar-track {
height: 22px;
background: rgba(26,20,16,.04);
border-radius: 5px;
overflow: hidden;
position: relative;
}
#page-empresas .emp-aging-fill {
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 7px;
height: 100%;
border-radius: 5px;
transition: width .6s cubic-bezier(.16,1,.3,1);
min-width: 0;
position: relative;
}
#page-empresas .emp-aging-fill-pct {
font-family: var(--mono);
font-size: 8.5px;
font-weight: 700;
color: rgba(26,20,16,.60);
white-space: nowrap;
pointer-events: none;
}
#page-empresas .emp-aging-amt {
font-family: var(--mono);
font-size: 11.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
/* ── TIMELINE SVG (Fase 4) ── */
#page-empresas .emp-timeline-svg-wrap {
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(26,20,16,.10) transparent;
padding: 4px 0 6px;
}
#page-empresas .emp-timeline-svg-wrap::-webkit-scrollbar {
height: 5px;
}
#page-empresas .emp-timeline-svg-wrap::-webkit-scrollbar-thumb {
background: rgba(26,20,16,.10);
border-radius: 5px;
}
#page-empresas .emp-timeline-svg {
display: block;
min-width: 100%;
}
#page-empresas .emp-timeline-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
/* Nota leyenda */
#page-empresas .emp-timeline-head .emp-aging-note {
font-family: var(--mono);
font-size: 8.5px;
font-weight: 500;
letter-spacing: .08em;
color: rgba(26,20,16,.38);
}
/* ═══════════════════════════════════════════════════════════════
v7.20.0 — FASE 6: Sello SALDADO + KPI B2B + Botón Remito
═══════════════════════════════════════════════════════════════ */
/* Sello SALDADO en filas de pedidos pagados */
.emp-pedido-row.emp-pedido-saldado {
opacity: .70;
}
.emp-pedido-row.emp-pedido-saldado:hover { opacity: 1; }
.emp-pedido-saldado-cell {
position: relative;
}
.emp-saldado-stamp {
display: inline-flex;
align-items: center;
padding: 3px 8px;
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: #1a7a45;
background: rgba(26,122,69,.10);
border: 1px solid rgba(26,122,69,.25);
border-radius: 4px;
transform: rotate(-2deg);
white-space: nowrap;
animation: sello-stamp-in .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes sello-stamp-in {
0% { opacity: 0; transform: rotate(-2deg) scale(1.4); }
60% { opacity: 1; transform: rotate(-2deg) scale(.96); }
100% { opacity: 1; transform: rotate(-2deg) scale(1); }
}
/* Botón remito */
.emp-remito-btn {
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid rgba(26,20,16,.10);
border-radius: 7px;
color: rgba(26,20,16,.40);
cursor: pointer;
transition: all .15s;
}
.emp-remito-btn:hover {
background: rgba(26,20,16,.06);
border-color: rgba(26,20,16,.20);
color: #1A1410;
}
/* ═══════════════════════════════════════════════════════════════
v7.20.0 — TOGGLE Individual / Empresa (modal cliente)
═══════════════════════════════════════════════════════════════ */
.cli-tipo-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.cli-tipo-btn {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
padding: 12px 14px;
background: rgba(26,20,16,.03);
border: 1.5px solid rgba(26,20,16,.10);
border-radius: 11px;
color: rgba(26,20,16,.50);
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: left;
transition: all .18s ease;
}
.cli-tipo-btn svg { color: currentColor; opacity: .65; }
.cli-tipo-btn span { display: block; font-size: 13.5px; line-height: 1; }
.cli-tipo-btn em {
font-style: normal;
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(26,20,16,.32);
}
.cli-tipo-btn:hover {
background: rgba(26,20,16,.06);
border-color: rgba(26,20,16,.20);
color: rgba(26,20,16,.75);
}
.cli-tipo-btn.active[data-tipo="individual"] {
background: rgba(34,169,106,.07);
border-color: rgba(34,169,106,.35);
color: #1a7a45;
box-shadow: 0 0 0 1px rgba(34,169,106,.18) inset;
}
.cli-tipo-btn.active[data-tipo="empresa"] {
background: linear-gradient(158deg, rgba(122,74,22,.10) 0%, rgba(122,74,22,.04) 100%);
border-color: rgba(122,74,22,.40);
color: #6b3d12;
box-shadow: 0 0 0 1px rgba(122,74,22,.20) inset;
}
.cli-tipo-btn.active svg { opacity: 1; }
.cli-tipo-btn.active em { color: inherit; opacity: .55; }
/* ═══════════════════════════════════════════════════════════════
v7.25.0 — PÁGINA EMPRESAS (B2B · Card Grid + Inline Expand)
═══════════════════════════════════════════════════════════════ */
#page-empresas.emp {
--emp-ok: #1a7a45;
--emp-warn: #D4882A;
--emp-amber: #b86c1c;
--emp-bad: #a83030;
--emp-ink: #1A1410;
--emp-line: rgba(26,20,16,.08);
}
/* v7.25.0 Header */
#page-empresas .emp-header {
display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px;
}
#page-empresas .emp-header-eyebrow {
font-family: var(--mono); font-size: 9.5px; font-weight: 600;
letter-spacing: .18em; text-transform: uppercase; color: rgba(26,20,16,.40); margin-bottom: 6px;
}
#page-empresas .emp-header-title {
font-family: var(--serif); font-size: 28px; font-weight: 700;
letter-spacing: -.02em; color: var(--emp-ink); line-height: 1.1;
}
#page-empresas .emp-btn-new {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--sans); font-size: 13px; font-weight: 600;
color: #fff; background: var(--emp-ink); border: none; border-radius: 10px;
padding: 10px 18px; cursor: pointer; transition: .15s;
}
#page-empresas .emp-btn-new:hover { background: #2d2520; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26,20,16,.18); }
/* v7.25.0 KPI Strip */
#page-empresas .emp-kpi-strip {
display: flex; gap: 14px; margin-bottom: 24px;
}
#page-empresas .emp-kpi-card {
flex: 1; display: flex; align-items: center; gap: 14px;
padding: 16px 20px; background: #fff;
border: 1px solid rgba(26,20,16,.05); border-radius: var(--radius-lg);
box-shadow: var(--card-shadow);
transition: box-shadow .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1);
}
#page-empresas .emp-kpi-card:hover {
box-shadow: var(--card-shadow-hover);
transform: translateY(-2px);
}
#page-empresas .emp-kpi-icon {
width: 38px; height: 38px; border-radius: 10px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#page-empresas .emp-kpi-icon--warn { background: rgba(212,136,42,.10); color: var(--emp-warn); }
#page-empresas .emp-kpi-icon--danger { background: rgba(224,82,82,.08); color: var(--emp-bad); }
#page-empresas .emp-kpi-icon--ok { background: rgba(26,122,69,.08); color: var(--emp-ok); }
#page-empresas .emp-kpi-label {
font-family: var(--mono); font-size: 9px; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: rgba(26,20,16,.45); margin-bottom: 2px;
}
#page-empresas .emp-kpi-value {
font-family: var(--serif); font-size: 22px; font-weight: 700;
letter-spacing: -.015em; line-height: 1.1;
}
#page-empresas .emp-kpi-value--warn { color: var(--emp-warn); }
#page-empresas .emp-kpi-value--danger { color: var(--emp-bad); }
#page-empresas .emp-kpi-value--ok { color: var(--emp-ok); }
/* v7.25.0 Toolbar */
#page-empresas .emp-toolbar {
display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
#page-empresas .emp-search-wrap {
position: relative; flex: 1; max-width: 320px;
}
#page-empresas .emp-search-wrap svg {
position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
color: rgba(26,20,16,.32); pointer-events: none;
}
#page-empresas .emp-search-input {
width: 100%; height: 40px; padding: 0 14px 0 38px;
font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--emp-ink);
background: #f2f1ef; border: 1px solid transparent; border-radius: 11px; outline: none; transition: .15s;
}
#page-empresas .emp-search-input::placeholder { color: rgba(26,20,16,.35); }
#page-empresas .emp-search-input:focus {
background: #fff; border-color: var(--emp-ink); box-shadow: 0 0 0 3px rgba(26,20,16,.05);
}
#page-empresas .emp-filters { display: flex; gap: 6px; }
#page-empresas .emp-filter-btn {
font-family: var(--sans); font-size: 12px; font-weight: 500;
color: rgba(26,20,16,.55); background: transparent;
border: 1px solid rgba(26,20,16,.10); border-radius: 8px;
padding: 7px 14px; cursor: pointer; transition: .15s;
}
#page-empresas .emp-filter-btn:hover { border-color: rgba(26,20,16,.25); color: var(--emp-ink); }
#page-empresas .emp-filter-btn.active {
background: var(--emp-ink); color: #fff; border-color: var(--emp-ink);
}
/* v7.25.0 Card Grid */
#page-empresas .emp-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px;
}
/* Cards fade-in on first render */
#page-empresas .emp-grid > .emp-card {
animation: empCardIn .32s cubic-bezier(.16,1,.3,1) both;
}
#page-empresas .emp-grid > .emp-card:nth-child(1) { animation-delay: 0ms; }
#page-empresas .emp-grid > .emp-card:nth-child(2) { animation-delay: 40ms; }
#page-empresas .emp-grid > .emp-card:nth-child(3) { animation-delay: 80ms; }
#page-empresas .emp-grid > .emp-card:nth-child(4) { animation-delay: 110ms; }
#page-empresas .emp-grid > .emp-card:nth-child(5) { animation-delay: 135ms; }
#page-empresas .emp-grid > .emp-card:nth-child(6) { animation-delay: 155ms; }
#page-empresas .emp-grid > .emp-card:nth-child(n+7) { animation-delay: 170ms; }
@keyframes empCardIn {
from { opacity: 0; transform: translateY(12px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
#page-empresas .emp-card {
background: #fff; border: 1px solid rgba(26,20,16,.05); border-radius: var(--radius-lg);
padding: 20px 22px; cursor: pointer; position: relative; overflow: hidden;
box-shadow: var(--card-shadow);
transition: border-color .22s ease, box-shadow .28s cubic-bezier(.16,1,.3,1), transform .22s cubic-bezier(.16,1,.3,1), opacity .2s ease;
will-change: transform, box-shadow;
}
#page-empresas .emp-card:hover {
border-color: rgba(26,20,16,.08); box-shadow: var(--card-shadow-hover); transform: translateY(-2px);
}
#page-empresas .emp-card:active {
transform: scale(.985); transition-duration: .08s;
}
#page-empresas .emp-card.is-expanded {
grid-column: 1 / -1; cursor: default; transform: none;
border-color: rgba(26,20,16,.18); box-shadow: 0 8px 32px rgba(32,24,18,.08);
animation: empCardExpand .35s cubic-bezier(.16,1,.3,1) both;
}
#page-empresas .emp-card.is-expanded:active { transform: none; }
@keyframes empCardExpand {
from { opacity: .7; box-shadow: 0 1px 2px rgba(32,24,18,.02); }
to { opacity: 1; box-shadow: 0 8px 32px rgba(32,24,18,.08); }
}
#page-empresas .emp-card-top {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
#page-empresas .emp-card-info { flex: 1; min-width: 0; }
#page-empresas .emp-card-name {
font-family: var(--serif); font-size: 16px; font-weight: 600;
letter-spacing: -.01em; color: var(--emp-ink); margin-bottom: 3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#page-empresas .emp-card-meta {
font-family: var(--mono); font-size: 10px; font-weight: 500;
letter-spacing: .04em; color: rgba(26,20,16,.45);
}
#page-empresas .emp-card-status {
display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
#page-empresas .emp-card-amount {
font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: -.01em;
}
#page-empresas .emp-card-amount--ok { color: var(--emp-ok); }
#page-empresas .emp-card-amount--warn { color: var(--emp-warn); }
#page-empresas .emp-card-amount--danger { color: var(--emp-bad); }
#page-empresas .emp-card-badge {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--mono); font-size: 8.5px; font-weight: 600;
letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
}
#page-empresas .emp-card-badge--ok { background: rgba(26,122,69,.08); color: var(--emp-ok); }
#page-empresas .emp-card-badge--warn { background: rgba(212,136,42,.10); color: #b86c1c; }
#page-empresas .emp-card-badge--danger { background: rgba(224,82,82,.08); color: var(--emp-bad); }
#page-empresas .emp-card-badge--neutral { background: rgba(26,20,16,.07); color: rgba(26,20,16,.55); }
#page-empresas .emp-card-foot {
display: flex; align-items: center; gap: 16px;
margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(26,20,16,.06);
}
#page-empresas .emp-card-stat { display: flex; flex-direction: column; gap: 1px; }
#page-empresas .emp-card-stat-label {
font-family: var(--mono); font-size: 8.5px; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase; color: rgba(26,20,16,.35);
}
#page-empresas .emp-card-stat-value {
font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--emp-ink);
}
#page-empresas .emp-card-close {
position: absolute; top: 16px; right: 16px; width: 30px; height: 30px;
display: none; align-items: center; justify-content: center;
background: rgba(26,20,16,.05); border: none; border-radius: 8px;
cursor: pointer; color: rgba(26,20,16,.50); transition: .15s;
}
#page-empresas .emp-card-close:hover { background: rgba(26,20,16,.10); color: var(--emp-ink); }
#page-empresas .emp-card.is-expanded .emp-card-close { display: flex; }
#page-empresas .emp-card-quick {
position: absolute; top: 14px; right: 14px;
display: flex; gap: 5px; opacity: 0; transition: opacity .15s;
}
#page-empresas .emp-card:hover .emp-card-quick { opacity: 1; }
#page-empresas .emp-card.is-expanded .emp-card-quick { opacity: 0; pointer-events: none; }
#page-empresas .emp-card-quick-btn {
width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
border-radius: 7px; border: none; cursor: pointer; transition: .15s;
}
#page-empresas .emp-card-quick-btn--pedido { background: var(--emp-ink); color: #fff; }
#page-empresas .emp-card-quick-btn--pedido:hover { background: #2d2520; box-shadow: 0 3px 8px rgba(26,20,16,.25); }
#page-empresas .emp-card-quick-btn--pago { background: rgba(26,20,16,.06); color: rgba(26,20,16,.60); }
#page-empresas .emp-card-quick-btn--pago:hover { background: rgba(26,20,16,.12); color: var(--emp-ink); }
/* v7.25.0 Expanded */
#page-empresas .emp-expanded {
margin-top: 20px; padding-top: 20px;
border-top: 1px solid rgba(26,20,16,.08);
animation: empExpandReveal .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes empExpandReveal {
from { opacity: 0; transform: translateY(-12px); }
40% { opacity: .4; }
to { opacity: 1; transform: translateY(0); }
}
/* Close button entrance */
#page-empresas .emp-card.is-expanded .emp-card-close {
animation: empBtnPop .3s cubic-bezier(.34,1.56,.64,1) .15s both;
}
@keyframes empBtnPop {
from { opacity: 0; transform: scale(.5) rotate(-90deg); }
to { opacity: 1; transform: scale(1) rotate(0deg); }
}
/* Aging bars shimmer on expand */
#page-empresas .emp-aging-mini-fill {
border-radius: 3px;
transform-origin: left center;
/* width is animated via JS for precise control */
}
#page-empresas .emp-exp-actions { display: flex; gap: 8px; margin-bottom: 20px; }
#page-empresas .emp-exp-btn {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--sans); font-size: 12.5px; font-weight: 600;
padding: 9px 16px; border-radius: 9px; cursor: pointer; transition: .15s; border: none;
}
#page-empresas .emp-exp-btn--primary { background: var(--emp-ink); color: #fff; }
#page-empresas .emp-exp-btn--primary:hover { background: #2d2520; }
#page-empresas .emp-exp-btn--ghost {
background: transparent; color: var(--emp-ink); border: 1px solid rgba(26,20,16,.14);
}
#page-empresas .emp-exp-btn--ghost:hover { border-color: rgba(26,20,16,.30); background: rgba(26,20,16,.03); }
#page-empresas .emp-exp-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;
}
#page-empresas .emp-exp-section {
background: #f2f1ef; border-radius: 11px; padding: 16px 18px;
}
#page-empresas .emp-exp-section-title {
font-family: var(--mono); font-size: 9px; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase; color: rgba(26,20,16,.40); margin-bottom: 10px;
}
#page-empresas .emp-aging-mini { display: flex; flex-direction: column; gap: 8px; }
#page-empresas .emp-aging-mini-row { display: flex; align-items: center; gap: 10px; }
#page-empresas .emp-aging-mini-label {
font-family: var(--sans); font-size: 11.5px; font-weight: 500;
color: rgba(26,20,16,.60); width: 70px; flex-shrink: 0;
}
#page-empresas .emp-aging-mini-bar {
flex: 1; height: 6px; background: rgba(26,20,16,.06); border-radius: 3px; overflow: hidden;
}
#page-empresas .emp-aging-mini-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }
#page-empresas .emp-aging-mini-fill--ok { background: rgba(26,122,69,.45); }
#page-empresas .emp-aging-mini-fill--warn { background: rgba(212,136,42,.55); }
#page-empresas .emp-aging-mini-fill--danger { background: rgba(224,82,82,.55); }
#page-empresas .emp-aging-mini-amount {
font-family: var(--mono); font-size: 11px; font-weight: 600;
color: var(--emp-ink); width: 70px; text-align: right;
}
#page-empresas .emp-contact-row {
display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
#page-empresas .emp-contact-row svg { color: rgba(26,20,16,.35); flex-shrink: 0; }
#page-empresas .emp-contact-row span {
font-family: var(--sans); font-size: 12.5px; color: rgba(26,20,16,.70);
}
#page-empresas .emp-exp-table .mono {
font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .03em;
}
#page-empresas .emp-exp-table .muted {
font-family: var(--mono); font-size: 11px; color: rgba(26,20,16,.50);
}
#page-empresas .emp-exp-table .muted.is-vencida { color: var(--emp-bad); font-weight: 600; }
#page-empresas .emp-exp-table .amount {
font-family: var(--mono); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
#page-empresas .emp-exp-table .amount.saldado { color: var(--emp-ok); }
#page-empresas .emp-saldado-stamp {
font-family: var(--mono); font-size: 8.5px; font-weight: 700;
letter-spacing: .12em; color: var(--emp-ok); text-transform: uppercase;
}
#page-empresas .emp-empty-grid {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 12px; padding: 80px 24px; text-align: center; color: rgba(26,20,16,.32); min-height: 300px;
}
@media (max-width: 768px) {
#page-empresas .emp-kpi-strip { flex-direction: column; }
#page-empresas .emp-grid { grid-template-columns: 1fr; }
#page-empresas .emp-exp-grid { grid-template-columns: 1fr; }
#page-empresas .emp-toolbar { flex-direction: column; align-items: stretch; }
#page-empresas .emp-search-wrap { max-width: none; }
#page-empresas .emp-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}
/* HEAD (sin título, solo compatibilidad) */
#page-empresas .emp-head {
display: none; /* título eliminado, strip lo reemplaza */
}
#page-empresas .emp-kpi {
position: relative;
background: #fff;
border: 1px solid var(--emp-line);
border-radius: 14px;
padding: 16px 18px 14px;
box-shadow: 0 1px 4px rgba(26,20,16,.03);
overflow: hidden;
}
#page-empresas .emp-kpi::before {
content: "";
position: absolute;
top: 0; left: 14px; right: 14px;
height: 1.5px;
background: linear-gradient(90deg, var(--emp-amber), transparent);
}
#page-empresas .emp-kpi-sub {
margin-top: 8px;
font-family: var(--mono);
font-size: 9.5px;
font-weight: 500;
letter-spacing: .04em;
color: rgba(26,20,16,.42);
}
#page-empresas .emp-subnav-btn.active {
background: var(--emp-ink);
color: #fff;
box-shadow: 0 1px 3px rgba(26,20,16,.16);
}
#page-empresas .emp-filter-pill.on {
background: var(--emp-ink);
color: #fff;
border-color: var(--emp-ink);
}
#page-empresas .emp-list-item.is-selected {
background: rgba(26,20,16,.035);
border-left-color: var(--emp-amber);
}
#page-empresas .emp-list-item.is-vencida {
border-left-color: var(--emp-bad);
}
/* DETALLE */
#page-empresas .emp-detail {
background: #fff;
border: 1px solid var(--emp-line);
border-radius: 14px;
padding: 22px 24px;
min-height: 480px;
position: relative;
overflow: hidden;
}
/* Líneas guía sutiles tipo papel rayado */
#page-empresas .emp-detail::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
transparent 0,
transparent 31px,
rgba(26,20,16,.025) 31px,
rgba(26,20,16,.025) 32px
);
pointer-events: none;
opacity: .5;
}
#page-empresas .emp-detail > * { position: relative; z-index: 1; }
/* ── HEADER DEL DETALLE ── */
#page-empresas .emp-detail-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
padding-bottom: 18px;
border-bottom: 1px solid var(--emp-line);
margin-bottom: 20px;
flex-wrap: wrap;
}
#page-empresas .emp-detail-eyebrow {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: .20em;
text-transform: uppercase;
color: var(--emp-amber);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 7px;
}
#page-empresas .emp-detail-eyebrow::before {
content: "";
width: 14px; height: 1px;
background: currentColor;
}
#page-empresas .emp-detail-razon {
font-family: var(--serif);
font-size: 32px;
font-weight: 700;
letter-spacing: -.025em;
color: var(--emp-ink);
line-height: 1;
margin: 0 0 10px;
}
#page-empresas .emp-detail-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
#page-empresas .emp-detail-cuit {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
color: rgba(26,20,16,.45);
}
#page-empresas .emp-detail-sep {
color: rgba(26,20,16,.25);
}
#page-empresas .emp-detail-fantasia {
font-family: var(--sans);
font-size: 11.5px;
font-style: italic;
color: rgba(26,20,16,.55);
}
/* Chip de estado */
#page-empresas .emp-estado-chip {
font-family: var(--mono);
font-size: 8.5px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid transparent;
}
#page-empresas .emp-estado-ok { background: rgba(26,122,69,.09); color: #1a7a45; border-color: rgba(26,122,69,.22); }
#page-empresas .emp-estado-warn { background: rgba(212,136,42,.10); color: #b86c1c; border-color: rgba(212,136,42,.28); }
#page-empresas .emp-estado-danger { background: rgba(224,82,82,.09); color: #a83030; border-color: rgba(224,82,82,.22); }
/* Acciones del header */
#page-empresas .emp-detail-head-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Botón hero primario (Nuevo pedido) — Lacca Nera */
#page-empresas .emp-btn-hero-prime {
position: relative;
overflow: hidden;
background: linear-gradient(158deg, #261d15 0%, #0d0a07 100%);
color: #fff;
border: 1px solid rgba(0,0,0,.4);
border-radius: 11px;
padding: 10px 18px;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow:
0 1px 0 rgba(255,255,255,.06) inset,
0 -1px 0 rgba(0,0,0,.35) inset,
0 6px 16px rgba(13,10,7,.28);
transition: box-shadow .22s, transform .15s;
white-space: nowrap;
}
#page-empresas .emp-btn-hero-prime::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(184,108,28,.50) 0%, rgba(184,108,28,.16) 35%, transparent 70%);
opacity: 0;
transition: opacity .35s ease;
}
#page-empresas .emp-btn-hero-prime:hover::before { opacity: 1; }
#page-empresas .emp-btn-hero-prime:hover {
box-shadow: 0 10px 24px rgba(13,10,7,.40), 0 0 20px rgba(184,108,28,.20);
}
#page-empresas .emp-btn-hero-prime:active { transform: translateY(1px); }
#page-empresas .emp-btn-hero-prime svg,
#page-empresas .emp-btn-hero-prime span { position: relative; z-index: 1; }
/* Botón protagonista secundario (Registrar pago) */
#page-empresas .emp-btn-hero-ghost {
background: transparent;
border: 1.5px solid rgba(26,20,16,.18);
color: var(--emp-ink);
border-radius: 11px;
padding: 9px 16px;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all .18s;
white-space: nowrap;
}
#page-empresas .emp-btn-hero-ghost:hover {
background: rgba(26,20,16,.04);
border-color: rgba(26,20,16,.35);
}
/* Botón ⋯ más opciones */
#page-empresas .emp-btn-more {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid rgba(26,20,16,.12);
border-radius: 10px;
color: rgba(26,20,16,.45);
cursor: pointer;
transition: all .15s;
flex-shrink: 0;
}
#page-empresas .emp-btn-more:hover {
background: rgba(26,20,16,.04);
border-color: rgba(26,20,16,.22);
color: var(--emp-ink);
}
/* Menú desplegable */
#page-empresas .emp-more-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 168px;
background: #fff;
border: 1px solid rgba(26,20,16,.10);
border-radius: 12px;
box-shadow: 0 12px 36px rgba(26,20,16,.14), 0 4px 12px rgba(26,20,16,.08);
z-index: 20;
overflow: hidden;
animation: ccfx-card-in .22s cubic-bezier(.16,1,.3,1) both;
}
#page-empresas .emp-more-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
text-align: left;
background: transparent;
border: none;
padding: 11px 16px;
font-family: var(--sans);
font-size: 12.5px;
font-weight: 500;
color: var(--emp-ink);
cursor: pointer;
transition: background .12s;
}
#page-empresas .emp-more-item:hover { background: rgba(26,20,16,.04); }
#page-empresas .emp-more-item svg { color: rgba(26,20,16,.45); flex-shrink: 0; }
/* KPIs detalle — barra compacta inline */
#page-empresas .emp-detail-kpis {
display: flex;
align-items: stretch;
gap: 0;
padding: 0;
border: 1px solid var(--emp-line);
border-radius: 12px;
margin-bottom: 16px;
background: rgba(26,20,16,.018);
overflow: hidden;
}
#page-empresas .emp-detail-kpi {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
padding: 12px 16px;
}
#page-empresas .emp-detail-kpi:first-child { border-radius: 12px 0 0 12px; }
#page-empresas .emp-detail-kpi:last-child { border-radius: 0 12px 12px 0; }
#page-empresas .emp-detail-kpi-sep {
width: 1px;
background: var(--emp-line);
align-self: stretch;
}
#page-empresas .emp-detail-kpi-l {
font-family: var(--mono);
font-size: 8.5px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(26,20,16,.38);
}
#page-empresas .emp-detail-kpi-v {
font-family: var(--serif);
font-size: 18px;
font-weight: 700;
letter-spacing: -.015em;
color: var(--emp-ink);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
#page-empresas .emp-detail-kpi-sub {
font-family: var(--mono);
font-size: 8.5px;
letter-spacing: .04em;
color: rgba(26,20,16,.35);
}
/* Aging card */
#page-empresas .emp-aging-card {
background: rgba(26,20,16,.025);
border: 1px solid var(--emp-line);
border-radius: var(--radius-md);
padding: 14px 16px;
margin-bottom: 16px;
}
#page-empresas .emp-aging-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
#page-empresas .emp-aging-note {
font-family: var(--mono);
font-size: 8.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(26,20,16,.32);
font-style: italic;
}
#page-empresas .emp-aging-bars {
display: flex;
gap: 4px;
height: 36px;
}
#page-empresas .emp-aging-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
border-radius: 6px;
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
/* Info grid */
#page-empresas .emp-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 16px;
}
#page-empresas .emp-info-card {
background: #fff;
border: 1px solid var(--emp-line);
border-radius: var(--radius-md);
padding: 12px 14px;
}
#page-empresas .emp-info-name {
font-family: var(--serif);
font-size: 14px;
font-weight: 600;
color: var(--emp-ink);
margin-top: 6px;
}
#page-empresas .emp-info-line {
font-family: var(--sans);
font-size: 12px;
color: rgba(26,20,16,.55);
margin-top: 2px;
}
/* Mono eyebrow reutilizable */
#page-empresas .emp-mono-eyebrow {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(26,20,16,.42);
}
/* Timeline card */
#page-empresas .emp-timeline-card {
background: rgba(26,20,16,.025);
border: 1px solid var(--emp-line);
border-radius: 11px;
padding: 14px 16px;
}
#page-empresas .emp-timeline-head {
margin-bottom: 12px;
}
#page-empresas .emp-timeline-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 22px 12px;
text-align: center;
font-family: var(--sans);
font-size: 12.5px;
color: rgba(26,20,16,.50);
}
#page-empresas .emp-timeline-empty-sub {
font-size: 11px;
color: rgba(26,20,16,.38);
font-style: italic;
}
/* Empty states */
#page-empresas .emp-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 80px 24px;
text-align: center;
color: rgba(26,20,16,.32);
min-height: 380px;
}
#page-empresas .emp-empty-state-small { min-height: 200px; padding: 40px 24px; }
#page-empresas .emp-empty-title {
font-family: var(--serif);
font-size: 18px;
font-weight: 500;
color: rgba(26,20,16,.55);
margin-top: 4px;
}
#page-empresas .emp-empty-sub {
font-family: var(--sans);
font-size: 12.5px;
color: rgba(26,20,16,.42);
max-width: 38ch;
line-height: 1.5;
}
/* Table cards (placeholders fase 2-5) */
#page-empresas .emp-table-card {
background: #fff;
border: 1px solid var(--emp-line);
border-radius: 14px;
overflow: hidden;
}
/* ═════════════════════════════════════════════════════════════════════════
v7.21.0 · EMPRESAS EN VENTA RÁPIDA
Toggle CF/Empresa, card empresa, método cuenta corriente
═════════════════════════════════════════════════════════════════════════ */
/* Toggle Consumidor final / Empresa */
.vr-tipocli-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
background: #f2f1ef;
border: 1px solid rgba(191,180,170,.32);
border-radius: 8px;
padding: 2px;
margin-bottom: 10px;
}
.vr-tipocli-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 7px 10px;
border: 0;
background: transparent;
border-radius: 6px;
color: rgba(26,20,16,.55);
font-family: var(--sans);
font-size: 11.5px;
font-weight: 500;
letter-spacing: .01em;
cursor: pointer;
transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.vr-tipocli-btn svg { opacity: .8; transition: opacity .18s ease; }
.vr-tipocli-btn:hover { color: rgba(26,20,16,.78); }
.vr-tipocli-btn.is-active {
background: #fff;
color: var(--ink, #1A1410);
box-shadow: 0 1px 2px rgba(32,24,18,.05), 0 4px 10px rgba(32,24,18,.04);
}
.vr-tipocli-btn.is-active svg { opacity: 1; color: #E8663A; }
/* Card empresa seleccionada — editorial luxury */
.vr-emp-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px 12px 10px;
background: #FFFFFF;
border: 1px solid rgba(191,180,170,.30);
border-radius: 10px;
box-shadow: 0 1px 2px rgba(32,24,18,.02), 0 6px 18px rgba(32,24,18,.04);
}
.vr-emp-card-head {
display: flex;
align-items: center;
gap: 10px;
}
.vr-emp-card-avatar {
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #E9DFD3, #D7C8B6);
color: #5C4836;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-weight: 500;
font-size: 13px;
letter-spacing: .02em;
}
.vr-emp-card-id { flex: 1; min-width: 0; }
.vr-emp-card-rs {
font-family: var(--serif);
font-size: 15px;
font-weight: 500;
color: var(--ink, #1A1410);
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vr-emp-card-meta {
margin-top: 2px;
display: flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: .04em;
color: rgba(26,20,16,.50);
}
.vr-emp-card-dot { opacity: .5; }
.vr-emp-card-divider {
height: 1px;
background: rgba(191,180,170,.30);
}
.vr-emp-card-stats {
display: flex;
flex-direction: column;
gap: 6px;
}
.vr-emp-stat {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.vr-emp-stat-lbl {
font-family: var(--sans);
font-size: 11.5px;
color: rgba(26,20,16,.55);
}
.vr-emp-stat-val {
font-family: var(--mono);
font-size: 12.5px;
font-weight: 500;
color: var(--ink, #1A1410);
letter-spacing: .01em;
}
.vr-emp-stat-val.is-warn { color: #B57628; }
.vr-emp-stat-val.is-danger { color: #A83030; }
.vr-emp-stat-ic { font-size: 11px; margin-left: 2px; }
/* Avatar de dropdown en modo empresa */
.vr-emp-dd-avatar {
background: linear-gradient(135deg, #E9DFD3, #D7C8B6) !important;
color: #5C4836 !important;
font-family: var(--serif) !important;
}
/* Botón Cuenta corriente (visible solo en modo empresa) */
.vr-pago-btn.vr-pago-ctacte { /* hereda layout de .vr-pago-btn */ }
.vr-pago-btn.vr-pago-ctacte.active {
background: linear-gradient(180deg, rgba(232,102,58,.08), rgba(232,102,58,.04));
border-color: #E8663A;
color: #E8663A;
}
/* Form Cuenta corriente B2B */
.vr-ctacte-form {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
background: #f8f6f3;
border: 1px dashed rgba(191,180,170,.55);
border-radius: 8px;
}
/* v7.21.0 · fix: anclar dropdown empresa */
.vr-overlay .vr-emp-search-area { position: relative; z-index: 10; }
/* ═══════════════════════════════════════════════════════════════════
v7.22.0 — VR · MODO EMPRESA (form Pedido B2B en columna derecha)
Estilos del bloque .vr-emp-pedido-block + gating .vr-mode-empresa
═══════════════════════════════════════════════════════════════════ */
/* Por defecto el bloque está oculto — solo aparece en modo empresa */
.vr-emp-pedido-block { display: none; }
.vr-shell.vr-mode-empresa .vr-emp-pedido-block { display: block; }
/* En modo empresa: ocultar descuentos + resumen de pago */
.vr-shell.vr-mode-empresa .vr-col-right .vr-rpanel:not(.vr-emp-pedido-block):not(:first-child) {
display: none;
}
/* En modo empresa: el saldo-a-favor + reward banner del CF no aplican */
.vr-shell.vr-mode-empresa #vr-saldo-wrap,
.vr-shell.vr-mode-empresa .vr-saldo-wrap,
.vr-shell.vr-mode-empresa #vr-reward-banner {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════
VR EMPRESA — DARK PREMIUM THEME
Transforma todo el modal en una estética oscura y sofisticada
═══════════════════════════════════════════════════════════════ */
/* ── Transition suave entre modos ── */
.vr-shell,
.vr-shell .vr-head,
.vr-shell .vr-col,
.vr-shell .vr-col-productos,
.vr-shell .vr-col-carrito,
.vr-shell .vr-col-right,
.vr-shell .vr-right-scroll {
transition: background .45s cubic-bezier(.16,1,.3,1),
color .45s cubic-bezier(.16,1,.3,1),
border-color .45s cubic-bezier(.16,1,.3,1);
}
/* ── Shell base ── */
.vr-shell.vr-mode-empresa {
background: var(--surface-1) !important;
color: var(--ink-primary) !important;
}
/* ── Overlay backdrop — más profundo ── */
.vr-overlay:has(.vr-mode-empresa) {
background: rgba(0,0,0,.65) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}
/* ── Header ── */
.vr-shell.vr-mode-empresa .vr-head {
background: var(--floor) !important;
border-bottom-color: var(--line-soft) !important;
}
.vr-shell.vr-mode-empresa .vr-head-wm-name,
.vr-shell.vr-mode-empresa .vr-head-title {
color: #F5EFE6 !important;
}
.vr-shell.vr-mode-empresa .vr-head-wm-dot {
color: #E8663A !important;
}
.vr-shell.vr-mode-empresa .vr-head-sub {
color: rgba(255,255,255,.35) !important;
}
.vr-shell.vr-mode-empresa .vr-head-close {
color: rgba(255,255,255,.40) !important;
}
.vr-shell.vr-mode-empresa .vr-head-close:hover {
background: rgba(255,255,255,.08) !important;
color: #FFF !important;
}
.vr-shell.vr-mode-empresa .vr-head-loc {
background: rgba(255,255,255,.06) !important;
border-color: rgba(255,255,255,.10) !important;
color: rgba(255,255,255,.65) !important;
}
/* ── Columna Productos ── */
.vr-shell.vr-mode-empresa .vr-col-productos {
background: var(--surface-1) !important;
}
.vr-shell.vr-mode-empresa .vr-col-title {
color: #F5EFE6 !important;
}
.vr-shell.vr-mode-empresa .vr-search-input {
background: rgba(255,255,255,.05) !important;
border-color: rgba(255,255,255,.10) !important;
color: #F5EFE6 !important;
}
.vr-shell.vr-mode-empresa .vr-search-input::placeholder {
color: rgba(255,255,255,.28) !important;
}
.vr-shell.vr-mode-empresa .vr-search-input:focus {
background: rgba(255,255,255,.07) !important;
border-color: rgba(232,102,58,.50) !important;
box-shadow: 0 0 0 3px rgba(232,102,58,.12) !important;
}
.vr-shell.vr-mode-empresa .vr-search-ico {
color: rgba(255,255,255,.25) !important;
}
.vr-shell.vr-mode-empresa .vr-search-kbd {
background: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.25) !important;
}
/* Category pills */
.vr-shell.vr-mode-empresa .vr-cat-pill {
background: rgba(255,255,255,.04) !important;
color: rgba(255,255,255,.50) !important;
border-color: rgba(255,255,255,.06) !important;
}
.vr-shell.vr-mode-empresa .vr-cat-pill:hover {
background: rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.80) !important;
}
.vr-shell.vr-mode-empresa .vr-cat-pill.active {
background: #F5EFE6 !important;
color: #131110 !important;
border-color: #F5EFE6 !important;
}
/* Product cards */
.vr-shell.vr-mode-empresa .vr-prod-card {
border-bottom-color: rgba(255,255,255,.04) !important;
}
.vr-shell.vr-mode-empresa .vr-prod-card:hover {
background: rgba(255,255,255,.04) !important;
}
.vr-shell.vr-mode-empresa .vr-prod-name {
color: rgba(255,255,255,.88) !important;
}
.vr-shell.vr-mode-empresa .vr-prod-precio-num {
color: rgba(255,255,255,.65) !important;
}
.vr-shell.vr-mode-empresa .vr-prod-precio-unit,
.vr-shell.vr-mode-empresa .vr-prod-stock {
color: rgba(255,255,255,.30) !important;
}
.vr-shell.vr-mode-empresa .vr-prod-add {
background: rgba(232,102,58,.15) !important;
color: #E8663A !important;
}
.vr-shell.vr-mode-empresa .vr-prod-add:hover {
background: #E8663A !important;
color: #FFF !important;
}
.vr-shell.vr-mode-empresa .vr-prod-empty {
color: rgba(255,255,255,.25) !important;
}
.vr-shell.vr-mode-empresa .vr-prod-avatar {
opacity: .9;
}
/* Scrollbars dark */
.vr-shell.vr-mode-empresa .vr-prod-scroll:hover,
.vr-shell.vr-mode-empresa .vr-cart-body:hover,
.vr-shell.vr-mode-empresa .vr-right-scroll:hover {
scrollbar-color: rgba(255,255,255,.12) transparent !important;
}
/* ── Columna Carrito ── */
.vr-shell.vr-mode-empresa .vr-col-carrito {
background: var(--surface-1) !important;
}
.vr-shell.vr-mode-empresa .vr-col {
border-right-color: rgba(255,255,255,.05) !important;
}
/* Cart headers */
.vr-shell.vr-mode-empresa .vr-cart-headers {
border-bottom-color: rgba(255,255,255,.08) !important;
}
.vr-shell.vr-mode-empresa .vr-cart-headers span {
color: rgba(255,255,255,.28) !important;
}
/* Cart badge */
.vr-shell.vr-mode-empresa .vr-cart-badge {
background: #E8663A !important;
}
/* Cart empty */
.vr-shell.vr-mode-empresa .vr-cart-empty {
color: rgba(255,255,255,.22) !important;
}
.vr-shell.vr-mode-empresa .vr-cart-empty svg {
stroke: rgba(255,255,255,.15) !important;
}
/* Cart rows */
.vr-shell.vr-mode-empresa .vr-cart-row {
border-bottom-color: rgba(255,255,255,.05) !important;
}
.vr-shell.vr-mode-empresa .vr-cart-row:hover {
background: rgba(255,255,255,.02) !important;
}
.vr-shell.vr-mode-empresa .vr-cart-prod-name {
color: rgba(255,255,255,.88) !important;
}
.vr-shell.vr-mode-empresa .vr-cart-prod-tag {
color: rgba(255,255,255,.30) !important;
}
.vr-shell.vr-mode-empresa .vr-cart-precio {
color: rgba(255,255,255,.45) !important;
}
.vr-shell.vr-mode-empresa .vr-cart-subtotal {
color: #F5EFE6 !important;
}
/* Stepper */
.vr-shell.vr-mode-empresa .vr-stepper {
background: rgba(255,255,255,.04) !important;
border-color: rgba(255,255,255,.10) !important;
}
.vr-shell.vr-mode-empresa .vr-stepper:focus-within {
border-color: rgba(232,102,58,.40) !important;
box-shadow: 0 0 0 3px rgba(232,102,58,.10) !important;
}
.vr-shell.vr-mode-empresa .vr-stepper-btn {
color: rgba(255,255,255,.45) !important;
}
.vr-shell.vr-mode-empresa .vr-stepper-btn:hover {
background: rgba(255,255,255,.08) !important;
color: #FFF !important;
}
.vr-shell.vr-mode-empresa .vr-stepper-input {
color: #F5EFE6 !important;
border-color: rgba(255,255,255,.08) !important;
background: transparent !important;
}
.vr-shell.vr-mode-empresa .vr-stepper-input:focus {
background: rgba(232,102,58,.06) !important;
}
.vr-shell.vr-mode-empresa .vr-stepper-unit {
color: rgba(255,255,255,.30) !important;
}
/* Delete button */
.vr-shell.vr-mode-empresa .vr-cart-del {
color: rgba(255,255,255,.18) !important;
}
.vr-shell.vr-mode-empresa .vr-cart-del:hover {
background: rgba(192,57,43,.12) !important;
color: #E74C3C !important;
}
/* Vaciar btn */
.vr-shell.vr-mode-empresa .vr-vaciar-btn {
border-color: rgba(255,255,255,.10) !important;
color: rgba(255,255,255,.35) !important;
}
.vr-shell.vr-mode-empresa .vr-vaciar-btn:hover {
background: rgba(255,255,255,.05) !important;
color: rgba(255,255,255,.70) !important;
border-color: rgba(255,255,255,.18) !important;
}
/* Obs */
.vr-shell.vr-mode-empresa .vr-obs-toggle {
color: rgba(255,255,255,.30) !important;
}
.vr-shell.vr-mode-empresa .vr-obs-toggle:hover {
color: rgba(255,255,255,.65) !important;
}
.vr-shell.vr-mode-empresa .vr-obs-input {
background: rgba(255,255,255,.04) !important;
border-color: rgba(255,255,255,.10) !important;
color: #F5EFE6 !important;
}
.vr-shell.vr-mode-empresa .vr-obs-input:focus {
border-color: rgba(232,102,58,.40) !important;
box-shadow: 0 0 0 3px rgba(232,102,58,.08) !important;
}
/* Totals */
.vr-shell.vr-mode-empresa .vr-cart-totals {
border-top-color: rgba(255,255,255,.06) !important;
}
.vr-shell.vr-mode-empresa .vr-totals-row {
color: rgba(255,255,255,.40) !important;
}
/* En modo empresa: ocultar Total/Descuento/Caja/Puntos del carrito central (el desglose está en el panel B2B) */
.vr-shell.vr-mode-empresa .vr-totals-total,
.vr-shell.vr-mode-empresa .vr-totals-desc,
.vr-shell.vr-mode-empresa .vr-totals-caja,
.vr-shell.vr-mode-empresa .vr-pts-row {
display: none !important;
}
.vr-shell.vr-mode-empresa #vr-total.vr-num-up {
color: #4ADE80 !important;
text-shadow: 0 0 20px rgba(74,222,128,.15) !important;
}
.vr-shell.vr-mode-empresa #vr-total.vr-num-down {
color: #FB923C !important;
text-shadow: 0 0 20px rgba(251,146,60,.15) !important;
}
.vr-shell.vr-mode-empresa .vr-pts-preview {
color: rgba(255,255,255,.25) !important;
}
/* Confirmar btn — modo empresa: acento premium */
.vr-shell.vr-mode-empresa .vr-confirmar-btn {
background: linear-gradient(135deg, #E8663A 0%, #A84E1E 100%) !important;
color: #FFF !important;
border: none !important;
box-shadow: 0 4px 20px rgba(232,102,58,.25), 0 0 0 1px rgba(232,102,58,.30) inset !important;
}
.vr-shell.vr-mode-empresa .vr-confirmar-btn:hover:not(:disabled) {
background: linear-gradient(135deg, #D4702E 0%, #B5551F 100%) !important;
box-shadow: 0 8px 32px rgba(232,102,58,.35), 0 0 0 1px rgba(232,102,58,.40) inset !important;
}
.vr-shell.vr-mode-empresa .vr-confirmar-btn:disabled {
background: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.20) !important;
box-shadow: none !important;
}
/* ── Columna Derecha ── */
.vr-shell.vr-mode-empresa .vr-col-right {
background: var(--surface-1) !important;
}
.vr-shell.vr-mode-empresa .vr-right-scroll {
background: var(--surface-1) !important;
}
.vr-shell.vr-mode-empresa .vr-rpanel-title {
color: #F5EFE6 !important;
}
.vr-shell.vr-mode-empresa .vr-rpanel-label {
color: rgba(255,255,255,.30) !important;
}
/* Tipo cliente toggle */
.vr-shell.vr-mode-empresa .vr-tipocli-toggle {
background: rgba(255,255,255,.04) !important;
border-color: rgba(255,255,255,.06) !important;
}
.vr-shell.vr-mode-empresa .vr-tipocli-btn {
color: rgba(255,255,255,.40) !important;
}
.vr-shell.vr-mode-empresa .vr-tipocli-btn.is-active {
background: #F5EFE6 !important;
color: #131110 !important;
box-shadow: 0 2px 8px rgba(0,0,0,.30) !important;
}
.vr-shell.vr-mode-empresa .vr-tipocli-btn.is-active[data-tipo="empresa"] {
background: #E8663A !important;
color: #FFF !important;
}
/* Empresa search */
.vr-shell.vr-mode-empresa .vr-cli-search-input,
.vr-shell.vr-mode-empresa .vr-emp-search-input {
background: rgba(255,255,255,.05) !important;
border-color: rgba(255,255,255,.10) !important;
color: #F5EFE6 !important;
}
.vr-shell.vr-mode-empresa .vr-cli-search-input::placeholder,
.vr-shell.vr-mode-empresa .vr-emp-search-input::placeholder {
color: rgba(255,255,255,.25) !important;
}
.vr-shell.vr-mode-empresa .vr-cli-search-input:focus,
.vr-shell.vr-mode-empresa .vr-emp-search-input:focus {
background: rgba(255,255,255,.07) !important;
border-color: rgba(232,102,58,.45) !important;
}
/* Empresa card */
.vr-shell.vr-mode-empresa .vr-emp-card {
background: rgba(255,255,255,.03) !important;
border-color: rgba(255,255,255,.08) !important;
box-shadow: 0 2px 12px rgba(0,0,0,.25) !important;
}
.vr-shell.vr-mode-empresa .vr-emp-card-avatar {
background: linear-gradient(135deg, #E8663A, #8C4218) !important;
color: #FFF !important;
}
.vr-shell.vr-mode-empresa .vr-emp-card-rs {
color: #F5EFE6 !important;
}
.vr-shell.vr-mode-empresa .vr-emp-card-meta {
color: rgba(255,255,255,.35) !important;
}
.vr-shell.vr-mode-empresa .vr-emp-card-divider {
border-color: rgba(255,255,255,.06) !important;
}
.vr-shell.vr-mode-empresa .vr-emp-stat-lbl {
color: rgba(255,255,255,.30) !important;
}
.vr-shell.vr-mode-empresa .vr-emp-stat-val {
color: #F5EFE6 !important;
}
/* Dropdown empresa — dark */
.vr-shell.vr-mode-empresa .vr-cli-dropdown,
.vr-shell.vr-mode-empresa .vr-emp-dropdown {
background: #1A1816 !important;
border-color: rgba(255,255,255,.08) !important;
box-shadow: 0 12px 40px rgba(0,0,0,.50) !important;
}
.vr-shell.vr-mode-empresa .vr-cli-dd-item,
.vr-shell.vr-mode-empresa .vr-emp-dd-item {
color: rgba(255,255,255,.85) !important;
}
.vr-shell.vr-mode-empresa .vr-cli-dd-name {
color: #F5EFE6 !important;
}
.vr-shell.vr-mode-empresa .vr-cli-dd-pts {
color: rgba(255,255,255,.45) !important;
}
.vr-shell.vr-mode-empresa .vr-cli-dd-empty {
color: rgba(255,255,255,.40) !important;
}
.vr-shell.vr-mode-empresa .vr-cli-dd-item:hover,
.vr-shell.vr-mode-empresa .vr-emp-dd-item:hover {
background: rgba(255,255,255,.10) !important;
color: #FFF !important;
}
.vr-shell.vr-mode-empresa .vr-cli-dd-item:hover .vr-cli-dd-name {
color: #FFF !important;
}
/* ── Pedido block (formulario B2B) — dark premium ── */
.vr-shell.vr-mode-empresa .vr-emp-pedido-eyebrow {
color: #E8663A !important;
letter-spacing: .14em;
}
.vr-shell.vr-mode-empresa .vr-emp-fg > label {
color: rgba(255,255,255,.40) !important;
}
.vr-shell.vr-mode-empresa .vr-emp-req {
color: #FB923C !important;
}
.vr-shell.vr-mode-empresa .vr-emp-opt {
color: rgba(255,255,255,.25) !important;
}
.vr-shell.vr-mode-empresa .vr-emp-input,
.vr-shell.vr-mode-empresa .vr-emp-textarea {
background: rgba(255,255,255,.04) !important;
border-color: rgba(255,255,255,.10) !important;
color: #F5EFE6 !important;
}
.vr-shell.vr-mode-empresa .vr-emp-input:focus,
.vr-shell.vr-mode-empresa .vr-emp-textarea:focus {
border-color: rgba(232,102,58,.50) !important;
box-shadow: 0 0 0 3px rgba(232,102,58,.12) !important;
}
.vr-shell.vr-mode-empresa .vr-emp-input::placeholder,
.vr-shell.vr-mode-empresa .vr-emp-textarea::placeholder {
color: rgba(255,255,255,.20) !important;
}
.vr-shell.vr-mode-empresa .vr-emp-hint {
color: rgba(255,255,255,.30) !important;
}
/* Totales del pedido B2B */
.vr-shell.vr-mode-empresa .vr-emp-totales {
border-top-color: rgba(255,255,255,.06) !important;
}
.vr-shell.vr-mode-empresa .vr-emp-total-row {
color: rgba(255,255,255,.50) !important;
}
.vr-shell.vr-mode-empresa .vr-emp-total-row em {
color: rgba(255,255,255,.28) !important;
}
.vr-shell.vr-mode-empresa .vr-emp-total-amt {
color: #F5EFE6 !important;
}
.vr-shell.vr-mode-empresa .vr-emp-total-disc {
color: #FB923C !important;
}
.vr-shell.vr-mode-empresa .vr-emp-total-final {
border-top-color: rgba(255,255,255,.08) !important;
}
.vr-shell.vr-mode-empresa .vr-emp-total-hero {
color: #F5EFE6 !important;
}
.vr-shell.vr-mode-empresa .vr-emp-total-note {
color: rgba(255,255,255,.28) !important;
}
/* ── Acento sutil en el borde del shell ── */
.vr-shell.vr-mode-empresa {
box-shadow: 0 0 0 1px rgba(232,102,58,.15),
0 8px 48px rgba(0,0,0,.45),
0 0 80px rgba(232,102,58,.04) !important;
}
/* ── B2B tag sutil en el header ── */
.vr-shell.vr-mode-empresa .vr-head-right::before {
content: 'B2B';
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: #E8663A;
background: rgba(232,102,58,.10);
padding: 3px 8px;
border-radius: 4px;
flex-shrink: 0;
animation: vrFadeIn .4s ease .5s both;
}
/* ── Entrada animada al modo empresa ── */
@keyframes vrDarkModeIn {
from { filter: brightness(1.1); }
to { filter: brightness(1); }
}
.vr-shell.vr-mode-empresa .vr-col-productos,
.vr-shell.vr-mode-empresa .vr-col-carrito,
.vr-shell.vr-mode-empresa .vr-col-right {
animation: vrDarkModeIn .5s ease both;
}
/* Eyebrow B2B sobre el título */
.vr-emp-pedido-eyebrow {
font-family: var(--mono);
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: .12em;
color: rgba(26,20,16,.45);
margin-bottom: 6px;
}
/* Grid 2 columnas para los campos */
.vr-emp-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 10px;
margin-top: 4px;
}
.vr-emp-fg { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vr-emp-fg-full { grid-column: 1 / -1; }
.vr-emp-fg > label {
font-family: var(--mono);
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: .06em;
color: rgba(26,20,16,.55);
}
.vr-emp-req { color: #E8663A; font-weight: 700; }
.vr-emp-opt { color: rgba(26,20,16,.40); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 9.5px; }
.vr-emp-input,
.vr-emp-textarea {
width: 100%;
padding: 8px 10px;
background: #fff;
border: 1px solid rgba(191,180,170,.40);
border-radius: 7px;
font-family: var(--sans);
font-size: 12.5px;
color: var(--ink, #1A1410);
outline: none;
transition: border-color .14s, box-shadow .14s;
}
.vr-emp-input.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
.vr-emp-textarea { resize: vertical; min-height: 52px; line-height: 1.45; }
.vr-emp-input:focus,
.vr-emp-textarea:focus {
border-color: #E8663A;
box-shadow: 0 0 0 3px rgba(232,102,58,.10);
}
.vr-emp-hint {
font-family: var(--sans);
font-size: 10.5px;
color: rgba(26,20,16,.50);
font-style: italic;
line-height: 1.4;
}
/* Totales del pedido — mismo look que pe-foot del modal Empresas */
.vr-emp-totales {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(191,180,170,.30);
display: flex;
flex-direction: column;
gap: 6px;
}
.vr-emp-total-row {
display: flex;
align-items: baseline;
justify-content: space-between;
font-family: var(--sans);
font-size: 12.5px;
color: rgba(26,20,16,.70);
}
.vr-emp-total-row em {
font-style: normal;
font-family: var(--mono);
font-size: 10.5px;
color: rgba(26,20,16,.45);
margin-left: 4px;
}
.vr-emp-total-amt {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
color: var(--ink, #1A1410);
}
.vr-emp-total-disc { color: #E8663A; }
.vr-emp-total-final {
margin-top: 6px;
padding-top: 10px;
border-top: 1px dashed rgba(191,180,170,.40);
}
.vr-emp-total-final > span:first-child {
font-family: var(--sans);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(26,20,16,.55);
}
.vr-emp-total-hero {
font-family: var(--serif, var(--display));
font-size: 24px;
font-weight: 600;
letter-spacing: -.01em;
color: var(--ink, #1A1410);
}
.vr-emp-total-note {
font-family: var(--mono);
font-size: 9px;
letter-spacing: .04em;
color: rgba(26,20,16,.38);
margin-top: 8px;
line-height: 1.4;
text-align: center;
font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
.vr-emp-grid { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════
v7.23.0 — Edición / Anulación de pedidos B2B
═══════════════════════════════════════════════════════════════════ */
/* Cell de acciones en la tabla de pedidos: inline icon buttons */
.emp-pedido-actions-cell {
display: flex;
gap: 4px;
justify-content: flex-end;
align-items: center;
}
.emp-edit-btn { transition: color .14s, border-color .14s, background .14s; }
.emp-edit-btn:hover {
border-color: #E8663A !important;
color: #E8663A !important;
background: rgba(232,102,58,.05) !important;
}
.emp-anular-btn { transition: color .14s, border-color .14s, background .14s; }
.emp-anular-btn:hover {
border-color: #b94434 !important;
color: #b94434 !important;
background: rgba(185,68,52,.05) !important;
}
/* Modal m-pedido-empresa en modo parcial: bloquear items + descuento + empresa */
.lx-modal.pe-modo-parcial .pe-prod-search-wrap,
.lx-modal.pe-modo-parcial .pe-prod-dropdown,
.lx-modal.pe-modo-parcial #pe-descuento,
.lx-modal.pe-modo-parcial .pe-emp-search-wrap {
opacity: .48;
pointer-events: none;
}
.lx-modal.pe-modo-parcial .pe-cart-table tbody tr {
opacity: .65;
pointer-events: none;
}
.lx-modal.pe-modo-parcial #pe-descuento {
background: rgba(191,180,170,.10);
}
/* ═══════════════════════════════════════════════════════════════════════════
v7.24.0 — FEATURE GATE: Empresas B2B en desarrollo
═══════════════════════════════════════════════════════════════════════════ */
/* Overlay de acceso bloqueado sobre la página */
.feat-blocked-overlay {
position: absolute;
inset: 0;
z-index: 10;
background: #fdfcfb;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 24px;
}
#page-empresas { position: relative; }
.feat-blocked-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
max-width: 380px;
text-align: center;
}
.feat-blocked-icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: rgba(26,20,16,.04);
border: 1px solid rgba(26,20,16,.08);
display: flex;
align-items: center;
justify-content: center;
color: rgba(26,20,16,.35);
margin-bottom: 4px;
}
.feat-blocked-eyebrow {
font-family: var(--mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.16em;
color: rgba(26,20,16,.40);
text-transform: uppercase;
}
.feat-blocked-title {
font-family: var(--serif);
font-size: 28px;
font-weight: 600;
letter-spacing: -0.02em;
color: #1A1410;
margin: 0;
line-height: 1.1;
}
.feat-blocked-sub {
font-family: var(--sans);
font-size: 14px;
color: rgba(26,20,16,.55);
line-height: 1.55;
margin: 0;
max-width: 300px;
}
.feat-blocked-btn {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 10px 20px;
background: rgba(26,20,16,.05);
border: 1px solid rgba(26,20,16,.10);
border-radius: 9px;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
color: rgba(26,20,16,.70);
cursor: pointer;
transition: background .14s, border-color .14s, color .14s;
}
.feat-blocked-btn:hover {
background: rgba(26,20,16,.08);
border-color: rgba(26,20,16,.18);
color: #1A1410;
}
/* ── 1. GLOBAL: section-core padding ─────────────────────────────────────── */
@media (max-width: 1024px) {
#pages > .page.section-core { padding: 36px 32px 56px !important; }
}
@media (max-width: 768px) {
#pages > .page.section-core { padding: 24px 18px 44px !important; }
}
@media (max-width: 480px) {
#pages > .page.section-core { padding: 16px 12px 36px !important; }
}
/* ── 2. SIDEBAR / MAIN lateral ────────────────────────────────────────────── */
/* Usamos rangos min-max para NO interferir con el breakpoint ≤768px donde
el sidebar desaparece y main ocupa el 100%. */
@media (min-width: 769px) and (max-width: 1050px) {
.tb-nav-dropdown { width: 200px; }
#main { margin-left: 216px !important; width: calc(100% - 216px) !important; }
}
@media (min-width: 769px) and (max-width: 900px) {
.tb-nav-dropdown { width: 180px; }
#main { margin-left: 196px !important; width: calc(100% - 196px) !important; }
}
/* ── 3. DASHBOARD ─────────────────────────────────────────────────────────── */
/* 1024px: KPI cards un poco más compactos */
/* 768px: Header apilado — greeting ocupa toda la fila */
/* 480px: KPI más compactos, charts apilados */
@media (max-width: 480px) {
#page-dashboard .nd-body { grid-template-columns: 1fr; gap: 12px; }
#page-dashboard .nd-col-side { grid-template-columns: 1fr; }
#page-dashboard .nd-col-side > .nd-card:first-child { grid-column: auto; }
}
/* ── 4. MOVIMIENTOS ──────────────────────────────────────────────────────── */
/* Page header: reducir tipografía en tablet */
@media (max-width: 1024px) {
#page-movimientos .mv2-page-head-title { font-size: 28px; }
#page-movimientos .mv2-page-head { margin-bottom: 18px; }
}
@media (max-width: 768px) {
#page-movimientos .mv2-page-head-title { font-size: 26px; }
#page-movimientos .mv2-page-head-sub { font-size: 13px; }
#page-movimientos .mv2-page-head { margin-bottom: 14px; }
}
@media (max-width: 480px) {
#page-movimientos .mv2-page-head-title { font-size: 22px; }
}
/* KPI strip: el 4-col default colapsa demasiado tarde.
Salto: 4-col → 2-col a 960px (antes de llegar al 3-col legacy de 1100px que se pisa) */
@media (max-width: 960px) {
#page-movimientos .mv2-kpi-strip {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0;
}
#page-movimientos .mv2-kpi:nth-child(2) { border-right: none; }
#page-movimientos .mv2-kpi:nth-child(n+3){ border-top: 1px solid rgba(26,20,16,.06); }
}
@media (max-width: 480px) {
#page-movimientos .mv2-kpi-strip { grid-template-columns: 1fr !important; }
#page-movimientos .mv2-kpi { border-right: none !important; border-top: 1px solid rgba(26,20,16,.06) !important; padding: 12px 14px; }
#page-movimientos .mv2-kpi:first-child { border-top: none !important; }
#page-movimientos .mv2-kpi-num { font-size: 22px; }
}
/* Toolbar: búsqueda ocupa toda la fila en mobile */
@media (max-width: 640px) {
#page-movimientos .mv2-toolbar {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.mv2-search-wrap { flex-basis: 100%; min-width: 0; }
#page-movimientos .mv2-filters { flex-wrap: wrap; gap: 6px; width: 100%; }
}
/* Pills de filtro: scroll horizontal en tablet/mobile */
@media (max-width: 960px) {
#page-movimientos .mv2-pills {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px;
}
#page-movimientos .mv2-pills::-webkit-scrollbar { display: none; }
#page-movimientos .mv2-pill { white-space: nowrap; flex-shrink: 0; }
}
/* Tabla: scroll horizontal contenido en mobile */
/* KPI numbers en 768px */
@media (max-width: 768px) {
.mv-table-card, #page-movimientos .mv2-table-card {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 10px;
}
#page-movimientos .mv2-kpi-num { font-size: 24px; }
#page-movimientos .mv2-kpi-num-sub { font-size: 11px; }
#page-movimientos .mv2-kpi { padding: 14px 16px; }
}
/* ── STOCK: refinamientos mobile ──────────────────────────────────────────── */
/* 960px: header stack cuando el botón está en la página (sin topbar) */
@media (max-width: 960px) {
#page-stock .sk-header { align-items: flex-start; gap: 12px; }
#page-stock .sk-kpi-card { padding: 14px 16px 12px !important; }
#page-stock .sk-kpi-num { font-size: 36px !important; }
}
/* 640px: ya existen reglas — complementamos */
@media (max-width: 640px) {
/* Header columna */
#page-stock .sk-header { flex-direction: column; align-items: flex-start; gap: 8px; }
#page-stock .sk-header-right { width: 100%; }
/* Eyebrow: reducir letter-spacing para que quepan en 1 línea */
#page-stock .sk-kpi-eyebrow { letter-spacing: 0.06em !important; }
#page-stock .sk-kpi-num { font-size: 30px !important; }
#page-stock .sk-kpi-num-sub { font-size: 11px; }
#page-stock .sk-kpi-card { padding: 12px !important; gap: 10px !important; }
/* Tabla: sticky primera columna para que el scroll sea usable */
#page-stock .sk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* 375px: versión más compacta */
@media (max-width: 420px) {
#page-stock .sk-kpi-eyebrow { font-size: 8px !important; letter-spacing: 0.04em !important; }
#page-stock .sk-kpi-delta { font-size: 8.5px; padding: 2px 5px; }
#page-stock .sk-kpi-num { font-size: 28px !important; }
#page-stock .sk-kpi-card { padding: 10px !important; gap: 8px !important; }
}
/* ═══════════════════════════════════════════════════════════════════
VR EMPRESA DARK — FINAL OVERRIDES (debe ir último para ganar cascada)
═══════════════════════════════════════════════════════════════════ */
/* Shell + overlay */
.vr-overlay .vr-shell.vr-mode-empresa {
background: #131110 !important;
box-shadow: 0 0 0 1px rgba(232,102,58,.18),
0 12px 56px rgba(0,0,0,.55),
0 0 100px rgba(232,102,58,.05) !important;
}
/* Header */
.vr-overlay .vr-mode-empresa .vr-head {
background: var(--floor) !important;
border-bottom-color: var(--line-soft) !important;
}
/* Columns (Notion dark — unificadas) */
.vr-overlay .vr-mode-empresa .vr-col-productos {
background: var(--surface-1) !important;
border-right-color: var(--line-soft) !important;
}
.vr-overlay .vr-mode-empresa .vr-col-carrito {
background: var(--surface-1) !important;
border-right-color: var(--line-soft) !important;
}
.vr-overlay .vr-mode-empresa .vr-col-right {
background: var(--surface-1) !important;
}
/* Cart headers */
.vr-overlay .vr-mode-empresa .vr-cart-headers {
border-bottom-color: rgba(255,255,255,.08) !important;
}
.vr-overlay .vr-mode-empresa .vr-cart-headers span {
color: rgba(255,255,255,.28) !important;
}
/* Cart rows */
.vr-overlay .vr-mode-empresa .vr-cart-row {
border-bottom-color: rgba(255,255,255,.05) !important;
}
.vr-overlay .vr-mode-empresa .vr-cart-prod-name {
color: rgba(255,255,255,.88) !important;
}
.vr-overlay .vr-mode-empresa .vr-cart-prod-tag {
color: rgba(255,255,255,.30) !important;
}
.vr-overlay .vr-mode-empresa .vr-cart-precio,
.vr-overlay .vr-mode-empresa .vr-cart-precio-unit {
color: rgba(255,255,255,.40) !important;
}
.vr-overlay .vr-mode-empresa .vr-cart-subtotal {
color: #F5EFE6 !important;
}
/* Stepper dark */
.vr-overlay .vr-mode-empresa .vr-stepper {
background: rgba(255,255,255,.04) !important;
border-color: rgba(255,255,255,.10) !important;
}
.vr-overlay .vr-mode-empresa .vr-stepper-btn {
color: rgba(255,255,255,.45) !important;
}
.vr-overlay .vr-mode-empresa .vr-stepper-btn:hover {
background: rgba(255,255,255,.08) !important;
color: #FFF !important;
}
.vr-overlay .vr-mode-empresa .vr-stepper-input {
color: #F5EFE6 !important;
border-color: rgba(255,255,255,.08) !important;
}
.vr-overlay .vr-mode-empresa .vr-stepper-unit {
color: rgba(255,255,255,.30) !important;
}
/* Delete */
.vr-overlay .vr-mode-empresa .vr-cart-del {
color: rgba(255,255,255,.18) !important;
}
.vr-overlay .vr-mode-empresa .vr-cart-del:hover {
background: rgba(192,57,43,.12) !important;
color: #E74C3C !important;
}
/* Empty state */
.vr-overlay .vr-mode-empresa .vr-cart-empty {
color: rgba(255,255,255,.22) !important;
}
.vr-overlay .vr-mode-empresa .vr-cart-empty svg {
stroke: rgba(255,255,255,.15) !important;
}
/* Search */
.vr-overlay .vr-mode-empresa .vr-search-input {
background: rgba(255,255,255,.05) !important;
border-color: rgba(255,255,255,.10) !important;
color: #F5EFE6 !important;
}
.vr-overlay .vr-mode-empresa .vr-search-input::placeholder {
color: rgba(255,255,255,.28) !important;
}
.vr-overlay .vr-mode-empresa .vr-search-input:focus {
background: rgba(255,255,255,.07) !important;
border-color: rgba(232,102,58,.50) !important;
box-shadow: 0 0 0 3px rgba(232,102,58,.12) !important;
}
.vr-overlay .vr-mode-empresa .vr-search-ico {
color: rgba(255,255,255,.25) !important;
}
.vr-overlay .vr-mode-empresa .vr-search-kbd {
background: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.25) !important;
}
/* Product cards */
.vr-overlay .vr-mode-empresa .vr-prod-card {
border-bottom-color: rgba(255,255,255,.04) !important;
}
.vr-overlay .vr-mode-empresa .vr-prod-card:hover {
background: rgba(255,255,255,.04) !important;
}
.vr-overlay .vr-mode-empresa .vr-prod-name {
color: rgba(255,255,255,.88) !important;
}
.vr-overlay .vr-mode-empresa .vr-prod-precio-num {
color: rgba(255,255,255,.60) !important;
}
.vr-overlay .vr-mode-empresa .vr-prod-precio-unit,
.vr-overlay .vr-mode-empresa .vr-prod-stock {
color: rgba(255,255,255,.28) !important;
}
.vr-overlay .vr-mode-empresa .vr-prod-add {
background: rgba(232,102,58,.15) !important;
color: #E8663A !important;
}
.vr-overlay .vr-mode-empresa .vr-prod-add:hover {
background: #E8663A !important;
color: #FFF !important;
box-shadow: 0 2px 8px rgba(232,102,58,.35) !important;
}
.vr-overlay .vr-mode-empresa .vr-prod-empty {
color: rgba(255,255,255,.25) !important;
}
/* Category pills */
.vr-overlay .vr-mode-empresa .vr-cat-pill {
background: rgba(255,255,255,.04) !important;
color: rgba(255,255,255,.50) !important;
border-color: rgba(255,255,255,.06) !important;
}
.vr-overlay .vr-mode-empresa .vr-cat-pill:hover {
background: rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.80) !important;
}
.vr-overlay .vr-mode-empresa .vr-cat-pill.active {
background: #F5EFE6 !important;
color: #131110 !important;
border-color: #F5EFE6 !important;
}
/* Titles */
.vr-overlay .vr-mode-empresa .vr-col-title,
.vr-overlay .vr-mode-empresa .vr-rpanel-title {
color: #F5EFE6 !important;
}
.vr-overlay .vr-mode-empresa .vr-head-wm-name {
color: #F5EFE6 !important;
}
.vr-overlay .vr-mode-empresa .vr-head-sub {
color: rgba(255,255,255,.35) !important;
}
.vr-overlay .vr-mode-empresa .vr-head-close {
color: rgba(255,255,255,.40) !important;
}
.vr-overlay .vr-mode-empresa .vr-head-close:hover {
background: rgba(255,255,255,.08) !important;
color: #FFF !important;
}
.vr-overlay .vr-mode-empresa .vr-head-loc {
background: rgba(255,255,255,.06) !important;
border-color: rgba(255,255,255,.10) !important;
color: rgba(255,255,255,.65) !important;
}
/* Vaciar */
.vr-overlay .vr-mode-empresa .vr-vaciar-btn {
border-color: rgba(255,255,255,.10) !important;
color: rgba(255,255,255,.35) !important;
}
.vr-overlay .vr-mode-empresa .vr-vaciar-btn:hover {
background: rgba(255,255,255,.05) !important;
color: rgba(255,255,255,.70) !important;
}
.vr-overlay .vr-mode-empresa .vr-cart-badge {
background: #E8663A !important;
}
/* Obs */
.vr-overlay .vr-mode-empresa .vr-obs-toggle {
color: rgba(255,255,255,.30) !important;
}
.vr-overlay .vr-mode-empresa .vr-obs-toggle:hover {
color: rgba(255,255,255,.65) !important;
}
.vr-overlay .vr-mode-empresa .vr-obs-input {
background: rgba(255,255,255,.04) !important;
border-color: rgba(255,255,255,.10) !important;
color: #F5EFE6 !important;
}
/* Totals */
.vr-overlay .vr-mode-empresa .vr-cart-totals {
border-top-color: rgba(255,255,255,.06) !important;
}
.vr-overlay .vr-mode-empresa .vr-totals-row {
color: rgba(255,255,255,.40) !important;
}
/* En modo empresa overlay: ocultar Total/Descuento/Caja/Puntos del carrito central */
.vr-overlay .vr-mode-empresa .vr-totals-total,
.vr-overlay .vr-mode-empresa .vr-totals-desc,
.vr-overlay .vr-mode-empresa .vr-totals-caja,
.vr-overlay .vr-mode-empresa .vr-pts-row {
display: none !important;
}
.vr-overlay .vr-mode-empresa .vr-pts-preview {
color: rgba(255,255,255,.25) !important;
}
/* Right panel labels */
.vr-overlay .vr-mode-empresa .vr-rpanel-label {
color: rgba(255,255,255,.30) !important;
}
/* Tipocliente toggle */
.vr-overlay .vr-mode-empresa .vr-tipocli-toggle {
background: rgba(255,255,255,.04) !important;
border-color: rgba(255,255,255,.06) !important;
}
.vr-overlay .vr-mode-empresa .vr-tipocli-btn {
color: rgba(255,255,255,.40) !important;
}
.vr-overlay .vr-mode-empresa .vr-tipocli-btn.is-active[data-tipo="empresa"] {
background: #E8663A !important;
color: #FFF !important;
box-shadow: 0 2px 8px rgba(232,102,58,.30) !important;
}
.vr-overlay .vr-mode-empresa .vr-tipocli-btn.is-active[data-tipo="consumidor"] {
background: #F5EFE6 !important;
color: #131110 !important;
}
/* Client/Empresa search */
.vr-overlay .vr-mode-empresa .vr-cli-search-input,
.vr-overlay .vr-mode-empresa .vr-emp-search-input {
background: rgba(255,255,255,.05) !important;
border-color: rgba(255,255,255,.10) !important;
color: #F5EFE6 !important;
}
.vr-overlay .vr-mode-empresa .vr-cli-search-input:focus,
.vr-overlay .vr-mode-empresa .vr-emp-search-input:focus {
background: rgba(255,255,255,.07) !important;
border-color: rgba(232,102,58,.45) !important;
}
/* Empresa card dark */
.vr-overlay .vr-mode-empresa .vr-emp-card {
background: rgba(255,255,255,.03) !important;
border-color: rgba(255,255,255,.08) !important;
box-shadow: 0 2px 12px rgba(0,0,0,.30) !important;
}
.vr-overlay .vr-mode-empresa .vr-emp-card-avatar {
background: linear-gradient(135deg, #E8663A, #8C4218) !important;
color: #FFF !important;
}
.vr-overlay .vr-mode-empresa .vr-emp-card-rs { color: #F5EFE6 !important; }
.vr-overlay .vr-mode-empresa .vr-emp-card-meta { color: rgba(255,255,255,.35) !important; }
.vr-overlay .vr-mode-empresa .vr-emp-card-divider { border-color: rgba(255,255,255,.06) !important; }
.vr-overlay .vr-mode-empresa .vr-emp-stat-lbl { color: rgba(255,255,255,.30) !important; }
.vr-overlay .vr-mode-empresa .vr-emp-stat-val { color: #F5EFE6 !important; }
/* Dropdown dark */
.vr-overlay .vr-mode-empresa .vr-cli-dropdown,
.vr-overlay .vr-mode-empresa .vr-emp-dropdown {
background: #1A1816 !important;
border-color: rgba(255,255,255,.08) !important;
box-shadow: 0 12px 40px rgba(0,0,0,.55) !important;
}
.vr-overlay .vr-mode-empresa .vr-cli-dd-item,
.vr-overlay .vr-mode-empresa .vr-emp-dd-item {
color: rgba(255,255,255,.85) !important;
}
.vr-overlay .vr-mode-empresa .vr-cli-dd-name {
color: #F5EFE6 !important;
}
.vr-overlay .vr-mode-empresa .vr-cli-dd-pts {
color: rgba(255,255,255,.45) !important;
}
.vr-overlay .vr-mode-empresa .vr-cli-dd-empty {
color: rgba(255,255,255,.40) !important;
}
.vr-overlay .vr-mode-empresa .vr-cli-dd-item:hover,
.vr-overlay .vr-mode-empresa .vr-emp-dd-item:hover {
background: rgba(255,255,255,.10) !important;
color: #FFF !important;
}
.vr-overlay .vr-mode-empresa .vr-cli-dd-item:hover .vr-cli-dd-name {
color: #FFF !important;
}
/* Pedido B2B form dark */
.vr-overlay .vr-mode-empresa .vr-emp-pedido-eyebrow {
color: #E8663A !important;
}
.vr-overlay .vr-mode-empresa .vr-emp-fg > label {
color: rgba(255,255,255,.40) !important;
}
.vr-overlay .vr-mode-empresa .vr-emp-req { color: #FB923C !important; }
.vr-overlay .vr-mode-empresa .vr-emp-opt { color: rgba(255,255,255,.25) !important; }
.vr-overlay .vr-mode-empresa .vr-emp-input,
.vr-overlay .vr-mode-empresa .vr-emp-textarea {
background: rgba(255,255,255,.04) !important;
border-color: rgba(255,255,255,.10) !important;
color: #F5EFE6 !important;
}
.vr-overlay .vr-mode-empresa .vr-emp-input:focus,
.vr-overlay .vr-mode-empresa .vr-emp-textarea:focus {
border-color: rgba(232,102,58,.50) !important;
box-shadow: 0 0 0 3px rgba(232,102,58,.12) !important;
}
.vr-overlay .vr-mode-empresa .vr-emp-input::placeholder,
.vr-overlay .vr-mode-empresa .vr-emp-textarea::placeholder {
color: rgba(255,255,255,.20) !important;
}
.vr-overlay .vr-mode-empresa .vr-emp-hint { color: rgba(255,255,255,.30) !important; }
/* Pedido totals dark */
.vr-overlay .vr-mode-empresa .vr-emp-totales {
border-top-color: rgba(255,255,255,.06) !important;
}
.vr-overlay .vr-mode-empresa .vr-emp-total-row { color: rgba(255,255,255,.50) !important; }
.vr-overlay .vr-mode-empresa .vr-emp-total-row em { color: rgba(255,255,255,.28) !important; }
.vr-overlay .vr-mode-empresa .vr-emp-total-amt { color: #F5EFE6 !important; }
.vr-overlay .vr-mode-empresa .vr-emp-total-disc { color: #FB923C !important; }
.vr-overlay .vr-mode-empresa .vr-emp-total-final { border-top-color: rgba(255,255,255,.08) !important; }
.vr-overlay .vr-mode-empresa .vr-emp-total-hero { color: #F5EFE6 !important; }
.vr-overlay .vr-mode-empresa .vr-emp-total-note { color: rgba(255,255,255,.25) !important; }
/* Confirmar dark — gradient naranja premium */
.vr-overlay .vr-mode-empresa .vr-confirmar-btn {
background: linear-gradient(135deg, #E8663A 0%, #A84E1E 100%) !important;
color: #FFF !important;
box-shadow: 0 4px 20px rgba(232,102,58,.25), 0 0 0 1px rgba(232,102,58,.30) inset !important;
}
.vr-overlay .vr-mode-empresa .vr-confirmar-btn:hover:not(:disabled) {
background: linear-gradient(135deg, #D4702E 0%, #B5551F 100%) !important;
box-shadow: 0 8px 32px rgba(232,102,58,.40), 0 0 0 1px rgba(232,102,58,.40) inset !important;
}
.vr-overlay .vr-mode-empresa .vr-confirmar-btn:disabled {
background: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.20) !important;
box-shadow: none !important;
}
/* Pago btns dark */
.vr-overlay .vr-mode-empresa .vr-pago-btn {
background: rgba(255,255,255,.04) !important;
border-color: rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.50) !important;
}
.vr-overlay .vr-mode-empresa .vr-pago-btn:hover {
background: rgba(255,255,255,.07) !important;
border-color: rgba(255,255,255,.14) !important;
color: rgba(255,255,255,.80) !important;
}
.vr-overlay .vr-mode-empresa .vr-pago-btn.active {
background: rgba(255,255,255,.07) !important;
border-color: rgba(255,255,255,.22) !important;
color: #F5EFE6 !important;
box-shadow: 0 0 0 3px rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.25) !important;
}
.vr-overlay .vr-mode-empresa .vr-pago-btn.active::before {
opacity: 1;
background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.06) 0%, transparent 70%) !important;
}
/* Descuento pills dark */
.vr-overlay .vr-mode-empresa .vr-desc-pill {
background: rgba(255,255,255,.04) !important;
border-color: rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.50) !important;
}
.vr-overlay .vr-mode-empresa .vr-desc-pill:hover {
background: rgba(255,255,255,.07) !important;
color: rgba(255,255,255,.80) !important;
}
.vr-overlay .vr-mode-empresa .vr-desc-pill.active {
background: rgba(232,102,58,.12) !important;
border-color: rgba(232,102,58,.40) !important;
color: #FB923C !important;
}
/* Resumen pago dark */
.vr-overlay .vr-mode-empresa .vr-resumen-rows .vr-resumen-row {
color: rgba(255,255,255,.40) !important;
}
.vr-overlay .vr-mode-empresa .vr-resumen-total > span:first-child {
color: rgba(255,255,255,.55) !important;
}
.vr-overlay .vr-mode-empresa #vr-resumen-total {
color: #F5EFE6 !important;
}
.vr-overlay .vr-mode-empresa #vr-resumen-subtotal,
.vr-overlay .vr-mode-empresa #vr-subtotal-display {
color: rgba(255,255,255,.60) !important;
}
/* Desc applied dark */
.vr-overlay .vr-mode-empresa .vr-desc-applied {
background: rgba(255,255,255,.03) !important;
border-color: rgba(255,255,255,.06) !important;
}
.vr-overlay .vr-mode-empresa .vr-desc-applied-label {
color: rgba(255,255,255,.35) !important;
}
.vr-overlay .vr-mode-empresa .vr-desc-applied-monto {
color: #F5EFE6 !important;
}
.vr-overlay .vr-mode-empresa .vr-desc-applied-pct {
color: rgba(255,255,255,.35) !important;
}
/* Money input dark */
.vr-overlay .vr-mode-empresa .vr-money-wrap {
background: rgba(255,255,255,.04) !important;
border-color: rgba(255,255,255,.10) !important;
}
.vr-overlay .vr-mode-empresa .vr-money-symbol {
color: rgba(255,255,255,.30) !important;
}
.vr-overlay .vr-mode-empresa .vr-money-input {
color: #F5EFE6 !important;
}
/* Split pago dark */
.vr-overlay .vr-mode-empresa .vr-split-toggle {
color: rgba(255,255,255,.35) !important;
}
.vr-overlay .vr-mode-empresa .vr-split-section {
background: linear-gradient(160deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.04) 100%) !important;
border-color: rgba(255,255,255,.08) !important;
}
.vr-overlay .vr-mode-empresa .vr-split-block-num {
background: rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.50) !important;
}
.vr-overlay .vr-mode-empresa .vr-split-block-title {
color: rgba(255,255,255,.55) !important;
}
.vr-overlay .vr-mode-empresa .vr-split-monto-label {
color: rgba(255,255,255,.35) !important;
}
.vr-overlay .vr-mode-empresa .vr-split-monto-auto {
background: rgba(255,255,255,.03) !important;
}
.vr-overlay .vr-mode-empresa .vr-split-monto2 {
color: #F5EFE6 !important;
}
.vr-overlay .vr-mode-empresa .vr-split-divider {
color: rgba(255,255,255,.20) !important;
}
.vr-overlay .vr-mode-empresa .vr-split-divider::before,
.vr-overlay .vr-mode-empresa .vr-split-divider::after {
background: rgba(255,255,255,.08) !important;
}
.vr-overlay .vr-mode-empresa .vr-split-warning {
background: rgba(192,57,43,.10) !important;
border-color: rgba(192,57,43,.20) !important;
color: #E8A29A !important;
}
.vr-overlay .vr-mode-empresa .vr-split-money-wrap {
background: rgba(255,255,255,.04) !important;
border-color: rgba(255,255,255,.10) !important;
}
.vr-overlay .vr-mode-empresa .vr-split-money-wrap:focus-within {
border-color: rgba(232,102,58,.40) !important;
background: rgba(255,255,255,.06) !important;
box-shadow: 0 0 0 3px rgba(232,102,58,.08) !important;
}
/* Scrollbars dark */
.vr-overlay .vr-mode-empresa .vr-prod-scroll,
.vr-overlay .vr-mode-empresa .vr-cart-body,
.vr-overlay .vr-mode-empresa .vr-right-scroll {
scrollbar-color: rgba(255,255,255,.0) transparent !important;
}
.vr-overlay .vr-mode-empresa .vr-prod-scroll:hover,
.vr-overlay .vr-mode-empresa .vr-cart-body:hover,
.vr-overlay .vr-mode-empresa .vr-right-scroll:hover {
scrollbar-color: rgba(255,255,255,.10) transparent !important;
}
/* Right panel cards (rpanel) dark */
.vr-overlay .vr-mode-empresa .vr-rpanel {
background: rgba(255,255,255,.03) !important;
border-color: rgba(255,255,255,.06) !important;
}
/* Location pill dark */
.vr-overlay .vr-mode-empresa .vr-head-local {
background: rgba(255,255,255,.06) !important;
border-color: rgba(255,255,255,.10) !important;
color: rgba(255,255,255,.60) !important;
}
.vr-overlay .vr-mode-empresa .vr-head-local svg {
stroke: rgba(255,255,255,.45) !important;
}
/* Qty field containers dark */
.vr-overlay .vr-mode-empresa .vr-qty-field {
background: rgba(255,255,255,.06) !important;
border-color: rgba(255,255,255,.10) !important;
}
.vr-overlay .vr-mode-empresa .vr-qty-field .vr-stepper-input {
color: #F5EFE6 !important;
background: transparent !important;
}
.vr-overlay .vr-mode-empresa .vr-qty-field .vr-stepper-unit {
color: rgba(255,255,255,.30) !important;
}
/* Stepper & input placeholders dark */
.vr-overlay .vr-mode-empresa .vr-stepper-input::placeholder,
.vr-overlay .vr-mode-empresa .vr-qty-input::placeholder,
.vr-overlay .vr-mode-empresa .vr-uds-input::placeholder,
.vr-overlay .vr-mode-empresa .vr-qty-field .vr-stepper-input::placeholder {
color: rgba(255,255,255,.20) !important;
}
/* Client card dark (modo consumidor dentro de empresa) */
.vr-overlay .vr-mode-empresa .vr-cli-card {
background: rgba(255,255,255,.03) !important;
border-color: rgba(255,255,255,.08) !important;
}
.vr-overlay .vr-mode-empresa .vr-cli-name {
color: #F5EFE6 !important;
}
.vr-overlay .vr-mode-empresa .vr-cli-dni {
color: rgba(255,255,255,.35) !important;
}
.vr-overlay .vr-mode-empresa .vr-cli-avatar {
background: linear-gradient(135deg, #E8663A, #8C4218) !important;
color: #FFF !important;
}
.vr-overlay .vr-mode-empresa .vr-cli-pts-num {
color: #FB923C !important;
}
.vr-overlay .vr-mode-empresa .vr-cli-pts-lbl {
color: rgba(255,255,255,.28) !important;
}
.vr-overlay .vr-mode-empresa .vr-cli-desel {
color: rgba(255,255,255,.30) !important;
}
.vr-overlay .vr-mode-empresa .vr-cli-desel:hover {
background: rgba(255,255,255,.08) !important;
color: #FFF !important;
}
/* Prod avatar letters in cart — dark */
.vr-overlay .vr-mode-empresa .vr-cart-prod .vr-prod-avatar {
background: rgba(232,102,58,.15) !important;
color: #E8663A !important;
}
/* B2B tag in header */
.vr-overlay .vr-mode-empresa .vr-head-right::before {
content: 'B2B';
display: inline-flex !important;
align-items: center;
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: #E8663A;
background: rgba(232,102,58,.12);
padding: 3px 8px;
border-radius: 4px;
flex-shrink: 0;
animation: vrFadeIn .4s ease .5s both;
}
/* ═══════════════════════════════════════════════════════════════════════════
v7.26.0 — UNIFIED CARD SYSTEM (Radius + Premium Shadows)
Escala: xs(6) · sm(10) · md(14) · lg(18) · xl(22) · full(999)
═══════════════════════════════════════════════════════════════════════════ */
/* ── SHADOW ENFORCEMENT — overrides all legacy "box-shadow: none" ── */
#page-dashboard .dash-panel,
#page-dashboard.dashboard-core .dash-panel,
#page-dashboard .nd-card,
#page-dashboard .nd-kpi-card,
#page-stock .sk-kpi-card,
.sk-table-wrap,
.mv-table-card,
.vc2-table-container,
.co-card,
#page-cierre .cc3-hero,
#page-cierre .cc3-ops-card,
#page-cierre .cc3-hist-card,
#page-clientes .cli-card-item,
#page-clientes .cli-drw-kpi,
#page-precios .pr-card,
#page-empresas .emp-card,
#page-empresas .emp-kpi-card,
.v3-card,
.trf-card,
.mvd-foot,
#mov-inspector {
box-shadow: var(--card-shadow) !important;
border-color: rgba(26,20,16,.05) !important;
}
/* ── TIER 1: Cards principales (--radius-lg: 18px) ── */
/* Dashboard */
#page-dashboard .dash-panel,
#page-dashboard.dashboard-core .dash-panel,
#page-dashboard .nd-card,
/* Stock */
#page-stock .sk-kpi-card {
border-radius: var(--radius-lg);
}
/* Movimientos */
.mv-table-card {
border-radius: var(--radius-lg) !important;
}
/* Costos */
.co-card {
border-radius: var(--radius-lg) !important;
}
/* Empresas */
#page-empresas .emp-card {
border-radius: var(--radius-lg);
}
#page-empresas .emp-kpi-card {
border-radius: var(--radius-lg);
}
#page-empresas .emp-info-card {
border-radius: var(--radius-md);
}
/* Fidelización */
.fid-panel,
.fid-card {
border-radius: var(--radius-lg) !important;
}
/* VR — right panels */
.vr-rpanel {
border-radius: var(--radius-lg) !important;
}
.vr-overlay .vr-rpanel {
border-radius: var(--radius-lg) !important;
}
/* ── TIER 2: Contenedores grandes / Modales (--radius-xl: 22px) ── */
.vr-overlay > .vr-shell {
border-radius: var(--radius-xl) !important;
}
.vr-overlay .vr-head {
border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
}
/* ── TIER 3: Sub-cards / Items internos (--radius-md: 14px) ── */
#page-empresas .emp-aging-card {
border-radius: var(--radius-md);
}
#page-empresas .emp-pedidos-card {
border-radius: var(--radius-md);
}
.pp-emp-card {
border-radius: var(--radius-md) !important;
}
.vr-split-section {
border-radius: var(--radius-md) !important;
}
.vr-overlay .vr-split-section {
border-radius: var(--radius-md) !important;
}
.vr-cli-card {
border-radius: var(--radius-md) !important;
}
/* ── TIER 4: Controles / Botones / Inputs (--radius-sm: 10px) ── */
.vr-pago-btn {
border-radius: var(--radius-sm) !important;
}
.vr-desc-pill {
border-radius: var(--radius-sm) !important;
}
.vr-desc-pill-custom {
border-radius: var(--radius-sm) !important;
}
.vr-money-wrap {
border-radius: var(--radius-sm) !important;
}
.vr-split-warning {
border-radius: var(--radius-sm) !important;
}
.vr-overlay .vr-split-warning {
border-radius: var(--radius-sm) !important;
}
#page-clientes .cli-drw-foot .btn-prime,
#page-clientes .cli-drw-foot .btn-ghost {
border-radius: var(--radius-sm);
}
/* ── TIER 5: Tags / Badges (--radius-xs: 6px) ── */
.vr-head-right::before {
border-radius: var(--radius-xs) !important;
}
.dash-status-dot {
border-radius: var(--radius-xs) !important;
}
/* ── Mobile overrides — slightly smaller radii ── */
@media (max-width: 768px) {
#page-dashboard .dash-panel,
#page-dashboard.dashboard-core .dash-panel,
#page-dashboard .nd-card,
#page-dashboard .nd-kpi-card,
#page-stock .sk-kpi-card,
.mv-table-card,
.co-card {
border-radius: var(--radius-md) !important;
}
.vr-overlay > .vr-shell {
border-radius: var(--radius-lg) !important;
}
.vr-overlay .vr-head {
border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
}
/* ═══════════════════════════════════════════════════════════════
v7.28.0 — BODY-AS-CARD LAYOUT
Inverted visual model: content floats as white card,
sidebar + topbar are the flat gray background surface.
Reference: Amplitude-style — seamless gray floor, content card
with rounded corners + margin, no hard edges between areas.
═══════════════════════════════════════════════════════════════ */
/* ── Background surface — cool gray floor ── */
body {
background: #F0EEEF !important;
}
#main {
background: #F0EEEF !important;
}
/* ── Topbar: flat, seamless with sidebar ── */
.topbar {
background: #F0EEEF !important;
border-bottom: none !important;
box-shadow: none !important;
}
/* ── Sidebar: flat, no card — seamless ── */
.tb-nav-dropdown {
background: #F0EEEF !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
top: 0 !important;
left: 0 !important;
height: 100vh !important;
}
/* Sidebar footer border — very subtle on gray */
.sb2-footer {
border-top: 1px solid rgba(26,20,16,.06) !important;
}
/* Nav item hover adapts to gray bg */
.tb-dd-item:hover {
background: rgba(26,20,16,.05) !important;
}
/* Active item — elevated white pill on gray */
.tb-dd-item.active {
background: #ffffff !important;
box-shadow: 0 1px 3px rgba(26,20,16,.06) !important;
}
/* Org-status dot border → match new bg */
.sb-org-status {
border-color: #F0EEEF !important;
}
/* ── Pages container: floating card ── */
#pages {
background: #F6F6F6 !important;
border-radius: 20px;
box-shadow:
0 0 0 1px rgba(38,38,38,.045),
0 2px 8px rgba(38,38,38,.04),
0 8px 32px rgba(38,38,38,.05) !important;
margin: 4px 10px 10px 10px;
}
/* Pages content inherits from the card */
.page {
background: transparent !important;
}
/* ── Global ink color override — #262626 ── */
#app {
color: #262626 !important;
}
.topbar,
.topbar *,
.tb-nav-dropdown,
.tb-nav-dropdown *,
#pages,
#pages * {
color: inherit;
}
/* Sidebar text */
.sb2-brand-name { color: #262626 !important; }
.sb2-brand-sub { color: rgba(38,38,38,.5) !important; }
.sb2-section-label { color: rgba(38,38,38,.45) !important; }
.tb-dd-item { color: rgba(38,38,38,.6) !important; }
.tb-dd-item:hover { color: #262626 !important; }
.tb-dd-item.active { color: #262626 !important; }
.tb-dd-icon { color: rgba(38,38,38,.35) !important; }
.tb-dd-item:hover .tb-dd-icon { color: rgba(38,38,38,.55) !important; }
.sb2-user-name { color: #262626 !important; }
.sb2-user-loc { color: rgba(38,38,38,.5) !important; }
/* Topbar text */
.tb-section-title, #top-title { color: #262626 !important; }
/* Primary buttons — #262626 */
.sb2-cta {
background: #262626 !important;
color: #fff !important;
}
.sb2-cta:hover {
background: #333 !important;
}
/* Lacca Nera buttons → #262626 base */
.v3-btn-add,
.pr-save-btn,
.btn-prime {
background: linear-gradient(158deg, #333 0%, #262626 100%) !important;
color: #fff !important;
}
/* v7.28.0 — Topbar controls: unified style (Movimientos reference)
All search inputs, dropdown buttons, selects, and export buttons
across every page match the mv2 pattern exactly.
bg: rgba(26,20,16,.04) border: 1px solid rgba(26,20,16,.08)
border-radius: 9px height: 32px font-size: 11.5px font-weight: 600 */
/* ── Universal topbar inputs ── */
.tb-action-zone input[type="text"],
.tb-action-zone input[type="search"],
.tb-action-zone .v3-tb-search-input,
.tb-action-zone .sk-search-input,
.tb-action-zone .mv2-search-input {
background: #E7E5E6 !important;
border: none !important;
border-radius: 9px !important;
height: 32px !important;
font-size: 11.5px !important;
font-weight: 600 !important;
box-shadow: none !important;
}
.tb-action-zone input:focus {
background: #dfdcdd !important;
border: none !important;
box-shadow: none !important;
}
/* ── Universal topbar dropdown buttons ── */
.tb-action-zone .v3-dd-btn,
.tb-action-zone .mv2-dd-btn,
.tb-action-zone select,
.tb-action-zone .sk-select,
.tb-action-zone .sk-cat-select {
background: #E7E5E6 !important;
border: none !important;
border-radius: 9px !important;
height: 32px !important;
font-size: 11.5px !important;
font-weight: 600 !important;
padding: 0 8px !important;
}
.tb-action-zone .v3-dd-btn:hover,
.tb-action-zone .mv2-dd-btn:hover,
.tb-action-zone select:hover,
.tb-action-zone .v3-dropdown.is-open .v3-dd-btn {
background: #dfdcdd !important;
}
/* ── Universal topbar export / action buttons ── */
.tb-action-zone .v3-tb-export,
.tb-action-zone .mv2-export-btn {
background: #E7E5E6 !important;
border: none !important;
border-radius: 9px !important;
height: 32px !important;
font-size: 11.5px !important;
font-weight: 600 !important;
}
.tb-action-zone .v3-tb-export:hover,
.tb-action-zone .mv2-export-btn:hover {
background: #dfdcdd !important;
}
/* v7.28.0 — Notificaciones eliminadas */
.tb-notif-btn,
.notif-backdrop,
.notif-panel { display: none !important; }
/* Brand logo → #262626 */
.sb2-brand-logo {
background: #262626 !important;
}
/* ═══ v7.29.0 — Filter pills junto al título + action-zone a la derecha ═══ */
/* Nav center: flex row para título + pills */
.tb-nav-center {
display: flex !important;
align-items: center !important;
gap: 10px !important;
flex: 0 0 auto !important;
}
/* Contenedor de pills */
.tb-filter-pills {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
overflow: hidden;
}
.tb-filter-pills:empty { display: none; }
/* Cada pill individual */
.tb-fpill {
display: inline-flex;
align-items: center;
gap: 4px;
height: 24px;
padding: 0 8px;
background: #E7E5E6;
border: none;
border-radius: 7px;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 11px;
font-weight: 600;
color: rgba(38,38,38,.72);
white-space: nowrap;
cursor: default;
transition: background .15s;
}
.tb-fpill-clear-all {
height: 24px;
padding: 0 8px;
background: none;
border: none;
border-radius: 7px;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 10.5px;
font-weight: 600;
color: rgba(38,38,38,.40);
cursor: pointer;
white-space: nowrap;
transition: background .12s, color .12s;
}
.tb-fpill-clear-all:hover {
background: rgba(38,38,38,.06);
color: rgba(38,38,38,.65);
}
/* ── Chips relocados dentro del topbar pills zone ── */
.tb-filter-pills .mv2-active-chips,
.tb-filter-pills .v3-tb-chips {
display: flex !important;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
margin: 0 !important;
padding: 0 !important;
}
.tb-filter-pills .mv2-active-chips[hidden] { display: none !important; }
/* Movimientos chips → topbar pill style */
.tb-filter-pills .mv2-chip {
display: inline-flex !important;
align-items: center;
gap: 4px;
height: 24px;
padding: 0 6px 0 9px !important;
background: #E7E5E6 !important;
border: none !important;
border-radius: 7px !important;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 11px !important;
font-weight: 600 !important;
color: rgba(38,38,38,.72) !important;
cursor: pointer;
}
.tb-filter-pills .mv2-chip:hover {
background: #dfdcdd !important;
}
.tb-filter-pills .mv2-chip svg {
width: 9px !important;
height: 9px !important;
color: rgba(38,38,38,.40);
}
.tb-filter-pills .mv2-chip-clear {
height: 24px;
padding: 0 8px !important;
background: none !important;
border: none !important;
border-radius: 7px;
font-size: 10.5px !important;
font-weight: 600;
color: rgba(38,38,38,.40) !important;
cursor: pointer;
}
.tb-filter-pills .mv2-chip-clear:hover {
background: rgba(38,38,38,.06) !important;
color: rgba(38,38,38,.65) !important;
}
/* Vencimientos chips → topbar pill style */
.tb-filter-pills .v3-af-chip {
display: inline-flex !important;
align-items: center;
gap: 4px;
height: 24px;
padding: 0 4px 0 9px !important;
background: #E7E5E6 !important;
border: none !important;
border-radius: 7px !important;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: 11px !important;
font-weight: 600 !important;
color: rgba(38,38,38,.72) !important;
}
.tb-filter-pills .v3-af-chip-label {
font-family: var(--sans) !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: normal !important;
text-transform: none !important;
color: rgba(38,38,38,.42) !important;
margin-right: 2px;
}
.tb-filter-pills .v3-af-chip-remove {
width: 14px; height: 14px;
border: none !important;
background: rgba(38,38,38,.08) !important;
border-radius: 50%;
color: rgba(38,38,38,.45) !important;
cursor: pointer;
padding: 0;
}
.tb-filter-pills .v3-af-chip-remove:hover {
background: rgba(38,38,38,.16) !important;
color: rgba(38,38,38,.70) !important;
}
.tb-filter-pills .v3-af-clear-all {
height: 24px;
padding: 0 8px !important;
background: none !important;
border: none !important;
border-radius: 7px;
font-size: 10.5px !important;
font-weight: 600;
color: rgba(38,38,38,.40) !important;
cursor: pointer;
}
.tb-filter-pills .v3-af-clear-all:hover {
background: rgba(38,38,38,.06) !important;
color: rgba(38,38,38,.65) !important;
}
/* ── Responsive mobile sidebar ── */
/* ── Responsive ── */
@media (max-width: 768px) {
.tb-nav-dropdown {
background: #F0EEEF !important;
border-radius: 0 16px 16px 0 !important;
box-shadow: 6px 0 24px rgba(26,20,16,.12) !important;
}
#pages {
border-radius: 14px 14px 0 0 !important;
margin: 0 !important;
}
}
@media (min-width: 769px) and (max-width: 960px) {
#pages {
margin-right: 8px !important;
}
}
/* ═══ v7.30.0 — Dashboard dark chart cards with inner glow ═══ */
/* Chart card — fondo claro con inner glow warm */
#page-dashboard .nd-card.nd-card--dark {
background: #FFFFFF !important;
border: 1px solid rgba(26,20,16,.05) !important;
position: relative;
overflow: hidden;
box-shadow: var(--card-shadow) !important;
}
#page-dashboard .nd-card.nd-card--dark:hover {
border-color: rgba(26,20,16,.07) !important;
box-shadow: var(--card-shadow-hover) !important;
}
/* Chart card typography */
#page-dashboard .nd-card--dark .nd-card-kicker {
color: rgba(26,20,16,.42) !important;
position: relative;
z-index: 1;
}
#page-dashboard .nd-card--dark .nd-card-title {
color: #262626 !important;
position: relative;
z-index: 1;
margin-bottom: 8px !important;
}
/* Chart wrap on dark card */
.nd-card--dark .nd-chart-wrap {
position: relative;
z-index: 1;
}
/* ── Trend hero number ── */
.nd-trend-hero {
display: flex;
align-items: baseline;
gap: 10px;
position: relative;
z-index: 1;
margin-bottom: 2px;
}
#page-dashboard .nd-trend-total {
font-family: var(--sans, "Inter Tight", sans-serif) !important;
font-size: 36px !important;
font-weight: 700 !important;
letter-spacing: -0.025em;
color: #262626 !important;
line-height: 1;
}
.nd-trend-badge {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: var(--mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
padding: 3px 7px;
border-radius: 6px;
line-height: 1;
}
.nd-trend-badge.up {
color: #1a7a45;
background: rgba(34,165,90,.10);
}
.nd-trend-badge.down {
color: #a83030;
background: rgba(224,82,82,.10);
}
.nd-trend-badge.neutral {
color: rgba(26,20,16,.40);
background: rgba(26,20,16,.05);
}
.nd-trend-badge:empty { display: none; }
#page-dashboard .nd-trend-sub {
font-family: var(--sans, "Inter Tight", sans-serif) !important;
font-size: 12px !important;
font-weight: 500;
color: rgba(26,20,16,.38) !important;
position: relative;
z-index: 1;
margin-bottom: 16px;
}
/* ── Mix on chart card ── */
#page-dashboard .nd-card--dark .nd-mix-wrap {
position: relative;
z-index: 1;
}
/* ═══════════════════════════════════════════════════════════════
v7.31.0 — UNIFIED COLOR SYSTEM
Pills · Badges · Alerts · Tags · Status dots
═══════════════════════════════════════════════════════════════ */
/* ── LX-DOT — Status indicator dot ── */
.lx-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
@keyframes lx-dot-pulse {
0% { opacity: .4; transform: scale(.7); }
70% { opacity: 0; transform: scale(1.8); }
100% { opacity: 0; transform: scale(1.8); }
}
/* ═══════════════════════════════════════════════════════════════
v7.32.0 — NUEVA VENTA (drawer view)
═══════════════════════════════════════════════════════════════ */
/* ── Header ── */
.cd-nv-head {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 18px 20px !important;
}
.cd-nv-back {
width: 32px;
height: 32px;
border-radius: 8px;
border: none;
background: transparent;
color: rgba(26,20,16,.55);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background .15s, color .15s;
}
.cd-nv-back:hover { background: rgba(26,20,16,.06); color: #262626; }
.cd-nv-back svg { width: 18px; height: 18px; }
.cd-nv-head-info { flex: 1; min-width: 0; }
.cd-nv-head-title {
font-family: var(--serif, 'Fraunces', serif);
font-size: 18px;
font-weight: 600;
color: #262626;
letter-spacing: -0.02em;
}
.cd-nv-head-sub {
font-size: 11px;
font-weight: 500;
color: rgba(38,38,38,.5);
margin-top: 2px;
}
/* ── Search ── */
.cd-nv-search {
width: 100%;
background: #E7E5E6;
border: none;
border-radius: 9px;
height: 34px;
padding: 0 12px;
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 12px;
font-weight: 500;
color: #262626;
outline: none;
margin-bottom: 10px;
box-sizing: border-box;
transition: background .15s;
}
.cd-nv-search:focus { background: #dfdcdd; }
.cd-nv-search::placeholder { color: rgba(38,38,38,.38); }
/* ── Section spacing ── */
.cd-nv-sec { padding: 14px 20px !important; }
/* ── Product list ── */
.cd-nv-prods {
max-height: 220px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2px;
scrollbar-width: thin;
scrollbar-color: rgba(26,20,16,.15) transparent;
}
.cd-nv-prods::-webkit-scrollbar { width: 5px; }
.cd-nv-prods::-webkit-scrollbar-thumb { background: rgba(26,20,16,.15); border-radius: 999px; }
.cd-nv-prod {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 8px;
cursor: pointer;
transition: background .12s;
}
.cd-nv-prod:hover { background: rgba(26,20,16,.04); }
.cd-nv-prod.in-cart { background: rgba(232,102,58,.06); }
.cd-nv-prod.in-cart .cd-nv-prod-add { background: #E8663A; color: #fff; }
.cd-nv-prod-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cd-nv-prod-name {
font-size: 12.5px;
font-weight: 600;
color: #262626;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cd-nv-prod-meta {
font-size: 10px;
font-weight: 500;
color: rgba(38,38,38,.45);
}
.cd-nv-prod-price {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 11px;
font-weight: 600;
color: rgba(38,38,38,.6);
white-space: nowrap;
flex-shrink: 0;
}
.cd-nv-prod-add {
width: 26px;
height: 26px;
border-radius: 7px;
background: rgba(26,20,16,.05);
color: rgba(26,20,16,.45);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 600;
flex-shrink: 0;
transition: background .15s, color .15s;
}
.cd-nv-prod:hover .cd-nv-prod-add { background: rgba(26,20,16,.10); color: #262626; }
.cd-nv-empty {
text-align: center;
padding: 16px;
font-size: 11px;
color: rgba(38,38,38,.4);
}
/* ── Cart ── */
.cd-nv-cart {
display: flex;
flex-direction: column;
gap: 1px;
background: rgba(26,20,16,.03);
border-radius: 10px;
overflow: hidden;
}
.cd-nv-item {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 10px;
background: #fff;
}
.cd-nv-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cd-nv-item-name {
font-size: 12px;
font-weight: 600;
color: #262626;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cd-nv-item-price {
font-size: 9.5px;
font-weight: 500;
color: rgba(38,38,38,.4);
font-family: var(--mono, monospace);
}
.cd-nv-item-qty {
width: 52px;
height: 28px;
border: 1px solid rgba(26,20,16,.10);
border-radius: 7px;
text-align: center;
font-family: var(--mono, monospace);
font-size: 12px;
font-weight: 600;
color: #262626;
background: #fafafa;
outline: none;
flex-shrink: 0;
transition: border-color .15s;
}
.cd-nv-item-qty:focus { border-color: #E8663A; }
.cd-nv-item-sub {
font-family: var(--mono, monospace);
font-size: 12px;
font-weight: 700;
color: #262626;
white-space: nowrap;
min-width: 56px;
text-align: right;
flex-shrink: 0;
}
.cd-nv-item-del {
width: 24px;
height: 24px;
border: none;
background: transparent;
color: rgba(26,20,16,.3);
font-size: 16px;
cursor: pointer;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background .12s, color .12s;
}
.cd-nv-item-del:hover { background: rgba(224,82,82,.08); color: #E05252; }
/* ── Total ── */
.cd-nv-total {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 12px 0;
margin-top: 8px;
}
.cd-nv-total-lbl {
font-family: var(--mono, monospace);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(38,38,38,.45);
}
.cd-nv-total-num {
font-family: var(--serif, serif);
font-size: 24px;
font-weight: 600;
color: #E8663A;
letter-spacing: -0.02em;
}
/* ── Payment method ── */
.cd-nv-pago {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.cd-nv-pago-btn {
flex: 1;
min-width: 0;
height: 32px;
border: 1px solid rgba(26,20,16,.10);
border-radius: 8px;
background: #fff;
font-family: var(--sans, sans-serif);
font-size: 11px;
font-weight: 600;
color: rgba(38,38,38,.6);
cursor: pointer;
transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
padding: 0 6px;
white-space: nowrap;
}
.cd-nv-pago-btn:hover { border-color: rgba(26,20,16,.20); color: #262626; }
.cd-nv-pago-btn.active {
background: #E8663A;
border-color: #E8663A;
color: #fff;
box-shadow: 0 2px 8px rgba(232,102,58,.25);
}
/* ── Caja info ── */
.cd-nv-caja-info {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
.cd-nv-caja-saldo {
font-size: 11.5px;
color: rgba(38,38,38,.6);
}
.cd-nv-caja-saldo strong {
color: #22A55A;
font-weight: 700;
}
.cd-nv-caja-warn {
font-size: 11px;
font-weight: 600;
color: #E05252;
}
/* ── Stock toggle ── */
.cd-nv-toggle-row {
display: flex;
align-items: center;
gap: 12px;
}
.cd-nv-toggle-info { flex: 1; min-width: 0; }
.cd-nv-toggle-label {
font-size: 12px;
font-weight: 600;
color: #262626;
display: block;
}
.cd-nv-toggle-hint {
font-size: 10px;
color: rgba(38,38,38,.42);
display: block;
margin-top: 2px;
}
.cd-nv-toggle {
width: 40px;
height: 22px;
border-radius: 11px;
border: none;
background: rgba(26,20,16,.12);
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: background .2s;
padding: 0;
}
.cd-nv-toggle.active { background: #22A55A; }
.cd-nv-toggle-knob {
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.12);
transition: transform .2s cubic-bezier(.16,1,.3,1);
}
.cd-nv-toggle.active .cd-nv-toggle-knob { transform: translateX(18px); }
/* ── Footer override for nv ── */
.cd-nv-view .cd-foot { gap: 8px; }
.cd-nv-view .cd-prime:disabled {
opacity: .4;
pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════════
v7.32.0 — VENCIMIENTOS: Modal Resolver (venc-descartar)
═══════════════════════════════════════════════════════════════ */
.venc-descartar-box {
background: #fff;
border-radius: 16px;
box-shadow:
0 0 0 1px rgba(38,38,38,.06),
0 8px 32px rgba(26,20,16,.16),
0 24px 56px rgba(26,20,16,.10);
padding: 28px 28px 22px;
width: 380px;
max-width: 92vw;
animation: vdSlideIn .28s cubic-bezier(.16,1,.3,1) both;
}
@keyframes vdSlideIn {
from { opacity: 0; transform: scale(.96) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.venc-descartar-title {
font-family: var(--serif, 'Fraunces', serif);
font-size: 17px;
font-weight: 600;
color: #262626;
letter-spacing: -0.02em;
margin-bottom: 6px;
}
.venc-descartar-prod {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 11px;
font-weight: 600;
color: rgba(38,38,38,.50);
letter-spacing: 0.02em;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(38,38,38,.07);
}
.venc-descartar-opts {
display: flex;
flex-direction: column;
gap: 6px;
}
.venc-descartar-btn {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 11px 14px;
border: 1px solid rgba(38,38,38,.10);
border-radius: 10px;
background: #fff;
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 12.5px;
font-weight: 600;
color: #262626;
cursor: pointer;
transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
text-align: left;
line-height: 1.2;
}
.venc-descartar-btn svg {
flex-shrink: 0;
opacity: .55;
transition: opacity .15s;
}
.venc-descartar-btn:hover svg { opacity: .85; }
/* Critico (descartado) */
.venc-descartar-btn.critico:hover {
background: rgba(224,82,82,.05);
border-color: rgba(224,82,82,.30);
color: var(--c-red-ink, #A83030);
box-shadow: 0 0 0 3px rgba(224,82,82,.06);
}
.venc-descartar-btn.critico:hover svg { stroke: var(--c-red, #E05252); opacity: 1; }
/* OK (vendido) */
.venc-descartar-btn.ok:hover {
background: rgba(34,165,90,.05);
border-color: rgba(34,165,90,.30);
color: var(--c-green-ink, #1A7A45);
box-shadow: 0 0 0 3px rgba(34,165,90,.06);
}
.venc-descartar-btn.ok:hover svg { stroke: var(--c-green, #22A55A); opacity: 1; }
/* Error (eliminar) */
.venc-descartar-btn.error:hover {
background: rgba(38,38,38,.03);
border-color: rgba(38,38,38,.18);
box-shadow: 0 0 0 3px rgba(38,38,38,.04);
}
/* Separator */
.venc-descartar-sep {
height: 1px;
background: rgba(38,38,38,.07);
margin: 10px 0;
}
/* Transformar (disabled) */
.venc-descartar-btn.transformar {
opacity: .45;
cursor: not-allowed;
position: relative;
border-style: dashed;
}
.venc-descartar-btn.transformar:hover {
background: transparent;
border-color: rgba(38,38,38,.10);
box-shadow: none;
transform: none;
}
.venc-descartar-soon {
margin-left: auto;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(38,38,38,.35);
font-family: var(--mono, monospace);
}
/* Cancel */
.venc-descartar-cancel {
display: block;
width: 100%;
margin-top: 12px;
padding: 9px 0;
border: none;
background: transparent;
font-family: var(--sans, sans-serif);
font-size: 12px;
font-weight: 600;
color: rgba(38,38,38,.45);
cursor: pointer;
border-radius: 8px;
transition: background .12s, color .12s;
text-align: center;
}
.venc-descartar-cancel:hover {
background: rgba(38,38,38,.04);
color: #262626;
}
/* ═══════════════════════════════════════════════════════════════
v7.32.0 — Pago Empresa: Toggle "Impactar en caja del día"
═══════════════════════════════════════════════════════════════ */
.pp-caja-toggle {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.pp-caja-btn {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 11px 13px;
background: rgba(26,20,16,.03);
border: 1.5px solid rgba(26,20,16,.10);
border-radius: 11px;
color: rgba(26,20,16,.45);
font-family: var(--sans);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
text-align: left;
transition: all .18s ease;
}
.pp-caja-btn svg { color: currentColor; opacity: .65; margin-bottom: 2px; }
.pp-caja-btn em {
font-style: normal;
font-family: var(--mono);
font-size: 8.5px;
font-weight: 600;
letter-spacing: .10em;
text-transform: uppercase;
color: rgba(26,20,16,.30);
line-height: 1.4;
}
.pp-caja-btn:hover {
background: rgba(26,20,16,.06);
border-color: rgba(26,20,16,.18);
color: rgba(26,20,16,.75);
}
/* Sí activo → verde (suma a caja) */
.pp-caja-btn.active[data-caja="si"] {
background: rgba(34,165,90,.07);
border-color: rgba(34,165,90,.35);
color: #1A7A45;
}
.pp-caja-btn.active[data-caja="si"] svg { opacity: 1; }
.pp-caja-btn.active[data-caja="si"] em { color: rgba(34,165,90,.6); }
/* No activo → neutro slate */
.pp-caja-btn.active[data-caja="no"] {
background: rgba(38,38,38,.06);
border-color: rgba(38,38,38,.30);
color: #262626;
}
.pp-caja-btn.active[data-caja="no"] svg { opacity: 1; }
.pp-caja-btn.active[data-caja="no"] em { color: rgba(38,38,38,.5); }
/* ═══════════════════════════════════════════════════════════════
v7.32.0 — Empresas UX improvements
═══════════════════════════════════════════════════════════════ */
/* Search input wrap — relative for absolute clear button */
.emp-search-wrap {
position: relative;
}
.emp-search-clr {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
border: none;
background: rgba(26,20,16,.08);
color: rgba(26,20,16,.55);
cursor: pointer;
align-items: center;
justify-content: center;
padding: 0;
transition: background .15s, color .15s;
}
.emp-search-clr:hover {
background: rgba(26,20,16,.18);
color: #262626;
}
/* Toolbar actions zone (export, etc.) */
.emp-toolbar-actions {
display: flex;
align-items: center;
gap: 6px;
margin-left: 8px;
}
.emp-toolbar-export {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px;
background: #E7E5E6;
border: none;
border-radius: 9px;
font-family: var(--sans, sans-serif);
font-size: 11.5px;
font-weight: 600;
color: #262626;
cursor: pointer;
transition: background .15s;
}
.emp-toolbar-export:hover { background: #dfdcdd; }
.emp-toolbar-export svg { opacity: .65; }
.emp-toolbar-export:hover svg { opacity: .9; }
/* Pedidos table: Items pill column */
.emp-pedido-items {
text-align: center;
}
.emp-items-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 7px;
background: rgba(232,102,58,.08);
border-radius: 999px;
font-family: var(--mono, monospace);
font-size: 10.5px;
font-weight: 700;
color: #B84420;
cursor: help;
}
.emp-items-empty {
font-size: 10px;
color: rgba(38,38,38,.30);
font-family: var(--mono, monospace);
}
/* Card focus visible (accesibilidad) */
.emp-card:focus-visible {
outline: 2px solid #262626;
outline-offset: -2px;
}
.emp-filter-btn:focus-visible {
outline: 2px solid #E8663A;
outline-offset: 2px;
}
/* Mini stats grid (v7.32.0) */
.emp-exp-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 16px;
padding: 16px;
background: rgba(26,20,16,.025);
border-radius: 12px;
border: 1px solid rgba(26,20,16,.06);
}
.emp-exp-stat {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.emp-exp-stat-label {
font-family: var(--mono, monospace);
font-size: 9px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(38,38,38,.45);
}
.emp-exp-stat-value {
font-family: var(--serif, serif);
font-size: 19px;
font-weight: 600;
color: #262626;
letter-spacing: -0.02em;
line-height: 1.1;
}
.emp-exp-stat-sub {
font-size: 10.5px;
font-weight: 500;
color: rgba(38,38,38,.45);
}
/* ═══════════════════════════════════════════════════════════════
v7.32.0 — Modal detalle de pedido (pdv-)
═══════════════════════════════════════════════════════════════ */
.pdv-overlay {
position: fixed;
inset: 0;
z-index: 99980;
background: rgba(26,20,16,.42);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: pdvFadeIn .22s ease both;
}
@keyframes pdvFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.pdv-modal {
background: #fff;
border-radius: 16px;
box-shadow:
0 0 0 1px rgba(38,38,38,.06),
0 12px 40px rgba(26,20,16,.18),
0 28px 60px rgba(26,20,16,.10);
width: 560px;
max-width: 100%;
max-height: calc(100vh - 48px);
display: flex;
flex-direction: column;
overflow: hidden;
animation: pdvScaleIn .28s cubic-bezier(.16,1,.3,1) both;
}
@keyframes pdvScaleIn {
from { opacity: 0; transform: scale(.96) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* HEADER */
.pdv-head {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 22px 24px 18px;
border-bottom: 1px solid rgba(38,38,38,.06);
flex-shrink: 0;
}
.pdv-head-info { flex: 1; min-width: 0; }
.pdv-eyebrow {
font-family: var(--mono, monospace);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(38,38,38,.45);
margin-bottom: 6px;
}
.pdv-title-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.pdv-title {
font-family: var(--serif, 'Fraunces', serif);
font-size: 22px;
font-weight: 600;
color: #262626;
letter-spacing: -0.02em;
margin: 0;
}
.pdv-close {
width: 30px;
height: 30px;
border-radius: 8px;
border: none;
background: transparent;
color: rgba(38,38,38,.45);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background .15s, color .15s;
}
.pdv-close:hover { background: rgba(38,38,38,.06); color: #262626; }
/* Badges */
.pdv-badge {
display: inline-flex;
align-items: center;
font-family: var(--mono, monospace);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .10em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 5px;
white-space: nowrap;
}
.pdv-badge--warn { background: rgba(212,136,42,.12); color: #9A6200; }
.pdv-badge--amber { background: rgba(212,136,42,.12); color: #9A6200; }
.pdv-badge--ok { background: rgba(34,165,90,.12); color: #1A7A45; }
.pdv-badge--danger { background: rgba(224,82,82,.12); color: #A83030; }
.pdv-badge--neutral { background: rgba(38,38,38,.08); color: rgba(38,38,38,.6); }
/* BODY */
.pdv-body {
flex: 1;
overflow-y: auto;
padding: 18px 24px 24px;
display: flex;
flex-direction: column;
gap: 20px;
scrollbar-width: thin;
scrollbar-color: rgba(38,38,38,.18) transparent;
}
.pdv-body::-webkit-scrollbar { width: 5px; }
.pdv-body::-webkit-scrollbar-thumb { background: rgba(38,38,38,.18); border-radius: 999px; }
/* Meta grid (fecha, vencimiento, items) */
.pdv-meta-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 14px;
background: rgba(26,20,16,.025);
border-radius: 10px;
}
.pdv-meta {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.pdv-meta-lbl {
font-family: var(--mono, monospace);
font-size: 8.5px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(38,38,38,.45);
}
.pdv-meta-val {
font-size: 12.5px;
font-weight: 600;
color: #262626;
}
.pdv-meta-danger { color: #A83030; }
/* Sections */
.pdv-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.pdv-sec-lbl {
font-family: var(--mono, monospace);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(38,38,38,.55);
}
/* Items list */
.pdv-items {
display: flex;
flex-direction: column;
gap: 1px;
background: rgba(38,38,38,.06);
border-radius: 10px;
overflow: hidden;
}
.pdv-item {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
background: #fff;
}
.pdv-item-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.pdv-item-name {
font-size: 13px;
font-weight: 600;
color: #262626;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pdv-item-meta {
font-family: var(--mono, monospace);
font-size: 10.5px;
font-weight: 500;
color: rgba(38,38,38,.50);
letter-spacing: 0.01em;
}
.pdv-item-sub {
font-family: var(--mono, monospace);
font-size: 13px;
font-weight: 700;
color: #262626;
font-variant-numeric: tabular-nums;
white-space: nowrap;
flex-shrink: 0;
}
.pdv-empty {
padding: 18px;
background: rgba(38,38,38,.03);
border-radius: 10px;
text-align: center;
font-size: 12px;
color: rgba(38,38,38,.45);
}
/* Totales */
.pdv-totales {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px;
background: rgba(38,38,38,.025);
border-radius: 10px;
}
.pdv-tot-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12.5px;
}
.pdv-tot-lbl {
font-weight: 500;
color: rgba(38,38,38,.62);
}
.pdv-tot-val {
font-family: var(--mono, monospace);
font-weight: 700;
color: #262626;
font-variant-numeric: tabular-nums;
}
.pdv-tot-discount { color: #1A7A45; }
.pdv-tot-final {
padding-top: 8px;
margin-top: 4px;
border-top: 1px solid rgba(38,38,38,.08);
}
.pdv-tot-final .pdv-tot-lbl {
font-family: var(--serif, serif);
font-size: 14px;
font-weight: 600;
color: #262626;
}
.pdv-tot-final .pdv-tot-val {
font-family: var(--serif, serif);
font-size: 18px;
letter-spacing: -0.02em;
color: #E8663A;
}
.pdv-tot-pagado .pdv-tot-val { color: #1A7A45; }
.pdv-tot-saldo .pdv-tot-val { color: #A83030; }
/* Pagos aplicados */
.pdv-pagos {
display: flex;
flex-direction: column;
gap: 1px;
background: rgba(38,38,38,.06);
border-radius: 10px;
overflow: hidden;
}
.pdv-pago-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
background: #fff;
font-size: 12px;
}
.pdv-pago-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.pdv-pago-fecha {
font-weight: 600;
color: #262626;
}
.pdv-pago-medio {
font-family: var(--mono, monospace);
font-size: 10px;
font-weight: 500;
color: rgba(38,38,38,.5);
letter-spacing: 0.02em;
}
.pdv-caja-tag {
display: inline-block;
padding: 1px 5px;
background: rgba(34,165,90,.12);
color: #1A7A45;
border-radius: 4px;
font-size: 9px;
font-weight: 700;
margin-left: 4px;
}
.pdv-pago-monto {
font-family: var(--mono, monospace);
font-weight: 700;
color: #1A7A45;
font-variant-numeric: tabular-nums;
}
/* Observaciones */
.pdv-obs {
padding: 12px 14px;
background: rgba(38,38,38,.025);
border-radius: 10px;
font-size: 12.5px;
color: rgba(38,38,38,.75);
line-height: 1.5;
white-space: pre-wrap;
}
/* FOOTER */
.pdv-foot {
display: flex;
align-items: center;
gap: 8px;
padding: 16px 24px;
border-top: 1px solid rgba(38,38,38,.06);
background: rgba(38,38,38,.015);
flex-shrink: 0;
}
.pdv-btn-ghost,
.pdv-btn-prime {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 14px;
border-radius: 9px;
font-family: var(--sans, sans-serif);
font-size: 12px;
font-weight: 600;
cursor: pointer;
border: none;
transition: background .15s, color .15s, box-shadow .15s;
white-space: nowrap;
}
.pdv-btn-ghost {
background: transparent;
color: rgba(38,38,38,.65);
border: 1px solid rgba(38,38,38,.12);
}
.pdv-btn-ghost:hover {
background: rgba(38,38,38,.04);
color: #262626;
border-color: rgba(38,38,38,.22);
}
.pdv-btn-prime {
margin-left: auto;
background: #262626;
color: #fff;
box-shadow: 0 2px 8px rgba(26,20,16,.18);
}
.pdv-btn-prime:hover {
background: #333;
box-shadow: 0 4px 14px rgba(26,20,16,.24);
}
/* ═══════════════════════════════════════════════════════════════
v7.32.0 — Empresa: Lista de Pedidos rediseñada (empd-)
═══════════════════════════════════════════════════════════════ */
.empd-wrap {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 14px;
}
/* HEAD: title + count + stats */
.empd-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.empd-head-left {
display: flex;
align-items: baseline;
gap: 10px;
}
.empd-head-title {
font-family: var(--serif, 'Fraunces', serif);
font-size: 16px;
font-weight: 600;
color: #262626;
letter-spacing: -0.02em;
}
.empd-head-count {
font-family: var(--mono, monospace);
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(38,38,38,.40);
}
.empd-head-stats {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.empd-stat {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
background: rgba(38,38,38,.04);
color: rgba(38,38,38,.60);
}
.empd-stat-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
opacity: .55;
}
.empd-stat--warn { background: rgba(212,136,42,.10); color: #9A6200; }
.empd-stat--amber { background: rgba(232,102,58,.10); color: #B84420; }
.empd-stat--ok { background: rgba(34,165,90,.10); color: #1A7A45; }
.empd-stat--neutral { background: rgba(38,38,38,.06); color: rgba(38,38,38,.55); }
/* LIST */
.empd-list {
display: flex;
flex-direction: column;
gap: 8px;
}
/* CARD */
.empd-card {
position: relative;
display: grid;
grid-template-columns: 130px 1fr 180px auto;
gap: 18px;
align-items: stretch;
padding: 14px 16px 14px 22px;
background: #fff;
border: 1px solid rgba(38,38,38,.07);
border-radius: 12px;
transition: border-color .15s, box-shadow .15s, transform .15s;
overflow: hidden;
}
.empd-card:hover {
border-color: rgba(38,38,38,.14);
box-shadow: 0 4px 16px rgba(26,20,16,.06), 0 1px 3px rgba(26,20,16,.04);
}
/* Color rail (border-left visual) */
.empd-rail {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--empd-rail, rgba(38,38,38,.20));
border-radius: 4px 0 0 4px;
}
/* Paid variant: subtle desaturation */
.empd-card.is-pagado {
background: rgba(34,165,90,.025);
border-color: rgba(34,165,90,.18);
}
.empd-card.is-pagado .empd-num,
.empd-card.is-pagado .empd-monto-val {
color: rgba(38,38,38,.55);
}
.empd-card.is-anulado {
opacity: .55;
}
.empd-card.is-anulado .empd-num {
text-decoration: line-through;
color: rgba(38,38,38,.40);
}
/* Vencido: subtle red glow */
.empd-card.is-vencido {
background: linear-gradient(90deg, rgba(224,82,82,.04) 0%, transparent 30%);
border-color: rgba(224,82,82,.22);
}
/* ID column */
.empd-id {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
min-width: 0;
}
.empd-num {
font-family: var(--mono, monospace);
font-size: 15px;
font-weight: 700;
color: #262626;
letter-spacing: 0.02em;
line-height: 1;
}
.empd-date {
font-size: 10.5px;
font-weight: 600;
color: rgba(38,38,38,.50);
}
.empd-badge {
display: inline-flex;
align-items: center;
font-family: var(--mono, monospace);
font-size: 9px;
font-weight: 700;
letter-spacing: .10em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 4px;
width: fit-content;
margin-top: 2px;
}
/* ITEMS preview column */
.empd-items {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
border-left: 1px solid rgba(38,38,38,.06);
padding-left: 18px;
}
.empd-items-head {
display: flex;
align-items: baseline;
gap: 8px;
}
.empd-items-count {
font-family: var(--mono, monospace);
font-size: 9px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(38,38,38,.45);
}
.empd-items-qty {
font-family: var(--mono, monospace);
font-size: 10px;
font-weight: 600;
color: rgba(38,38,38,.45);
}
.empd-items-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.empd-item {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 11.5px;
font-weight: 500;
color: #262626;
line-height: 1.3;
}
.empd-item-qty {
font-family: var(--mono, monospace);
font-weight: 700;
color: rgba(38,38,38,.85);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.empd-item-unit {
font-size: 9px;
font-weight: 500;
margin-left: 2px;
color: rgba(38,38,38,.40);
}
.empd-item-name {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: rgba(38,38,38,.78);
}
.empd-item-more {
font-family: var(--mono, monospace);
font-size: 10px;
font-weight: 600;
color: rgba(232,102,58,.85);
letter-spacing: 0.02em;
padding-top: 1px;
}
.empd-items-empty {
font-size: 11px;
font-style: italic;
color: rgba(38,38,38,.40);
}
/* META column (total + saldo + venc) */
.empd-meta {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
text-align: right;
border-left: 1px solid rgba(38,38,38,.06);
padding-left: 18px;
}
.empd-monto {
display: flex;
flex-direction: column;
gap: 2px;
}
.empd-monto-lbl {
font-family: var(--mono, monospace);
font-size: 9px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(38,38,38,.45);
}
.empd-monto-val {
font-family: var(--serif, serif);
font-size: 19px;
font-weight: 600;
color: #262626;
letter-spacing: -0.02em;
line-height: 1;
}
.empd-saldo {
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: 6px;
margin-top: 4px;
font-size: 11px;
color: rgba(38,38,38,.50);
}
.empd-saldo strong {
font-family: var(--mono, monospace);
font-size: 12px;
font-weight: 700;
color: #A83030;
}
.empd-progress {
height: 3px;
background: rgba(38,38,38,.08);
border-radius: 999px;
overflow: hidden;
margin-top: 4px;
}
.empd-progress-fill {
height: 100%;
background: linear-gradient(90deg, #22A55A, #2EBD68);
border-radius: 999px;
transition: width .4s cubic-bezier(.16,1,.3,1);
}
.empd-saldado-stamp {
display: inline-flex;
align-items: center;
gap: 4px;
align-self: flex-end;
padding: 3px 9px;
background: rgba(34,165,90,.10);
border: 1px solid rgba(34,165,90,.25);
border-radius: 5px;
font-family: var(--mono, monospace);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #1A7A45;
margin-top: 4px;
}
/* Vencimiento tags */
.empd-venc-tag {
display: inline-flex;
align-items: center;
align-self: flex-end;
padding: 3px 8px;
border-radius: 5px;
font-family: var(--mono, monospace);
font-size: 9px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.empd-venc-tag--danger { background: rgba(224,82,82,.10); color: #A83030; }
.empd-venc-tag--warn { background: rgba(212,136,42,.14); color: #9A6200; }
.empd-venc-tag--amber { background: rgba(232,102,58,.10); color: #B84420; }
.empd-venc-tag--ok { background: rgba(38,38,38,.05); color: rgba(38,38,38,.55); }
.empd-venc-plain {
font-size: 10.5px;
color: rgba(38,38,38,.45);
align-self: flex-end;
}
/* ACTIONS column */
.empd-actions {
display: flex;
align-items: center;
gap: 4px;
border-left: 1px solid rgba(38,38,38,.06);
padding-left: 12px;
}
.empd-act {
display: inline-flex;
align-items: center;
gap: 5px;
height: 30px;
padding: 0 10px;
border: none;
background: transparent;
border-radius: 7px;
color: rgba(38,38,38,.55);
font-family: var(--sans, sans-serif);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background .12s, color .12s;
}
.empd-act svg { opacity: .8; }
.empd-act:hover {
background: rgba(38,38,38,.06);
color: #262626;
}
.empd-act:hover svg { opacity: 1; }
.empd-act--primary:hover {
background: rgba(232,102,58,.10);
color: #B84420;
}
.empd-act--danger:hover {
background: rgba(224,82,82,.10);
color: #A83030;
}
.empd-act:not(.empd-act--primary):not(:hover) span { display: none; }
.empd-act--primary span { display: inline; }
/* Responsive: stack on narrow */
@media (max-width: 980px) {
.empd-card {
grid-template-columns: 100px 1fr;
gap: 12px;
}
.empd-meta, .empd-actions {
grid-column: 1 / -1;
border-left: none;
padding-left: 0;
border-top: 1px solid rgba(38,38,38,.06);
padding-top: 10px;
margin-top: 4px;
text-align: left;
flex-direction: row;
justify-content: space-between;
}
.empd-actions { justify-content: flex-end; }
.empd-items { border-left: none; padding-left: 0; }
}
/* ═══════════════════════════════════════════════════════════════════
v7.32.0 — GLOBAL DESIGN SYSTEM (lxg-*)
Sistema unificado extraído de Stock/Movimientos/Dashboard/Modales/Pedido.
Reemplaza patrones legacy (ej. tabla vencimientos).
═══════════════════════════════════════════════════════════════════ */
:root {
--lxg-space-3: 12px;
--lxg-space-4: 16px;
--lxg-space-5: 20px;
--lxg-space-6: 24px;
/* ── Radius scale ── */
--lxg-r-sm: 7px; /* pills, mini badges */
--lxg-r-md: 9px; /* controls (search/select/buttons) */
--lxg-r-lg: 12px; /* card chica, items list */
--lxg-r-xl: 16px; /* card grande, modal */
--lxg-r-pill: 999px; /* pills, dots */
/* ── Shadows ── */
--lxg-shadow-card:
0 0 0 1px rgba(38,38,38,.05),
0 1px 3px rgba(26,20,16,.04),
0 4px 16px rgba(26,20,16,.04);
--lxg-shadow-card-hover:
0 0 0 1px rgba(38,38,38,.08),
0 2px 8px rgba(26,20,16,.06),
0 12px 32px rgba(26,20,16,.07);
--lxg-shadow-modal:
0 0 0 1px rgba(38,38,38,.06),
0 12px 40px rgba(26,20,16,.18),
0 28px 60px rgba(26,20,16,.10);
0 1px 2px rgba(26,20,16,.06),
0 0 0 1px rgba(26,20,16,.05);
/* ── Surfaces ── */
--lxg-surface-card: #fff;
--lxg-surface-tinted: rgba(38,38,38,.025); /* totales blocks, soft sections */
--lxg-surface-hover-soft: rgba(26,20,16,.025);
--lxg-surface-control: #E7E5E6; /* inputs/selects/dropdowns en topbar */
--lxg-surface-control-hover: #dfdcdd;
/* ── Borders ── */
--lxg-border-faint: 1px solid rgba(38,38,38,.06);
/* ── Ink ── */
--lxg-ink: #262626;
--lxg-ink-80: rgba(38,38,38,.80);
--lxg-ink-60: rgba(38,38,38,.60);
--lxg-ink-45: rgba(38,38,38,.45);
--lxg-ink-30: rgba(38,38,38,.30);
/* ── Motion ── */
--lxg-ease-out: cubic-bezier(.16,1,.3,1);
--lxg-dur-fast: .15s;
--lxg-dur: .22s;
--lxg-dur-slow: .35s;
}
/* ─────────────────────────────────────────────────────────────────
TYPOGRAPHY UTILITIES
───────────────────────────────────────────────────────────────── */
/* Eyebrow: mono uppercase tracker — para labels de sección y stats */
.lxg-eyebrow {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--lxg-ink-45);
}
/* Section label: eyebrow con punto opcional */
.lxg-sec-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono, monospace);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--lxg-ink-60);
}
/* Hero number serif — KPIs principales */
.lxg-hero {
font-family: var(--serif, 'Fraunces', serif);
font-size: 30px;
font-weight: 600;
letter-spacing: -0.025em;
color: var(--lxg-ink);
line-height: 1;
}
.lxg-hero--sm { font-size: 22px; }
/* Section title — Fraunces medio */
.lxg-title {
font-family: var(--serif, serif);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--lxg-ink);
}
.lxg-title--lg { font-size: 19px; }
/* Mono utility — fechas/montos/IDs con tabular nums */
.lxg-mono {
font-family: var(--mono, monospace);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "zero" 1;
}
/* Muted text helpers */
.lxg-muted { color: var(--lxg-ink-45); }
/* ─────────────────────────────────────────────────────────────────
TABLE COMPONENT (canonical)
───────────────────────────────────────────────────────────────── */
.lxg-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 12.5px;
color: var(--lxg-ink);
}
.lxg-table thead tr {
background: #f2f1ef;
border-bottom: 1.5px solid rgba(26,20,16,.08);
}
.lxg-table th {
text-align: left;
padding: 10px 14px;
font-family: var(--mono, monospace);
font-size: 9px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--lxg-ink-45);
border-bottom: 1px solid rgba(38,38,38,.08);
background: rgba(38,38,38,.02);
}
.lxg-table td {
padding: 13px 14px;
border-bottom: 1px solid rgba(38,38,38,.06);
vertical-align: middle;
}
.lxg-table tbody tr {
transition: background var(--lxg-dur-fast);
}
.lxg-table tbody tr:hover td {
background: var(--lxg-surface-hover-soft);
}
.lxg-table tbody tr:last-child td { border-bottom: none; }
.lxg-table .lxg-td-mono { font-family: var(--mono, monospace); font-variant-numeric: tabular-nums; }
.lxg-table .lxg-td-amount { text-align: right; font-family: var(--mono, monospace); font-weight: 700; font-variant-numeric: tabular-nums; }
.lxg-table .lxg-td-muted { color: var(--lxg-ink-45); }
.lxg-table .lxg-td-right { text-align: right; }
.lxg-table .lxg-td-center { text-align: center; }
/* ─────────────────────────────────────────────────────────────────
BUTTONS — canonical (prime / ghost / icon)
───────────────────────────────────────────────────────────────── */
.lxg-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 14px;
border-radius: var(--lxg-r-md);
font-family: var(--sans, sans-serif);
font-size: 12px;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
transition: background var(--lxg-dur-fast), color var(--lxg-dur-fast), border-color var(--lxg-dur-fast), box-shadow var(--lxg-dur-fast);
white-space: nowrap;
line-height: 1;
}
.lxg-btn--prime {
background: linear-gradient(158deg, #333 0%, #262626 100%);
color: #fff !important;
box-shadow: 0 2px 8px rgba(26,20,16,.18);
}
.lxg-btn--prime svg { color: #fff !important; stroke: #fff !important; }
.lxg-btn--prime:hover {
background: linear-gradient(158deg, #3a3a3a 0%, #2d2d2d 100%);
box-shadow: 0 4px 14px rgba(26,20,16,.24);
color: #fff !important;
}
.lxg-btn--prime:disabled {
color: rgba(255,255,255,.4) !important;
}
.lxg-btn--ghost {
background: transparent;
color: var(--lxg-ink-60);
border-color: rgba(38,38,38,.12);
}
.lxg-btn--ghost:hover {
background: rgba(38,38,38,.04);
color: var(--lxg-ink);
border-color: rgba(38,38,38,.22);
}
.lxg-btn--ember {
background: #E8663A;
color: #fff;
box-shadow: 0 2px 8px rgba(232,102,58,.28);
}
.lxg-btn--ember:hover {
background: #F0764A;
box-shadow: 0 4px 14px rgba(232,102,58,.38);
}
.lxg-btn--sm { height: 28px; padding: 0 10px; font-size: 11px; }
.lxg-btn--lg { height: 40px; padding: 0 18px; font-size: 13px; }
.lxg-btn:disabled { opacity: .4; pointer-events: none; }
/* Icon-only button */
.lxg-icon-btn {
width: 30px;
height: 30px;
border-radius: 7px;
border: none;
background: transparent;
color: var(--lxg-ink-60);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--lxg-dur-fast), color var(--lxg-dur-fast);
padding: 0;
}
.lxg-icon-btn:hover { background: rgba(38,38,38,.06); color: var(--lxg-ink); }
.lxg-icon-btn--danger:hover { background: rgba(224,82,82,.10); color: #A83030; }
/* ─────────────────────────────────────────────────────────────────
MODAL — canonical (síntesis lx-modal + pdv-)
───────────────────────────────────────────────────────────────── */
.lxg-modal-overlay {
position: fixed;
inset: 0;
z-index: 99980;
background: rgba(26,20,16,.42);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: lxgFadeIn .22s ease both;
}
@keyframes lxgFadeIn { from { opacity: 0; } to { opacity: 1; } }
.lxg-modal {
background: var(--lxg-surface-card);
border-radius: var(--lxg-r-xl);
box-shadow: var(--lxg-shadow-modal);
width: 520px;
max-width: calc(100vw - 32px);
max-height: min(90vh, 940px);
display: flex;
flex-direction: column;
overflow: hidden;
animation: lxgScaleIn .26s var(--lxg-ease-out) both;
}
@keyframes lxgScaleIn {
from { opacity: 0; transform: scale(.96) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.lxg-modal--sm { width: 420px; }
.lxg-modal-head {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 22px 24px 18px;
border-bottom: var(--lxg-border-faint);
flex-shrink: 0;
}
.lxg-modal-head-info { flex: 1; min-width: 0; }
.lxg-modal-body {
flex: 1;
overflow-y: auto;
padding: 18px 24px 24px;
display: flex;
flex-direction: column;
gap: 20px;
scrollbar-width: thin;
scrollbar-color: rgba(38,38,38,.18) transparent;
}
.lxg-modal-body::-webkit-scrollbar { width: 5px; }
.lxg-modal-body::-webkit-scrollbar-thumb { background: rgba(38,38,38,.18); border-radius: 999px; }
.lxg-modal-foot {
display: flex;
align-items: center;
gap: 8px;
padding: 16px 24px;
border-top: var(--lxg-border-faint);
background: rgba(38,38,38,.015);
flex-shrink: 0;
}
.lxg-modal-foot > .lxg-btn--prime { margin-left: auto; }
.lxg-modal-close {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(38,38,38,.12);
background: transparent;
color: var(--lxg-ink-45);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background var(--lxg-dur-fast), border-color var(--lxg-dur-fast), color var(--lxg-dur-fast), transform .25s var(--lxg-ease-out);
}
.lxg-modal-close:hover {
background: rgba(38,38,38,.04);
border-color: var(--lxg-ink);
color: var(--lxg-ink);
transform: rotate(90deg);
}
/* ─────────────────────────────────────────────────────────────────
SECTION header (used in modals, drawers, page cards)
───────────────────────────────────────────────────────────────── */
.lxg-section {
display: flex;
flex-direction: column;
gap: 8px;
}
/* ═══════════════════════════════════════════════════════════════
v7.32.0 — Reconciliar Lotes (Vencimientos KPI "Sin Controlar")
Prefijo: rl- · Reusa tokens LXG donde es posible
═══════════════════════════════════════════════════════════════ */
/* SR-only utility (a11y) */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.rl-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 500;
color: var(--lxg-ink-45);
margin-top: 4px;
}
.rl-verified-tag {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: var(--lxg-r-sm);
background: rgba(34,165,90,.10);
color: #1A7A45;
font-family: var(--mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
/* Status banner — usa LXG semantic colors */
.rl-status {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: var(--lxg-r-lg);
font-size: 12.5px;
font-weight: 600;
border: 1px solid transparent;
}
.rl-status-icon { flex-shrink: 0; opacity: .9; }
.rl-status-text { flex: 1; }
/* Comparison: stock vs lotes */
.rl-compare {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 16px;
align-items: center;
padding: 16px 18px;
background: var(--lxg-surface-tinted);
border-radius: var(--lxg-r-lg);
}
.rl-compare-side {
display: flex;
flex-direction: column;
gap: 4px;
text-align: center;
align-items: center;
}
.rl-compare-arrow {
color: var(--lxg-ink-30);
display: flex;
align-items: center;
justify-content: center;
}
.rl-num-unit {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--lxg-ink-45);
margin-left: 4px;
}
.rl-modif-tag {
font-family: var(--mono);
font-size: 9.5px;
font-weight: 600;
color: var(--lxg-ink-30);
letter-spacing: .04em;
margin-top: 3px;
}
/* ─── Acciones con jerarquía (P0/E1) ─── */
.rl-action {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 14px 16px;
border-radius: var(--lxg-r-lg);
background: #fff;
border: 1px solid rgba(38,38,38,.10);
cursor: pointer;
text-align: left;
font-family: var(--sans);
transition: border-color var(--lxg-dur-fast), background var(--lxg-dur-fast), box-shadow var(--lxg-dur-fast), transform .1s;
margin-bottom: 6px;
}
.rl-action:focus-visible {
outline: 2px solid #E8663A;
outline-offset: 2px;
}
.rl-action:hover {
border-color: rgba(38,38,38,.18);
background: rgba(38,38,38,.015);
}
.rl-action:disabled {
opacity: .45;
pointer-events: none;
}
.rl-action-icon {
width: 38px;
height: 38px;
border-radius: var(--lxg-r-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rl-action-info { flex: 1; min-width: 0; }
.rl-action-title {
font-size: 13px;
font-weight: 600;
color: var(--lxg-ink);
line-height: 1.2;
}
.rl-action-sub {
font-size: 11px;
font-weight: 500;
color: var(--lxg-ink-45);
margin-top: 3px;
line-height: 1.35;
}
.rl-action-sub strong {
font-family: var(--mono);
font-weight: 700;
color: var(--lxg-ink);
}
.rl-text-danger { color: var(--c-red-ink); }
.rl-text-danger strong { color: var(--c-red-ink); }
/* Primary action — ember filled */
.rl-action--primary {
background: #E8663A;
border-color: #E8663A;
color: #fff;
box-shadow: 0 2px 10px rgba(232,102,58,.28);
}
.rl-action--primary:hover {
background: #F0764A;
border-color: #F0764A;
box-shadow: 0 4px 16px rgba(232,102,58,.38);
transform: translateY(-1px);
}
.rl-action--primary .rl-action-title { color: #fff; }
.rl-action--primary .rl-action-sub { color: rgba(255,255,255,.85); }
.rl-action--primary .rl-action-sub strong { color: #fff; }
.rl-action--primary .rl-action-icon {
background: rgba(255,255,255,.18);
color: #fff;
}
/* Secondary action — outline ember */
.rl-action--secondary .rl-action-icon {
background: var(--c-ember-soft);
color: var(--c-ember-ink);
}
.rl-action--secondary:hover:not(:disabled) {
border-color: rgba(232,102,58,.35);
background: rgba(232,102,58,.03);
}
/* Tertiary — link discreto */
.rl-action-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
padding: 8px 10px;
background: transparent;
border: none;
border-radius: var(--lxg-r-sm);
color: var(--lxg-ink-60);
font-family: var(--sans);
font-size: 11.5px;
font-weight: 500;
cursor: pointer;
text-decoration: underline;
text-decoration-color: rgba(38,38,38,.15);
text-underline-offset: 3px;
transition: color var(--lxg-dur-fast), background var(--lxg-dur-fast);
}
.rl-action-link:hover {
color: var(--lxg-ink);
background: rgba(38,38,38,.04);
text-decoration-color: var(--lxg-ink-45);
}
/* ─── Empty state (P1/C3) ─── */
.rl-empty-state {
text-align: center;
padding: 28px 20px;
background: var(--lxg-surface-tinted);
border-radius: var(--lxg-r-lg);
}
.rl-empty-icon {
display: inline-flex;
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(212,136,42,.12);
color: #9A6200;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.rl-empty-title {
font-family: var(--serif);
font-size: 16px;
font-weight: 600;
color: var(--lxg-ink);
letter-spacing: -0.01em;
}
.rl-empty-sub {
font-size: 12px;
color: var(--lxg-ink-60);
margin-top: 6px;
margin-bottom: 16px;
}
.rl-empty-actions {
display: inline-flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
/* ─── Edición manual colapsable (P0/E2) ─── */
.rl-manual {
border: 1px solid rgba(38,38,38,.08);
border-radius: var(--lxg-r-lg);
background: rgba(38,38,38,.015);
overflow: hidden;
}
.rl-manual[open] {
background: #fff;
border-color: rgba(38,38,38,.14);
}
.rl-manual-summary {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
cursor: pointer;
user-select: none;
list-style: none;
transition: background var(--lxg-dur-fast);
}
.rl-manual-summary::-webkit-details-marker { display: none; }
.rl-manual-summary:hover { background: rgba(38,38,38,.03); }
.rl-manual-summary-text {
flex: 1;
font-size: 12px;
font-weight: 600;
color: var(--lxg-ink);
}
.rl-manual-summary-count {
font-family: var(--mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--lxg-ink-45);
padding: 2px 7px;
background: rgba(38,38,38,.06);
border-radius: var(--lxg-r-sm);
}
.rl-manual-chevron {
color: var(--lxg-ink-45);
transition: transform var(--lxg-dur);
}
.rl-manual[open] .rl-manual-chevron { transform: rotate(180deg); }
.rl-manual-body {
padding: 4px 14px 14px;
border-top: 1px solid rgba(38,38,38,.06);
margin-top: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
/* ─── Lotes list ─── */
.rl-lotes {
display: flex;
flex-direction: column;
gap: 1px;
background: rgba(38,38,38,.06);
border-radius: var(--lxg-r-md);
overflow: hidden;
}
.rl-lote {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
background: #fff;
}
.rl-lote-empty {
background: var(--c-amber-soft);
}
.rl-lote-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.rl-lote-codigo {
font-family: var(--mono);
font-size: 11.5px;
font-weight: 700;
color: var(--lxg-ink);
letter-spacing: 0.02em;
}
.rl-lote-venc {
font-size: 10px;
font-weight: 500;
color: var(--lxg-ink-45);
}
.rl-lote-qty {
display: flex;
align-items: center;
gap: 6px;
}
.rl-lote-input {
width: 72px;
height: 28px;
text-align: right;
border: 1px solid rgba(38,38,38,.12);
border-radius: var(--lxg-r-md);
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
color: var(--lxg-ink);
background: #fafafa;
padding: 0 8px;
outline: none;
font-variant-numeric: tabular-nums;
transition: border-color var(--lxg-dur-fast), background var(--lxg-dur-fast), box-shadow var(--lxg-dur-fast);
}
.rl-lote-input:focus {
border-color: #E8663A;
background: #fff;
box-shadow: 0 0 0 3px var(--c-ember-soft);
}
.rl-lote-input::placeholder { color: var(--lxg-ink-30); font-weight: 500; font-style: italic; }
.rl-lote-unit {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 600;
color: var(--lxg-ink-45);
min-width: 22px;
}
/* Total bar inside manual */
.rl-lotes-total {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 12px;
background: rgba(38,38,38,.04);
border-radius: var(--lxg-r-md);
}
.rl-lotes-total-val {
font-family: var(--mono);
font-size: 13px;
font-weight: 700;
color: var(--lxg-ink);
font-variant-numeric: tabular-nums;
transition: color var(--lxg-dur-fast);
}
.rl-lotes-total-val.rl-total-ok {
color: var(--c-green-ink);
}
.rl-lotes-total-val.rl-total-ok::after {
content: " ✓";
font-family: var(--sans);
}
.rl-manual-foot {
display: flex;
justify-content: flex-end;
}
/* v7.32.0 — Confirm modal body */
.lxg-confirm-body {
font-size: 13px;
line-height: 1.5;
color: var(--lxg-ink-80);
margin: 0;
}
.lxg-confirm-body strong {
font-family: var(--mono, monospace);
font-weight: 700;
color: var(--lxg-ink);
}
/* ═══════════════════════════════════════════════════════════════
v7.32.0 — CARGA MASIVA v2 (cart-style cm2-)
v7.33.0 — Spacing fix pass (gap/padding/breathing)
═══════════════════════════════════════════════════════════════ */
#page-carga.cm2 {
flex-direction: column;
gap: 24px;
padding: 32px 32px 100px 32px;
width: 100%;
box-sizing: border-box;
}
#page-carga.cm2.active {
display: flex !important;
}
/* HEAD — minimal context line */
.cm2-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-bottom: 4px;
}
.cm2-head-context-wrap {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
/* Icono persistente: flecha bajando en loop · check al confirmar */
.cm2-head-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: var(--lxg-r-md);
background: var(--c-ember-soft);
color: var(--c-ember-ink);
overflow: hidden;
transition: background .28s ease, color .28s ease;
}
.cm2-head-icon-svg {
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 50%;
margin: -8px 0 0 -8px;
}
/* Default: flecha bajando — movimiento lineal constante + fade ease-in-out en bordes */
.cm2-head-icon--default {
animation:
cm2ArrowSlide 1.8s linear infinite,
cm2ArrowFade 1.8s ease-in-out infinite;
}
@keyframes cm2ArrowSlide {
from { transform: translateY(-16px); }
to { transform: translateY(16px); }
}
@keyframes cm2ArrowFade {
0%, 100% { opacity: 0; }
22%, 78% { opacity: 1; }
}
/* Check: oculto por default */
.cm2-head-icon--check {
opacity: 0;
transform: scale(.6);
stroke-dasharray: 24;
stroke-dashoffset: 24;
transition: opacity .28s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
/* Estado: éxito — pausa la flecha y dibuja el check verde */
.cm2-head-icon.is-success {
background: rgba(34,165,90,.14);
color: #1A7A45;
}
.cm2-head-icon.is-success .cm2-head-icon--default {
opacity: 0;
animation: none;
}
.cm2-head-icon.is-success .cm2-head-icon--check {
opacity: 1;
transform: scale(1);
animation: cm2HeadCheckDraw .42s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes cm2HeadCheckDraw {
to { stroke-dashoffset: 0; }
}
.cm2-head-context {
margin: 0;
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
color: var(--lxg-ink-60);
letter-spacing: -0.005em;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.cm2-head-tag {
display: inline-flex;
align-items: center;
height: 26px;
padding: 0 11px;
background: var(--c-ember-soft);
color: var(--c-ember-ink);
border: 1px solid var(--c-ember-line);
border-radius: var(--lxg-r-pill);
font-family: var(--sans);
font-size: 12.5px;
font-weight: 600;
letter-spacing: -0.005em;
}
.cm2-head-empty {
font-style: italic;
color: var(--lxg-ink-45);
}
.cm2-head-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
/* ═══ GRID 40/60 — col izq (search + historial) · col der (carrito) ═══ */
.cm2-grid {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
gap: 20px;
align-items: start;
}
.cm2-col-left {
display: flex;
flex-direction: column;
gap: 20px;
min-width: 0;
}
/* Col-right: sticky, altura limitada para terminar justo arriba del footer.
Cálculo: 100vh - top(14) - footer_height(~62) - bottom_offset(14) - gap(20) ≈ 110px → uso 160 para buffer */
.cm2-col-right {
position: sticky;
top: 14px;
min-width: 0;
height: calc(100vh - 160px);
display: flex;
flex-direction: column;
}
.cm2-col-right .cm2-stage--cart {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
padding: 0;
}
.cm2-col-right .cm2-stage--cart .cm2-cart-head-sticky {
padding: 18px 22px 14px;
background: var(--lxg-surface-card);
border-bottom: 1px solid rgba(38,38,38,.06);
margin-bottom: 0;
flex-shrink: 0;
z-index: 2;
border-top-left-radius: var(--lxg-r-lg);
border-top-right-radius: var(--lxg-r-lg);
}
.cm2-col-right .cm2-cart-list {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 14px 18px 18px;
scrollbar-width: thin;
scrollbar-color: rgba(38,38,38,.25) transparent;
}
.cm2-col-right .cm2-cart-list::-webkit-scrollbar { width: 8px; }
.cm2-col-right .cm2-cart-list::-webkit-scrollbar-track { background: transparent; }
.cm2-col-right .cm2-cart-list::-webkit-scrollbar-thumb {
background: rgba(38,38,38,.18);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
.cm2-col-right .cm2-cart-list::-webkit-scrollbar-thumb:hover {
background: rgba(38,38,38,.30);
background-clip: padding-box;
}
/* Responsive: < 1100px colapsa a 1 columna con carrito arriba */
@media (max-width: 1100px) {
.cm2-grid { grid-template-columns: 1fr; }
.cm2-col-right { position: static; max-height: none; }
.cm2-col-right .cm2-stage--cart { max-height: none; }
}
/* ═══ PREP STRIP colapsable ═══ */
.cm2-prep-strip {
display: none;
align-items: center;
gap: 12px;
padding: 12px 16px;
cursor: pointer;
transition: background var(--lxg-dur-fast);
}
.cm2-prep-strip:hover { background: rgba(38,38,38,.025); }
.cm2-stage--prep[data-collapsed="true"] {
padding: 0;
}
.cm2-stage--prep[data-collapsed="true"] .cm2-prep-strip {
display: flex;
}
.cm2-stage--prep[data-collapsed="true"] .cm2-prep-form {
display: none;
}
.cm2-prep-strip-content {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
font-family: var(--sans);
font-size: 12.5px;
font-weight: 500;
color: var(--lxg-ink-60);
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
}
.cm2-prep-strip-local {
font-weight: 700;
color: var(--lxg-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex-shrink: 1;
}
.cm2-prep-strip-sep { color: var(--lxg-ink-30); flex-shrink: 0; }
.cm2-prep-strip-meta {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--lxg-ink-60);
letter-spacing: 0.02em;
white-space: nowrap;
flex-shrink: 0;
}
.cm2-prep-strip-edit {
display: inline-flex;
align-items: center;
gap: 5px;
background: transparent;
border: 1px solid rgba(38,38,38,.10);
border-radius: var(--lxg-r-sm);
padding: 5px 10px;
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
color: var(--lxg-ink-60);
cursor: pointer;
transition: all var(--lxg-dur-fast);
}
.cm2-prep-strip-edit:hover {
border-color: rgba(38,38,38,.20);
color: var(--lxg-ink);
background: rgba(38,38,38,.04);
}
/* ═══ COLLAPSE TOGGLE (chevron — prep form / historial) ═══ */
.cm2-collapse-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: transparent;
border: 1px solid rgba(38,38,38,.10);
border-radius: var(--lxg-r-sm);
color: var(--lxg-ink-60);
cursor: pointer;
flex-shrink: 0;
transition:
background var(--lxg-dur-fast),
border-color var(--lxg-dur-fast),
color var(--lxg-dur-fast);
}
.cm2-collapse-toggle:hover {
background: rgba(38,38,38,.04);
border-color: rgba(38,38,38,.20);
color: var(--lxg-ink);
}
.cm2-collapse-toggle svg {
transition: transform .28s cubic-bezier(.16,1,.3,1);
}
/* Chevron apunta abajo cuando está colapsado (= expandir), arriba cuando expandido (= colapsar) */
.cm2-stage[data-collapsed="true"] .cm2-collapse-toggle svg {
transform: rotate(180deg);
}
/* Stage head con info que se estira + el toggle al final */
.cm2-stage-head-info { flex: 1; min-width: 0; }
/* Hist head clickable feedback */
.cm2-hist-head-clickable {
cursor: pointer;
user-select: none;
}
.cm2-hist-head-clickable:hover .cm2-stage-title {
color: var(--c-ember-ink);
transition: color var(--lxg-dur-fast);
}
/* Cuando historial está colapsado: ocultar el body completo */
.cm2-stage--hist[data-collapsed="true"] {
padding-bottom: 18px;
}
.cm2-stage--hist[data-collapsed="true"] .cm2-stage-head {
margin-bottom: 0;
}
.cm2-stage--hist[data-collapsed="true"] .cm2-hist-body {
display: none;
}
/* ═══ HISTORIAL ═══ */
.cm2-stage--hist .cm2-stage-num--hist {
background: rgba(38,38,38,.08);
color: var(--lxg-ink-60);
font-family: var(--sans);
font-size: 13px;
font-weight: 700;
}
.cm2-hist-head-info { flex: 1; min-width: 0; }
/* Filters bar */
.cm2-hist-filters {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 8px;
margin-bottom: 12px;
}
.cm2-hist-filter-search {
position: relative;
display: flex;
align-items: center;
}
.cm2-hist-filter-search svg {
position: absolute;
left: 10px;
color: var(--lxg-ink-45);
pointer-events: none;
}
.cm2-hist-filter-search input {
width: 100%;
height: 30px;
padding: 0 10px 0 30px;
border: 1px solid rgba(38,38,38,.10);
border-radius: var(--lxg-r-sm);
background: #fff;
font-family: var(--sans);
font-size: 11.5px;
font-weight: 500;
color: var(--lxg-ink);
outline: none;
box-sizing: border-box;
transition: border-color var(--lxg-dur-fast);
}
.cm2-hist-filter-search input:focus { border-color: var(--c-ember); }
.cm2-hist-select {
height: 30px;
padding: 0 26px 0 10px;
border: 1px solid rgba(38,38,38,.10);
border-radius: var(--lxg-r-sm);
background: #fff;
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
color: var(--lxg-ink);
cursor: pointer;
outline: none;
}
.cm2-hist-select:focus { border-color: var(--c-ember); }
/* List of cargas */
.cm2-hist-list {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 360px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(38,38,38,.18) transparent;
margin-right: -4px;
padding-right: 4px;
}
.cm2-hist-list::-webkit-scrollbar { width: 5px; }
.cm2-hist-list::-webkit-scrollbar-thumb { background: rgba(38,38,38,.18); border-radius: 999px; }
.cm2-hist-empty {
padding: 20px 14px;
background: rgba(38,38,38,.02);
border: 1px dashed rgba(38,38,38,.10);
border-radius: var(--lxg-r-md);
text-align: center;
font-size: 11.5px;
font-weight: 500;
color: var(--lxg-ink-45);
font-style: italic;
}
/* Row de carga */
.cm2-hist-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid rgba(38,38,38,.08);
border-radius: var(--lxg-r-md);
background: #fff;
transition: border-color var(--lxg-dur-fast), background var(--lxg-dur-fast);
}
.cm2-hist-row:hover {
border-color: rgba(232,102,58,.30);
background: rgba(232,102,58,.025);
}
.cm2-hist-row-info { flex: 1; min-width: 0; }
.cm2-hist-row-meta {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--lxg-ink-45);
}
.cm2-hist-row-emp {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 600;
color: var(--lxg-ink-60);
text-transform: none;
letter-spacing: 0;
}
.cm2-hist-row-summary {
font-size: 12.5px;
font-weight: 600;
color: var(--lxg-ink);
margin-top: 2px;
letter-spacing: -0.005em;
}
.cm2-hist-row-summary .cm2-hist-units {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--lxg-ink-60);
margin-left: 4px;
letter-spacing: 0.02em;
}
.cm2-hist-row-repeat {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 9px;
background: transparent;
border: 1px solid rgba(38,38,38,.10);
border-radius: var(--lxg-r-sm);
font-family: var(--sans);
font-size: 10.5px;
font-weight: 600;
color: var(--lxg-ink-60);
cursor: pointer;
transition: all var(--lxg-dur-fast);
flex-shrink: 0;
}
.cm2-hist-row-repeat:hover {
background: var(--c-ember);
border-color: var(--c-ember);
color: #fff;
}
.cm2-hist-row-repeat svg { width: 11px; height: 11px; }
/* ═══ Cart empty state inteligente (con last cargas) ═══ */
.cm2-cart-empty-smart {
padding: 24px 18px;
display: flex;
flex-direction: column;
gap: 14px;
}
.cm2-cart-empty-smart-head {
text-align: center;
font-size: 12.5px;
font-weight: 500;
color: var(--lxg-ink-60);
letter-spacing: -0.005em;
}
.cm2-cart-empty-smart-head strong {
display: block;
font-family: var(--serif);
font-size: 16px;
font-weight: 600;
color: var(--lxg-ink);
letter-spacing: -0.015em;
margin-bottom: 4px;
}
.cm2-cart-empty-smart-sub {
text-align: center;
font-family: var(--mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--lxg-ink-45);
margin-top: 4px;
}
.cm2-cart-empty-smart-list {
display: flex;
flex-direction: column;
gap: 6px;
}
/* ETAPAS (stages) */
.cm2-stage {
background: var(--lxg-surface-card);
border: var(--lxg-border-faint);
border-radius: var(--lxg-r-lg);
padding: 22px 24px;
box-shadow: 0 1px 2px rgba(26,20,16,.03);
}
/* Énfasis sutil en "Agregar productos" — card protagónica de la sesión */
.cm2-stage--add {
border-color: rgba(232,102,58,.18);
box-shadow:
0 1px 2px rgba(26,20,16,.03),
0 6px 18px rgba(232,102,58,.06),
0 18px 38px rgba(232,102,58,.04);
}
.cm2-stage-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
}
.cm2-stage-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--lxg-ink);
color: #fff;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
flex-shrink: 0;
margin-top: 2px;
align-self: flex-start;
}
.cm2-stage-title {
font-family: var(--serif, serif);
font-size: 14px;
font-weight: 600;
color: var(--lxg-ink);
letter-spacing: -0.01em;
line-height: 1.25;
}
.cm2-stage-sub {
font-size: 11px;
font-weight: 500;
color: var(--lxg-ink-45);
margin-top: 1px;
line-height: 1.4;
}
/* ETAPA 1 — Prep grid */
.cm2-prep-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.cm2-prep-field {
display: flex;
flex-direction: column;
gap: 6px;
}
/* Sucursal ocupa toda la fila — es el campo maestro */
.cm2-prep-field:first-child {
grid-column: 1 / -1;
}
.cm2-prep-field:first-child select {
height: 38px;
font-size: 13px;
font-weight: 600;
}
.cm2-prep-label {
font-family: var(--mono);
font-size: 8.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--lxg-ink-45);
}
/* Label de Sucursal con acento */
.cm2-prep-field:first-child .cm2-prep-label {
color: var(--c-ember-ink);
}
.cm2-prep-field select,
.cm2-prep-field input {
height: 32px;
padding: 0 11px;
border: 1px solid rgba(38,38,38,.10);
border-radius: var(--lxg-r-md);
background: #fff;
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
color: var(--lxg-ink);
outline: none;
transition: border-color var(--lxg-dur-fast), box-shadow var(--lxg-dur-fast);
}
.cm2-prep-field input:focus,
.cm2-prep-field select:focus {
border-color: #E8663A;
box-shadow: 0 0 0 3px var(--c-ember-soft);
}
/* ETAPA 2 — Search */
.cm2-search-wrap {
position: relative;
display: flex;
align-items: center;
}
.cm2-search-icon {
position: absolute;
left: 12px;
color: var(--lxg-ink-45);
pointer-events: none;
}
#cm2-search {
width: 100%;
height: 38px;
padding: 0 36px 0 36px;
border: 1px solid rgba(38,38,38,.12);
border-radius: var(--lxg-r-md);
background: #fff;
font-family: var(--sans);
font-size: 12.5px;
font-weight: 500;
color: var(--lxg-ink);
outline: none;
transition: border-color var(--lxg-dur-fast), box-shadow var(--lxg-dur-fast);
box-sizing: border-box;
}
#cm2-search:focus {
border-color: #E8663A;
box-shadow: 0 0 0 3px var(--c-ember-soft);
}
#cm2-search::placeholder { color: var(--lxg-ink-30); }
.cm2-search-clear {
position: absolute;
right: 12px;
width: 22px;
height: 22px;
border-radius: 50%;
border: none;
background: rgba(26,20,16,.08);
color: var(--lxg-ink-60);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: background var(--lxg-dur-fast);
}
.cm2-search-clear:hover { background: rgba(26,20,16,.18); color: var(--lxg-ink); }
/* Search results */
.cm2-search-results {
display: flex;
flex-direction: column;
gap: 1px;
margin-top: 10px;
max-height: 260px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(38,38,38,.18) transparent;
}
.cm2-search-results:empty { margin-top: 0; }
.cm2-search-results::-webkit-scrollbar { width: 5px; }
.cm2-search-results::-webkit-scrollbar-thumb { background: rgba(38,38,38,.18); border-radius: 999px; }
.cm2-search-empty {
padding: 16px;
background: rgba(38,38,38,.025);
border-radius: var(--lxg-r-md);
text-align: center;
font-size: 12px;
color: var(--lxg-ink-45);
}
.cm2-search-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border: none;
background: #fff;
border-radius: var(--lxg-r-sm);
cursor: pointer;
text-align: left;
transition: background var(--lxg-dur-fast);
font-family: var(--sans);
}
.cm2-search-item:hover { background: rgba(232,102,58,.06); }
.cm2-search-item.is-incart { background: rgba(34,165,90,.05); }
.cm2-search-item.is-incart:hover { background: rgba(34,165,90,.10); }
.cm2-search-item-info { flex: 1; min-width: 0; }
.cm2-search-item-name {
font-size: 12.5px;
font-weight: 600;
color: var(--lxg-ink);
}
.cm2-search-item-meta {
font-size: 10.5px;
font-weight: 500;
color: var(--lxg-ink-45);
margin-top: 2px;
}
.cm2-search-item-add {
width: 28px;
height: 28px;
border-radius: var(--lxg-r-sm);
background: rgba(232,102,58,.12);
color: #B84420;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cm2-search-item.is-incart .cm2-search-item-add {
background: transparent;
width: auto;
}
.cm2-search-item-tag {
font-family: var(--mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #1A7A45;
padding: 3px 8px;
background: rgba(34,165,90,.12);
border-radius: var(--lxg-r-sm);
}
/* ETAPA 3 — Carrito */
.cm2-cart-head-info { flex: 1; min-width: 0; }
.cm2-cart-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.cm2-cart-empty {
padding: 20px 16px;
background: rgba(38,38,38,.025);
border-radius: var(--lxg-r-md);
text-align: center;
color: var(--lxg-ink-45);
font-size: 12px;
font-weight: 500;
}
.cm2-cart-empty svg {
display: block;
margin: 0 auto 8px;
color: var(--lxg-ink-30);
}
/* Item card — flat gris, sin tints por estado (solo el pill cambia de color) */
.cm2-item {
background: rgba(38,38,38,.04);
border: 1px solid transparent;
border-radius: var(--lxg-r-md);
padding: 14px 18px;
position: relative;
transition: background var(--lxg-dur-fast), border-color var(--lxg-dur-fast);
}
.cm2-item:hover {
background: rgba(38,38,38,.06);
}
@keyframes cm2Flash {
0% { box-shadow: 0 0 0 4px rgba(232,102,58,.25); }
100% { box-shadow: 0 0 0 0 rgba(232,102,58,0); }
}
.cm2-item-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.cm2-item-id { flex: 1; min-width: 0; }
.cm2-item-name {
font-size: 13px;
font-weight: 600;
color: var(--lxg-ink);
letter-spacing: -0.01em;
}
.cm2-item-meta {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: var(--lxg-ink-45);
margin-top: 2px;
letter-spacing: 0.04em;
}
.cm2-item-right {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.cm2-item-status {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: var(--lxg-r-sm);
font-family: var(--mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.cm2-item-stockprev {
font-family: var(--mono);
font-size: 10.5px;
color: var(--lxg-ink-45);
white-space: nowrap;
}
.cm2-item-stockprev strong {
color: var(--lxg-ink);
font-weight: 700;
}
.cm2-stockprev-new { color: #1A7A45; }
/* Primary row: qty + venc derivado + expand toggle */
.cm2-item-primary {
display: flex;
align-items: flex-end;
gap: 16px;
}
.cm2-item-primary .cm2-field {
flex-shrink: 0;
width: 160px;
display: flex;
flex-direction: column;
gap: 6px;
}
/* Venc pill — tag semántico de vencimiento con código de color por urgencia */
.cm2-venc-pill {
display: inline-flex;
align-items: center;
gap: 6px;
height: 26px;
padding: 0 4px 0 8px;
border-radius: 8px;
font-family: var(--sans);
font-size: 11.5px;
font-weight: 600;
letter-spacing: -0.005em;
background: rgba(38,38,38,.07);
color: var(--lxg-ink-60);
margin-bottom: 9px;
margin-right: auto;
white-space: nowrap;
transition:
background var(--lxg-dur) var(--cm2-ease-out),
color var(--lxg-dur) var(--cm2-ease-out);
}
.cm2-venc-pill-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.cm2-venc-pill-icon svg {
width: 12px;
height: 12px;
opacity: .75;
}
.cm2-venc-pill-text { line-height: 1; }
.cm2-venc-pill-days {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 7px;
background: rgba(255,255,255,.55);
border-radius: 999px;
font-family: var(--mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .04em;
margin-left: 2px;
}
/* Urgency variants */
.cm2-venc-pill[data-urgency="ok"] {
background: rgba(34,165,90,.12);
color: #1A7A45;
}
.cm2-venc-pill[data-urgency="ok"] .cm2-venc-pill-days {
background: rgba(34,165,90,.18);
}
.cm2-venc-pill[data-urgency="warn"] {
background: rgba(212,136,42,.14);
color: #9A6200;
}
.cm2-venc-pill[data-urgency="warn"] .cm2-venc-pill-days {
background: rgba(212,136,42,.22);
}
.cm2-venc-pill[data-urgency="danger"] {
background: rgba(224,82,82,.12);
color: #A83030;
}
.cm2-venc-pill[data-urgency="danger"] .cm2-venc-pill-days {
background: rgba(224,82,82,.20);
}
.cm2-venc-pill[data-urgency="alert"] {
background: var(--c-ember-soft);
color: var(--c-ember-ink);
}
.cm2-venc-pill[data-urgency="alert"] .cm2-venc-pill-icon svg {
opacity: 1;
animation: cm2VencAlertPulse 1.6s ease-in-out infinite;
}
.cm2-venc-pill[data-urgency="neutral"] {
background: rgba(38,38,38,.06);
color: var(--lxg-ink-60);
}
/* Animación de morph al cambiar de urgencia */
.cm2-venc-pill.is-morph {
animation: cm2VencMorph 380ms cubic-bezier(.34,1.2,.64,1);
}
@keyframes cm2VencMorph {
0% { transform: scale(.92); }
50% { transform: scale(1.06); }
100% { transform: scale(1); }
}
@keyframes cm2VencAlertPulse {
0%, 100% { opacity: .6; }
50% { opacity: 1; }
}
.cm2-item-expand-btn {
background: none;
border: none;
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
color: var(--lxg-ink-45);
cursor: pointer;
padding: 0 0 9px 0;
white-space: nowrap;
flex-shrink: 0;
transition: color var(--lxg-dur-fast);
}
.cm2-item-expand-btn:hover { color: var(--lxg-ink); }
/* Secondary row: fecha + dias + custom + lote — 2 filas para ancho menor */
.cm2-item-secondary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 14px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(38,38,38,.10);
}
.cm2-item-secondary .cm2-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.cm2-field-lbl {
font-family: var(--mono);
font-size: 8.5px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--lxg-ink-45);
}
.cm2-item-primary input,
.cm2-item-primary select,
.cm2-item-secondary input,
.cm2-item-secondary select {
height: 32px;
padding: 0 10px;
border: 1px solid rgba(38,38,38,.12);
border-radius: var(--lxg-r-md);
background: #fff;
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
color: var(--lxg-ink);
outline: none;
transition: border-color var(--lxg-dur-fast), box-shadow var(--lxg-dur-fast);
width: 100%;
box-sizing: border-box;
}
.cm2-item-primary input:focus,
.cm2-item-primary select:focus,
.cm2-item-secondary input:focus,
.cm2-item-secondary select:focus {
border-color: #E8663A;
box-shadow: 0 0 0 3px var(--c-ember-soft);
}
.cm2-field-qty-wrap {
display: flex;
align-items: center;
gap: 6px;
}
.cm2-field-qty-wrap input {
flex: 1;
text-align: right;
font-family: var(--mono);
font-weight: 700;
}
.cm2-field-unit {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 600;
color: var(--lxg-ink-45);
}
/* Carrito vacío — colapsar body cuando está pendiente */
.cm2-stage--cart[data-state="pending"] .cm2-cart-list {
display: none;
}
.cm2-stage--cart[data-state="pending"] .cm2-stage-head {
margin-bottom: 0;
}
/* ─── Stage state indicators ─── */
.cm2-stage-num {
transition: background var(--lxg-dur), color var(--lxg-dur);
}
/* Done: ember + checkmark */
.cm2-stage[data-state="done"] .cm2-stage-num {
background: var(--c-ember);
color: transparent;
position: relative;
}
.cm2-stage[data-state="done"] .cm2-stage-num::after {
content: "";
position: absolute;
width: 5px;
height: 9px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg) translateY(-1px);
left: 50%;
top: 50%;
margin-left: -3px;
margin-top: -5px;
}
/* Pending: muted */
.cm2-stage[data-state="pending"] .cm2-stage-num {
background: rgba(38,38,38,.12);
color: rgba(38,38,38,.30);
}
.cm2-stage[data-state="pending"] .cm2-stage-title {
color: var(--lxg-ink-45);
}
.cm2-stage[data-state="pending"] .cm2-stage-sub {
opacity: .6;
}
/* Cart status line dots */
.cm2-status-line {
display: inline-flex;
align-items: center;
gap: 6px;
}
.cm2-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
}
.cm2-dot--ok { background: #22A55A; }
.cm2-dot--warn { background: #D4882A; }
/* FOOTER fijo */
.cm2-foot {
position: sticky;
bottom: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 20px;
background: #fff;
border: 1px solid rgba(38,38,38,.08);
border-radius: var(--lxg-r-lg);
box-shadow: 0 4px 20px rgba(26,20,16,.10), 0 1px 3px rgba(26,20,16,.06);
margin-top: 8px;
z-index: 10;
}
.cm2-foot-summary {
display: flex;
flex-direction: column;
gap: 1px;
}
.cm2-foot-total {
font-family: var(--serif);
font-size: 20px;
font-weight: 700;
color: var(--lxg-ink);
letter-spacing: -0.025em;
line-height: 1.1;
}
/* Confirm modal extras */
.cm2-confirm-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 14px;
background: rgba(38,38,38,.025);
border-radius: var(--lxg-r-lg);
margin-bottom: 12px;
}
.cm2-confirm-stat {
display: flex;
flex-direction: column;
gap: 4px;
text-align: center;
}
.cm2-confirm-stat-v {
font-family: var(--serif);
font-size: 22px;
font-weight: 600;
color: var(--lxg-ink);
letter-spacing: -0.02em;
}
.cm2-confirm-info {
font-size: 12px;
color: var(--lxg-ink-60);
line-height: 1.5;
margin-bottom: 8px;
}
.cm2-confirm-info strong {
font-family: var(--mono);
color: var(--lxg-ink);
}
.cm2-confirm-warn {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
background: var(--c-amber-soft);
border: 1px solid var(--c-amber-line);
color: var(--c-amber-ink);
border-radius: var(--lxg-r-md);
font-size: 12px;
margin-top: 8px;
}
.cm2-confirm-warn--info {
background: rgba(59,130,196,.08);
border-color: rgba(59,130,196,.22);
color: #2A5A8C;
}
.cm2-confirm-warn svg { flex-shrink: 0; margin-top: 1px; }
/* "Ver todos" (legacy) */
.cm2-vertodos {
background: rgba(38,38,38,.02);
border: 1px dashed rgba(38,38,38,.18);
border-radius: var(--lxg-r-xl);
padding: 20px 22px;
margin-top: 4px;
}
.cm2-vertodos-tools {
display: flex;
align-items: flex-end;
gap: 12px;
margin-bottom: 14px;
}
.cm2-check {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
font-size: 12px;
color: var(--lxg-ink-60);
cursor: pointer;
}
.cm2-empty {
padding: 24px;
text-align: center;
color: var(--lxg-ink-45);
font-size: 12px;
}
.cm2-resumen-legacy {
margin-top: 12px;
padding: 10px;
font-size: 12px;
color: var(--lxg-ink-60);
}
.cm2-vertodos-info { flex: 1; min-width: 0; }
.cm2-vertodos-info .cm2-stage-sub strong {
color: var(--lxg-ink);
font-weight: 600;
}
.cm2-vertodos-note {
margin-top: 8px;
padding: 8px 12px;
background: var(--c-amber-soft);
border-radius: var(--lxg-r-md);
font-size: 11px;
font-weight: 500;
color: var(--c-amber-ink);
}
/* Responsive */
@media (max-width: 880px) {
.cm2-prep-grid { grid-template-columns: 1fr; }
.cm2-item-head { flex-direction: column; }
.cm2-item-right { flex-wrap: wrap; }
}
/* ─── v7.32.0 — Sugerencias inteligentes (chips) ─── */
.cm2-chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 14px;
}
.cm2-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px;
height: 30px;
border: 1px solid rgba(38,38,38,.10);
border-radius: var(--lxg-r-pill);
background: #fff;
font-family: var(--sans);
font-size: 11.5px;
font-weight: 600;
color: var(--lxg-ink-60);
cursor: pointer;
transition: border-color var(--lxg-dur-fast), background var(--lxg-dur-fast), color var(--lxg-dur-fast);
}
.cm2-chip svg { opacity: .65; flex-shrink: 0; }
.cm2-chip:hover:not(:disabled):not(.is-empty) {
border-color: rgba(232,102,58,.40);
background: var(--c-ember-soft);
color: var(--c-ember-ink);
}
.cm2-chip:hover svg { opacity: 1; }
.cm2-chip.is-empty,
.cm2-chip:disabled {
opacity: .45;
cursor: not-allowed;
}
.cm2-chip.is-active,
.cm2-chip.is-active .cm2-chip-label {
background: var(--lxg-ink);
color: #fff !important;
border-color: var(--lxg-ink);
}
.cm2-chip.is-active svg { opacity: 1; color: #fff !important; stroke: #fff !important; }
.cm2-chip.is-active .cm2-chip-count {
background: rgba(255,255,255,.20);
color: #fff !important;
}
.cm2-chip-label { color: inherit; }
.cm2-chip-count {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
background: rgba(38,38,38,.08);
color: var(--lxg-ink-60);
border-radius: var(--lxg-r-pill);
min-width: 16px;
text-align: center;
}
.cm2-chip--danger:hover:not(:disabled):not(.is-empty) {
border-color: rgba(224,82,82,.40);
background: var(--c-red-soft);
color: var(--c-red-ink);
}
/* ═══════════════════════════════════════════════════════════════
v7.41.0 (re-restaurado v7.51.0) — CARGA MASIVA · Animations pass
═══════════════════════════════════════════════════════════════ */
:root {
--cm2-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--cm2-ease-snap: cubic-bezier(0.32, 0.72, 0, 1);
--cm2-ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
--cm2-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--cm2-ease-exit: cubic-bezier(0.55, 0, 0.65, 0.2);
--cm2-d-instant: 120ms;
--cm2-d-micro: 220ms;
--cm2-d-normal: 320ms;
--cm2-d-medium: 420ms;
}
@keyframes cm2FadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cm2FadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cm2FadeRight { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cm2TagPop { 0% { opacity: 0; transform: scale(.7); } 60% { opacity: 1; transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes cm2ItemSpringIn { 0% { opacity: 0; transform: translateY(-10px) scale(.96); } 60% { opacity: 1; transform: translateY(0) scale(1.012); } 100% { transform: translateY(0) scale(1); } }
@keyframes cm2ItemGlow { 0% { box-shadow: 0 0 0 0 rgba(232,102,58,0); } 20% { box-shadow: 0 0 0 4px rgba(232,102,58,.22); } 100% { box-shadow: 0 0 0 0 rgba(232,102,58,0); } }
@keyframes cm2ChipPop { 0% { transform: scale(.92); opacity: .6; } 100% { transform: scale(1); opacity: 1; } }
@keyframes cm2BadgeMorph { 0% { transform: scale(.86); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes cm2BannerSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cm2ResultFadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cm2Spin { to { transform: rotate(360deg); } }
@keyframes cm2ItemExitStamp { 0% { opacity: 1; transform: translateX(0) scale(1); } 40% { opacity: 1; transform: translateX(0) scale(1.01); box-shadow: 0 0 0 3px rgba(34,165,90,.25); } 100% { opacity: 0; transform: translateX(20px) scale(.96); } }
@keyframes cm2CheckDraw { 0% { opacity: 0; transform: rotate(45deg) translateY(-1px) scale(.4); } 60% { opacity: 1; transform: rotate(45deg) translateY(-1px) scale(1.1); } 100% { opacity: 1; transform: rotate(45deg) translateY(-1px) scale(1); } }
@keyframes cm2EmptyPulse { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.08); opacity: 1; } }
/* PAGE ENTER — stagger por capas */
#page-carga.cm2.is-entering .cm2-head { animation: cm2FadeDown var(--cm2-d-normal) var(--cm2-ease-out) both; }
#page-carga.cm2.is-entering .cm2-head-tag { animation: cm2TagPop var(--cm2-d-micro) var(--cm2-ease-spring) 60ms both; transform-origin: center; }
#page-carga.cm2.is-entering .cm2-stage--prep { animation: cm2FadeUp var(--cm2-d-normal) var(--cm2-ease-out) 100ms both; }
#page-carga.cm2.is-entering .cm2-stage--add { animation: cm2FadeUp var(--cm2-d-medium) var(--cm2-ease-out) 180ms both; }
#page-carga.cm2.is-entering .cm2-stage--hist { animation: cm2FadeUp var(--cm2-d-medium) var(--cm2-ease-out) 300ms both; }
#page-carga.cm2.is-entering .cm2-col-right { animation: cm2FadeRight var(--cm2-d-medium) var(--cm2-ease-snap) 220ms both; }
#page-carga.cm2.is-entering .cm2-foot { animation: cm2FadeUp var(--cm2-d-medium) var(--cm2-ease-out) 420ms both; }
/* PREP collapse/expand */
.cm2-stage--prep { transition: padding var(--cm2-d-normal) var(--cm2-ease-snap); }
.cm2-prep-form, .cm2-prep-strip { transition: opacity var(--cm2-d-normal) var(--cm2-ease-out); }
.cm2-stage--prep[data-collapsed="true"] .cm2-prep-strip { animation: cm2FadeDown var(--cm2-d-normal) var(--cm2-ease-out) both; }
.cm2-stage--prep[data-collapsed="false"] .cm2-prep-form { animation: cm2FadeUp var(--cm2-d-normal) var(--cm2-ease-out) both; }
.cm2-prep-strip-edit { transition: background var(--cm2-d-instant), border-color var(--cm2-d-instant), color var(--cm2-d-instant), transform var(--cm2-d-instant) var(--cm2-ease-spring); }
.cm2-prep-strip-edit:active { transform: scale(.96); }
/* SEARCH */
#cm2-search { transition: border-color var(--cm2-d-micro), box-shadow var(--cm2-d-micro), background var(--cm2-d-micro); }
.cm2-search-clear { transition: background var(--cm2-d-instant), transform var(--cm2-d-instant) var(--cm2-ease-spring), opacity var(--cm2-d-instant); }
.cm2-search-clear:active { transform: scale(.9); }
.cm2-search-results > .cm2-search-item { animation: cm2ResultFadeUp var(--cm2-d-micro) var(--cm2-ease-out) both; }
.cm2-search-results > .cm2-search-item:nth-child(1) { animation-delay: 0ms; }
.cm2-search-results > .cm2-search-item:nth-child(2) { animation-delay: 30ms; }
.cm2-search-results > .cm2-search-item:nth-child(3) { animation-delay: 60ms; }
.cm2-search-results > .cm2-search-item:nth-child(4) { animation-delay: 90ms; }
.cm2-search-results > .cm2-search-item:nth-child(5) { animation-delay: 120ms; }
.cm2-search-results > .cm2-search-item:nth-child(6) { animation-delay: 150ms; }
.cm2-search-results > .cm2-search-item:nth-child(n+7) { animation-delay: 180ms; }
.cm2-search-item { transition: background var(--cm2-d-instant), transform var(--cm2-d-instant) var(--cm2-ease-spring); }
.cm2-search-item:active { transform: scale(.985); }
.cm2-search-item-add { transition: background var(--cm2-d-instant), transform var(--cm2-d-instant) var(--cm2-ease-spring); }
.cm2-search-item:hover .cm2-search-item-add { transform: scale(1.08); }
/* CHIPS */
.cm2-chip { animation: cm2ChipPop var(--cm2-d-micro) var(--cm2-ease-spring) both; transition: background var(--cm2-d-micro), border-color var(--cm2-d-micro), color var(--cm2-d-micro), transform var(--cm2-d-instant) var(--cm2-ease-spring), box-shadow var(--cm2-d-instant); }
.cm2-chips .cm2-chip:nth-child(1) { animation-delay: 0ms; }
.cm2-chips .cm2-chip:nth-child(2) { animation-delay: 50ms; }
.cm2-chips .cm2-chip:nth-child(3) { animation-delay: 100ms; }
.cm2-chip:hover:not(:disabled):not(.is-empty) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(38,38,38,.06); }
.cm2-chip:active:not(:disabled):not(.is-empty) { transform: translateY(0) scale(.97); }
.cm2-chip-count { transition: background var(--cm2-d-micro), color var(--cm2-d-micro); }
/* CART ITEM add/remove/hover */
.cm2-item { animation: cm2ItemSpringIn var(--cm2-d-medium) var(--cm2-ease-spring) both; transition: border-color var(--cm2-d-micro), background var(--cm2-d-micro), box-shadow var(--cm2-d-micro); }
.cm2-item.is-new { animation: cm2ItemSpringIn var(--cm2-d-medium) var(--cm2-ease-spring) both, cm2ItemGlow 900ms var(--cm2-ease-out) both; }
.cm2-item.is-removing {
animation: none !important;
overflow: hidden;
transition: opacity 240ms var(--cm2-ease-exit), transform 240ms var(--cm2-ease-exit), max-height 280ms var(--cm2-ease-exit) 40ms, padding 280ms var(--cm2-ease-exit) 40ms, margin 280ms var(--cm2-ease-exit) 40ms, border-width 280ms var(--cm2-ease-exit) 40ms;
opacity: 0;
transform: translateX(28px) scale(.97);
max-height: 0 !important;
padding-top: 0 !important; padding-bottom: 0 !important;
margin-top: 0 !important; margin-bottom: 0 !important;
border-width: 0 !important;
pointer-events: none;
}
.cm2-item-status { animation: cm2BadgeMorph 280ms var(--cm2-ease-spring) both; }
.cm2-item-stockprev { transition: opacity var(--cm2-d-micro); }
.cm2-item-secondary { transition: opacity var(--cm2-d-normal); }
.cm2-item-expand-btn { transition: color var(--cm2-d-instant), transform var(--cm2-d-instant) var(--cm2-ease-spring); }
.cm2-item-expand-btn:active { transform: scale(.97); }
.cm2-field-qty-wrap input { transition: border-color var(--cm2-d-micro), box-shadow var(--cm2-d-micro); }
.cm2-item .lxg-icon-btn--danger { transition: transform var(--cm2-d-instant) var(--cm2-ease-spring), background var(--cm2-d-instant), color var(--cm2-d-instant); }
.cm2-item .lxg-icon-btn--danger:hover { transform: rotate(90deg); }
.cm2-item .lxg-icon-btn--danger:active { transform: rotate(90deg) scale(.92); }
/* HISTORIAL rows */
.cm2-hist-row { animation: cm2FadeUp var(--cm2-d-normal) var(--cm2-ease-out) both; transition: border-color var(--cm2-d-micro), background var(--cm2-d-micro), transform var(--cm2-d-instant) var(--cm2-ease-spring); }
.cm2-hist-list > .cm2-hist-row:nth-child(1) { animation-delay: 0ms; }
.cm2-hist-list > .cm2-hist-row:nth-child(2) { animation-delay: 30ms; }
.cm2-hist-list > .cm2-hist-row:nth-child(3) { animation-delay: 60ms; }
.cm2-hist-list > .cm2-hist-row:nth-child(4) { animation-delay: 90ms; }
.cm2-hist-list > .cm2-hist-row:nth-child(n+5) { animation-delay: 120ms; }
.cm2-hist-row-repeat { transition: background var(--cm2-d-micro), border-color var(--cm2-d-micro), color var(--cm2-d-micro), transform var(--cm2-d-instant) var(--cm2-ease-spring); }
.cm2-hist-row-repeat:active { transform: scale(.96); }
.cm2-hist-row.is-pulse { animation: cm2ItemGlow 900ms var(--cm2-ease-out) both; }
/* FOOTER + CONFIRM */
.cm2-foot { transition: box-shadow var(--cm2-d-micro); }
.cm2-foot-total { transition: color var(--cm2-d-micro); }
#cm2-confirm { transition: background var(--cm2-d-micro), transform var(--cm2-d-instant) var(--cm2-ease-spring), box-shadow var(--cm2-d-micro), opacity var(--cm2-d-normal); }
#cm2-confirm:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26,20,16,.20); }
#cm2-confirm:not(:disabled):active { transform: translateY(0) scale(.98); }
#cm2-confirm.is-loading { pointer-events: none; opacity: .85; }
#cm2-confirm.is-loading svg { display: none; }
#cm2-confirm.is-loading::before { content: ""; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.32); border-top-color: #fff; border-radius: 50%; animation: cm2Spin .8s linear infinite; }
/* CONFIRM SUCCESS — cards fade-out stagger */
.cm2-cart-list.is-success > .cm2-item { animation: cm2ItemExitStamp 480ms var(--cm2-ease-exit) both; }
.cm2-cart-list.is-success > .cm2-item:nth-child(1) { animation-delay: 0ms; }
.cm2-cart-list.is-success > .cm2-item:nth-child(2) { animation-delay: 60ms; }
.cm2-cart-list.is-success > .cm2-item:nth-child(3) { animation-delay: 120ms; }
.cm2-cart-list.is-success > .cm2-item:nth-child(4) { animation-delay: 180ms; }
.cm2-cart-list.is-success > .cm2-item:nth-child(5) { animation-delay: 240ms; }
.cm2-cart-list.is-success > .cm2-item:nth-child(n+6) { animation-delay: 300ms; }
/* BANNER BORRADOR entrance */
.cm2-draft-banner:not([hidden]) { animation: cm2BannerSlide var(--cm2-d-medium) var(--cm2-ease-spring) both; }
/* STAGE NUMBER state transitions */
.cm2-stage-num, .cm2-stage[data-state="done"] .cm2-stage-num, .cm2-stage[data-state="pending"] .cm2-stage-num { transition: background var(--cm2-d-normal), color var(--cm2-d-normal); }
.cm2-stage[data-state="done"] .cm2-stage-num::after { animation: cm2CheckDraw var(--cm2-d-medium) var(--cm2-ease-out) both; transform-origin: center; }
/* EMPTY STATES */
.cm2-cart-empty, .cm2-cart-empty-smart, .cm2-hist-empty { animation: cm2FadeUp var(--cm2-d-medium) var(--cm2-ease-out) both; }
.cm2-cart-empty svg { animation: cm2EmptyPulse 2.4s var(--cm2-ease-in-out) infinite; transform-origin: center; }
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
#page-carga.cm2 *, #page-carga.cm2 *::before, #page-carga.cm2 *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
/* ═══ v7.53.0 — BANNER BORRADOR (info blue) ═══ */
.cm2-draft-banner {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: var(--c-info-soft);
border: 1px solid var(--c-info-line);
border-left: 3px solid var(--c-info);
border-radius: var(--lxg-r-md);
box-shadow: 0 2px 8px rgba(10,132,255,.10);
}
.cm2-draft-banner[hidden] { display: none !important; }
.cm2-draft-icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(10,132,255,.18);
color: var(--c-info);
flex-shrink: 0;
}
.cm2-draft-info { flex: 1; min-width: 0; }
.cm2-draft-title {
font-size: 13px;
font-weight: 600;
color: var(--lxg-ink);
line-height: 1.2;
}
.cm2-draft-sub {
font-size: 11px;
color: var(--lxg-ink-60);
margin-top: 1px;
}
.cm2-draft-sub strong {
font-family: var(--mono);
font-weight: 700;
color: var(--lxg-ink);
}
.cm2-draft-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
/* v7.56.0 — Item placeholder mientras carga stockData */
.cm2-item--loading {
opacity: .55;
background: rgba(38,38,38,.02) !important;
border-style: dashed !important;
}
.cm2-item--loading .cm2-item-name::before {
content: "";
display: inline-block;
width: 10px; height: 10px;
border: 2px solid rgba(38,38,38,.20);
border-top-color: var(--c-info, #0A84FF);
border-radius: 50%;
margin-right: 6px;
vertical-align: -1px;
animation: cm2Spin .8s linear infinite;
}
/* ═══ v7.60.0 — Suggest header + close button styling ═══ */
.cm2-suggest-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px 10px 12px;
margin-bottom: 4px;
border-bottom: 1px solid rgba(38,38,38,.06);
}
.cm2-suggest-head .lxg-eyebrow {
flex: 1;
min-width: 0;
}
.cm2-suggest-close {
display: inline-flex;
align-items: center;
gap: 5px;
height: 24px;
padding: 0 9px 0 8px;
background: rgba(38,38,38,.06);
border: 1px solid transparent;
border-radius: var(--lxg-r-sm, 6px);
font-family: var(--sans);
font-size: 10.5px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--lxg-ink-60);
cursor: pointer;
flex-shrink: 0;
/* Alinear con la columna del + (que está a 12px del borde derecho) */
margin-right: 0;
transition:
background var(--lxg-dur-fast, .14s) ease,
color var(--lxg-dur-fast, .14s) ease,
transform var(--lxg-dur-fast, .14s) ease;
}
.cm2-suggest-close svg { opacity: .7; }
.cm2-suggest-close:hover {
background: rgba(38,38,38,.12);
color: var(--lxg-ink);
}
.cm2-suggest-close:hover svg { opacity: 1; }
.cm2-suggest-close:active { transform: scale(.94); }
/* ═══ v7.60.0 — Fix número visible cuando stage está "done" ═══ */
.cm2-stage[data-state="done"] .cm2-stage-num {
font-size: 0 !important; /* Oculta completamente el número, solo se ve el ::after check */
}
/* ═══ v7.60.0 — Stage dots de "active" se ven como "pending" (neutral, no oscuro) ═══ */
.cm2-stage[data-state="active"] .cm2-stage-num {
background: rgba(38,38,38,.12);
color: rgba(38,38,38,.55);
}
.cm2-stage[data-state="active"] .cm2-stage-title {
color: var(--lxg-ink);
}
/* v7.61.0 — Badge "× N entradas" cuando hay items duplicados del mismo prodId */
.cm2-item-group-badge {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 7px;
margin-left: 8px;
background: var(--c-info-soft, rgba(10,132,255,.10));
color: var(--c-info-ink, #0058B5);
border: 1px solid var(--c-info-line, rgba(10,132,255,.28));
border-radius: 999px;
font-family: var(--mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .04em;
text-transform: lowercase;
vertical-align: middle;
}
/* ─── ≤1280px: padding más compacto, gap interno ─── */
@media (max-width: 1280px) {
#page-carga.cm2 { padding: 24px 22px 80px !important; gap: 18px; }
.cm2-grid { gap: 16px; }
.cm2-col-left { gap: 16px; }
}
/* ─── ≤1024px: grid colapsa a 1 columna · orden: prep → add → cart → hist ─── */
@media (max-width: 1024px) {
.cm2-grid {
display: flex !important;
flex-direction: column;
gap: 16px;
}
/* display:contents "aplana" las columnas para que los stages sean
children directos del grid y se les pueda asignar order */
.cm2-col-left,
.cm2-col-right {
display: contents;
position: static;
height: auto;
max-height: none;
}
/* Forzar full width — display:contents puede dejar los stages con su width intrínseco */
.cm2-grid > .cm2-col-left > .cm2-stage,
.cm2-grid > .cm2-col-right > .cm2-stage,
.cm2-grid .cm2-stage {
width: 100% !important;
max-width: 100% !important;
flex: initial !important;
align-self: stretch !important;
box-sizing: border-box;
}
.cm2-stage--prep { order: 1; }
.cm2-stage--add { order: 2; }
.cm2-stage--cart { order: 3; }
.cm2-stage--hist { order: 4; }
/* Carrito sin sticky/scroll interno en este viewport */
.cm2-col-right .cm2-stage--cart {
flex: initial !important;
max-height: none;
overflow: visible;
padding: 22px 24px;
}
.cm2-col-right .cm2-cart-list {
overflow-y: visible;
max-height: none;
padding: 0;
}
.cm2-col-right .cm2-stage--cart .cm2-cart-head-sticky {
position: static;
padding: 0 0 14px 0;
border-radius: 0;
}
}
/* ─── ≤768px: head compacto, strip mono, cards más densas ─── */
@media (max-width: 768px) {
#page-carga.cm2 { padding: 18px 14px 90px !important; gap: 14px; }
/* Header */
.cm2-head { flex-direction: column; align-items: stretch; gap: 10px; }
.cm2-head-context-wrap { flex-wrap: wrap; }
.cm2-head-context { font-size: 12.5px; }
.cm2-head-actions { justify-content: flex-end; }
.cm2-head-actions .lxg-btn { padding: 0 10px; font-size: 11px; }
/* Banner borrador */
.cm2-draft-banner { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
.cm2-draft-actions { justify-content: flex-end; }
/* Stage cards */
.cm2-stage { padding: 16px 14px; }
.cm2-stage-head { margin-bottom: 12px; gap: 8px; }
.cm2-stage-title { font-size: 13.5px; }
.cm2-stage-sub { font-size: 10.5px; }
.cm2-prep-grid { grid-template-columns: 1fr; gap: 10px; }
.cm2-prep-strip { padding: 10px 12px; flex-wrap: nowrap; }
.cm2-prep-strip-content { font-size: 11.5px; }
.cm2-prep-strip-meta { font-size: 10px; }
/* Search results */
#cm2-search { height: 36px !important; padding: 0 32px 0 32px !important; font-size: 12px !important; }
.cm2-search-results { max-height: 240px; }
/* Chips wrap mejor */
.cm2-chips { gap: 6px; margin-top: 10px; }
.cm2-chip { padding: 5px 9px; font-size: 10.5px; }
/* Carrito item card — primary stack */
.cm2-item { padding: 12px 14px; }
.cm2-item-head { flex-wrap: wrap; gap: 8px; }
.cm2-item-right { gap: 6px; width: 100%; justify-content: space-between; }
.cm2-item-name { font-size: 12.5px; }
.cm2-item-primary {
flex-wrap: wrap;
gap: 10px;
}
.cm2-item-primary .cm2-field { width: 100%; max-width: 100%; }
.cm2-item-venc-derived,
.cm2-venc-pill { margin: 0; align-self: flex-start; }
.cm2-item-expand-btn { margin-left: auto; }
/* Secondary fields stack vertical */
.cm2-item-secondary {
grid-template-columns: 1fr;
gap: 10px;
margin-top: 12px;
padding-top: 12px;
}
/* Hist filters stack */
.cm2-hist-filters { grid-template-columns: 1fr; gap: 6px; }
/* Footer compacto */
.cm2-foot { padding: 12px 16px; gap: 10px; flex-wrap: wrap; }
.cm2-foot-summary { flex: 1; min-width: 0; }
.cm2-foot-total { font-size: 16px; }
#cm2-confirm { padding: 0 14px; font-size: 12.5px; }
}
/* ─── ≤560px: full mobile, mínimo padding ─── */
@media (max-width: 560px) {
#page-carga.cm2 { padding: 14px 10px 90px !important; gap: 12px; }
.cm2-stage { padding: 14px 12px; border-radius: 12px; }
.cm2-head-tag { font-size: 11.5px; padding: 0 9px; height: 24px; }
.cm2-item { padding: 11px 12px; }
.cm2-item-status { font-size: 9px; padding: 2px 6px; }
.cm2-item-stockprev { font-size: 10px; }
.cm2-item-group-badge { font-size: 9px; }
.cm2-foot-total { font-size: 15px; }
/* Modal confirm — overflow safer en mobile */
.lxg-modal { max-width: calc(100vw - 20px); }
}
/* v7.62.0 — Mobile fix: footer no se solape con chat FAB */
@media (max-width: 768px) {
.cm2-foot {
/* Reservar espacio a la derecha para el FAB circular del chat (52px + 24 margen) */
padding-right: 78px !important;
}
}
@media (max-width: 560px) {
.cm2-foot {
/* En pantallas muy pequeñas, mejor sticky bottom: 76px (encima del FAB) */
bottom: 76px !important;
padding-right: 16px !important;
}
/* Padding extra al fondo del page para compensar el footer movido + FAB */
#page-carga.cm2 { padding-bottom: 140px !important; }
}
/* ═══ v7.64.0 — Overlay edición gasto/retiro de caja (cc-edit-egreso-*) ═══ */
.cc-edit-egreso-overlay {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(26, 20, 16, .42);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
animation: ccEgresoOvIn .22s cubic-bezier(.16,1,.3,1) both;
}
@keyframes ccEgresoOvIn { from { opacity: 0; } to { opacity: 1; } }
.cc-edit-egreso-box {
width: 100%;
max-width: 420px;
background: #fff;
border: 1px solid rgba(38,38,38,.10);
border-radius: 16px;
padding: 22px 22px 18px;
box-shadow:
0 4px 12px rgba(26,20,16,.10),
0 24px 60px rgba(26,20,16,.20);
animation: ccEgresoBoxIn .28s cubic-bezier(.34,1.2,.64,1) both;
box-sizing: border-box;
}
@keyframes ccEgresoBoxIn {
from { opacity: 0; transform: translateY(8px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.cc-edit-egreso-title {
font-family: var(--serif, Georgia, serif);
font-size: 18px;
font-weight: 600;
color: #1A1410;
letter-spacing: -0.015em;
margin-bottom: 4px;
}
.cc-edit-egreso-desc {
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
color: rgba(26,20,16,.60);
margin-bottom: 16px;
}
.cc-edit-egreso-lbl {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(26,20,16,.50);
margin-top: 12px;
margin-bottom: 6px;
}
.cc-edit-egreso-input {
width: 100%;
height: 38px;
padding: 0 12px;
border: 1px solid rgba(38,38,38,.12);
border-radius: 10px;
background: rgba(38,38,38,.025);
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
color: #1A1410;
outline: none;
box-sizing: border-box;
transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.cc-edit-egreso-input:focus {
background: #fff;
border-color: #E8663A;
box-shadow: 0 0 0 3px rgba(232,102,58,.12);
}
.cc-edit-egreso-btns {
display: flex;
gap: 8px;
margin-top: 20px;
}
.cc-edit-egreso-btns .btn-ghost,
.cc-edit-egreso-btns .btn-prime {
height: 38px;
border-radius: 10px;
font-family: var(--sans);
font-size: 12.5px;
font-weight: 600;
letter-spacing: -0.005em;
cursor: pointer;
transition: background .14s ease, border-color .14s ease, color .14s ease, transform .12s cubic-bezier(.34,1.2,.64,1);
}
.cc-edit-egreso-btns .btn-ghost {
background: transparent;
border: 1px solid rgba(38,38,38,.14);
color: rgba(26,20,16,.70);
}
.cc-edit-egreso-btns .btn-ghost:hover {
background: rgba(38,38,38,.04);
color: #1A1410;
}
.cc-edit-egreso-btns .btn-prime {
background: linear-gradient(158deg, #333 0%, #262626 100%);
border: 1px solid rgba(0,0,0,.4);
color: #fff;
box-shadow: 0 2px 8px rgba(26,20,16,.18);
}
.cc-edit-egreso-btns .btn-prime:hover {
background: linear-gradient(158deg, #404040 0%, #2e2e2e 100%);
box-shadow: 0 4px 14px rgba(26,20,16,.24);
}
.cc-edit-egreso-btns .btn-ghost:active,
.cc-edit-egreso-btns .btn-prime:active {
transform: scale(.97);
}
/* ═══ v7.65.0 — Historial del cliente: edit/delete actions ═══ */
.cd-hist-row {
position: relative;
transition: background .14s ease;
}
.cd-hist-row:hover {
background: rgba(38,38,38,.025);
}
.cd-hist-actions {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 4px;
opacity: 0;
pointer-events: none;
transition: opacity .16s ease;
background: linear-gradient(to right, transparent 0%, #fff 30%);
padding-left: 24px;
padding-right: 6px;
border-radius: 8px;
}
.cd-hist-row:hover .cd-hist-actions {
opacity: 1;
pointer-events: auto;
}
.cd-hist-action {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(38,38,38,.10);
background: #fff;
color: rgba(26,20,16,.55);
border-radius: 6px;
cursor: pointer;
padding: 0;
transition: background .12s ease, color .12s ease, border-color .12s ease, transform .12s cubic-bezier(.34,1.2,.64,1);
}
.cd-hist-action:hover {
background: rgba(38,38,38,.06);
color: #1A1410;
border-color: rgba(38,38,38,.20);
}
.cd-hist-edit:hover {
background: var(--c-info-soft, rgba(10,132,255,.10));
color: var(--c-info, #0A84FF);
border-color: var(--c-info-line, rgba(10,132,255,.28));
}
.cd-hist-del:hover {
background: rgba(224,82,82,.10);
color: #A83030;
border-color: rgba(224,82,82,.28);
}
.cd-hist-action:active { transform: scale(.92); }
/* Touch / mobile: actions siempre visibles (no hay hover) */
@media (hover: none) {
.cd-hist-actions {
opacity: 1;
pointer-events: auto;
background: transparent;
padding-left: 0;
}
}
/* ═══ v7.68.0 — Nueva Venta del drawer · input qty + unidad inline ═══ */
.cd-nv-item-qty-wrap {
display: inline-flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
background: #fafafa;
border: 1px solid rgba(26,20,16,.10);
border-radius: 7px;
padding: 0 8px 0 0;
transition: border-color .15s ease, background .15s ease;
}
.cd-nv-item-qty-wrap:focus-within {
border-color: #E8663A;
background: #fff;
box-shadow: 0 0 0 3px rgba(232,102,58,.10);
}
.cd-nv-item-qty-wrap .cd-nv-item-qty {
width: 60px !important;
border: none !important;
background: transparent !important;
text-align: right !important;
box-shadow: none !important;
padding: 0 0 0 8px;
}
.cd-nv-item-qty-wrap .cd-nv-item-qty::placeholder {
color: rgba(26,20,16,.30);
}
.cd-nv-item-unit {
font-family: var(--mono, monospace);
font-size: 10px;
font-weight: 700;
letter-spacing: .04em;
color: rgba(26,20,16,.50);
text-transform: lowercase;
}
/* Sutil indicador visual cuando hay item con qty=0 (todavía sin peso) */
.cd-nv-item:has(.cd-nv-item-qty[value=""]) .cd-nv-item-sub,
.cd-nv-item:has(.cd-nv-item-qty:placeholder-shown) .cd-nv-item-sub {
color: rgba(26,20,16,.35);
font-weight: 500;
}
/* ═══════════════════════════════════════════════════════════════
v7.70.0 · CIERRE DE CAJA — Confirmación operativa light
Card blanca, backdrop blur sutil, checkmark stroke-draw, ~1.1s
═══════════════════════════════════════════════════════════════ */
/* Preserved keyframe — used by .emp-more-menu */
@keyframes ccfx-card-in {
0% { opacity: 0; transform: translateY(40px) scale(.94); filter: blur(8px); }
50% { opacity: 1; transform: translateY(-4px) scale(1.01); filter: blur(0); }
100% { opacity: 1; transform: none; filter: blur(0); }
}
.cc-close-fx {
position: fixed;
inset: 0;
z-index: 99990;
background: rgba(38, 38, 38, .18);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
.cc-close-fx-card {
position: relative;
background: #fff;
border-radius: 16px;
box-shadow:
0 0 0 1px rgba(38,38,38,.045),
0 4px 16px rgba(38,38,38,.06),
0 16px 48px rgba(38,38,38,.08);
width: 420px;
max-width: calc(100vw - 32px);
padding: 24px 28px 20px;
display: flex;
flex-direction: column;
gap: 20px;
opacity: 0;
transform: scale(.97) translateY(6px);
transition: opacity .28s cubic-bezier(.16,1,.3,1),
transform .28s cubic-bezier(.16,1,.3,1);
}
/* Close button */
.cc-close-fx-x {
position: absolute;
top: 16px;
right: 16px;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid rgba(38,38,38,.10);
background: transparent;
color: rgba(38,38,38,.4);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s, transform .18s ease;
z-index: 2;
}
.cc-close-fx-x:hover {
background: rgba(38,38,38,.04);
color: #262626;
transform: rotate(90deg);
}
.cc-close-fx.show .cc-close-fx-check path {
stroke-dashoffset: 0;
}
/* Eyebrow */
.cc-close-fx-eyebrow {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(38,38,38,.32);
margin-top: -8px;
}
/* KPI strip */
.cc-close-fx-kpis {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
background: #F6F6F6;
border-radius: 10px;
padding: 18px 20px;
}
.cc-close-fx-kpi {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
text-align: center;
}
.cc-close-fx-kpi + .cc-close-fx-kpi {
border-left: 1px solid rgba(38,38,38,.06);
}
.cc-close-fx-kpi-l {
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 11px;
font-weight: 500;
color: rgba(38,38,38,.38);
letter-spacing: .01em;
}
.cc-close-fx-kpi-v {
font-family: var(--serif, 'Fraunces', serif);
font-size: 22px;
font-weight: 600;
color: #262626;
letter-spacing: -.015em;
line-height: 1;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
}
/* Diferencia color states */
.ccfx-dif-zero { color: rgba(38,38,38,.35) !important; }
.ccfx-dif-pos { color: #22A55A !important; }
.ccfx-dif-neg { color: #E05252 !important; }
.cc-close-fx-sub {
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 12px;
color: rgba(38,38,38,.32);
flex: 1;
margin: 0;
}
/* ─── Responsive ─── */
@media (max-width: 480px) {
.cc-close-fx-card { padding: 20px; width: 100%; }
.cc-close-fx-kpis {
grid-template-columns: 1fr;
gap: 12px;
padding: 14px 16px;
}
.cc-close-fx-kpi { text-align: left; align-items: flex-start; }
.cc-close-fx-kpi + .cc-close-fx-kpi {
border-left: none;
border-top: 1px solid rgba(38,38,38,.06);
padding-top: 12px;
}
.cc-close-fx-kpi-v { font-size: 20px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.cc-close-fx,
.cc-close-fx-card { transition-duration: 0.01ms !important; }
}
/* ═══════════════════════════════════════════════════════════════
v7.71.0 · LOGIN — Identity-First (Mac OS style)
Floor #F0EEEF · 2 modos: pick (avatares) → auth (password)
═══════════════════════════════════════════════════════════════ */
#login-screen.lp2 {
position: fixed;
inset: 0;
z-index: 9999;
background: #F0EEEF;
display: grid;
grid-template-rows: auto 1fr auto;
padding: 24px 32px;
overflow: hidden;
font-family: var(--sans, 'Inter Tight', sans-serif);
color: #262626;
}
/* ── Identity bar ── */
.lp2-identity {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
opacity: 0;
animation: lp2FadeUp .55s cubic-bezier(.16,1,.3,1) .05s both;
}
.lp2-brand {
display: flex;
align-items: center;
gap: 10px;
}
.lp2-brand-mark {
width: 26px;
height: 26px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(38,38,38,.10);
}
.lp2-brand-name {
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 13px;
font-weight: 600;
color: #262626;
letter-spacing: -.005em;
}
.lp2-brand-name em {
font-style: italic;
font-weight: 400;
color: rgba(38,38,38,.5);
letter-spacing: .005em;
}
.lp2-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
line-height: 1.2;
}
.lp2-clock {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 13px;
font-weight: 600;
color: #262626;
letter-spacing: .02em;
font-variant-numeric: tabular-nums;
}
.lp2-date {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 500;
color: rgba(38,38,38,.4);
text-transform: uppercase;
letter-spacing: .14em;
}
/* ── Stage ── */
.lp2-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
min-height: 0;
}
/* ───── MODO 1: PICK ───── */
.lp2-pick {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
width: 100%;
max-width: 520px;
}
.lp2-greeting {
font-family: var(--serif, 'Fraunces', serif);
font-size: 32px;
font-weight: 500;
letter-spacing: -.025em;
color: #262626;
margin: 0 0 6px;
text-align: center;
opacity: 0;
animation: lp2FadeUp .6s cubic-bezier(.16,1,.3,1) .14s both;
}
.lp2-greeting-sub {
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 13px;
font-weight: 400;
color: rgba(38,38,38,.45);
margin: 0 0 36px;
text-align: center;
opacity: 0;
animation: lp2FadeUp .55s cubic-bezier(.16,1,.3,1) .22s both;
}
.lp2-avatars {
display: flex;
gap: 16px;
justify-content: center;
}
/* Avatar card */
.lp2-avatar-card {
width: 148px;
height: 172px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
background: #fff;
border: 1px solid transparent;
border-radius: 16px;
cursor: pointer;
padding: 20px;
box-shadow:
0 0 0 1px rgba(38,38,38,.045),
0 2px 8px rgba(38,38,38,.04),
0 8px 24px rgba(38,38,38,.05);
transition:
transform .22s cubic-bezier(.16,1,.3,1),
border-color .18s ease,
box-shadow .22s ease;
opacity: 0;
font-family: inherit;
}
.lp2-avatar-card:nth-child(1) { animation: lp2FadeUp .55s cubic-bezier(.16,1,.3,1) .32s both; }
.lp2-avatar-card:nth-child(2) { animation: lp2FadeUp .55s cubic-bezier(.16,1,.3,1) .40s both; }
.lp2-avatar-card:hover {
transform: translateY(-4px);
border-color: rgba(232,102,58,.32);
box-shadow:
0 0 0 1px rgba(232,102,58,.18),
0 6px 16px rgba(38,38,38,.06),
0 16px 40px rgba(232,102,58,.08);
}
.lp2-avatar-card:hover .lp2-avatar-circle {
background: linear-gradient(158deg, #E8663A, #C84F1F);
color: #fff;
box-shadow: 0 4px 12px rgba(232,102,58,.28);
}
.lp2-avatar-card:active { transform: translateY(-2px) scale(.98); }
.lp2-avatar-card:focus-visible {
outline: 2px solid #E8663A;
outline-offset: 4px;
}
/* Avatar circle */
.lp2-avatar-circle {
width: 76px;
height: 76px;
border-radius: 50%;
display: grid;
place-items: center;
background: #F6F6F6;
color: #262626;
font-family: var(--serif, 'Fraunces', serif);
font-size: 34px;
font-weight: 500;
letter-spacing: -.02em;
line-height: 1;
transition: background .22s ease, color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.16,1,.3,1);
flex-shrink: 0;
user-select: none;
}
.lp2-avatar-circle--lg {
width: 84px;
height: 84px;
font-size: 38px;
background: linear-gradient(158deg, #E8663A, #C84F1F);
color: #fff;
box-shadow:
0 4px 14px rgba(232,102,58,.30),
inset 0 1px 0 rgba(255,255,255,.18);
}
.lp2-avatar-name {
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 14px;
font-weight: 600;
color: #262626;
letter-spacing: -.005em;
text-align: center;
}
/* Exit anim para card no seleccionado */
[data-mode="auth"] .lp2-avatar-card:not(.is-picked) {
animation: lp2AvatarFadeOut .2s cubic-bezier(.4,0,1,1) both;
}
[data-mode="auth"] .lp2-avatar-card.is-picked {
animation: lp2AvatarPickedExit .24s cubic-bezier(.4,0,1,1) both;
}
/* ───── MODO 2: AUTH ───── */
.lp2-auth {
width: 100%;
max-width: 360px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
position: relative;
opacity: 0;
transform: translateY(8px);
transition: opacity .42s cubic-bezier(.16,1,.3,1), transform .42s cubic-bezier(.16,1,.3,1);
}
.lp2-auth.is-in {
opacity: 1;
transform: translateY(0);
}
/* Back button */
.lp2-back {
position: absolute;
top: -42px;
left: 0;
display: inline-flex;
align-items: center;
gap: 5px;
background: transparent;
border: none;
color: rgba(38,38,38,.5);
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 12px;
font-weight: 600;
letter-spacing: .005em;
cursor: pointer;
padding: 6px 8px;
border-radius: 7px;
transition: color .15s, background .15s, transform .15s;
}
.lp2-back:hover {
color: #262626;
background: rgba(38,38,38,.04);
}
.lp2-back:hover svg { transform: translateX(-2px); }
.lp2-back svg { transition: transform .15s ease; }
.lp2-auth-avatar {
margin-bottom: 18px;
animation: lp2AvatarLand .42s cubic-bezier(.34,1.56,.64,1) both;
}
.lp2-auth-hello {
font-family: var(--serif, 'Fraunces', serif);
font-size: 26px;
font-weight: 500;
letter-spacing: -.025em;
color: #262626;
margin: 0 0 4px;
text-align: center;
}
.lp2-auth-hello span { color: #E8663A; }
.lp2-auth-sub {
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 12.5px;
font-weight: 400;
color: rgba(38,38,38,.45);
margin: 0 0 22px;
text-align: center;
}
/* Local chips */
.lp2-locals {
display: flex;
gap: 8px;
margin-bottom: 18px;
background: rgba(38,38,38,.04);
padding: 4px;
border-radius: 10px;
}
.lp2-local-chip {
display: inline-flex;
align-items: center;
gap: 7px;
background: transparent;
border: none;
border-radius: 7px;
padding: 8px 14px;
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 12.5px;
font-weight: 600;
letter-spacing: -.005em;
color: rgba(38,38,38,.55);
cursor: pointer;
transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.lp2-local-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(38,38,38,.25);
transition: background .15s, box-shadow .15s;
}
.lp2-local-chip:hover {
color: #262626;
background: rgba(38,38,38,.03);
}
.lp2-local-chip.is-active {
background: #fff;
color: #262626;
box-shadow: 0 1px 3px rgba(38,38,38,.08);
}
.lp2-local-chip.is-active .lp2-local-dot {
background: #22A55A;
box-shadow: 0 0 0 3px rgba(34,165,90,.18);
}
.lp2-local-chip:focus-visible {
outline: 2px solid #E8663A;
outline-offset: 2px;
}
/* Password form */
.lp2-pass-form {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
}
.lp2-pass-wrap {
display: flex;
align-items: center;
gap: 8px;
background: #E7E5E6;
border: 1px solid transparent;
border-radius: 9px;
padding: 0 14px;
height: 46px;
transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* v7.92.2 · Focus state limpio
Antes: border gris .10 + box-shadow ember .10 3px → el halo ember se veía
como un "rectángulo ember dentro del input" (bug visual reportado).
Ahora: border ember sutil + sin halo → indicador limpio. */
.lp2-pass-wrap:focus-within {
background: #fff;
border-color: rgba(232,102,58,.42);
box-shadow: none;
}
/* Password field: input + dots overlay */
.lp2-pass-field {
position: relative;
flex: 1;
min-width: 0;
height: 100%;
display: flex;
align-items: center;
}
.lp2-pass-field input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
background: transparent;
outline: none;
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 14px;
font-weight: 500;
color: transparent;
caret-color: transparent; /* v7.75.1: ocultar caret titilante detrás de los dots */
letter-spacing: .04em;
padding: 0;
}
.lp2-pass-field input::placeholder {
color: rgba(38,38,38,.32);
font-weight: 400;
letter-spacing: -.005em;
}
.lp2-pass-field input::-ms-reveal,
.lp2-pass-field input::-ms-clear { display: none; }
/* Cuando se revela la contraseña: texto visible + caret visible + dots ocultos */
.lp2-pass-wrap.lp2-pass-revealed .lp2-pass-field input {
color: #262626;
caret-color: #262626;
}
.lp2-pass-wrap.lp2-pass-revealed .lp2-dots {
display: none;
}
/* Dots overlay */
.lp2-dots {
position: relative;
display: flex;
align-items: center;
gap: 8px;
pointer-events: none;
height: 100%;
}
.lp2-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #262626;
flex-shrink: 0;
display: inline-block;
animation: lp2DotIn .42s cubic-bezier(.34,1.56,.64,1) both;
transform-origin: center;
}
.lp2-dot.exit {
animation: lp2DotOut .24s cubic-bezier(.4,0,1,1) both;
}
@keyframes lp2DotIn {
0% { opacity: 0; transform: scale(.2) translateY(-4px); }
55% { opacity: 1; transform: scale(1.22) translateY(0); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes lp2DotOut {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(.3); }
}
.lp2-eye {
background: transparent;
border: none;
cursor: pointer;
color: rgba(38,38,38,.32);
padding: 4px;
display: flex;
align-items: center;
transition: color .15s;
}
.lp2-eye:hover { color: #262626; }
.lp2-caps {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: #D4882A;
align-self: flex-start;
padding: 0 2px;
}
.lp2-caps svg { color: #D4882A; }
.lp2-err {
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 12px;
font-weight: 500;
color: #C62828;
text-align: center;
padding: 8px 12px;
background: rgba(224,82,82,.08);
border-radius: 8px;
margin: 2px 0 0;
}
/* CTA Lacca Nera (sobreescribe estilos legacy de .btn-login) */
.btn-login.lp2-cta {
width: 100%;
height: 46px;
background: linear-gradient(158deg, #333 0%, #262626 100%);
color: #fff;
border: none;
border-radius: 9px;
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 13.5px;
font-weight: 600;
letter-spacing: .005em;
cursor: pointer;
margin-top: 6px;
box-shadow: 0 2px 8px rgba(26,20,16,.18);
transition: opacity .15s ease, transform .1s ease, box-shadow .18s ease;
overflow: hidden;
position: relative;
}
.btn-login.lp2-cta:hover {
opacity: .92;
box-shadow: 0 4px 14px rgba(26,20,16,.24);
}
.btn-login.lp2-cta:active { transform: scale(.98); }
.btn-login.lp2-cta.loading {
pointer-events: none;
cursor: wait;
background: linear-gradient(158deg, #2a2a2a 0%, #1d1d1d 100%);
}
/* ── CTA loading state (v7.72.0) — label + wave dots + scan bar ── */
.lp2-cta-loading {
display: inline-flex;
align-items: center;
gap: 10px;
}
.lp2-cta-label {
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 13.5px;
font-weight: 600;
letter-spacing: -.005em;
color: rgba(255,255,255,.92);
animation: lp2CtaLabelIn .3s cubic-bezier(.16,1,.3,1) both;
}
.lp2-cta-wave {
display: inline-flex;
align-items: center;
gap: 4px;
padding-top: 1px;
}
.lp2-cta-wave span {
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255,255,255,.5);
animation: lp2CtaWave 1.1s cubic-bezier(.4,0,.6,1) infinite both;
}
.lp2-cta-wave span:nth-child(1) { animation-delay: 0s; }
.lp2-cta-wave span:nth-child(2) { animation-delay: .16s; }
.lp2-cta-wave span:nth-child(3) { animation-delay: .32s; }
@keyframes lp2CtaWave {
0%, 70%, 100% { opacity: .35; transform: translateY(0) scale(.85); }
35% { opacity: 1; transform: translateY(-2px) scale(1.18); background: #E8663A; }
}
@keyframes lp2CtaLabelIn {
from { opacity: 0; transform: translateY(2px); letter-spacing: .04em; }
to { opacity: 1; transform: translateY(0); letter-spacing: -.005em; }
}
/* Scan bar inferior ember */
.btn-login.lp2-cta.loading::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1.5px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(232,102,58,.0) 20%,
rgba(232,102,58,.85) 50%,
rgba(232,102,58,.0) 80%,
transparent 100%
);
background-size: 200% 100%;
background-position: -100% 0;
animation: lp2CtaScan 1.4s cubic-bezier(.4,0,.6,1) infinite;
border-radius: 0 0 9px 9px;
}
@keyframes lp2CtaScan {
0% { background-position: -100% 0; }
100% { background-position: 100% 0; }
}
/* Shake animation en error */
.lp2-pass-wrap.lp2-shake {
animation: lp2Shake .5s cubic-bezier(.36,.07,.19,.97) both;
border-color: rgba(224,82,82,.45);
box-shadow: 0 0 0 3px rgba(224,82,82,.10);
}
/* ── Footer ── */
.lp2-foot {
display: flex;
align-items: center;
justify-content: flex-end;
opacity: 0;
animation: lp2FadeUp .5s cubic-bezier(.16,1,.3,1) .6s both;
}
.lp2-version {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9px;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(38,38,38,.28);
}
/* ── Keyframes ── */
@keyframes lp2FadeUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes lp2AvatarFadeOut {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(.92); }
}
@keyframes lp2AvatarPickedExit {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(1.08); }
}
@keyframes lp2AvatarLand {
0% { opacity: 0; transform: translateY(-12px) scale(.85); }
60% { opacity: 1; transform: translateY(2px) scale(1.04); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lp2Shake {
10%, 90% { transform: translateX(-2px); }
20%, 80% { transform: translateX(3px); }
30%, 50%, 70% { transform: translateX(-6px); }
40%, 60% { transform: translateX(6px); }
}
/* ── Responsive ── */
@media (max-width: 560px) {
#login-screen.lp2 { padding: 16px 18px; }
.lp2-greeting { font-size: 26px; }
.lp2-greeting-sub { margin-bottom: 28px; font-size: 12px; }
.lp2-avatars { flex-direction: column; gap: 12px; width: 100%; max-width: 280px; }
.lp2-avatar-card { width: 100%; height: 84px; flex-direction: row; gap: 14px; padding: 14px 18px; justify-content: flex-start; }
.lp2-avatar-circle { width: 56px; height: 56px; font-size: 24px; }
.lp2-avatar-name { font-size: 15px; }
.lp2-auth-avatar { margin-bottom: 14px; }
.lp2-avatar-circle--lg { width: 68px; height: 68px; font-size: 30px; }
.lp2-auth-hello { font-size: 22px; }
.lp2-back { top: -36px; }
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
#login-screen.lp2 *,
#login-screen.lp2 *::before,
#login-screen.lp2 *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ═══════════════════════════════════════════════════════════════
v7.73.0 · DASHBOARD HERO — Identity-First Pattern
Hero protagonista con reloj live + saludo personalizado + status
═══════════════════════════════════════════════════════════════ */
#page-dashboard .nd-hero {
display: flex;
align-items: stretch;
gap: 48px;
padding: 24px 0 36px;
margin-bottom: 28px;
border-bottom: 1px solid rgba(38,38,38,.06);
position: relative;
}
/* ── Reloj live ── */
.nd-hero-clock {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
flex-shrink: 0;
opacity: 0;
animation: ndHeroFadeIn .55s cubic-bezier(.16,1,.3,1) .05s both;
}
.nd-hero-time {
font-family: var(--serif, 'Fraunces', serif);
font-size: 56px;
font-weight: 500;
letter-spacing: -.03em;
color: #262626;
line-height: 1;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
display: flex;
align-items: baseline;
}
.nd-hero-time-sep {
margin: 0 -2px;
opacity: .45;
animation: ndHeroBlink 1.4s ease-in-out infinite;
}
@keyframes ndHeroBlink {
0%, 100% { opacity: .45; }
50% { opacity: .9; }
}
.nd-hero-date {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(38,38,38,.40);
padding-left: 4px;
}
/* ── Meta: identidad + saludo + summary ── */
.nd-hero-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
}
/* Status pill (renderSaludo aplica clases .open/.break/.closed/.rest) */
.nd-hero-status {
display: inline-flex !important;
align-items: center;
gap: 7px;
width: auto !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(38,38,38,.55) !important;
align-self: flex-start;
padding: 0 0 0 14px !important;
position: relative;
opacity: 0;
animation: ndHeroFadeUp .6s cubic-bezier(.16,1,.3,1) .15s both;
}
.nd-hero-status::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(38,38,38,.32);
box-shadow: 0 0 0 3px rgba(38,38,38,.06);
}
.nd-hero-status.open::before {
background: #22A55A;
box-shadow: 0 0 0 3px rgba(34,165,90,.18);
animation: ndHeroPulse 2.4s ease-in-out infinite;
}
.nd-hero-status.break::before {
background: #D4882A;
box-shadow: 0 0 0 3px rgba(212,136,42,.20);
}
.nd-hero-status.closed::before {
background: rgba(38,38,38,.32);
box-shadow: 0 0 0 3px rgba(38,38,38,.08);
}
.nd-hero-status.rest::before {
background: #8B5CB8;
box-shadow: 0 0 0 3px rgba(139,92,184,.20);
}
@keyframes ndHeroPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(34,165,90,.18); }
50% { box-shadow: 0 0 0 5px rgba(34,165,90,.10); }
}
.nd-hero-local-tag {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(38,38,38,.32);
align-self: flex-start;
padding-left: 14px;
position: relative;
opacity: 0;
animation: ndHeroFadeUp .6s cubic-bezier(.16,1,.3,1) .22s both;
margin-top: -2px;
}
.nd-hero-local-tag::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 1px;
background: rgba(38,38,38,.28);
}
/* Greeting hero — typewriter animado por renderSaludo */
.nd-hero-greeting {
font-family: var(--serif, 'Fraunces', serif);
font-size: 38px;
font-weight: 500;
letter-spacing: -.025em;
color: #262626;
line-height: 1.1;
margin: 8px 0 4px;
white-space: nowrap;
overflow: hidden;
opacity: 0;
animation: ndHeroFadeUp .65s cubic-bezier(.16,1,.3,1) .3s both;
}
.nd-hero-greeting strong {
font-weight: 600;
color: #E8663A;
}
.nd-hero-greeting.saludo-typing::after {
content: "|";
display: inline-block;
margin-left: 2px;
color: #E8663A;
animation: ndHeroCaret .9s steps(1) infinite;
}
@keyframes ndHeroCaret {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
/* Summary: conteos del día con highlights */
.nd-hero-summary {
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 14px;
font-weight: 400;
color: rgba(38,38,38,.55);
line-height: 1.55;
margin: 0;
opacity: 0;
animation: ndHeroFadeUp .65s cubic-bezier(.16,1,.3,1) .55s both;
}
.nd-hero-summary b {
font-weight: 600;
color: #262626;
}
.nd-hero-summary a {
color: #E8663A;
cursor: pointer;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color .15s;
}
.nd-hero-summary a:hover { border-bottom-color: #E8663A; }
@keyframes ndHeroFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ndHeroFadeUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ═══ KPI strip (compacto, debajo del hero) ═══ */
#page-dashboard .nd-kpi-strip {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
align-items: center;
background: #fff;
border: 1px solid rgba(38,38,38,.045);
border-radius: 12px;
padding: 16px 24px;
margin-bottom: 28px;
box-shadow:
0 0 0 1px rgba(38,38,38,.02),
0 2px 8px rgba(38,38,38,.03);
opacity: 0;
animation: ndHeroFadeUp .55s cubic-bezier(.16,1,.3,1) .7s both;
}
.nd-kpi-stat {
display: flex;
flex-direction: column;
gap: 4px;
padding: 0 4px;
}
.nd-kpi-stat-l {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(38,38,38,.42);
}
.nd-kpi-stat-val {
font-family: var(--serif, 'Fraunces', serif);
font-size: 22px;
font-weight: 600;
color: #262626;
letter-spacing: -.015em;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
line-height: 1.1;
}
.nd-kpi-stat-delta {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .04em;
color: rgba(38,38,38,.42);
margin-top: 1px;
}
.nd-kpi-stat-delta.up { color: #1A7A45; }
.nd-kpi-stat-delta.down { color: #C62828; }
/* Reset legacy nd-kpi-badge background/padding cuando se combina con stat-delta */
.nd-kpi-stat-delta.nd-kpi-badge {
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
letter-spacing: .04em;
display: inline-block;
width: auto;
}
.nd-kpi-stat-sep {
width: 1px;
height: 32px;
background: rgba(38,38,38,.06);
margin: 0 8px;
align-self: center;
}
/* Responsive */
@media (max-width: 980px) {
#page-dashboard .nd-hero {
flex-direction: column;
gap: 20px;
padding: 20px 0 28px;
}
.nd-hero-time { font-size: 44px; }
.nd-hero-greeting { font-size: 30px; white-space: normal; }
#page-dashboard .nd-kpi-strip {
grid-template-columns: 1fr 1fr;
gap: 16px 0;
padding: 14px 18px;
}
.nd-kpi-stat-sep { display: none; }
.nd-kpi-stat {
padding: 8px 12px;
border-bottom: 1px solid rgba(38,38,38,.06);
}
.nd-kpi-stat:nth-child(odd) { border-right: 1px solid rgba(38,38,38,.06); }
.nd-kpi-stat:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 560px) {
.nd-hero-time { font-size: 38px; }
.nd-hero-greeting { font-size: 24px; }
#page-dashboard .nd-kpi-strip {
grid-template-columns: 1fr;
}
.nd-kpi-stat { border-right: none !important; }
.nd-kpi-stat:not(:last-child) { border-bottom: 1px solid rgba(38,38,38,.06); }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
#page-dashboard .nd-hero *,
#page-dashboard .nd-kpi-strip * {
animation-duration: 0.01ms !important;
}
.nd-hero-time-sep { animation: none !important; opacity: .7; }
.nd-hero-status.open::before { animation: none !important; }
}
/* ═══════════════════════════════════════════════════════════════
v7.74.0 · CIERRE DE CAJA · HERO Identity-First (unificado)
Reloj live + saludo + total protagonista + CTA Lacca Nera
═══════════════════════════════════════════════════════════════ */
#page-cierre .cc4-hero {
display: grid;
grid-template-columns: auto 1fr;
gap: 56px;
align-items: flex-start;
padding: 24px 0 36px;
margin-bottom: 32px;
border-bottom: 1px solid rgba(38,38,38,.06);
position: relative;
}
/* ── Columna izquierda: reloj live ── */
.cc4-hero-clock {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 24px;
flex-shrink: 0;
opacity: 0;
animation: ccHeroFadeIn .55s cubic-bezier(.16,1,.3,1) .05s both;
}
.cc4-hero-time {
font-family: var(--serif, 'Fraunces', serif);
font-size: 64px;
font-weight: 500;
letter-spacing: -.035em;
color: #262626;
line-height: 1;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
display: flex;
align-items: baseline;
}
.cc4-hero-time-sep {
margin: 0 -2px;
opacity: .45;
animation: ccHeroBlink 1.4s ease-in-out infinite;
}
@keyframes ccHeroBlink {
0%, 100% { opacity: .45; }
50% { opacity: .9; }
}
.cc4-hero-date {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10px;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(38,38,38,.40);
padding-left: 4px;
}
/* ── Columna derecha: identidad + acción ── */
.cc4-hero-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
max-width: 560px;
}
/* Status pill */
.cc4-hero-status {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(38,38,38,.55);
padding-left: 14px;
position: relative;
opacity: 0;
animation: ccHeroFadeUp .55s cubic-bezier(.16,1,.3,1) .15s both;
}
.cc4-hero-status-dot {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(38,38,38,.32);
box-shadow: 0 0 0 3px rgba(38,38,38,.06);
transition: background .2s, box-shadow .2s;
}
.cc4-hero-status[data-state="abierta"] .cc4-hero-status-dot {
background: #22A55A;
box-shadow: 0 0 0 3px rgba(34,165,90,.18);
animation: ccHeroPulse 2.4s ease-in-out infinite;
}
.cc4-hero-status[data-state="pendiente"] .cc4-hero-status-dot {
background: #D4882A;
box-shadow: 0 0 0 3px rgba(212,136,42,.20);
animation: ccHeroPulseWarn 1.6s ease-in-out infinite;
}
.cc4-hero-status[data-state="cerrada"] .cc4-hero-status-dot {
background: rgba(38,38,38,.32);
box-shadow: 0 0 0 3px rgba(38,38,38,.06);
}
@keyframes ccHeroPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(34,165,90,.18); }
50% { box-shadow: 0 0 0 5px rgba(34,165,90,.10); }
}
@keyframes ccHeroPulseWarn {
0%, 100% { box-shadow: 0 0 0 3px rgba(212,136,42,.20); }
50% { box-shadow: 0 0 0 5px rgba(212,136,42,.12); }
}
.cc4-hero-status-sep { color: rgba(38,38,38,.28); }
.cc4-hero-local-tag {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(38,38,38,.32);
padding-left: 14px;
position: relative;
margin-top: 8px;
opacity: 0;
animation: ccHeroFadeUp .55s cubic-bezier(.16,1,.3,1) .22s both;
}
.cc4-hero-local-tag::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 1px;
background: rgba(38,38,38,.28);
}
/* Saludo */
.cc4-hero-greeting {
font-family: var(--serif, 'Fraunces', serif);
font-size: 28px;
font-weight: 500;
letter-spacing: -.022em;
color: #262626;
line-height: 1.1;
margin: 14px 0 22px;
opacity: 0;
animation: ccHeroFadeUp .6s cubic-bezier(.16,1,.3,1) .3s both;
}
.cc4-hero-greeting em {
font-style: normal;
color: #E8663A;
}
/* Total protagonista */
.cc4-hero-total-block {
display: flex;
align-items: baseline;
gap: 16px;
flex-wrap: wrap;
opacity: 0;
animation: ccHeroFadeUp .65s cubic-bezier(.16,1,.3,1) .4s both;
}
.cc4-hero-total {
font-family: var(--serif, 'Fraunces', serif);
font-size: 64px;
font-weight: 500;
letter-spacing: -.035em;
color: #262626;
line-height: 1;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
}
.cc4-hero-delta {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
padding: 4px 10px;
border-radius: 999px;
background: rgba(38,38,38,.05);
color: rgba(38,38,38,.5);
}
.cc4-hero-delta svg { width: 12px; height: 12px; }
.cc4-hero-delta[data-state="positive"] {
background: rgba(34,165,90,.10);
color: #1A7A45;
}
.cc4-hero-delta[data-state="negative"] {
background: rgba(224,82,82,.10);
color: #A83030;
}
.cc4-hero-delta[data-state="negative"] svg { transform: rotate(90deg); }
.cc4-hero-delta-suffix { opacity: .65; font-weight: 500; }
.cc4-hero-total-label {
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 13px;
font-weight: 400;
color: rgba(38,38,38,.45);
margin-top: 8px;
opacity: 0;
animation: ccHeroFadeUp .55s cubic-bezier(.16,1,.3,1) .48s both;
}
/* Stats inline */
.cc4-hero-stats {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
margin-top: 16px;
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 13px;
color: rgba(38,38,38,.55);
opacity: 0;
animation: ccHeroFadeUp .55s cubic-bezier(.16,1,.3,1) .56s both;
}
.cc4-hero-stat { display: inline-flex; align-items: baseline; gap: 5px; }
.cc4-hero-stat b {
font-family: var(--serif, 'Fraunces', serif);
font-weight: 600;
font-size: 14px;
color: #262626;
font-variant-numeric: tabular-nums;
letter-spacing: -.005em;
}
.cc4-hero-stat-sep { color: rgba(38,38,38,.25); }
.cc4-hero-stat-egresos b { color: #C62828; }
/* CTA Lacca Nera (override .cc3-action-cta legacy) */
.cc4-hero-cta,
#page-cierre .cc4-hero-cta.cc3-action-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
max-width: 420px;
min-height: 54px;
margin-top: 28px;
padding: 0 24px;
background: linear-gradient(158deg, #333 0%, #262626 100%) !important;
color: #fff !important;
border: 1px solid rgba(0,0,0,.4) !important;
border-radius: 11px;
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 14.5px;
font-weight: 600;
letter-spacing: .005em;
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow:
0 1px 0 rgba(255,255,255,.06) inset,
0 -1px 0 rgba(0,0,0,.35) inset,
0 4px 14px rgba(26,20,16,.24);
transition: opacity .15s ease, transform .12s ease, box-shadow .22s ease;
opacity: 0;
animation: ccHeroFadeUp .65s cubic-bezier(.16,1,.3,1) .68s both;
}
.cc4-hero-cta::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(232,102,58,.55) 0%, rgba(232,102,58,.18) 30%, transparent 70%);
opacity: 0;
transition: opacity .22s ease;
pointer-events: none;
}
.cc4-hero-cta:hover {
box-shadow:
0 1px 0 rgba(255,255,255,.06) inset,
0 -1px 0 rgba(0,0,0,.35) inset,
0 8px 22px rgba(232,102,58,.30);
}
.cc4-hero-cta:hover::before { opacity: 1; }
.cc4-hero-cta:active { transform: scale(.98); }
.cc4-hero-cta:disabled,
.cc4-hero-cta[disabled] {
opacity: .42;
pointer-events: none;
cursor: not-allowed;
}
.cc4-hero-cta-label { position: relative; z-index: 1; }
.cc4-hero-cta-arrow {
width: 16px; height: 16px;
position: relative;
z-index: 1;
transition: transform .2s cubic-bezier(.16,1,.3,1);
}
.cc4-hero-cta:hover .cc4-hero-cta-arrow {
transform: translateX(3px);
}
/* Sub texto contextual */
.cc4-hero-sub {
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 12.5px;
font-weight: 400;
color: rgba(38,38,38,.5);
line-height: 1.55;
margin: 14px 0 0;
max-width: 480px;
opacity: 0;
animation: ccHeroFadeUp .55s cubic-bezier(.16,1,.3,1) .76s both;
}
.cc4-hero-sub strong {
font-weight: 600;
color: #262626;
}
/* Foot · último cierre */
.cc4-hero-foot {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(38,38,38,.06);
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
letter-spacing: .14em;
text-transform: uppercase;
opacity: 0;
animation: ccHeroFadeUp .55s cubic-bezier(.16,1,.3,1) .85s both;
width: 100%;
max-width: 420px;
}
.cc4-hero-foot-label {
color: rgba(38,38,38,.42);
font-weight: 600;
}
.cc4-hero-foot-meta {
color: rgba(38,38,38,.65);
font-weight: 500;
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 11.5px;
letter-spacing: 0;
text-transform: none;
}
@keyframes ccHeroFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ccHeroFadeUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Responsive */
@media (max-width: 1100px) {
#page-cierre .cc4-hero { gap: 36px; }
.cc4-hero-time { font-size: 52px; }
.cc4-hero-total { font-size: 54px; }
}
@media (max-width: 768px) {
#page-cierre .cc4-hero {
grid-template-columns: 1fr;
gap: 20px;
padding: 18px 0 28px;
}
.cc4-hero-clock { padding-top: 0; flex-direction: row; gap: 14px; align-items: baseline; }
.cc4-hero-time { font-size: 44px; }
.cc4-hero-total { font-size: 48px; }
.cc4-hero-greeting { font-size: 24px; margin: 10px 0 18px; }
.cc4-hero-cta { max-width: 100%; }
.cc4-hero-foot { max-width: 100%; }
}
@media (max-width: 480px) {
.cc4-hero-time { font-size: 38px; }
.cc4-hero-total { font-size: 40px; }
.cc4-hero-greeting { font-size: 22px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
#page-cierre .cc4-hero *,
#page-cierre .cc4-hero *::before,
#page-cierre .cc4-hero *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
.cc4-hero-time-sep { opacity: .7 !important; animation: none !important; }
.cc4-hero-status-dot { animation: none !important; }
}
/* ─── MASTER HEAD v2 ─── */
#page-clientes .cli-master-head-v2 {
padding: 4px 0 18px;
border-bottom: 1px solid rgba(38,38,38,.06);
margin-bottom: 14px;
}
.cli-head-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.cli-head-meta {
display: flex;
flex-direction: column;
gap: 4px;
}
.cli-head-eyebrow {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(38,38,38,.42);
}
.cli-head-title {
font-family: var(--serif, 'Fraunces', serif);
font-size: 32px;
font-weight: 500;
letter-spacing: -.025em;
color: #262626;
line-height: 1.1;
margin: 2px 0 6px;
}
.cli-head-stats {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 13px;
color: rgba(38,38,38,.55);
margin: 0;
}
.cli-head-stat { display: inline-flex; align-items: baseline; gap: 4px; }
.cli-head-stat b {
font-family: var(--serif, 'Fraunces', serif);
font-weight: 600;
font-size: 14.5px;
color: #262626;
letter-spacing: -.005em;
font-variant-numeric: tabular-nums;
}
.cli-head-stat-sep { color: rgba(38,38,38,.25); }
/* CTA nuevo cliente — Lacca Nera mini */
.cli-btn-new-v2 {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 14px;
background: linear-gradient(158deg, #333 0%, #262626 100%);
color: #fff;
border: 1px solid rgba(0,0,0,.32);
border-radius: 9px;
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0;
cursor: pointer;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(26,20,16,.18);
transition: opacity .15s, transform .1s, box-shadow .2s;
}
.cli-btn-new-v2:hover {
opacity: .92;
box-shadow: 0 4px 12px rgba(26,20,16,.24);
}
.cli-btn-new-v2:active { transform: scale(.97); }
/* Controls v2: search input estilo LXG */
.cli-controls-v2 {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
#page-clientes .cli-controls-v2 .cli-master-bar {
position: relative;
display: flex;
align-items: center;
flex: 1;
min-width: 220px;
background: #E7E5E6;
border: none;
border-radius: 9px;
padding: 0 12px;
height: 36px;
transition: background .15s;
}
#page-clientes .cli-controls-v2 .cli-master-bar:focus-within {
background: #dfdcdd;
}
.cli-controls-v2 .cli-search-ico {
color: rgba(38,38,38,.42);
flex-shrink: 0;
margin-right: 6px;
}
#page-clientes .cli-controls-v2 .cli-master-bar input {
flex: 1;
border: none;
background: transparent;
outline: none;
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 12.5px;
font-weight: 500;
color: #262626;
letter-spacing: -.005em;
}
#page-clientes .cli-controls-v2 .cli-master-bar input::placeholder {
color: rgba(38,38,38,.32);
font-weight: 400;
}
/* Tier filters v2 */
#page-clientes .cli-controls-v2 .cli-tier-filters {
display: inline-flex;
gap: 3px;
background: rgba(38,38,38,.04);
padding: 3px;
border-radius: 8px;
}
#page-clientes .cli-controls-v2 .cli-tier-btn {
background: transparent;
border: none;
padding: 5px 11px;
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 11.5px;
font-weight: 600;
letter-spacing: -.005em;
color: rgba(38,38,38,.55);
border-radius: 6px;
cursor: pointer;
transition: background .12s, color .12s, box-shadow .12s;
}
#page-clientes .cli-controls-v2 .cli-tier-btn:hover {
color: #262626;
}
#page-clientes .cli-controls-v2 .cli-tier-btn.active {
background: #fff;
color: #262626;
box-shadow: 0 1px 2px rgba(38,38,38,.08);
}
/* ─── DRAWER HERO v7.75.0 ─── */
#page-clientes .cd-hero {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 36px 28px 24px;
background: #fff;
border-bottom: 1px solid rgba(38,38,38,.06);
text-align: center;
}
/* Actions arriba a la derecha */
.cd-hero-actions {
position: absolute;
top: 14px;
right: 14px;
display: inline-flex;
gap: 6px;
}
.cd-hero-act {
width: 30px;
height: 30px;
border-radius: 50%;
background: transparent;
border: 1px solid rgba(38,38,38,.10);
color: rgba(38,38,38,.45);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s, transform .18s;
}
.cd-hero-act:hover {
background: rgba(38,38,38,.04);
color: #262626;
}
.cd-hero-act-close:hover { transform: rotate(90deg); }
/* Avatar grande con gradient por tier */
.cd-hero-avatar {
width: 88px;
height: 88px;
border-radius: 50%;
display: grid;
place-items: center;
font-family: var(--serif, 'Fraunces', serif);
font-size: 36px;
font-weight: 500;
letter-spacing: -.025em;
color: #fff;
line-height: 1;
flex-shrink: 0;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
0 6px 20px rgba(38,38,38,.18);
user-select: none;
animation: cdHeroAvatarIn .55s cubic-bezier(.34,1.56,.64,1) .05s both;
}
/* Tier gradients */
.cd-hero-avatar.t-bronce {
background: linear-gradient(158deg, #b78554 0%, #7e5634 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 20px rgba(183,133,84,.30);
}
.cd-hero-avatar.t-plata {
background: linear-gradient(158deg, #b8b8b8 0%, #7d7d7d 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 20px rgba(140,140,140,.28);
}
.cd-hero-avatar.t-oro {
background: linear-gradient(158deg, #d4a544 0%, #9a7320 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 20px rgba(212,165,68,.32);
}
.cd-hero-avatar.t-platino {
background: linear-gradient(158deg, #E8663A 0%, #C84F1F 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 6px 20px rgba(232,102,58,.34);
}
@keyframes cdHeroAvatarIn {
0% { opacity: 0; transform: scale(.6); }
60% { opacity: 1; transform: scale(1.06); }
100% { opacity: 1; transform: scale(1); }
}
/* Name hero */
.cd-hero-name {
font-family: var(--serif, 'Fraunces', serif);
font-size: 26px;
font-weight: 500;
letter-spacing: -.022em;
color: #262626;
line-height: 1.15;
margin: 4px 0 0;
opacity: 0;
animation: cdHeroFadeUp .55s cubic-bezier(.16,1,.3,1) .25s both;
}
/* Tier row */
.cd-hero-tier-row {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 12px;
color: rgba(38,38,38,.55);
opacity: 0;
animation: cdHeroFadeUp .55s cubic-bezier(.16,1,.3,1) .38s both;
}
.cd-hero-tier {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
border-radius: 999px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
}
.cd-hero-tier-dot {
width: 6px; height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.cd-hero-tier.t-bronce { background: rgba(183,133,84,.10); color: #8b6230; }
.cd-hero-tier.t-bronce .cd-hero-tier-dot { background: #b78554; }
.cd-hero-tier.t-plata { background: rgba(140,140,140,.10); color: #565656; }
.cd-hero-tier.t-plata .cd-hero-tier-dot { background: #8c8c8c; }
.cd-hero-tier.t-oro { background: rgba(212,165,68,.12); color: #8a5e10; }
.cd-hero-tier.t-oro .cd-hero-tier-dot { background: #d4a544; }
.cd-hero-tier.t-platino { background: rgba(232,102,58,.10); color: #B84420; }
.cd-hero-tier.t-platino .cd-hero-tier-dot { background: #E8663A; }
.cd-hero-tier-sep { color: rgba(38,38,38,.25); }
.cd-hero-meta {
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 12px;
color: rgba(38,38,38,.5);
font-weight: 400;
}
@keyframes cdHeroFadeUp {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Responsive */
@media (max-width: 560px) {
.cli-head-title { font-size: 26px; }
#page-clientes .cd-hero { padding: 28px 20px 20px; }
.cd-hero-avatar { width: 72px; height: 72px; font-size: 30px; }
.cd-hero-name { font-size: 22px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
#page-clientes .cd-hero *,
#page-clientes .cli-master-head-v2 * {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ─── Header v2: sub-stats inline ─── */
#page-empresas .emp-header-v2 .emp-header-left {
display: flex;
flex-direction: column;
gap: 4px;
}
.emp-header-stats {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 13px;
color: rgba(38,38,38,.55);
margin: 4px 0 0;
}
.emp-header-stat { display: inline-flex; align-items: baseline; gap: 4px; }
.emp-header-stat b {
font-family: var(--serif, 'Fraunces', serif);
font-weight: 600;
font-size: 14.5px;
color: #262626;
letter-spacing: -.005em;
font-variant-numeric: tabular-nums;
}
.emp-header-stat-sep { color: rgba(38,38,38,.25); }
/* ─── Card avatar (initials con color semántico) ─── */
.emp-card-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
display: grid;
place-items: center;
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 13px;
font-weight: 700;
letter-spacing: .02em;
color: #fff;
flex-shrink: 0;
user-select: none;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.15),
0 2px 8px rgba(38,38,38,.10);
}
/* Ajuste del top de la card para acomodar el avatar */
#page-empresas .emp-card .emp-card-top {
display: flex;
align-items: flex-start;
gap: 12px;
}
#page-empresas .emp-card .emp-card-info {
flex: 1;
min-width: 0;
}
/* Responsive */
@media (max-width: 480px) {
.emp-card-avatar { width: 36px; height: 36px; font-size: 12px; }
.emp-header-stats { font-size: 12px; }
.emp-header-stat b { font-size: 13px; }
}
/* ═══════════════════════════════════════════════════════════════
v7.77.0 · VENCIMIENTOS — Asistente Identity-First
Avatar empleado + saludo + insight contextual, arriba del panel
═══════════════════════════════════════════════════════════════ */
#page-vencimientos .va-card-v2 {
position: relative;
background: #fff;
border: 1px solid rgba(38,38,38,.06);
border-radius: 12px;
padding: 16px 18px;
margin-bottom: 14px;
box-shadow:
0 0 0 1px rgba(38,38,38,.02),
0 2px 8px rgba(38,38,38,.04);
display: flex;
flex-direction: column;
gap: 12px;
transition: border-color .2s, box-shadow .2s;
}
/* Borde lateral semántico por nivel */
.va-card-v2::before {
content: "";
position: absolute;
left: 0;
top: 14px;
bottom: 14px;
width: 3px;
border-radius: 0 2px 2px 0;
background: rgba(38,38,38,.18);
}
.va-card-v2.ok::before { background: #22A55A; }
.va-card-v2.atencion::before { background: #D4882A; }
.va-card-v2.critico::before { background: #E05252; }
/* HERO row: avatar + eyebrow + titulo + icon mini */
.va-card-v2 .va-hero {
display: flex;
align-items: flex-start;
gap: 12px;
}
.va-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
font-family: var(--serif, 'Fraunces', serif);
font-size: 20px;
font-weight: 500;
letter-spacing: -.02em;
color: #fff;
flex-shrink: 0;
user-select: none;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
0 4px 12px rgba(38,38,38,.18);
}
@keyframes vaAvatarPulse {
0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 4px 14px rgba(224,82,82,.34); }
50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 6px 22px rgba(224,82,82,.50); }
}
.va-hero-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.va-card-v2 .va-hero-eyebrow {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(38,38,38,.45);
}
.va-card-v2.ok .va-hero-eyebrow { color: #1A7A45; }
.va-card-v2.atencion .va-hero-eyebrow { color: #8B5C18; }
.va-card-v2.critico .va-hero-eyebrow { color: #A83030; }
.va-card-v2 .va-titulo {
font-family: var(--serif, 'Fraunces', serif);
font-size: 16px;
font-weight: 500;
letter-spacing: -.015em;
color: #262626;
line-height: 1.25;
}
.va-card-v2 .va-icon-mini {
width: 28px;
height: 28px;
border-radius: 50%;
display: grid;
place-items: center;
flex-shrink: 0;
background: rgba(38,38,38,.04);
}
.va-card-v2 .va-icon-mini svg { width: 14px; height: 14px; }
.va-card-v2.ok .va-icon-mini { background: rgba(34,165,90,.10); color: #1A7A45; }
.va-card-v2.atencion .va-icon-mini { background: rgba(212,136,42,.10); color: #8B5C18; }
.va-card-v2.critico .va-icon-mini { background: rgba(224,82,82,.10); color: #A83030; }
/* BODY: cuerpo + product pills */
.va-card-v2 .va-body {
display: flex;
flex-direction: column;
gap: 10px;
padding-left: 56px; /* alineado con la columna del avatar */
}
.va-card-v2 .va-cuerpo {
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 12.5px;
font-weight: 400;
color: rgba(38,38,38,.65);
line-height: 1.5;
}
/* FOOT */
.va-card-v2 .va-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-left: 56px;
padding-top: 6px;
border-top: 1px solid rgba(38,38,38,.06);
margin-top: 4px;
}
/* Responsive */
@media (max-width: 900px) {
.va-card-v2 .va-body,
.va-card-v2 .va-foot { padding-left: 0; }
}
/* ═══════════════════════════════════════════════════════════════
v7.78.0 · TICKET Identity-First — card blanca Mac OS
Overlay limpio, animación entrada, botones consistentes con sistema
═══════════════════════════════════════════════════════════════ */
.ticket-v2-overlay {
position: fixed;
inset: 0;
z-index: 9600;
background: rgba(38, 38, 38, .26);
backdrop-filter: blur(8px) saturate(1.1);
-webkit-backdrop-filter: blur(8px) saturate(1.1);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
transition: opacity .22s ease;
}
.ticket-v2-overlay.is-in {
opacity: 1;
}
.ticket-v2-shell {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 14px;
width: 360px;
max-width: 100%;
transform: scale(.96) translateY(8px);
opacity: 0;
transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .24s ease;
}
.ticket-v2-overlay.is-in .ticket-v2-shell {
transform: scale(1) translateY(0);
opacity: 1;
}
/* ─── Card blanca Identity-First ─── */
.ticket-v2-card {
background: #FFFFFF;
border-radius: 16px;
padding: 24px 22px 20px;
box-shadow:
0 0 0 1px rgba(38,38,38,.045),
0 8px 28px rgba(38,38,38,.10),
0 24px 60px rgba(38,38,38,.14);
font-family: var(--sans, 'Inter Tight', sans-serif);
color: #262626;
cursor: default;
}
/* HEAD */
.ticket-v2-head {
margin-bottom: 14px;
}
.ticket-v2-brand {
font-family: var(--serif, 'Fraunces', serif);
font-size: 22px;
font-weight: 500;
letter-spacing: -.022em;
color: #262626;
line-height: 1.1;
margin-bottom: 4px;
}
.ticket-v2-local {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(38,38,38,.42);
margin-bottom: 8px;
}
.ticket-v2-num {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 12px;
font-weight: 600;
color: #E8663A;
letter-spacing: .04em;
margin-bottom: 4px;
}
.ticket-v2-date {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 400;
color: rgba(38,38,38,.40);
letter-spacing: .02em;
}
/* DIVIDERS */
.ticket-v2-divider {
border-top: 1px dashed rgba(38,38,38,.16);
margin: 14px 0;
}
/* ITEMS */
.ticket-v2-items {
display: flex;
flex-direction: column;
gap: 10px;
}
.ticket-v2-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.ticket-v2-item-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.ticket-v2-item-name {
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 12.5px;
font-weight: 600;
color: #262626;
letter-spacing: -.005em;
line-height: 1.3;
}
.ticket-v2-item-qty {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10px;
font-weight: 500;
color: rgba(38,38,38,.50);
letter-spacing: .02em;
}
.ticket-v2-item-price {
font-family: var(--serif, 'Fraunces', serif);
font-size: 13.5px;
font-weight: 600;
color: #262626;
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
/* DESCUENTO */
.ticket-v2-desc {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 11.5px;
font-weight: 500;
color: #1A7A45;
margin-bottom: 4px;
}
.ticket-v2-desc span:last-child {
font-variant-numeric: tabular-nums;
}
/* TOTAL */
.ticket-v2-total {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.ticket-v2-total-label {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 11px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(38,38,38,.55);
}
.ticket-v2-total-value {
font-family: var(--serif, 'Fraunces', serif);
font-size: 26px;
font-weight: 600;
color: #262626;
letter-spacing: -.025em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* META */
.ticket-v2-meta {
display: flex;
flex-direction: column;
gap: 6px;
}
.ticket-v2-meta-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.ticket-v2-meta-label {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(38,38,38,.42);
flex-shrink: 0;
}
.ticket-v2-meta-value {
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 11.5px;
font-weight: 500;
color: #262626;
letter-spacing: -.005em;
text-align: right;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ─── ACTIONS (botones Cerrar + Descargar) ─── */
.ticket-v2-actions {
display: flex;
justify-content: center;
gap: 8px;
}
.ticket-v2-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
flex: 1;
height: 42px;
padding: 0 18px;
border-radius: 11px;
font-family: var(--sans, 'Inter Tight', sans-serif);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0;
cursor: pointer;
transition: background .15s, color .15s, opacity .15s, transform .1s, box-shadow .18s, border-color .15s;
user-select: none;
}
.ticket-v2-btn-ghost {
background: rgba(255,255,255,.55);
border: 1px solid rgba(255,255,255,.32);
color: rgba(255,255,255,.92);
backdrop-filter: blur(8px);
}
.ticket-v2-btn-ghost:hover {
background: rgba(255,255,255,.85);
color: #262626;
border-color: rgba(255,255,255,.7);
}
.ticket-v2-btn-ghost:active { transform: scale(.97); }
.ticket-v2-btn-prime {
background: linear-gradient(158deg, #333 0%, #262626 100%);
border: 1px solid rgba(0,0,0,.4);
color: #fff;
box-shadow:
0 1px 0 rgba(255,255,255,.06) inset,
0 -1px 0 rgba(0,0,0,.35) inset,
0 4px 14px rgba(26,20,16,.30);
position: relative;
overflow: hidden;
}
.ticket-v2-btn-prime::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(232,102,58,.55) 0%, rgba(232,102,58,.18) 30%, transparent 70%);
opacity: 0;
transition: opacity .22s ease;
pointer-events: none;
}
.ticket-v2-btn-prime:hover::before { opacity: 1; }
.ticket-v2-btn-prime:hover {
box-shadow:
0 1px 0 rgba(255,255,255,.06) inset,
0 -1px 0 rgba(0,0,0,.35) inset,
0 8px 22px rgba(232,102,58,.32);
}
.ticket-v2-btn-prime:active { transform: scale(.97); }
.ticket-v2-btn-prime span,
.ticket-v2-btn-prime svg { position: relative; z-index: 1; }
/* Responsive */
@media (max-width: 420px) {
.ticket-v2-shell { width: 100%; }
.ticket-v2-card { padding: 20px 18px 18px; }
.ticket-v2-brand { font-size: 20px; }
.ticket-v2-total-value { font-size: 22px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.ticket-v2-overlay,
.ticket-v2-shell { transition-duration: 0.01ms !important; }
}
/* ─── Cards anatomy: radius + shadow del sistema ─── */
#page-cierre .cc3-anatomy-card {
border-radius: 14px;
border: 1px solid rgba(38,38,38,.045) !important;
box-shadow:
0 0 0 1px rgba(38,38,38,.02),
0 2px 8px rgba(38,38,38,.04) !important;
transition: border-color .18s ease, box-shadow .22s ease !important;
}
#page-cierre .cc3-anatomy-card:hover {
border-color: rgba(38,38,38,.10) !important;
box-shadow:
0 0 0 1px rgba(38,38,38,.045),
0 4px 16px rgba(38,38,38,.06) !important;
}
/* ─── Tipografía editorial unificada ─── */
#page-cierre .cc3-anatomy-eyebrow,
#page-cierre .cc3-sub-eyebrow {
font-family: var(--mono, 'JetBrains Mono', monospace) !important;
font-weight: 600 !important;
letter-spacing: .18em;
color: rgba(38,38,38,.42) !important;
}
#page-cierre .cc3-anatomy-title,
#page-cierre .cc3-anatomy-title-sm {
font-family: var(--serif, 'Fraunces', Georgia, serif) !important;
color: #262626 !important;
font-weight: 500 !important;
letter-spacing: -.022em;
}
#page-cierre .cc3-anatomy-sub,
#page-cierre .cc3-anatomy-sub-sm {
font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
color: rgba(38,38,38,.55) !important;
}
/* ─── Anatomy head separator: 1px hairline en lugar de bolder ─── */
#page-cierre .cc3-anatomy-head {
border-bottom: 1px solid rgba(38,38,38,.06) !important;
}
#page-cierre .cc3-arqueo-grid > section + section {
border-left: 1px solid rgba(38,38,38,.06) !important;
}
/* ─── Medios de pago: items refinement ─── */
#page-cierre .cc3-medios-name {
font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
color: rgba(38,38,38,.75) !important;
}
#page-cierre .cc3-medios-amount {
font-family: var(--serif, 'Fraunces', Georgia, serif) !important;
color: #262626 !important;
font-weight: 600 !important;
letter-spacing: -.012em;
}
#page-cierre .cc3-medios-item {
border-bottom: 1px solid rgba(38,38,38,.06) !important;
}
/* ─── Arqueo: rows refinement ─── */
#page-cierre .cc3-arqueo-row,
#page-cierre .cc3-arqueo .cc-arqueo-row {
border-bottom: 1px solid rgba(38,38,38,.05) !important;
}
#page-cierre .cc3-arqueo-label {
font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
color: rgba(38,38,38,.65) !important;
}
#page-cierre .cc3-arqueo-val,
#page-cierre .cc3-arqueo .cc-arqueo-val {
font-family: var(--serif, 'Fraunces', Georgia, serif) !important;
color: #262626 !important;
font-weight: 600 !important;
letter-spacing: -.012em;
}
#page-cierre .cc3-arqueo-row-strong {
border-top: 1px solid rgba(38,38,38,.10) !important;
}
#page-cierre .cc3-arqueo-row-strong .cc3-arqueo-label {
color: #262626 !important;
font-weight: 600 !important;
}
#page-cierre .cc3-arqueo-row-diff {
border-top: 1px solid rgba(38,38,38,.10) !important;
}
#page-cierre .cc3-arqueo-row-egresos .cc3-arqueo-label,
#page-cierre .cc3-arqueo-val-neg,
#page-cierre .cc3-arqueo .cc-egreso-val {
color: #C62828 !important;
}
/* ─── Arqueo input field ─── */
#page-cierre .cc3-arqueo-input-wrap {
background: #E7E5E6 !important;
border-radius: 9px;
border: 1px solid transparent !important;
transition: background .15s, border-color .15s, box-shadow .15s !important;
}
#page-cierre .cc3-arqueo-input-wrap:focus-within {
background: #fff !important;
border-color: rgba(38,38,38,.10) !important;
box-shadow: 0 0 0 3px rgba(232,102,58,.10) !important;
}
#page-cierre .cc3-arqueo-input {
font-family: var(--serif, 'Fraunces', Georgia, serif) !important;
color: #262626 !important;
font-weight: 500 !important;
}
#page-cierre .cc3-arqueo-input-prefix {
color: rgba(38,38,38,.45) !important;
}
/* ─── Retiro toggle btn (consistent ghost) ─── */
#page-cierre .cc3-retiro-toggle-btn {
border: 1px dashed rgba(38,38,38,.18) !important;
background: transparent !important;
color: rgba(38,38,38,.55) !important;
border-radius: 10px;
transition: border-color .15s, background .15s, color .15s !important;
}
#page-cierre .cc3-retiro-toggle-btn:hover {
border-color: rgba(38,38,38,.32) !important;
background: rgba(38,38,38,.025) !important;
color: #262626 !important;
}
/* ─── Filter pills detalle ventas ─── */
#page-cierre .cc3-pago-filtros {
display: inline-flex;
gap: 3px;
background: rgba(38,38,38,.04);
padding: 3px;
border-radius: 9px;
}
#page-cierre .cc3-pago-filtro {
background: transparent !important;
border: none !important;
border-radius: 7px;
color: rgba(38,38,38,.55) !important;
font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
font-size: 11.5px !important;
font-weight: 600 !important;
letter-spacing: -.005em;
padding: 5px 11px;
cursor: pointer;
transition: background .12s, color .12s, box-shadow .12s !important;
}
#page-cierre .cc3-pago-filtro:hover {
color: #262626 !important;
}
#page-cierre .cc3-pago-filtro.on {
background: #fff !important;
color: #262626 !important;
box-shadow: 0 1px 2px rgba(38,38,38,.08) !important;
}
/* ─── Empty states (Sin ventas hoy) ─── */
#page-cierre .cc3-anatomy-empty {
font-family: var(--serif, 'Fraunces', Georgia, serif) !important;
color: rgba(38,38,38,.42) !important;
font-style: italic;
}
/* ─── Nota del turno textarea ─── */
#page-cierre .cc3-nota-input,
#page-cierre textarea#cc-nota {
background: rgba(38,38,38,.025) !important;
border: 1px solid rgba(38,38,38,.08) !important;
border-radius: 10px;
font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
color: #262626 !important;
font-size: 13px !important;
transition: background .15s, border-color .15s, box-shadow .15s !important;
}
#page-cierre .cc3-nota-input::placeholder,
#page-cierre textarea#cc-nota::placeholder {
color: rgba(38,38,38,.42) !important;
font-style: italic;
}
#page-cierre .cc3-nota-input:focus,
#page-cierre textarea#cc-nota:focus {
background: #fff !important;
border-color: rgba(38,38,38,.16) !important;
box-shadow: 0 0 0 3px rgba(232,102,58,.08) !important;
outline: none !important;
}
/* ─── Comparativa: chart bars con ink correcto ─── */
#page-cierre .cc3-comp-bar {
background: #262626 !important;
}
#page-cierre .cc3-comp-day.today {
color: #E8663A !important;
}
#page-cierre .cc3-comp-bar-val {
font-family: var(--mono, 'JetBrains Mono', monospace) !important;
color: rgba(38,38,38,.65) !important;
font-weight: 600 !important;
letter-spacing: .02em;
font-variant-numeric: tabular-nums;
}
#page-cierre .cc3-comp-stat-label {
font-family: var(--mono, 'JetBrains Mono', monospace) !important;
color: rgba(38,38,38,.42) !important;
letter-spacing: .14em;
}
#page-cierre .cc3-comp-stat-val {
font-family: var(--serif, 'Fraunces', Georgia, serif) !important;
color: #262626 !important;
font-weight: 600 !important;
}
/* ─── Historial: filter pills + search ─── */
#page-cierre .cc3-hist-filters {
display: inline-flex;
gap: 3px;
background: rgba(38,38,38,.04);
padding: 3px;
border-radius: 9px;
}
#page-cierre .cc3-hist-filter {
background: transparent !important;
border: none !important;
border-radius: 7px;
color: rgba(38,38,38,.55) !important;
font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
font-size: 11.5px !important;
font-weight: 600 !important;
padding: 5px 11px;
cursor: pointer;
transition: background .12s, color .12s, box-shadow .12s !important;
}
#page-cierre .cc3-hist-filter:hover {
color: #262626 !important;
}
#page-cierre .cc3-hist-filter.on {
background: #fff !important;
color: #262626 !important;
box-shadow: 0 1px 2px rgba(38,38,38,.08) !important;
}
#page-cierre .cc3-hist-search {
background: #E7E5E6 !important;
border: 1px solid transparent !important;
border-radius: 9px;
transition: background .15s !important;
}
#page-cierre .cc3-hist-search:focus-within {
background: #fff !important;
border-color: rgba(38,38,38,.10) !important;
box-shadow: 0 0 0 3px rgba(232,102,58,.10) !important;
}
#page-cierre .cc3-hist-search input {
font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
color: #262626 !important;
font-size: 12.5px !important;
}
#page-cierre .cc3-hist-search input::placeholder {
color: rgba(38,38,38,.40) !important;
}
#page-cierre .cc3-hist-search svg {
color: rgba(38,38,38,.40) !important;
}
/* ─── Historial: rows refinement (date col + total + delta) ─── */
#page-cierre .cc2-hist-list,
#page-cierre .cc3-hist-list {
padding: 0;
}
#page-cierre .cc2-hist-list .cc2-hist-row,
#page-cierre .cc3-hist-list .cc3-hist-row,
#page-cierre .cc2-hist-list .cc2-hist-row:hover,
#page-cierre .cc3-hist-list .cc3-hist-row:hover,
/* ─── Footer text colors normalizadas a sistema ─── */
#page-cierre .cc3-anatomy-empty,
/* ─── Cell container (override del background paper crema legacy) ─── */
/* v7.82.1: container subtle white-ish para que las cards grises destaquen sobre él */
#page-stock .stock-lotes-cell {
background: #F6F6F6 !important;
padding: 14px 24px 16px 50px;
border-bottom: 1px solid rgba(38,38,38,.06) !important;
}
#page-stock .sk-table-wrap tbody tr.stock-lotes-row td {
background: #F6F6F6 !important;
}
/* ─── Expand button refinado (estilo sistema) ─── */
#page-stock .stock-expand-btn,
#page-stock .sk-table-wrap .stock-expand-btn {
width: 22px;
height: 22px;
background: #fff !important;
border: 1px solid rgba(38,38,38,.10) !important;
border-radius: 50%;
color: rgba(38,38,38,.55) !important;
transition: transform .18s cubic-bezier(.16,1,.3,1), border-color .15s, color .15s, background .15s !important;
}
#page-stock .stock-expand-btn:hover {
border-color: rgba(232,102,58,.40) !important;
color: #E8663A !important;
background: rgba(232,102,58,.04) !important;
}
#page-stock .stock-expand-btn.open {
transform: rotate(90deg);
background: linear-gradient(158deg, #E8663A, #C84F1F) !important;
border-color: rgba(232,102,58,.30) !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(232,102,58,.32) !important;
}
/* ─── Wrap principal ─── */
.stk-lotes-wrap {
display: flex;
flex-direction: column;
gap: 10px;
font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
color: #262626;
}
/* v7.82.0: head con eyebrow + recon pill inline */
.stk-lotes-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 2px;
}
.stk-lotes-eyebrow {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(38,38,38,.42);
}
.stk-lotes-empty {
font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
font-size: 12.5px;
font-style: italic;
color: rgba(38,38,38,.42);
padding: 4px 0;
}
.stk-lotes-list {
display: flex;
flex-direction: column;
gap: 6px;
}
/* ─── Row individual (Mac OS clean tile) ─── */
/* v7.82.1: card más oscura que el container (sino blanco se pierde con filas del Stock) */
.stk-lote-row {
position: relative;
display: grid;
grid-template-columns: auto auto 1fr auto;
align-items: center;
gap: 14px;
background: #EAE8E9;
border: 1px solid rgba(38,38,38,.06);
border-radius: 10px;
padding: 11px 14px 11px 18px;
transition: background .15s ease, border-color .15s ease, box-shadow .18s ease, transform .14s ease;
}
.stk-lote-row:hover {
background: #E2E0E1;
border-color: rgba(38,38,38,.10);
box-shadow: 0 2px 8px rgba(38,38,38,.05);
}
/* Left rail semántico */
.stk-lote-rail {
position: absolute;
left: 0;
top: 10px;
bottom: 10px;
width: 3px;
border-radius: 0 2px 2px 0;
background: rgba(38,38,38,.12);
}
.stk-lote--ok .stk-lote-rail { background: #22A55A; }
.stk-lote--proximo .stk-lote-rail { background: #D4882A; }
.stk-lote--critico .stk-lote-rail { background: #E05252; }
/* Index column (número + FIFO) */
.stk-lote-index {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
flex-shrink: 0;
}
.stk-lote-num {
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
background: #FFFFFF;
color: rgba(38,38,38,.55);
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10px;
font-weight: 700;
letter-spacing: .02em;
font-variant-numeric: tabular-nums;
box-shadow: 0 0 0 1px rgba(38,38,38,.08);
}
.stk-lote-row.is-fifo .stk-lote-num {
background: linear-gradient(158deg, #E8663A, #C84F1F);
color: #fff;
box-shadow: 0 2px 6px rgba(232,102,58,.28);
}
.stk-lote-fifo-tag {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 7.5px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #E8663A;
margin-top: 1px;
}
/* Main content (date + days + meta) */
.stk-lote-main {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.stk-lote-head {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.stk-lote-date {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .02em;
font-variant-numeric: tabular-nums;
color: #262626;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid transparent;
}
/* v7.82.1: pills más opacos para que destaquen sobre el card gris */
.stk-lote--ok .stk-lote-date {
background: rgba(34,165,90,.15);
color: #1A7A45;
border-color: rgba(34,165,90,.28);
}
.stk-lote--proximo .stk-lote-date {
background: rgba(212,136,42,.16);
color: #8B5C18;
border-color: rgba(212,136,42,.30);
}
.stk-lote--critico .stk-lote-date {
background: rgba(224,82,82,.15);
color: #A83030;
border-color: rgba(224,82,82,.28);
}
.stk-lote-dias {
font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
font-size: 11.5px;
font-weight: 500;
color: rgba(38,38,38,.55);
letter-spacing: -.005em;
}
.stk-lote--critico .stk-lote-dias {
color: #A83030;
font-weight: 600;
}
.stk-lote-meta {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
font-size: 11px;
}
.stk-lote-qty {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .02em;
color: rgba(38,38,38,.72);
font-variant-numeric: tabular-nums;
}
.stk-lote-qty.is-unknown {
color: rgba(38,38,38,.38);
font-style: italic;
}
.stk-lote-codigo {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10px;
letter-spacing: .04em;
color: rgba(38,38,38,.50);
}
.stk-lote-codigo strong {
color: #262626;
font-weight: 600;
letter-spacing: 0;
}
.stk-lote-notas {
font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
font-size: 11px;
color: rgba(38,38,38,.50);
font-style: italic;
letter-spacing: -.005em;
position: relative;
padding-left: 10px;
}
.stk-lote-notas::before {
content: "·";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
color: rgba(38,38,38,.3);
}
/* v7.82.0: Action group (edit + delete) */
.stk-lote-actions {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.stk-lote-act {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 7px;
background: transparent;
border: 1px solid transparent;
color: rgba(38,38,38,.35);
cursor: pointer;
flex-shrink: 0;
transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.stk-lote-act:active {
transform: scale(.94);
}
.stk-lote-edit:hover {
background: rgba(38,38,38,.05);
border-color: rgba(38,38,38,.10);
color: #262626;
}
.stk-lote-del:hover {
background: rgba(224,82,82,.08);
border-color: rgba(224,82,82,.20);
color: #C62828;
}
/* ─── Reconciliación pill (v7.82.0 ahora en la head row, signal alta primero) ─── */
.stk-lotes-recon {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
font-size: 11.5px;
font-weight: 500;
letter-spacing: -.005em;
padding: 5px 12px 5px 10px;
border-radius: 999px;
background: rgba(38,38,38,.04);
flex-shrink: 0;
}
.stk-lotes-recon-icon {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.stk-lotes-recon strong {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.stk-lotes-recon.is-ok {
background: rgba(34,165,90,.10);
color: #1A7A45;
}
.stk-lotes-recon.is-warn {
background: rgba(212,136,42,.12);
color: #8B5C18;
}
/* v7.82.0: cross-link a Vencimientos */
.stk-lotes-foot {
display: flex;
justify-content: flex-end;
margin-top: 2px;
}
.stk-lotes-xlink {
display: inline-flex;
align-items: center;
gap: 5px;
background: transparent;
border: none;
padding: 4px 8px;
border-radius: 6px;
cursor: pointer;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(232,102,58,.75);
transition: background .12s, color .12s, transform .12s;
}
.stk-lotes-xlink:hover {
background: rgba(232,102,58,.06);
color: #E8663A;
}
.stk-lotes-xlink:hover svg {
transform: translateX(2px);
}
.stk-lotes-xlink svg {
transition: transform .15s ease;
}
.stk-lotes-xlink:active {
transform: scale(.97);
}
/* Responsive: mobile stack */
@media (max-width: 720px) {
#page-stock .stock-lotes-cell {
padding: 12px 16px 14px 16px !important;
}
.stk-lote-row {
grid-template-columns: auto 1fr auto;
gap: 10px;
padding: 10px 12px;
}
.stk-lote-meta {
gap: 8px;
}
}
/* ═══════════════════════════════════════════════════════════════
v7.85.0 · Filter Pills · System Blue
Cuando se elige un filtro en un select de la topbar, aparece una pill
azul (color sistema --c-info #0A84FF) al lado del nombre de la página.
═══════════════════════════════════════════════════════════════ */
/* ── Container (junto al título) ── */
.topbar .tb-nav-center {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.topbar .tb-filter-pills {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: nowrap;
/* min-width 0 + overflow para que más adelante podamos animar el "shrink" */
min-width: 0;
overflow: hidden;
max-width: 100%;
}
.topbar .tb-filter-pills:empty { display: none; }
/* ── Pill base (azul del sistema) ── */
.topbar .tb-filter-pills .tb-fpill,
.topbar .tb-filter-pills .mv2-chip,
.topbar .tb-filter-pills .v3-af-chip {
display: inline-flex !important;
align-items: center;
gap: 5px;
height: 24px;
padding: 0 6px 0 10px !important;
background: rgba(10, 132, 255, .10) !important;
border: 1px solid rgba(10, 132, 255, .22) !important;
border-radius: 7px !important;
font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
font-size: 11px !important;
font-weight: 600 !important;
color: #0058B5 !important;
letter-spacing: -.005em;
white-space: nowrap;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.topbar .tb-filter-pills .tb-fpill:hover,
.topbar .tb-filter-pills .mv2-chip:hover,
.topbar .tb-filter-pills .v3-af-chip:hover {
background: rgba(10, 132, 255, .16) !important;
border-color: rgba(10, 132, 255, .32) !important;
}
/* Label prefijo (ej: "Pago:", "Estado:") */
.topbar .tb-filter-pills .tb-fpill-label,
.topbar .tb-filter-pills .v3-af-chip-label {
font-family: var(--mono, 'JetBrains Mono', monospace) !important;
font-size: 9px !important;
font-weight: 600 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: rgba(10, 132, 255, .65) !important;
margin-right: 0 !important;
}
/* Botón remove (X) interno del pill */
.topbar .tb-filter-pills .tb-fpill-remove,
.topbar .tb-filter-pills .mv2-chip svg,
.topbar .tb-filter-pills .v3-af-chip-remove {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 16px !important;
height: 16px !important;
padding: 0 !important;
margin-left: 3px !important;
background: rgba(10, 132, 255, .14) !important;
border: none !important;
border-radius: 50% !important;
color: #0058B5 !important;
cursor: pointer;
flex-shrink: 0;
transition: background .12s, color .12s, transform .12s;
}
.topbar .tb-filter-pills .tb-fpill-remove:hover,
.topbar .tb-filter-pills .v3-af-chip-remove:hover {
background: rgba(10, 132, 255, .28) !important;
color: #003C7A !important;
transform: scale(1.08);
}
.topbar .tb-filter-pills .mv2-chip svg {
width: 10px !important;
height: 10px !important;
padding: 3px !important;
}
/* "Limpiar" / clear-all link */
.topbar .tb-filter-pills .tb-fpill-clear-all,
.topbar .tb-filter-pills .mv2-chip-clear,
.topbar .tb-filter-pills .v3-af-clear-all {
height: 22px !important;
padding: 0 9px !important;
background: transparent !important;
border: none !important;
border-radius: 6px !important;
font-family: var(--mono, 'JetBrains Mono', monospace) !important;
font-size: 9px !important;
font-weight: 600 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: rgba(10, 132, 255, .65) !important;
cursor: pointer;
transition: background .12s, color .12s;
}
.topbar .tb-filter-pills .tb-fpill-clear-all:hover,
.topbar .tb-filter-pills .mv2-chip-clear:hover,
.topbar .tb-filter-pills .v3-af-clear-all:hover {
background: rgba(10, 132, 255, .10) !important;
color: #0058B5 !important;
}
/* v7.87.0: overflow visible — JS gestiona el collapse de pills cuando no entran */
.topbar .tb-filter-pills {
position: relative;
overflow: visible;
}
/* ── Animación smooth de shrink/expand para pills ── */
.topbar .tb-filter-pills .v3-af-chip,
.topbar .tb-filter-pills .mv2-chip,
.topbar .tb-filter-pills .tb-fpill {
max-width: 280px;
overflow: hidden;
transition:
max-width .28s cubic-bezier(.16,1,.3,1),
opacity .22s ease,
padding .28s cubic-bezier(.16,1,.3,1),
margin .28s cubic-bezier(.16,1,.3,1),
border-width .28s ease,
transform .22s ease,
background .15s ease,
border-color .15s ease;
}
/* Pill colapsado (animación smooth) */
.topbar .tb-filter-pills .is-collapsed {
max-width: 0 !important;
opacity: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: -5px !important;
border-width: 0 !important;
transform: scale(.8) !important;
pointer-events: none !important;
}
/* Counter pill "+N" */
.topbar .tb-filter-pills .tb-pills-counter {
display: inline-flex;
align-items: center;
justify-content: center;
height: 24px;
min-width: 34px;
padding: 0 9px;
background: rgba(10, 132, 255, .18);
border: 1px solid rgba(10, 132, 255, .32);
border-radius: 7px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
color: #0058B5;
cursor: pointer;
flex-shrink: 0;
transition: background .15s, transform .12s, border-color .15s;
animation: tbCounterIn .32s cubic-bezier(.34,1.56,.64,1);
}
.topbar .tb-filter-pills .tb-pills-counter:hover {
background: rgba(10, 132, 255, .28);
border-color: rgba(10, 132, 255, .45);
transform: scale(1.06);
}
.topbar .tb-filter-pills .tb-pills-counter:active {
transform: scale(.96);
}
@keyframes tbCounterIn {
0% { opacity: 0; transform: scale(.5); }
60% { opacity: 1; transform: scale(1.12); }
100% { opacity: 1; transform: scale(1); }
}
/* Popover de pills colapsados */
.topbar .tb-pills-overflow-pop {
position: absolute;
top: calc(100% + 10px);
left: 0;
background: #FFFFFF;
border: 1px solid rgba(38,38,38,.06);
border-radius: 12px;
padding: 8px;
box-shadow:
0 0 0 1px rgba(38,38,38,.045),
0 8px 32px rgba(38,38,38,.14);
display: flex;
flex-direction: column;
gap: 6px;
min-width: 200px;
max-width: 360px;
z-index: 9500;
animation: tbPopIn .24s cubic-bezier(.16,1,.3,1);
}
.topbar .tb-pills-overflow-pop[hidden] { display: none; }
@keyframes tbPopIn {
from { opacity: 0; transform: translateY(-6px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Pills dentro del popover: full width, stack vertical */
.topbar .tb-pills-overflow-pop .v3-af-chip,
.topbar .tb-pills-overflow-pop .mv2-chip,
.topbar .tb-pills-overflow-pop .tb-fpill {
height: 28px !important;
max-width: none !important;
padding: 0 8px 0 10px !important;
align-self: stretch;
justify-content: space-between;
}
/* Header del popover */
.topbar .tb-pills-overflow-pop-head {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(38,38,38,.42);
padding: 4px 8px 2px;
border-bottom: 1px solid rgba(38,38,38,.05);
margin-bottom: 4px;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.topbar .tb-filter-pills .v3-af-chip,
.topbar .tb-filter-pills .mv2-chip,
.topbar .tb-filter-pills .tb-fpill,
.topbar .tb-filter-pills .tb-pills-counter,
.topbar .tb-pills-overflow-pop {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/* ════════════════════════════════════════════════════════════════════
v7.88.0 · Compact filter sheet (tablet / móvil / desktop angosto)
Breakpoint: ≤ 1200px
════════════════════════════════════════════════════════════════════ */
/* ── Botón "Filtros (N)" en topbar ── */
.topbar .tb-filters-btn {
display: none; /* visible solo en compact mode */
align-items: center;
gap: 7px;
height: 34px;
padding: 0 12px;
background: #FFFFFF;
border: 1px solid rgba(38, 38, 38, .10);
border-radius: 10px;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 12.5px;
font-weight: 600;
color: #262626;
cursor: pointer;
transition: background .15s, border-color .15s, transform .12s;
flex-shrink: 0;
}
.topbar .tb-filters-btn:hover {
background: #F7F6F5;
border-color: rgba(38, 38, 38, .18);
}
.topbar .tb-filters-btn:active { transform: scale(.97); }
.topbar .tb-filters-btn svg {
color: rgba(38, 38, 38, .55);
flex-shrink: 0;
}
.topbar .tb-filters-btn-label {
letter-spacing: -.005em;
}
.topbar .tb-filters-btn-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
margin-left: 2px;
background: rgba(10, 132, 255, .18);
border: 1px solid rgba(10, 132, 255, .32);
border-radius: 5px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10px;
font-weight: 700;
color: #0058B5;
animation: tbCounterIn .32s cubic-bezier(.34,1.56,.64,1);
}
.topbar .tb-filters-btn-count[hidden] { display: none; }
/* ── Sheet container (fixed overlay) ── */
.tb-filters-sheet {
position: fixed;
inset: 0;
z-index: 9900;
display: flex;
align-items: flex-end; /* mobile: panel desde abajo */
justify-content: stretch;
pointer-events: none;
}
.tb-filters-sheet[hidden] { display: none !important; }
.tb-filters-sheet-backdrop {
position: absolute;
inset: 0;
background: rgba(38, 38, 38, .42);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
transition: opacity .28s cubic-bezier(.16,1,.3,1);
pointer-events: auto;
}
.tb-filters-sheet.is-open .tb-filters-sheet-backdrop {
opacity: 1;
}
.tb-filters-sheet-panel {
position: relative;
width: 100%;
max-height: 88vh;
background: #FFFFFF;
border-radius: 18px 18px 0 0;
box-shadow:
0 -8px 32px rgba(38, 38, 38, .18),
0 0 0 1px rgba(38, 38, 38, .04);
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform .32s cubic-bezier(.16,1,.3,1);
pointer-events: auto;
overflow: hidden;
}
.tb-filters-sheet.is-open .tb-filters-sheet-panel {
transform: translateY(0);
}
.tb-filters-sheet-handle {
width: 36px;
height: 4px;
border-radius: 2px;
background: rgba(38, 38, 38, .14);
margin: 8px auto 0;
}
.tb-filters-sheet-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px 14px;
gap: 12px;
border-bottom: 1px solid rgba(38, 38, 38, .06);
}
.tb-filters-sheet-head-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.tb-filters-sheet-eyebrow {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(38, 38, 38, .42);
}
.tb-filters-sheet-title {
margin: 0;
font-family: var(--display, 'Fraunces', serif);
font-size: 22px;
font-weight: 500;
letter-spacing: -.015em;
color: #262626;
}
.tb-filters-sheet-close {
width: 36px;
height: 36px;
border-radius: 10px;
background: #F4F2F0;
border: 1px solid rgba(38, 38, 38, .06);
color: rgba(38, 38, 38, .65);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s, transform .12s;
flex-shrink: 0;
}
.tb-filters-sheet-close:hover {
background: #EBE8E6;
color: #262626;
}
.tb-filters-sheet-close:active { transform: scale(.94); }
/* Body: action-zone clonado se mueve acá ── orientación vertical stack */
.tb-filters-sheet-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 10px;
-webkit-overflow-scrolling: touch;
}
/* Cuando #tb-action-zone está dentro del sheet, sus hijos se stackean full-width */
.tb-filters-sheet-body #tb-action-zone {
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 10px;
width: 100%;
margin: 0;
}
.tb-filters-sheet-body #tb-action-zone > * {
width: 100%;
max-width: none;
min-width: 0;
margin: 0;
height: 42px;
}
.tb-filters-sheet-body #tb-action-zone input[type="text"],
.tb-filters-sheet-body #tb-action-zone input[type="search"],
.tb-filters-sheet-body #tb-action-zone select,
.tb-filters-sheet-body #tb-action-zone button {
height: 42px;
font-size: 14px !important;
width: 100%;
border-radius: 10px;
}
.tb-filters-sheet-body #tb-action-zone .v3-af-search,
.tb-filters-sheet-body #tb-action-zone .mv2-search,
.tb-filters-sheet-body #tb-action-zone .sk-search-wrap {
width: 100%;
}
/* Sub-contenedores de filtros (.mv2-filters, .v3-af-filters, .sk-filters) → stack vertical */
.tb-filters-sheet-body #tb-action-zone .mv2-filters,
.tb-filters-sheet-body #tb-action-zone .v3-af-filters,
.tb-filters-sheet-body #tb-action-zone .sk-filters,
.tb-filters-sheet-body #tb-action-zone [class*="-filters"] {
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 10px;
width: 100%;
height: auto;
}
.tb-filters-sheet-body #tb-action-zone .mv2-filters > *,
.tb-filters-sheet-body #tb-action-zone .v3-af-filters > *,
.tb-filters-sheet-body #tb-action-zone .sk-filters > *,
.tb-filters-sheet-body #tb-action-zone [class*="-filters"] > * {
width: 100%;
max-width: none;
height: 42px;
}
/* Dropdowns custom (.mv2-dropdown) — botón full width dentro del sheet */
.tb-filters-sheet-body #tb-action-zone .mv2-dropdown {
position: relative;
}
.tb-filters-sheet-body #tb-action-zone .mv2-dd-btn {
width: 100%;
height: 42px;
justify-content: space-between;
font-size: 14px !important;
border-radius: 10px;
}
.tb-filters-sheet-body #tb-action-zone .mv2-dd-menu {
width: 100%;
left: 0;
right: 0;
}
/* Footer con clear + apply */
.tb-filters-sheet-foot {
display: flex;
gap: 10px;
padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
border-top: 1px solid rgba(38, 38, 38, .06);
background: #FAFAFA;
}
.tb-filters-sheet-clear {
flex: 0 0 auto;
height: 46px;
padding: 0 18px;
background: transparent;
border: 1px solid rgba(38, 38, 38, .12);
border-radius: 12px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 11px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(38, 38, 38, .65);
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.tb-filters-sheet-clear:hover {
background: #F4F2F0;
color: #262626;
border-color: rgba(38, 38, 38, .18);
}
.tb-filters-sheet-apply {
flex: 1 1 auto;
height: 46px;
padding: 0 20px;
background: #262626;
border: none;
border-radius: 12px;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 14px;
font-weight: 600;
letter-spacing: -.005em;
color: #FFFFFF;
cursor: pointer;
transition: background .15s, transform .12s;
position: relative;
overflow: hidden;
}
.tb-filters-sheet-apply:hover {
background: #1A1A1A;
}
.tb-filters-sheet-apply:active { transform: scale(.985); }
.tb-filters-sheet-apply::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(232, 102, 58, .35), transparent);
transition: left .6s cubic-bezier(.16,1,.3,1);
}
.tb-filters-sheet-apply:hover::before {
left: 100%;
}
/* ════════════════════════════════════════════════════════════════════
v7.89.0 · Container-Adaptive Progressive Collapse
JS aplica clase .tb-compact a la topbar cuando detecta overflow real
(no usa breakpoints viewport — reacciona al contenido).
════════════════════════════════════════════════════════════════════ */
/* Action-zone con transición suave para shrink/expand.
v7.90.1 · overflow: visible (era hidden) — los dropdowns de selects necesitan
escapar del container para mostrarse. Antes recortaba el panel de Sucursal/Categoría.
v7.90.1 · gap quitado — los wraps legacy ya tienen sus propios margin-left
(líneas 4614-4626). Si pongo gap aquí, se suma al margin y deja huecos extra. */
.topbar #tb-action-zone {
display: flex;
align-items: center;
min-width: 0;
transition: max-width .25s cubic-bezier(.16,1,.3,1),
opacity .18s ease;
overflow: visible;
}
/* Stage 2: Search se contrae (cuando hay pills muchas pero todavía no urgente) */
.topbar.tb-stage-search-narrow #tb-action-zone .v3-af-search,
.topbar.tb-stage-search-narrow #tb-action-zone .mv2-search,
.topbar.tb-stage-search-narrow #tb-action-zone .sk-search-wrap {
max-width: 200px;
transition: max-width .25s cubic-bezier(.16,1,.3,1);
}
/* Stage 3 (compact): action-zone hidden en topbar, mostrar botón */
.topbar.tb-compact #tb-action-zone:not(.in-sheet) {
display: none !important;
}
.topbar.tb-compact .tb-filters-btn {
display: inline-flex;
animation: tbFiltersBtnIn .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes tbFiltersBtnIn {
0% { opacity: 0; transform: scale(.7); }
60% { opacity: 1; transform: scale(1.08); }
100% { opacity: 1; transform: scale(1); }
}
/* Pills container en compact: máximo ancho relativo */
.topbar.tb-compact .tb-filter-pills {
max-width: calc(100vw - 380px);
}
/* ── Geometría del sheet por viewport (mantenida) ── */
/* Tablet/desktop angosto (≥720px): sheet como drawer lateral derecho */
@media (min-width: 720px) {
.tb-filters-sheet {
align-items: stretch;
justify-content: flex-end;
}
.tb-filters-sheet-panel {
width: 420px;
max-width: 90vw;
max-height: 100vh;
height: 100vh;
border-radius: 18px 0 0 18px;
transform: translateX(100%);
box-shadow:
-8px 0 32px rgba(38, 38, 38, .18),
0 0 0 1px rgba(38, 38, 38, .04);
}
.tb-filters-sheet.is-open .tb-filters-sheet-panel {
transform: translateX(0);
}
.tb-filters-sheet-handle {
display: none;
}
}
/* Móvil (<720px): bottom-sheet (default ya configurado al inicio del bloque) + label oculto */
@media (max-width: 720px) {
.topbar.tb-compact .tb-filter-pills {
max-width: calc(100vw - 200px);
}
.topbar .tb-filters-btn-label {
display: none; /* solo ícono + count en móvil chico */
}
.topbar .tb-filters-btn {
padding: 0 10px;
gap: 5px;
}
}
/* Body scroll-lock cuando sheet está abierto */
body.tb-sheet-open {
overflow: hidden;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.tb-filters-sheet-backdrop,
.tb-filters-sheet-panel {
transition-duration: 0.01ms !important;
}
}
/* ════════════════════════════════════════════════════════════════════
v7.90.0 · Page Pills Strip
Las pills de filtros viven arriba del body de cada página (no en topbar).
Animación slide-down cuando hay contenido, colapso suave cuando vacío.
La topbar queda libre de morfismo.
════════════════════════════════════════════════════════════════════ */
/* v7.90.7 · Container ABSOLUTE — out of flow. Las pills NO mueven el body.
El espacio (~52px arriba del page) se reserva con padding-top en #page-X
y el strip flota ahí, alineado horizontalmente con el contenido (left/right = 46px
para respetar el padding-x del page). */
.page-pills-strip,
.sk-active-chips,
.mv2-active-chips {
position: absolute !important;
top: 14px;
left: 46px;
right: 46px;
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 6px;
overflow: visible;
padding: 0;
margin: 0;
border: none;
background: transparent;
opacity: 1;
pointer-events: auto;
z-index: 5;
transition: opacity .28s ease;
}
/* Vencimientos: queda en su lugar normal en .v-main (layout grid no se mueve igual) */
.v3-tb-chips {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 6px;
overflow: hidden;
max-height: 0;
opacity: 0;
padding: 0;
margin: 0;
transition:
max-height .52s cubic-bezier(.32, .72, 0, 1),
opacity .38s cubic-bezier(.32, .72, 0, 1),
margin .48s cubic-bezier(.32, .72, 0, 1);
pointer-events: none;
}
.v3-tb-chips:not(:empty) {
max-height: 200px;
opacity: 1;
margin: 0 0 14px;
pointer-events: auto;
}
/* Cuando el strip absolute está vacío: opacity 0 — pero sigue en el lugar */
.page-pills-strip:empty,
.sk-active-chips:empty,
.mv2-active-chips:empty {
opacity: 0;
pointer-events: none;
}
/* Reservar espacio fijo arriba del page para que las pills floten ahí.
v7.90.7 · La regla legacy #pages > .page.section-core { padding: 46px 46px 80px !important }
tiene especificidad 120. Usamos #pages > #page-X.section-core (= 220) para ganar el cascade. */
#pages > #page-movimientos.section-core,
#pages > #page-stock.section-core {
position: relative;
padding: 70px 46px 80px;
}
/* v7.90.3 · Pills full pill-shape + azul reforzado del sistema (--c-info #0A84FF)
!important necesario porque reglas legacy (#page-movimientos .mv2-chip línea 11156)
tienen mayor especificidad y aplicaban color ember por default. */
.page-pills-strip .v3-af-chip,
.page-pills-strip .mv2-chip,
.page-pills-strip .tb-fpill,
.sk-active-chips .v3-af-chip,
.sk-active-chips .mv2-chip,
.sk-active-chips .tb-fpill,
.mv2-active-chips .v3-af-chip,
.mv2-active-chips .mv2-chip,
.mv2-active-chips .tb-fpill,
.v3-tb-chips .v3-af-chip,
.v3-tb-chips .mv2-chip,
.v3-tb-chips .tb-fpill {
display: inline-flex !important;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 8px 0 12px !important;
background: rgba(10, 132, 255, .14) !important;
border: 1px solid rgba(10, 132, 255, .32) !important;
border-radius: 9999px !important;
font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
font-size: 12px !important;
font-weight: 600 !important;
color: #0058B5 !important;
letter-spacing: -.005em;
white-space: nowrap;
cursor: pointer;
transition: background .18s ease, border-color .18s ease, transform .14s;
/* v7.90.5 · Spring elegante con duración generosa (540ms) — overshoot suave
cubic-bezier(.34, 1.36, .64, 1) — menos agresivo que el clásico (.34, 1.56) */
animation: pillStripIn .54s cubic-bezier(.34, 1.36, .64, 1) both;
}
.page-pills-strip .v3-af-chip:hover,
.page-pills-strip .mv2-chip:hover,
.sk-active-chips .v3-af-chip:hover,
.mv2-active-chips .mv2-chip:hover,
.v3-tb-chips .v3-af-chip:hover {
background: rgba(10, 132, 255, .22) !important;
border-color: rgba(10, 132, 255, .48) !important;
}
/* v7.90.4 · Stagger sutil para que las pills entren en secuencia
en lugar de todas al mismo tiempo. ~55ms entre cada una. */
.page-pills-strip > *:nth-child(1),
.sk-active-chips > *:nth-child(1),
.mv2-active-chips > *:nth-child(1),
.v3-tb-chips > *:nth-child(1) { animation-delay: 0ms; }
.page-pills-strip > *:nth-child(2),
.sk-active-chips > *:nth-child(2),
.mv2-active-chips > *:nth-child(2),
.v3-tb-chips > *:nth-child(2) { animation-delay: 55ms; }
.page-pills-strip > *:nth-child(3),
.sk-active-chips > *:nth-child(3),
.mv2-active-chips > *:nth-child(3),
.v3-tb-chips > *:nth-child(3) { animation-delay: 110ms; }
.page-pills-strip > *:nth-child(4),
.sk-active-chips > *:nth-child(4),
.mv2-active-chips > *:nth-child(4),
.v3-tb-chips > *:nth-child(4) { animation-delay: 165ms; }
.page-pills-strip > *:nth-child(5),
.sk-active-chips > *:nth-child(5),
.mv2-active-chips > *:nth-child(5),
.v3-tb-chips > *:nth-child(5) { animation-delay: 220ms; }
.page-pills-strip > *:nth-child(6),
.sk-active-chips > *:nth-child(6),
.mv2-active-chips > *:nth-child(6),
.v3-tb-chips > *:nth-child(6) { animation-delay: 275ms; }
.page-pills-strip > *:nth-child(n+7),
.sk-active-chips > *:nth-child(n+7),
.mv2-active-chips > *:nth-child(n+7),
.v3-tb-chips > *:nth-child(n+7) { animation-delay: 320ms; }
/* Forzar el color azul también en el icono X (svg) heredado */
.mv2-active-chips .mv2-chip svg,
.page-pills-strip .mv2-chip svg {
color: #0058B5 !important;
stroke: #0058B5 !important;
}
/* v7.90.5 · Spring suave y pulido — overshoot sutil (3% en lugar de 6%)
con duración generosa para que el rebote se sienta elegante, no brusco. */
@keyframes pillStripIn {
0% {
opacity: 0;
transform: scale(.86) translateY(-1px);
}
55% {
opacity: 1;
transform: scale(1.03) translateY(0);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Label prefijo dentro del pill (ej: "PAGO:", "ESTADO:") */
.page-pills-strip .v3-af-chip-label,
.page-pills-strip .tb-fpill-label,
.sk-active-chips .v3-af-chip-label,
.mv2-active-chips .tb-fpill-label,
.v3-tb-chips .v3-af-chip-label {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(10, 132, 255, .65);
}
/* Botón remove (X) dentro del pill */
.page-pills-strip .v3-af-chip-remove,
.page-pills-strip .tb-fpill-remove,
.page-pills-strip .mv2-chip svg,
.sk-active-chips .v3-af-chip-remove,
.mv2-active-chips .mv2-chip svg,
.v3-tb-chips .v3-af-chip-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
margin-left: 3px;
background: rgba(10, 132, 255, .14);
border: none;
border-radius: 50%;
color: #0058B5;
cursor: pointer;
flex-shrink: 0;
transition: background .12s, color .12s, transform .12s;
}
.page-pills-strip .v3-af-chip-remove:hover,
.sk-active-chips .v3-af-chip-remove:hover,
.v3-tb-chips .v3-af-chip-remove:hover {
background: rgba(10, 132, 255, .28);
color: #003C7A;
transform: scale(1.08);
}
.mv2-active-chips .mv2-chip svg {
width: 10px;
height: 10px;
padding: 3px;
}
/* "Limpiar todo" link dentro del strip */
.page-pills-strip .v3-af-clear-all,
.page-pills-strip .mv2-chip-clear,
.page-pills-strip .tb-fpill-clear-all,
.sk-active-chips .v3-af-clear-all,
.mv2-active-chips .mv2-chip-clear,
.v3-tb-chips .v3-af-clear-all {
height: 22px;
padding: 0 9px;
background: transparent;
border: none;
border-radius: 6px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(38, 38, 38, .50);
cursor: pointer;
transition: background .15s, color .15s;
margin-left: 4px;
}
.page-pills-strip .v3-af-clear-all:hover,
.sk-active-chips .v3-af-clear-all:hover,
.v3-tb-chips .v3-af-clear-all:hover {
background: rgba(38, 38, 38, .05);
color: #262626;
}
/* Topbar pills container queda OCULTO — la topbar ya no muta */
.topbar #tb-filter-pills {
display: none !important;
}
.topbar.tb-compact #tb-filter-pills,
.topbar.tb-stage-search-narrow #tb-filter-pills {
display: none !important;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.page-pills-strip,
.sk-active-chips,
.mv2-active-chips,
.v3-tb-chips {
transition-duration: 0.01ms !important;
}
.page-pills-strip .v3-af-chip,
.page-pills-strip .mv2-chip,
.page-pills-strip .tb-fpill {
animation-duration: 0.01ms !important;
}
}
/* ════════════════════════════════════════════════════════════════════
v7.91.0 · Modal de cierre de caja — rediseño Identity-First
- Status badge circular grande con checkmark stroke-draw
- Eyebrow mono + título Fraunces + date sub
- HERO total facturado (Fraunces 56px)
- KPI strip 3 cards (Operaciones / Ticket / Diferencia)
- Botón primario "Descargar PDF" Lacca Nera con sweep ember
- Stagger animations por componente
════════════════════════════════════════════════════════════════════ */
.cc-close-fx {
position: fixed !important;
inset: 0;
z-index: 9990;
display: flex !important;
align-items: center;
justify-content: center;
background: rgba(38, 38, 38, 0);
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
opacity: 0;
pointer-events: none;
transition: background .32s cubic-bezier(.32, .72, 0, 1),
backdrop-filter .32s cubic-bezier(.32, .72, 0, 1),
opacity .32s ease;
}
.cc-close-fx.show {
opacity: 1;
pointer-events: auto;
background: rgba(38, 38, 38, .42);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.cc-close-fx .cc-close-fx-card {
position: relative;
width: min(440px, 92vw);
background: #FFFFFF;
border-radius: 20px;
box-shadow: 0 0 0 1px rgba(38,38,38,.06), 0 12px 48px rgba(38,38,38,.22);
padding: 30px 28px 22px;
text-align: center;
transform: translateY(20px) scale(.94);
opacity: 0;
transition: transform .52s cubic-bezier(.34, 1.36, .64, 1),
opacity .42s cubic-bezier(.32, .72, 0, 1);
}
.cc-close-fx.show .cc-close-fx-card {
transform: translateY(0) scale(1);
opacity: 1;
}
.cc-close-fx .cc-close-fx-x {
position: absolute;
top: 14px;
right: 14px;
width: 30px;
height: 30px;
border-radius: 9px;
background: #F4F2F0;
border: 1px solid rgba(38,38,38,.05);
color: rgba(38,38,38,.55);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s, transform .12s;
opacity: 0;
animation: ccFxFadeIn .4s cubic-bezier(.32, .72, 0, 1) 600ms forwards;
}
.cc-close-fx .cc-close-fx-x:hover { background: #EBE8E6; color: #262626; }
.cc-close-fx .cc-close-fx-x:active { transform: scale(.92); }
.cc-close-fx .cc-fx-badge {
position: relative;
width: 68px;
height: 68px;
margin: 4px auto 14px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(140deg, #34C759 0%, #28A745 100%);
color: #FFFFFF !important;
box-shadow: 0 6px 18px rgba(52, 199, 89, .35);
transform: scale(0);
opacity: 0;
animation: ccFxBadgeIn .58s cubic-bezier(.34, 1.56, .64, 1) 180ms forwards,
ccFxBadgePulse 1.6s ease-out 740ms;
}
.cc-close-fx .cc-fx-badge-ring {
position: absolute;
inset: -8px;
border-radius: 50%;
border: 2px solid rgba(52, 199, 89, .25);
opacity: 0;
animation: ccFxRingIn .8s cubic-bezier(.32, .72, 0, 1) 360ms forwards;
}
.cc-close-fx .cc-fx-badge-check { z-index: 2; color: #FFFFFF !important; stroke: #FFFFFF !important; }
.cc-close-fx .cc-fx-badge-check path {
stroke: #FFFFFF !important;
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: ccFxCheckDraw .52s cubic-bezier(.32, .72, 0, 1) 420ms forwards;
}
@keyframes ccFxBadgeIn {
0% { opacity: 0; transform: scale(0); }
60% { opacity: 1; transform: scale(1.08); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes ccFxBadgePulse {
0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .35), 0 6px 18px rgba(52, 199, 89, .35); }
70% { box-shadow: 0 0 0 14px rgba(52, 199, 89, 0), 0 6px 18px rgba(52, 199, 89, .35); }
100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0), 0 6px 18px rgba(52, 199, 89, .35); }
}
@keyframes ccFxRingIn {
0% { opacity: 0; transform: scale(.6); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes ccFxCheckDraw {
to { stroke-dashoffset: 0; }
}
.cc-close-fx .cc-fx-eyebrow {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(38,38,38,.5);
margin: 0;
opacity: 0;
transform: translateY(8px);
animation: ccFxFadeUp .48s cubic-bezier(.32, .72, 0, 1) 380ms forwards;
}
.cc-close-fx .cc-fx-title {
margin: 6px 0 4px;
font-family: var(--display, 'Fraunces', serif);
font-size: 26px;
font-weight: 500;
letter-spacing: -.02em;
color: #262626;
line-height: 1.1;
opacity: 0;
transform: translateY(8px);
animation: ccFxFadeUp .52s cubic-bezier(.32, .72, 0, 1) 460ms forwards;
}
.cc-close-fx .cc-fx-date {
font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
font-size: 12.5px;
font-weight: 500;
color: rgba(38,38,38,.55);
margin-bottom: 22px;
opacity: 0;
transform: translateY(6px);
animation: ccFxFadeUp .48s cubic-bezier(.32, .72, 0, 1) 540ms forwards;
}
.cc-close-fx .cc-fx-hero {
margin: 6px 0 22px;
padding: 18px 0 16px;
border-top: 1px solid rgba(38,38,38,.06);
border-bottom: 1px solid rgba(38,38,38,.06);
opacity: 0;
transform: translateY(10px);
animation: ccFxFadeUp .56s cubic-bezier(.32, .72, 0, 1) 620ms forwards;
}
.cc-close-fx .cc-fx-hero-label {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(38,38,38,.45);
margin-bottom: 6px;
}
.cc-close-fx .cc-fx-hero-amount {
font-family: var(--display, 'Fraunces', serif);
font-size: 56px;
font-weight: 500;
letter-spacing: -.025em;
color: #262626;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.cc-close-fx .cc-close-fx-kpis {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
margin: 0 0 22px;
opacity: 0;
transform: translateY(10px);
animation: ccFxFadeUp .56s cubic-bezier(.32, .72, 0, 1) 720ms forwards;
}
.cc-close-fx .cc-close-fx-kpi {
padding: 8px 6px;
text-align: center;
position: relative;
}
.cc-close-fx .cc-close-fx-kpi:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 12%;
bottom: 12%;
width: 1px;
background: rgba(38,38,38,.08);
}
.cc-close-fx .cc-close-fx-kpi-l {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 8.5px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(38,38,38,.48);
margin-bottom: 5px;
}
.cc-close-fx .cc-close-fx-kpi-v {
font-family: var(--display, 'Fraunces', serif);
font-size: 19px;
font-weight: 500;
letter-spacing: -.012em;
color: #262626;
font-variant-numeric: tabular-nums;
}
.cc-close-fx .cc-close-fx-kpi-v.ccfx-dif-pos { color: #28A745; }
.cc-close-fx .cc-close-fx-kpi-v.ccfx-dif-neg { color: #DC3545; }
.cc-close-fx .cc-close-fx-kpi-v.ccfx-dif-zero { color: rgba(38,38,38,.65); }
.cc-close-fx .cc-fx-confirm {
font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
font-size: 13px;
font-weight: 500;
color: rgba(38,38,38,.62);
margin-bottom: 16px;
opacity: 0;
transform: translateY(6px);
animation: ccFxFadeUp .48s cubic-bezier(.32, .72, 0, 1) 820ms forwards;
}
.cc-close-fx .cc-fx-actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 4px;
}
.cc-close-fx .cc-fx-cta-primary {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 48px;
padding: 0 22px;
background: #262626;
border: none;
border-radius: 12px;
font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
font-size: 14.5px;
font-weight: 600;
letter-spacing: -.005em;
/* !important porque regla legacy "#pages * { color: inherit }" tiene mayor especificidad */
color: #FFFFFF !important;
cursor: pointer;
overflow: hidden;
opacity: 0;
transform: translateY(8px);
animation: ccFxFadeUp .5s cubic-bezier(.32, .72, 0, 1) 900ms forwards;
transition: background .18s, transform .14s, box-shadow .18s;
box-shadow: 0 4px 14px rgba(38,38,38,.18);
}
/* SVG del icono download también blanco */
.cc-close-fx .cc-fx-cta-primary svg {
color: #FFFFFF !important;
stroke: #FFFFFF !important;
flex-shrink: 0;
}
.cc-close-fx .cc-fx-cta-primary span {
color: #FFFFFF !important;
}
.cc-close-fx .cc-fx-cta-primary:hover {
background: #1A1A1A;
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(38,38,38,.26);
}
.cc-close-fx .cc-fx-cta-primary:active { transform: translateY(0) scale(.98); }
.cc-close-fx .cc-fx-cta-primary::before {
content: '';
position: absolute;
top: 0; left: -120%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(232, 102, 58, .42), transparent);
transition: left .65s cubic-bezier(.32, .72, 0, 1);
pointer-events: none;
}
.cc-close-fx .cc-fx-cta-primary:hover::before { left: 120%; }
.cc-close-fx .cc-fx-cta-primary svg { flex-shrink: 0; }
.cc-close-fx .cc-fx-cta-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 20px;
background: transparent;
border: 1px solid rgba(38,38,38,.10);
border-radius: 10px;
font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
font-size: 13.5px;
font-weight: 500;
letter-spacing: -.005em;
color: rgba(38,38,38,.72);
cursor: pointer;
opacity: 0;
transform: translateY(8px);
animation: ccFxFadeUp .5s cubic-bezier(.32, .72, 0, 1) 980ms forwards;
transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.cc-close-fx .cc-fx-cta-ghost:hover {
background: #F7F6F5;
border-color: rgba(38,38,38,.18);
color: #262626;
}
.cc-close-fx .cc-fx-cta-ghost:active { transform: scale(.98); }
@keyframes ccFxFadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes ccFxFadeIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.cc-close-fx,
.cc-close-fx .cc-close-fx-card,
.cc-close-fx * {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ════════════════════════════════════════════════════════════════════
v7.92.0 · Sidebar v2 (sb2) refinement
- Más respiro vertical entre items (margin)
- Padding interior más generoso
- Eliminado el rail ember ::before del active state (era el "rectángulo")
════════════════════════════════════════════════════════════════════ */
/* Más respiro vertical + padding interior más generoso */
.sb2-section .tb-dd-item,
.tb-dropdown-inner .tb-dd-item {
margin: 2px 0 !important;
padding: 11px 12px !important;
border-radius: 10px !important;
}
/* Eliminar el rail ember vertical de 3px que tenía el active state */
.sb2-section .tb-dd-item.active::before,
.tb-dropdown-inner .tb-dd-item.active::before,
.tb-dd-item.active::before {
display: none !important;
content: none !important;
}
/* Active state limpio: pill blanca elevada (sin rail) */
.sb2-section .tb-dd-item.active,
.tb-dropdown-inner .tb-dd-item.active {
background: #FFFFFF !important;
box-shadow:
0 0 0 1px rgba(38,38,38,.04),
0 2px 6px rgba(38,38,38,.06) !important;
font-weight: 600 !important;
}
/* Icon ember vibrante en active */
.sb2-section .tb-dd-item.active .tb-dd-icon,
.tb-dropdown-inner .tb-dd-item.active .tb-dd-icon {
color: var(--accent-warm, #E8663A) !important;
}
/* ════════════════════════════════════════════════════════════════════
v7.93.0 · FIDELIZACIÓN — Página profesional Identity-First Luxe
Diferenciada con hero oscuro warm + niveles con identidad cromática propia.
SELECTO: bronce champagne #9C8E7F
PRIVADO: noir #1A1A1A
LEGADO: gold signature #C9A961
════════════════════════════════════════════════════════════════════ */
#page-fidelizacion.fp {
padding: 0;
background: transparent;
min-height: 100%;
}
#page-fidelizacion.fp.active {
display: block;
}
/* ─── HERO LUXE ─── */
.fp-hero {
position: relative;
margin: -46px -46px 0;
padding: 46px 46px 36px;
background: linear-gradient(135deg, #1A1410 0%, #2B1F18 45%, #1F1813 100%);
color: #F5EFE0;
overflow: hidden;
border-radius: 20px 20px 0 0;
}
@keyframes fpPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(201, 169, 97, .18); }
50% { box-shadow: 0 0 0 6px rgba(201, 169, 97, .06); }
}
/* KPI STRIP en hero */
.fp-kpi-strip {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
gap: 0;
padding: 22px 0 4px;
border-top: 1px solid rgba(245, 239, 224, .08);
}
.fp-kpi { padding: 0 6px; }
.fp-kpi-eyebrow {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(245, 239, 224, .42) !important;
margin-bottom: 6px;
}
/* ─── FILTERS (tabs + alerts) ─── */
.fp-filters {
padding: 22px 0 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.fp-tabs {
display: flex;
gap: 0;
background: rgba(38, 38, 38, .04);
border: 1px solid rgba(38, 38, 38, .06);
border-radius: 11px;
padding: 4px;
width: fit-content;
}
.fp-tab {
display: inline-flex;
align-items: center;
gap: 7px;
height: 34px;
padding: 0 14px;
background: transparent;
border: none;
border-radius: 8px;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 12.5px;
font-weight: 500;
letter-spacing: -.005em;
color: rgba(38, 38, 38, .58) !important;
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.fp-tab:hover {
background: rgba(38, 38, 38, .04);
color: #262626 !important;
}
.fp-tab.active {
background: #FFFFFF;
color: #262626 !important;
font-weight: 600;
box-shadow: 0 0 0 1px rgba(38, 38, 38, .045), 0 2px 6px rgba(38, 38, 38, .06);
}
.fp-tab-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.fp-tab--selecto .fp-tab-dot { background: #9C8E7F; }
.fp-tab--privado .fp-tab-dot { background: #1A1A1A; }
.fp-tab--legado .fp-tab-dot { background: #C9A961; }
.fp-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: rgba(38, 38, 38, .08);
border-radius: 5px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10px;
font-weight: 700;
letter-spacing: .02em;
color: rgba(38, 38, 38, .65) !important;
}
.fp-tab.active .fp-tab-count {
background: rgba(38, 38, 38, .12);
color: #262626 !important;
}
/* Alert chips horizontales */
.fp-alerts {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.fp-alert {
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
padding: 0 12px 0 10px;
background: rgba(232, 102, 58, .06);
border: 1px solid rgba(232, 102, 58, .14);
border-radius: 9999px;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 12px;
font-weight: 500;
letter-spacing: -.005em;
color: rgba(140, 69, 23, .82) !important;
cursor: pointer;
transition: background .15s ease, border-color .15s ease, transform .14s;
}
.fp-alert:hover {
background: rgba(232, 102, 58, .12);
border-color: rgba(232, 102, 58, .26);
}
.fp-alert.active {
background: #262626;
border-color: #262626;
color: #F5EFE0 !important;
}
.fp-alert.active .fp-alert-count { background: rgba(245, 239, 224, .14); color: #F5EFE0 !important; }
.fp-alert-ico { font-size: 14px; }
.fp-alert-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: rgba(232, 102, 58, .18);
border-radius: 5px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10px;
font-weight: 700;
color: rgba(140, 69, 23, .92) !important;
}
/* Esconder alert si count === 0 (manejo por JS con hidden) */
.fp-alert[hidden] { display: none; }
/* ─── TOOLBAR (search + sort) ─── */
.fp-toolbar {
display: flex;
align-items: center;
gap: 14px;
margin: 18px 0 16px;
padding: 14px 16px;
background: #FFFFFF;
border: 1px solid rgba(38, 38, 38, .055);
border-radius: 12px;
}
.fp-search-wrap {
position: relative;
flex: 1 1 auto;
display: flex;
align-items: center;
}
.fp-search-ico {
position: absolute;
left: 12px;
color: rgba(38, 38, 38, .42);
pointer-events: none;
}
.fp-search-input {
flex: 1;
height: 36px;
padding: 0 36px 0 36px;
background: rgba(38, 38, 38, .04);
border: 1px solid transparent;
border-radius: 9px;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 13px;
color: #262626 !important;
outline: none;
transition: background .15s ease, border-color .15s ease;
width: 100%;
}
.fp-search-input:focus {
background: #FFFFFF;
border-color: rgba(232, 102, 58, .42);
}
.fp-search-input::placeholder { color: rgba(38, 38, 38, .42); }
.fp-search-clr {
position: absolute;
right: 8px;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(38, 38, 38, .08);
border: none;
color: rgba(38, 38, 38, .65);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s, transform .12s;
}
.fp-search-clr:hover { background: rgba(38, 38, 38, .16); }
.fp-sort {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.fp-sort-label {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(38, 38, 38, .48) !important;
}
.fp-sort-select {
height: 32px;
padding: 0 28px 0 10px;
background: rgba(38, 38, 38, .04);
border: 1px solid rgba(38, 38, 38, .08);
border-radius: 8px;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 12px;
color: #262626 !important;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
}
.fp-toolbar-meta {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 11px;
font-weight: 500;
letter-spacing: .04em;
color: rgba(38, 38, 38, .58) !important;
flex-shrink: 0;
}
/* ─── LISTA DE CLIENTES ─── */
.fp-list {
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 40px;
}
.fp-list:empty::after {
content: "Sin clientes en este filtro";
display: block;
text-align: center;
padding: 60px 0;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 13.5px;
color: rgba(38, 38, 38, .48) !important;
}
.fp-card {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 16px;
align-items: center;
padding: 16px 18px;
background: #FFFFFF;
border: 1px solid rgba(38, 38, 38, .055);
border-radius: 14px;
cursor: pointer;
transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
animation: fpCardIn .42s cubic-bezier(.32, .72, 0, 1) both;
}
.fp-card:hover {
border-color: rgba(38, 38, 38, .12);
box-shadow: 0 4px 18px rgba(38, 38, 38, .06);
transform: translateY(-1px);
}
.fp-card-rail {
position: absolute;
left: 0;
top: 14px;
bottom: 14px;
width: 3px;
border-radius: 0 3px 3px 0;
background: rgba(38, 38, 38, .14);
}
.fp-card[data-nivel="selecto"] .fp-card-rail { background: #9C8E7F; }
.fp-card[data-nivel="privado"] .fp-card-rail { background: #1A1A1A; }
.fp-card[data-nivel="legado"] .fp-card-rail {
background: linear-gradient(180deg, #D8B872, #C9A961);
box-shadow: 0 0 12px rgba(201, 169, 97, .35);
}
@keyframes fpCardIn {
0% { opacity: 0; transform: translateY(6px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Avatar de cliente */
.fp-card-avatar {
position: relative;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--display, 'Fraunces', serif);
font-size: 17px;
font-weight: 500;
color: #F5EFE0 !important;
letter-spacing: -.01em;
flex-shrink: 0;
background: linear-gradient(135deg, #4A3F35, #2A1F18);
box-shadow: 0 2px 8px rgba(38, 38, 38, .12);
}
.fp-card[data-nivel="selecto"] .fp-card-avatar {
background: linear-gradient(135deg, #B5A793, #9C8E7F);
}
.fp-card[data-nivel="privado"] .fp-card-avatar {
background: linear-gradient(135deg, #3A3A3A, #1A1A1A);
}
.fp-card[data-nivel="legado"] .fp-card-avatar {
background: linear-gradient(135deg, #E5C988, #C9A961);
box-shadow: 0 0 0 2px rgba(201, 169, 97, .22), 0 4px 14px rgba(201, 169, 97, .28);
}
/* Cuerpo del card */
.fp-card-body { min-width: 0; }
.fp-card-row1 {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 4px;
}
.fp-card-name {
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 14.5px;
font-weight: 600;
letter-spacing: -.012em;
color: #262626 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fp-card-nivel {
display: inline-flex;
align-items: center;
gap: 5px;
height: 19px;
padding: 0 8px;
border-radius: 9999px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
flex-shrink: 0;
}
.fp-card-nivel[data-nivel="selecto"] {
background: rgba(156, 142, 127, .14);
color: #6B5F50 !important;
border: 1px solid rgba(156, 142, 127, .26);
}
.fp-card-nivel[data-nivel="privado"] {
background: rgba(38, 38, 38, .08);
color: #1A1A1A !important;
border: 1px solid rgba(38, 38, 38, .18);
}
.fp-card-nivel[data-nivel="legado"] {
background: rgba(201, 169, 97, .14);
color: #8C6F2E !important;
border: 1px solid rgba(201, 169, 97, .35);
}
.fp-card-meta {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 11px;
font-weight: 500;
letter-spacing: .02em;
color: rgba(38, 38, 38, .55) !important;
}
.fp-card-meta b {
color: #262626 !important;
font-weight: 600;
}
/* Progress bar al siguiente nivel */
.fp-card-progress {
margin-top: 6px;
height: 4px;
background: rgba(38, 38, 38, .06);
border-radius: 2px;
overflow: hidden;
}
.fp-card-progress-fill {
height: 100%;
border-radius: 2px;
transition: width .6s cubic-bezier(.32, .72, 0, 1);
}
.fp-card[data-nivel="selecto"] .fp-card-progress-fill { background: linear-gradient(90deg, #B5A793, #9C8E7F); }
.fp-card[data-nivel="privado"] .fp-card-progress-fill { background: linear-gradient(90deg, #3A3A3A, #1A1A1A); }
.fp-card[data-nivel="legado"] .fp-card-progress-fill { background: linear-gradient(90deg, #D8B872, #C9A961); }
/* Flags icons en la card */
.fp-card-flags {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-top: 6px;
}
.fp-card-flag {
display: inline-flex;
align-items: center;
gap: 4px;
height: 18px;
padding: 0 7px;
background: rgba(38, 38, 38, .04);
border-radius: 5px;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 10.5px;
font-weight: 500;
color: rgba(38, 38, 38, .65) !important;
}
.fp-card-flag--cumple {
background: rgba(232, 102, 58, .08);
color: rgba(140, 69, 23, .82) !important;
}
.fp-card-flag--gift {
background: rgba(52, 199, 89, .10);
color: #1C6A37 !important;
}
.fp-card-flag--kit {
background: rgba(201, 169, 97, .14);
color: #8C6F2E !important;
}
/* Actions del card (derecha) */
.fp-card-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.fp-card-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(38, 38, 38, .04);
border: 1px solid rgba(38, 38, 38, .055);
border-radius: 9px;
color: rgba(38, 38, 38, .65) !important;
cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s;
}
.fp-card-action:hover {
background: #FFFFFF;
border-color: rgba(38, 38, 38, .14);
color: #262626 !important;
}
.fp-card-action--wa:hover {
background: rgba(37, 211, 102, .12);
border-color: rgba(37, 211, 102, .35);
color: #128C7E !important;
}
.fp-card-action:active { transform: scale(.92); }
/* ─── DRAWER DETALLE ─── */
/* v7.93.12 · Drawer Fidelización — patrón unificado con drawer de Movimientos
Floating drawer con altura fija, scroll propio, overlay gradient hacia la derecha. */
.fp-drawer {
/* Contenedor lógico (no usado visualmente — overlay + panel son hijos directos) */
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9700;
}
.fp-drawer-backdrop {
position: fixed;
inset: 0;
background: linear-gradient(
to right,
transparent 0%,
transparent 30%,
rgba(26,20,16,.012) 44%,
rgba(26,20,16,.04) 55%,
rgba(26,20,16,.08) 65%,
rgba(26,20,16,.13) 75%,
rgba(26,20,16,.17) 85%,
rgba(26,20,16,.20) 94%,
rgba(26,20,16,.22) 100%
);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
transparent 30%,
rgba(0,0,0,.05) 44%,
rgba(0,0,0,.18) 55%,
rgba(0,0,0,.38) 65%,
rgba(0,0,0,.58) 75%,
rgba(0,0,0,.78) 85%,
rgba(0,0,0,.92) 94%,
black 100%
);
mask-image: linear-gradient(
to right,
transparent 0%,
transparent 30%,
rgba(0,0,0,.05) 44%,
rgba(0,0,0,.18) 55%,
rgba(0,0,0,.38) 65%,
rgba(0,0,0,.58) 75%,
rgba(0,0,0,.78) 85%,
rgba(0,0,0,.92) 94%,
black 100%
);
z-index: 9700;
opacity: 0;
pointer-events: none;
transition: opacity .42s cubic-bezier(.16,1,.3,1);
}
.fp-drawer.is-open .fp-drawer-backdrop {
opacity: 1;
pointer-events: auto;
}
.fp-drawer-panel {
position: fixed;
top: 12px;
bottom: 12px;
right: -460px;
width: 440px;
max-width: 92vw;
background: #FFFFFF;
border: none;
border-radius: 16px;
box-shadow:
inset 0 0 0 1px #FFFFFF,
-2px 2px 8px rgba(26,20,16,.06),
-8px 4px 24px rgba(26,20,16,.08),
-20px 8px 48px rgba(26,20,16,.06);
display: flex;
flex-direction: column;
overflow: hidden;
transition: right 0.42s cubic-bezier(0.16,1,0.3,1);
z-index: 9710;
pointer-events: auto;
transform: none;
}
.fp-drawer.is-open .fp-drawer-panel {
right: 12px;
}
/* Scroll interno del contenido */
.fp-drawer-content {
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
body.fp-drawer-open { overflow: hidden; }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.fp-hero-eyebrow-dot,
.fp-card,
.fp-drawer,
.fp-drawer-panel,
.fp-hero-progressbar-fill,
.fp-card-progress-fill {
animation: none !important;
transition-duration: 0.01ms !important;
}
}
/* ════════════════════════════════════════════════════════════════════
v7.93.2 · SPRINT 1 — Action-first redesign
- STRIP TEMPORAL slim (reemplaza hero gigante)
- DASHBOARD 2 columnas 40/60
- Panel ACCIONES PARA HOY (action cards)
════════════════════════════════════════════════════════════════════ */
.fp-section-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(38, 38, 38, .55) !important;
}
.fp-actions-list {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Card de acción individual */
.fp-action-card {
position: relative;
display: grid;
grid-template-columns: 36px 1fr;
gap: 12px;
padding: 14px 14px 14px 16px;
background: #FFFFFF;
border: 1px solid rgba(38, 38, 38, .055);
border-radius: 12px;
transition: border-color .18s ease, box-shadow .18s ease, transform .12s;
animation: fpActionIn .42s cubic-bezier(.32, .72, 0, 1) both;
}
.fp-action-card:hover {
border-color: rgba(38, 38, 38, .12);
box-shadow: 0 4px 14px rgba(38, 38, 38, .05);
}
.fp-action-card[data-urgency="high"] { border-left: 3px solid #E8663A; }
.fp-action-card[data-urgency="medium"] { border-left: 3px solid #C9A961; }
.fp-action-card[data-urgency="low"] { border-left: 3px solid #9C8E7F; }
.fp-action-card[data-urgency="risk"] {
border-left: 3px solid #DC3545;
background: linear-gradient(135deg, rgba(220, 53, 69, .025), #FFFFFF 60%);
}
@keyframes fpActionIn {
0% { opacity: 0; transform: translateY(6px); }
100% { opacity: 1; transform: translateY(0); }
}
.fp-action-ico {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
background: rgba(38, 38, 38, .04);
border: 1px solid rgba(38, 38, 38, .045);
}
.fp-action-card[data-urgency="high"] .fp-action-ico {
background: rgba(232, 102, 58, .10);
border-color: rgba(232, 102, 58, .22);
}
.fp-action-card[data-urgency="medium"] .fp-action-ico {
background: rgba(201, 169, 97, .12);
border-color: rgba(201, 169, 97, .28);
}
.fp-action-card[data-urgency="risk"] .fp-action-ico {
background: rgba(220, 53, 69, .10);
border-color: rgba(220, 53, 69, .22);
}
.fp-action-body { min-width: 0; }
.fp-action-title {
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 13.5px;
font-weight: 600;
letter-spacing: -.012em;
color: #262626 !important;
margin-bottom: 2px;
}
.fp-action-sub {
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 12px;
font-weight: 500;
letter-spacing: -.005em;
color: rgba(38, 38, 38, .58) !important;
line-height: 1.4;
margin-bottom: 10px;
}
.fp-action-sub strong {
color: #262626 !important;
font-weight: 600;
}
.fp-action-cta {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 12px;
background: #262626;
border: none;
border-radius: 8px;
color: #FFFFFF !important;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 12px;
font-weight: 500;
letter-spacing: -.005em;
cursor: pointer;
transition: background .15s ease, transform .12s;
}
.fp-action-cta:hover { background: #1A1A1A; }
.fp-action-cta:active { transform: scale(.97); }
.fp-action-cta svg { color: #FFFFFF !important; flex-shrink: 0; }
.fp-action-cta--accent {
background: linear-gradient(135deg, #E8663A, #D4552A);
}
.fp-action-cta--accent:hover {
background: linear-gradient(135deg, #DA5A30, #C44C24);
}
.fp-action-cta--gold {
background: linear-gradient(135deg, #D8B872, #C9A961);
color: #4A3E22 !important;
}
.fp-action-cta--gold:hover {
background: linear-gradient(135deg, #C9A961, #B89651);
}
.fp-action-cta--gold svg { color: #4A3E22 !important; }
.fp-action-cta--ghost {
background: rgba(38, 38, 38, .04);
border: 1px solid rgba(38, 38, 38, .10);
color: rgba(38, 38, 38, .82) !important;
}
.fp-action-cta--ghost:hover {
background: rgba(38, 38, 38, .08);
border-color: rgba(38, 38, 38, .18);
}
.fp-action-cta--ghost svg { color: rgba(38, 38, 38, .65) !important; }
/* Estado vacío celebratorio */
.fp-actions-empty {
padding: 36px 22px;
text-align: center;
background: linear-gradient(135deg, rgba(52, 199, 89, .04), #FFFFFF 70%);
border: 1px solid rgba(52, 199, 89, .18);
border-radius: 14px;
}
.fp-actions-empty-ico {
font-size: 32px;
margin-bottom: 8px;
display: block;
}
.fp-actions-empty-title {
font-family: var(--display, 'Fraunces', serif);
font-size: 17px;
font-weight: 500;
letter-spacing: -.015em;
color: #1C6A37 !important;
margin-bottom: 4px;
}
.fp-actions-empty-sub {
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 12.5px;
color: rgba(28, 106, 55, .72) !important;
}
/* ════════════════════════════════════════════════════════════════════
v7.93.3 · SPRINT 2 — Widgets Vista General (columna derecha)
- Membros del programa (3 cards niveles con LEGADO gold)
- Leaderboard top 5
- Próximos cumples (7 días)
- Momentum del mes
════════════════════════════════════════════════════════════════════ */
.fp-widget {
background: #FFFFFF;
border: 1px solid rgba(38, 38, 38, .055);
border-radius: 14px;
padding: 16px 18px 14px;
}
.fp-widget .fp-section-head {
margin-bottom: 14px;
padding: 0;
}
.fp-widget-period-label {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(38, 38, 38, .42) !important;
}
.fp-trend {
margin-left: 6px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 11px;
color: rgba(38, 38, 38, .45) !important;
}
/* ─── WIDGET: MEMBROS ─── */
.fp-membros-grid {
display: grid;
grid-template-columns: 1fr 1fr 1.4fr;
gap: 10px;
}
/* ─── WIDGET: LEADERBOARD ─── */
.fp-leaderboard {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
}
.fp-leaderboard-row {
display: grid;
grid-template-columns: 24px 1fr auto;
align-items: center;
gap: 12px;
padding: 10px 4px;
border-bottom: 1px solid rgba(38, 38, 38, .045);
cursor: pointer;
transition: background .15s ease;
border-radius: 8px;
margin: 0 -4px;
padding-left: 8px;
padding-right: 8px;
}
.fp-leaderboard-row:last-child { border-bottom: none; }
.fp-leaderboard-row:hover { background: rgba(38, 38, 38, .03); }
.fp-leaderboard-rank {
font-family: var(--display, 'Fraunces', serif);
font-size: 17px;
font-weight: 500;
color: rgba(38, 38, 38, .42) !important;
text-align: center;
font-variant-numeric: tabular-nums;
}
.fp-leaderboard-row[data-rank="1"] .fp-leaderboard-rank { color: #C9A961 !important; }
.fp-leaderboard-row[data-rank="2"] .fp-leaderboard-rank { color: #9C8E7F !important; }
.fp-leaderboard-row[data-rank="3"] .fp-leaderboard-rank { color: #B0764A !important; }
.fp-leaderboard-info { min-width: 0; }
.fp-leaderboard-name {
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 13px;
font-weight: 600;
letter-spacing: -.01em;
color: #262626 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
gap: 7px;
}
.fp-leaderboard-name-star {
color: #C9A961;
font-size: 11px;
text-shadow: 0 0 6px rgba(201, 169, 97, .45);
}
.fp-leaderboard-meta {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10px;
font-weight: 500;
color: rgba(38, 38, 38, .48) !important;
letter-spacing: .04em;
text-transform: uppercase;
margin-top: 2px;
}
.fp-leaderboard-pts {
font-family: var(--display, 'Fraunces', serif);
font-size: 16px;
font-weight: 500;
color: #262626 !important;
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
}
.fp-leaderboard-pts-star {
color: #E8663A;
font-size: 11px;
margin-right: 2px;
}
.fp-leaderboard-row[data-nivel="legado"] .fp-leaderboard-pts {
color: #8C6F2E !important;
}
.fp-leaderboard-empty {
padding: 22px 0;
text-align: center;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 12.5px;
color: rgba(38, 38, 38, .48) !important;
}
/* ─── WIDGET: PRÓXIMOS CUMPLES ─── */
.fp-cumples-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
}
.fp-cumple-row {
display: grid;
grid-template-columns: 32px 1fr auto auto;
align-items: center;
gap: 10px;
padding: 9px 4px;
border-bottom: 1px solid rgba(38, 38, 38, .045);
cursor: pointer;
transition: background .15s ease;
margin: 0 -4px;
padding-left: 8px;
padding-right: 8px;
border-radius: 6px;
}
.fp-cumple-row:last-child { border-bottom: none; }
.fp-cumple-row:hover { background: rgba(232, 102, 58, .04); }
.fp-cumple-date {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: rgba(232, 102, 58, .08);
border: 1px solid rgba(232, 102, 58, .18);
border-radius: 8px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10px;
font-weight: 700;
color: rgba(140, 69, 23, .82) !important;
flex-direction: column;
line-height: 1.1;
letter-spacing: .02em;
}
.fp-cumple-date-day { font-size: 11px; }
.fp-cumple-date-mon { font-size: 7.5px; opacity: .75; }
.fp-cumple-name {
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 13px;
font-weight: 500;
letter-spacing: -.005em;
color: #262626 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fp-cumple-countdown {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .04em;
color: rgba(140, 69, 23, .82) !important;
}
.fp-cumple-wa {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
background: rgba(37, 211, 102, .08);
border: 1px solid rgba(37, 211, 102, .22);
color: #128C7E !important;
cursor: pointer;
transition: background .15s ease, transform .12s;
}
.fp-cumple-wa:hover { background: rgba(37, 211, 102, .16); transform: scale(1.06); }
.fp-cumples-empty {
padding: 18px 0;
text-align: center;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 12px;
color: rgba(38, 38, 38, .48) !important;
}
/* ─── WIDGET: MOMENTUM ─── */
.fp-momentum-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.fp-momentum-item {
padding: 12px 10px;
background: rgba(38, 38, 38, .025);
border: 1px solid rgba(38, 38, 38, .06);
border-radius: 10px;
text-align: center;
}
.fp-momentum-item--up {
background: rgba(52, 199, 89, .06);
border-color: rgba(52, 199, 89, .18);
}
.fp-momentum-item--down {
background: rgba(220, 53, 69, .04);
border-color: rgba(220, 53, 69, .12);
}
.fp-momentum-arrow {
font-family: var(--display, 'Fraunces', serif);
font-size: 20px;
font-weight: 500;
line-height: 1;
color: rgba(38, 38, 38, .55) !important;
margin-bottom: 2px;
}
.fp-momentum-item--up .fp-momentum-arrow { color: #1C6A37 !important; }
.fp-momentum-item--down .fp-momentum-arrow { color: #B33A45 !important; }
.fp-momentum-value {
font-family: var(--display, 'Fraunces', serif);
font-size: 22px;
font-weight: 500;
letter-spacing: -.012em;
color: #262626 !important;
font-variant-numeric: tabular-nums;
line-height: 1.05;
margin-bottom: 4px;
}
.fp-momentum-item--up .fp-momentum-value { color: #1C6A37 !important; }
.fp-momentum-item--down .fp-momentum-value { color: #B33A45 !important; }
.fp-momentum-label {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 8.5px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(38, 38, 38, .55) !important;
}
/* Responsive: stack vertical bajo 1100px */
@media (max-width: 720px) {
.fp-membros-grid {
grid-template-columns: 1fr;
}
.fp-momentum-grid {
grid-template-columns: 1fr;
}
}
/* ─── Toolbar más compacto ─── */
.fp-toolbar {
margin-top: 20px;
margin-bottom: 14px;
}
/* Esconder tabs viejas + alerts (reemplazados por widgets de SPRINT 2) */
.fp-filters {
display: none !important;
}
/* ─── GRUPO con header de nivel ─── */
.fp-group {
margin-bottom: 20px;
animation: fpGroupIn .42s cubic-bezier(.32, .72, 0, 1) both;
}
.fp-group:last-child { margin-bottom: 0; }
@keyframes fpGroupIn {
0% { opacity: 0; transform: translateY(4px); }
100% { opacity: 1; transform: translateY(0); }
}
.fp-group-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
padding: 0 2px;
}
.fp-group-head-left {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.fp-group-ico {
font-family: var(--display, 'Fraunces', serif);
font-size: 14px;
line-height: 1;
}
.fp-group[data-nivel="selecto"] .fp-group-ico { color: #9C8E7F; }
.fp-group[data-nivel="privado"] .fp-group-ico { color: #1A1A1A; }
.fp-group[data-nivel="legado"] .fp-group-ico {
color: #C9A961;
text-shadow: 0 0 8px rgba(201, 169, 97, .5);
}
.fp-group-name {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10px;
font-weight: 700;
letter-spacing: .26em;
text-transform: uppercase;
color: rgba(38, 38, 38, .72) !important;
}
.fp-group[data-nivel="legado"] .fp-group-name {
color: #8C6F2E !important;
}
.fp-group-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 7px;
background: rgba(38, 38, 38, .06);
border-radius: 9999px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10px;
font-weight: 700;
color: rgba(38, 38, 38, .55) !important;
}
.fp-group[data-nivel="legado"] .fp-group-count {
background: rgba(201, 169, 97, .14);
color: #8C6F2E !important;
}
.fp-group-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(38, 38, 38, .12), transparent 60%);
}
.fp-group[data-nivel="legado"] .fp-group-line {
background: linear-gradient(90deg, rgba(201, 169, 97, .35), transparent 60%);
}
.fp-group-cards {
display: flex;
flex-direction: column;
gap: 8px;
}
/* ─── Cards refinadas y compactas ─── */
.fp-list .fp-card {
padding: 12px 16px;
gap: 14px;
background: #FFFFFF;
border-radius: 12px;
}
/* Quitar la rail card antigua para usar border-left semántico más sutil */
.fp-card-rail {
display: none;
}
.fp-card[data-nivel="selecto"] {
border-left: 3px solid #9C8E7F;
}
.fp-card[data-nivel="privado"] {
border-left: 3px solid #1A1A1A;
}
/* LEGADO premium card: dark glass + gold accents */
.fp-card[data-nivel="legado"] {
background: linear-gradient(135deg, #1F1813 0%, #2B1F18 50%, #1F1813 100%);
border: 1px solid rgba(201, 169, 97, .28);
border-left: 3px solid #C9A961;
position: relative;
overflow: hidden;
}
.fp-card[data-nivel="legado"]::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 280px;
height: 200%;
background: radial-gradient(circle, rgba(201, 169, 97, .14) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.fp-card[data-nivel="legado"]:hover {
border-color: rgba(201, 169, 97, .48);
box-shadow: 0 6px 22px rgba(201, 169, 97, .18);
}
.fp-card[data-nivel="legado"] .fp-card-body,
.fp-card[data-nivel="legado"] .fp-card-actions {
position: relative;
z-index: 1;
}
.fp-card[data-nivel="legado"] .fp-card-name {
color: #F5EFE0 !important;
}
.fp-card[data-nivel="legado"] .fp-card-meta {
color: rgba(245, 239, 224, .65) !important;
}
.fp-card[data-nivel="legado"] .fp-card-meta b {
color: #F5EFE0 !important;
}
.fp-card[data-nivel="legado"] .fp-card-flag {
background: rgba(245, 239, 224, .08);
color: rgba(245, 239, 224, .82) !important;
}
.fp-card[data-nivel="legado"] .fp-card-flag--cumple {
background: rgba(232, 102, 58, .22);
color: #FFB89A !important;
}
.fp-card[data-nivel="legado"] .fp-card-flag--gift {
background: rgba(52, 199, 89, .22);
color: #5BD27A !important;
}
.fp-card[data-nivel="legado"] .fp-card-action {
background: rgba(245, 239, 224, .08);
border-color: rgba(245, 239, 224, .14);
color: rgba(245, 239, 224, .65) !important;
}
.fp-card[data-nivel="legado"] .fp-card-action:hover {
background: rgba(245, 239, 224, .14);
color: #F5EFE0 !important;
}
.fp-card[data-nivel="legado"] .fp-card-action--wa:hover {
background: rgba(37, 211, 102, .22);
border-color: rgba(37, 211, 102, .42);
color: #5BFFA0 !important;
}
/* Avatar refinado en cards */
.fp-list .fp-card-avatar {
width: 38px;
height: 38px;
font-size: 14px;
}
.fp-card[data-nivel="legado"] .fp-card-avatar {
box-shadow: 0 0 0 2px rgba(201, 169, 97, .35), 0 4px 14px rgba(201, 169, 97, .26);
animation: fpLegadoAvatarGlow 3s ease-in-out infinite;
}
@keyframes fpLegadoAvatarGlow {
0%, 100% { box-shadow: 0 0 0 2px rgba(201, 169, 97, .35), 0 4px 14px rgba(201, 169, 97, .26); }
50% { box-shadow: 0 0 0 3px rgba(201, 169, 97, .5), 0 6px 20px rgba(201, 169, 97, .38); }
}
/* Progress bar más compacta en cards */
.fp-card-progress {
height: 3px;
margin-top: 5px;
}
/* ═══ DRAWER REDISEÑADO con TABS internos ═══ */
/* v7.93.12 · Background del drawer — override del antiguo gris (FAFAFA) por blanco */
.fp-drawer-panel { background: #FFFFFF; }
.fp-dr-tabs {
display: flex;
gap: 0;
padding: 0 24px;
background: #FFFFFF;
border-bottom: 1px solid rgba(38, 38, 38, .06);
position: sticky;
top: 0;
z-index: 4;
}
.fp-dr-tab {
flex: 1;
height: 42px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 12.5px;
font-weight: 500;
letter-spacing: -.005em;
color: rgba(38, 38, 38, .55) !important;
cursor: pointer;
transition: border-color .15s ease, color .15s ease;
}
.fp-dr-tab:hover {
color: #262626 !important;
}
.fp-dr-tab.active {
color: #262626 !important;
border-bottom-color: #262626;
font-weight: 600;
}
.fp-dr-tab-content {
padding: 20px 24px;
display: none;
}
.fp-dr-tab-content.active {
display: block;
animation: fpTabIn .26s ease;
}
@keyframes fpTabIn {
0% { opacity: 0; transform: translateY(4px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Hero del drawer */
.fp-dr-hero {
padding: 24px 24px 18px;
background: #FFFFFF;
border-bottom: 1px solid rgba(38, 38, 38, .06);
position: relative;
}
.fp-dr-hero-row {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 8px;
}
.fp-dr-hero .fp-card-avatar {
width: 60px;
height: 60px;
font-size: 22px;
}
.fp-dr-hero-info { min-width: 0; flex: 1; }
.fp-dr-hero-name {
font-family: var(--display, 'Fraunces', serif);
font-size: 24px;
font-weight: 500;
letter-spacing: -.018em;
color: #262626 !important;
line-height: 1.1;
margin-bottom: 6px;
}
.fp-dr-hero-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.fp-dr-hero-since {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(38, 38, 38, .48) !important;
}
/* LEGADO membership card style en hero */
.fp-dr-hero[data-nivel="legado"] {
background: linear-gradient(135deg, #1A1410 0%, #2B1F18 60%, #1F1813 100%);
border-bottom-color: rgba(201, 169, 97, .22);
overflow: hidden;
}
.fp-dr-hero[data-nivel="legado"]::before {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 280px;
height: 280px;
background: radial-gradient(circle, rgba(201, 169, 97, .25) 0%, transparent 60%);
pointer-events: none;
}
.fp-dr-hero[data-nivel="legado"] .fp-dr-hero-row,
.fp-dr-hero[data-nivel="legado"] .fp-dr-hero-info { position: relative; z-index: 1; }
.fp-dr-hero[data-nivel="legado"] .fp-dr-hero-name {
color: #F5EFE0 !important;
}
.fp-dr-hero[data-nivel="legado"] .fp-dr-hero-since {
color: rgba(245, 239, 224, .55) !important;
}
.fp-dr-hero[data-nivel="legado"] .fp-card-avatar {
box-shadow: 0 0 0 3px rgba(201, 169, 97, .42), 0 6px 20px rgba(201, 169, 97, .35);
animation: fpLegadoAvatarGlow 3s ease-in-out infinite;
}
.fp-dr-hero-watermark {
position: absolute;
bottom: -8px;
right: 18px;
font-family: var(--display, 'Fraunces', serif);
font-size: 64px;
font-weight: 400;
letter-spacing: -.02em;
color: rgba(201, 169, 97, .08) !important;
line-height: 1;
pointer-events: none;
user-select: none;
}
.fp-dr-close-v2 {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border-radius: 9px;
background: rgba(38, 38, 38, .04);
border: 1px solid rgba(38, 38, 38, .05);
color: rgba(38, 38, 38, .65) !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s ease;
z-index: 5;
}
.fp-dr-close-v2:hover {
background: rgba(38, 38, 38, .08);
}
.fp-dr-hero[data-nivel="legado"] .fp-dr-close-v2 {
background: rgba(245, 239, 224, .12);
border-color: rgba(245, 239, 224, .18);
color: rgba(245, 239, 224, .82) !important;
}
.fp-dr-hero[data-nivel="legado"] .fp-dr-close-v2:hover {
background: rgba(245, 239, 224, .22);
}
/* Stats grid en tab General */
.fp-dr-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 20px;
}
.fp-dr-stat {
padding: 12px 14px;
background: #FFFFFF;
border: 1px solid rgba(38, 38, 38, .06);
border-radius: 11px;
}
.fp-dr-stat-eyebrow {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 8.5px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(38, 38, 38, .45) !important;
margin-bottom: 4px;
}
.fp-dr-stat-value {
font-family: var(--display, 'Fraunces', serif);
font-size: 22px;
font-weight: 500;
letter-spacing: -.014em;
color: #262626 !important;
font-variant-numeric: tabular-nums;
line-height: 1.05;
}
.fp-dr-stat-sub {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10px;
color: rgba(38, 38, 38, .55) !important;
margin-top: 4px;
}
/* Progress card del drawer */
.fp-dr-progress-card {
padding: 14px 16px;
background: #FFFFFF;
border: 1px solid rgba(38, 38, 38, .06);
border-radius: 12px;
margin-bottom: 18px;
}
.fp-dr-progress-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
}
.fp-dr-progress-label {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(38, 38, 38, .55) !important;
}
.fp-dr-progress-pct {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 11px;
font-weight: 600;
color: #262626 !important;
}
.fp-dr-progress-track {
height: 6px;
background: rgba(38, 38, 38, .06);
border-radius: 3px;
overflow: hidden;
}
.fp-dr-progress-fill {
height: 100%;
border-radius: 3px;
transition: width .8s cubic-bezier(.32, .72, 0, 1);
}
.fp-dr-progress-fill[data-nivel="selecto"] { background: linear-gradient(90deg, #B5A793, #9C8E7F); }
.fp-dr-progress-fill[data-nivel="privado"] { background: linear-gradient(90deg, #3A3A3A, #1A1A1A); }
.fp-dr-progress-fill[data-nivel="legado"] { background: linear-gradient(90deg, #D8B872, #C9A961); box-shadow: 0 0 8px rgba(201, 169, 97, .35); }
.fp-dr-progress-meta {
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 12px;
color: rgba(38, 38, 38, .58) !important;
margin-top: 8px;
}
.fp-dr-progress-meta b { color: #262626 !important; font-weight: 600; }
/* Card de nivel máximo (LEGADO max) */
.fp-dr-max-card {
padding: 16px 18px;
background: linear-gradient(135deg, rgba(201, 169, 97, .10), rgba(201, 169, 97, .04));
border: 1px solid rgba(201, 169, 97, .28);
border-radius: 12px;
text-align: center;
margin-bottom: 18px;
}
.fp-dr-max-title {
font-family: var(--display, 'Fraunces', serif);
font-size: 18px;
font-weight: 500;
color: #8C6F2E !important;
margin-bottom: 4px;
}
.fp-dr-max-sub {
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 12px;
color: rgba(140, 111, 46, .8) !important;
}
/* Sección checklist (beneficios HOY / activos) */
.fp-dr-section {
margin-bottom: 18px;
}
.fp-dr-section-label {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(38, 38, 38, .55) !important;
margin-bottom: 10px;
}
.fp-dr-checklist {
display: flex;
flex-direction: column;
gap: 6px;
}
.fp-dr-check {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: #FFFFFF;
border: 1px solid rgba(38, 38, 38, .06);
border-radius: 10px;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 13px;
font-weight: 500;
color: #262626 !important;
}
.fp-dr-check--active {
background: rgba(52, 199, 89, .06);
border-color: rgba(52, 199, 89, .22);
color: #1C6A37 !important;
}
.fp-dr-check--inactive {
color: rgba(38, 38, 38, .48) !important;
background: rgba(38, 38, 38, .025);
}
.fp-dr-check--cumple {
background: rgba(232, 102, 58, .08);
border-color: rgba(232, 102, 58, .22);
color: rgba(140, 69, 23, .92) !important;
font-weight: 600;
}
.fp-dr-check-ico {
flex-shrink: 0;
font-size: 13px;
}
/* Sparkline (tab Histórico) */
.fp-dr-spark-card {
padding: 16px 18px;
background: #FFFFFF;
border: 1px solid rgba(38, 38, 38, .06);
border-radius: 12px;
margin-bottom: 18px;
}
.fp-dr-spark-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 14px;
}
.fp-dr-spark-title {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(38, 38, 38, .55) !important;
}
.fp-dr-spark-total {
font-family: var(--display, 'Fraunces', serif);
font-size: 18px;
font-weight: 500;
color: #262626 !important;
font-variant-numeric: tabular-nums;
}
.fp-dr-spark {
position: relative;
height: 90px;
display: block;
}
.fp-dr-spark-grid {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
pointer-events: none;
}
.fp-dr-spark-grid-line {
height: 1px;
background: rgba(38, 38, 38, .04);
}
.fp-dr-spark svg {
width: 100%;
height: 100%;
}
.fp-dr-spark-bar {
fill: rgba(38, 38, 38, .12);
transition: fill .2s ease;
}
.fp-dr-spark-bar.is-current {
fill: #E8663A;
}
.fp-dr-spark-bar.is-legado {
fill: #C9A961;
}
.fp-dr-spark-bar:hover {
fill: #262626;
}
.fp-dr-spark-labels {
display: flex;
justify-content: space-between;
margin-top: 8px;
}
.fp-dr-spark-label {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 8.5px;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(38, 38, 38, .42) !important;
flex: 1;
text-align: center;
}
.fp-dr-spark-label.is-current {
color: #E8663A !important;
font-weight: 700;
}
/* Tab Beneficios — sección externos refinada */
.fp-dr-ben-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.fp-dr-ben-card {
padding: 13px 16px;
background: #FFFFFF;
border: 1px solid rgba(38, 38, 38, .06);
border-radius: 11px;
}
.fp-dr-ben-card-gold {
background: linear-gradient(135deg, rgba(201, 169, 97, .08), rgba(201, 169, 97, .03));
border-color: rgba(201, 169, 97, .28);
}
.fp-dr-ben-title {
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 13px;
font-weight: 600;
color: #262626 !important;
margin-bottom: 3px;
}
.fp-dr-ben-card-gold .fp-dr-ben-title { color: #8C6F2E !important; }
.fp-dr-ben-sub {
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 11.5px;
color: rgba(38, 38, 38, .58) !important;
line-height: 1.4;
}
.fp-dr-ben-card-gold .fp-dr-ben-sub { color: rgba(140, 111, 46, .82) !important; }
.fp-dr-ben-cta {
margin-top: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 12px;
background: linear-gradient(135deg, #D8B872, #C9A961);
border: none;
border-radius: 7px;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 11px;
font-weight: 600;
color: #4A3E22 !important;
cursor: pointer;
}
/* Footer drawer (acciones sticky bottom) */
.fp-dr-footer {
position: sticky;
bottom: 0;
margin-top: 20px;
padding: 14px 24px;
background: #FFFFFF;
border-top: 1px solid rgba(38, 38, 38, .06);
display: grid;
gap: 8px;
}
.fp-dr-cta-wa {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
padding: 0 18px;
background: #25D366;
border: none;
border-radius: 11px;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 13.5px;
font-weight: 600;
color: #FFFFFF !important;
cursor: pointer;
transition: background .15s ease, transform .12s;
}
.fp-dr-cta-wa:hover { background: #1FBD5C; }
.fp-dr-cta-wa:active { transform: scale(.98); }
.fp-dr-cta-wa svg { color: #FFFFFF !important; }
.fp-dr-cta-wa:disabled { opacity: .45; cursor: not-allowed; }
.fp-dr-cta-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 38px;
padding: 0 16px;
background: rgba(38, 38, 38, .04);
border: 1px solid rgba(38, 38, 38, .10);
border-radius: 10px;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 12.5px;
font-weight: 500;
color: #262626 !important;
cursor: pointer;
transition: background .15s ease;
}
.fp-dr-cta-secondary:hover {
background: rgba(38, 38, 38, .08);
}
/* ════════════════════════════════════════════════════════════════════
v7.93.5 · FASE 4 — Desglose de descuentos FID v3 en venta rápida
════════════════════════════════════════════════════════════════════ */
.vr-desc-fid-block {
margin-top: 12px;
padding: 10px 12px;
background: linear-gradient(135deg, rgba(10, 132, 255, .04), rgba(10, 132, 255, .02));
border: 1px solid rgba(10, 132, 255, .14);
border-radius: 9px;
animation: vrDescFidIn .32s cubic-bezier(.32, .72, 0, 1) both;
}
@keyframes vrDescFidIn {
0% { opacity: 0; transform: translateY(4px); }
100% { opacity: 1; transform: translateY(0); }
}
.vr-desc-fid-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono, 'JetBrains Mono', monospace) !important;
font-size: 8.5px !important;
font-weight: 700 !important;
letter-spacing: .18em !important;
text-transform: uppercase;
color: #0058B5 !important;
margin-bottom: 8px;
}
.vr-desc-fid-eyebrow-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: #0A84FF;
box-shadow: 0 0 0 2px rgba(10, 132, 255, .18);
}
.vr-desc-fid-list {
display: flex;
flex-direction: column;
gap: 5px;
}
.vr-desc-fid-item {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif) !important;
font-size: 11.5px !important;
}
.vr-desc-fid-label {
color: rgba(26, 20, 16, .72) !important;
font-weight: 500 !important;
}
.vr-desc-fid-monto {
color: #0058B5 !important;
font-weight: 600 !important;
font-family: var(--mono, 'JetBrains Mono', monospace) !important;
font-size: 11px !important;
}
/* Card cliente en venta — chip de nivel FID v3 */
.vr-cli-card-nivel-chip {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
height: 19px !important;
padding: 0 8px !important;
border-radius: 9999px !important;
font-family: var(--mono, 'JetBrains Mono', monospace) !important;
font-size: 9px !important;
font-weight: 600 !important;
letter-spacing: .14em !important;
text-transform: uppercase;
margin-left: 6px !important;
}
.vr-cli-card-nivel-chip[data-nivel="selecto"] {
background: rgba(156, 142, 127, .14);
color: #6B5F50 !important;
border: 1px solid rgba(156, 142, 127, .26);
}
.vr-cli-card-nivel-chip[data-nivel="privado"] {
background: rgba(38, 38, 38, .08);
color: #1A1A1A !important;
border: 1px solid rgba(38, 38, 38, .18);
}
.vr-cli-card-nivel-chip[data-nivel="legado"] {
background: rgba(201, 169, 97, .14);
color: #8C6F2E !important;
border: 1px solid rgba(201, 169, 97, .35);
}
.vr-cli-card-nivel-chip[data-nivel="legado"]::before {
content: '★';
font-size: 10px;
text-shadow: 0 0 4px rgba(201, 169, 97, .5);
}
/* CTA Aplicar producto gratis */
.vr-prodgratis-cta {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
margin-top: 8px !important;
height: 30px !important;
padding: 0 12px !important;
background: linear-gradient(135deg, #34C759, #28A745) !important;
border: none !important;
border-radius: 8px !important;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif) !important;
font-size: 12px !important;
font-weight: 600 !important;
color: #FFFFFF !important;
cursor: pointer;
transition: background .15s ease, transform .12s;
}
.vr-prodgratis-cta:hover {
background: linear-gradient(135deg, #2EB74E, #228B3D) !important;
}
.vr-prodgratis-cta:active { transform: scale(.97); }
/* ════════════════════════════════════════════════════════════════════
v7.93.11 · FIDELIZACIÓN — REFACTOR AL SISTEMA VISUAL ESTABLECIDO
Identity-First Light alineado a Movimientos/Stock/Cierre de Caja
════════════════════════════════════════════════════════════════════ */
/* Ocultar componentes legacy del refactor anterior */
#page-fidelizacion .fp-strip,
#page-fidelizacion .fp-dashboard,
#page-fidelizacion .fp-col-actions,
#page-fidelizacion .fp-col-overview,
#page-fidelizacion .fp-hero,
#page-fidelizacion .fp-hero-bg,
/* Sub-header simple estilo Movimientos */
#page-fidelizacion .fp-page-sub {
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 13px;
font-weight: 500;
color: rgba(38, 38, 38, .55);
letter-spacing: -.005em;
margin: 4px 0 22px;
}
#page-fidelizacion .fp-page-sub-sep {
margin: 0 8px;
color: rgba(38, 38, 38, .25);
}
/* KPI STRIP — replica del patrón Movimientos/Stock */
#page-fidelizacion .fp-kpi-strip {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 26px;
}
#page-fidelizacion .fp-kpi {
background: #FFFFFF;
border-radius: 14px;
box-shadow: 0 0 0 1px rgba(38, 38, 38, .045), 0 2px 6px rgba(38, 38, 38, .035);
padding: 16px 18px 14px;
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
#page-fidelizacion .fp-kpi-top {
display: flex;
justify-content: space-between;
align-items: center;
height: 18px;
}
#page-fidelizacion .fp-kpi-eyebrow {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(38, 38, 38, .58) !important;
}
#page-fidelizacion .fp-kpi-toggle {
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(38, 38, 38, .045);
border: none;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 15px;
font-weight: 500;
line-height: 1;
color: rgba(38, 38, 38, .42);
cursor: default;
}
#page-fidelizacion .fp-kpi-core { display: flex; flex-direction: column; gap: 2px; }
#page-fidelizacion .fp-kpi-num {
font-family: var(--display, 'Fraunces', serif);
font-size: 38px;
font-weight: 500;
letter-spacing: -.022em;
color: #262626 !important;
line-height: 1.02;
font-variant-numeric: tabular-nums;
}
#page-fidelizacion .fp-kpi-num-sub {
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 12px;
font-weight: 500;
color: rgba(38, 38, 38, .55) !important;
letter-spacing: -.005em;
}
#page-fidelizacion .fp-kpi-foot {
display: flex;
align-items: center;
gap: 7px;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 11.5px;
font-weight: 500;
color: rgba(38, 38, 38, .48) !important;
padding-top: 10px;
border-top: 1px solid rgba(38, 38, 38, .055);
}
#page-fidelizacion .fp-kpi-meta-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: #E8663A;
flex-shrink: 0;
}
#page-fidelizacion .fp-kpi-meta-dot--cumple { background: #C9A961; }
/* SECCIÓN editorial con titlebar */
#page-fidelizacion .fp-section { margin-bottom: 28px; }
#page-fidelizacion .fp-section-titlebar {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 14px;
gap: 14px;
}
#page-fidelizacion .fp-section-titlebar-left { min-width: 0; }
#page-fidelizacion .fp-section-titlebar-right {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
#page-fidelizacion .fp-section-eyebrow {
display: block;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(38, 38, 38, .48);
margin-bottom: 4px;
}
#page-fidelizacion .fp-section-title {
margin: 0;
font-family: var(--display, 'Fraunces', serif);
font-size: 22px;
font-weight: 500;
letter-spacing: -.018em;
color: #262626;
line-height: 1.15;
}
#page-fidelizacion .fp-section-meta {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .04em;
color: rgba(38, 38, 38, .55);
}
#page-fidelizacion .fp-section-meta span { color: #262626; }
#page-fidelizacion .fp-section-action {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 11px;
background: rgba(38, 38, 38, .045);
border: 1px solid rgba(38, 38, 38, .06);
border-radius: 9px;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 11.5px;
font-weight: 500;
letter-spacing: -.005em;
color: rgba(38, 38, 38, .82);
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
#page-fidelizacion .fp-section-action:hover {
background: rgba(38, 38, 38, .08);
border-color: rgba(38, 38, 38, .12);
}
#page-fidelizacion .fp-section-action svg { color: rgba(38, 38, 38, .55); }
/* ACCIONES HOY como tabla editorial limpia */
#page-fidelizacion .fp-actions-list {
background: #FFFFFF;
border-radius: 14px;
box-shadow: 0 0 0 1px rgba(38, 38, 38, .045), 0 2px 6px rgba(38, 38, 38, .035);
overflow: hidden;
display: block;
flex-direction: initial;
gap: 0;
}
#page-fidelizacion .fp-action-card {
display: grid !important;
grid-template-columns: 24px 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 18px;
border: none !important;
border-bottom: 1px solid rgba(38, 38, 38, .055) !important;
background: transparent !important;
border-radius: 0;
animation: fpRowIn .32s cubic-bezier(.32, .72, 0, 1) both;
}
#page-fidelizacion .fp-action-card:last-child { border-bottom: none !important; }
#page-fidelizacion .fp-action-card:hover {
background: rgba(38, 38, 38, .02) !important;
box-shadow: none !important;
transform: none;
}
@keyframes fpRowIn {
0% { opacity: 0; transform: translateY(4px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Dot semántico (en lugar de border-left ruidoso) */
#page-fidelizacion .fp-action-ico {
width: 8px;
height: 8px;
border-radius: 50%;
background: #C9A961 !important;
margin: 0 auto;
font-size: 0 !important;
padding: 0;
border: none !important;
}
#page-fidelizacion .fp-action-card[data-urgency="high"] .fp-action-ico { background: #E8663A !important; }
#page-fidelizacion .fp-action-card[data-urgency="medium"] .fp-action-ico { background: #C9A961 !important; }
#page-fidelizacion .fp-action-card[data-urgency="low"] .fp-action-ico { background: rgba(38, 38, 38, .25) !important; }
#page-fidelizacion .fp-action-card[data-urgency="risk"] .fp-action-ico { background: #E05252 !important; }
#page-fidelizacion .fp-action-body { min-width: 0; }
#page-fidelizacion .fp-action-title {
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 13.5px;
font-weight: 600;
letter-spacing: -.012em;
color: #262626;
margin-bottom: 2px;
}
#page-fidelizacion .fp-action-sub {
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 12px;
font-weight: 500;
letter-spacing: -.005em;
color: rgba(38, 38, 38, .55);
line-height: 1.4;
margin-bottom: 0;
}
#page-fidelizacion .fp-action-sub strong { color: #262626; font-weight: 600; }
#page-fidelizacion .fp-action-cta {
display: inline-flex !important;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 13px;
background: linear-gradient(158deg, #333 0%, #262626 100%) !important;
border: none !important;
border-radius: 9px;
color: #FFFFFF !important;
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: -.005em;
cursor: pointer;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(26, 20, 16, .14) !important;
transition: transform .12s, box-shadow .18s !important;
}
#page-fidelizacion .fp-action-cta:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(26, 20, 16, .18) !important;
}
#page-fidelizacion .fp-action-cta:active { transform: scale(.97); }
#page-fidelizacion .fp-action-cta svg { color: #FFFFFF !important; flex-shrink: 0; }
#page-fidelizacion .fp-action-cta--ghost {
background: rgba(38, 38, 38, .045) !important;
border: 1px solid rgba(38, 38, 38, .08) !important;
color: rgba(38, 38, 38, .82) !important;
box-shadow: none !important;
}
#page-fidelizacion .fp-action-cta--ghost svg { color: rgba(38, 38, 38, .55) !important; }
#page-fidelizacion .fp-action-cta--accent,
#page-fidelizacion .fp-action-cta--gold {
background: linear-gradient(158deg, #333 0%, #262626 100%) !important;
color: #FFFFFF !important;
}
/* Estado vacío editorial */
#page-fidelizacion .fp-actions-empty {
padding: 32px 22px;
text-align: center;
background: transparent !important;
border: none !important;
}
#page-fidelizacion .fp-actions-empty-ico { font-size: 22px; margin-bottom: 6px; display: block; color: #2EAD5C; }
#page-fidelizacion .fp-actions-empty-title {
font-family: var(--display, 'Fraunces', serif);
font-size: 17px;
font-weight: 500;
letter-spacing: -.015em;
color: #262626 !important;
margin-bottom: 3px;
}
#page-fidelizacion .fp-actions-empty-sub {
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 12.5px;
color: rgba(38, 38, 38, .55) !important;
}
/* VISTA GENERAL grid 2x2 widgets editoriales */
#page-fidelizacion .fp-overview-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#page-fidelizacion .fp-widget {
background: #FFFFFF !important;
border-radius: 14px;
box-shadow: 0 0 0 1px rgba(38, 38, 38, .045), 0 2px 6px rgba(38, 38, 38, .035) !important;
padding: 16px 18px;
border: none !important;
margin-bottom: 0 !important;
display: block !important;
}
#page-fidelizacion .fp-widget-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
#page-fidelizacion .fp-widget-eyebrow {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(38, 38, 38, .58);
}
#page-fidelizacion .fp-widget-tag {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
background: rgba(38, 38, 38, .055);
border-radius: 4px;
font-size: 8px;
}
#page-fidelizacion .fp-widget-count {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
color: rgba(38, 38, 38, .55);
}
#page-fidelizacion .fp-widget-period-label {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 9px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(38, 38, 38, .42);
}
/* MEMBROS rows — sin gradientes oscuros */
#page-fidelizacion .fp-membros-grid {
display: flex !important;
flex-direction: column;
gap: 0;
grid-template-columns: initial;
}
#page-fidelizacion .fp-membro-row {
display: grid !important;
grid-template-columns: 10px 80px 1fr auto;
align-items: center;
gap: 12px;
padding: 12px 0;
border: none !important;
background: transparent !important;
text-align: left;
cursor: pointer;
border-bottom: 1px solid rgba(38, 38, 38, .055) !important;
transition: background .15s ease;
border-radius: 0;
}
#page-fidelizacion .fp-membro-row:last-child { border-bottom: none !important; }
#page-fidelizacion .fp-membro-row:hover { background: rgba(38, 38, 38, .02) !important; transform: none !important; box-shadow: none !important; }
#page-fidelizacion .fp-membro-row-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
#page-fidelizacion .fp-membro-row--selecto .fp-membro-row-dot { background: #9C8E7F; }
#page-fidelizacion .fp-membro-row--privado .fp-membro-row-dot { background: #262626; }
#page-fidelizacion .fp-membro-row--legado .fp-membro-row-dot {
background: #C9A961;
box-shadow: 0 0 6px rgba(201, 169, 97, .5);
}
#page-fidelizacion .fp-membro-row-name {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
color: rgba(38, 38, 38, .68);
}
#page-fidelizacion .fp-membro-row--legado .fp-membro-row-name { color: #8C6F2E; }
#page-fidelizacion .fp-membro-row-value {
font-family: var(--display, 'Fraunces', serif);
font-size: 22px;
font-weight: 500;
letter-spacing: -.018em;
color: #262626;
font-variant-numeric: tabular-nums;
text-align: right;
background: transparent !important;
-webkit-background-clip: initial !important;
-webkit-text-fill-color: initial !important;
}
#page-fidelizacion .fp-membro-row--legado .fp-membro-row-value { color: #8C6F2E; }
#page-fidelizacion .fp-membro-row-sub {
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 11.5px;
font-weight: 500;
color: rgba(38, 38, 38, .55);
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
}
/* LEADERBOARD editorial */
#page-fidelizacion .fp-leaderboard {
margin: 0;
padding: 0;
list-style: none;
}
#page-fidelizacion .fp-leaderboard-row {
display: grid;
grid-template-columns: 22px 1fr auto;
align-items: center;
gap: 12px;
padding: 9px 0;
border-bottom: 1px solid rgba(38, 38, 38, .055);
cursor: pointer;
transition: background .15s ease;
margin: 0;
}
#page-fidelizacion .fp-leaderboard-row:last-child { border-bottom: none; }
#page-fidelizacion .fp-leaderboard-row:hover { background: rgba(38, 38, 38, .02); }
#page-fidelizacion .fp-leaderboard-rank {
font-family: var(--display, 'Fraunces', serif);
font-size: 14px;
font-weight: 500;
color: rgba(38, 38, 38, .45);
text-align: center;
font-variant-numeric: tabular-nums;
}
#page-fidelizacion .fp-leaderboard-row[data-rank="1"] .fp-leaderboard-rank { color: #C9A961; }
#page-fidelizacion .fp-leaderboard-row[data-rank="2"] .fp-leaderboard-rank { color: #9C8E7F; }
#page-fidelizacion .fp-leaderboard-row[data-rank="3"] .fp-leaderboard-rank { color: #B0764A; }
#page-fidelizacion .fp-leaderboard-name {
font-family: var(--ui, 'Inter Tight', system-ui, sans-serif);
font-size: 12.5px;
font-weight: 600;
}
#page-fidelizacion .fp-leaderboard-pts {
font-family: var(--display, 'Fraunces', serif);
font-size: 15px;
font-weight: 500;
color: #262626;
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
}
/* CUMPLES editorial */
#page-fidelizacion .fp-cumple-row {
display: grid;
grid-template-columns: 28px 1fr auto auto;
align-items: center;
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid rgba(38, 38, 38, .055);
cursor: pointer;
margin: 0;
padding-left: 0;
padding-right: 0;
}
#page-fidelizacion .fp-cumple-row:last-child { border-bottom: none; }
#page-fidelizacion .fp-cumple-row:hover { background: rgba(38, 38, 38, .02); }
#page-fidelizacion .fp-cumple-date {
width: 28px;
height: 28px;
background: rgba(232, 102, 58, .07);
border: none;
}
/* MOMENTUM editorial */
#page-fidelizacion .fp-momentum-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
border: 1px solid rgba(38, 38, 38, .06);
border-radius: 9px;
overflow: hidden;
}
#page-fidelizacion .fp-momentum-item {
padding: 12px 8px;
text-align: center;
background: transparent !important;
border: none !important;
border-right: 1px solid rgba(38, 38, 38, .055) !important;
border-radius: 0;
}
#page-fidelizacion .fp-momentum-item:last-child { border-right: none !important; }
#page-fidelizacion .fp-momentum-arrow {
font-family: var(--display, 'Fraunces', serif);
font-size: 16px;
font-weight: 500;
line-height: 1;
color: rgba(38, 38, 38, .35);
margin-bottom: 4px;
}
#page-fidelizacion .fp-momentum-item--up .fp-momentum-arrow { color: #2EAD5C; }
#page-fidelizacion .fp-momentum-item--down .fp-momentum-arrow { color: #E05252; }
#page-fidelizacion .fp-momentum-value {
font-family: var(--display, 'Fraunces', serif);
font-size: 22px;
font-weight: 500;
letter-spacing: -.014em;
color: #262626 !important;
font-variant-numeric: tabular-nums;
line-height: 1.05;
margin-bottom: 3px;
}
#page-fidelizacion .fp-momentum-item--up .fp-momentum-value { color: #2EAD5C !important; }
#page-fidelizacion .fp-momentum-item--down .fp-momentum-value { color: #E05252 !important; }
#page-fidelizacion .fp-momentum-label {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 8px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(38, 38, 38, .55);
}
/* LISTA inferior — LEGADO con accent dorado SUTIL (no dark) */
#page-fidelizacion .fp-card[data-nivel="legado"] {
background: #FFFFFF !important;
border: 1px solid rgba(201, 169, 97, .35) !important;
border-left: 3px solid #C9A961 !important;
}
#page-fidelizacion .fp-card[data-nivel="legado"]::before { display: none !important; }
#page-fidelizacion .fp-card[data-nivel="legado"]:hover {
border-color: rgba(201, 169, 97, .55) !important;
box-shadow: 0 4px 14px rgba(201, 169, 97, .12) !important;
}
#page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-name { color: #262626 !important; }
#page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-meta { color: rgba(38, 38, 38, .55) !important; }
#page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-meta b { color: #262626 !important; }
#page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-action {
background: rgba(38, 38, 38, .04) !important;
border-color: rgba(38, 38, 38, .055) !important;
color: rgba(38, 38, 38, .65) !important;
}
/* Override del color blanco crema legacy en pill LEGADO (era para dark gradient antiguo) */
#page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-nivel,
.fp-card[data-nivel="legado"] .fp-card-nivel {
background: rgba(201, 169, 97, .14) !important;
border-color: rgba(201, 169, 97, .42) !important;
color: #8C6F2E !important;
}
/* Flags en cards LEGADO también recuperan colores normales */
#page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-flag {
background: rgba(38, 38, 38, .04) !important;
color: rgba(38, 38, 38, .65) !important;
}
#page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-flag--cumple {
background: rgba(232, 102, 58, .08) !important;
color: rgba(140, 69, 23, .82) !important;
}
#page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-flag--gift {
background: rgba(52, 199, 89, .10) !important;
color: #1C6A37 !important;
}
#page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-flag--kit {
background: rgba(201, 169, 97, .14) !important;
color: #8C6F2E !important;
}
/* Responsive */
@media (max-width: 1100px) {
#page-fidelizacion .fp-kpi-strip { grid-template-columns: repeat(2, 1fr); }
#page-fidelizacion .fp-overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
#page-fidelizacion .fp-kpi-strip { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════
v7.94.5 · SOMBRA OSCURA SOLO EN BOTTOM (muy sutil)
Sombra oscura apenas perceptible con blur en el borde inferior
del #pages — indica que hay más contenido al scrollear hacia abajo.
Specs:
- Solo bottom (no top)
- Opacity ultra baja (~4%) — apenas se nota
- Blur intenso (28px) — el blur es el protagonista
═══════════════════════════════════════════════════════════════ */
/* #main necesita position relative para anclar el pseudo-elemento */
#main {
position: relative;
}
/* BOTTOM shadow — sombra oscura apenas perceptible con blur */
#main::after {
content: "";
position: absolute;
bottom: 10px; /* coincide con margin-bottom: 10px del #pages */
left: 10px; /* coincide con margin-left: 10px del #pages */
right: 10px; /* coincide con margin-right: 10px del #pages */
height: 72px;
pointer-events: none;
z-index: 20;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
/* Sombra oscura ultra tenue — apenas se nota */
background: linear-gradient(
to top,
rgba(0, 0, 0, .04) 0%,
rgba(0, 0, 0, .02) 40%,
rgba(0, 0, 0, .008) 70%,
rgba(0, 0, 0, 0) 100%
);
/* Blur intenso — el blur es el protagonista */
-webkit-backdrop-filter: blur(28px);
backdrop-filter: blur(28px);
/* Mask para fade limpio al transparente */
-webkit-mask-image: linear-gradient(to top, black 0%, black 30%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 30%, transparent 100%);
}
/* Mobile — sombra más corta + sin margins */
@media (max-width: 768px) {
#main::after {
height: 50px;
left: 0;
right: 0;
border-radius: 0;
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
}
/* Reducir intensidad si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
#main::after {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}
/* ═══════════════════════════════════════════════════════════════
v7.95.0 · VR EMPRESA DARK — Migración del marrón legacy
Override del .vr-shell.vr-mode-empresa al sistema dark profesional.
Test case del nuevo Dark Mode Architecture (variables definidas arriba).
═══════════════════════════════════════════════════════════════ */
/* Forzar variables dark Notion-style para el modo empresa */
.vr-shell.vr-mode-empresa {
/* Surfaces (Notion sepia warm) */
--floor: #191918;
--surface-1: #1F1F1E;
--surface-2: #252523;
--surface-3: #2D2D2A;
--surface-4: #363633;
/* Ink (crema cálido) */
--ink-primary: #E4E2DE;
--ink-secondary: #9B9994;
--ink-tertiary: #6B6964;
/* Borders (warm white) */
--line-soft: rgba(255, 250, 240, .06);
--line-medium: rgba(255, 250, 240, .09);
--line-strong: rgba(255, 250, 240, .14);
/* CTA: Lacca Sepia */
--grad-cta: linear-gradient(158deg, #38362F 0%, #2A2825 100%);
--grad-cta-hover: linear-gradient(158deg, #403D35 0%, #322F2B 100%);
}
/* ─── SHELL & OVERLAY ─── */
.vr-shell.vr-mode-empresa {
background: var(--surface-1) !important;
color: var(--ink-primary) !important;
}
.vr-overlay:has(.vr-mode-empresa) {
background: rgba(10, 10, 11, .80) !important;
backdrop-filter: blur(12px) saturate(140%) !important;
-webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}
/* ─── HEADER ─── */
.vr-shell.vr-mode-empresa .vr-head {
background: var(--floor) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
.vr-shell.vr-mode-empresa .vr-head-wm-name,
.vr-shell.vr-mode-empresa .vr-head-title {
color: var(--ink-primary) !important;
}
.vr-shell.vr-mode-empresa .vr-head-wm-dot {
color: #E8663A !important;
}
.vr-shell.vr-mode-empresa .vr-head-sub {
color: var(--ink-tertiary) !important;
}
.vr-shell.vr-mode-empresa .vr-head-close {
color: var(--ink-secondary) !important;
}
.vr-shell.vr-mode-empresa .vr-head-close:hover {
background: var(--line-medium) !important;
color: var(--ink-primary) !important;
}
.vr-shell.vr-mode-empresa .vr-head-loc {
background: var(--line-soft) !important;
border: 1px solid var(--line-medium) !important;
color: var(--ink-secondary) !important;
}
/* ─── COLUMNAS (las 3 iguales con surface-1 para consistencia) ─── */
.vr-shell.vr-mode-empresa .vr-col-productos {
background: var(--surface-1) !important;
}
.vr-shell.vr-mode-empresa .vr-col-carrito {
background: var(--surface-1) !important;
}
.vr-shell.vr-mode-empresa .vr-col-right {
background: var(--surface-1) !important;
}
.vr-shell.vr-mode-empresa .vr-col-title {
color: var(--ink-primary) !important;
}
.vr-shell.vr-mode-empresa .vr-col-sub {
color: var(--ink-secondary) !important;
}
/* ─── CARDS DE PRODUCTOS ─── */
.vr-shell.vr-mode-empresa .vr-prod-card {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
.vr-shell.vr-mode-empresa .vr-prod-card:hover {
background: var(--surface-3) !important;
border-color: var(--line-medium) !important;
}
.vr-shell.vr-mode-empresa .vr-prod-card.agotado {
opacity: .35 !important;
}
.vr-shell.vr-mode-empresa .vr-prod-name {
color: var(--ink-primary) !important;
}
.vr-shell.vr-mode-empresa .vr-prod-price {
color: var(--ink-primary) !important;
}
.vr-shell.vr-mode-empresa .vr-prod-stock {
color: var(--ink-secondary) !important;
}
.vr-shell.vr-mode-empresa .vr-prod-add {
background: var(--surface-3) !important;
border: 1px solid var(--line-medium) !important;
color: var(--ink-primary) !important;
}
.vr-shell.vr-mode-empresa .vr-prod-add:hover {
background: #E8663A !important;
border-color: #E8663A !important;
color: #fff !important;
}
/* ─── SEARCH INPUT ─── */
.vr-shell.vr-mode-empresa .vr-search-wrap {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
}
.vr-shell.vr-mode-empresa .vr-search-input {
background: transparent !important;
color: var(--ink-primary) !important;
}
.vr-shell.vr-mode-empresa .vr-search-input::placeholder {
color: var(--ink-tertiary) !important;
}
.vr-shell.vr-mode-empresa .vr-search-ico {
color: var(--ink-tertiary) !important;
}
/* ─── CARRITO ─── */
.vr-shell.vr-mode-empresa .vr-cart-head {
border-bottom: 1px solid var(--line-soft) !important;
}
.vr-shell.vr-mode-empresa .vr-cart-title {
color: var(--ink-primary) !important;
}
.vr-shell.vr-mode-empresa .vr-cart-count {
background: #E8663A !important;
color: #fff !important;
}
.vr-shell.vr-mode-empresa .vr-vaciar {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
.vr-shell.vr-mode-empresa .vr-vaciar:hover {
background: rgba(248, 105, 105, .12) !important;
border-color: rgba(248, 105, 105, .28) !important;
color: #FF8A8A !important;
}
.vr-shell.vr-mode-empresa .vr-cart-th {
color: var(--ink-tertiary) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
.vr-shell.vr-mode-empresa .vr-cart-empty {
color: var(--ink-tertiary) !important;
}
.vr-shell.vr-mode-empresa .vr-cart-row td {
color: var(--ink-primary) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
/* ─── OBSERVACIÓN ─── */
.vr-shell.vr-mode-empresa .vr-obs-toggle,
.vr-shell.vr-mode-empresa .vr-obs-wrap {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
.vr-shell.vr-mode-empresa .vr-obs-wrap textarea {
background: transparent !important;
color: var(--ink-primary) !important;
}
/* ─── TOTALES + CONTINUAR ─── */
.vr-shell.vr-mode-empresa .vr-subtotal-row,
.vr-shell.vr-mode-empresa .vr-total-row {
background: var(--surface-2) !important;
color: var(--ink-primary) !important;
}
.vr-shell.vr-mode-empresa .vr-total-row {
border-top: 1px solid var(--line-soft) !important;
}
.vr-shell.vr-mode-empresa .vr-total-label,
.vr-shell.vr-mode-empresa .vr-subtotal-label {
color: var(--ink-secondary) !important;
}
.vr-shell.vr-mode-empresa .vr-total-amount {
color: var(--ink-primary) !important;
}
.vr-shell.vr-mode-empresa .vr-confirm {
background: var(--grad-cta) !important;
border: 1px solid var(--line-medium) !important;
color: var(--ink-primary) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .4) !important;
}
.vr-shell.vr-mode-empresa .vr-confirm:hover {
background: var(--grad-cta-hover) !important;
border-color: var(--line-strong) !important;
}
.vr-shell.vr-mode-empresa .vr-confirm:disabled {
opacity: .4 !important;
}
/* ─── PANEL DERECHO (Cliente / B2B) ─── */
.vr-shell.vr-mode-empresa .vr-rpanel {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
}
.vr-shell.vr-mode-empresa .vr-rpanel-title {
color: var(--ink-primary) !important;
}
/* Tabs Consumidor/Empresa */
.vr-shell.vr-mode-empresa .vr-tipocli-toggle {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
}
.vr-shell.vr-mode-empresa .vr-tipocli-btn {
color: var(--ink-secondary) !important;
}
.vr-shell.vr-mode-empresa .vr-tipocli-btn:hover {
color: var(--ink-primary) !important;
}
.vr-shell.vr-mode-empresa .vr-tipocli-btn.is-active {
background: #E8663A !important;
color: #fff !important;
}
/* B2B badge (en header) */
.vr-shell.vr-mode-empresa .vr-b2b-tag {
background: rgba(232, 102, 58, .12) !important;
border: 1px solid rgba(232, 102, 58, .30) !important;
color: #FFB89A !important;
}
/* Bloque pedido B2B (Condiciones del pedido) */
.vr-shell.vr-mode-empresa .vr-emp-pedido-block {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
}
.vr-shell.vr-mode-empresa .vr-emp-pedido-eyebrow {
color: #FFB89A !important;
}
.vr-shell.vr-mode-empresa .vr-emp-field-label,
.vr-shell.vr-mode-empresa label {
color: var(--ink-secondary) !important;
}
.vr-shell.vr-mode-empresa .vr-emp-field-sub {
color: var(--ink-tertiary) !important;
}
.vr-shell.vr-mode-empresa input[type="date"],
.vr-shell.vr-mode-empresa input[type="text"],
.vr-shell.vr-mode-empresa input[type="number"],
.vr-shell.vr-mode-empresa textarea {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
.vr-shell.vr-mode-empresa input[type="date"]::placeholder,
.vr-shell.vr-mode-empresa input[type="text"]::placeholder,
.vr-shell.vr-mode-empresa input[type="number"]::placeholder,
.vr-shell.vr-mode-empresa textarea::placeholder {
color: var(--ink-tertiary) !important;
}
.vr-shell.vr-mode-empresa input:focus,
.vr-shell.vr-mode-empresa textarea:focus {
border-color: #E8663A !important;
box-shadow: 0 0 0 3px rgba(232, 102, 58, .12) !important;
outline: none !important;
}
/* Subtotal bruto + Total a pagar (panel derecho) */
.vr-shell.vr-mode-empresa .vr-emp-summary {
border-top: 1px solid var(--line-soft) !important;
}
.vr-shell.vr-mode-empresa .vr-emp-summary-label {
color: var(--ink-secondary) !important;
}
.vr-shell.vr-mode-empresa .vr-emp-summary-value {
color: var(--ink-primary) !important;
}
.vr-shell.vr-mode-empresa .vr-emp-summary-hint {
color: var(--ink-tertiary) !important;
}
/* Scrollbars dark */
.vr-shell.vr-mode-empresa .vr-prod-scroll,
.vr-shell.vr-mode-empresa .vr-cart-body,
.vr-shell.vr-mode-empresa .vr-right-scroll {
scrollbar-color: rgba(255, 255, 255, 0) transparent !important;
}
.vr-shell.vr-mode-empresa .vr-prod-scroll:hover,
.vr-shell.vr-mode-empresa .vr-cart-body:hover,
.vr-shell.vr-mode-empresa .vr-right-scroll:hover {
scrollbar-color: rgba(255, 255, 255, .15) transparent !important;
}
/* ═══════════════════════════════════════════════════════════════
v7.95.1 · DARK MODE — Chrome global (sidebar + topbar) + Dashboard
Activado vía [data-theme="dark"] en .
Stack: Notion-style sepia warm (definido en :root[data-theme="dark"]).
═══════════════════════════════════════════════════════════════ */
/* ── BODY + FLOOR ── */
[data-theme="dark"] body,
[data-theme="dark"] #main,
[data-theme="dark"] .topbar {
background: var(--floor) !important;
color: var(--ink-primary) !important;
}
/* ── PAGES card (el contenedor central scrolleable) ── */
[data-theme="dark"] #pages {
background: var(--surface-1) !important;
box-shadow:
0 0 0 1px var(--line-soft),
0 2px 8px rgba(0, 0, 0, .25),
0 8px 32px rgba(0, 0, 0, .35) !important;
}
/* ── TOPBAR (dropdown + brand) ── */
[data-theme="dark"] .tb-nav-dropdown {
background: var(--floor) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .topbar-right,
[data-theme="dark"] .tb-brand,
[data-theme="dark"] .tb-nav-center {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #top-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .tb-section-title,
[data-theme="dark"] #tb-section-btn {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .tb-engine,
[data-theme="dark"] .tb-engine-sep {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .tb-mobile-menu {
color: var(--ink-primary) !important;
}
/* ── SIDEBAR ITEMS (drop-down nav) ── */
[data-theme="dark"] .tb-dd-item {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .tb-dd-item:hover {
background: var(--surface-2) !important;
}
[data-theme="dark"] .tb-dd-item.active {
background: var(--surface-2) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 250, 240, .04) !important;
}
[data-theme="dark"] .tb-dd-icon {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .tb-dd-item.active .tb-dd-icon,
[data-theme="dark"] .tb-dd-item:hover .tb-dd-icon {
color: var(--ink-primary) !important;
}
/* Section labels (INVENTARIO, CLIENTES, GESTIÓN) */
[data-theme="dark"] .sb2-section-label {
color: var(--ink-tertiary) !important;
}
/* Sidebar header (brand + sub) */
[data-theme="dark"] .sb2-brand-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .sb2-brand-sub {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .sb2-brand-logo {
background: var(--surface-2) !important;
}
/* CTA "Venta rápida" en sidebar (mantiene Lacca Nera en dark — funciona perfecto) */
[data-theme="dark"] .sb2-cta {
background: var(--grad-cta) !important;
border: 1px solid var(--line-medium) !important;
color: var(--ink-primary) !important;
box-shadow: var(--cta-highlight), 0 1px 2px rgba(0, 0, 0, .3) !important;
}
[data-theme="dark"] .sb2-cta:hover {
background: var(--grad-cta-hover) !important;
border-color: var(--line-strong) !important;
}
/* Sidebar footer user pill */
[data-theme="dark"] .sb2-footer {
background: var(--surface-1) !important;
border-top: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .sb2-user-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .sb2-user-loc {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .sb2-avatar {
background: var(--surface-3) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .sb2-logout {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .sb2-logout:hover {
background: var(--surface-3) !important;
color: var(--ink-primary) !important;
}
/* Sidebar scroll separator */
[data-theme="dark"] .sb2-scroll {
scrollbar-color: rgba(255, 250, 240, .12) transparent !important;
}
/* ── TOPBAR CONTROLS (search, selects, action zone) ── */
[data-theme="dark"] .topbar input[type="text"],
[data-theme="dark"] .topbar input[type="search"],
[data-theme="dark"] .topbar select,
[data-theme="dark"] .tb-action-zone input,
[data-theme="dark"] .tb-action-zone select {
background: var(--controls-bg) !important;
border-color: var(--controls-border) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .topbar input::placeholder,
[data-theme="dark"] .tb-action-zone input::placeholder {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .topbar input:hover,
[data-theme="dark"] .topbar select:hover,
[data-theme="dark"] .tb-action-zone input:hover,
[data-theme="dark"] .tb-action-zone select:hover {
background: var(--controls-bg-hover) !important;
}
/* Filter pills en topbar */
[data-theme="dark"] .tb-fpill,
[data-theme="dark"] .mv2-chip,
[data-theme="dark"] .v3-af-chip {
background: var(--c-info-soft) !important;
color: var(--c-info-ink) !important;
border: 1px solid var(--c-info-line) !important;
}
/* ── DASHBOARD ── */
/* Hero */
[data-theme="dark"] #page-dashboard .nd-hero,
[data-theme="dark"] .nd-hero {
background: transparent !important;
}
[data-theme="dark"] .nd-hero-greeting,
[data-theme="dark"] .nd-hero-time,
[data-theme="dark"] #dth,
[data-theme="dark"] #dtm {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .nd-hero-date,
[data-theme="dark"] .nd-hero-summary,
[data-theme="dark"] #dash-saludo-resumen,
[data-theme="dark"] #nd-date {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .nd-hero-status,
[data-theme="dark"] .nd-hero-local-tag,
[data-theme="dark"] #dash-status-dot,
[data-theme="dark"] #dash-local-name {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .nd-hero-time-sep {
color: var(--ink-tertiary) !important;
}
/* KPI strip (compacto bajo el hero) — alta especificidad */
[data-theme="dark"] #page-dashboard .nd-kpi-strip,
[data-theme="dark"] .nd-kpi-strip {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
}
[data-theme="dark"] .nd-kpi-stat-l {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .nd-kpi-stat-val {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .nd-kpi-stat-delta {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .nd-kpi-stat-sep {
background: var(--line-soft) !important;
}
/* Cards principales del dashboard — alta especificidad para override de #page-dashboard .nd-card legacy */
[data-theme="dark"] #page-dashboard .nd-card,
[data-theme="dark"] .nd-card {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
}
[data-theme="dark"] .nd-card-kicker {
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] .nd-card-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .nd-card-link {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .nd-card-link:hover {
color: var(--c-ember) !important;
}
/* Tendencia (hero number + chart) */
[data-theme="dark"] .nd-trend-total,
[data-theme="dark"] #nd-trend-total {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .nd-trend-sub,
[data-theme="dark"] #nd-trend-sub {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .nd-trend-badge,
[data-theme="dark"] #nd-trend-badge {
background: var(--c-red-soft) !important;
color: var(--c-red-ink) !important;
border: 1px solid var(--c-red-line) !important;
}
/* Ventas recientes */
[data-theme="dark"] .nd-venta-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .nd-venta-meta {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .nd-venta-total {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .nd-venta-avatar {
background: var(--surface-3) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .nd-pago-pill {
background: var(--surface-3) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .nd-empty {
color: var(--ink-tertiary) !important;
}
/* Mix de categorías (donut) */
[data-theme="dark"] .nd-mix-lbl {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .nd-mix-pct {
color: var(--ink-primary) !important;
}
/* Ranking */
[data-theme="dark"] .nd-rank-num {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .nd-rank-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .nd-rank-meta {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .nd-rank-price {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .nd-rank-bar-wrap {
background: var(--line-soft) !important;
}
/* Stock bajo */
[data-theme="dark"] .nd-sb-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .nd-sb-qty {
color: var(--c-red-ink) !important;
}
[data-theme="dark"] .nd-sb-meta {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .nd-sb-bar-wrap {
background: var(--line-soft) !important;
}
/* ── LOGIN screen (dark también) ── */
[data-theme="dark"] #login-screen,
[data-theme="dark"] .lp2 {
background: var(--floor) !important;
}
[data-theme="dark"] .lp2-brand-name,
[data-theme="dark"] .lp2-clock,
[data-theme="dark"] .lp2-date,
[data-theme="dark"] .lp2-greeting,
[data-theme="dark"] .lp2-auth-hello {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .lp2-greeting-sub,
[data-theme="dark"] .lp2-auth-sub {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .lp2-avatar-card {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .lp2-avatar-card:hover {
background: var(--surface-3) !important;
}
[data-theme="dark"] .lp2-avatar-circle {
background: var(--surface-3) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .lp2-avatar-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .lp2-local-chip {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .lp2-local-chip.is-active {
background: var(--c-ember-soft) !important;
border-color: var(--c-ember-line) !important;
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] .lp2-pass-wrap {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #l-pass {
color: var(--ink-primary) !important;
caret-color: var(--ink-primary) !important;
}
[data-theme="dark"] .lp2-dots {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .lp2-eye {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .lp2-back {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .lp2-cta {
background: var(--grad-cta) !important;
color: var(--ink-primary) !important;
border: 1px solid var(--line-medium) !important;
box-shadow: var(--cta-highlight) !important;
}
[data-theme="dark"] .lp2-cta:hover {
background: var(--grad-cta-hover) !important;
}
[data-theme="dark"] .lp2-version {
color: var(--ink-tertiary) !important;
}
/* ═══════════════════════════════════════════════════════════════
v7.95.3 · DARK MODE — Página STOCK
Override de KPI cards, tabla, segmented bars y controles internos
con alta especificidad para vencer reglas legacy con #page-stock.
═══════════════════════════════════════════════════════════════ */
/* ── KPI CARDS (4 arriba: Productos activos / Con lote / Stock bajo / Valor) ── */
[data-theme="dark"] #page-stock .sk-kpi-card {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
}
[data-theme="dark"] #page-stock .sk-kpi-card:hover {
background: var(--surface-3) !important;
border-color: var(--line-medium) !important;
}
[data-theme="dark"] #page-stock .sk-kpi-eyebrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-stock .sk-kpi-num,
[data-theme="dark"] #page-stock .sk-kpi-num-sub {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-stock .sk-kpi-num.is-critical {
color: var(--c-red-ink) !important;
}
[data-theme="dark"] #page-stock .sk-kpi-meta {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-stock .sk-kpi-meta-dot {
background: var(--c-ember) !important;
}
[data-theme="dark"] #page-stock .sk-kpi-link {
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] #page-stock .sk-kpi-delta {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-stock .sk-kpi-delta.up {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-stock .sk-kpi-delta.down {
color: var(--c-red-ink) !important;
}
/* Toggle "−" minus en KPI cards */
[data-theme="dark"] #page-stock .sk-kpi-toggle {
color: var(--ink-tertiary) !important;
}
/* ── PAGE HEADER ── */
[data-theme="dark"] #page-stock .sk-eyebrow {
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] #page-stock .sk-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-stock .sk-subtitle,
[data-theme="dark"] #page-stock .sk-bc-link,
[data-theme="dark"] #page-stock .sk-bc-sep,
[data-theme="dark"] #page-stock .sk-bc-cur {
color: var(--ink-secondary) !important;
}
/* "X resultados" counter */
[data-theme="dark"] #page-stock .sk-results-count,
[data-theme="dark"] #page-stock .stk-results-info {
color: var(--ink-secondary) !important;
}
/* ── TABLA PRINCIPAL ── */
[data-theme="dark"] #page-stock .sk-table-wrap,
[data-theme="dark"] #page-stock .sk-table-container,
[data-theme="dark"] #page-stock .sk-table,
[data-theme="dark"] #page-stock table {
background: transparent !important;
border: none !important;
color: var(--ink-primary) !important;
box-shadow: none !important;
}
/* Container wrap específico (el que tenía background:white) */
[data-theme="dark"] #page-stock .sk-table-wrap {
background: var(--surface-1) !important;
border: 1px solid var(--line-soft) !important;
border-radius: 14px !important;
}
/* Header row */
[data-theme="dark"] #page-stock thead,
[data-theme="dark"] #page-stock .sk-table thead,
[data-theme="dark"] #page-stock thead th,
[data-theme="dark"] #page-stock .sk-table-head {
background: var(--surface-2) !important;
color: var(--ink-tertiary) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-stock thead th {
color: var(--ink-tertiary) !important;
}
/* Body rows */
[data-theme="dark"] #page-stock tbody tr {
background: var(--surface-1) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-stock tbody tr:hover,
[data-theme="dark"] #page-stock tbody tr.is-hovered {
background: var(--surface-2) !important;
}
[data-theme="dark"] #page-stock tbody td {
color: var(--ink-primary) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
/* Nombre producto */
[data-theme="dark"] #page-stock .stock-prod-name,
[data-theme="dark"] #page-stock .sk-td-prod-name {
color: var(--ink-primary) !important;
}
/* PLU mini-pill */
[data-theme="dark"] #page-stock .stock-mini-pill {
background: var(--surface-3) !important;
color: var(--ink-secondary) !important;
border: 1px solid var(--line-soft) !important;
}
/* Categoría */
[data-theme="dark"] #page-stock .sk-cat,
[data-theme="dark"] #page-stock .stock-cat {
color: var(--ink-secondary) !important;
}
/* Cantidad value + sub */
[data-theme="dark"] #page-stock .sk-qty-val {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-stock .sk-qty-val.is-critical {
color: var(--c-red-ink) !important;
}
[data-theme="dark"] #page-stock .sk-qty-sub {
color: var(--ink-tertiary) !important;
}
/* Precio */
[data-theme="dark"] #page-stock .sk-price-val {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-stock .sk-price-sub {
color: var(--ink-tertiary) !important;
}
/* Updated timestamp */
[data-theme="dark"] #page-stock .stock-updated {
color: var(--ink-tertiary) !important;
}
/* Notas */
[data-theme="dark"] #page-stock .stock-notes {
color: var(--ink-tertiary) !important;
}
/* Action buttons (edit/delete/ajuste) */
[data-theme="dark"] #page-stock .sk-act-btn {
background: transparent !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-stock .sk-act-btn:hover {
background: var(--surface-3) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-stock .sk-act-btn.del:hover {
background: var(--c-red-soft) !important;
color: var(--c-red-ink) !important;
}
/* Expand button (chevron para lotes) */
[data-theme="dark"] #page-stock .stock-expand-btn {
background: var(--surface-3) !important;
color: var(--ink-secondary) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-stock .stock-expand-btn:hover {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-stock .stock-expand-btn.is-open {
background: var(--c-ember-soft) !important;
color: var(--c-ember-ink) !important;
border-color: var(--c-ember-line) !important;
}
/* ── SEGMENTED BARS (nivel de stock) ──
Solo override las empty bars (track) — las filled mantienen su inline
style="background:rgba(R,G,B,a)" del JS que indica el nivel semánticamente.
*/
[data-theme="dark"] #page-stock .sk-seg-bar:not(.sk-seg-filled) {
background: var(--line-soft) !important;
}
/* sk-seg-filled NO se toca — el inline RGB preserva el nivel verde/amber/rojo */
/* Próximo vencimiento */
[data-theme="dark"] #page-stock .stock-next {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-stock .stock-next-sub {
color: var(--ink-tertiary) !important;
}
/* ── LOTES EXPANDIDOS ── */
[data-theme="dark"] #page-stock .stock-lotes-row,
[data-theme="dark"] #page-stock .stock-lotes-cell {
background: var(--surface-2) !important;
}
/* Lotes container interior */
[data-theme="dark"] #page-stock .stk-lotes-wrap {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
}
/* Lote head row con eyebrow + recon pill */
[data-theme="dark"] #page-stock .stk-lotes-head {
color: var(--ink-tertiary) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-stock .stk-lotes-eyebrow {
color: var(--ink-tertiary) !important;
}
/* Lote individual card */
[data-theme="dark"] #page-stock .stk-lote {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-stock .stk-lote:hover {
background: var(--surface-4) !important;
}
[data-theme="dark"] #page-stock .stk-lote-idx {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-stock .stk-lote-fecha {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-stock .stk-lote-qty {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-stock .stk-lote-notas {
color: var(--ink-tertiary) !important;
}
/* FIFO badge */
[data-theme="dark"] #page-stock .stk-lote-fifo {
background: var(--c-ember-soft) !important;
color: var(--c-ember-ink) !important;
}
/* Lote actions (edit/delete) */
[data-theme="dark"] #page-stock .stk-lote-action {
background: transparent !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-stock .stk-lote-action:hover {
background: var(--surface-1) !important;
color: var(--ink-primary) !important;
}
/* Reconciliación pill */
[data-theme="dark"] #page-stock .stk-recon-pill {
background: var(--surface-1) !important;
color: var(--ink-secondary) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-stock .stk-recon-pill.ok {
background: var(--c-green-soft) !important;
color: var(--c-green-ink) !important;
border-color: var(--c-green-line) !important;
}
[data-theme="dark"] #page-stock .stk-recon-pill.warn {
background: var(--c-amber-soft) !important;
color: var(--c-amber-ink) !important;
border-color: var(--c-amber-line) !important;
}
/* Cross-link "VER EN VENCIMIENTOS →" */
[data-theme="dark"] #page-stock .stk-cross-link {
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] #page-stock .stk-cross-link:hover {
color: var(--c-ember-hover) !important;
}
/* ── BOTÓN "Agregar producto" (mantiene Lacca Sepia) ── */
[data-theme="dark"] #page-stock .sk-btn-primary {
background: var(--grad-cta) !important;
border: 1px solid var(--line-medium) !important;
color: var(--ink-primary) !important;
box-shadow: var(--cta-highlight), 0 1px 2px rgba(0, 0, 0, .3) !important;
}
[data-theme="dark"] #page-stock .sk-btn-primary:hover {
background: var(--grad-cta-hover) !important;
border-color: var(--line-strong) !important;
}
/* ═══════════════════════════════════════════════════════════════
v7.95.4 · DARK MODE — Página MOVIMIENTOS
Override de header wrap, KPI cards, tabla, group headers e
inspector lateral con alta especificidad.
═══════════════════════════════════════════════════════════════ */
/* ── HEADER (título "Movimientos" + subtitle) ── */
[data-theme="dark"] #page-movimientos .mv2-page-head,
[data-theme="dark"] #page-movimientos .page-head {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
[data-theme="dark"] #page-movimientos .mv2-page-head-title,
[data-theme="dark"] #page-movimientos .page-head h1 {
color: var(--ink-primary) !important;
background: transparent !important;
}
[data-theme="dark"] #page-movimientos .mv2-page-head-sub {
color: var(--ink-secondary) !important;
}
/* ── KPI CARDS (Monto total / Movimientos / Ticket promedio / Ajustes-Mermas) ── */
[data-theme="dark"] #page-movimientos .mv2-kpi-card,
[data-theme="dark"] #page-movimientos .mv2-kpi {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
}
[data-theme="dark"] #page-movimientos .mv2-kpi-card:hover {
background: var(--surface-3) !important;
border-color: var(--line-medium) !important;
}
[data-theme="dark"] #page-movimientos .mv2-kpi-eyebrow,
[data-theme="dark"] #page-movimientos .mv2-kpi-label {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-movimientos .mv2-kpi-num,
[data-theme="dark"] #page-movimientos .mv2-kpi-val,
[data-theme="dark"] #page-movimientos .mv2-kpi-value {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-movimientos .mv2-kpi-num.is-critical {
color: var(--c-red-ink) !important;
}
[data-theme="dark"] #page-movimientos .mv2-kpi-sub,
[data-theme="dark"] #page-movimientos .mv2-kpi-meta {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-movimientos .mv2-kpi-meta-dot,
[data-theme="dark"] #page-movimientos .mv2-kpi-foot-dot {
background: var(--c-ember) !important;
}
[data-theme="dark"] #page-movimientos .mv2-kpi-delta {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-movimientos .mv2-kpi-delta.up { color: var(--c-green-ink) !important; }
[data-theme="dark"] #page-movimientos .mv2-kpi-delta.down { color: var(--c-red-ink) !important; }
[data-theme="dark"] #page-movimientos .mv2-kpi-toggle {
color: var(--ink-tertiary) !important;
}
/* ── TABLA PRINCIPAL ── */
[data-theme="dark"] #page-movimientos .mv2-table-wrap,
[data-theme="dark"] #page-movimientos .mv2-table-container,
[data-theme="dark"] #page-movimientos .mv2-table,
[data-theme="dark"] #page-movimientos .mv-table,
[data-theme="dark"] #page-movimientos table {
background: transparent !important;
border: none !important;
color: var(--ink-primary) !important;
box-shadow: none !important;
}
/* Card wrapper de la tabla (la real es .mv-table-card con background:#fff) */
[data-theme="dark"] #page-movimientos .mv-table-card,
[data-theme="dark"] #page-movimientos .mv2-table-wrap {
background: var(--surface-1) !important;
border: 1px solid var(--line-soft) !important;
border-radius: 14px !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
overflow: hidden;
}
/* Header row (TIPO/FECHA/CLIENTE/PRODUCTO/LOCAL/PAGO/TOTAL) */
[data-theme="dark"] #page-movimientos thead,
[data-theme="dark"] #page-movimientos thead th {
background: var(--surface-2) !important;
color: var(--ink-tertiary) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
/* Body rows */
[data-theme="dark"] #page-movimientos tbody tr {
background: var(--surface-1) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-movimientos tbody tr:hover {
background: var(--surface-2) !important;
}
[data-theme="dark"] #page-movimientos tbody td {
color: var(--ink-primary) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
/* ── GROUP HEADERS (HOY 04-JUN — 4 MOVIMIENTOS · $334.125) ── */
[data-theme="dark"] #page-movimientos .mv-day-separator,
[data-theme="dark"] #page-movimientos .mv-day-sep,
[data-theme="dark"] #page-movimientos tr.mv-day-separator td {
background: var(--surface-3) !important;
color: var(--ink-secondary) !important;
border-top: 1px solid var(--line-soft) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-movimientos .mv-day-label,
[data-theme="dark"] #page-movimientos .mv-day-eyebrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-movimientos .mv-day-total,
[data-theme="dark"] #page-movimientos .mv-day-sub {
color: var(--ink-primary) !important;
background: transparent !important;
}
[data-theme="dark"] #page-movimientos .mv-day-stats {
color: var(--ink-secondary) !important;
}
/* ── TIPO column (Venta / Ingreso / etc.) — dot + label ── */
[data-theme="dark"] #page-movimientos .mv-tipo {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-movimientos .mv-tipo-label {
color: var(--ink-primary) !important;
}
/* ── FECHA column ── */
[data-theme="dark"] #page-movimientos .mv-fecha-date,
[data-theme="dark"] #page-movimientos .mv-fecha {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-movimientos .mv-fecha-hora,
[data-theme="dark"] #page-movimientos .mv-fecha-sub {
color: var(--ink-tertiary) !important;
}
/* ── CLIENTE column ── */
[data-theme="dark"] #page-movimientos .mv-cliente-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-movimientos .mv-cliente-dim,
[data-theme="dark"] #page-movimientos td.mv-cliente:empty,
[data-theme="dark"] #page-movimientos .mv-cliente-empty {
color: var(--ink-tertiary) !important;
}
/* ── PRODUCTO column ── */
[data-theme="dark"] #page-movimientos .mv-producto-name,
[data-theme="dark"] #page-movimientos .mv-producto {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-movimientos .mv-producto-more {
background: var(--surface-3) !important;
color: var(--ink-secondary) !important;
border: 1px solid var(--line-soft) !important;
}
/* ── LOCAL chip — preserva semántica (L1/L2 con tintes) ── */
[data-theme="dark"] #page-movimientos .mv-local.tag-l1 {
background: var(--c-blue-soft) !important;
color: var(--c-blue-ink) !important;
border-color: var(--c-blue-line) !important;
}
[data-theme="dark"] #page-movimientos .mv-local.tag-l2 {
background: var(--c-plum-soft) !important;
color: var(--c-plum-ink) !important;
border-color: var(--c-plum-line) !important;
}
/* ── PAGO column — dot semántico + label ── */
[data-theme="dark"] #page-movimientos .mv-pago,
[data-theme="dark"] #page-movimientos .mv-pago-label {
color: var(--ink-primary) !important;
}
/* Mantenemos colores semánticos del medio de pago (efectivo verde, débito azul, etc.) */
/* ── TOTAL column (héroe) ── */
[data-theme="dark"] #page-movimientos .mv-total {
color: var(--ink-primary) !important;
background: transparent !important;
}
[data-theme="dark"] #page-movimientos .mv-total.is-neg {
color: var(--c-red-ink) !important;
}
/* Hover chevron arrow */
[data-theme="dark"] #page-movimientos .mv-row-arrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-movimientos tbody tr:hover .mv-row-arrow {
color: var(--c-ember-ink) !important;
}
/* ── INSPECTOR LATERAL (cuando se selecciona una venta) ── */
[data-theme="dark"] #mov-inspector {
background: var(--surface-2) !important;
border-left: 1px solid var(--line-medium) !important;
color: var(--ink-primary) !important;
box-shadow: -16px 0 48px rgba(0, 0, 0, .4) !important;
}
[data-theme="dark"] .mv-ins-overlay {
background: rgba(10, 10, 11, .50) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
/* Inspector empty state */
[data-theme="dark"] #mov-inspector .mov-ins-empty,
[data-theme="dark"] #mov-inspector .mv-ins-empty {
color: var(--ink-tertiary) !important;
}
/* Inspector ticket card (.mvd-*) */
[data-theme="dark"] #mov-inspector .mvd-hd,
[data-theme="dark"] #mov-inspector .mvd-doc {
background: var(--surface-1) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #mov-inspector .mvd-eyebrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #mov-inspector .mvd-title,
[data-theme="dark"] #mov-inspector .mvd-num {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #mov-inspector .mvd-sub,
[data-theme="dark"] #mov-inspector .mvd-meta {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #mov-inspector .mvd-item {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #mov-inspector .mvd-item-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #mov-inspector .mvd-item-price,
[data-theme="dark"] #mov-inspector .mvd-item-qty {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #mov-inspector .mvd-total-val {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #mov-inspector .mvd-total-lbl {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #mov-inspector .mov2-ins-ticket-btn {
background: var(--surface-3) !important;
color: var(--ink-primary) !important;
border: 1px solid var(--line-medium) !important;
}
[data-theme="dark"] #mov-inspector .mov2-ins-ticket-btn:hover {
background: var(--surface-4) !important;
}
/* ── TOPBAR FILTER DROPDOWNS (Rango/Tipo/Pago/Local) ── */
[data-theme="dark"] #page-movimientos .mv2-filter-dd,
[data-theme="dark"] #page-movimientos .mv2-dropdown {
background: var(--controls-bg) !important;
border: 1px solid var(--controls-border) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-movimientos .mv2-filter-dd:hover {
background: var(--controls-bg-hover) !important;
}
/* ── PILLS DE FILTROS ACTIVOS ── */
[data-theme="dark"] #page-movimientos .mv2-chip {
background: var(--c-info-soft) !important;
color: var(--ink-primary) !important;
border: 1px solid var(--c-info-line) !important;
}
[data-theme="dark"] #page-movimientos .mv2-chip-clear {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-movimientos .mv2-chip-clear:hover {
color: var(--ink-primary) !important;
}
/* ═══════════════════════════════════════════════════════════════
v7.95.5 · DARK MODE — Página CIERRE DE CAJA
Override de hero, anatomy cards (arqueo + ventas + ranking + nota),
comparativa, historial e inputs con alta especificidad.
═══════════════════════════════════════════════════════════════ */
/* ── HERO (reloj + status + total) ── */
[data-theme="dark"] #page-cierre .cc-hero,
[data-theme="dark"] #page-cierre .cc3-hero {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
[data-theme="dark"] #page-cierre .cc-hero-clock,
[data-theme="dark"] #page-cierre .cc-hero-time,
[data-theme="dark"] #page-cierre .cc3-clock,
[data-theme="dark"] #page-cierre #cc-clock {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-cierre .cc-hero-date,
[data-theme="dark"] #page-cierre .cc3-date,
[data-theme="dark"] #page-cierre #cc2-fecha-hoy {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-cierre .cc-hero-status,
[data-theme="dark"] #page-cierre .cc3-status {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-cierre .cc-hero-eyebrow,
[data-theme="dark"] #page-cierre .cc3-eyebrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-cierre .cc-hero-title,
[data-theme="dark"] #page-cierre .cc3-hero-title,
[data-theme="dark"] #page-cierre .cc3-hero-greeting {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-cierre .cc-hero-total,
[data-theme="dark"] #page-cierre .cc3-hero-total,
[data-theme="dark"] #page-cierre #cc-total-vendido-hoy {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-cierre .cc-hero-sub,
[data-theme="dark"] #page-cierre .cc3-hero-sub {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-cierre .cc-hero-meta,
[data-theme="dark"] #page-cierre .cc3-hero-meta {
color: var(--ink-tertiary) !important;
}
/* Delta vs ayer */
[data-theme="dark"] #page-cierre .cc3-hero-delta,
[data-theme="dark"] #page-cierre .cc-hero-delta {
background: var(--c-red-soft) !important;
color: var(--c-red-ink) !important;
border: 1px solid var(--c-red-line) !important;
}
[data-theme="dark"] #page-cierre .cc3-hero-delta.up,
[data-theme="dark"] #page-cierre .cc-hero-delta.up {
background: var(--c-green-soft) !important;
color: var(--c-green-ink) !important;
border-color: var(--c-green-line) !important;
}
/* "Último cierre" footer */
[data-theme="dark"] #page-cierre .cc-hero-foot,
[data-theme="dark"] #page-cierre .cc3-hero-foot,
[data-theme="dark"] #page-cierre .cc3-last-cierre {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-cierre .cc-hero-foot strong,
[data-theme="dark"] #page-cierre .cc3-hero-foot strong {
color: var(--ink-secondary) !important;
}
/* CTA "Cerrar caja del día" — Lacca Sepia */
[data-theme="dark"] #page-cierre .cc-action-cta,
[data-theme="dark"] #page-cierre .cc3-action-cta,
[data-theme="dark"] #page-cierre #cc-cerrar-btn {
background: var(--grad-cta) !important;
border: 1px solid var(--line-medium) !important;
color: var(--ink-primary) !important;
box-shadow: var(--cta-highlight), 0 1px 2px rgba(0, 0, 0, .3) !important;
}
[data-theme="dark"] #page-cierre .cc-action-cta:hover,
[data-theme="dark"] #page-cierre .cc3-action-cta:hover {
background: var(--grad-cta-hover) !important;
border-color: var(--line-strong) !important;
}
[data-theme="dark"] #page-cierre .cc-action-sub,
[data-theme="dark"] #page-cierre .cc3-action-sub {
color: var(--ink-secondary) !important;
}
/* ── ANATOMY CARDS (todas las cards grandes — Cómo entró la plata, Ranking, etc.) ── */
[data-theme="dark"] #page-cierre .cc3-anatomy-card,
[data-theme="dark"] #page-cierre .cc-anatomy-card {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
}
/* Eyebrow + title de cada anatomy card */
[data-theme="dark"] #page-cierre .cc3-anatomy-eyebrow,
[data-theme="dark"] #page-cierre .cc-anatomy-eyebrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-cierre .cc3-anatomy-title,
[data-theme="dark"] #page-cierre .cc-anatomy-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-cierre .cc3-anatomy-sub,
[data-theme="dark"] #page-cierre .cc-anatomy-sub {
color: var(--ink-secondary) !important;
}
/* Separator entre eyebrow y body */
[data-theme="dark"] #page-cierre .cc3-anatomy-card hr,
[data-theme="dark"] #page-cierre .cc3-anatomy-head-sep {
border-color: var(--line-soft) !important;
}
/* ── DESGLOSE POR MEDIO DE PAGO ── */
[data-theme="dark"] #page-cierre .cc3-medio-row,
[data-theme="dark"] #page-cierre .cc-medio-row,
[data-theme="dark"] #page-cierre .cc3-medios-row {
color: var(--ink-primary) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-cierre .cc3-medio-name,
[data-theme="dark"] #page-cierre .cc-medio-name,
[data-theme="dark"] #page-cierre .cc3-medios-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-cierre .cc3-medio-monto,
[data-theme="dark"] #page-cierre .cc-medio-monto,
[data-theme="dark"] #page-cierre .cc3-medios-monto,
[data-theme="dark"] #page-cierre .cc3-medios-value {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-cierre .cc3-medio-count,
[data-theme="dark"] #page-cierre .cc-medio-count,
[data-theme="dark"] #page-cierre .cc3-medios-count {
color: var(--ink-tertiary) !important;
}
/* Donut center text */
[data-theme="dark"] #page-cierre #cc-donut-center-text,
[data-theme="dark"] #page-cierre #cc-donut-center-val,
[data-theme="dark"] #page-cierre #cc-donut-total {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-cierre #cc-donut-center-val ~ * {
color: var(--ink-tertiary) !important;
}
/* Pago progress bars (Efectivo / Débito / Transferencia / Caja) */
[data-theme="dark"] #page-cierre .cc-bar-track,
[data-theme="dark"] #page-cierre .cc3-bar-track {
background: var(--line-soft) !important;
}
/* ── ARQUEO DE CAJA ── */
[data-theme="dark"] #page-cierre .cc3-arqueo-row,
[data-theme="dark"] #page-cierre .cc-arqueo-row {
color: var(--ink-primary) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-cierre .cc3-arqueo-label,
[data-theme="dark"] #page-cierre .cc-arqueo-label {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-cierre .cc3-arqueo-value,
[data-theme="dark"] #page-cierre .cc-arqueo-value {
color: var(--ink-primary) !important;
}
/* Total egresos (rojo) */
[data-theme="dark"] #page-cierre .cc3-egresos-total {
color: var(--c-red-ink) !important;
}
/* Arqueo input (efectivo contado) */
[data-theme="dark"] #page-cierre .cc3-arqueo-input,
[data-theme="dark"] #page-cierre .cc-arqueo-input,
[data-theme="dark"] #page-cierre #cc-arqueo-contado {
background: var(--surface-3) !important;
border: 1px solid var(--line-medium) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-cierre .cc3-arqueo-input:focus,
[data-theme="dark"] #page-cierre .cc-arqueo-input:focus {
border-color: var(--c-ember) !important;
box-shadow: 0 0 0 3px var(--c-ember-soft) !important;
outline: none !important;
}
/* Diferencia (positiva/negativa con semántica) */
[data-theme="dark"] #page-cierre .cc3-diferencia.positivo,
[data-theme="dark"] #page-cierre .cc-diferencia.positivo {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-cierre .cc3-diferencia.negativo,
[data-theme="dark"] #page-cierre .cc-diferencia.negativo {
color: var(--c-red-ink) !important;
}
/* Retiro toggle btn */
[data-theme="dark"] #page-cierre .cc3-retiro-toggle-btn,
[data-theme="dark"] #page-cierre .cc-retiro-toggle-btn {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-cierre .cc3-retiro-toggle-btn:hover {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
/* Egreso item (gasto registrado) */
[data-theme="dark"] #page-cierre .cc3-egreso-item,
[data-theme="dark"] #page-cierre .cc-egreso-item {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-cierre .cc3-egreso-desc,
[data-theme="dark"] #page-cierre .cc-egreso-desc {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-cierre .cc3-egreso-monto {
color: var(--c-red-ink) !important;
}
[data-theme="dark"] #page-cierre .cc3-egreso-edit,
[data-theme="dark"] #page-cierre .cc3-egreso-del {
color: var(--ink-secondary) !important;
}
/* ── DETALLE DE VENTAS ── */
[data-theme="dark"] #page-cierre .cc3-ventas-foot-fixed,
[data-theme="dark"] #page-cierre .cc3-ventas-foot {
background: var(--surface-2) !important;
border-top: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
/* Filter pills detalle ventas */
[data-theme="dark"] #page-cierre .cc3-detalle-filter,
[data-theme="dark"] #page-cierre .cc-detalle-filter {
background: var(--controls-bg) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-cierre .cc3-detalle-filter.active {
background: var(--c-ember-soft) !important;
border-color: var(--c-ember-line) !important;
color: var(--c-ember-ink) !important;
}
/* Search detalle */
[data-theme="dark"] #page-cierre .cc-detalle-search,
[data-theme="dark"] #page-cierre .cc3-detalle-search {
background: var(--controls-bg) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-cierre .cc-detalle-search::placeholder {
color: var(--ink-tertiary) !important;
}
/* Venta row (en detalle) */
[data-theme="dark"] #page-cierre .cc3-venta-row,
[data-theme="dark"] #page-cierre .cc2-row {
background: var(--surface-3) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-cierre .cc3-venta-row:hover,
[data-theme="dark"] #page-cierre .cc2-row:hover {
background: var(--surface-4) !important;
}
[data-theme="dark"] #page-cierre .cc3-venta-prod,
[data-theme="dark"] #page-cierre .cc3-venta-total,
[data-theme="dark"] #page-cierre .cc2-row * {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-cierre .cc3-venta-meta,
[data-theme="dark"] #page-cierre .cc3-venta-sub {
color: var(--ink-tertiary) !important;
}
/* Empty state */
[data-theme="dark"] #page-cierre .cc3-empty,
[data-theme="dark"] #page-cierre .cc-empty {
color: var(--ink-tertiary) !important;
}
/* ── NOTA DEL TURNO (textarea) ── */
[data-theme="dark"] #page-cierre .cc3-nota-textarea,
[data-theme="dark"] #page-cierre #cc-nota-turno {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-cierre .cc3-nota-textarea:focus,
[data-theme="dark"] #page-cierre #cc-nota-turno:focus {
border-color: var(--c-ember) !important;
box-shadow: 0 0 0 3px var(--c-ember-soft) !important;
outline: none !important;
}
[data-theme="dark"] #page-cierre .cc3-nota-textarea::placeholder {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-cierre .cc3-nota-counter {
color: var(--ink-tertiary) !important;
}
/* ── COMPARATIVA (ayer / hoy / etc.) ── */
[data-theme="dark"] #page-cierre .cc3-comp-bar-wrap,
[data-theme="dark"] #page-cierre .cc-comp-bar-wrap {
background: var(--line-soft) !important;
}
[data-theme="dark"] #page-cierre .cc3-comp-label,
[data-theme="dark"] #page-cierre .cc-comp-label {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-cierre .cc3-comp-val,
[data-theme="dark"] #page-cierre .cc-comp-val {
color: var(--ink-primary) !important;
}
/* ── HISTORIAL (rows + filter pills + search) ── */
[data-theme="dark"] #page-cierre .cc3-hist-row,
[data-theme="dark"] #page-cierre .cc2-hist-item {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-cierre .cc3-hist-row:hover {
background: var(--surface-4) !important;
}
[data-theme="dark"] #page-cierre .cc3-hist-fecha,
[data-theme="dark"] #page-cierre .cc3-hist-total {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-cierre .cc3-hist-meta,
[data-theme="dark"] #page-cierre .cc3-hist-sub {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-cierre .cc3-hist-delta {
color: var(--ink-secondary) !important;
}
/* Filter pills historial (30d/7d/90d/Todo) */
[data-theme="dark"] #page-cierre .cc3-pago-filtro,
[data-theme="dark"] #page-cierre .cc3-hist-filtro {
background: var(--controls-bg) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-cierre .cc3-pago-filtro.active,
[data-theme="dark"] #page-cierre .cc3-hist-filtro.active {
background: var(--c-ember-soft) !important;
border-color: var(--c-ember-line) !important;
color: var(--c-ember-ink) !important;
}
/* Hist edit/delete buttons */
[data-theme="dark"] #page-cierre .cc3-hist-edit,
[data-theme="dark"] #page-cierre .cc3-hist-del {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-cierre .cc3-hist-del:hover {
background: var(--c-red-soft) !important;
border-color: var(--c-red-line) !important;
color: var(--c-red-ink) !important;
}
/* Obs save btn */
[data-theme="dark"] #page-cierre .cc-obs-save {
background: var(--grad-cta) !important;
border: 1px solid var(--line-medium) !important;
color: var(--ink-primary) !important;
box-shadow: var(--cta-highlight) !important;
}
[data-theme="dark"] #page-cierre .cc-obs-save:hover {
background: var(--grad-cta-hover) !important;
}
/* ═══════════════════════════════════════════════════════════════
v7.95.6 · DARK MODE — Cierre de Caja: auditoría completa
Fix de TODOS los textos invisibles + comparativa semanal SVG
con paleta Vibrant Linear (azul → naranja).
═══════════════════════════════════════════════════════════════ */
/* ── HERO TOTAL ── */
[data-theme="dark"] #page-cierre .cc4-hero-total,
[data-theme="dark"] #page-cierre #cc-total-vendido-hoy,
[data-theme="dark"] #page-cierre .cc4-hero-total span {
color: var(--ink-primary) !important;
}
/* ── EYEBROWS (sub-section headers en cards) ── */
[data-theme="dark"] #page-cierre .cc3-sub-eyebrow,
[data-theme="dark"] #page-cierre .cc3-sub-eyebrow-spaced,
[data-theme="dark"] #page-cierre .cc3-anatomy-count {
color: var(--ink-tertiary) !important;
}
/* ── DESGLOSE MEDIOS (clase correcta es cc3-medios-amount) ── */
[data-theme="dark"] #page-cierre .cc3-medios-amount,
[data-theme="dark"] #page-cierre .cc3-medios-monto,
[data-theme="dark"] #page-cierre .cc3-medios-value {
color: var(--ink-primary) !important;
}
/* ── ARQUEO VALUES ── */
[data-theme="dark"] #page-cierre .cc3-arqueo-val,
[data-theme="dark"] #page-cierre .cc-arqueo-val,
[data-theme="dark"] #page-cierre .cc3-arqueo-val.cc-dif-neutral,
[data-theme="dark"] #page-cierre .cc3-arqueo-val.cc-dif-pos,
[data-theme="dark"] #page-cierre .cc3-arqueo-val.cc-dif-neg {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-cierre .cc3-arqueo-val.cc3-arqueo-val-neg {
color: var(--c-red-ink) !important;
}
[data-theme="dark"] #page-cierre .cc3-arqueo-val.cc3-arqueo-val-pos {
color: var(--c-green-ink) !important;
}
/* Input prefix "$" */
[data-theme="dark"] #page-cierre .cc3-arqueo-input-prefix,
[data-theme="dark"] #page-cierre .cc-arqueo-input-prefix {
color: var(--ink-tertiary) !important;
}
/* ── GHOST BUTTON (Cancelar, etc.) ── */
[data-theme="dark"] #page-cierre .cc3-btn-ghost,
[data-theme="dark"] #page-cierre .cc-obs-cancel {
background: transparent !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-cierre .cc3-btn-ghost:hover,
[data-theme="dark"] #page-cierre .cc-obs-cancel:hover {
background: var(--surface-3) !important;
color: var(--ink-primary) !important;
}
/* ── ANATOMY TITLE SM (Detalle de ventas, etc.) ── */
[data-theme="dark"] #page-cierre .cc3-anatomy-title-sm,
[data-theme="dark"] #page-cierre .cc-anatomy-title-sm {
color: var(--ink-primary) !important;
}
/* ── LISTA FOOT (TOTAL DEL DÍA · $39.470) ── */
[data-theme="dark"] #page-cierre .cc2-list-foot,
[data-theme="dark"] #page-cierre .cc2-list-foot-label,
[data-theme="dark"] #page-cierre .cc-list-foot-label {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-cierre .cc2-list-foot-total,
[data-theme="dark"] #page-cierre .cc-list-foot-total {
color: var(--ink-primary) !important;
}
/* ── TOP PRODUCTOS / RANKING (Cortes más vendidos) ── */
[data-theme="dark"] #page-cierre .cc-top-name,
[data-theme="dark"] #page-cierre .cc-top-rank,
[data-theme="dark"] #page-cierre .cc-top-monto {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-cierre .cc-top-rank.gold {
color: var(--c-amber-ink) !important;
}
[data-theme="dark"] #page-cierre .cc-top-meta {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-cierre .cc-top-bar-wrap {
background: var(--line-soft) !important;
}
[data-theme="dark"] #page-cierre .cc-top-bar-fill {
background: linear-gradient(90deg, #0A84FF 0%, #FF6B35 100%) !important;
}
/* ── COMPARATIVA STATS (VS PROMEDIO + valor) ── */
[data-theme="dark"] #page-cierre .cc3-comp-stat-label {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-cierre .cc3-comp-stat-val {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-cierre .cc3-comp-stat-val.up {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-cierre .cc3-comp-stat-val.down {
color: var(--c-red-ink) !important;
}
/* ── COMPARATIVA SVG — pasa colors por currentColor ──
El JS usa fill="currentColor" en grid lines, y-labels, día labels y date labels.
Acá seteamos el color del contenedor para que el SVG herede el ink correcto en dark.
*/
[data-theme="dark"] #page-cierre .cc3-comp-svg {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-cierre .cc3-comp-grid {
stroke: var(--line-soft) !important;
}
[data-theme="dark"] #page-cierre .cc3-comp-ylabel {
fill: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-cierre .cc3-comp-day-label {
fill: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-cierre .cc3-comp-date-label {
fill: var(--ink-tertiary) !important;
}
/* Pill del promedio: bg dark surface en lugar de white */
[data-theme="dark"] #page-cierre .cc3-comp-prom-pill {
fill: var(--surface-3) !important;
}
/* ── HISTORIAL ── */
[data-theme="dark"] #page-cierre .cc3-hist-filter {
background: transparent !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-cierre .cc3-hist-filter.on,
[data-theme="dark"] #page-cierre .cc3-hist-filter.active {
background: var(--c-ember-soft) !important;
border-color: var(--c-ember-line) !important;
color: var(--c-ember-ink) !important;
}
/* Date row (03 JUN MIÉ · 2026) */
[data-theme="dark"] #page-cierre .cc3-hist-date-day {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-cierre .cc3-hist-date-mon {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-cierre .cc3-hist-date-week,
[data-theme="dark"] #page-cierre .cc3-hist-year {
color: var(--ink-tertiary) !important;
}
/* Medios por fila historial ($X.XXX por medio) */
[data-theme="dark"] #page-cierre .cc3-hist-medio-amt,
[data-theme="dark"] #page-cierre .cc3-hist-medio-name {
color: var(--ink-secondary) !important;
}
/* ── TOOLTIPS DEL CHART (cc3-comp-tooltip) ── */
[data-theme="dark"] #page-cierre #cc3-comp-tooltip,
[data-theme="dark"] #page-cierre .cc3-comp-tooltip {
background: var(--surface-3) !important;
border: 1px solid var(--line-medium) !important;
color: var(--ink-primary) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, .4) !important;
}
[data-theme="dark"] #page-cierre #cc3-comp-tooltip-day,
[data-theme="dark"] #page-cierre #cc3-comp-tooltip-monto {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-cierre #cc3-comp-tooltip-meta {
color: var(--ink-tertiary) !important;
}
/* ── Cierre dark mode: clases adicionales detectadas en auditoría 2da pasada ── */
[data-theme="dark"] #page-cierre .cc3-hist-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-cierre .cc3-hist-row strong,
[data-theme="dark"] #page-cierre .cc2-hist-item strong {
color: var(--ink-primary) !important;
}
/* ═══════════════════════════════════════════════════════════════
v7.95.7 · DARK MODE — Página VENCIMIENTOS
Override de header, asistente, KPI cards, tabla, group headers,
data rows. Preserva semántica vencimiento (rojo/amber/verde).
═══════════════════════════════════════════════════════════════ */
/* ── HEADER (eyebrow + título "Vencimientos") ── */
[data-theme="dark"] #page-vencimientos .v3-eyebrow {
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] #page-vencimientos .v3-title,
[data-theme="dark"] #page-vencimientos h1.v3-title {
background: transparent !important;
color: var(--ink-primary) !important;
border: none !important;
box-shadow: none !important;
}
[data-theme="dark"] #page-vencimientos .v3-subtitle {
color: var(--ink-secondary) !important;
}
/* ── ASISTENTE CARD (la del avatar T con mensaje) ── */
[data-theme="dark"] #page-vencimientos .va-card,
[data-theme="dark"] #page-vencimientos .va-card-v2 {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
}
[data-theme="dark"] #page-vencimientos .va-card.atencion,
[data-theme="dark"] #page-vencimientos .va-card-v2.atencion {
border-left: 3px solid var(--c-amber) !important;
}
[data-theme="dark"] #page-vencimientos .va-card.urgente,
[data-theme="dark"] #page-vencimientos .va-card-v2.urgente {
border-left: 3px solid var(--c-red) !important;
}
[data-theme="dark"] #page-vencimientos .va-card.ok,
[data-theme="dark"] #page-vencimientos .va-card-v2.ok {
border-left: 3px solid var(--c-green) !important;
}
[data-theme="dark"] #page-vencimientos .va-eyebrow,
[data-theme="dark"] #page-vencimientos .va-sub-eyebrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-vencimientos .va-title,
[data-theme="dark"] #page-vencimientos .va-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-vencimientos .va-body,
[data-theme="dark"] #page-vencimientos .va-text {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-vencimientos .va-prod-chip {
background: var(--surface-3) !important;
color: var(--ink-primary) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-vencimientos .va-prod-chip-days {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-vencimientos .va-foot,
[data-theme="dark"] #page-vencimientos .va-empty {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-vencimientos .va-btn {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-vencimientos .va-btn:hover {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
/* ── KPI CARDS (Crítico / Próximos 7 días / Sin Controlar / Asistente) ── */
[data-theme="dark"] #page-vencimientos .v-kpi {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
}
[data-theme="dark"] #page-vencimientos .v-kpi-critico {
border-left: 3px solid var(--c-red) !important;
}
[data-theme="dark"] #page-vencimientos .v-kpi-hero {
border-left: 3px solid var(--c-amber) !important;
}
[data-theme="dark"] #page-vencimientos .v-kpi-control {
border-left: 3px solid var(--c-blue) !important;
}
[data-theme="dark"] #page-vencimientos .v-kpi-eyebrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-vencimientos .v-kpi-num,
[data-theme="dark"] #page-vencimientos .v-kpi-num-lg {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-vencimientos .v-kpi-critico .v-kpi-num {
color: var(--c-red-ink) !important;
}
[data-theme="dark"] #page-vencimientos .v-kpi-sub,
[data-theme="dark"] #page-vencimientos .v-kpi-meta {
color: var(--ink-secondary) !important;
}
/* Stacked bar legend (0 vencidos · 1 vence hoy) */
[data-theme="dark"] #page-vencimientos .v-stacked-legend-item {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-vencimientos .v-stacked-legend-item.seg-danger {
color: var(--c-red-ink) !important;
}
[data-theme="dark"] #page-vencimientos .v-stacked-legend-item.seg-amber {
color: var(--c-amber-ink) !important;
}
[data-theme="dark"] #page-vencimientos .v-stacked-bar {
background: var(--line-soft) !important;
}
/* Day chart (Próximos 7 días con bars y labels) */
[data-theme="dark"] #page-vencimientos .v-day-bar-wrap {
background: var(--line-soft) !important;
}
[data-theme="dark"] #page-vencimientos .v-day-bar-count {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-vencimientos .v-day-label {
color: var(--ink-tertiary) !important;
}
/* Ring (Sin Controlar progress) */
[data-theme="dark"] #page-vencimientos .v-ring-pct {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-vencimientos .v-ring-label {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-vencimientos .v-ring-bg-track {
stroke: var(--line-soft) !important;
}
/* Sin Controlar chips (productos con # del lote viejo) */
[data-theme="dark"] #page-vencimientos .v3-sc-chip {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-vencimientos .v3-sc-chip-name {
color: var(--c-amber-ink) !important;
}
[data-theme="dark"] #page-vencimientos .v3-sc-chip-diff {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-vencimientos .v3-sc-chip-diff.v3-sc-neg {
color: var(--c-red-ink) !important;
}
[data-theme="dark"] #page-vencimientos .v3-sc-chip-diff.v3-sc-pos {
color: var(--c-green-ink) !important;
}
/* ── TABLA PRINCIPAL ── */
[data-theme="dark"] #page-vencimientos .v-table-container,
[data-theme="dark"] #page-vencimientos .v-table-wrap,
[data-theme="dark"] #page-vencimientos .v3-table-container {
background: var(--surface-1) !important;
border: 1px solid var(--line-soft) !important;
border-radius: 14px !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
overflow: hidden;
}
[data-theme="dark"] #page-vencimientos .v-table,
[data-theme="dark"] #page-vencimientos .v3-table,
[data-theme="dark"] #page-vencimientos table {
background: transparent !important;
color: var(--ink-primary) !important;
border: none !important;
}
/* Table meta header (138 LOTES · POR PROXIMIDAD AL VENCIMIENTO) */
[data-theme="dark"] #page-vencimientos .v-table-count,
[data-theme="dark"] #page-vencimientos .v-table-meta {
color: var(--ink-tertiary) !important;
}
/* Table header row */
[data-theme="dark"] #page-vencimientos thead,
[data-theme="dark"] #page-vencimientos thead th,
[data-theme="dark"] #page-vencimientos .lxg-td-center,
[data-theme="dark"] #page-vencimientos .lxg-td-right,
[data-theme="dark"] #page-vencimientos .lxg-td-left {
background: var(--surface-2) !important;
color: var(--ink-tertiary) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
/* ── GROUP HEADERS (VENCE HOY · 1 lote / URGENTE · 1-3 DÍAS · 17 lotes) ── */
[data-theme="dark"] #page-vencimientos .v-group-header,
[data-theme="dark"] #page-vencimientos .v-group-row,
[data-theme="dark"] #page-vencimientos tr.v-group-header td {
background: var(--surface-3) !important;
border-top: 1px solid var(--line-soft) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-vencimientos .v-group-name {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-vencimientos .v-group-count {
color: var(--ink-tertiary) !important;
}
/* Dots semánticos por grupo */
[data-theme="dark"] #page-vencimientos .v-group-dot.seg-vencido,
[data-theme="dark"] #page-vencimientos .v-group-dot.seg-hoy {
background: var(--c-red) !important;
}
[data-theme="dark"] #page-vencimientos .v-group-dot.seg-urgente {
background: var(--c-amber) !important;
}
[data-theme="dark"] #page-vencimientos .v-group-dot.seg-bien {
background: var(--c-green) !important;
}
/* ── DATA ROWS ── */
[data-theme="dark"] #page-vencimientos tbody tr,
[data-theme="dark"] #page-vencimientos .v-row {
background: var(--surface-1) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-vencimientos tbody tr:hover {
background: var(--surface-2) !important;
}
[data-theme="dark"] #page-vencimientos tbody td {
color: var(--ink-primary) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
/* Producto cell */
[data-theme="dark"] #page-vencimientos .v-prod-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-vencimientos .v-prod-cat {
color: var(--ink-tertiary) !important;
}
/* Lote / Cant / Ingreso */
[data-theme="dark"] #page-vencimientos .v-lote,
[data-theme="dark"] #page-vencimientos .v-cant,
[data-theme="dark"] #page-vencimientos .v-ingreso {
color: var(--ink-primary) !important;
}
/* ── BADGES VENCIMIENTO (preserva semántica rojo/amber/verde) ── */
[data-theme="dark"] #page-vencimientos .v-badge,
[data-theme="dark"] #page-vencimientos .v3-badge {
border: 1px solid currentColor;
}
[data-theme="dark"] #page-vencimientos .v-badge.v-badge-danger,
[data-theme="dark"] #page-vencimientos .v3-badge-vencido {
background: var(--c-red-soft) !important;
color: var(--c-red-ink) !important;
border-color: var(--c-red-line) !important;
}
[data-theme="dark"] #page-vencimientos .v-badge.v-badge-amber,
[data-theme="dark"] #page-vencimientos .v3-badge-proximo {
background: var(--c-amber-soft) !important;
color: var(--c-amber-ink) !important;
border-color: var(--c-amber-line) !important;
}
[data-theme="dark"] #page-vencimientos .v-badge.v-badge-info {
background: var(--c-blue-soft) !important;
color: var(--c-blue-ink) !important;
border-color: var(--c-blue-line) !important;
}
[data-theme="dark"] #page-vencimientos .v-badge.v-badge-green,
[data-theme="dark"] #page-vencimientos .v3-badge-ok {
background: var(--c-green-soft) !important;
color: var(--c-green-ink) !important;
border-color: var(--c-green-line) !important;
}
/* ── ACCIONES BUTTONS (Resolver, etc.) ── */
[data-theme="dark"] #page-vencimientos .v-action-btn,
[data-theme="dark"] #page-vencimientos .lxg-btn--sm.lxg-btn--ember {
background: var(--c-ember-soft) !important;
color: var(--c-ember-ink) !important;
border: 1px solid var(--c-ember-line) !important;
}
[data-theme="dark"] #page-vencimientos .v-action-btn:hover,
[data-theme="dark"] #page-vencimientos .lxg-btn--sm.lxg-btn--ember:hover {
background: var(--c-ember-line) !important;
color: var(--c-ember) !important;
}
/* "Resolver todos" (header de grupo) */
[data-theme="dark"] #page-vencimientos .v-group-action,
[data-theme="dark"] #page-vencimientos .v3-group-action {
background: transparent !important;
border: 1px solid var(--c-red-line) !important;
color: var(--c-red-ink) !important;
}
[data-theme="dark"] #page-vencimientos .v-group-action:hover {
background: var(--c-red-soft) !important;
}
/* ── "EN BUEN ESTADO" collapsed hint ── */
[data-theme="dark"] #page-vencimientos .v-bien-row,
[data-theme="dark"] #page-vencimientos .v-bien-collapsed {
background: var(--surface-2) !important;
border-top: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-vencimientos .v-bien-label {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-vencimientos .v-bien-count {
color: var(--ink-tertiary) !important;
}
/* ── LOCAL chips (preserva semántica L1/L2) ── */
[data-theme="dark"] #page-vencimientos .v-local.tag-l1 {
background: var(--c-blue-soft) !important;
color: var(--c-blue-ink) !important;
border-color: var(--c-blue-line) !important;
}
[data-theme="dark"] #page-vencimientos .v-local.tag-l2 {
background: var(--c-plum-soft) !important;
color: var(--c-plum-ink) !important;
border-color: var(--c-plum-line) !important;
}
/* ── BOTÓN "Agregar lote" (Lacca Sepia) ── */
[data-theme="dark"] #page-vencimientos .v3-btn-add,
[data-theme="dark"] #page-vencimientos .v-btn-primary {
background: var(--grad-cta) !important;
border: 1px solid var(--line-medium) !important;
color: var(--ink-primary) !important;
box-shadow: var(--cta-highlight), 0 1px 2px rgba(0, 0, 0, .3) !important;
}
[data-theme="dark"] #page-vencimientos .v3-btn-add:hover {
background: var(--grad-cta-hover) !important;
}
/* Hover-only actions reveal */
[data-theme="dark"] #page-vencimientos .v-row-actions,
[data-theme="dark"] #page-vencimientos .v-hover-actions {
background: transparent !important;
}
/* ── EMPTY STATE ── */
[data-theme="dark"] #page-vencimientos .v-empty,
[data-theme="dark"] #page-vencimientos .v3-empty {
color: var(--ink-tertiary) !important;
}
/* ── Vencimientos dark mode: fix group header td blanco ── */
[data-theme="dark"] #page-vencimientos tr.v-group-row,
[data-theme="dark"] #page-vencimientos tr.v-group-row td,
[data-theme="dark"] #page-vencimientos tr.v-group td,
[data-theme="dark"] #page-vencimientos tbody tr.v-group-row td {
background: var(--surface-3) !important;
border-top: 1px solid var(--line-soft) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
/* ═══════════════════════════════════════════════════════════════
v7.95.8 · DARK MODE — Página TRANSFERENCIAS entre locales
Override de cards, lista productos, carrito, KPIs, historial.
Preserva semántica de estados (pendiente, recibida, etc.).
═══════════════════════════════════════════════════════════════ */
/* ── PAGE HEAD (título + KPIs) ── */
[data-theme="dark"] #page-transferencia .trf-page-head,
[data-theme="dark"] #page-transferencia .trf-page-head-left {
background: transparent !important;
border: none !important;
}
[data-theme="dark"] #page-transferencia .trf-title,
[data-theme="dark"] #page-transferencia h1.trf-title {
background: transparent !important;
color: var(--ink-primary) !important;
border: none !important;
box-shadow: none !important;
}
[data-theme="dark"] #page-transferencia .trf-subtitle,
[data-theme="dark"] #page-transferencia .trf-kicker {
color: var(--ink-secondary) !important;
}
/* KPIs strip arriba (Enviadas / Recibidas / Pendientes) */
[data-theme="dark"] #page-transferencia .trf-kpis,
[data-theme="dark"] #page-transferencia .trf-kpis-4 {
background: transparent !important;
}
[data-theme="dark"] #page-transferencia .trf-kpi {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
}
[data-theme="dark"] #page-transferencia .trf-kpi-label {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-transferencia .trf-kpi-value,
[data-theme="dark"] #page-transferencia .trf-kpi-value-sm {
color: var(--ink-primary) !important;
}
/* Pendientes destacados en ember (semántico) */
[data-theme="dark"] #page-transferencia .trf-kpi.is-pending .trf-kpi-value {
color: var(--c-ember) !important;
}
/* ── GRID (2 columnas: form + history) ── */
[data-theme="dark"] #page-transferencia .trf-grid,
[data-theme="dark"] #page-transferencia .trf-col,
[data-theme="dark"] #page-transferencia .trf-col-form,
[data-theme="dark"] #page-transferencia .trf-col-history {
background: transparent !important;
}
/* ── CARD principal (nueva transferencia + historial) ── */
[data-theme="dark"] #page-transferencia .trf-card {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
}
[data-theme="dark"] #page-transferencia .trf-card-head {
background: transparent !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-transferencia .trf-card-eyebrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-transferencia .trf-card-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-transferencia .trf-card-body {
background: transparent !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-transferencia .trf-card-foot {
background: transparent !important;
border-top: 1px solid var(--line-soft) !important;
}
/* ── ROUTE selector (Local 1 → Local 2) ── */
[data-theme="dark"] #page-transferencia .trf-route {
background: transparent !important;
}
[data-theme="dark"] #page-transferencia .trf-route-field {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-transferencia .trf-route-field:hover {
background: var(--surface-4) !important;
}
[data-theme="dark"] #page-transferencia .trf-route-arrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-transferencia .trf-route-field select,
[data-theme="dark"] #page-transferencia .trf-route-field input {
background: transparent !important;
color: var(--ink-primary) !important;
border: none !important;
}
/* ── SECTION HEADERS ("PRODUCTOS DISPONIBLES EN ORIGEN", etc.) ── */
[data-theme="dark"] #page-transferencia .trf-section-head {
background: transparent !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-transferencia .trf-section-label {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-transferencia .trf-section-count {
color: var(--ink-tertiary) !important;
}
/* ── SEARCH input ── */
[data-theme="dark"] #page-transferencia .trf-search,
[data-theme="dark"] #page-transferencia .trf-filter-search {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-transferencia .trf-search::placeholder,
[data-theme="dark"] #page-transferencia .trf-filter-search::placeholder {
color: var(--ink-tertiary) !important;
}
/* ── LIST de productos disponibles en origen ── */
[data-theme="dark"] #page-transferencia .trf-prod-list {
background: transparent !important;
}
[data-theme="dark"] #page-transferencia .trf-prod-row {
background: var(--surface-1) !important;
border-bottom: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-transferencia .trf-prod-row:hover {
background: var(--surface-3) !important;
}
[data-theme="dark"] #page-transferencia .trf-prod-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-transferencia .trf-prod-info {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-transferencia .trf-prod-stock {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-transferencia .trf-prod-dest-hint {
color: var(--ink-tertiary) !important;
}
/* "+ AGREGAR" button en cada fila */
[data-theme="dark"] #page-transferencia .trf-prod-cta {
background: transparent !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-transferencia .trf-prod-cta:hover {
background: var(--c-ember-soft) !important;
border-color: var(--c-ember-line) !important;
color: var(--c-ember-ink) !important;
}
/* ── CARRITO ("Productos a transferir") ── */
[data-theme="dark"] #page-transferencia .trf-cart {
background: var(--surface-1) !important;
border: 1px solid var(--line-soft) !important;
border-radius: 10px !important;
}
[data-theme="dark"] #page-transferencia .trf-cart-empty {
color: var(--ink-tertiary) !important;
}
/* ── OBSERVACIONES (textarea) ── */
[data-theme="dark"] #page-transferencia .trf-label,
[data-theme="dark"] #page-transferencia .trf-label-opt {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-transferencia textarea {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-transferencia textarea::placeholder {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-transferencia textarea:focus {
border-color: var(--c-ember) !important;
box-shadow: 0 0 0 3px var(--c-ember-soft) !important;
outline: none !important;
}
/* ── BOTONES (Limpiar + Confirmar transferencia) ── */
[data-theme="dark"] #page-transferencia .trf-btn-clear {
background: transparent !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-transferencia .trf-btn-clear:hover {
background: var(--surface-3) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-transferencia .trf-btn-confirm {
background: var(--grad-cta) !important;
border: 1px solid var(--line-medium) !important;
color: var(--ink-primary) !important;
box-shadow: var(--cta-highlight), 0 1px 2px rgba(0, 0, 0, .3) !important;
}
[data-theme="dark"] #page-transferencia .trf-btn-confirm:hover {
background: var(--grad-cta-hover) !important;
border-color: var(--line-strong) !important;
}
/* ── FILTROS (Gestión, Dirección, Período) en columna derecha ── */
[data-theme="dark"] #page-transferencia .trf-filters {
background: transparent !important;
}
[data-theme="dark"] #page-transferencia .trf-filter-group {
background: transparent !important;
}
[data-theme="dark"] #page-transferencia .trf-filter-label {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-transferencia .trf-filter-pills {
background: transparent !important;
}
[data-theme="dark"] #page-transferencia .trf-pill,
[data-theme="dark"] #page-transferencia .trf-pill-input {
background: var(--controls-bg) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-transferencia .trf-pill:hover {
background: var(--controls-bg-hover) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-transferencia .trf-pill.is-active,
[data-theme="dark"] #page-transferencia .trf-pill.active {
background: var(--c-ember-soft) !important;
border-color: var(--c-ember-line) !important;
color: var(--c-ember-ink) !important;
}
/* ── HISTORIAL filas ── */
[data-theme="dark"] #page-transferencia .trf-history {
background: transparent !important;
}
[data-theme="dark"] #page-transferencia .trf-history-row {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
border-radius: 10px !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-transferencia .trf-history-row:hover {
background: var(--surface-3) !important;
border-color: var(--line-medium) !important;
}
/* Pendiente — border-left ember */
[data-theme="dark"] #page-transferencia .trf-history-row.is-pending {
border-left: 3px solid var(--c-ember) !important;
}
[data-theme="dark"] #page-transferencia .trf-history-row.has-lotes {
/* mantiene su tratamiento normal */
}
/* Top de cada row (producto + cantidad) */
[data-theme="dark"] #page-transferencia .trf-history-top,
[data-theme="dark"] #page-transferencia .trf-history-bot {
background: transparent !important;
}
[data-theme="dark"] #page-transferencia .trf-history-prod {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-transferencia .trf-history-qty {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-transferencia .trf-history-meta {
color: var(--ink-tertiary) !important;
}
/* Route (Torre → Shopping) */
[data-theme="dark"] #page-transferencia .trf-history-route,
[data-theme="dark"] #page-transferencia .trf-history-loc {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-transferencia .trf-history-arrow {
color: var(--ink-tertiary) !important;
}
/* Lotes pills (dentro del historial) */
[data-theme="dark"] #page-transferencia .trf-history-lotes {
background: transparent !important;
}
[data-theme="dark"] #page-transferencia .trf-history-lote-pill {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
/* Devolución / Recepción badges */
[data-theme="dark"] #page-transferencia .trf-history-dev {
color: var(--c-amber-ink) !important;
}
[data-theme="dark"] #page-transferencia .trf-recep-badge {
background: var(--c-green-soft) !important;
border: 1px solid var(--c-green-line) !important;
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-transferencia .trf-recep-badge.is-pending {
background: var(--c-ember-soft) !important;
border-color: var(--c-ember-line) !important;
color: var(--c-ember-ink) !important;
}
/* ═══════════════════════════════════════════════════════════════
v7.95.9 · DARK MODE — Modales del sistema (lx-modal-*)
Aplica a TODOS los modales que usen la arquitectura lx-modal:
Stock CRUD, Clientes, Costos, Cajas, Ajuste inventario, etc.
═══════════════════════════════════════════════════════════════ */
/* ── OVERLAY/BACKDROP del modal ── */
[data-theme="dark"] .lx-modal-overlay,
[data-theme="dark"] .lx-confirm-overlay,
[data-theme="dark"] .modal-overlay {
background: rgba(10, 10, 11, .72) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
/* ── MODAL SHELL (contenedor principal) ── */
[data-theme="dark"] .lx-modal,
[data-theme="dark"] .modal.lx-modal {
background: var(--surface-2) !important;
border: 1px solid var(--line-medium) !important;
color: var(--ink-primary) !important;
box-shadow: var(--shadow-modal) !important;
}
/* ── HEAD del modal (eyebrow + título + sub + close) ── */
[data-theme="dark"] .lx-modal-head {
background: transparent !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .lx-modal-head-row {
background: transparent !important;
}
[data-theme="dark"] .lx-modal-head-text {
background: transparent !important;
}
[data-theme="dark"] .lx-modal-eyebrow {
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] .lx-modal-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .lx-modal-sub {
color: var(--ink-secondary) !important;
}
/* Corner badge (ACTIVO / etc.) */
[data-theme="dark"] .lx-modal-corner {
background: var(--c-green-soft) !important;
color: var(--c-green-ink) !important;
border: 1px solid var(--c-green-line) !important;
}
/* Close button (X arriba-derecha) */
[data-theme="dark"] .lx-modal-close {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .lx-modal-close:hover {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
/* ── BODY del modal (form, secciones) ── */
[data-theme="dark"] .lx-modal-body {
background: transparent !important;
color: var(--ink-primary) !important;
}
/* Section headers (DETALLES DEL PRODUCTO, PRECIO, etc.) */
[data-theme="dark"] .lx-section {
background: transparent !important;
}
[data-theme="dark"] .lx-section-label {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .lx-section-label::before {
background: var(--c-ember) !important;
}
/* ── FORM FIELDS (labels + inputs + selects) ── */
[data-theme="dark"] .lx-grid,
[data-theme="dark"] .lx-sub-grid {
background: transparent !important;
}
[data-theme="dark"] .lx-sf,
[data-theme="dark"] .lx-fg {
background: transparent !important;
}
/* Field label */
[data-theme="dark"] .lx-sf-lbl,
[data-theme="dark"] .lx-modal label,
[data-theme="dark"] .lx-modal-body label {
color: var(--ink-tertiary) !important;
}
/* Required dot */
[data-theme="dark"] .lx-req,
[data-theme="dark"] .lx-req-dot {
color: var(--c-ember) !important;
}
/* Inputs y selects */
[data-theme="dark"] .lx-modal input[type="text"],
[data-theme="dark"] .lx-modal input[type="number"],
[data-theme="dark"] .lx-modal input[type="email"],
[data-theme="dark"] .lx-modal input[type="tel"],
[data-theme="dark"] .lx-modal input[type="date"],
[data-theme="dark"] .lx-modal input[type="search"],
[data-theme="dark"] .lx-modal input[type="password"],
[data-theme="dark"] .lx-modal select,
[data-theme="dark"] .lx-modal textarea {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .lx-modal input::placeholder,
[data-theme="dark"] .lx-modal textarea::placeholder {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .lx-modal input:hover,
[data-theme="dark"] .lx-modal select:hover,
[data-theme="dark"] .lx-modal textarea:hover {
background: var(--surface-4) !important;
border-color: var(--line-medium) !important;
}
[data-theme="dark"] .lx-modal input:focus,
[data-theme="dark"] .lx-modal select:focus,
[data-theme="dark"] .lx-modal textarea:focus {
background: var(--surface-3) !important;
border-color: var(--c-ember) !important;
box-shadow: 0 0 0 3px var(--c-ember-soft) !important;
outline: none !important;
}
/* Select arrow (custom) */
[data-theme="dark"] .lx-modal select {
background-image: linear-gradient(45deg, transparent 50%, var(--ink-secondary) 50%),
linear-gradient(135deg, var(--ink-secondary) 50%, transparent 50%) !important;
background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50% !important;
background-size: 4px 4px, 4px 4px !important;
background-repeat: no-repeat !important;
}
/* Field hints */
[data-theme="dark"] .lx-hint {
color: var(--ink-tertiary) !important;
}
/* ── CHECKBOX / SWITCH ROW ── */
[data-theme="dark"] .lx-switch-row {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .lx-switch-row:hover {
background: var(--surface-4) !important;
}
[data-theme="dark"] .lx-switch-tag {
background: var(--c-info-soft) !important;
color: var(--c-info-ink) !important;
border: 1px solid var(--c-info-line) !important;
}
[data-theme="dark"] .lx-modal input[type="checkbox"] {
background: var(--surface-1) !important;
border: 1px solid var(--line-medium) !important;
accent-color: var(--c-ember) !important;
}
[data-theme="dark"] .lx-modal input[type="radio"] {
accent-color: var(--c-ember) !important;
}
/* ── OPCIONES / RADIO TILES ── */
[data-theme="dark"] .lx-opt {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .lx-opt:hover {
background: var(--surface-4) !important;
border-color: var(--line-medium) !important;
}
[data-theme="dark"] .lx-opt.is-selected,
[data-theme="dark"] .lx-opt.selected {
background: var(--c-ember-soft) !important;
border-color: var(--c-ember) !important;
color: var(--c-ember-ink) !important;
}
/* ── DOT (badge dot) ── */
[data-theme="dark"] .lx-dot {
background: var(--c-ember) !important;
}
[data-theme="dark"] .lx-dot.is-success {
background: var(--c-green) !important;
}
[data-theme="dark"] .lx-dot.is-warn {
background: var(--c-amber) !important;
}
[data-theme="dark"] .lx-dot.is-danger {
background: var(--c-red) !important;
}
/* ── FOOT del modal (botones acciones) ── */
[data-theme="dark"] .lx-modal-foot,
[data-theme="dark"] .lx-modal-actions {
background: transparent !important;
border-top: 1px solid var(--line-soft) !important;
}
/* Botón ghost (Cancelar, Cerrar) */
[data-theme="dark"] .lx-btn-ghost,
[data-theme="dark"] .lx-modal .lx-btn-ghost,
[data-theme="dark"] .lx-modal .btn-ghost {
background: transparent !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .lx-btn-ghost:hover,
[data-theme="dark"] .lx-modal .lx-btn-ghost:hover,
[data-theme="dark"] .lx-modal .btn-ghost:hover {
background: var(--surface-3) !important;
color: var(--ink-primary) !important;
}
/* Botón primary (Lacca Sepia) */
[data-theme="dark"] .lx-btn-prime,
[data-theme="dark"] .lx-modal .lx-btn-prime,
[data-theme="dark"] .lx-modal .btn-prime,
[data-theme="dark"] .lx-modal .lxg-btn--prime {
background: var(--grad-cta) !important;
border: 1px solid var(--line-medium) !important;
color: var(--ink-primary) !important;
box-shadow: var(--cta-highlight), 0 1px 2px rgba(0, 0, 0, .3) !important;
}
[data-theme="dark"] .lx-btn-prime:hover,
[data-theme="dark"] .lx-modal .lx-btn-prime:hover,
[data-theme="dark"] .lx-modal .btn-prime:hover {
background: var(--grad-cta-hover) !important;
border-color: var(--line-strong) !important;
}
[data-theme="dark"] .lx-btn-prime:disabled,
[data-theme="dark"] .lx-modal .lx-btn-prime:disabled {
opacity: .4 !important;
}
/* Botón danger (Eliminar / Cancelar pedido) */
[data-theme="dark"] .lx-modal .lx-btn-danger,
[data-theme="dark"] .lx-modal .btn-danger,
[data-theme="dark"] .lx-modal .lxg-btn--danger {
background: var(--c-red-soft) !important;
border: 1px solid var(--c-red-line) !important;
color: var(--c-red-ink) !important;
}
[data-theme="dark"] .lx-modal .lx-btn-danger:hover {
background: var(--c-red-line) !important;
color: var(--c-red) !important;
}
/* ── MODAL DE CONFIRMACIÓN (lx-confirm) ── */
[data-theme="dark"] .lx-confirm,
[data-theme="dark"] .lx-confirm-modal {
background: var(--surface-2) !important;
border: 1px solid var(--line-medium) !important;
color: var(--ink-primary) !important;
box-shadow: var(--shadow-modal) !important;
}
[data-theme="dark"] .lx-confirm-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .lx-confirm-body {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .lx-confirm-body strong,
[data-theme="dark"] .lx-confirm-body b {
color: var(--ink-primary) !important;
}
/* ── MODAL DE EDITAR VENTA (venta context card) ── */
[data-theme="dark"] .lx-modal .ev-context,
[data-theme="dark"] .lx-modal .ev-context-card {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .lx-modal .ev-context-eyebrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .lx-modal .ev-context-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .lx-modal .ev-context-meta {
color: var(--ink-secondary) !important;
}
/* ── MODAL DE AJUSTE INVENTARIO (product card) ── */
[data-theme="dark"] .lx-modal .ajuste-card,
[data-theme="dark"] .lx-modal .m-ajuste-card {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .lx-modal .ajuste-card-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .lx-modal .ajuste-card-meta {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .lx-modal .ajuste-card-stock {
color: var(--ink-primary) !important;
}
/* ── MODAL CAJA CLIENTE (mcj-) ── */
[data-theme="dark"] #m-caja-cli,
[data-theme="dark"] .lx-modal#m-caja-cli {
background: var(--surface-2) !important;
}
[data-theme="dark"] #mcj-titulo,
[data-theme="dark"] #mcj-nombre-sub {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #mcj-nombre-sub {
color: var(--ink-secondary) !important;
}
/* ── Modal de transferencia (recepción) ── */
[data-theme="dark"] .lx-modal .trf-recep-modal {
background: transparent !important;
}
/* Divider/separators dentro del modal */
[data-theme="dark"] .lx-modal hr,
[data-theme="dark"] .lx-modal .lx-divider {
border-color: var(--line-soft) !important;
background: var(--line-soft) !important;
}
/* Tablas dentro de modales */
[data-theme="dark"] .lx-modal table {
background: transparent !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .lx-modal thead th {
background: var(--surface-3) !important;
color: var(--ink-tertiary) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .lx-modal tbody td {
color: var(--ink-primary) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .lx-modal tbody tr:hover {
background: var(--surface-3) !important;
}
/* Empty states dentro del modal */
[data-theme="dark"] .lx-modal .empty,
[data-theme="dark"] .lx-modal .empty-state-title,
[data-theme="dark"] .lx-modal .empty-state-sub {
color: var(--ink-tertiary) !important;
}
/* ── Modales: fix inputs sin type explícito (default = text) ── */
[data-theme="dark"] .lx-modal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[data-theme="dark"] .lx-modal .lx-fg input,
[data-theme="dark"] .lx-modal .lx-fg select,
[data-theme="dark"] .lx-modal .lx-fg textarea {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .lx-modal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])::placeholder,
[data-theme="dark"] .lx-modal .lx-fg input::placeholder,
[data-theme="dark"] .lx-modal .lx-fg textarea::placeholder {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .lx-modal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
[data-theme="dark"] .lx-modal .lx-fg input:focus,
[data-theme="dark"] .lx-modal .lx-fg select:focus,
[data-theme="dark"] .lx-modal .lx-fg textarea:focus {
border-color: var(--c-ember) !important;
box-shadow: 0 0 0 3px var(--c-ember-soft) !important;
outline: none !important;
}
/* ═══════════════════════════════════════════════════════════════
v7.95.10 · DARK MODE — Modales LXG (lxg-modal-*)
El sistema usa LXG modal architecture en muchos lugares
(openConfirmModal, modales de confirmación, dialogs).
═══════════════════════════════════════════════════════════════ */
/* ── OVERLAY ── */
[data-theme="dark"] .lxg-modal-overlay {
background: rgba(10, 10, 11, .72) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
/* ── MODAL SHELL ── */
[data-theme="dark"] .lxg-modal,
[data-theme="dark"] .lxg-modal--sm,
[data-theme="dark"] .lxg-modal--md,
[data-theme="dark"] .lxg-modal--lg {
background: var(--surface-2) !important;
border: 1px solid var(--line-medium) !important;
color: var(--ink-primary) !important;
box-shadow: var(--shadow-modal) !important;
}
/* ── HEAD ── */
[data-theme="dark"] .lxg-modal-head {
background: transparent !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .lxg-modal-head-info {
background: transparent !important;
}
[data-theme="dark"] .lxg-modal-eyebrow {
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] .lxg-modal-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .lxg-modal-sub {
color: var(--ink-secondary) !important;
}
/* Close button */
[data-theme="dark"] .lxg-modal-close {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .lxg-modal-close:hover {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
/* ── BODY ── */
[data-theme="dark"] .lxg-modal-body {
background: transparent !important;
color: var(--ink-primary) !important;
}
/* Confirm body (texto descriptivo) */
[data-theme="dark"] .lxg-confirm-body,
[data-theme="dark"] .lxg-modal-body p,
[data-theme="dark"] .lxg-modal-body .lxg-modal-text {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .lxg-confirm-body strong,
[data-theme="dark"] .lxg-confirm-body b,
[data-theme="dark"] .lxg-modal-body strong,
[data-theme="dark"] .lxg-modal-body b {
color: var(--ink-primary) !important;
}
/* Form fields dentro de LXG modal */
[data-theme="dark"] .lxg-modal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[data-theme="dark"] .lxg-modal select,
[data-theme="dark"] .lxg-modal textarea {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .lxg-modal input::placeholder,
[data-theme="dark"] .lxg-modal textarea::placeholder {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .lxg-modal input:focus,
[data-theme="dark"] .lxg-modal select:focus,
[data-theme="dark"] .lxg-modal textarea:focus {
border-color: var(--c-ember) !important;
box-shadow: 0 0 0 3px var(--c-ember-soft) !important;
outline: none !important;
}
[data-theme="dark"] .lxg-modal label,
[data-theme="dark"] .lxg-modal .lxg-label {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .lxg-modal .lxg-hint {
color: var(--ink-tertiary) !important;
}
/* ── FOOT ── */
[data-theme="dark"] .lxg-modal-foot {
background: transparent !important;
border-top: 1px solid var(--line-soft) !important;
}
/* ── BOTONES LXG ── */
[data-theme="dark"] .lxg-modal .lxg-btn,
[data-theme="dark"] .lxg-modal .lxg-btn--ghost,
[data-theme="dark"] .lxg-modal-foot .lxg-btn {
background: transparent !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .lxg-modal .lxg-btn:hover,
[data-theme="dark"] .lxg-modal .lxg-btn--ghost:hover {
background: var(--surface-3) !important;
color: var(--ink-primary) !important;
}
/* Primary (Lacca Sepia) */
[data-theme="dark"] .lxg-modal .lxg-btn--prime,
[data-theme="dark"] .lxg-modal .lxg-btn--primary {
background: var(--grad-cta) !important;
border: 1px solid var(--line-medium) !important;
color: var(--ink-primary) !important;
box-shadow: var(--cta-highlight), 0 1px 2px rgba(0, 0, 0, .3) !important;
}
[data-theme="dark"] .lxg-modal .lxg-btn--prime:hover {
background: var(--grad-cta-hover) !important;
border-color: var(--line-strong) !important;
}
/* Danger (Eliminar) — ember soft → ember on hover */
[data-theme="dark"] .lxg-modal .lxg-btn--danger {
background: var(--c-ember) !important;
border: 1px solid var(--c-ember) !important;
color: #FFF !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3) !important;
}
[data-theme="dark"] .lxg-modal .lxg-btn--danger:hover {
background: var(--c-ember-hover) !important;
border-color: var(--c-ember-hover) !important;
}
/* Botones inline (no en foot) */
[data-theme="dark"] .lxg-modal-body .lxg-btn {
background: var(--surface-3) !important;
border-color: var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .lxg-modal-body .lxg-btn:hover {
background: var(--surface-4) !important;
}
/* Sections / dividers dentro del LXG modal */
[data-theme="dark"] .lxg-modal hr,
[data-theme="dark"] .lxg-modal .lxg-divider {
border-color: var(--line-soft) !important;
background: var(--line-soft) !important;
}
/* Tables dentro de LXG modal */
[data-theme="dark"] .lxg-modal .lxg-table {
background: transparent !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .lxg-modal .lxg-table thead th {
background: var(--surface-3) !important;
color: var(--ink-tertiary) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .lxg-modal .lxg-table tbody td {
color: var(--ink-primary) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
/* Pills / chips dentro de LXG modal */
[data-theme="dark"] .lxg-modal .lxg-pill {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
/* Cards/sections internas */
[data-theme="dark"] .lxg-modal .lxg-card,
[data-theme="dark"] .lxg-modal .lxg-section {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
}
/* ═══════════════════════════════════════════════════════════════
v7.95.10 · DARK MODE — Drawer de MOVIMIENTOS (mov-inspector)
Inspector lateral con detalle de venta (ticket, items, totales,
acciones). Clases: mvd-* (mov detail).
═══════════════════════════════════════════════════════════════ */
/* ── SHELL del drawer ── */
[data-theme="dark"] #mov-inspector,
[data-theme="dark"] .mov-inspector {
background: var(--surface-2) !important;
border-left: 1px solid var(--line-medium) !important;
color: var(--ink-primary) !important;
box-shadow: -16px 0 48px rgba(0, 0, 0, .4) !important;
}
/* Overlay backdrop */
[data-theme="dark"] .mv-ins-overlay {
background: rgba(10, 10, 11, .50) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
/* ── HEAD top: ESC + Status pill ── */
[data-theme="dark"] #mov-inspector .mvd-hd,
[data-theme="dark"] #mov-inspector .mvd-hd-top {
background: transparent !important;
border-bottom: 1px solid var(--line-soft) !important;
}
/* ESC close button */
[data-theme="dark"] #mov-inspector .mvd-esc {
background: transparent !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #mov-inspector .mvd-esc:hover {
background: var(--surface-3) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #mov-inspector .mvd-esc-txt {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #mov-inspector .mvd-esc-key {
background: var(--surface-3) !important;
color: var(--ink-tertiary) !important;
border: 1px solid var(--line-soft) !important;
}
/* Status pill (Completada/Pendiente/etc.) */
[data-theme="dark"] #mov-inspector .mvd-status.mvd-st-ok {
background: var(--c-green-soft) !important;
color: var(--c-green-ink) !important;
border: 1px solid var(--c-green-line) !important;
}
[data-theme="dark"] #mov-inspector .mvd-status.mvd-st-warn {
background: var(--c-amber-soft) !important;
color: var(--c-amber-ink) !important;
border: 1px solid var(--c-amber-line) !important;
}
[data-theme="dark"] #mov-inspector .mvd-status.mvd-st-danger {
background: var(--c-red-soft) !important;
color: var(--c-red-ink) !important;
border: 1px solid var(--c-red-line) !important;
}
[data-theme="dark"] #mov-inspector .mvd-st-dot {
background: currentColor !important;
}
/* ── TICKET # + DATE ── */
[data-theme="dark"] #mov-inspector .mvd-eyebrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #mov-inspector .mvd-num-wrap {
background: transparent !important;
}
[data-theme="dark"] #mov-inspector .mvd-num {
color: var(--ink-primary) !important;
background: transparent !important;
}
[data-theme="dark"] #mov-inspector .mvd-copy {
background: var(--surface-3) !important;
color: var(--ink-secondary) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #mov-inspector .mvd-copy:hover {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #mov-inspector .mvd-meta {
color: var(--ink-secondary) !important;
}
/* ── SECTION (RESUMEN / DETALLE / etc.) ── */
[data-theme="dark"] #mov-inspector .mvd-sec {
background: transparent !important;
border-top: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #mov-inspector .mvd-sec-title {
color: var(--ink-tertiary) !important;
}
/* ── ROWS (Local / Empleado / Medio pago / etc.) ── */
[data-theme="dark"] #mov-inspector .mvd-rows {
background: transparent !important;
}
[data-theme="dark"] #mov-inspector .mvd-row {
background: transparent !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #mov-inspector .mvd-row-l {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #mov-inspector .mvd-row-v,
[data-theme="dark"] #mov-inspector .mvd-row-v.mvd-row-v-mono {
color: var(--ink-primary) !important;
}
/* Dot indicador (color del medio de pago) */
[data-theme="dark"] #mov-inspector .mvd-dot {
background: currentColor !important;
}
[data-theme="dark"] #mov-inspector .mvd-dot-card {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
}
/* ── ITEMS del ticket ── */
[data-theme="dark"] #mov-inspector .mvd-items {
background: transparent !important;
}
[data-theme="dark"] #mov-inspector .mvd-item {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
border-radius: 8px !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #mov-inspector .mvd-item:hover {
background: var(--surface-4) !important;
border-color: var(--line-medium) !important;
}
[data-theme="dark"] #mov-inspector .mvd-item-info {
background: transparent !important;
}
[data-theme="dark"] #mov-inspector .mvd-item-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #mov-inspector .mvd-item-meta {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #mov-inspector .mvd-item-lote {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
border-radius: 6px !important;
}
[data-theme="dark"] #mov-inspector .mvd-item-right {
background: transparent !important;
}
[data-theme="dark"] #mov-inspector .mvd-item-price {
color: var(--ink-primary) !important;
background: transparent !important;
}
/* Item delete btn (hover-only) */
[data-theme="dark"] #mov-inspector .mvd-item-del {
background: transparent !important;
color: var(--ink-tertiary) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #mov-inspector .mvd-item-del:hover {
background: var(--c-red-soft) !important;
border-color: var(--c-red-line) !important;
color: var(--c-red-ink) !important;
}
/* ── TOTAL block ── */
[data-theme="dark"] #mov-inspector .mvd-total-block {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
border-radius: 10px !important;
}
[data-theme="dark"] #mov-inspector .mvd-total-label {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #mov-inspector .mvd-total-val {
color: var(--ink-primary) !important;
background: transparent !important;
}
/* ── FOOT con botones (Modificar / Ver recibo / Eliminar) ── */
[data-theme="dark"] #mov-inspector .mvd-foot,
[data-theme="dark"] #mov-inspector .mvd-actions {
background: var(--surface-2) !important;
border-top: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #mov-inspector .mvd-act,
[data-theme="dark"] #mov-inspector .mvd-act-edit,
[data-theme="dark"] #mov-inspector .mvd-act-receipt,
[data-theme="dark"] #mov-inspector .mvd-act-del {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
}
[data-theme="dark"] #mov-inspector .mvd-act:hover {
background: var(--surface-4) !important;
border-color: var(--line-medium) !important;
}
/* Botón Eliminar — con tinte red al hover */
[data-theme="dark"] #mov-inspector .mvd-act-del:hover {
background: var(--c-red-soft) !important;
border-color: var(--c-red-line) !important;
color: var(--c-red-ink) !important;
}
/* Botón Ver recibo — con tinte ember al hover */
[data-theme="dark"] #mov-inspector .mvd-act-receipt:hover {
background: var(--c-ember-soft) !important;
border-color: var(--c-ember-line) !important;
color: var(--c-ember-ink) !important;
}
/* Document body (.mvd-doc, .mvd-hd) override del v7.95.4 — más específico ahora */
[data-theme="dark"] #mov-inspector .mvd-hd,
[data-theme="dark"] #mov-inspector .mvd-doc {
background: transparent !important;
color: var(--ink-primary) !important;
}
/* ═══════════════════════════════════════════════════════════════
v7.95.11 · DARK MODE — Refactor drawer Movimientos (cleanup)
• Quita boxes de items y total (UI más limpia)
• Reduce bordes/líneas (menos ruido visual)
• Sin contenedores innecesarios
═══════════════════════════════════════════════════════════════ */
/* ── ITEMS: SIN box, SIN border, SIN background ── */
[data-theme="dark"] #mov-inspector .mvd-item {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 12px 0 !important;
}
[data-theme="dark"] #mov-inspector .mvd-item:hover {
background: transparent !important;
border: none !important;
}
[data-theme="dark"] #mov-inspector .mvd-item + .mvd-item {
border-top: 1px solid var(--line-soft) !important;
}
/* Lote chip dentro del item — sin border, más sutil */
[data-theme="dark"] #mov-inspector .mvd-item-lote {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
color: var(--ink-tertiary) !important;
padding: 0 !important;
font-size: 11px !important;
}
/* ── TOTAL: SIN box ── */
[data-theme="dark"] #mov-inspector .mvd-total-block {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 8px 0 !important;
}
/* ── ROWS (RESUMEN): SIN border-bottom — usar solo spacing ── */
[data-theme="dark"] #mov-inspector .mvd-row {
border-bottom: none !important;
padding: 8px 0 !important;
}
/* ── SECTIONS: SIN border-top — usar solo margen + section title ── */
[data-theme="dark"] #mov-inspector .mvd-sec {
border-top: none !important;
border-bottom: none !important;
margin-top: 24px !important;
padding-top: 0 !important;
}
/* Section dots más sutiles (los ● al inicio de RESUMEN/ITEMS/COBRO) */
[data-theme="dark"] #mov-inspector .mvd-sec-title::before,
[data-theme="dark"] #mov-inspector .mvd-sec-dot {
background: var(--ink-tertiary) !important;
opacity: 0.4 !important;
}
/* ── HEAD: limpiar bordes redundantes ── */
[data-theme="dark"] #mov-inspector .mvd-hd {
border-bottom: none !important;
padding-bottom: 0 !important;
}
/* ── FOOT: separador más sutil ── */
[data-theme="dark"] #mov-inspector .mvd-foot,
[data-theme="dark"] #mov-inspector .mvd-actions {
background: transparent !important;
border-top: 1px solid var(--line-soft) !important;
margin-top: 16px !important;
}
/* Botones del foot — ghost limpio (sin shadow) */
[data-theme="dark"] #mov-inspector .mvd-act,
[data-theme="dark"] #mov-inspector .mvd-act-edit,
[data-theme="dark"] #mov-inspector .mvd-act-receipt,
[data-theme="dark"] #mov-inspector .mvd-act-del {
background: transparent !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
box-shadow: none !important;
}
[data-theme="dark"] #mov-inspector .mvd-act:hover {
background: var(--surface-3) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #mov-inspector .mvd-act-receipt:hover {
background: var(--c-ember-soft) !important;
border-color: var(--c-ember-line) !important;
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] #mov-inspector .mvd-act-del:hover {
background: var(--c-red-soft) !important;
border-color: var(--c-red-line) !important;
color: var(--c-red-ink) !important;
}
/* ── TICKET number wrap: aumentar visibilidad ── */
[data-theme="dark"] #mov-inspector .mvd-num {
color: var(--ink-primary) !important;
font-weight: 600 !important;
}
/* ── TOTAL VAL: aumentar visibilidad ── */
[data-theme="dark"] #mov-inspector .mvd-total-val {
color: var(--ink-primary) !important;
font-weight: 700 !important;
}
[data-theme="dark"] #mov-inspector .mvd-total-label {
color: var(--ink-tertiary) !important;
text-transform: uppercase !important;
letter-spacing: .14em !important;
font-size: 10.5px !important;
}
/* ── Fix v7.95.11: numero ticket y total invisibles por background-clip:text legacy ── */
[data-theme="dark"] #mov-inspector .mvd-num,
[data-theme="dark"] #mov-inspector .mvd-total-val {
-webkit-text-fill-color: var(--ink-primary) !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
background: transparent !important;
background-image: none !important;
color: var(--ink-primary) !important;
}
/* ── Drawer Movimientos v7.95.12: eliminar bordes/líneas residuales ── */
/* hd-top: línea inferior debajo del status pill + Cerrar */
[data-theme="dark"] #mov-inspector .mvd-hd-top {
border-bottom: none !important;
border-top: none !important;
}
/* doc (contenedor principal del drawer): sin bordes */
[data-theme="dark"] #mov-inspector .mvd-doc {
border-top: none !important;
border-bottom: none !important;
}
/* hd: sin border-top */
[data-theme="dark"] #mov-inspector .mvd-hd {
border-top: none !important;
}
/* foot: sin border-top (la línea encima del TOTAL) */
[data-theme="dark"] #mov-inspector .mvd-foot {
border-top: none !important;
border-bottom: none !important;
}
/* Botones de acción: sin borders en hover top/bottom invisibles */
[data-theme="dark"] #mov-inspector .mvd-act {
border-top: 1px solid var(--line-soft) !important;
border-bottom: 1px solid var(--line-soft) !important;
border-left: 1px solid var(--line-soft) !important;
border-right: 1px solid var(--line-soft) !important;
}
/* Mantener solo el separador del actions bar (los botones) — ese SÍ es útil */
[data-theme="dark"] #mov-inspector .mvd-actions {
border-top: 1px solid var(--line-soft) !important;
}
/* ═══════════════════════════════════════════════════════════════
v7.95.13 · DARK MODE — Página CARGA MASIVA
Cart-style con 4 stages: prep, add (search productos), cart, hist.
Clases: cm2-*
═══════════════════════════════════════════════════════════════ */
/* ── PAGE HEAD ── */
[data-theme="dark"] #page-carga .cm2-head,
[data-theme="dark"] #page-carga .cm2-head-context,
[data-theme="dark"] #page-carga .cm2-head-context-wrap,
[data-theme="dark"] #page-carga .cm2-head-actions {
background: transparent !important;
}
[data-theme="dark"] #page-carga .cm2-head-icon {
background: var(--c-ember-soft) !important;
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] #page-carga .cm2-head-tag {
background: var(--c-ember-soft) !important;
color: var(--c-ember-ink) !important;
border: 1px solid var(--c-ember-line) !important;
}
/* "Estás cargando productos a [pill]" */
[data-theme="dark"] #page-carga .cm2-head h1,
[data-theme="dark"] #page-carga .cm2-head .cm2-head-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-carga .cm2-head p,
[data-theme="dark"] #page-carga .cm2-head .cm2-head-sub {
color: var(--ink-secondary) !important;
}
/* ── PREP STRIP (Local — día — vencimiento default + Editar) ── */
[data-theme="dark"] #page-carga .cm2-prep-strip {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-carga .cm2-prep-strip-content {
background: transparent !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-carga .cm2-prep-strip-local {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-carga .cm2-prep-strip-meta {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-carga .cm2-prep-strip-sep {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-carga .cm2-prep-strip-edit {
background: transparent !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-carga .cm2-prep-strip-edit:hover {
background: var(--surface-3) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-carga .cm2-check {
background: var(--c-green) !important;
color: #FFF !important;
}
/* ── STAGES (cards principales: prep, add, cart, hist) ── */
[data-theme="dark"] #page-carga .cm2-stage,
[data-theme="dark"] #page-carga .cm2-stage--prep,
[data-theme="dark"] #page-carga .cm2-stage--add,
[data-theme="dark"] #page-carga .cm2-stage--cart,
[data-theme="dark"] #page-carga .cm2-stage--hist {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
}
/* Stage head (con stage number + título + sub) */
[data-theme="dark"] #page-carga .cm2-stage-head,
[data-theme="dark"] #page-carga .cm2-stage-head-info {
background: transparent !important;
}
[data-theme="dark"] #page-carga .cm2-stage-num {
background: var(--surface-3) !important;
color: var(--ink-secondary) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-carga .cm2-stage-num--hist {
background: var(--surface-3) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-carga .cm2-stage-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-carga .cm2-stage-sub {
color: var(--ink-secondary) !important;
}
/* Collapse toggle (chevron) */
[data-theme="dark"] #page-carga .cm2-collapse-toggle {
background: transparent !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-carga .cm2-collapse-toggle:hover {
background: var(--surface-3) !important;
color: var(--ink-primary) !important;
}
/* ── PREP FORM (cuando se edita el prep) ── */
[data-theme="dark"] #page-carga .cm2-prep-form,
[data-theme="dark"] #page-carga .cm2-prep-grid {
background: transparent !important;
}
[data-theme="dark"] #page-carga .cm2-prep-label {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-carga .cm2-prep-field input,
[data-theme="dark"] #page-carga .cm2-prep-field select,
[data-theme="dark"] #page-carga .cm2-prep-field {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-carga .cm2-prep-field input::placeholder {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-carga .cm2-prep-field input:focus,
[data-theme="dark"] #page-carga .cm2-prep-field select:focus {
border-color: var(--c-ember) !important;
box-shadow: 0 0 0 3px var(--c-ember-soft) !important;
outline: none !important;
}
/* ── SEARCH bar (Add stage) ── */
[data-theme="dark"] #page-carga .cm2-search-wrap {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-carga .cm2-search-wrap input {
background: transparent !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-carga .cm2-search-wrap input::placeholder {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-carga .cm2-search-clear {
background: transparent !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-carga .cm2-search-clear:hover {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
/* ── CHIPS (Últimos cargados / Stock en 0 / Top venta) ── */
[data-theme="dark"] #page-carga .cm2-chips {
background: transparent !important;
}
[data-theme="dark"] #page-carga .cm2-chip {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-carga .cm2-chip:hover {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
border-color: var(--line-medium) !important;
}
[data-theme="dark"] #page-carga .cm2-chip.is-active {
background: var(--c-ember-soft) !important;
border-color: var(--c-ember-line) !important;
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] #page-carga .cm2-chip--danger {
background: var(--c-red-soft) !important;
border-color: var(--c-red-line) !important;
color: var(--c-red-ink) !important;
}
[data-theme="dark"] #page-carga .cm2-chip-count {
background: var(--surface-2) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-carga .cm2-chip.is-active .cm2-chip-count {
background: var(--c-ember) !important;
color: #FFF !important;
}
[data-theme="dark"] #page-carga .cm2-chip-label {
color: inherit !important;
}
/* ── SEARCH RESULTS (lista de productos) ── */
[data-theme="dark"] #page-carga .cm2-search-results {
background: transparent !important;
}
[data-theme="dark"] #page-carga .cm2-search-item {
background: var(--surface-1) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
box-shadow: none !important;
}
[data-theme="dark"] #page-carga .cm2-search-item:hover {
background: var(--surface-3) !important;
border-color: var(--line-medium) !important;
}
[data-theme="dark"] #page-carga .cm2-search-item-info {
background: transparent !important;
}
[data-theme="dark"] #page-carga .cm2-search-item-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-carga .cm2-search-item-meta {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-carga .cm2-search-item-add {
background: var(--c-ember-soft) !important;
border: 1px solid var(--c-ember-line) !important;
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] #page-carga .cm2-search-item-add:hover {
background: var(--c-ember) !important;
color: #FFF !important;
}
/* Suggest header */
[data-theme="dark"] #page-carga .cm2-suggest-head {
background: transparent !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-carga .cm2-suggest-close {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-carga .cm2-suggest-close:hover {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
/* "VER TODOS" sección */
[data-theme="dark"] #page-carga .cm2-vertodos,
[data-theme="dark"] #page-carga .cm2-vertodos-info,
[data-theme="dark"] #page-carga .cm2-vertodos-tools {
background: transparent !important;
}
[data-theme="dark"] #page-carga .cm2-vertodos-note {
color: var(--ink-tertiary) !important;
}
/* ── CARRITO ── */
[data-theme="dark"] #page-carga .cm2-cart-head-info {
background: transparent !important;
}
[data-theme="dark"] #page-carga .cm2-cart-head-sticky,
[data-theme="dark"] #page-carga .cm2-stage-head.cm2-cart-head-sticky {
background: var(--surface-2) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-carga .cm2-cart-list {
background: transparent !important;
}
/* Cart empty state */
[data-theme="dark"] #page-carga .cm2-cart-empty-smart {
background: transparent !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-carga .cm2-cart-empty-smart-head {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-carga .cm2-cart-empty-smart-sub {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-carga .cm2-cart-empty-smart-list {
background: transparent !important;
}
/* ── HISTORIAL stage ── */
[data-theme="dark"] #page-carga .cm2-hist-head-info,
[data-theme="dark"] #page-carga .cm2-hist-head-clickable {
background: transparent !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-carga .cm2-hist-head-clickable:hover {
background: var(--surface-3) !important;
}
[data-theme="dark"] #page-carga .cm2-hist-filters {
background: transparent !important;
}
[data-theme="dark"] #page-carga .cm2-hist-filter-search {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-carga .cm2-hist-filter-search::placeholder {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-carga .cm2-hist-select {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-carga .cm2-hist-body,
[data-theme="dark"] #page-carga .cm2-hist-list {
background: transparent !important;
}
[data-theme="dark"] #page-carga .cm2-hist-row {
background: var(--surface-1) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-carga .cm2-hist-row:hover {
background: var(--surface-3) !important;
border-color: var(--line-medium) !important;
}
[data-theme="dark"] #page-carga .cm2-hist-row-info,
[data-theme="dark"] #page-carga .cm2-hist-row-summary {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-carga .cm2-hist-row-meta,
[data-theme="dark"] #page-carga .cm2-hist-row-emp {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-carga .cm2-hist-row-repeat {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-carga .cm2-hist-row-repeat:hover {
background: var(--c-ember-soft) !important;
border-color: var(--c-ember-line) !important;
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] #page-carga .cm2-hist-units {
color: var(--ink-secondary) !important;
}
/* ── FOOT (Confirmar carga sticky) ── */
[data-theme="dark"] #page-carga .cm2-foot {
background: var(--surface-2) !important;
border-top: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-carga .cm2-foot-summary {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-carga .cm2-foot-total {
color: var(--ink-primary) !important;
}
/* ── BANNER BORRADOR (info blue) ── */
[data-theme="dark"] #page-carga .cm2-draft-banner {
background: var(--c-info-soft) !important;
border: 1px solid var(--c-info-line) !important;
color: var(--c-info-ink) !important;
}
/* ── RESUMEN legacy ── */
[data-theme="dark"] #page-carga .cm2-resumen-legacy {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
/* ── GRID/columns layout (transparent) ── */
[data-theme="dark"] #page-carga .cm2-grid,
[data-theme="dark"] #page-carga .cm2-col-left,
[data-theme="dark"] #page-carga .cm2-col-right {
background: transparent !important;
}
/* ── Carga Masiva v7.95.14: fix prep-field radius + cart items dark ── */
/* PREP FIELD: agregar border-radius (eran ángulos rectos) */
[data-theme="dark"] #page-carga .cm2-prep-field {
border-radius: 9px !important;
overflow: hidden;
}
[data-theme="dark"] #page-carga .cm2-prep-field input,
[data-theme="dark"] #page-carga .cm2-prep-field select {
border-radius: 9px !important;
}
/* SEARCH WRAP: redondeado */
[data-theme="dark"] #page-carga .cm2-search-wrap {
border-radius: 9px !important;
overflow: hidden;
}
/* CART ITEM: caja contenedora visible (estaba casi transparent) */
[data-theme="dark"] #page-carga .cm2-item {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2) !important;
}
[data-theme="dark"] #page-carga .cm2-item:hover {
background: var(--surface-4) !important;
border-color: var(--line-medium) !important;
}
/* CART ITEM head/sections — transparentes (el wrapper ya tiene el bg) */
[data-theme="dark"] #page-carga .cm2-item-head,
[data-theme="dark"] #page-carga .cm2-item-id,
[data-theme="dark"] #page-carga .cm2-item-right,
[data-theme="dark"] #page-carga .cm2-item-primary,
[data-theme="dark"] #page-carga .cm2-item-secondary,
[data-theme="dark"] #page-carga .cm2-field,
[data-theme="dark"] #page-carga .cm2-field-qty-wrap {
background: transparent !important;
color: var(--ink-primary) !important;
}
/* CART ITEM inputs/selects: dark surface */
[data-theme="dark"] #page-carga .cm2-item input,
[data-theme="dark"] #page-carga .cm2-item select,
[data-theme="dark"] #page-carga .cm2-item textarea {
background: var(--surface-1) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
border-radius: 8px !important;
}
[data-theme="dark"] #page-carga .cm2-item input::placeholder,
[data-theme="dark"] #page-carga .cm2-item textarea::placeholder {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-carga .cm2-item input:hover,
[data-theme="dark"] #page-carga .cm2-item select:hover {
background: var(--surface-2) !important;
border-color: var(--line-medium) !important;
}
[data-theme="dark"] #page-carga .cm2-item input:focus,
[data-theme="dark"] #page-carga .cm2-item select:focus,
[data-theme="dark"] #page-carga .cm2-item textarea:focus {
border-color: var(--c-ember) !important;
box-shadow: 0 0 0 3px var(--c-ember-soft) !important;
outline: none !important;
}
/* Vence pill dentro del item (mantiene semántica amber/red/green) */
[data-theme="dark"] #page-carga .cm2-item .cm2-venc-pill {
background: var(--c-amber-soft) !important;
color: var(--c-amber-ink) !important;
border: 1px solid var(--c-amber-line) !important;
}
/* Status badge del item (FALTA CANTIDAD / OK / etc.) */
[data-theme="dark"] #page-carga .cm2-item-status {
background: var(--surface-2) !important;
color: var(--ink-secondary) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-carga .cm2-item-status--neutral {
background: var(--surface-2) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-carga .cm2-item-status--warn {
background: var(--c-amber-soft) !important;
color: var(--c-amber-ink) !important;
border-color: var(--c-amber-line) !important;
}
[data-theme="dark"] #page-carga .cm2-item-status--danger {
background: var(--c-red-soft) !important;
color: var(--c-red-ink) !important;
border-color: var(--c-red-line) !important;
}
[data-theme="dark"] #page-carga .cm2-item-status--ok {
background: var(--c-green-soft) !important;
color: var(--c-green-ink) !important;
border-color: var(--c-green-line) !important;
}
/* Item expand button (chevron para expandir) */
[data-theme="dark"] #page-carga .cm2-item-expand-btn {
background: transparent !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-carga .cm2-item-expand-btn:hover {
background: var(--surface-2) !important;
color: var(--ink-primary) !important;
}
/* Item ID (Cortes vacunos · PLU 1032) */
[data-theme="dark"] #page-carga .cm2-item-id {
color: var(--ink-secondary) !important;
}
/* Cerrar button del item (X arriba derecha) */
[data-theme="dark"] #page-carga .cm2-item .lxg-icon-btn,
[data-theme="dark"] #page-carga .cm2-item .lxg-icon-btn--danger {
background: transparent !important;
color: var(--ink-tertiary) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-carga .cm2-item .lxg-icon-btn--danger:hover {
background: var(--c-red-soft) !important;
color: var(--c-red-ink) !important;
border-color: var(--c-red-line) !important;
}
/* Stock info en el item (stock 8 → 6 unidades) */
[data-theme="dark"] #page-carga .cm2-item-stock-info {
color: var(--ink-tertiary) !important;
}
/* Label "unidades" al lado del input cantidad */
[data-theme="dark"] #page-carga .cm2-field-qty-wrap span,
[data-theme="dark"] #page-carga .cm2-field-unit {
color: var(--ink-secondary) !important;
}
/* ═════════════════════════════════════════════════════════════════
v7.95.14 · DARK MODE — Página COSTOS E INGRESOS (todas las subpáginas)
Cubre Registro · Evolución · Rentabilidad · Por sucursal.
Modal Registrar gasto usa .lx-modal-* — cubierto por v7.95.9.
═════════════════════════════════════════════════════════════════ */
/* ── Page shell ── */
[data-theme="dark"] #page-costos {
background: transparent !important;
}
/* ── Header ── */
[data-theme="dark"] #page-costos .co-eyebrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-costos .co-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-costos .co-subtitle {
color: var(--ink-secondary) !important;
}
/* CTA "Registrar gasto" — Lacca Sepia */
[data-theme="dark"] #page-costos .co-btn-primary {
background: var(--grad-cta) !important;
color: var(--ink-primary) !important;
box-shadow: var(--cta-highlight), var(--cta-shadow) !important;
}
[data-theme="dark"] #page-costos .co-btn-primary:hover {
background: var(--grad-cta-hover) !important;
}
/* ── Topbar: sub-nav + period/local pills (segmented controls) ── */
[data-theme="dark"] #page-costos .co-subnav,
[data-theme="dark"] #page-costos .co-period-bar {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-costos .co-subnav-btn,
[data-theme="dark"] #page-costos .co-period-btn {
color: var(--ink-tertiary) !important;
background: transparent !important;
}
[data-theme="dark"] #page-costos .co-subnav-btn:not(.active):hover,
[data-theme="dark"] #page-costos .co-period-btn:not(.active):hover {
color: var(--ink-primary) !important;
background: var(--surface-4) !important;
}
[data-theme="dark"] #page-costos .co-subnav-btn.active,
[data-theme="dark"] #page-costos .co-period-btn.active {
background: var(--surface-1) !important;
color: var(--ink-primary) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, .35) !important;
}
/* ── Cards genéricas ── */
[data-theme="dark"] #page-costos .co-card {
background: var(--surface-1) !important;
border: 1px solid var(--line-soft) !important;
box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] #page-costos .co-card:hover {
box-shadow: var(--shadow-card), 0 4px 16px rgba(0, 0, 0, .25) !important;
}
[data-theme="dark"] #page-costos .co-card-eyebrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-costos .co-card-title {
color: var(--ink-primary) !important;
}
/* ── Chart legend ── */
[data-theme="dark"] #page-costos .co-leg-item {
color: var(--ink-secondary) !important;
}
/* ── KPIs row (3 cards) ── */
[data-theme="dark"] #page-costos .co-kpi3 {
background: var(--surface-1) !important;
box-shadow: var(--shadow-card) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-costos .co-kpi3-label {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-costos .co-kpi3-val {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-costos .co-kpi3-red {
color: var(--c-red-ink) !important;
}
[data-theme="dark"] #page-costos .co-kpi3-sub {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-costos .co-delta-green {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-costos .co-delta-red {
color: var(--c-red-ink) !important;
}
/* ── Alerta de tendencia ── */
[data-theme="dark"] #page-costos .co-alert-trend {
background: var(--surface-2) !important;
box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] #page-costos .co-alert-trend.co-alert-warning {
background: linear-gradient(135deg, var(--c-amber-soft) 0%, var(--surface-2) 70%) !important;
border-left: 4px solid var(--c-amber) !important;
}
[data-theme="dark"] #page-costos .co-alert-trend.co-alert-danger {
background: linear-gradient(135deg, var(--c-red-soft) 0%, var(--surface-2) 70%) !important;
border-left: 4px solid var(--c-red) !important;
}
[data-theme="dark"] #page-costos .co-alert-trend.co-alert-success {
background: linear-gradient(135deg, var(--c-green-soft) 0%, var(--surface-2) 70%) !important;
border-left: 4px solid var(--c-green) !important;
}
[data-theme="dark"] #page-costos .co-alert-trend-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-costos .co-alert-trend-desc {
color: var(--ink-secondary) !important;
}
/* ── Top categorías ── */
[data-theme="dark"] #page-costos .co-top-cat-rank {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-costos .co-top-cat-pct {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-costos .co-top-cat-monto {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-costos .co-top-cat-bar {
background: var(--surface-3) !important;
}
[data-theme="dark"] #page-costos .co-top-cat-bar-fill {
background: linear-gradient(90deg, #0A84FF, #FF6B35) !important;
}
/* ── Breakdown por categoría ── */
[data-theme="dark"] #page-costos .co-bd-header {
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-costos .co-bd-th {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-costos .co-bd-row {
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-costos .co-bd-monto {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-costos .co-bd-pct {
color: var(--ink-secondary) !important;
}
/* ── Punto de equilibrio ── */
[data-theme="dark"] #page-costos .co-equil-val {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-costos .co-equil-sub {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-costos .co-equil-bar-wrap {
background: var(--surface-3) !important;
}
[data-theme="dark"] #page-costos .co-equil-legend {
color: var(--ink-tertiary) !important;
}
/* ── Proyección utilidad ── */
[data-theme="dark"] #page-costos .co-proy-util-val {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-costos .co-proy-util-label {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-costos .co-proy-util-detail {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-costos .co-proy-util-detail strong {
color: var(--ink-primary) !important;
}
/* ── Fijos vs Variables ── */
[data-theme="dark"] #page-costos .co-fv-label {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-costos .co-fv-val {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-costos .co-fv-pct {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-costos .co-fv-divider {
background: var(--line-soft) !important;
}
[data-theme="dark"] #page-costos .co-fv-bar-wrap {
background: var(--surface-3) !important;
}
[data-theme="dark"] #page-costos .co-fv-bar-fijos {
background: #0A84FF !important;
}
[data-theme="dark"] #page-costos .co-fv-bar-vars {
background: #FF6B35 !important;
}
[data-theme="dark"] #page-costos .co-fv-items-title {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-costos .co-fv-item {
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-costos .co-fv-item-val {
color: var(--ink-primary) !important;
}
/* ── Comparativa por sucursal (cmp items en rentabilidad) ── */
[data-theme="dark"] #page-costos .co-suc-cmp-item {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-costos .co-suc-cmp-name,
[data-theme="dark"] #page-costos .co-suc-cmp-val {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-costos .co-suc-cmp-lbl {
color: var(--ink-tertiary) !important;
}
/* ── Gauge (rentabilidad) ── */
[data-theme="dark"] #page-costos .co-gauge-pct {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-costos .co-gauge-unit {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-costos .co-gauge-status {
color: var(--ink-secondary) !important;
}
/* ── Cat donut legend ── */
[data-theme="dark"] #page-costos .co-cat-legend {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-costos .costo-cat-leg-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-costos .costo-cat-leg-pct,
[data-theme="dark"] #page-costos .costo-cat-leg-amt {
color: var(--ink-secondary) !important;
}
/* ── Search bar (Registro) ── */
[data-theme="dark"] #page-costos .co-search-wrap {
background: var(--surface-3) !important;
box-shadow: 0 0 0 1px var(--line-soft) !important;
}
[data-theme="dark"] #page-costos .co-search-icon {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-costos .co-search-input {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-costos .co-search-input::placeholder {
color: var(--ink-tertiary) !important;
}
/* ── Tabla de Registro ── */
[data-theme="dark"] #page-costos .co-table-card {
background: var(--surface-1) !important;
border: 1px solid var(--line-soft) !important;
box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] #page-costos .co-table thead th {
background: var(--surface-2) !important;
color: var(--ink-tertiary) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-costos .co-table tbody tr {
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-costos .co-table tbody tr:nth-child(even) {
background: rgba(255, 250, 240, .015) !important;
}
[data-theme="dark"] #page-costos .co-table tbody tr:hover {
background: var(--surface-3) !important;
}
[data-theme="dark"] #page-costos .co-table tbody td {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-costos .co-td-date {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-costos .co-td-monto {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-costos .co-row-edit,
[data-theme="dark"] #page-costos .co-row-del {
color: var(--ink-tertiary) !important;
background: transparent !important;
}
[data-theme="dark"] #page-costos .co-row-edit:hover {
color: var(--ink-primary) !important;
background: var(--surface-3) !important;
}
[data-theme="dark"] #page-costos .co-row-del:hover {
color: var(--c-red-ink) !important;
background: var(--c-red-soft) !important;
}
/* Empty state legacy */
[data-theme="dark"] #page-costos .costo-empty {
color: var(--ink-tertiary) !important;
}
/* ── Subpage: Por sucursal — cards individuales ── */
[data-theme="dark"] #page-costos .co-suc-card {
background: var(--surface-1) !important;
box-shadow: var(--shadow-card) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-costos .co-suc-card-name,
[data-theme="dark"] #page-costos .co-suc-total {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-costos .co-suc-pct,
[data-theme="dark"] #page-costos .co-suc-meta {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-costos .co-suc-kpi-grid {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-costos .co-suc-kpi-lbl {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-costos .co-suc-kpi-val {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-costos .co-util-pos {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-costos .co-util-neg {
color: var(--c-red-ink) !important;
}
[data-theme="dark"] #page-costos .co-suc-breakdown-title {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-costos .co-suc-breakdown-empty {
color: var(--ink-tertiary) !important;
}
/* ── Ranking por sucursal ── */
[data-theme="dark"] #page-costos .co-rank-row {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-costos .co-rank-row:first-child {
background: linear-gradient(135deg, rgba(232, 102, 58, .12) 0%, var(--surface-2) 70%) !important;
border-color: var(--c-ember-line) !important;
}
[data-theme="dark"] #page-costos .co-rank-pos {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-costos .co-rank-name-top {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-costos .co-rank-name-sub {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-costos .co-rank-metric-lbl {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-costos .co-rank-metric-val {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-costos .co-rank-footer {
border-top: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-costos .co-rank-footer b {
color: var(--ink-primary) !important;
}
/* ── Categorías pill (preserva semántica si las hay) ── */
[data-theme="dark"] #page-costos .co-cat-pill {
background: var(--surface-3) !important;
color: var(--ink-secondary) !important;
}
/* ═════════════════════════════════════════════════════════════════
v7.95.15 · DARK MODE — Página PRECIOS (Lista de precios)
- Controles relocados en topbar via LXTopbar (.pr-search-wrap,
.pr-filter-select, .pr-save-btn) + lista de productos por categoría
con historial colapsable e inputs inline editables.
═════════════════════════════════════════════════════════════════ */
/* ── Page shell ── */
[data-theme="dark"] #page-precios {
background: transparent !important;
}
/* ── Header in-body (visible solo si LXTopbar no relocó) ── */
[data-theme="dark"] #page-precios .pr-eyebrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-precios .pr-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-precios .pr-subtitle {
color: var(--ink-secondary) !important;
}
/* ── Search wrap relocado en topbar ── */
[data-theme="dark"] .tb-action-zone .pr-search-wrap {
background: var(--controls-bg) !important;
border: 1px solid var(--controls-border) !important;
}
[data-theme="dark"] .tb-action-zone .pr-search-wrap:focus-within {
background: var(--controls-bg-hover) !important;
border-color: var(--line-strong) !important;
}
[data-theme="dark"] .tb-action-zone .pr-search-wrap svg {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .tb-action-zone .pr-search-input {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .tb-action-zone .pr-search-input::placeholder {
color: var(--ink-tertiary) !important;
}
/* ── Select filter relocado en topbar ── */
[data-theme="dark"] .tb-action-zone .pr-filter-select {
background: var(--controls-bg) !important;
border: 1px solid var(--controls-border) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .tb-action-zone .pr-filter-select:hover {
background: var(--controls-bg-hover) !important;
}
[data-theme="dark"] .tb-action-zone .pr-filter-select:focus {
background: var(--controls-bg-active) !important;
border-color: var(--line-strong) !important;
}
/* ── Save button en topbar primary zone (mantiene identidad ember) ── */
[data-theme="dark"] #tb-primary-zone .pr-save-btn {
background: var(--c-ember) !important;
color: #fff !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, .35) !important;
}
[data-theme="dark"] #tb-primary-zone .pr-save-btn:hover {
background: var(--c-ember-hover) !important;
box-shadow: 0 2px 8px rgba(232, 102, 58, .25) !important;
}
[data-theme="dark"] #tb-primary-zone .pr-save-btn.is-success {
background: var(--c-green) !important;
box-shadow: 0 4px 16px rgba(79, 190, 122, .28) !important;
}
/* Save button in-body (mismo tratamiento si LXTopbar no relocó) */
[data-theme="dark"] #page-precios .pr-save-btn {
background: var(--c-ember) !important;
color: #fff !important;
}
[data-theme="dark"] #page-precios .pr-save-btn:hover {
background: var(--c-ember-hover) !important;
box-shadow: 0 2px 8px rgba(232, 102, 58, .25) !important;
}
/* ── Search/filter in-body (fallback si LXTopbar no relocó) ── */
[data-theme="dark"] #page-precios .pr-search-wrap {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-precios .pr-search-wrap:focus-within {
background: var(--surface-3) !important;
border-color: var(--c-ember-line) !important;
box-shadow: 0 0 0 3px var(--c-ember-soft) !important;
}
[data-theme="dark"] #page-precios .pr-search-wrap svg {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-precios .pr-search-input {
color: var(--ink-primary) !important;
background: transparent !important;
}
[data-theme="dark"] #page-precios .pr-search-input::placeholder {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-precios .pr-filter-select {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-precios .pr-filter-select:focus {
background: var(--surface-3) !important;
border-color: var(--c-ember-line) !important;
box-shadow: 0 0 0 3px var(--c-ember-soft) !important;
}
/* ── Grupos por categoría ── */
[data-theme="dark"] #page-precios .pr-group-head {
border-bottom: 1.5px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-precios .pr-group-title {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-precios .pr-group-count {
background: var(--c-ember-soft) !important;
color: var(--c-ember-ink) !important;
}
/* ── Lista de productos (rows wrap) ── */
[data-theme="dark"] #page-precios .pr-rows-wrap {
background: var(--surface-1) !important;
border: 1.5px solid var(--line-soft) !important;
box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] #page-precios .pr-row {
background: transparent !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-precios .pr-row:last-child {
border-bottom: none !important;
}
[data-theme="dark"] #page-precios .pr-row-head:hover,
[data-theme="dark"] #page-precios .pr-row.is-open .pr-row-head {
background: var(--surface-2) !important;
}
/* ── Row contents ── */
[data-theme="dark"] #page-precios .pr-row-nombre {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-precios .pr-row-meta {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-precios .pr-row-toggle {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-precios .pr-row-head:hover .pr-row-toggle {
color: var(--c-ember-ink) !important;
}
/* ── Inline price input ── */
[data-theme="dark"] #page-precios .pr-precio-input {
color: var(--c-ember-ink) !important;
background: transparent !important;
border-color: transparent !important;
}
[data-theme="dark"] #page-precios .pr-precio-input:focus {
background: var(--surface-3) !important;
border-color: var(--line-medium) !important;
}
[data-theme="dark"] #page-precios .pr-precio-input.is-dirty {
background: var(--c-ember-soft) !important;
border-color: var(--c-ember-line) !important;
color: var(--c-ember-ink) !important;
}
/* ── Historial colapsable ── */
[data-theme="dark"] #page-precios .pr-hist {
background: var(--surface-2) !important;
border-top: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-precios .pr-hist-empty {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-precios .pr-hist-row {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-precios .pr-hist-precio {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-precios .pr-hist-motivo,
[data-theme="dark"] #page-precios .pr-hist-fecha {
color: var(--ink-tertiary) !important;
}
/* ── Empty state (búsqueda sin resultados) ── */
[data-theme="dark"] #page-precios .empty,
[data-theme="dark"] #page-precios .empty-state,
[data-theme="dark"] #page-precios .empty-state-title {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-precios .empty-state-sub {
color: var(--ink-tertiary) !important;
}
/* ═════════════════════════════════════════════════════════════════
v7.95.16 · DARK MODE — Página CLIENTES (Fidelización · master-detail)
- Master head v2 + controls v2 (search + tier filters + CTA)
- Tabla editorial v7.18.0 (.cli-tbl)
- Drawer ficha cliente (.cd-* v7.75.0 hero + secciones)
- Drawer Nueva Venta view (.cd-nv-* v7.32.0)
- Modal Cliente usa .lx-modal-* → cubierto por v7.95.9
═════════════════════════════════════════════════════════════════ */
/* ── Page shell ── */
[data-theme="dark"] #page-clientes {
background: transparent !important;
}
[data-theme="dark"] #page-clientes .cli-master {
background: transparent !important;
}
/* ══ MASTER HEAD V2 ══ */
[data-theme="dark"] #page-clientes .cli-master-head-v2 {
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-clientes .cli-head-eyebrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-clientes .cli-head-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cli-head-stats {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-clientes .cli-head-stat b {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cli-head-stat-sep {
color: var(--ink-disabled) !important;
}
/* CTA "Nuevo cliente" — Lacca Sepia */
[data-theme="dark"] #page-clientes .cli-btn-new,
[data-theme="dark"] #page-clientes .cli-btn-new-v2 {
background: var(--grad-cta) !important;
color: var(--ink-primary) !important;
border: 1px solid var(--line-soft) !important;
box-shadow: var(--cta-highlight), var(--cta-shadow) !important;
}
[data-theme="dark"] #page-clientes .cli-btn-new:hover,
[data-theme="dark"] #page-clientes .cli-btn-new-v2:hover {
background: var(--grad-cta-hover) !important;
opacity: 1 !important;
}
/* ── Controls v2: search bar ── */
[data-theme="dark"] #page-clientes .cli-controls-v2 .cli-master-bar {
background: var(--controls-bg) !important;
border: 1px solid var(--controls-border) !important;
}
[data-theme="dark"] #page-clientes .cli-controls-v2 .cli-master-bar:focus-within {
background: var(--controls-bg-hover) !important;
border-color: var(--line-strong) !important;
}
[data-theme="dark"] #page-clientes .cli-controls-v2 .cli-search-ico {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-clientes .cli-controls-v2 .cli-master-bar input {
background: transparent !important;
color: var(--ink-primary) !important;
border: none !important;
}
[data-theme="dark"] #page-clientes .cli-controls-v2 .cli-master-bar input::placeholder {
color: var(--ink-tertiary) !important;
}
/* Search bar legacy fallback (sin v2) */
[data-theme="dark"] #page-clientes .cli-master-bar input {
background: var(--controls-bg) !important;
border: 1px solid var(--controls-border) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cli-master-bar input:focus {
background: var(--controls-bg-hover) !important;
border-color: var(--c-ember-line) !important;
}
/* ── Tier filters v2 ── */
[data-theme="dark"] #page-clientes .cli-controls-v2 .cli-tier-filters,
[data-theme="dark"] #page-clientes .cli-tier-filters {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-clientes .cli-controls-v2 .cli-tier-btn,
[data-theme="dark"] #page-clientes .cli-tier-btn {
background: transparent !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-clientes .cli-controls-v2 .cli-tier-btn:hover,
[data-theme="dark"] #page-clientes .cli-tier-btn:hover {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cli-controls-v2 .cli-tier-btn.active,
[data-theme="dark"] #page-clientes .cli-tier-btn.active {
background: var(--surface-1) !important;
color: var(--ink-primary) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, .35) !important;
}
/* List count */
[data-theme="dark"] #page-clientes .cli-list-count {
color: var(--ink-secondary) !important;
}
/* ══ TABLA EDITORIAL ══ */
[data-theme="dark"] #page-clientes .cli-tbl {
background: var(--surface-1) !important;
border: 1px solid var(--line-soft) !important;
box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] #page-clientes .cli-tbl thead tr {
background: var(--surface-2) !important;
border-bottom: 1.5px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-clientes .cli-tbl thead th {
color: var(--ink-tertiary) !important;
background: transparent !important;
}
[data-theme="dark"] #page-clientes .cli-tbl tbody tr.cli-row {
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-clientes .cli-tbl tbody tr.cli-row:hover {
background: var(--surface-3) !important;
}
[data-theme="dark"] #page-clientes .cli-tbl tbody tr.cli-row.is-selected {
background: var(--c-ember-soft) !important;
box-shadow: inset 3px 0 0 0 var(--c-ember) !important;
}
/* Cell contents */
[data-theme="dark"] #page-clientes .cli-tbl td {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cli-name {
color: var(--ink-primary) !important;
}
/* ── Avatar tiers (FID v3) — preservar identidad cromática pero dark-aware ── */
[data-theme="dark"] #page-clientes .cli-avatar.t-selecto {
background: linear-gradient(135deg, rgba(181, 167, 147, .18), rgba(156, 142, 127, .14)) !important;
color: #C8B89C !important;
}
[data-theme="dark"] #page-clientes .cli-avatar.t-privado {
background: linear-gradient(135deg, rgba(228, 226, 222, .14), rgba(228, 226, 222, .08)) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cli-avatar.t-legado {
background: linear-gradient(135deg, rgba(216, 184, 114, .22), rgba(201, 169, 97, .18)) !important;
color: #E5C885 !important;
box-shadow: 0 0 0 1px rgba(201, 169, 97, .35) !important;
}
/* Backcompat legacy tiers */
[data-theme="dark"] #page-clientes .cli-avatar.t-bronce,
[data-theme="dark"] #page-clientes .cli-avatar.t-plata {
background: rgba(156, 142, 127, .14) !important;
color: #C8B89C !important;
}
[data-theme="dark"] #page-clientes .cli-avatar.t-oro {
background: rgba(228, 226, 222, .10) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cli-avatar.t-platino {
background: rgba(201, 169, 97, .18) !important;
color: #E5C885 !important;
}
/* Tier label (texto al lado del avatar) */
[data-theme="dark"] #page-clientes .cli-tier {
color: var(--ink-tertiary) !important;
}
/* Tier dots — preservar identidad (señalética) */
[data-theme="dark"] #page-clientes .cli-tier.t-legado .cli-tier-dot,
[data-theme="dark"] #page-clientes .cli-tier.t-platino .cli-tier-dot {
box-shadow: 0 0 6px rgba(201, 169, 97, .5) !important;
}
/* WhatsApp + email + meta */
[data-theme="dark"] #page-clientes .cli-wa {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-clientes .cli-wa:hover {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-clientes .cli-wa-ico {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-clientes .cli-wa.is-empty,
[data-theme="dark"] #page-clientes .cli-wa.is-empty .cli-wa-ico {
color: var(--ink-disabled) !important;
}
[data-theme="dark"] #page-clientes .cli-email {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-clientes .cli-email.is-empty {
color: var(--ink-disabled) !important;
}
/* Compras + caja + puntos + alta */
[data-theme="dark"] #page-clientes .cli-compras-val {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cli-compras-sub {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-clientes .cli-caja {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-clientes .cli-caja.is-empty {
color: var(--ink-disabled) !important;
}
[data-theme="dark"] #page-clientes .cli-pts {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cli-pts-star {
color: var(--c-amber-ink) !important;
}
[data-theme="dark"] #page-clientes .cli-pts.zero,
[data-theme="dark"] #page-clientes .cli-pts.zero .cli-pts-star {
color: var(--ink-disabled) !important;
}
[data-theme="dark"] #page-clientes .cli-alta {
color: var(--ink-tertiary) !important;
}
/* Acciones hover-reveal */
[data-theme="dark"] #page-clientes .cli-act-btn {
color: var(--ink-tertiary) !important;
background: transparent !important;
border: none !important;
}
[data-theme="dark"] #page-clientes .cli-act-btn:hover {
background: var(--surface-3) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cli-act-btn.del {
color: var(--c-red) !important;
}
[data-theme="dark"] #page-clientes .cli-act-btn.del:hover {
background: var(--c-red-soft) !important;
color: var(--c-red-ink) !important;
}
/* Detail empty */
[data-theme="dark"] #page-clientes .cli-detail-empty,
[data-theme="dark"] #page-clientes .cli-detail-empty-text {
color: var(--ink-tertiary) !important;
}
/* ══ DRAWER SHELL + OVERLAY ══ */
[data-theme="dark"] #page-clientes.cli-drawer-open .cli-drawer-shell::before {
background: var(--surface-overlay) !important;
backdrop-filter: blur(12px) saturate(0.85) !important;
-webkit-backdrop-filter: blur(12px) saturate(0.85) !important;
}
[data-theme="dark"] #page-clientes .cli-drawer.cd-v2 {
background: var(--surface-1) !important;
border-left: 1px solid var(--line-soft) !important;
border: 1px solid var(--line-soft) !important;
box-shadow: var(--shadow-modal) !important;
}
/* Legacy drawer (sin cd-v2) */
[data-theme="dark"] #page-clientes .cli-drawer {
background: var(--surface-1) !important;
border-left: 1px solid var(--line-soft) !important;
}
/* ══ DRAWER HEAD ══ */
[data-theme="dark"] #page-clientes .cd-head {
border-bottom: 1px solid var(--line-soft) !important;
}
/* ── HERO (v7.75.0) ── */
[data-theme="dark"] #page-clientes .cd-hero {
background: transparent !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-clientes .cd-hero-act {
background: transparent !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-clientes .cd-hero-act:hover {
background: var(--surface-3) !important;
color: var(--ink-primary) !important;
}
/* Hero avatar — preservamos gradients de tier (identidad) pero ajustamos sombra */
[data-theme="dark"] #page-clientes .cd-hero-avatar {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .15),
0 6px 24px rgba(0, 0, 0, .45) !important;
}
[data-theme="dark"] #page-clientes .cd-hero-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cd-hero-tier-row {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-clientes .cd-hero-meta {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-clientes .cd-hero-tier-sep {
color: var(--ink-disabled) !important;
}
/* Hero tier pills — preservar identidad cromática warm */
[data-theme="dark"] #page-clientes .cd-hero-tier.t-bronce {
background: rgba(183, 133, 84, .18) !important;
color: #D8A672 !important;
}
[data-theme="dark"] #page-clientes .cd-hero-tier.t-plata {
background: rgba(180, 180, 180, .14) !important;
color: #BFBFBF !important;
}
[data-theme="dark"] #page-clientes .cd-hero-tier.t-oro {
background: rgba(212, 165, 68, .18) !important;
color: #E5C885 !important;
}
[data-theme="dark"] #page-clientes .cd-hero-tier.t-platino {
background: var(--c-ember-soft) !important;
color: var(--c-ember-ink) !important;
}
/* ══ DRAWER SECTIONS ══ */
[data-theme="dark"] #page-clientes .cd-sec {
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-clientes .cd-sec-label {
color: var(--ink-tertiary) !important;
}
/* ── Puntos / nivel ── */
[data-theme="dark"] #page-clientes .cd-pts-num {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cd-pts-star {
color: var(--c-amber-ink) !important;
}
[data-theme="dark"] #page-clientes .cd-pts-next {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-clientes .cd-prog-track {
background: var(--surface-3) !important;
}
/* Progress fill mantiene su gradient identitario (bronce → oro → privado) */
[data-theme="dark"] #page-clientes .cd-prog-marks {
color: var(--ink-disabled) !important;
}
[data-theme="dark"] #page-clientes .cd-prog-marks span.active {
color: var(--ink-secondary) !important;
}
/* ── 4 KPIs ── */
[data-theme="dark"] #page-clientes .cd-kpi-val {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cd-kpi-val.zero {
color: var(--ink-disabled) !important;
}
[data-theme="dark"] #page-clientes .cd-kpi-val.green {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-clientes .cd-kpi-lbl {
color: var(--ink-tertiary) !important;
}
/* ── Contacto ── */
[data-theme="dark"] #page-clientes .cd-cline {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-clientes .cd-cline-ico {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-clientes .cd-cline.is-empty,
[data-theme="dark"] #page-clientes .cd-cline.is-empty .cd-cline-ico {
color: var(--ink-disabled) !important;
}
[data-theme="dark"] #page-clientes .cd-cline a:hover {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cd-cline-wa a:hover {
color: var(--c-green-ink) !important;
}
/* ── Nota ── */
[data-theme="dark"] #page-clientes .cd-note {
color: var(--ink-secondary) !important;
background: var(--surface-2) !important;
border-left: 2px solid var(--line-strong) !important;
}
/* ── Historial ── */
[data-theme="dark"] #page-clientes .cd-hist-row {
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-clientes .cd-hist-date {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-clientes .cd-hist-desc {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-clientes .cd-hist-amt {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cd-hist-empty {
color: var(--ink-tertiary) !important;
}
/* Legacy drw hist rows */
[data-theme="dark"] #page-clientes .cli-drw-hist-row {
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-clientes .cli-drw-hist-date {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-clientes .cli-drw-hist-desc,
[data-theme="dark"] #page-clientes .cli-drw-hist-amt {
color: var(--ink-primary) !important;
}
/* ══ DRAWER FOOTER + BUTTONS ══ */
[data-theme="dark"] #page-clientes .cd-foot {
background: var(--surface-1) !important;
border-top: 1px solid var(--line-soft) !important;
}
/* Lacca Sepia (reemplaza Lacca Nera marrón legacy) */
[data-theme="dark"] #page-clientes .cd-prime {
background: var(--grad-cta) !important;
color: var(--ink-primary) !important;
box-shadow:
inset 0 1px 0 rgba(255, 250, 240, .06),
var(--cta-shadow) !important;
}
[data-theme="dark"] #page-clientes .cd-prime:hover {
background: var(--grad-cta-hover) !important;
}
[data-theme="dark"] #page-clientes .cd-prime svg {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cd-ghost {
background: transparent !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-clientes .cd-ghost:hover {
background: var(--surface-3) !important;
border-color: var(--line-strong) !important;
color: var(--ink-primary) !important;
}
/* ══ NUEVA VENTA DRAWER VIEW (v7.32.0) ══ */
/* Back button */
[data-theme="dark"] #page-clientes .cd-nv-back {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-back:hover {
background: var(--surface-3) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-head-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-head-sub {
color: var(--ink-tertiary) !important;
}
/* Search */
[data-theme="dark"] #page-clientes .cd-nv-search {
background: var(--controls-bg) !important;
border: 1px solid var(--controls-border) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-search:focus {
background: var(--controls-bg-hover) !important;
border-color: var(--c-ember-line) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-search::placeholder {
color: var(--ink-tertiary) !important;
}
/* Product list rows */
[data-theme="dark"] #page-clientes .cd-nv-prod {
background: transparent !important;
}
[data-theme="dark"] #page-clientes .cd-nv-prod:hover {
background: var(--surface-3) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-prod.in-cart {
background: var(--c-ember-soft) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-prod.in-cart .cd-nv-prod-add {
background: var(--c-ember) !important;
color: #fff !important;
}
[data-theme="dark"] #page-clientes .cd-nv-prod-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-prod-meta {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-prod-price {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-prod-add {
background: var(--surface-3) !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-prod:hover .cd-nv-prod-add {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-empty {
color: var(--ink-tertiary) !important;
}
/* Cart items */
[data-theme="dark"] #page-clientes .cd-nv-cart {
background: var(--surface-2) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-item {
background: var(--surface-1) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-item-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-item-price {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-item-qty {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-item-qty:focus {
border-color: var(--c-ember-line) !important;
background: var(--surface-4) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-item-sub {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-item-del {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-item-del:hover {
background: var(--c-red-soft) !important;
color: var(--c-red-ink) !important;
}
/* Total */
[data-theme="dark"] #page-clientes .cd-nv-total-lbl {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-total-num {
color: var(--c-ember-ink) !important;
}
/* Payment method buttons */
[data-theme="dark"] #page-clientes .cd-nv-pago-btn {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-pago-btn:hover {
background: var(--surface-3) !important;
border-color: var(--line-strong) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-pago-btn.active {
background: var(--c-ember) !important;
border-color: var(--c-ember) !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(232, 102, 58, .28) !important;
}
/* Caja info */
[data-theme="dark"] #page-clientes .cd-nv-caja-saldo {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-caja-saldo strong {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-caja-warn {
color: var(--c-red-ink) !important;
}
/* Toggle stock */
[data-theme="dark"] #page-clientes .cd-nv-toggle-label {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-toggle-hint {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-toggle {
background: var(--surface-3) !important;
}
[data-theme="dark"] #page-clientes .cd-nv-toggle.active {
background: var(--c-green) !important;
}
/* ═════════════════════════════════════════════════════════════════
v7.95.18 · DARK MODE — Página FIDELIZACIÓN
- Sub-header + KPI strip (ACTIVOS/PUNTOS/DESCUENTOS/CUMPLEAÑOS)
- Sección Acciones Hoy (panel operativo + estado vacío)
- Vista General widgets (Membros · Leaderboard · Cumples · Momentum)
- Toolbar (search + sort)
- Lista por grupo de nivel (Selecto/Privado/Legado)
- Cards de cliente con tier rail + avatar gradient
- LEGADO membership treatment dark-aware
- Drawer detalle (tabs + hero + stats + progress + beneficios + sparkline + footer)
═════════════════════════════════════════════════════════════════ */
/* ── Page shell ── */
[data-theme="dark"] #page-fidelizacion {
background: transparent !important;
}
/* ── Sub-header ── */
[data-theme="dark"] #page-fidelizacion .fp-page-sub {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-page-sub-sep {
color: var(--ink-disabled) !important;
}
/* ══ KPI STRIP (4 cards) ══ */
[data-theme="dark"] #page-fidelizacion .fp-kpi {
background: var(--surface-1) !important;
box-shadow: var(--shadow-card) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-kpi-eyebrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-kpi-toggle {
background: var(--surface-3) !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-kpi-num {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-kpi-num-sub {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-kpi-foot {
color: var(--ink-tertiary) !important;
border-top: 1px solid var(--line-soft) !important;
}
/* meta dots preservan identidad (ember + gold) */
/* ══ SECTION TITLEBAR ══ */
[data-theme="dark"] #page-fidelizacion .fp-section-eyebrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-section-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-section-meta {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-section-meta span {
color: var(--ink-primary) !important;
}
/* Section action button "Cerrar mes" */
[data-theme="dark"] #page-fidelizacion .fp-section-action {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-section-action:hover {
background: var(--surface-4) !important;
border-color: var(--line-strong) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-section-action svg {
color: var(--ink-tertiary) !important;
}
/* ══ ACTIONS LIST (Qué hacer hoy) ══ */
[data-theme="dark"] #page-fidelizacion .fp-actions-list {
background: var(--surface-1) !important;
box-shadow: var(--shadow-card) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-action-card {
background: transparent !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-action-card:hover {
background: var(--surface-3) !important;
}
/* Action dots preservan semántica (ember/gold/slate/red) — solo "low" pasa a ink */
[data-theme="dark"] #page-fidelizacion .fp-action-card[data-urgency="low"] .fp-action-ico {
background: var(--ink-disabled) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-action-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-action-sub {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-action-sub strong {
color: var(--ink-primary) !important;
}
/* CTAs de acción → Lacca Sepia */
[data-theme="dark"] #page-fidelizacion .fp-action-cta {
background: var(--grad-cta) !important;
color: var(--ink-primary) !important;
box-shadow: var(--cta-highlight), var(--cta-shadow) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-action-cta:hover {
background: var(--grad-cta-hover) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-action-cta svg {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-action-cta--ghost {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-action-cta--ghost svg {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-action-cta--accent,
[data-theme="dark"] #page-fidelizacion .fp-action-cta--gold {
background: var(--grad-cta) !important;
color: var(--ink-primary) !important;
}
/* Estado vacío celebratorio "Todo al día" */
[data-theme="dark"] #page-fidelizacion .fp-actions-empty {
background: transparent !important;
}
[data-theme="dark"] #page-fidelizacion .fp-actions-empty-ico {
color: var(--c-green) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-actions-empty-title {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-actions-empty-sub {
color: var(--ink-secondary) !important;
}
/* ══ VISTA GENERAL widgets (4) ══ */
[data-theme="dark"] #page-fidelizacion .fp-widget {
background: var(--surface-1) !important;
box-shadow: var(--shadow-card) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-widget-eyebrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-widget-tag {
background: var(--surface-3) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-widget-count {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-widget-period-label {
color: var(--ink-tertiary) !important;
}
/* ── MEMBROS rows ── */
[data-theme="dark"] #page-fidelizacion .fp-membro-row {
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-membro-row:hover {
background: var(--surface-3) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-membro-row-name {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-membro-row--legado .fp-membro-row-name {
color: #E5C885 !important;
}
[data-theme="dark"] #page-fidelizacion .fp-membro-row-value {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-membro-row--legado .fp-membro-row-value {
color: #E5C885 !important;
}
[data-theme="dark"] #page-fidelizacion .fp-membro-row-sub {
color: var(--ink-secondary) !important;
}
/* ── LEADERBOARD ── */
[data-theme="dark"] #page-fidelizacion .fp-leaderboard-row {
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-leaderboard-row:hover {
background: var(--surface-3) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-leaderboard-rank {
color: var(--ink-tertiary) !important;
}
/* Top 3 ranks preservan oro/plata/bronce (identidad) */
[data-theme="dark"] #page-fidelizacion .fp-leaderboard-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-leaderboard-name-star {
color: #E5C885 !important;
text-shadow: 0 0 8px rgba(201, 169, 97, .55) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-leaderboard-meta {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-leaderboard-pts {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-leaderboard-pts-star {
color: var(--c-ember) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-leaderboard-row[data-nivel="legado"] .fp-leaderboard-pts {
color: #E5C885 !important;
}
[data-theme="dark"] #page-fidelizacion .fp-leaderboard-empty {
color: var(--ink-tertiary) !important;
}
/* ── CUMPLES ── */
[data-theme="dark"] #page-fidelizacion .fp-cumple-row {
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-cumple-row:hover {
background: var(--c-ember-soft) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-cumple-date {
background: var(--c-ember-soft) !important;
border: 1px solid var(--c-ember-line) !important;
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-cumple-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-cumple-countdown {
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-cumple-wa {
background: var(--c-green-soft) !important;
border: 1px solid var(--c-green-line) !important;
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-cumple-wa:hover {
background: rgba(79, 190, 122, .22) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-cumples-empty {
color: var(--ink-tertiary) !important;
}
/* ── MOMENTUM ── */
[data-theme="dark"] #page-fidelizacion .fp-momentum-grid {
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-momentum-item {
border-right: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-momentum-arrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-momentum-item--up .fp-momentum-arrow {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-momentum-item--down .fp-momentum-arrow {
color: var(--c-red-ink) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-momentum-value {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-momentum-item--up .fp-momentum-value {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-momentum-item--down .fp-momentum-value {
color: var(--c-red-ink) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-momentum-label {
color: var(--ink-tertiary) !important;
}
/* ── TOOLBAR (search + sort) ── */
[data-theme="dark"] #page-fidelizacion .fp-toolbar {
background: var(--surface-1) !important;
border: 1px solid var(--line-soft) !important;
box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-search-ico {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-search-input {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-search-input:focus {
background: var(--surface-4) !important;
border-color: var(--c-ember-line) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-search-input::placeholder {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-search-clr {
background: var(--surface-3) !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-search-clr:hover {
background: var(--surface-4) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-sort-label {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-sort-select {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 8px center !important;
}
[data-theme="dark"] #page-fidelizacion .fp-toolbar-meta {
color: var(--ink-secondary) !important;
}
/* ── LIST + group headers ── */
[data-theme="dark"] #page-fidelizacion .fp-list:empty::after {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-group-name {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-group[data-nivel="legado"] .fp-group-name {
color: #E5C885 !important;
}
[data-theme="dark"] #page-fidelizacion .fp-group-count {
background: var(--surface-3) !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-group[data-nivel="legado"] .fp-group-count {
background: rgba(201, 169, 97, .18) !important;
color: #E5C885 !important;
}
[data-theme="dark"] #page-fidelizacion .fp-group-line {
background: linear-gradient(90deg, var(--line-strong), transparent 60%) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-group[data-nivel="legado"] .fp-group-line {
background: linear-gradient(90deg, rgba(201, 169, 97, .42), transparent 60%) !important;
}
/* ── CARDS de cliente ── */
[data-theme="dark"] #page-fidelizacion .fp-card {
background: var(--surface-1) !important;
border: 1px solid var(--line-soft) !important;
box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-card:hover {
border-color: var(--line-strong) !important;
box-shadow: var(--shadow-card), 0 4px 16px rgba(0, 0, 0, .25) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-card-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-card-meta {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-card-meta b {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-card-progress {
background: var(--surface-3) !important;
}
/* Card nivel pills */
[data-theme="dark"] #page-fidelizacion .fp-card-nivel[data-nivel="selecto"] {
background: rgba(156, 142, 127, .18) !important;
color: #C8B89C !important;
border: 1px solid rgba(156, 142, 127, .35) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-card-nivel[data-nivel="privado"] {
background: rgba(228, 226, 222, .10) !important;
color: var(--ink-primary) !important;
border: 1px solid rgba(228, 226, 222, .22) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-card-nivel[data-nivel="legado"] {
background: rgba(201, 169, 97, .18) !important;
color: #E5C885 !important;
border: 1px solid rgba(201, 169, 97, .42) !important;
}
/* Card flags */
[data-theme="dark"] #page-fidelizacion .fp-card-flag {
background: var(--surface-3) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-card-flag--cumple {
background: var(--c-ember-soft) !important;
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-card-flag--gift {
background: var(--c-green-soft) !important;
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-card-flag--kit {
background: rgba(201, 169, 97, .18) !important;
color: #E5C885 !important;
}
/* Card actions */
[data-theme="dark"] #page-fidelizacion .fp-card-action {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-card-action:hover {
background: var(--surface-4) !important;
border-color: var(--line-strong) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-card-action--wa:hover {
background: var(--c-green-soft) !important;
border-color: var(--c-green-line) !important;
color: var(--c-green-ink) !important;
}
/* LEGADO premium card override (no usar el dark warm gradient legacy en dark mode) */
[data-theme="dark"] #page-fidelizacion .fp-card[data-nivel="legado"] {
background: linear-gradient(135deg, var(--surface-1) 0%, rgba(201, 169, 97, .08) 100%) !important;
border: 1px solid rgba(201, 169, 97, .35) !important;
border-left: 3px solid #C9A961 !important;
}
[data-theme="dark"] #page-fidelizacion .fp-card[data-nivel="legado"]:hover {
border-color: rgba(201, 169, 97, .55) !important;
box-shadow: 0 4px 18px rgba(201, 169, 97, .20) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-meta {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-meta b {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-action {
background: var(--surface-3) !important;
border-color: var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
/* ══ DRAWER PANEL + backdrop ══ */
[data-theme="dark"] #page-fidelizacion .fp-drawer-backdrop {
background: linear-gradient(
to right,
transparent 0%,
transparent 30%,
rgba(0, 0, 0, .12) 44%,
rgba(0, 0, 0, .28) 55%,
rgba(0, 0, 0, .42) 65%,
rgba(0, 0, 0, .55) 75%,
rgba(0, 0, 0, .65) 85%,
rgba(0, 0, 0, .72) 100%
) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-drawer-panel {
background: var(--surface-1) !important;
box-shadow:
inset 0 0 0 1px var(--line-soft),
var(--shadow-modal) !important;
}
/* ── Drawer tabs ── */
[data-theme="dark"] #page-fidelizacion .fp-dr-tabs {
background: var(--surface-1) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-tab {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-tab:hover {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-tab.active {
color: var(--ink-primary) !important;
border-bottom-color: var(--c-ember) !important;
}
/* ── Drawer hero (regular) ── */
[data-theme="dark"] #page-fidelizacion .fp-dr-hero {
background: var(--surface-1) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-hero-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-hero-since {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-close-v2 {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-close-v2:hover {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
/* Drawer hero LEGADO (premium dark — preservar identidad warm gold pero con tonos correctos) */
[data-theme="dark"] #page-fidelizacion .fp-dr-hero[data-nivel="legado"] {
background: linear-gradient(135deg, var(--surface-1) 0%, rgba(201, 169, 97, .14) 50%, var(--surface-1) 100%) !important;
border-bottom-color: rgba(201, 169, 97, .35) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-hero[data-nivel="legado"]::before {
background: radial-gradient(circle, rgba(201, 169, 97, .28) 0%, transparent 60%) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-hero[data-nivel="legado"] .fp-dr-hero-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-hero[data-nivel="legado"] .fp-dr-hero-since {
color: #E5C885 !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-hero[data-nivel="legado"] .fp-dr-close-v2 {
background: rgba(201, 169, 97, .12) !important;
border-color: rgba(201, 169, 97, .25) !important;
color: #E5C885 !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-hero[data-nivel="legado"] .fp-dr-close-v2:hover {
background: rgba(201, 169, 97, .22) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-hero-watermark {
color: rgba(201, 169, 97, .14) !important;
}
/* ── Drawer stats grid ── */
[data-theme="dark"] #page-fidelizacion .fp-dr-stat {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-stat-eyebrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-stat-value {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-stat-sub {
color: var(--ink-tertiary) !important;
}
/* ── Progress card ── */
[data-theme="dark"] #page-fidelizacion .fp-dr-progress-card {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-progress-label {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-progress-pct {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-progress-track {
background: var(--surface-3) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-progress-meta {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-progress-meta b {
color: var(--ink-primary) !important;
}
/* ── Max card (LEGADO) ── */
[data-theme="dark"] #page-fidelizacion .fp-dr-max-card {
background: linear-gradient(135deg, rgba(201, 169, 97, .14), rgba(201, 169, 97, .06)) !important;
border: 1px solid rgba(201, 169, 97, .42) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-max-title {
color: #E5C885 !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-max-sub {
color: rgba(229, 200, 133, .82) !important;
}
/* ── Section + Checklist ── */
[data-theme="dark"] #page-fidelizacion .fp-dr-section-label {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-check {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-check--active {
background: var(--c-green-soft) !important;
border-color: var(--c-green-line) !important;
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-check--inactive {
background: var(--surface-3) !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-check--cumple {
background: var(--c-ember-soft) !important;
border-color: var(--c-ember-line) !important;
color: var(--c-ember-ink) !important;
}
/* ── Sparkline (tab Histórico) ── */
[data-theme="dark"] #page-fidelizacion .fp-dr-spark-card {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-spark-title {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-spark-total {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-spark-grid-line {
background: var(--line-soft) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-spark-bar {
fill: rgba(228, 226, 222, .18) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-spark-bar.is-current {
fill: var(--c-ember) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-spark-bar.is-legado {
fill: #C9A961 !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-spark-bar:hover {
fill: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-spark-label {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-spark-label.is-current {
color: var(--c-ember-ink) !important;
}
/* ── Beneficios cards (tab Beneficios) ── */
[data-theme="dark"] #page-fidelizacion .fp-dr-ben-card {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-ben-card-gold {
background: linear-gradient(135deg, rgba(201, 169, 97, .12), rgba(201, 169, 97, .04)) !important;
border-color: rgba(201, 169, 97, .42) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-ben-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-ben-card-gold .fp-dr-ben-title {
color: #E5C885 !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-ben-sub {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-ben-card-gold .fp-dr-ben-sub {
color: rgba(229, 200, 133, .82) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-ben-cta {
background: linear-gradient(135deg, #D8B872, #C9A961) !important;
color: #1A1410 !important;
}
/* ── Drawer footer (sticky) ── */
[data-theme="dark"] #page-fidelizacion .fp-dr-footer {
background: var(--surface-1) !important;
border-top: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-cta-secondary {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-dr-cta-secondary:hover {
background: var(--surface-4) !important;
}
/* WhatsApp CTA mantiene verde brand */
/* ── Filters legacy (display:none por código, pero por si acaso) ── */
[data-theme="dark"] #page-fidelizacion .fp-tabs {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-tab {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-tab:hover {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-tab.active {
background: var(--surface-1) !important;
color: var(--ink-primary) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, .35) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-tab-count {
background: var(--surface-3) !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-tab.active .fp-tab-count {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-alert {
background: var(--c-ember-soft) !important;
border: 1px solid var(--c-ember-line) !important;
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-alert:hover {
background: rgba(232, 102, 58, .22) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-alert.active {
background: var(--grad-cta) !important;
border-color: var(--line-strong) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-alert-count {
background: rgba(232, 102, 58, .22) !important;
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] #page-fidelizacion .fp-alert.active .fp-alert-count {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
/* ═════════════════════════════════════════════════════════════════
v7.95.19 · DARK MODE — Página EMPRESAS (B2B · Ledger Editorial)
- Header v2 (eyebrow + título + stats + CTA Nueva empresa)
- KPI strip 3 cards semánticas (Por cobrar · Vencido · Al día)
- Toolbar (search + export + filters)
- Card grid + expanded card (aging mini, info, table pedidos)
- Empd cards (lista pedidos rediseñada con rail + items + meta + actions)
- PDV modal (detalle pedido — qué compró, totales, pagos, observaciones)
- PE modal (Pedido Empresa: search empresa + search producto + cart + dropdowns)
- PP modal (Pago empresa: emp-card + modo-toggle + preview + caja toggle)
Empresas mantiene paleta semántica Ledger (verde esmeralda / ámbar / bordeaux)
pero adaptada a warm-dark del sistema.
═════════════════════════════════════════════════════════════════ */
/* ── Page shell + emp tokens override ── */
[data-theme="dark"] #page-empresas {
background: transparent !important;
}
[data-theme="dark"] #page-empresas.emp {
--emp-ok: var(--c-green) !important;
--emp-warn: var(--c-amber) !important;
--emp-amber: var(--c-ember) !important;
--emp-bad: var(--c-red) !important;
--emp-ink: var(--ink-primary) !important;
--emp-line: var(--line-soft) !important;
}
/* ══ HEADER v2 ══ */
[data-theme="dark"] #page-empresas .emp-header-eyebrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-header-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-empresas .emp-header-stats,
[data-theme="dark"] #page-empresas .emp-header-stat {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-empresas .emp-header-stat b {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-empresas .emp-header-stat-sep {
color: var(--ink-disabled) !important;
}
/* CTA Nueva empresa — Lacca Sepia */
[data-theme="dark"] #page-empresas .emp-btn-new {
background: var(--grad-cta) !important;
color: var(--ink-primary) !important;
box-shadow: var(--cta-highlight), var(--cta-shadow) !important;
}
[data-theme="dark"] #page-empresas .emp-btn-new:hover {
background: var(--grad-cta-hover) !important;
}
/* ══ KPI STRIP (3 cards) ══ */
[data-theme="dark"] #page-empresas .emp-kpi-card {
background: var(--surface-1) !important;
border: 1px solid var(--line-soft) !important;
box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] #page-empresas .emp-kpi-icon--warn {
background: var(--c-amber-soft) !important;
color: var(--c-amber-ink) !important;
}
[data-theme="dark"] #page-empresas .emp-kpi-icon--danger {
background: var(--c-red-soft) !important;
color: var(--c-red-ink) !important;
}
[data-theme="dark"] #page-empresas .emp-kpi-icon--ok {
background: var(--c-green-soft) !important;
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-empresas .emp-kpi-label {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-kpi-value--warn {
color: var(--c-amber-ink) !important;
}
[data-theme="dark"] #page-empresas .emp-kpi-value--danger {
color: var(--c-red-ink) !important;
}
[data-theme="dark"] #page-empresas .emp-kpi-value--ok {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-empresas .emp-kpi-sub {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-kpi::before {
background: linear-gradient(90deg, var(--c-ember), transparent) !important;
}
/* ══ TOOLBAR ══ */
[data-theme="dark"] #page-empresas .emp-search-wrap svg {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-search-input {
background: var(--controls-bg) !important;
border: 1px solid var(--controls-border) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-empresas .emp-search-input::placeholder {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-search-input:focus {
background: var(--controls-bg-hover) !important;
border-color: var(--c-ember-line) !important;
box-shadow: 0 0 0 3px var(--c-ember-soft) !important;
}
[data-theme="dark"] #page-empresas .emp-search-clr {
background: var(--surface-3) !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-search-clr:hover {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-empresas .emp-toolbar-export {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-empresas .emp-toolbar-export:hover {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-empresas .emp-filter-btn {
background: transparent !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-filter-btn:hover {
border-color: var(--line-strong) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-empresas .emp-filter-btn.active {
background: var(--grad-cta) !important;
border-color: var(--line-strong) !important;
color: var(--ink-primary) !important;
}
/* ══ GRID CARDS ══ */
[data-theme="dark"] #page-empresas .emp-card {
background: var(--surface-1) !important;
border: 1px solid var(--line-soft) !important;
box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] #page-empresas .emp-card:hover {
border-color: var(--line-strong) !important;
box-shadow: var(--shadow-card), 0 4px 16px rgba(0, 0, 0, .25) !important;
}
[data-theme="dark"] #page-empresas .emp-card.is-expanded {
border-color: var(--line-strong) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, .35) !important;
}
[data-theme="dark"] #page-empresas .emp-card-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-empresas .emp-card-meta {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-card-amount--ok {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-empresas .emp-card-amount--warn {
color: var(--c-amber-ink) !important;
}
[data-theme="dark"] #page-empresas .emp-card-amount--danger {
color: var(--c-red-ink) !important;
}
[data-theme="dark"] #page-empresas .emp-card-badge--ok {
background: var(--c-green-soft) !important;
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-empresas .emp-card-badge--warn {
background: var(--c-amber-soft) !important;
color: var(--c-amber-ink) !important;
}
[data-theme="dark"] #page-empresas .emp-card-badge--danger {
background: var(--c-red-soft) !important;
color: var(--c-red-ink) !important;
}
[data-theme="dark"] #page-empresas .emp-card-badge--neutral {
background: var(--surface-3) !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-card-foot {
border-top: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-empresas .emp-card-stat-label {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-card-stat-value {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-empresas .emp-card-close {
background: var(--surface-3) !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-card-close:hover {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-empresas .emp-card-quick-btn--pedido {
background: var(--c-ember) !important;
color: #fff !important;
}
[data-theme="dark"] #page-empresas .emp-card-quick-btn--pedido:hover {
background: var(--c-ember-hover) !important;
box-shadow: 0 3px 12px rgba(232, 102, 58, .35) !important;
}
[data-theme="dark"] #page-empresas .emp-card-quick-btn--pago {
background: var(--surface-3) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-empresas .emp-card-quick-btn--pago:hover {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
/* ══ EXPANDED CARD ══ */
[data-theme="dark"] #page-empresas .emp-expanded {
border-top: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-empresas .emp-exp-btn--primary {
background: var(--grad-cta) !important;
color: var(--ink-primary) !important;
box-shadow: var(--cta-highlight), var(--cta-shadow) !important;
}
[data-theme="dark"] #page-empresas .emp-exp-btn--primary:hover {
background: var(--grad-cta-hover) !important;
}
[data-theme="dark"] #page-empresas .emp-exp-btn--ghost {
background: transparent !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-empresas .emp-exp-btn--ghost:hover {
background: var(--surface-3) !important;
border-color: var(--line-strong) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-empresas .emp-exp-section {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-empresas .emp-exp-section-title {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-aging-mini-label {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-empresas .emp-aging-mini-bar {
background: var(--surface-3) !important;
}
[data-theme="dark"] #page-empresas .emp-aging-mini-amount {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-empresas .emp-contact-row svg {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-contact-row span {
color: var(--ink-secondary) !important;
}
/* Tabla expanded */
[data-theme="dark"] #page-empresas .emp-exp-table .mono {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-empresas .emp-exp-table .muted {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-exp-table .muted.is-vencida {
color: var(--c-red-ink) !important;
}
[data-theme="dark"] #page-empresas .emp-exp-table .amount {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-empresas .emp-exp-table .amount.saldado {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-empresas .emp-saldado-stamp {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] #page-empresas .emp-empty-grid,
[data-theme="dark"] #page-empresas .emp-empty-state,
[data-theme="dark"] #page-empresas .emp-empty-title,
[data-theme="dark"] #page-empresas .emp-empty-sub {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-empty-title {
color: var(--ink-secondary) !important;
}
/* ══ DETALLE (legacy split layout) ══ */
[data-theme="dark"] #page-empresas .emp-detail {
background: var(--surface-1) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-empresas .emp-detail::before {
background-image: repeating-linear-gradient(
transparent 0,
transparent 31px,
var(--line-soft) 31px,
var(--line-soft) 32px
) !important;
}
[data-theme="dark"] #page-empresas .emp-detail-head {
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-empresas .emp-detail-eyebrow {
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] #page-empresas .emp-detail-razon {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-empresas .emp-detail-cuit {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-detail-sep {
color: var(--ink-disabled) !important;
}
[data-theme="dark"] #page-empresas .emp-detail-fantasia {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-estado-ok {
background: var(--c-green-soft) !important;
color: var(--c-green-ink) !important;
border-color: var(--c-green-line) !important;
}
[data-theme="dark"] #page-empresas .emp-estado-warn {
background: var(--c-amber-soft) !important;
color: var(--c-amber-ink) !important;
border-color: var(--c-amber-line) !important;
}
[data-theme="dark"] #page-empresas .emp-estado-danger {
background: var(--c-red-soft) !important;
color: var(--c-red-ink) !important;
border-color: var(--c-red-line) !important;
}
/* Detail hero buttons */
[data-theme="dark"] #page-empresas .emp-btn-hero-prime {
background: var(--grad-cta) !important;
color: var(--ink-primary) !important;
box-shadow: var(--cta-highlight), var(--cta-shadow) !important;
}
[data-theme="dark"] #page-empresas .emp-btn-hero-prime:hover {
background: var(--grad-cta-hover) !important;
}
[data-theme="dark"] #page-empresas .emp-btn-hero-ghost {
background: transparent !important;
border: 1.5px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-empresas .emp-btn-hero-ghost:hover {
background: var(--surface-3) !important;
border-color: var(--line-strong) !important;
}
[data-theme="dark"] #page-empresas .emp-btn-more {
background: transparent !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-btn-more:hover {
background: var(--surface-3) !important;
border-color: var(--line-strong) !important;
color: var(--ink-primary) !important;
}
/* More menu (dropdown) */
[data-theme="dark"] #page-empresas .emp-more-menu {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
box-shadow: var(--shadow-popover) !important;
}
[data-theme="dark"] #page-empresas .emp-more-item {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-empresas .emp-more-item:hover {
background: var(--surface-4) !important;
}
[data-theme="dark"] #page-empresas .emp-more-item svg {
color: var(--ink-tertiary) !important;
}
/* Detail KPIs strip */
[data-theme="dark"] #page-empresas .emp-detail-kpis {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-empresas .emp-detail-kpi-sep {
background: var(--line-soft) !important;
}
[data-theme="dark"] #page-empresas .emp-detail-kpi-l {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-detail-kpi-v {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-empresas .emp-detail-kpi-sub {
color: var(--ink-tertiary) !important;
}
/* Aging card */
[data-theme="dark"] #page-empresas .emp-aging-card {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-empresas .emp-aging-note {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-aging-lbl {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-empresas .emp-aging-bar-track {
background: var(--surface-3) !important;
}
[data-theme="dark"] #page-empresas .emp-aging-amt {
color: var(--ink-primary) !important;
}
/* Timeline */
[data-theme="dark"] #page-empresas .emp-timeline-card {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-empresas .emp-timeline-empty {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] #page-empresas .emp-timeline-empty-sub {
color: var(--ink-disabled) !important;
}
/* Info grid */
[data-theme="dark"] #page-empresas .emp-info-card {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] #page-empresas .emp-info-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-empresas .emp-info-line {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] #page-empresas .emp-mono-eyebrow {
color: var(--ink-tertiary) !important;
}
/* ── Pedidos table (legacy) ── */
[data-theme="dark"] #page-empresas .emp-pedidos-card,
[data-theme="dark"] .emp-pedidos-card {
background: var(--surface-1) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .emp-pedidos-table th {
background: var(--surface-2) !important;
color: var(--ink-tertiary) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .emp-pedidos-table td {
border-bottom: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .emp-pedidos-table tbody tr:hover td {
background: var(--surface-3) !important;
}
[data-theme="dark"] .emp-pedido-num {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .emp-pedido-fecha,
[data-theme="dark"] .emp-pedido-venc {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .emp-pedido-venc.is-vencida {
color: var(--c-red-ink) !important;
}
[data-theme="dark"] .emp-pedido-saldo {
color: var(--c-amber-ink) !important;
}
/* Badges generic */
[data-theme="dark"] .emp-badge-ok {
background: var(--c-green-soft) !important;
color: var(--c-green-ink) !important;
}
[data-theme="dark"] .emp-badge-warn {
background: var(--c-amber-soft) !important;
color: var(--c-amber-ink) !important;
}
[data-theme="dark"] .emp-badge-amber {
background: var(--c-ember-soft) !important;
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] .emp-badge-danger {
background: var(--c-red-soft) !important;
color: var(--c-red-ink) !important;
}
[data-theme="dark"] .emp-badge-neutral {
background: var(--surface-3) !important;
color: var(--ink-tertiary) !important;
}
/* Pedido action buttons */
[data-theme="dark"] .emp-edit-btn:hover {
background: var(--c-ember-soft) !important;
color: var(--c-ember-ink) !important;
border-color: var(--c-ember-line) !important;
}
[data-theme="dark"] .emp-anular-btn:hover {
background: var(--c-red-soft) !important;
color: var(--c-red-ink) !important;
border-color: var(--c-red-line) !important;
}
[data-theme="dark"] .emp-saldado-stamp {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] .emp-remito-btn {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .emp-remito-btn:hover {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
/* ══ EMPD — Lista pedidos rediseñada (v7.32.0) ══ */
[data-theme="dark"] .empd-head-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .empd-head-count {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .empd-stat {
background: var(--surface-3) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .empd-stat--warn {
background: var(--c-amber-soft) !important;
color: var(--c-amber-ink) !important;
}
[data-theme="dark"] .empd-stat--amber {
background: var(--c-ember-soft) !important;
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] .empd-stat--ok {
background: var(--c-green-soft) !important;
color: var(--c-green-ink) !important;
}
[data-theme="dark"] .empd-stat--neutral {
background: var(--surface-3) !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .empd-card {
background: var(--surface-1) !important;
border: 1px solid var(--line-soft) !important;
box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] .empd-card:hover {
border-color: var(--line-strong) !important;
box-shadow: var(--shadow-card), 0 4px 16px rgba(0, 0, 0, .25) !important;
}
[data-theme="dark"] .empd-rail {
background: var(--ink-disabled) !important;
}
[data-theme="dark"] .empd-card.is-pagado {
background: rgba(79, 190, 122, .04) !important;
border-color: var(--c-green-line) !important;
}
[data-theme="dark"] .empd-card.is-pagado .empd-num,
[data-theme="dark"] .empd-card.is-pagado .empd-monto-val {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .empd-card.is-anulado .empd-num {
color: var(--ink-disabled) !important;
}
[data-theme="dark"] .empd-card.is-vencido {
background: linear-gradient(90deg, var(--c-red-soft) 0%, var(--surface-1) 30%) !important;
border-color: var(--c-red-line) !important;
}
[data-theme="dark"] .empd-num {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .empd-date {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .empd-items {
border-left: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .empd-items-count,
[data-theme="dark"] .empd-items-qty {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .empd-item {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .empd-item-qty {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .empd-item-unit {
color: var(--ink-disabled) !important;
}
[data-theme="dark"] .empd-item-name {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .empd-item-more {
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] .empd-items-empty {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .empd-meta {
border-left: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .empd-monto-lbl {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .empd-monto-val {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .empd-saldo {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .empd-saldo strong {
color: var(--c-red-ink) !important;
}
[data-theme="dark"] .empd-progress {
background: var(--surface-3) !important;
}
[data-theme="dark"] .empd-progress-fill {
background: linear-gradient(90deg, var(--c-green), #6AD088) !important;
}
[data-theme="dark"] .empd-saldado-stamp {
background: var(--c-green-soft) !important;
border: 1px solid var(--c-green-line) !important;
color: var(--c-green-ink) !important;
}
[data-theme="dark"] .empd-venc-tag--danger {
background: var(--c-red-soft) !important;
color: var(--c-red-ink) !important;
}
[data-theme="dark"] .empd-venc-tag--warn {
background: var(--c-amber-soft) !important;
color: var(--c-amber-ink) !important;
}
[data-theme="dark"] .empd-venc-tag--amber {
background: var(--c-ember-soft) !important;
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] .empd-venc-tag--ok {
background: var(--surface-3) !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .empd-venc-plain {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .empd-actions {
border-left: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .empd-act {
background: transparent !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .empd-act:hover {
background: var(--surface-3) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .empd-act--primary:hover {
background: var(--c-ember-soft) !important;
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] .empd-act--danger:hover {
background: var(--c-red-soft) !important;
color: var(--c-red-ink) !important;
}
/* ══ PDV MODAL (Detalle Pedido) ══ */
[data-theme="dark"] .pdv-overlay {
background: var(--surface-overlay) !important;
}
[data-theme="dark"] .pdv-modal {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
box-shadow: var(--shadow-modal) !important;
}
[data-theme="dark"] .pdv-head {
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .pdv-eyebrow {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .pdv-title {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .pdv-close {
background: var(--surface-3) !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .pdv-close:hover {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .pdv-badge--warn,
[data-theme="dark"] .pdv-badge--amber {
background: var(--c-amber-soft) !important;
color: var(--c-amber-ink) !important;
}
[data-theme="dark"] .pdv-badge--ok {
background: var(--c-green-soft) !important;
color: var(--c-green-ink) !important;
}
[data-theme="dark"] .pdv-badge--danger {
background: var(--c-red-soft) !important;
color: var(--c-red-ink) !important;
}
[data-theme="dark"] .pdv-badge--neutral {
background: var(--surface-3) !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .pdv-meta-grid {
background: var(--surface-3) !important;
}
[data-theme="dark"] .pdv-meta-lbl {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .pdv-meta-val {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .pdv-meta-danger {
color: var(--c-red-ink) !important;
}
[data-theme="dark"] .pdv-sec-lbl {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .pdv-items {
background: var(--line-soft) !important;
}
[data-theme="dark"] .pdv-item {
background: var(--surface-1) !important;
}
[data-theme="dark"] .pdv-item-name {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .pdv-item-meta {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .pdv-item-sub {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .pdv-empty {
background: var(--surface-3) !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .pdv-totales {
background: var(--surface-3) !important;
}
[data-theme="dark"] .pdv-tot-lbl {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .pdv-tot-val {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .pdv-tot-discount {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] .pdv-tot-final {
border-top: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .pdv-tot-final .pdv-tot-lbl {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .pdv-tot-final .pdv-tot-val {
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] .pdv-tot-pagado .pdv-tot-val {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] .pdv-tot-saldo .pdv-tot-val {
color: var(--c-red-ink) !important;
}
[data-theme="dark"] .pdv-pagos {
background: var(--line-soft) !important;
}
[data-theme="dark"] .pdv-pago-row {
background: var(--surface-1) !important;
}
[data-theme="dark"] .pdv-pago-fecha {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .pdv-pago-medio {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .pdv-caja-tag {
background: var(--c-green-soft) !important;
color: var(--c-green-ink) !important;
}
[data-theme="dark"] .pdv-pago-monto {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] .pdv-obs {
background: var(--surface-3) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .pdv-foot {
background: var(--surface-1) !important;
border-top: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .pdv-btn-ghost {
background: transparent !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .pdv-btn-ghost:hover {
background: var(--surface-3) !important;
border-color: var(--line-strong) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .pdv-btn-prime {
background: var(--grad-cta) !important;
color: var(--ink-primary) !important;
box-shadow: var(--cta-highlight), var(--cta-shadow) !important;
}
[data-theme="dark"] .pdv-btn-prime:hover {
background: var(--grad-cta-hover) !important;
}
/* ══ PE MODAL (Pedido Empresa: search + dropdown + cart) ══ */
[data-theme="dark"] .pe-emp-search-wrap input,
[data-theme="dark"] .pe-prod-search-wrap input {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .pe-emp-search-wrap input:focus,
[data-theme="dark"] .pe-prod-search-wrap input:focus {
background: var(--surface-4) !important;
border-color: var(--c-ember-line) !important;
box-shadow: 0 0 0 3px var(--c-ember-soft) !important;
}
[data-theme="dark"] .pe-emp-search-wrap svg,
[data-theme="dark"] .pe-prod-search-wrap svg {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .pe-emp-dropdown,
[data-theme="dark"] .pe-prod-dropdown {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
box-shadow: var(--shadow-popover) !important;
}
[data-theme="dark"] .pe-dd-item {
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .pe-dd-item:hover {
background: var(--surface-4) !important;
}
[data-theme="dark"] .pe-dd-razon {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .pe-dd-meta {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .pe-dd-meta em {
color: var(--c-ember-ink) !important;
}
[data-theme="dark"] .pe-emp-selected {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .pe-emp-sel-razon {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .pe-emp-sel-meta {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .pe-emp-sel-change {
background: transparent !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .pe-emp-sel-change:hover {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .pe-cart-empty {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .pe-cart-empty svg {
color: var(--ink-disabled) !important;
}
[data-theme="dark"] .pe-cart-table thead tr {
background: var(--surface-3) !important;
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .pe-cart-table th {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .pe-cart-table td {
border-bottom: 1px solid var(--line-soft) !important;
color: var(--ink-primary) !important;
}
/* ══ PP MODAL (Pago Empresa) ══ */
[data-theme="dark"] .pp-emp-card {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .pp-emp-razon {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .pp-emp-deuda-lbl {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .pp-emp-deuda-val {
color: var(--c-amber-ink) !important;
}
[data-theme="dark"] .pp-modo-btn {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .pp-modo-btn:hover {
background: var(--surface-3) !important;
border-color: var(--line-strong) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .pp-modo-btn.active {
background: var(--c-green-soft) !important;
border-color: var(--c-green-line) !important;
color: var(--c-green-ink) !important;
}
[data-theme="dark"] .pp-modo-btn.active em {
color: rgba(79, 190, 122, .65) !important;
}
[data-theme="dark"] .pp-preview-wrap {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .pp-preview-empty {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .pp-preview-row {
border-bottom: 1px solid var(--line-soft) !important;
}
[data-theme="dark"] .pp-preview-num {
color: var(--ink-primary) !important;
}
[data-theme="dark"] .pp-preview-saldo-prev {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .pp-preview-saldo-new {
color: var(--c-amber-ink) !important;
}
[data-theme="dark"] .pp-preview-saldo-new.pp-saldo-zero {
color: var(--c-green-ink) !important;
}
[data-theme="dark"] .pp-preview-badge-ok {
background: var(--c-green-soft) !important;
color: var(--c-green-ink) !important;
}
[data-theme="dark"] .pp-preview-aplicar {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .pp-preview-hint {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .pp-preview-sobrante {
color: var(--c-amber-ink) !important;
}
[data-theme="dark"] .pp-preview-cuenta {
background: var(--c-green-soft) !important;
border: 1px solid var(--c-green-line) !important;
}
[data-theme="dark"] .pp-preview-lbl,
[data-theme="dark"] .pp-preview-amt {
color: var(--c-green-ink) !important;
}
/* PP caja toggle (Impactar caja Sí/No) */
[data-theme="dark"] .pp-caja-btn {
background: var(--surface-2) !important;
border: 1px solid var(--line-soft) !important;
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .pp-caja-btn:hover {
background: var(--surface-3) !important;
border-color: var(--line-strong) !important;
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .pp-caja-btn.active[data-caja="si"] {
background: var(--c-green-soft) !important;
border-color: var(--c-green-line) !important;
color: var(--c-green-ink) !important;
}
[data-theme="dark"] .pp-caja-btn.active[data-caja="si"] em {
color: rgba(79, 190, 122, .65) !important;
}
[data-theme="dark"] .pp-caja-btn.active[data-caja="no"] {
background: var(--surface-3) !important;
border-color: var(--line-strong) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .pp-caja-btn.active[data-caja="no"] em {
color: var(--ink-tertiary) !important;
}
/* ═══════════════════════════════════════════════════════════════════
v7.95.21 · TOPBAR UNIFIED SEARCH + SELECTS
Replica del estilo de Vencimientos (.v3-tb-search) en TODAS las
barras de búsqueda y selects del topbar. Override por encima de
todos los estilos legacy.
Specs (canónica Vencimientos):
- Search/select height: 30px
- Background: rgba(255,255,255,.72) (semi-transparente blanco)
- Border: 1px solid rgba(191,180,170,.50) (warm tan)
- Border-radius: 7px
- Font: var(--sans) 11.5px 500 letter-spacing -0.005em
- Color: #1A1410 (ink)
- Focus: bg #FFFFFF, border-color rgba(191,180,170,.85)
- Placeholder: rgba(26,20,16,.40)
═══════════════════════════════════════════════════════════════════ */
/* ── WRAPPERS (containers de search + icon) ── */
.topbar .tb-action-zone .sk-search-wrap,
.topbar .tb-action-zone .mv2-search-wrap,
.topbar .tb-action-zone .v3-tb-search,
.topbar .tb-action-zone .pr-search-wrap,
.topbar .tb-action-zone .cli-master-bar {
position: relative !important;
flex: 0 1 220px !important;
max-width: 220px !important;
min-width: 160px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
height: auto !important;
}
/* ── INPUTS de search ── */
.topbar .tb-action-zone .sk-search-input,
.topbar .tb-action-zone .mv2-search-input,
.topbar .tb-action-zone .v3-tb-search-input,
.topbar .tb-action-zone .pr-search-input,
.topbar .tb-action-zone .cli-master-bar input,
.topbar .tb-action-zone input[type="text"],
.topbar .tb-action-zone input[type="search"] {
width: 100% !important;
height: 30px !important;
padding: 0 28px 0 26px !important;
background: rgba(255, 255, 255, .72) !important;
border: 1px solid rgba(191, 180, 170, .50) !important;
border-radius: 7px !important;
font-family: var(--sans, "Inter Tight", sans-serif) !important;
font-size: 11.5px !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
color: #1A1410 !important;
outline: none !important;
box-shadow: none !important;
transition: background .13s, border-color .13s !important;
margin: 0 !important;
}
/* Inputs sin icon dentro del wrap → ajustar padding */
.topbar .tb-action-zone .cli-master-bar input {
padding: 0 12px !important;
}
/* Focus state — blanco puro + border más visible */
.topbar .tb-action-zone .sk-search-input:focus,
.topbar .tb-action-zone .mv2-search-input:focus,
.topbar .tb-action-zone .v3-tb-search-input:focus,
.topbar .tb-action-zone .pr-search-input:focus,
.topbar .tb-action-zone .cli-master-bar input:focus,
.topbar .tb-action-zone input[type="text"]:focus,
.topbar .tb-action-zone input[type="search"]:focus {
background: #FFFFFF !important;
border-color: rgba(191, 180, 170, .85) !important;
box-shadow: none !important;
}
/* Focus-within del wrap (reset — los focus visibles están en el input, no en el wrap) */
.topbar .tb-action-zone .sk-search-wrap:focus-within,
.topbar .tb-action-zone .mv2-search-wrap:focus-within,
.topbar .tb-action-zone .v3-tb-search:focus-within,
.topbar .tb-action-zone .pr-search-wrap:focus-within,
.topbar .tb-action-zone .cli-master-bar:focus-within {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Placeholder */
.topbar .tb-action-zone .sk-search-input::placeholder,
.topbar .tb-action-zone .mv2-search-input::placeholder,
.topbar .tb-action-zone .v3-tb-search-input::placeholder,
.topbar .tb-action-zone .pr-search-input::placeholder,
.topbar .tb-action-zone .cli-master-bar input::placeholder,
.topbar .tb-action-zone input[type="text"]::placeholder,
.topbar .tb-action-zone input[type="search"]::placeholder {
color: rgba(26, 20, 16, .40) !important;
}
/* ── ICONS de search (lupa) ── */
.topbar .tb-action-zone .sk-search-ico,
.topbar .tb-action-zone .mv2-search-ico,
.topbar .tb-action-zone .v3-tb-search-ico,
.topbar .tb-action-zone .pr-search-wrap > svg,
.topbar .tb-action-zone .cli-master-bar > svg {
position: absolute !important;
left: 9px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 12px !important;
height: 12px !important;
color: rgba(26, 20, 16, .42) !important;
pointer-events: none !important;
}
/* ── CLEAR BUTTON (botón ✕) ── */
.topbar .tb-action-zone .sk-search-clr,
.topbar .tb-action-zone .mv2-search-clr,
.topbar .tb-action-zone .v3-tb-search-clear,
.topbar .tb-action-zone .pr-search-clr,
.topbar .tb-action-zone .emp-search-clr {
position: absolute !important;
right: 6px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 18px !important;
height: 18px !important;
background: transparent !important;
border: none !important;
border-radius: 50% !important;
color: rgba(26, 20, 16, .50) !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
pointer-events: auto !important;
transition: background .14s, color .14s !important;
}
.topbar .tb-action-zone .sk-search-clr:hover,
.topbar .tb-action-zone .mv2-search-clr:hover,
.topbar .tb-action-zone .v3-tb-search-clear:hover,
.topbar .tb-action-zone .pr-search-clr:hover,
.topbar .tb-action-zone .emp-search-clr:hover {
background: rgba(26, 20, 16, .08) !important;
color: #1A1410 !important;
}
/* ── SELECTS NATIVOS — chevron custom via background-image ── */
.topbar .tb-action-zone select,
.topbar .tb-action-zone .pr-filter-select,
.topbar .tb-action-zone .sk-locf-sel,
.topbar .tb-action-zone .sk-cat-select,
.topbar .tb-action-zone select.sk-filter-select {
height: 30px !important;
padding: 0 28px 0 10px !important;
background-color: rgba(255, 255, 255, .72) !important;
border: 1px solid rgba(191, 180, 170, .50) !important;
border-radius: 7px !important;
font-family: var(--sans, "Inter Tight", sans-serif) !important;
font-size: 11.5px !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
color: #1A1410 !important;
outline: none !important;
box-shadow: none !important;
cursor: pointer !important;
transition: background-color .13s, border-color .13s !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 9px center !important;
}
.topbar .tb-action-zone select:hover,
.topbar .tb-action-zone .pr-filter-select:hover,
.topbar .tb-action-zone .sk-locf-sel:hover {
background-color: #FFFFFF !important;
border-color: rgba(191, 180, 170, .70) !important;
}
.topbar .tb-action-zone select:focus,
.topbar .tb-action-zone .pr-filter-select:focus {
background-color: #FFFFFF !important;
border-color: rgba(191, 180, 170, .85) !important;
}
/* ── DROPDOWN BUTTONS CUSTOM (con SVG chevron interno propio) ──
.mv2-dd-btn / .v3-dd-btn / .tb-collapse-toggle (Stock)
IMPORTANTE: NO usar background-image chevron — ya tienen SVG interno.
NO usar padding extra a la derecha — el chevron interno ocupa su lugar.
Preservar el ::before icon de mv2-dd-btn (no pisar background). */
.topbar .tb-action-zone .mv2-dd-btn,
.topbar .tb-action-zone .v3-dd-btn,
.topbar .tb-action-zone .tb-collapse-toggle {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
height: 30px !important;
padding: 0 10px !important;
background-color: rgba(255, 255, 255, .72) !important;
background-image: none !important;
border: 1px solid rgba(191, 180, 170, .50) !important;
border-radius: 7px !important;
font-family: var(--sans, "Inter Tight", sans-serif) !important;
font-size: 11.5px !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
color: #1A1410 !important;
outline: none !important;
box-shadow: none !important;
cursor: pointer !important;
white-space: nowrap !important;
transition: background-color .13s, border-color .13s, color .13s !important;
}
.topbar .tb-action-zone .mv2-dd-btn:hover,
.topbar .tb-action-zone .v3-dd-btn:hover,
.topbar .tb-action-zone .tb-collapse-toggle:hover {
background-color: #FFFFFF !important;
border-color: rgba(191, 180, 170, .70) !important;
color: #1A1410 !important;
}
/* Estado open/active del custom dropdown button */
.topbar .tb-action-zone .mv2-dropdown.open .mv2-dd-btn,
.topbar .tb-action-zone .v3-dropdown.is-open .v3-dd-btn,
.topbar .tb-action-zone .tb-cat-wrapper.is-open .tb-collapse-toggle {
background-color: #FFFFFF !important;
border-color: rgba(191, 180, 170, .85) !important;
color: #1A1410 !important;
}
/* Text/labels INSIDE the custom dropdown buttons — asegurar visibilidad */
.topbar .tb-action-zone .mv2-dd-btn .mv2-dd-label,
.topbar .tb-action-zone .mv2-dd-btn .mv2-dd-value,
.topbar .tb-action-zone .v3-dd-btn .v3-dd-value,
.topbar .tb-action-zone .v3-dd-btn .v3-dd-eyebrow,
.topbar .tb-action-zone .tb-collapse-toggle .tb-ct-label {
color: inherit !important;
font-size: 11.5px !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
}
/* SVG chevron interno de dropdowns custom — pequeño, ink soft */
.topbar .tb-action-zone .mv2-dd-btn .mv2-dd-chev,
.topbar .tb-action-zone .v3-dd-btn .v3-dd-chevron,
.topbar .tb-action-zone .tb-collapse-toggle .tb-ct-chev {
width: 10px !important;
height: 10px !important;
opacity: .55 !important;
flex-shrink: 0 !important;
transition: transform .2s cubic-bezier(.16, 1, .3, 1) !important;
}
.topbar .tb-action-zone .mv2-dropdown.open .mv2-dd-chev,
.topbar .tb-action-zone .v3-dropdown.is-open .v3-dd-chevron,
.topbar .tb-action-zone .tb-cat-wrapper.is-open .tb-ct-chev {
transform: rotate(180deg) !important;
}
/* SVG icons (no chevron) dentro de los dropdown buttons — primer SVG hijo */
.topbar .tb-action-zone .tb-collapse-toggle > svg:not(.tb-ct-chev) {
width: 12px !important;
height: 12px !important;
flex-shrink: 0 !important;
color: rgba(26, 20, 16, .55) !important;
opacity: 1 !important;
}
/* Wrapper sk-sucursal-wrap (Stock local filter — wrapper que tiene un select interno) */
.topbar .tb-action-zone .sk-sucursal-wrap {
height: 30px !important;
padding: 0 10px !important;
background: rgba(255, 255, 255, .72) !important;
border: 1px solid rgba(191, 180, 170, .50) !important;
border-radius: 7px !important;
transition: background .13s, border-color .13s !important;
}
.topbar .tb-action-zone .sk-sucursal-wrap:hover {
background: #FFFFFF !important;
border-color: rgba(191, 180, 170, .70) !important;
}
/* Cuando el wrap envuelve a un tb-sd-wrapper (custom dropdown construido por LXTopbar), reset */
.topbar .tb-action-zone .sk-sucursal-wrap:has(.tb-sd-wrapper) {
background: transparent !important;
border: none !important;
padding: 0 !important;
height: auto !important;
}
/* ═══════════════════════════════════════════════════════════════════
v7.95.22 · DROPDOWN PANELS (menús que se despliegan)
.mv2-dd-menu / .v3-dd-panel / .tb-cat-panel (Stock) / .tb-sd-panel
═══════════════════════════════════════════════════════════════════ */
.topbar .tb-action-zone .mv2-dd-menu,
.topbar .tb-action-zone .v3-dd-panel,
.tb-cat-wrapper .tb-cat-panel,
.tb-sd-wrapper .tb-sd-panel {
background: #FFFFFF !important;
border: 1px solid rgba(191, 180, 170, .50) !important;
border-radius: 9px !important;
box-shadow:
0 0 0 1px rgba(26, 20, 16, .02),
0 8px 24px rgba(26, 20, 16, .10),
0 2px 6px rgba(26, 20, 16, .05) !important;
padding: 5px !important;
min-width: 180px !important;
}
/* Items dentro de los paneles — soft override: solo colores + radius unificados.
No fuerzo height/width/padding agresivo para no romper layout de items con dots
semánticos internos (v3-dd-opt-dot, mv2-dd-item-dot, etc). */
.topbar .tb-action-zone .mv2-dd-item,
.topbar .tb-action-zone .v3-dd-opt,
.tb-cat-wrapper .tb-cat-panel .sk-fpill,
.tb-sd-wrapper .tb-sd-panel .tb-sd-item {
background: transparent !important;
border-radius: 6px !important;
color: rgba(26, 20, 16, .72) !important;
text-transform: none !important;
box-shadow: none !important;
transition: background .12s, color .12s !important;
}
.topbar .tb-action-zone .mv2-dd-item:hover,
.topbar .tb-action-zone .v3-dd-opt:hover,
.tb-cat-wrapper .tb-cat-panel .sk-fpill:hover,
.tb-sd-wrapper .tb-sd-panel .tb-sd-item:hover {
background: rgba(26, 20, 16, .045) !important;
color: #1A1410 !important;
}
.topbar .tb-action-zone .mv2-dd-item.on,
.topbar .tb-action-zone .v3-dd-opt.is-active,
.tb-cat-wrapper .tb-cat-panel .sk-fpill.active,
.tb-sd-wrapper .tb-sd-panel .tb-sd-item.active {
background: rgba(26, 20, 16, .06) !important;
color: #1A1410 !important;
font-weight: 600 !important;
}
/* ─── DARK MODE — preservar tokens dark del sistema (v7.95.1) ─── */
[data-theme="dark"] .topbar .tb-action-zone .sk-search-input,
[data-theme="dark"] .topbar .tb-action-zone .mv2-search-input,
[data-theme="dark"] .topbar .tb-action-zone .v3-tb-search-input,
[data-theme="dark"] .topbar .tb-action-zone .pr-search-input,
[data-theme="dark"] .topbar .tb-action-zone .cli-master-bar input,
[data-theme="dark"] .topbar .tb-action-zone input[type="text"],
[data-theme="dark"] .topbar .tb-action-zone input[type="search"],
[data-theme="dark"] .topbar .tb-action-zone select,
[data-theme="dark"] .topbar .tb-action-zone .pr-filter-select,
[data-theme="dark"] .topbar .tb-action-zone .mv2-dd-btn,
[data-theme="dark"] .topbar .tb-action-zone .v3-dd-btn,
[data-theme="dark"] .topbar .tb-action-zone .sk-sucursal-wrap {
background-color: var(--controls-bg) !important;
border-color: var(--controls-border) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .topbar .tb-action-zone .sk-search-input:focus,
[data-theme="dark"] .topbar .tb-action-zone .mv2-search-input:focus,
[data-theme="dark"] .topbar .tb-action-zone .v3-tb-search-input:focus,
[data-theme="dark"] .topbar .tb-action-zone .pr-search-input:focus,
[data-theme="dark"] .topbar .tb-action-zone .cli-master-bar input:focus,
[data-theme="dark"] .topbar .tb-action-zone input[type="text"]:focus,
[data-theme="dark"] .topbar .tb-action-zone input[type="search"]:focus,
[data-theme="dark"] .topbar .tb-action-zone select:hover,
[data-theme="dark"] .topbar .tb-action-zone select:focus,
[data-theme="dark"] .topbar .tb-action-zone .pr-filter-select:hover,
[data-theme="dark"] .topbar .tb-action-zone .pr-filter-select:focus,
[data-theme="dark"] .topbar .tb-action-zone .mv2-dd-btn:hover,
[data-theme="dark"] .topbar .tb-action-zone .v3-dd-btn:hover,
[data-theme="dark"] .topbar .tb-action-zone .sk-sucursal-wrap:hover {
background-color: var(--controls-bg-hover) !important;
border-color: var(--line-strong) !important;
}
[data-theme="dark"] .topbar .tb-action-zone .sk-search-input::placeholder,
[data-theme="dark"] .topbar .tb-action-zone .mv2-search-input::placeholder,
[data-theme="dark"] .topbar .tb-action-zone .v3-tb-search-input::placeholder,
[data-theme="dark"] .topbar .tb-action-zone .pr-search-input::placeholder,
[data-theme="dark"] .topbar .tb-action-zone .cli-master-bar input::placeholder,
[data-theme="dark"] .topbar .tb-action-zone input[type="text"]::placeholder,
[data-theme="dark"] .topbar .tb-action-zone input[type="search"]::placeholder {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .topbar .tb-action-zone .sk-search-ico,
[data-theme="dark"] .topbar .tb-action-zone .mv2-search-ico,
[data-theme="dark"] .topbar .tb-action-zone .v3-tb-search-ico,
[data-theme="dark"] .topbar .tb-action-zone .pr-search-wrap > svg,
[data-theme="dark"] .topbar .tb-action-zone .cli-master-bar > svg {
color: var(--ink-tertiary) !important;
}
/* Custom chevron en select para dark (ink-primary stroke) */
[data-theme="dark"] .topbar .tb-action-zone select,
[data-theme="dark"] .topbar .tb-action-zone .pr-filter-select,
[data-theme="dark"] .topbar .tb-action-zone .sk-cat-select,
[data-theme="dark"] .topbar .tb-action-zone select.sk-filter-select {
background-image: url("data:image/svg+xml;utf8,") !important;
}
[data-theme="dark"] .topbar .tb-action-zone .sk-search-clr,
[data-theme="dark"] .topbar .tb-action-zone .mv2-search-clr,
[data-theme="dark"] .topbar .tb-action-zone .v3-tb-search-clear,
[data-theme="dark"] .topbar .tb-action-zone .pr-search-clr,
[data-theme="dark"] .topbar .tb-action-zone .emp-search-clr {
color: var(--ink-tertiary) !important;
}
[data-theme="dark"] .topbar .tb-action-zone .sk-search-clr:hover,
[data-theme="dark"] .topbar .tb-action-zone .mv2-search-clr:hover,
[data-theme="dark"] .topbar .tb-action-zone .v3-tb-search-clear:hover,
[data-theme="dark"] .topbar .tb-action-zone .pr-search-clr:hover,
[data-theme="dark"] .topbar .tb-action-zone .emp-search-clr:hover {
background: var(--surface-3) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .topbar .tb-action-zone .mv2-dropdown.open .mv2-dd-btn,
[data-theme="dark"] .topbar .tb-action-zone .v3-dropdown.is-open .v3-dd-btn,
[data-theme="dark"] .topbar .tb-action-zone .tb-cat-wrapper.is-open .tb-collapse-toggle {
background-color: var(--controls-bg-active) !important;
border-color: var(--line-strong) !important;
color: var(--ink-primary) !important;
}
/* tb-collapse-toggle (Stock dropdown button) — dark */
[data-theme="dark"] .topbar .tb-action-zone .tb-collapse-toggle {
background-color: var(--controls-bg) !important;
border-color: var(--controls-border) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .topbar .tb-action-zone .tb-collapse-toggle:hover {
background-color: var(--controls-bg-hover) !important;
border-color: var(--line-strong) !important;
}
[data-theme="dark"] .topbar .tb-action-zone .tb-collapse-toggle > svg:not(.tb-ct-chev) {
color: var(--ink-tertiary) !important;
}
/* Text dentro de los dropdown buttons custom — dark */
[data-theme="dark"] .topbar .tb-action-zone .mv2-dd-btn .mv2-dd-label,
[data-theme="dark"] .topbar .tb-action-zone .mv2-dd-btn .mv2-dd-value,
[data-theme="dark"] .topbar .tb-action-zone .v3-dd-btn .v3-dd-value,
[data-theme="dark"] .topbar .tb-action-zone .v3-dd-btn .v3-dd-eyebrow,
[data-theme="dark"] .topbar .tb-action-zone .tb-collapse-toggle .tb-ct-label {
color: var(--ink-primary) !important;
}
/* SVG chevrons en dropdown buttons custom — dark */
[data-theme="dark"] .topbar .tb-action-zone .mv2-dd-btn .mv2-dd-chev,
[data-theme="dark"] .topbar .tb-action-zone .v3-dd-btn .v3-dd-chevron,
[data-theme="dark"] .topbar .tb-action-zone .tb-collapse-toggle .tb-ct-chev {
color: var(--ink-secondary) !important;
}
/* ─── DROPDOWN PANELS (menús) — dark ─── */
[data-theme="dark"] .topbar .tb-action-zone .mv2-dd-menu,
[data-theme="dark"] .topbar .tb-action-zone .v3-dd-panel,
[data-theme="dark"] .tb-cat-wrapper .tb-cat-panel,
[data-theme="dark"] .tb-sd-wrapper .tb-sd-panel {
background: var(--surface-3) !important;
border: 1px solid var(--line-soft) !important;
box-shadow: var(--shadow-popover) !important;
}
[data-theme="dark"] .topbar .tb-action-zone .mv2-dd-item,
[data-theme="dark"] .topbar .tb-action-zone .v3-dd-opt,
[data-theme="dark"] .tb-cat-wrapper .tb-cat-panel .sk-fpill,
[data-theme="dark"] .tb-sd-wrapper .tb-sd-panel .tb-sd-item {
color: var(--ink-secondary) !important;
}
[data-theme="dark"] .topbar .tb-action-zone .mv2-dd-item:hover,
[data-theme="dark"] .topbar .tb-action-zone .v3-dd-opt:hover,
[data-theme="dark"] .tb-cat-wrapper .tb-cat-panel .sk-fpill:hover,
[data-theme="dark"] .tb-sd-wrapper .tb-sd-panel .tb-sd-item:hover {
background: var(--surface-4) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] .topbar .tb-action-zone .mv2-dd-item.on,
[data-theme="dark"] .topbar .tb-action-zone .v3-dd-opt.is-active,
[data-theme="dark"] .tb-cat-wrapper .tb-cat-panel .sk-fpill.active,
[data-theme="dark"] .tb-sd-wrapper .tb-sd-panel .tb-sd-item.active {
background: var(--c-ember-soft) !important;
color: var(--ink-primary) !important;
}
/* ═══════════════════════════════════════════════════════════════════
v7.96.2 · RESTAURACIÓN VENCIMIENTOS 2-COL LAYOUT (originalmente v7.27.0)
Bloque base que se borró accidentalmente en v7.95.20.
Restaurado desde la-estancia-black-v7.25.0.css.v7.95.19.bak.
═══════════════════════════════════════════════════════════════════ */
/* ═══ v7.27.0 — VENCIMIENTOS 2-COLUMN LAYOUT ═══ */
/* ── 2-Column Layout ── */
#page-vencimientos .v-layout {
display: flex;
gap: 20px;
align-items: flex-start;
}
#page-vencimientos .v-panel {
width: 280px;
min-width: 280px;
position: sticky;
top: 16px;
align-self: flex-start;
display: flex;
flex-direction: column;
gap: 12px;
}
#page-vencimientos .v-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
/* ── KPI Cards (stacked in panel) ── */
#page-vencimientos .v-kpis {
display: flex;
flex-direction: column;
gap: 12px;
}
#page-vencimientos .v-kpi {
background: #FFFFFF;
border: 1px solid rgba(191,180,170,.22);
border-radius: 9px;
padding: 16px 18px 14px;
box-shadow: 0 1px 2px rgba(32,24,18,.02), 0 8px 24px rgba(32,24,18,.04);
}
#page-vencimientos .v-kpi:nth-child(1) { animation: lx-fade-up var(--lx-d-slow,420ms) var(--lx-curve-enter,cubic-bezier(.16,1,.3,1)) 280ms both; }
#page-vencimientos .v-kpi:nth-child(2) { animation: lx-fade-up var(--lx-d-slow,420ms) var(--lx-curve-enter,cubic-bezier(.16,1,.3,1)) 360ms both; }
#page-vencimientos .v-kpi:nth-child(3) { animation: lx-fade-up var(--lx-d-slow,420ms) var(--lx-curve-enter,cubic-bezier(.16,1,.3,1)) 440ms both; }
#page-vencimientos .v-kpi-eyebrow {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(26,20,16,.42);
margin-bottom: 8px;
}
#page-vencimientos .v-kpi-num {
font-family: var(--serif);
font-weight: 700;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums lining-nums;
line-height: 1;
margin-bottom: 6px;
color: #1A1410;
}
#page-vencimientos .v-kpi-num-lg { font-size: 30px; }
#page-vencimientos .v-num-danger { color: #E05252; }
#page-vencimientos .v-kpi-sub {
font-family: var(--sans);
font-size: 11.5px;
font-weight: 400;
color: rgba(26,20,16,.42);
margin-bottom: 6px;
}
/* ── Stacked Bar (Crítico) ── */
#page-vencimientos .v-stacked-bar {
display: flex;
height: 8px;
border-radius: 4px;
overflow: hidden;
margin: 10px 0 8px;
background: rgba(26,20,16,.04);
}
#page-vencimientos .v-stacked-seg { height: 100%; transition: width .6s cubic-bezier(.16,1,.3,1); }
#page-vencimientos .v-seg-danger { background: #E05252; border-radius: 4px 0 0 4px; }
#page-vencimientos .v-seg-amber { background: #D4882A; border-radius: 0 4px 4px 0; }
#page-vencimientos .v-stacked-legend {
display: flex;
gap: 10px;
margin-top: 2px;
flex-wrap: wrap;
}
#page-vencimientos .v-stacked-legend-item {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: .06em;
color: rgba(26,20,16,.55);
}
#page-vencimientos .v-stacked-legend-item::before {
content: "";
width: 6px; height: 6px;
border-radius: 2px;
flex-shrink: 0;
}
#page-vencimientos .seg-danger::before { background: #E05252; }
#page-vencimientos .seg-amber::before { background: #D4882A; }
/* ── Day Chart (Próximos 7 días) ── */
#page-vencimientos .v-day-chart {
display: flex;
align-items: flex-end;
gap: 6px;
height: 48px;
margin-top: 8px;
}
#page-vencimientos .v-day-col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
height: 100%;
justify-content: flex-end;
}
#page-vencimientos .v-day-bar-wrap {
flex: 1;
width: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
}
#page-vencimientos .v-day-bar {
width: 100%;
max-width: 28px;
border-radius: 3px 3px 0 0;
min-height: 2px;
transform-origin: bottom;
animation: lx-bar-rise var(--lx-d-slow,420ms) var(--lx-curve-spring,cubic-bezier(.34,1.56,.64,1)) both;
transform: scaleY(0);
position: relative;
}
#page-vencimientos .v-day-bar-count {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
color: rgba(26,20,16,.55);
opacity: 0;
animation: lx-fade-in .28s ease forwards;
}
#page-vencimientos .v-day-label {
font-family: var(--mono);
font-size: 8px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(26,20,16,.32);
white-space: nowrap;
}
#page-vencimientos .v-day-label.v-today {
color: #E8663A;
font-weight: 700;
}
/* day-bar stagger */
#page-vencimientos .v-day-col:nth-child(1) .v-day-bar { animation-delay: 720ms; }
#page-vencimientos .v-day-col:nth-child(2) .v-day-bar { animation-delay: 750ms; }
#page-vencimientos .v-day-col:nth-child(3) .v-day-bar { animation-delay: 780ms; }
#page-vencimientos .v-day-col:nth-child(4) .v-day-bar { animation-delay: 810ms; }
#page-vencimientos .v-day-col:nth-child(5) .v-day-bar { animation-delay: 840ms; }
#page-vencimientos .v-day-col:nth-child(6) .v-day-bar { animation-delay: 870ms; }
#page-vencimientos .v-day-col:nth-child(7) .v-day-bar { animation-delay: 900ms; }
#page-vencimientos .v-day-col:nth-child(1) .v-day-bar-count { animation-delay: 920ms; }
#page-vencimientos .v-day-col:nth-child(2) .v-day-bar-count { animation-delay: 950ms; }
#page-vencimientos .v-day-col:nth-child(3) .v-day-bar-count { animation-delay: 980ms; }
#page-vencimientos .v-day-col:nth-child(4) .v-day-bar-count { animation-delay: 1010ms; }
#page-vencimientos .v-day-col:nth-child(5) .v-day-bar-count { animation-delay: 1040ms; }
#page-vencimientos .v-day-col:nth-child(6) .v-day-bar-count { animation-delay: 1070ms; }
#page-vencimientos .v-day-col:nth-child(7) .v-day-bar-count { animation-delay: 1100ms; }
/* ── Progress Ring (Sin Controlar) ── */
#page-vencimientos .v-control-row {
display: flex;
align-items: center;
gap: 16px;
margin-top: 8px;
}
#page-vencimientos .v-ring-wrap {
position: relative;
width: 52px; height: 52px;
flex-shrink: 0;
}
#page-vencimientos .v-ring-wrap svg {
width: 52px; height: 52px;
transform: rotate(-90deg);
}
#page-vencimientos .v-ring-bg {
fill: none;
stroke: rgba(26,20,16,.06);
stroke-width: 5;
}
#page-vencimientos .v-ring-fill {
fill: none;
stroke-width: 5;
stroke-linecap: round;
stroke-dasharray: 138.23;
stroke-dashoffset: 138.23;
transition: stroke-dashoffset .8s cubic-bezier(.16,1,.3,1);
}
#page-vencimientos .v-ring-ok { stroke: #22A55A; }
#page-vencimientos .v-ring-amber { stroke: #D4882A; }
#page-vencimientos .v-ring-pct {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
color: #1A1410;
}
#page-vencimientos .v-control-detail {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
}
#page-vencimientos .v-control-label {
font-family: var(--sans);
font-size: 11.5px;
font-weight: 500;
color: rgba(26,20,16,.55);
}
#page-vencimientos .v-control-label strong {
font-weight: 700;
color: #1A1410;
}
#page-vencimientos .v-ctrl-warn strong { color: #D4882A; }
/* ── Sin Controlar Chips ── */
#page-vencimientos .v-nocontrol-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
#page-vencimientos .v3-sc-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: rgba(212,136,42,.06);
border: 1px solid rgba(212,136,42,.16);
border-radius: 6px;
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
color: #9a6520;
cursor: pointer;
transition: all .14s ease;
}
#page-vencimientos .v3-sc-chip:hover {
background: rgba(212,136,42,.12);
border-color: rgba(212,136,42,.28);
}
#page-vencimientos .v3-sc-chip-diff {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
}
/* ── Table Meta ── */
#page-vencimientos .v-table-meta {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 8px;
animation: lx-fade-up var(--lx-d-slow,420ms) var(--lx-curve-enter,cubic-bezier(.16,1,.3,1)) 560ms both;
}
#page-vencimientos .v-table-count {
font-family: var(--mono);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(26,20,16,.42);
}
/* ── Table Container ── */
#page-vencimientos .v-table-container {
background: #FFFFFF;
border: 1px solid rgba(191,180,170,.22);
border-radius: 9px;
box-shadow: 0 1px 2px rgba(32,24,18,.02), 0 8px 24px rgba(32,24,18,.04);
overflow: hidden;
animation: lx-fade-up var(--lx-d-slow,420ms) var(--lx-curve-enter,cubic-bezier(.16,1,.3,1)) 560ms both;
}
#page-vencimientos .v-table-scroll {
max-height: calc(100vh - 180px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(26,20,16,.12) transparent;
}
#page-vencimientos .v-table-scroll::-webkit-scrollbar { width: 6px; }
#page-vencimientos .v-table-scroll::-webkit-scrollbar-track { background: transparent; }
#page-vencimientos .v-table-scroll::-webkit-scrollbar-thumb { background: rgba(26,20,16,.12); border-radius: 3px; }
/* ── Table ── */
#page-vencimientos .v-table { width: 100%; border-collapse: collapse; }
#page-vencimientos .v-table thead th {
background: #f6f4f1;
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(26,20,16,.42);
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid rgba(26,20,16,.06);
position: sticky;
top: 0;
z-index: 2;
}
#page-vencimientos .v-table thead th:last-child { text-align: right; }
/* ── Group Rows ── */
#page-vencimientos .v-group-row td {
padding: 10px 16px 8px;
border-bottom: 1px solid rgba(26,20,16,.06);
background: #fdfcfb;
}
#page-vencimientos .v-group-label {
display: flex;
align-items: center;
gap: 8px;
}
#page-vencimientos .v-group-dot {
width: 6px; height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
#page-vencimientos .v-gdot-danger { background: #E05252; box-shadow: 0 0 0 3px rgba(224,82,82,.12); }
#page-vencimientos .v-gdot-amber { background: #D4882A; box-shadow: 0 0 0 3px rgba(212,136,42,.12); }
#page-vencimientos .v-gdot-blue { background: #5B7FD6; box-shadow: 0 0 0 3px rgba(91,127,214,.12); }
#page-vencimientos .v-gdot-neutral { background: rgba(26,20,16,.22); box-shadow: 0 0 0 3px rgba(26,20,16,.06); }
#page-vencimientos .v-gdot-green { background: #22A55A; box-shadow: 0 0 0 3px rgba(34,165,90,.12); }
#page-vencimientos .v-group-name {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(26,20,16,.55);
}
#page-vencimientos .v-group-count {
font-family: var(--mono);
font-size: 9px;
font-weight: 500;
letter-spacing: .06em;
color: rgba(26,20,16,.32);
}
#page-vencimientos .v-group-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
}
#page-vencimientos .v-resolve-all {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(224,82,82,.06);
border: 1px solid rgba(224,82,82,.18);
border-radius: 6px;
padding: 4px 10px;
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
color: #E05252;
cursor: pointer;
transition: all .14s ease;
}
#page-vencimientos .v-resolve-all:hover {
background: rgba(224,82,82,.12);
border-color: rgba(224,82,82,.30);
}
#page-vencimientos .v-group-chevron {
color: rgba(26,20,16,.32);
cursor: pointer;
transition: transform .28s cubic-bezier(.16,1,.3,1);
display: flex;
}
#page-vencimientos .v-group-chevron.v-chev-open { transform: rotate(180deg); }
/* ── Data Rows ── */
#page-vencimientos .v-table tbody tr.v-row { transition: background .14s ease; }
#page-vencimientos .v-table tbody tr.v-row:hover { background: rgba(26,20,16,.018); }
#page-vencimientos .v-table td {
padding: 13px 16px;
border-bottom: 1px solid rgba(26,20,16,.05);
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
vertical-align: middle;
}
#page-vencimientos .v-table td:last-child { text-align: right; }
/* Product cell */
#page-vencimientos .v-prod { display: flex; flex-direction: column; gap: 1px; }
#page-vencimientos .v-prod-name { font-weight: 600; color: #1A1410; font-size: 13px; }
#page-vencimientos .v-prod-cat {
font-family: var(--mono);
font-size: 9px;
font-weight: 500;
letter-spacing: .06em;
color: rgba(26,20,16,.42);
}
/* Lote */
#page-vencimientos .v-lote {
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
color: rgba(26,20,16,.55);
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
/* Quantity */
#page-vencimientos .v-qty {
font-family: var(--serif);
font-size: 15px;
font-weight: 600;
font-variant-numeric: tabular-nums lining-nums;
letter-spacing: -0.02em;
}
/* Date */
#page-vencimientos .v-date {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .03em;
color: rgba(26,20,16,.55);
}
/* Status badge */
#page-vencimientos .v-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 999px;
font-family: var(--mono);
font-size: 8.5px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
white-space: nowrap;
}
#page-vencimientos .v-badge-danger {
background: rgba(224,82,82,.08);
border: 1px solid rgba(224,82,82,.20);
color: #a83030;
}
#page-vencimientos .v-badge-danger::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #E05252; }
#page-vencimientos .v-badge-amber {
background: rgba(212,136,42,.08);
border: 1px solid rgba(212,136,42,.20);
color: #9a6520;
}
#page-vencimientos .v-badge-amber::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #D4882A; }
#page-vencimientos .v-badge-blue {
background: rgba(91,127,214,.08);
border: 1px solid rgba(91,127,214,.20);
color: #4a6ab8;
}
/* Local */
#page-vencimientos .v-local {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 22px;
padding: 0 6px;
border-radius: 5px;
border: 1px solid rgba(26,20,16,.08);
background: rgba(26,20,16,.05);
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: .04em;
color: rgba(26,20,16,.55);
}
#page-vencimientos .v-local.tag-l1 {
background: var(--c-blue-soft);
color: var(--c-blue-ink);
border-color: var(--c-blue-line);
}
#page-vencimientos .v-local.tag-l2 {
background: var(--c-plum-soft);
color: var(--c-plum-ink);
border-color: var(--c-plum-line);
}
/* ── Hover-only Actions ── */
#page-vencimientos .v-row-actions {
display: flex;
align-items: center;
gap: 6px;
justify-content: flex-end;
opacity: 0;
transition: opacity .14s ease;
}
#page-vencimientos .v-row:hover .v-row-actions { opacity: 1; }
/* ── "En buen estado" collapsed hint ── */
#page-vencimientos .v-bien-hint {
padding: 14px 16px;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: background .14s ease;
border-top: 1px solid rgba(26,20,16,.06);
}
#page-vencimientos .v-bien-hint:hover { background: rgba(26,20,16,.018); }
#page-vencimientos .v-bien-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #22A55A;
box-shadow: 0 0 0 3px rgba(34,165,90,.12);
}
#page-vencimientos .v-bien-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: #1a7a45;
}
#page-vencimientos .v-bien-count {
font-family: var(--mono);
font-size: 9px;
font-weight: 500;
letter-spacing: .06em;
color: rgba(26,20,16,.32);
}
#page-vencimientos .v-bien-expand {
margin-left: auto;
font-family: var(--sans);
font-size: 11px;
color: rgba(26,20,16,.32);
display: flex;
align-items: center;
gap: 4px;
}
/* ── Empty cell ── */
#page-vencimientos .v-empty-cell {
text-align: center;
padding: 32px 14px;
color: rgba(26,20,16,.42);
font-size: 13px;
}
#page-vencimientos .vc2-table-meta { display: none; }
/* ── v7.27.0 — 2-col → stacked fallback for narrow viewports ── */
@media (max-width: 1100px) {
#page-vencimientos .v-layout {
flex-direction: column;
}
#page-vencimientos .v-panel {
width: 100%;
min-width: 0;
position: static;
}
#page-vencimientos .v-kpis {
flex-direction: row;
flex-wrap: wrap;
}
#page-vencimientos .v-kpis .v-kpi {
flex: 1 1 220px;
min-width: 220px;
}
}
/* ═══════════════════════════════════════════════════════════════════
v7.96.3 · BODY PAGE TITLES — OCULTOS
La topbar ya muestra el nombre de cada página (top-title) — los
headers editoriales del body son redundantes. Se ocultan eyebrow + h1
+ subtitle de cada sección. CTAs y stats inline se preservan.
═══════════════════════════════════════════════════════════════════ */
/* Stock */
#page-stock .sk-eyebrow,
#page-stock .sk-title,
#page-stock .sk-subtitle,
/* Movimientos */
#page-movimientos .mv2-page-head,
/* Transferencia entre locales */
#page-transferencia .trf-kicker,
#page-transferencia .trf-title,
#page-transferencia .trf-subtitle,
/* Clientes — solo eyebrow + h1; preservamos cli-head-stats */
#page-clientes .cli-head-eyebrow,
#page-clientes .cli-head-title,
/* Vencimientos */
#page-vencimientos .v3-eyebrow,
#page-vencimientos .v3-title,
#page-vencimientos .v3-subtitle,
/* Lista de precios */
#page-precios .pr-eyebrow,
#page-precios .pr-title,
#page-precios .pr-subtitle,
/* Chat */
#page-chat .chat-topbar > div:first-child > h2,
#page-chat .chat-topbar > div:first-child > p,
/* Empresas — solo eyebrow + h1; preservamos emp-header-stats */
#page-empresas .emp-header-eyebrow,
#page-empresas .emp-header-title,
/* Costos e Ingresos */
#page-costos .co-eyebrow,
#page-costos .co-title,
#page-costos .co-subtitle {
display: none !important;
}
/* Nota: Dashboard `.nd-hero-greeting` (saludo "Buenas noches") y
Cierre `.cc4-hero-greeting` ("Cerrando tu turno.") NO son títulos
de página sino momentos Identity-First contextuales — se preservan. */
/* ═══════════════════════════════════════════════════════════════════
v7.96.4 · VENTA RÁPIDA — Panel de Beneficios FID v3 (.vr-fid-*)
Aparece dentro de .vr-cli-card cuando hay cliente seleccionado.
Tres bloques:
1. Meter de progreso al siguiente nivel
2. Beneficios ACTIVOS HOY (cumple, mié/jue, prod gratis)
3. Beneficios DEL NIVEL (colapsable, info estática)
+ Variantes por nivel (SELECTO/PRIVADO/LEGADO) en .vr-cli-card.
═══════════════════════════════════════════════════════════════════ */
.vr-fid-panel {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* ── 1. Meter próximo nivel ── */
.vr-fid-meter {
padding: 10px 12px;
background: rgba(26, 20, 16, .025);
border: 1px solid rgba(191, 180, 170, .28);
border-radius: 9px;
display: flex;
flex-direction: column;
gap: 6px;
}
.vr-fid-meter-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
font-family: var(--sans);
font-size: 11.5px;
color: rgba(26, 20, 16, .60);
}
.vr-fid-meter-head strong {
color: #1A1410;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.vr-fid-meter-target {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.vr-fid-meter-target[data-nivel="selecto"] { color: #9C8E7F; }
.vr-fid-meter-target[data-nivel="privado"] { color: #1A1410; }
.vr-fid-meter-target[data-nivel="legado"] { color: #C9A961; }
.vr-fid-meter-bar {
position: relative;
height: 6px;
background: rgba(26, 20, 16, .06);
border-radius: 3px;
overflow: hidden;
}
.vr-fid-meter-fill {
height: 100%;
background: linear-gradient(90deg, #E8663A 0%, #F0764A 100%);
border-radius: 3px;
transition: width .56s cubic-bezier(.16, 1, .3, 1);
}
.vr-fid-meter[data-to="privado"] .vr-fid-meter-fill { background: linear-gradient(90deg, #4A4A4A 0%, #1A1410 100%); }
.vr-fid-meter[data-to="legado"] .vr-fid-meter-fill { background: linear-gradient(90deg, #C9A961 0%, #B8923F 100%); }
.vr-fid-meter-foot {
display: flex;
align-items: baseline;
gap: 6px;
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(26, 20, 16, .40);
}
.vr-fid-meter-pct { color: #1A1410; }
.vr-fid-meter-max .vr-fid-meter-fill {
background: linear-gradient(90deg, #C9A961 0%, #B8923F 50%, #C9A961 100%);
background-size: 200% 100%;
animation: vrFidShimmer 3s ease-in-out infinite;
}
@keyframes vrFidShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* ── Section header genérico (eyebrow estilo Identity) ── */
.vr-fid-section-head,
.vr-fid-level-toggle {
display: flex;
align-items: center;
gap: 6px;
}
.vr-fid-section-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: #E8663A;
flex-shrink: 0;
}
.vr-fid-section-label {
font-family: var(--mono);
font-size: 8.5px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(26, 20, 16, .55);
}
/* ── 2. Beneficios ACTIVOS hoy ── */
.vr-fid-active {
padding: 10px 12px;
background: linear-gradient(180deg, rgba(232, 102, 58, .055) 0%, rgba(232, 102, 58, .025) 100%);
border: 1px solid rgba(232, 102, 58, .20);
border-radius: 9px;
display: flex;
flex-direction: column;
gap: 8px;
}
.vr-fid-active .vr-fid-section-dot {
background: #E8663A;
box-shadow: 0 0 0 3px rgba(232, 102, 58, .18);
animation: vrFidPulse 1.8s ease-in-out infinite;
}
@keyframes vrFidPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(232, 102, 58, .18); }
50% { box-shadow: 0 0 0 5px rgba(232, 102, 58, .08); }
}
.vr-fid-active-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.vr-fid-active-item {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 7px 9px;
background: rgba(255, 255, 255, .55);
border: 1px solid rgba(232, 102, 58, .12);
border-radius: 7px;
animation: vrFidItemIn .4s cubic-bezier(.16, 1, .3, 1) both;
}
.vr-fid-active-item:nth-child(1) { animation-delay: 60ms; }
.vr-fid-active-item:nth-child(2) { animation-delay: 130ms; }
.vr-fid-active-item:nth-child(3) { animation-delay: 200ms; }
@keyframes vrFidItemIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.vr-fid-active-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
border-radius: 6px;
background: rgba(232, 102, 58, .12);
color: #E8663A;
flex-shrink: 0;
}
.vr-fid-active-icon svg { width: 13px; height: 13px; }
.vr-fid-active-item[data-tone="cumple"] .vr-fid-active-icon {
background: rgba(212, 91, 142, .14);
color: #B8467A;
}
.vr-fid-active-item[data-tone="prodgratis"] .vr-fid-active-icon {
background: rgba(34, 165, 90, .12);
color: #1A7A45;
}
.vr-fid-active-meta { flex: 1; min-width: 0; }
.vr-fid-active-label {
font-family: var(--sans);
font-size: 12.5px;
font-weight: 600;
letter-spacing: -.005em;
color: #1A1410;
line-height: 1.2;
}
.vr-fid-active-sub {
margin-top: 1px;
font-family: var(--sans);
font-size: 11px;
font-weight: 400;
color: rgba(26, 20, 16, .55);
line-height: 1.25;
}
/* ── 3. Beneficios DEL NIVEL (colapsable) ── */
.vr-fid-level {
border: 1px solid rgba(191, 180, 170, .25);
border-radius: 9px;
overflow: hidden;
background: rgba(255, 255, 255, .35);
}
.vr-fid-level-toggle {
width: 100%;
padding: 9px 12px;
background: transparent;
border: none;
cursor: pointer;
font-family: inherit;
text-align: left;
color: inherit;
transition: background .14s ease;
}
.vr-fid-level-toggle:hover { background: rgba(26, 20, 16, .03); }
.vr-fid-level-chev {
margin-left: auto;
display: flex;
align-items: center;
color: rgba(26, 20, 16, .42);
transition: transform .28s cubic-bezier(.16, 1, .3, 1);
}
.vr-fid-level-chev svg { width: 11px; height: 11px; }
.vr-fid-level.is-expanded .vr-fid-level-chev { transform: rotate(180deg); }
.vr-fid-level-list {
list-style: none;
margin: 0;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height .32s cubic-bezier(.16, 1, .3, 1), padding .24s ease;
}
.vr-fid-level.is-expanded .vr-fid-level-list {
max-height: 360px;
padding: 4px 12px 10px;
border-top: 1px solid rgba(26, 20, 16, .05);
}
.vr-fid-level-item {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 5px 0;
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
color: rgba(26, 20, 16, .72);
line-height: 1.3;
}
.vr-fid-level-icon {
display: flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
flex-shrink: 0;
color: rgba(26, 20, 16, .50);
margin-top: 1px;
}
.vr-fid-level-icon svg { width: 12px; height: 12px; }
.vr-fid-level-text { flex: 1; }
/* ── Variantes por nivel — coloración sutil de la card ── */
.vr-cli-card[data-nivel="privado"] {
background: linear-gradient(180deg, rgba(26, 20, 16, .035) 0%, rgba(26, 20, 16, .020) 100%);
border-color: rgba(26, 20, 16, .14);
}
.vr-cli-card[data-nivel="legado"] {
background: linear-gradient(180deg, rgba(201, 169, 97, .07) 0%, rgba(201, 169, 97, .025) 100%);
border-color: rgba(201, 169, 97, .32);
box-shadow: 0 1px 3px rgba(201, 169, 97, .08);
position: relative;
}
.vr-cli-card[data-nivel="legado"]::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 3px; height: 100%;
background: linear-gradient(180deg, #C9A961 0%, #B8923F 100%);
border-radius: 12px 0 0 12px;
}
.vr-cli-card[data-nivel="legado"] .vr-fid-active {
background: linear-gradient(180deg, rgba(201, 169, 97, .10) 0%, rgba(232, 102, 58, .04) 100%);
border-color: rgba(201, 169, 97, .28);
}
.vr-cli-card[data-nivel="legado"] .vr-fid-section-dot {
background: #C9A961;
box-shadow: 0 0 0 3px rgba(201, 169, 97, .22);
}
/* ── A · Preview de descuento en cada vr-pago-btn ── */
.vr-pago-btn.vr-pago-has-preview {
padding-bottom: 22px !important;
position: relative;
}
.vr-pago-preview {
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
padding: 1px 7px;
background: rgba(34, 165, 90, .14);
border: 1px solid rgba(34, 165, 90, .26);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: .04em;
color: #1A7A45;
white-space: nowrap;
pointer-events: none;
animation: vrPagoPreviewIn .42s cubic-bezier(.16, 1, .3, 1) both;
}
.vr-pago-preview em {
font-style: normal;
font-variant-numeric: tabular-nums;
}
.vr-pago-btn.active .vr-pago-preview {
background: rgba(34, 165, 90, .22);
border-color: rgba(34, 165, 90, .42);
color: #155a32;
}
@keyframes vrPagoPreviewIn {
from { opacity: 0; transform: translate(-50%, 3px) scale(.92); }
to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.vr-fid-active-item, .vr-pago-preview, .vr-fid-meter-fill, .vr-fid-section-dot { animation: none !important; }
.vr-fid-level-list, .vr-fid-level-chev { transition: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════
v7.96.5 · DARK MODE para modales "Resolver" y "Consumir del lote"
(venc-descartar-overlay / venc-consumir-ov)
El bloque legacy v7.32.0 tenía tokens hardcoded de light mode
(#fff, #262626, rgba(38,38,38,...)). Acá los migro a vars del sistema
sin tocar el bloque legacy — overrides limpios.
═══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .venc-descartar-box {
background: var(--surface-3);
box-shadow:
0 0 0 1px var(--line-medium),
0 8px 32px rgba(0, 0, 0, .45),
0 24px 56px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .venc-descartar-title {
color: var(--ink-primary);
}
[data-theme="dark"] .venc-descartar-prod {
color: var(--ink-secondary);
border-bottom-color: var(--line-soft);
}
[data-theme="dark"] .venc-descartar-btn {
background: transparent;
border-color: var(--line-medium);
color: var(--ink-primary);
}
[data-theme="dark"] .venc-descartar-btn svg {
stroke: var(--ink-secondary);
}
[data-theme="dark"] .venc-descartar-btn:hover svg {
stroke: var(--ink-primary);
}
/* Variantes semánticas hover — usar tokens dark de cada canal */
[data-theme="dark"] .venc-descartar-btn.critico:hover {
background: var(--c-red-soft);
border-color: var(--c-red-line);
color: var(--c-red-ink);
box-shadow: 0 0 0 3px rgba(224, 82, 82, .10);
}
[data-theme="dark"] .venc-descartar-btn.critico:hover svg {
stroke: var(--c-red);
}
[data-theme="dark"] .venc-descartar-btn.ok:hover {
background: var(--c-green-soft);
border-color: var(--c-green-line);
color: var(--c-green-ink);
box-shadow: 0 0 0 3px rgba(34, 165, 90, .10);
}
[data-theme="dark"] .venc-descartar-btn.ok:hover svg {
stroke: var(--c-green);
}
[data-theme="dark"] .venc-descartar-btn.error:hover {
background: var(--surface-4);
border-color: var(--line-strong);
color: var(--ink-primary);
box-shadow: 0 0 0 3px rgba(255, 250, 240, .03);
}
/* Separator */
[data-theme="dark"] .venc-descartar-sep {
background: var(--line-soft);
}
/* Transformar (disabled) */
[data-theme="dark"] .venc-descartar-btn.transformar {
border-color: var(--line-soft);
color: var(--ink-tertiary);
}
[data-theme="dark"] .venc-descartar-btn.transformar:hover {
background: transparent;
border-color: var(--line-soft);
}
[data-theme="dark"] .venc-descartar-soon {
color: var(--ink-tertiary);
}
/* Cancel */
[data-theme="dark"] .venc-descartar-cancel {
color: var(--ink-tertiary);
}
[data-theme="dark"] .venc-descartar-cancel:hover {
background: var(--surface-4);
color: var(--ink-primary);
}
/* ── Modal "Consumir del lote" — inputs con var(--char) que en dark
se mapea a --surface-3 (invisible). Forzar legibles. ── */
[data-theme="dark"] #venc-consumir-ov input[type="number"] {
background: var(--surface-2) !important;
border-color: var(--line-medium) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #venc-consumir-ov input[type="number"]:focus {
border-color: var(--line-focus) !important;
box-shadow: 0 0 0 3px rgba(232, 102, 58, .12) !important;
}
[data-theme="dark"] #venc-consumir-ov label {
color: var(--ink-secondary) !important;
}
/* Overlay backdrop — usar surface-overlay con blur ya está OK,
pero el inline-style del JS usa rgba(245,239,230,.08) que en dark
es demasiado claro. Forzar surface-overlay del sistema. */
[data-theme="dark"] .venc-descartar-overlay {
background: var(--surface-overlay) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
v7.96.6 — MOBILE CONSOLIDATION BLOCK (≤768px)
Fix focal: cierra los bugs responsive detectados en el audit de mobile.
No remueve los ~120 @media legacy; los pisa por especificidad/orden.
Cobertura: Stock · Movimientos · Costos · Transferencia · Carga Masiva
+ transversales (body-as-card gutter, tablas con scroll horizontal,
tab rows desbordadas, chips wrap).
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ── Body-as-card: eliminar gutter lateral que dejaba ver el floor ── */
#pages {
margin: 4px 4px 8px 4px !important;
border-radius: 14px !important;
}
/* ── Page padding interno más ajustado en mobile ── */
#pages > .page.active {
padding-left: 12px !important;
padding-right: 12px !important;
}
/* ── Tablas con scroll horizontal: hacer el scroll obvio + min-width
consistente para que el usuario entienda que hay más columnas ── */
#page-stock .sk-table-wrap,
#page-movimientos .mv-table-card,
#page-costos .co-table-card,
.lxg-table-wrap {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
border-radius: 12px;
position: relative;
}
#page-stock .sk-table,
#page-movimientos .mv-table,
#page-costos .co-table {
min-width: 560px;
font-size: 12.5px !important;
}
/* ── COSTOS: los 3 grupos de filtros (sucursal/período/extras) se
apilaban en una sola fila y desbordaban con "Mes pas..." cortado.
Forzar columna y wrap interno de cada grupo. ── */
#page-costos .co-topbar {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
#page-costos .co-subnav {
overflow-x: auto !important;
flex-wrap: nowrap !important;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
#page-costos .co-filters-group {
width: 100% !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
#page-costos .co-filters-group > * {
flex-wrap: wrap !important;
}
#page-costos .co-header {
flex-wrap: wrap !important;
gap: 12px !important;
}
/* ── MOVIMIENTOS: la toolbar con filtros sticky abajo encimaba con el
chat flotante. Subir el toolbar para que no quede tapado y permitir
wrap correcto. ── */
#page-movimientos .mv2-toolbar {
flex-wrap: wrap !important;
gap: 8px !important;
padding-bottom: 12px !important;
}
#page-movimientos .mv2-toolbar > * {
flex-wrap: wrap !important;
width: 100% !important;
}
#page-movimientos .mv2-filters {
flex-wrap: wrap !important;
gap: 6px !important;
}
/* ── STOCK: filter bar y header con wrap; CTA full width ── */
#page-stock .sk-header,
#page-stock .sk-filter-bar {
flex-wrap: wrap !important;
gap: 8px !important;
}
#page-stock .sk-header > * {
min-width: 0 !important;
}
/* ── TRANSFERENCIA: el botón "Confirmar transferencia" se cortaba.
Permitir que el texto haga wrap, igualar anchos, full-width row. ── */
#page-transferencia .trf-actions,
#page-transferencia .trf-footer {
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
#page-transferencia .trf-btn-clear,
#page-transferencia .trf-btn-confirm {
flex: 1 1 140px !important;
min-width: 0 !important;
white-space: normal !important;
padding-left: 12px !important;
padding-right: 12px !important;
font-size: 12.5px !important;
letter-spacing: .04em !important;
}
/* Pills de filtro en transferencia: wrap garantizado */
#page-transferencia .trf-pill-group {
flex-wrap: wrap !important;
gap: 6px !important;
}
/* ── CARGA MASIVA: el sticky footer "Confirmar carga" tapaba el
Historial. Dar safe-area inferior al body para que el último card
no quede oculto bajo el footer fixed. Especificidad bumpeada para
ganarle al legacy "#pages > .page.section-core". ── */
#pages > #page-carga.cm2.section-core {
padding-bottom: 140px !important;
}
#page-carga .cm2-foot {
flex-wrap: wrap !important;
gap: 10px !important;
padding: 12px 14px !important;
}
#page-carga .cm2-foot-summary {
flex: 1 1 100% !important;
min-width: 0 !important;
}
#page-carga .cm2-foot-cta,
#page-carga .cm2-foot button[type="submit"],
#page-carga .cm2-foot .lxg-btn--prime {
flex: 1 1 100% !important;
min-width: 0 !important;
white-space: normal !important;
}
/* ── VENCIMIENTOS: filtros sticky abajo no queden tapados por chat ── */
#page-vencimientos .v3-toolbar,
#page-vencimientos .v-toolbar {
padding-bottom: 12px !important;
}
/* ── EMPRESAS: filter pills row con wrap ── */
#page-empresas .emp-filter-pills,
#page-empresas .emp-header-stats {
flex-wrap: wrap !important;
gap: 8px !important;
}
/* ── Cualquier chip group / pill row del sistema: wrap por defecto ── */
.lx-pill-group,
.lxg-pill-group,
.page-pills-strip,
.tb-filter-pills {
flex-wrap: wrap !important;
gap: 6px !important;
}
/* ── Hero clocks: bajar tamaño un escalón en phones (≤480) ── */
@media (max-width: 480px) {
.nd-hero-clock,
.cc4-hero-clock,
.cc3-anatomy-clock {
font-size: 44px !important;
letter-spacing: -.02em !important;
}
#pages > .page.active {
padding-left: 10px !important;
padding-right: 10px !important;
}
/* Tablas todavía más compactas en phones */
#page-stock .sk-table,
#page-movimientos .mv-table,
#page-costos .co-table {
font-size: 11.5px !important;
}
}
}
/* ═══════════════════ END v7.96.6 MOBILE BLOCK ═══════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
v7.96.7 — DASHBOARD CARDS OVERFLOW FIX
- .nd-venta-row tenía un sin clase wrapeando name+meta, sin
min-width:0 → en mobile el nombre con white-space:nowrap NO podía
hacer ellipsis y desbordaba.
- .nd-mix-row NUNCA tuvo estilos base (solo dark overrides) → los
porcentajes se pegaban al texto del nombre de la categoría.
- .nd-sb-row / stock-bajo necesita misma protección min-width:0.
═══════════════════════════════════════════════════════════════════════ */
/* ── BASE (todos los viewports) ─────────────────────────────────────── */
/* Wrapper sin clase del .nd-venta-row: forzar contención para que el
ellipsis del .nd-venta-name funcione */
.nd-venta-row > div:not([class]),
.nd-venta-row > div:nth-child(2) {
min-width: 0;
overflow: hidden;
}
/* Base de la legend de categorías — antes no existía */
.nd-mix-row {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
font-family: var(--sans);
font-size: 12.5px;
line-height: 1.2;
}
.nd-mix-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
}
.nd-mix-lbl {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: rgba(26,20,16,.78);
font-weight: 500;
}
.nd-mix-pct {
flex-shrink: 0;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
color: #1A1410;
font-variant-numeric: tabular-nums;
margin-left: auto;
}
/* Stock bajo: filas con misma estructura que ranking necesitan min-width */
.nd-sb-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid rgba(26,20,16,.06);
}
.nd-sb-row > *:first-child { min-width: 0; }
.nd-sb-name {
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
color: #1A1410;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: -.01em;
}
.nd-sb-meta {
font-family: var(--mono);
font-size: 10.5px;
color: rgba(26,20,16,.42);
letter-spacing: .02em;
margin-top: 2px;
}
/* ── MOBILE (≤768): ajustes adicionales por espacio ───────────────── */
@media (max-width: 768px) {
/* En venta-row: 3-col grid con info expandiendo 2 filas. Pago pill cae
debajo del info (col 2). Total queda alineado a la derecha (col 3)
ocupando ambas filas para verticalmente centrar. */
.nd-venta-row {
grid-template-columns: 32px 1fr auto !important;
grid-template-rows: auto auto !important;
gap: 4px 10px !important;
align-items: start !important;
}
.nd-venta-row > .nd-venta-avatar {
grid-column: 1;
grid-row: 1 / span 2;
align-self: center;
}
.nd-venta-row > div:nth-child(2) {
grid-column: 2;
grid-row: 1;
}
.nd-venta-row > .nd-pago-pill,
.nd-venta-row > .cc2-pago-stack {
grid-column: 2;
grid-row: 2;
margin-top: 2px;
font-size: 10.5px !important;
justify-self: start;
}
.nd-venta-row > .nd-venta-total {
grid-column: 3;
grid-row: 1 / span 2;
align-self: center;
}
.nd-venta-name { font-size: 12.5px !important; }
.nd-venta-meta { font-size: 10px !important; }
.nd-venta-row .nd-venta-total,
#page-dashboard .nd-venta-total { font-size: 13.5px !important; }
/* Mix donut + legend: en mobile apilar (donut arriba, legend abajo) */
.nd-mix-wrap {
flex-direction: column !important;
align-items: stretch !important;
gap: 14px !important;
}
.nd-mix-donut {
width: 130px !important;
height: 130px !important;
align-self: center;
}
.nd-mix-legend { width: 100%; }
/* Ranking: bajar columna num + comprimir spacing */
.nd-rank-row {
grid-template-columns: 28px 1fr auto !important;
gap: 10px !important;
}
.nd-rank-num { font-size: 18px !important; }
.nd-rank-name { font-size: 12.5px !important; }
.nd-rank-row .nd-rank-price,
#page-dashboard .nd-rank-price { font-size: 13.5px !important; }
/* Chart Ventas del mes: dejar canvas ocupar todo + bajar padding del
wrap interno */
#page-dashboard .nd-chart-wrap {
padding: 0 !important;
margin: 0 -4px !important;
}
#page-dashboard .nd-chart-wrap canvas {
max-width: 100% !important;
}
}
/* ═══════════════════ END v7.96.7 DASHBOARD FIX ═══════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
v7.96.8 — STOCK DARK MODE: cells y sticky col seguían blancas
Las reglas legacy line 8721/8727 setean #ffffff en `td` y `td:first-child`
sin !important. Los overrides dark de tbody tr setean bg en el TR pero
los td pintan encima → blanco persiste. Fix: override directo en td.
═══════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] #page-stock td,
[data-theme="dark"] #page-stock tbody td {
background: var(--surface-1) !important;
color: var(--ink-primary) !important;
}
[data-theme="dark"] #page-stock td:first-child,
[data-theme="dark"] #page-stock tbody td:first-child {
background: var(--surface-1) !important;
}
[data-theme="dark"] #page-stock tbody tr:not(.stock-lotes-row):hover td,
[data-theme="dark"] #page-stock tbody tr:hover td:first-child {
background: var(--surface-2) !important;
}
/* Bordes inferiores que en legacy son rgba(26,20,16,.06) (línea oscura
sobre fondo claro) → en dark deben ser line-soft del sistema */
[data-theme="dark"] #page-stock td {
border-bottom-color: var(--line-soft) !important;
}
/* Filas de lotes expandidos (.stock-lotes-row) */
[data-theme="dark"] #page-stock .stock-lotes-row td,
[data-theme="dark"] #page-stock .stock-lotes-row {
background: var(--surface-2) !important;
}
/* Scroll de la tabla cuando se hace sticky el thead */
[data-theme="dark"] #page-stock .table-wrap.stock-scrolled th {
background: var(--surface-3) !important;
}
/* ═══════════════════ END v7.96.8 STOCK DARK FIX ═══════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
v7.96.9 — Mobile body mode para topbar
En ≤768 el action-zone (search + selects + CTAs por página) migra a
#tb-body-strip dentro de #pages. La topbar queda limpia con solo
burger + título. El funnel button queda oculto siempre en mobile
porque ya no hace falta (sin sheet).
═══════════════════════════════════════════════════════════════════════ */
/* Strip por defecto invisible (vacío en desktop, contenido en mobile) */
.tb-body-strip {
display: none;
}
.tb-body-strip:not(.is-empty) {
display: block;
}
@media (max-width: 768px) {
/* Ocultar funnel button siempre — en mobile ya no se usa el sheet */
#tb-filters-btn,
.tb-filters-btn {
display: none !important;
}
/* Strip que recibe el action-zone: barra horizontal scrollable al tope
de #pages, dentro del padding lateral de cada página. */
.tb-body-strip {
display: block;
padding: 10px 12px 6px;
background: transparent;
position: sticky;
top: 0;
z-index: 5;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
background: rgba(246, 246, 246, 0.78);
border-bottom: 1px solid rgba(38, 38, 38, 0.06);
}
[data-theme="dark"] .tb-body-strip {
background: rgba(31, 31, 30, 0.78);
border-bottom-color: rgba(255, 255, 255, 0.06);
}
.tb-body-strip.is-empty {
display: none;
}
/* Action-zone dentro del strip: layout horizontal con wrap, controles
ocupan ancho razonable. */
.tb-body-strip > #tb-action-zone {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 8px;
width: 100%;
margin: 0;
padding: 0;
position: static !important;
transform: none !important;
max-width: none !important;
}
/* El inner scroll legacy: en el strip dejar fluir como flex wrap */
.tb-body-strip #tb-action-scroll-inner,
.tb-body-strip .tb-action-scroll-inner {
display: flex !important;
flex-wrap: wrap !important;
width: 100% !important;
overflow: visible !important;
gap: 8px !important;
align-items: center !important;
}
/* En el strip queremos ver TODOS los filtros (sucursal, categoría, etc.)
— la regla legacy line 19355 los ocultaba en mobile cuando vivían en
la topbar. En el strip hay espacio sobrado. */
.tb-body-strip .sk-sucursal-wrap,
.tb-body-strip .tb-cat-wrapper,
.tb-body-strip .tb-sd-wrapper {
display: block !important;
width: auto !important;
}
.tb-body-strip .sk-search-wrap {
flex: 1 1 100% !important;
flex-basis: 100% !important;
min-width: 0 !important;
}
.tb-body-strip .sk-sucursal-wrap,
.tb-body-strip .tb-cat-wrapper {
flex: 1 1 calc(50% - 4px) !important;
min-width: 0 !important;
}
/* Search inputs full-width */
.tb-body-strip #tb-action-zone .lxg-search,
.tb-body-strip #tb-action-zone .tb-search,
.tb-body-strip #tb-action-zone input[type="search"],
.tb-body-strip #tb-action-zone input[type="text"] {
flex: 1 1 100%;
min-width: 0;
width: 100%;
}
/* Selects y dropdowns: flex 1 con min para legibilidad, wrap a fila */
.tb-body-strip #tb-action-zone select,
.tb-body-strip #tb-action-zone .tb-select,
.tb-body-strip #tb-action-zone .lxg-select {
flex: 1 1 auto;
min-width: 100px;
}
/* CTAs primarios: full-width o auto según presencia */
.tb-body-strip #tb-action-zone .lxg-btn--prime,
.tb-body-strip #tb-action-zone button[type="submit"] {
flex: 1 1 auto;
}
/* Topbar en mobile body mode: limpio, solo burger + título */
.topbar.tb-mobile-body {
/* asegurar que no quede el botón filters ocupando espacio */
}
.topbar.tb-mobile-body .tb-action-zone {
/* Si por timing aún no se movió, no mostrarlo dentro de la topbar */
display: none !important;
}
/* Padding del page activo: el strip ya tiene su padding, dejar room
debajo del strip pero sin doble padding-top */
#pages > .page.active {
padding-top: 12px !important;
}
}
/* ═══════════════════ END v7.96.9 MOBILE BODY MODE ═══════════════════ */