/* ══════════════════════════════════════════════════════════════
   SmartSell Design System — Dark Tech × Flowering Tree
   Ecosystem: Alex Vega (#C0192C red) · SmartCoin (cyan) · SmartSell (rose)
   ══════════════════════════════════════════════════════════════ */

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ── CSS VARIABLES ── */
:root {
  /* Brand — the flowering tree */
  --brand:        #C2185B;
  --brand-bright: #E91E8C;
  --brand-dim:    #880E4F;
  --brand-glow:   rgba(194, 24, 91, 0.22);
  --brand-pale:   rgba(194, 24, 91, 0.08);
  --trunk:        #8D6E63;

  /* AV ecosystem background (dark tech) */
  --bg:       #080308;
  --bg-2:     #0F060E;
  --surface:  #160C14;
  --surface-2:#1F1020;
  --surface-3:#2A1530;
  --border:   #2E1428;
  --border-2: #3D1C38;

  /* Typography — AV brand system */
  --text:     #D0D0D0;
  --text-2:   #8A8A9A;
  /* AUDITORÍA UI (12-ago-2026): #4A4A5A daba 2.20:1 sobre la tarjeta oscura — muy por
     debajo de AA. Lo usan las etiquetas de las stat-cards y los mensajes de estado
     vacío, o sea el texto que EXPLICA la pantalla cuando aún no hay datos: justo lo que
     un usuario nuevo necesita leer. Subido a 6.19:1, y sigue claramente por debajo de
     --text (~12:1), así que la jerarquía visual se mantiene. */
  --text-muted:#9A8FA0;
  /* El color de marca como TEXTO sobre fondo oscuro da 3.25:1 y no pasa AA. No se toca
     --brand (lo usan 96 reglas como fondo, donde funciona): se añade una variante
     pensada para texto. En claro el propio brand ya pasa (5.65:1) y se conserva. */
  --brand-text: #EE5A8E;
  --white:    #FFFFFF;

  /* ACENTO (2-ago) — se usaba en 96 reglas de este archivo y NUNCA estuvo definido.
     Una `var()` sin valor invalida la declaración: `background: var(--accent)` quedaba
     TRANSPARENTE y `color: var(--accent)` heredaba el color del padre. Por eso el
     selector de planes salía sin fondo y con letras del mismo tono que el fondo.
     Mismo mint que SmartCoin (--accent: #00C9A7) para que las dos apps coincidan.
     --on-accent = color legible ENCIMA del acento. */
  --accent:    #00C9A7;
  --on-accent: #06231D;
  /* Estados de la salud financiera (tema oscuro). Se definen aparte de
     --success/--warning/--danger porque aquí van como TEXTO y necesitan pareja en el
     tema claro; ver el bloque [data-theme="light"]. AA sobre --surface-2. */
  --fin-ok:    #00C896;
  --fin-warn:  #F59E0B;
  --fin-bad:   #FF5C6E;

  /* Status */
  --success:  #00C896;
  --warning:  #F59E0B;
  --danger:   #FF2D44;
  /* Variantes para TEXTO, mismo patrón que --brand-text. Sobre fondo oscuro estos
     tres ya se leen, así que aquí son el mismo color; el bloque [data-theme="light"]
     los oscurece, porque sobre blanco el ámbar da 1.88:1 (invisible) y el rojo 3.01:1.
     Los de FONDO (--warning/--danger) NO se tocan: ahí funcionan. */
  --warning-text: var(--warning);
  --danger-text:  var(--danger);
  --info:     #00B4D8;
  /* Variante para TEXTO: el cian sobre claro da 2.03:1 (invisible). Ver --warning-text. */
  --info-text: var(--info);
  --success-text: var(--success);

  /* Spacing / shape */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --line:      rgba(255,255,255,.10);
  --nav-h:     68px;
  --header-h:  54px;
  --transition: .18s cubic-bezier(.4,0,.2,1);

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0,0,0,.5);
  --shadow:    0 4px 20px rgba(0,0,0,.6);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.7);
  --glow:      0 0 20px var(--brand-glow);

  /* Liquid glass */
  --glass-bg:      rgba(31, 16, 32, 0.45);
  --glass-bg-2:    rgba(42, 21, 48, 0.40);
  --glass-border:  rgba(255, 255, 255, 0.10);
  --glass-hi:      rgba(255, 255, 255, 0.06);
  --glass-blur:    blur(22px) saturate(1.7);  /* LiquidGlass AV: paridad SmartCoin (blur22/sat~1.7) */
}
[data-theme="light"] {
  --glass-bg:     rgba(255, 255, 255, 0.55);
  --glass-bg-2:   rgba(255, 255, 255, 0.45);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-hi:     rgba(255, 255, 255, 0.5);
}

/* Light theme override */
[data-theme="light"] {
  --bg:       #F4EEF2;
  --bg-2:     #EDE3EA;
  --surface:  #FFFFFF;
  --surface-2:#F9F2F7;
  --surface-3:#F0E6EE;
  --border:   #E0C8D8;
  --border-2: #D4B0C8;
  --text:     #1A0A14;
  --text-2:   #6B3A58;
  /* AUDITORÍA UI (12-ago-2026): #B48CA8 daba 2.78:1 sobre la tarjeta clara. Mismo caso
     que en oscuro (etiquetas de stat-cards y estados vacíos). Ahora 6.51:1, conservando
     la familia malva para no romper la identidad. */
  --text-muted:#6B5563;
  /* En claro el color de marca como texto ya pasa (5.65:1): se conserva tal cual. */
  --brand-text: var(--brand);
  /* El mint del tema oscuro sobre blanco da ~2:1 y no se puede leer como texto:
     en claro el acento se oscurece (4.8:1 sobre blanco) y encima va texto blanco. */
  --accent:    #00806B;
  --on-accent: #FFFFFF;
  /* Estados de la salud financiera, versión CLARA. Los --success/--warning/--danger
     del tema oscuro no sirven como TEXTO aquí: el mint da 2.18:1 sobre blanco. Estos
     están oscurecidos hasta pasar AA sobre fondo claro (5.3 / 5.9 / 6.0). */
  --fin-ok:    #0B7A5E;
  --fin-warn:  #8A5A00;
  --fin-bad:   #C2183B;
  /* Reutilizan los tonos ya validados de arriba: el ámbar del tema oscuro daba
     1.88:1 sobre claro — la ✕ de "cancelar venta" era invisible en 125 filas — y
     el rojo 3.01:1 en los botones de borrar y el título de la zona de peligro. */
  --warning-text: var(--fin-warn);
  --info-text:    #0B6E8A;
  --success-text: var(--fin-ok);
  --danger-text:  var(--fin-bad);
  --line:      rgba(0,0,0,.12);
  --shadow-sm: 0 1px 4px rgba(194,24,91,.08);
  --shadow:    0 4px 20px rgba(194,24,91,.12);
  --shadow-lg: 0 8px 40px rgba(194,24,91,.16);
  --brand-pale: rgba(194,24,91,.06);
  --glow:      0 0 20px rgba(194,24,91,.15);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  /* App oscura por defecto. Declarar color-scheme evita que iOS (con el sistema
     en modo oscuro) pinte el texto de los inputs de BLANCO en el modo claro. */
  color-scheme: dark;
}
html[data-theme="light"] { color-scheme: light; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--brand-text); text-decoration: none; }
a:hover { color: var(--brand-bright); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
img { display: block; max-width: 100%; }

/* Monospace for labels and numbers */
.mono, .stat-val, .fin-val, .item-amount { font-family: 'JetBrains Mono', monospace; }

/* ── SVG ICONS ── */
.icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon svg { display: block; }

/* ── SCREENS ── */
.screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
}
.hidden { display: none !important; }

/* ── LOADING SCREEN ── */
.loading-screen {
  /* CONTINUIDAD CON EL SPLASH NATIVO (18-ago, reporte de Alex): la TWA pinta su
     propio splash con backgroundColor #020109 y el icono quieto. Si aquí el lienzo
     saliera del tema (en CLARO es #F4EEF2, casi blanco) el usuario ve DOS pantallas
     de bienvenida: negra y luego blanca. El splash es una sola pieza, siempre. */
  background: #020109;
  align-items: center; justify-content: center;
  z-index: 9999;
}
/* Los colores del texto del splash se fijan junto a la regla de tema claro que los
   pisaba (buscar "lienzo negro fijo"): allí es donde se resuelve la cascada. */
.loading-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }

.brand-logo {
  width: 80px; height: 80px;
  color: var(--brand);
  animation: logoPulse 2.4s ease-in-out infinite;
}
.brand-logo svg { width: 100%; height: 100%; }

.brand-wordmark {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: -0.5px;
  color: var(--white);
}
.brand-wordmark span { color: var(--brand); }

.loading-bar {
  width: 140px; height: 2px;
  background: var(--border-2);
  border-radius: 99px; overflow: hidden;
}
.loading-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand-dim), var(--brand-bright));
  border-radius: 99px;
  animation: loadbar 1.8s ease-in-out forwards;
  box-shadow: 0 0 8px var(--brand-glow);
}
@keyframes loadbar { to { width: 100%; } }
@keyframes logoPulse { 0%,100% { opacity:.8; transform:scale(1); } 50% { opacity:1; transform:scale(1.04); } }

/* SPLASH VIEJO ELIMINADO (2-ago) — el bloque .intro-screen/.coin/.petal/.intro-wordmark
   (177 líneas) quedó huérfano cuando el 2-jul se borró #intro-screen del HTML. Seguía
   viajando en el CSS, así que un index.html viejo servido desde caché offline revivía
   el splash antiguo entero. El único splash es #loading-screen (moneda 2 caras). */
/* ── LOGIN SCREEN ── */
.login-screen {
  background: var(--bg);
  align-items: center;
  overflow-y: auto;
  /* Permite scroll en pantallas pequeñas: el contenido crece, la pantalla scrollea */
  justify-content: flex-start;
}
.login-bg {
  position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 50% -10%, rgba(194,24,91,.18) 0%, transparent 60%);
  pointer-events: none;
}
.login-content {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px;
  padding: 2rem 1.5rem 3rem;
  display: flex; flex-direction: column; gap: 1.5rem;
  margin: auto;
  min-height: min-content;
}

.login-brand {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
}
.login-brand-logo {
  width: 96px; height: 96px;
  color: var(--brand);
  margin: 0 auto 1rem;
  filter: drop-shadow(0 0 20px var(--brand-glow));
  display: flex; align-items: center; justify-content: center;
}
.login-brand-logo svg, .login-brand-logo img { width: 100%; height: 100%; }
.login-brand h1 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2rem; font-weight: 700;
  color: var(--white); letter-spacing: -0.5px;
  text-align: center; width: 100%;
}
.login-brand h1 span { color: var(--brand); }
.login-tagline {
  font-size: .82rem; color: var(--text-2);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  margin-top: .35rem;
  text-align: center; width: 100%;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-lg);
}
.login-card h2 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem; font-weight: 600;
  color: var(--white); margin-bottom: .35rem;
}
.login-card p { font-size: .85rem; color: var(--text-2); margin-bottom: 1.25rem; }

.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  width: 100%; padding: .85rem 1.25rem;
  border: 1.5px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: .9rem; font-weight: 600; color: var(--text);
  transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}
.btn-google:hover {
  border-color: var(--brand);
  background: var(--brand-pale);
  color: var(--white);
  box-shadow: var(--glow);
}
.btn-google svg { flex-shrink: 0; }

.login-legal {
  font-size: .72rem; color: var(--text-muted);
  text-align: center; margin-top: 1rem; line-height: 1.6;
}
.login-legal a { color: var(--brand-text); }

.login-divider {
  display: flex; align-items: center; gap: .75rem;
  margin: 1rem 0 .85rem; color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace; font-size: .72rem;
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.btn-demo {
  width: 100%; padding: .75rem 1.25rem;
  border: 1.5px solid var(--border-2);
  border-radius: var(--radius);
  background: transparent; color: var(--text-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: .85rem; font-weight: 600;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}
.btn-demo:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-pale); }

.login-chips {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
}
.chip {
  display: flex; align-items: center; gap: .35rem;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 40px; padding: .3rem .75rem;
  font-size: .75rem; font-weight: 500; color: var(--text-2);
  font-family: 'JetBrains Mono', monospace;
}
.chip .icon { color: var(--brand); width: 14px; height: 14px; }
.chip .icon svg { width: 14px; height: 14px; }

/* ════════════════════════════════
   ONBOARDING (explainer + create/join business)
════════════════════════════════ */
.onboard-screen { background: var(--bg); overflow-y: auto; }
.onboard-content {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px; margin: 0 auto;
  min-height: 100dvh;
  padding: 2.5rem 1.5rem;
  display: flex; flex-direction: column;
}

/* Explainer slides */
.onboard-slides { flex: 1; display: flex; flex-direction: column; }
.slide { display: none; flex-direction: column; align-items: center; text-align: center; flex: 1; justify-content: center; gap: 1.25rem; }
.slide.active { display: flex; animation: slideFade .35s ease; }
@keyframes slideFade { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } }
.slide-icon {
  width: 80px; height: 80px; color: var(--brand);
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--glow);
}
.slide-icon svg { width: 40px; height: 40px; }
.slide h2 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.3rem; font-weight: 700; color: var(--white);
  letter-spacing: -.3px;
}
.slide p { font-size: .9rem; color: var(--text-2); line-height: 1.6; max-width: 320px; }

.onboard-dots { display: flex; gap: .4rem; justify-content: center; margin: 1.5rem 0; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-2); transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); }
.dot.active { background: var(--brand); width: 20px; border-radius: 4px; }

.onboard-actions { display: flex; flex-direction: column; gap: .65rem; }
.onboard-skip { text-align: center; color: var(--text-muted); font-size: .8rem; padding: .5rem; }

/* Business setup (create / join) */
.biz-setup { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
.biz-setup-head { text-align: center; }
.biz-setup-head h2 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.4rem; font-weight: 700; color: var(--white);
}
.biz-setup-head p { font-size: .85rem; color: var(--text-2); margin-top: .4rem; }

.choice-cards { display: flex; flex-direction: column; gap: .75rem; }
.choice-card {
  background: var(--surface); border: 1.5px solid var(--border-2);
  border-radius: var(--radius); padding: 1.1rem;
  display: flex; align-items: center; gap: 1rem;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); text-align: left; width: 100%;
}
.choice-card:hover { border-color: var(--brand); background: var(--surface-2); box-shadow: var(--glow); }
.choice-card .icon { width: 40px; height: 40px; color: var(--brand); flex-shrink: 0;
  background: var(--brand-pale); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; }
.choice-card .icon svg { width: 22px; height: 22px; }
.choice-text strong { display: block; font-size: .95rem; color: var(--white); font-weight: 600; }
.choice-text span { font-size: .78rem; color: var(--text-muted); }

.biz-form { display: flex; flex-direction: column; gap: .85rem; }
.biz-form .field label { margin-bottom: .1rem; }
.biz-back { display: flex; align-items: center; gap: .35rem; color: var(--text-2);
  font-size: .82rem; font-family: 'JetBrains Mono', monospace; margin-bottom: .5rem; }
.biz-back svg { width: 16px; height: 16px; }

.join-code-display {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.8rem; font-weight: 700; letter-spacing: .3em;
  color: var(--brand-text); text-align: center;
  background: var(--surface); border: 1.5px dashed var(--border-2);
  border-radius: var(--radius); padding: 1rem; margin: .5rem 0;
}

/* ── WORKSPACE SWITCHER (modal sheet) ── */
.ws-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.6); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn .2s ease;
}
.ws-overlay.hidden { display: none; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.ws-sheet {
  background: var(--surface); width: 100%; max-width: 480px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 1px solid var(--border-2); border-bottom: none;
  padding: 1.25rem; max-height: 80dvh; overflow-y: auto;
  animation: sheetUp .28s cubic-bezier(.4,0,.2,1);
}
@keyframes sheetUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
/* Zona de agarre real (23-ago-2026): la barrita se ve igual, lo arrastrable mide 28px. */
.ws-sheet-handle {
  width: 64px; height: 28px; margin: 0 auto .6rem;
  display: flex; align-items: center; justify-content: center;
  background: none; touch-action: none; cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.ws-sheet-handle::before {
  content: ""; width: 36px; height: 4px; border-radius: 99px; background: var(--border-2);
}
.ws-sheet h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-2); margin-bottom: .75rem;
}
.ws-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); margin-bottom: .5rem;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); width: 100%; text-align: left;
}
.ws-item:hover { background: var(--surface-2); border-color: var(--border-2); }
.ws-item.active { border-color: var(--brand); background: var(--brand-pale); }
.ws-item-logo { width: 34px; height: 34px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: var(--surface-3); display: flex; align-items: center; justify-content: center;
  color: var(--brand); font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.ws-item-info { flex: 1; min-width: 0; }
.ws-item-info strong { display: block; font-size: .9rem; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-item-info span { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; font-family: 'JetBrains Mono', monospace; letter-spacing: .04em; }
.ws-check { color: var(--brand); }
.ws-item-main { display: flex; align-items: center; gap: .75rem; flex: 1; min-width: 0; background: none; border: none; cursor: pointer; text-align: left; padding: 0; color: inherit; }
.ws-item-edit { flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border-2); background: transparent; color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; }
.ws-item-edit:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-pale); }
.ws-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }

/* Header workspace pill */
.ws-pill {
  display: flex; align-items: center; gap: .4rem;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 40px; padding: .25rem .65rem .25rem .75rem;
  max-width: 150px;
}
.ws-pill-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Avatar del negocio en la cabecera. `flex-shrink:0` para que el nombre ceda espacio
   antes que el logo: si algo se recorta, que sea el texto (tiene elipsis), no la marca.
   `:empty` lo esconde mientras no haya negocio cargado, para que no deje un hueco gris. */
.ws-pill-logo {
  width: 18px; height: 18px; border-radius: 50%; overflow: hidden;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: .62rem; line-height: 1;
}
.ws-pill-logo:empty { display: none; }
/* Bajo 360px la cabecera va justa: manda el nombre del negocio. */
@media (max-width: 359px) { .ws-pill-logo { display: none; } }
.ws-pill svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.ws-pill:hover { border-color: var(--brand); }

.role-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: .1rem .4rem; border-radius: 4px;
  background: var(--brand-pale); color: var(--brand-text);
}

/* Team list (admin) */
.team-member {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem 0; border-bottom: 1px solid var(--border);
}
.team-member:last-child { border-bottom: none; }
.team-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface-3); display: flex; align-items: center; justify-content: center;
  color: var(--brand-text); font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: .8rem; overflow: hidden; }
.team-info { flex: 1; min-width: 0; }
.team-info strong { display: block; font-size: .85rem; color: var(--text); }
.team-info span { font-size: .7rem; color: var(--text-muted); }

/* ── PAYWALL ── */
.paywall-screen { background: var(--bg); overflow-y: auto; }
.paywall-header {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.25rem;
  background: var(--surface); border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  font-size: .95rem; color: var(--white);
  position: sticky; top: 0; z-index: 10;
}
.btn-icon-header {
  color: var(--text-2); padding: .25rem;
  display: flex; align-items: center; width: 28px; height: 28px;
  transition: color var(--transition);
}
.btn-icon-header:hover { color: var(--brand); }
.btn-icon-header svg { width: 20px; height: 20px; }

.paywall-body { padding: 1.5rem; max-width: 440px; margin: 0 auto; }
.paywall-hero { text-align: center; margin-bottom: 2rem; }
.paywall-logo {
  width: 72px; height: 72px; color: var(--brand);
  margin: 0 auto 1rem;
  filter: drop-shadow(0 0 14px var(--brand-glow));
}
.paywall-logo svg { width: 100%; height: 100%; }
.paywall-hero h2 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.4rem; font-weight: 700; color: var(--white);
}
.paywall-hero p { font-size: .85rem; color: var(--text-2); margin-top: .4rem; }

.plan-card {
  background: var(--surface);
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-lg);
  padding: 1.5rem; position: relative;
  box-shadow: var(--shadow), var(--glow);
}
.plan-badge-top {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: var(--white);
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  padding: .2rem .75rem; border-radius: 40px; white-space: nowrap;
  text-transform: uppercase;
}
.plan-price { text-align: center; padding: 1rem 0 1.25rem; }
.price-currency {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.2rem; font-weight: 700; color: var(--brand);
  vertical-align: top; margin-top: .6rem; display: inline-block;
}
.price-amount {
  font-family: 'JetBrains Mono', monospace;
  font-size: 3.2rem; font-weight: 700; color: var(--white); line-height: 1;
}
.price-period { font-size: .9rem; color: var(--text-2); }

.plan-features { list-style: none; display: flex; flex-direction: column; gap: .65rem; margin-bottom: 1.5rem; }
.plan-features li { display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: var(--text); }
.feat-check { color: var(--success-text); display: flex; align-items: center; flex-shrink: 0; }
.feat-check svg { width: 16px; height: 16px; }

.plan-note { text-align: center; font-size: .74rem; color: var(--text-muted); margin-top: .75rem; }
.btn-ghost-sm {
  display: block; width: 100%; text-align: center; margin-top: 1.25rem;
  color: var(--text-muted); font-size: .8rem; padding: .5rem;
  transition: color var(--transition);
}
.btn-ghost-sm:hover { color: var(--text-2); }

/* ── APP SHELL ── */
.app-screen { background: var(--bg); }

/* Header */
.app-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1rem;
}
.header-brand {
  display: flex; align-items: center; gap: .5rem;
  text-decoration: none;
}
.header-logo { width: 28px; height: 28px; color: var(--brand); }
.header-logo svg { width: 100%; height: 100%; }
.header-wordmark {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem; font-weight: 700; color: var(--white);
  letter-spacing: -0.3px;
}
.header-wordmark span { color: var(--brand-text); }
.header-actions { display: flex; align-items: center; gap: .35rem; }

.btn-icon {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}
.btn-icon:hover { color: var(--brand); background: var(--brand-pale); }
.btn-icon svg { width: 18px; height: 18px; }
.btn-icon.spinning svg { animation: spin .8s linear infinite; }

.user-avatar-btn {
  width: 32px; height: 32px;
  /* `overflow: hidden` estaba aquí para recortar la foto en círculo, y de paso
     RECORTABA el ::after de 44px que amplía el área de toque: el arreglo táctil
     de este botón llevaba tiempo sin hacer nada (verificado con elementFromPoint:
     tocar 21px por encima del centro devolvía la cabecera, no el botón). El
     recorte se mueve a la imagen, que ya es redonda por su cuenta. */
  border-radius: 50%; overflow: visible;
  background: var(--surface-3);
  border: 1.5px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem; font-weight: 700; color: var(--brand-text);
  transition: border-color var(--transition);
}
.user-avatar-btn:hover { border-color: var(--brand); }
.user-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; overflow: hidden; }

/* Main scroll area */
.app-main {
  position: fixed;
  top: var(--header-h);
  bottom: var(--nav-h);
  left: 0; right: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
.app-main::-webkit-scrollbar { width: 4px; }
.app-main::-webkit-scrollbar-track { background: transparent; }
.app-main::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }

/* Bottom Nav */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: rgba(15,6,14,.82);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: stretch;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px; color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem; font-weight: 500; letter-spacing: .02em;
  /* El `color` sale de la transición A PROPÓSITO (12-ago-2026). Cuando el tema cambia,
     el color de estas etiquetas viene de una custom property (--text-2 / --brand-text);
     Chrome deja la transición COLGADA en el valor viejo y el nav se quedaba con los
     colores del tema oscuro sobre un nav casi blanco (3.05:1, medido). Probado: con
     `transition:none` los seis rótulos toman al instante su color correcto. El
     `transform` se queda — es el rebote al tocar, y ese sí anima bien. */
  transition: transform var(--transition);
  padding: .5rem .2rem;
  text-transform: uppercase; border-radius: var(--radius-sm);
  position: relative;
}
.nav-item svg { width: 20px; height: 20px; transition: transform var(--transition); }
.nav-item:active { transform: scale(.88); }
/* La etiqueta de la pestaña ACTIVA: rosa de marca a 9px sobre el fondo del nav
   da 3.46:1. Es el texto que dice DÓNDE ESTÁS — el más consultado de la app.
   `--brand-text` lo sube a 5.9:1; en tema claro es el mismo color de siempre. */
.nav-item.active { color: var(--brand-text); }
.nav-item.active::before {
  content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 3px; border-radius: 2px;
  background: var(--brand);
  box-shadow: 0 0 8px var(--brand-glow);
}
.nav-item.active svg { transform: translateY(-2px) scale(1.08); filter: drop-shadow(0 0 4px var(--brand-glow)); }

/* ── TAB PANELS ── */
.tab-panel { display: none; padding: 1rem; }
.tab-panel.active { display: block; }

.ia-panel { display: none !important; flex-direction: column; height: 100%; padding: 0; }
.ia-panel.active { display: flex !important; }

.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem;
  margin-bottom: 1rem; padding-top: .25rem;
}
/* Grupo de acciones del header: envuelve y no se sale del margen (fix ventas/clientes). */
.panel-header > div { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.panel-header h2 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem; font-weight: 700; color: var(--white);
  letter-spacing: -.3px; white-space: nowrap;
}

/* ── STATS GRID ── */
.stats-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .6rem; margin-bottom: .75rem;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  display: flex; align-items: center; gap: .75rem;
  border-left: 2px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}
.stat-card {
  transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.stat-card:hover  { background: var(--surface-2); transform: translateY(-1px); }
.stat-card:active { transform: scale(.97); }
.stat-card[data-color="rose"]   { border-left-color: var(--brand);   box-shadow: inset 3px 0 12px -8px var(--brand); }
.stat-card[data-color="green"]  { border-left-color: var(--success);  box-shadow: inset 3px 0 12px -8px var(--success); }
.stat-card[data-color="orange"] { border-left-color: var(--warning);  box-shadow: inset 3px 0 12px -8px var(--warning); }
.stat-card[data-color="blue"]   { border-left-color: var(--info);     box-shadow: inset 3px 0 12px -8px var(--info); }

.stat-icon {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-card[data-color="rose"]   .stat-icon { background: var(--brand-pale); color: var(--brand); }
.stat-card[data-color="green"]  .stat-icon { background: rgba(0,200,150,.08); color: var(--success-text); }
.stat-card[data-color="orange"] .stat-icon { background: rgba(245,158,11,.08); color: var(--warning-text); }
.stat-card[data-color="blue"]   .stat-icon { background: rgba(0,180,216,.08); color: var(--info-text); }
.stat-icon svg { width: 18px; height: 18px; }

.stat-data { display: flex; flex-direction: column; min-width: 0; }
.stat-val {
  font-size: 1.05rem; font-weight: 700; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-lbl {
  font-size: .62rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
  font-family: 'JetBrains Mono', monospace;
  margin-top: 2px;
}

/* ── PERIOD NAV ── */
.period-nav {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-bottom: .85rem;
}
.period-arrow {
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2); border: 1px solid var(--border);
  background: var(--surface); transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}
.period-arrow svg { width: 16px; height: 16px; }
.period-arrow:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.period-arrow:disabled { opacity: .35; cursor: not-allowed; }
.period-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem; font-weight: 600; color: var(--text);
  min-width: 150px; text-align: center; text-transform: capitalize;
}

/* ── CHARTS ── */
.chart-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: .75rem;
}
.charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .75rem; }
.charts-row .chart-card { margin-bottom: 0; }
.chart-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .75rem;
}
.chart-head h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .05em;
}
.chart-sub { font-family: 'JetBrains Mono', monospace; font-size: .85rem; font-weight: 700; color: var(--brand-text); }
.chart-body { width: 100%; }
.chart-empty {
  text-align: center; color: var(--text-muted); font-size: .8rem;
  padding: 1.5rem 0; font-family: 'JetBrains Mono', monospace;
}

/* Bar chart (HTML, crisp) */
.bars { display: flex; align-items: flex-end; gap: 2px; height: 130px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; }
.bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.bar-fill {
  width: 100%; border-radius: 3px 3px 0 0; min-height: 2px;
  background: linear-gradient(180deg, #E91E8C 0%, #C2185B 60%, #880E4F 100%);
  box-shadow: 0 0 8px rgba(233,30,140,.25);
  animation: barGrow .5s cubic-bezier(.4,0,.2,1) backwards;
  transition: filter var(--transition);
}
.bar-col:hover .bar-fill { filter: brightness(1.2); }
@keyframes barGrow { from { transform: scaleY(0); transform-origin: bottom; } }
.bar-x {
  font-size: .56rem; color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace; white-space: nowrap;
}

/* Donut */
/* Legacy alias kept for potential old code */
.donut-wrap { display: flex; align-items: center; gap: 1rem; }

/* New layout: SVG centered above legend on narrow, side-by-side on wide */
.donut-layout {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.donut-svg-wrap {
  flex-shrink: 0;
  /* ✅ FIX: NO usar CSS filter aquí — crea stacking context que rompe
     stroke-dasharray en Chrome. Glow se hace con pseudo-elemento. */
  position: relative;
  border-radius: 50%;
  transition: transform var(--transition);
}
.donut-svg-wrap::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(194,24,91,.3);
  pointer-events: none;
  transition: box-shadow var(--transition);
}
.donut-svg-wrap:hover { transform: scale(1.03); }
.donut-svg-wrap:hover::after { box-shadow: 0 0 40px rgba(194,24,91,.55); }
.donut { width: 150px; height: 150px; }
.donut-center-val {
  font-size: 14px; font-weight: 700; fill: var(--white);
  font-family: 'JetBrains Mono', monospace;
}
.donut-center-lbl {
  font-size: 5.5px; fill: var(--text-muted);
  font-family: 'JetBrains Mono', monospace; letter-spacing: .1em;
}
.donut-legend { flex: 1; display: flex; flex-direction: column; gap: .4rem; min-width: 130px; }
.donut-leg-item { display: flex; align-items: center; gap: .5rem; font-size: .76rem; border-radius: var(--radius-sm); }
.donut-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.donut-leg-lbl { flex: 1; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.donut-leg-val { color: var(--white); font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: .78rem; }

/* ── CATEGORÍA INLINE ── */
.cat-inline { display: flex; gap: .4rem; align-items: center; }
.cat-inline-inp { flex: 1; }
.cat-inline-ok, .cat-inline-cancel {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}
.cat-inline-ok { color: var(--success-text); }
.cat-inline-ok:hover { background: var(--success); color: #fff; border-color: var(--success); }
.cat-inline-cancel { color: var(--text-muted); }
.cat-inline-cancel:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.cat-inline svg { width: 16px; height: 16px; }

.fin-note { font-size: .62rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-top: 2px; }

/* ── INSIGHT CARD ── */
.insight-card {
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-3) 100%);
  border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  margin-bottom: .75rem;
  position: relative; overflow: hidden;
}
.insight-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: .6;
}
.insight-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .5rem;
}
.insight-label {
  display: flex; align-items: center; gap: .4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem; font-weight: 600; color: var(--brand-text);
  text-transform: uppercase; letter-spacing: .06em;
}
.insight-label .icon { color: var(--brand); width: 14px; height: 14px; }
.insight-label .icon svg { width: 14px; height: 14px; }
.btn-text-sm { font-size: .72rem; color: var(--text-muted); transition: color var(--transition); }
.btn-text-sm:hover { color: var(--brand-text); }
.insight-body {
  font-size: .85rem; line-height: 1.55; color: var(--text);
}

/* ── SECTION CARDS ── */
.section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem 1rem; margin-bottom: .75rem;
}
.section-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .65rem;
}
.section-card h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .05em;
}
.btn-text {
  font-size: .78rem; color: var(--brand-text); font-weight: 500;
  transition: color var(--transition);
}
.btn-text:hover { color: var(--brand-bright); }

/* ── FORMS ── */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 1.1rem;
  margin-bottom: .75rem;
}
.form-card.collapsed { display: none; }
.form-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: .85rem; font-weight: 600; color: var(--white);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: .85rem;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-bottom: .85rem; }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field.full { grid-column: span 2; }

.field label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; font-weight: 500; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .05em;
}
.inp {
  width: 100%; padding: .6rem .75rem;
  border: 1.5px solid var(--border-2);
  border-radius: var(--radius-sm);
  font-size: .88rem; color: var(--text);
  background: var(--bg-2);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none; appearance: none;
}
.inp:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.inp::placeholder { color: var(--text-muted); }
select.inp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4A5A' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 16px;
  padding-right: 2rem;
  cursor: pointer;
}
select.inp option { background: var(--surface-2); color: var(--text); }

.form-actions { display: flex; gap: .65rem; justify-content: flex-end; }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--brand); color: var(--white);
  padding: .65rem 1.4rem; border-radius: var(--radius);
  font-size: .88rem; font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .02em;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
  cursor: pointer; border: none;
}
.btn-primary:hover { background: var(--brand-bright); box-shadow: var(--glow); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
/* N16: disabled VISIBLE (antes .5 desaparecía en claro). Mantiene fondo de marca. */
.btn-primary:disabled { opacity: .62; cursor: not-allowed; transform: none; background: var(--brand); color: #fff; }
.btn-lg { padding: .85rem 2rem; font-size: .95rem; width: 100%; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--brand-pale); color: var(--brand-text);
  border: 1.5px solid var(--border-2);
  border-radius: var(--radius);
  padding: .6rem 1.2rem; font-size: .85rem; font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}
.btn-secondary:hover { border-color: var(--brand); background: var(--brand-pale); box-shadow: var(--glow); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: none; color: var(--text-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: .6rem 1.2rem; font-size: .85rem; font-weight: 500;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}
.btn-ghost:hover { border-color: var(--border-2); color: var(--text); background: var(--surface-2); }

.btn-ghost-sm { background: none; color: var(--text-muted); font-size: .8rem; transition: color var(--transition); }
.btn-ghost-sm:hover { color: var(--text-2); }

.btn-danger {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  background: rgba(255,45,68,.07); color: var(--danger-text);
  border: 1.5px solid rgba(255,45,68,.25);
  border-radius: var(--radius); padding: .65rem 1.25rem;
  font-size: .88rem; font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  width: 100%; transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}
.btn-danger:hover { background: rgba(255,45,68,.14); border-color: var(--danger); }

.btn-fab-header {
  display: flex; align-items: center; gap: .35rem;
  background: var(--brand-pale); color: var(--brand-text);
  border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: .4rem .85rem;
  font-size: .78rem; font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .03em;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}
.btn-fab-header:hover { background: var(--brand); color: var(--white); border-color: var(--brand); }
.btn-fab-header .icon { width: 14px; height: 14px; }
.btn-fab-header .icon svg { width: 14px; height: 14px; }

.btn-sm { padding: .45rem .9rem; font-size: .8rem; }

/* ── FILTERS ── */
.filter-row {
  display: flex; gap: .5rem; margin-bottom: .65rem; align-items: center;
}
.search-inp { flex: 1; }
.select-sm {
  padding: .5rem .65rem;
  border: 1.5px solid var(--border-2);
  border-radius: var(--radius-sm);
  font-size: .8rem;
  background: var(--surface);
  color: var(--text);
  -webkit-appearance: none; 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='%234A4A5A' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .4rem center;
  background-size: 14px; padding-right: 1.6rem; cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
}
select option { background: var(--surface-2); color: var(--text); }

/* ── ITEM LISTS ── */
.item-list { display: flex; flex-direction: column; gap: .45rem; }
.item-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: .7rem .9rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  transition: background var(--transition), border-left-color var(--transition);
}
.item-row:hover { background: var(--surface-2); border-left-color: var(--brand); }
.item-row.sale       { border-left-color: var(--brand); }
.item-row.ingreso    { border-left-color: var(--success); }
.item-row.egreso     { border-left-color: var(--danger); }
.item-row.inversion  { border-left-color: var(--info); }

.item-main { flex: 1; min-width: 0; }
.item-title {
  font-weight: 600; font-size: .88rem; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item-sub { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }

.item-right { text-align: right; flex-shrink: 0; }
.item-amount { font-size: .9rem; font-weight: 700; color: var(--white); }
.item-date { font-size: .68rem; color: var(--text-muted); margin-top: 2px; }

.item-actions { display: flex; gap: .25rem; flex-shrink: 0; }
.btn-action {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  color: var(--text-muted); transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}
/* Editar, borrar y cancelar venta miden 28x28 y se repiten en CADA fila: son los
   controles más numerosos de la app (402 medidos en la demo) y los que más se
   fallan con el dedo. La ampliación es SOLO VERTICAL a propósito: van pegados uno
   al lado del otro, así que un área de 44px de ancho invadiría la del vecino y
   "borrar" se comería el toque de "editar" — cambiar un objetivo pequeño por uno
   equivocado es peor. En vertical la fila tiene sitio de sobra. */
.btn-action::after {
  content: ''; position: absolute;
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  height: 44px;
}
@media (pointer: fine) { .btn-action::after { display: none; } }
.btn-action svg { width: 14px; height: 14px; position: relative; z-index: 1; }
.btn-action:hover { background: var(--surface-3); color: var(--brand); }
.btn-action.danger:hover { color: var(--danger-text); }

.empty-msg {
  text-align: center; color: var(--text-muted); font-size: .85rem;
  padding: 2.5rem 1rem;
  font-family: 'JetBrains Mono', monospace;
}

/* Total bar */
.total-bar {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: .6rem .9rem; margin-top: .6rem;
  display: flex; justify-content: space-between;
  font-size: .82rem; color: var(--text-2);
  font-family: 'JetBrains Mono', monospace;
}
.total-bar strong { color: var(--brand-text); }

/* ── PRODUCTS GRID ── */
.products-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem; position: relative; overflow: hidden;
  transition: border-color var(--transition), background var(--transition);
}
.product-card:hover { background: var(--surface-2); border-color: var(--border-2); }
.product-card.low-stock { border-color: rgba(255,45,68,.35); }
.product-card.low-stock .low-stock-badge {
  display: flex; align-items: center; gap: .25rem;
}
.low-stock-badge {
  display: none;
  position: absolute; top: 0; right: 0;
  /* Rojo PROPIO, más oscuro que `--danger`: el blanco sobre #FF2D44 da 3.68:1 y
     este texto mide 9px — el aviso de "stock bajo" no se puede leer justo cuando
     hace falta. #CC1A33 lo sube a 5.6:1 y sigue leyéndose como alerta roja.
     No se toca `--danger`, que como color de línea y de fondo grande está bien. */
  background: #CC1A33; color: var(--white);
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem; font-weight: 700; letter-spacing: .04em;
  padding: .2rem .5rem; border-radius: 0 var(--radius) 0 var(--radius-sm);
}
.product-name {
  font-weight: 700; font-size: .88rem; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: .2rem;
}
.product-cat { font-size: .68rem; color: var(--text-muted); margin-bottom: .6rem; }
.product-stock {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.6rem; font-weight: 700; color: var(--brand-text); line-height: 1;
}
.product-stock-lbl { font-size: .65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.product-price { font-size: .75rem; color: var(--text-2); margin-top: .4rem; }
/* `auto` empuja los botones al pie de la tarjeta. En una rejilla todas las tarjetas
   de una fila miden lo mismo que la más alta, así que una ficha sin foto dejaba un
   hueco debajo del precio y sus botones quedaban a media altura, desalineados con
   los de al lado. Ahora la fila termina en una línea recta de acciones. */
.product-actions { display: flex; gap: .2rem; margin-top: auto; padding-top: .6rem; }

/* Alert bar */
.alert-bar {
  background: rgba(245,158,11,.07);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: var(--radius-sm); padding: .55rem .9rem;
  font-size: .82rem; color: var(--warning-text); margin-bottom: .65rem;
  display: flex; align-items: center; gap: .45rem;
  font-family: 'JetBrains Mono', monospace;
}
.alert-bar .icon { width: 16px; height: 16px; }
.alert-bar .icon svg { width: 16px; height: 16px; }

/* ── FINANCE ── */
.finance-summary {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .6rem; margin-bottom: .75rem;
}
.fin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  display: flex; flex-direction: column; gap: .2rem;
  border-left: 2px solid transparent;
}
.fin-card.green  { border-left-color: var(--success); }
.fin-card.red    { border-left-color: var(--danger); }
.fin-card.blue   { border-left-color: var(--info); }
.fin-card.gold   { border-left-color: var(--brand); }
.fin-lbl {
  font-size: .62rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
  font-family: 'JetBrains Mono', monospace;
}
.fin-val { font-size: 1.05rem; font-weight: 700; }
.fin-card.green .fin-val { color: var(--success-text); }
.fin-card.red   .fin-val { color: var(--danger-text); }
.fin-card.blue  .fin-val { color: var(--info-text); }
.fin-card.gold  .fin-val { color: var(--brand); }

.radio-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.radio-opt {
  display: flex; align-items: center; gap: .35rem;
  font-size: .85rem; color: var(--text-2); cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
}
.radio-opt input { accent-color: var(--brand); }

/* La fila DESLIZA desde siempre, pero nada lo decia: con 4 pestañas, "Clientes"
   quedaba cortada contra el borde y en un telefono parecia un fallo de diseño, no
   un carrusel. Medido a 375px: 437px de contenido en 343 disponibles.
   Se añade el desvanecido del borde (la señal universal de "hay mas"), el enganche
   al deslizar, y sitio para que la ultima no muera pegada al canto. */
.sub-tab-row {
  display: flex; gap: .4rem; margin-bottom: .65rem;
  overflow-x: auto; padding-bottom: .2rem;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: .1rem;
  /* El desvanecido se pinta con la propia mascara: no añade un elemento que tape
     los toques ni se descoloca al deslizar, como haria un ::after posicionado. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
}
/* Al llegar al final no hay nada mas que anunciar: se quita el desvanecido. */
.sub-tab-row.fin { -webkit-mask-image: none; mask-image: none; }
.sub-tab-row::after { content: ''; flex: none; width: .6rem; }
.sub-tab-row::-webkit-scrollbar { display: none; }
.sub-tab { scroll-snap-align: start; }

/* ── QUE QUEPAN LAS CUATRO, SIN DESLIZAR (21-ago) ──────────────────────────
   Alex: "todavia no se aprecia correctamente el boton de clientes dentro de los
   margenes del telefono, SIN necesidad de hacer slide. Ademas, el slide no esta
   funcionando".
   Medido a 375px: 454px de contenido en 343 disponibles — faltaban 111.
   Mejorar el deslizamiento no era la respuesta: la respuesta es que no haga falta.
   En movil las pestañas se reparten el ancho a partes iguales y el icono sube
   encima del texto, que es como resuelven esto iOS y Android. Cada una pasa de
   ~110px a ~85 y las cuatro entran. El scroll se queda por si algun dia hay seis:
   deja de ser la forma de llegar a la cuarta y pasa a ser una red. */
@media (max-width: 460px) {
  .sub-tab-row {
    gap: .25rem;
    /* 4 x 82 + 3 huecos daba 342.4 y al redondear se pasaba: la primera se salia
       1.2px por la izquierda y se le recortaba el borde. 1px de aire lo resuelve
       sin que se note. */
    padding-inline: 1px;
    -webkit-mask-image: none; mask-image: none;   /* ya no hay nada escondido */
  }
  .sub-tab-row::after { display: none; }
  .sub-tab {
    flex: 1 1 0; min-width: 0;                    /* reparten el ancho por igual */
    flex-direction: column; gap: .15rem;
    padding: .35rem .2rem;
    font-size: .6rem; letter-spacing: .01em;
    min-height: 52px;                             /* dos lineas y sigue >= 44 */
    justify-content: center;
  }
  .sub-tab svg { width: 15px; height: 15px; }
  /* El rotulo no se parte ni se corta a mitad de palabra */
  .sub-tab > span, .sub-tab { white-space: nowrap; }
}
.sub-tab {
  padding: .35rem .9rem; border-radius: 40px;
  font-size: .72rem; font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .03em; text-transform: uppercase;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text-2);
  white-space: nowrap; transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
  flex-shrink: 0;   /* FIX: sin esto los tabs se encogen y cortan el texto ("Créd…") con 4+ pestañas */
  /* Mobile touch improvements */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  cursor: pointer;
  min-height: 44px;        /* la ley tactil: medido, estaba en 36 */
  display: inline-flex; align-items: center; gap: .3rem;
}
.sub-tab.active { background: var(--brand); color: var(--white); border-color: var(--brand); box-shadow: 0 0 12px var(--brand-glow); }
.sub-tab:hover:not(.active) { border-color: var(--border-2); color: var(--text); }
.sub-tab:active { transform: scale(.95); }

/* ── FINANZAS: seis filtros que no caben en una linea (23-ago-2026) ────────
   Medido a 375px: los seis se repartian el ancho a partes iguales (54px cada uno)
   porque el arreglo movil de VENTAS aplica a todas las filas de pestañas. Pero las
   de Ventas llevan icono encima del texto y son cuatro; estas son seis y solo
   texto, asi que "INVERSIONES" (66px) y "GANANCIAS" (58px) SE SALIAN de su propia
   pildora — la palabra pintada por fuera del borde.
   Repartir el ancho no puede funcionar con seis: la palabra mas larga necesita mas
   de lo que le toca. Se parte en dos filas de tres, que es lo unico que deja las
   seis legibles, completas y tocables sin deslizar. */
@media (max-width: 460px) {
  #fin-filter-row {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: .3rem;
    -webkit-mask-image: none; mask-image: none;
  }
  #fin-filter-row .sub-tab {
    flex: 1 1 30%;
    min-width: 0;
    padding: .35rem .4rem;
    font-size: .62rem;
    flex-direction: row;
  }
}

/* ── AI CHAT ── */
.ia-panel > .panel-header { padding: .85rem 1rem .5rem; flex-shrink: 0; }

/* ── EL CHAT EMPEZABA A 186px DEL BORDE (21-ago) ───────────────────────────
   Alex: "hay un gran espacio que dice Limpiar, es demasiado el espacio de ese
   boton. Visualmente no esta bien proporcionado".
   La causa medida: .btn-ghost-sm es `display:block; width:100%` —esta pensado para
   un boton de ancho completo debajo de algo— y dentro de un flex con wrap se iba a
   su propia linea y se estiraba a los 343px. El header ocupaba 94px de alto para
   mostrar dos cosas que caben en una fila.
   No se cambia .btn-ghost-sm en global (su otro uso SI quiere ancho completo): se
   compacta solo aqui. */
.ia-panel > .panel-header {
  flex-wrap: nowrap;
  padding: .5rem 1rem .35rem;
  margin-bottom: 0;
  gap: .6rem;
}
.ia-panel > .panel-header .btn-ghost-sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; margin-top: 0; flex: none;
  padding: .4rem .7rem; min-height: 44px;   /* la ley tactil tambien aqui */
  border: 1px solid var(--border); border-radius: 8px;
  font-size: .72rem;
}
.ia-panel > .panel-header .btn-ghost-sm:hover { border-color: var(--border-2); }
/* La barra de contexto tambien apretaba: el chat es lo que importa en esta pantalla */
.ia-panel .ia-context-bar { padding-top: .25rem; padding-bottom: .25rem; }

.ia-context-bar {
  padding: .5rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.toggle-label {
  display: flex; align-items: center; gap: .5rem;
  font-size: .75rem; color: var(--text-2); cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
}
.toggle-switch {
  width: 34px; height: 18px; background: var(--border-2);
  border-radius: 9px; position: relative;
  transition: background var(--transition); flex-shrink: 0;
  cursor: pointer;
}
input[type=checkbox]:checked + .toggle-switch { background: var(--brand); }
.toggle-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--white);
  transition: transform var(--transition); box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
input[type=checkbox]:checked + .toggle-switch::after { transform: translateX(16px); }
/* CAUSA RAÍZ del checkbox de Términos (2-ago). Esta regla decía `input[type=checkbox]
   { display:none }` SIN ámbito: se escribió para esconder el checkbox nativo que va
   detrás de .toggle-switch, pero apagaba TODOS los checkbox de la app.
   Consecuencias que se venían parchando por separado sin dar con el origen:
     · El de Términos es `required`. Un control no renderizado NO es enfocable, así
       que el navegador bloquea el envío y NO puede mostrar su aviso: al pulsar
       "Crear cuenta" no pasaba absolutamente nada y nadie podía registrarse solo.
     · El checkbox propio de .terms-check-row también quedaba invisible, pese al
       "B1 FIX" que le dieron más abajo para hacerlo visible.
   Ahora se oculta SOLO el que acompaña a un .toggle-switch. */
input[type=checkbox]:has(+ .toggle-switch) { display: none; }

.chat-messages {
  flex: 1; overflow-y: auto; padding: .85rem 1rem;
  display: flex; flex-direction: column; gap: .85rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--border-2) transparent;
}

.msg { display: flex; gap: .6rem; align-items: flex-start; }
.msg.user { flex-direction: row-reverse; }

.msg-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.msg-avatar.ai {
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  color: var(--brand);
}
.msg-avatar.ai svg { width: 32px; height: 32px; }
.msg-avatar.user {
  background: var(--brand-pale);
  border: 1px solid var(--brand);
  color: var(--brand);
}
.msg-avatar.user svg { width: 32px; height: 32px; }

.msg-bubble {
  max-width: 78%; padding: .7rem .9rem;
  border-radius: var(--radius);
  font-size: .88rem; line-height: 1.55;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.msg-bubble p + p { margin-top: .45rem; }
.msg.user .msg-bubble {
  background: var(--brand);
  border-color: transparent;
  color: var(--white);
}

/* Typing indicator */
.msg-typing .msg-bubble { padding: .75rem 1rem; }
.typing-dots { display: flex; gap: 4px; align-items: center; }
.typing-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-muted); display: block;
  animation: typingBlink 1.4s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typingBlink { 0%,80%,100% { opacity:.2; } 40% { opacity:1; } }

.chat-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0; padding: .6rem;
}
.quick-prompts {
  display: flex; gap: .35rem; overflow-x: auto;
  padding: .2rem 0 .5rem; scrollbar-width: none;
}
.quick-prompts::-webkit-scrollbar { display: none; }
.qp {
  display: flex; align-items: center; gap: .3rem;
  white-space: nowrap; padding: .3rem .7rem;
  border-radius: 40px;
  font-size: .72rem; font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .02em;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border); transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}
.qp:hover { background: var(--brand-pale); color: var(--brand); border-color: var(--brand); }
.qp .icon { width: 12px; height: 12px; }
.qp .icon svg { width: 12px; height: 12px; }

.chat-input-row {
  display: flex; gap: .5rem; align-items: flex-end;
}
.chat-textarea {
  flex: 1; padding: .6rem .8rem;
  border: 1.5px solid var(--border-2); border-radius: var(--radius);
  font-size: .88rem; resize: none; max-height: 110px;
  background: var(--bg-2); color: var(--text);
  transition: border-color var(--transition);
  line-height: 1.45; font-family: 'Inter', sans-serif;
}
.chat-textarea:focus { outline: none; border-color: var(--brand); }
.chat-textarea::placeholder { color: var(--text-muted); }

.btn-send {
  width: 38px; height: 38px; border-radius: var(--radius);
  background: var(--brand); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}
.btn-send:hover:not(:disabled) {
  background: var(--brand-bright);
  box-shadow: var(--glow); transform: scale(1.04);
}
.btn-send:disabled { background: var(--surface-3); color: var(--text-muted); cursor: not-allowed; }
.btn-send svg { width: 18px; height: 18px; }

/* ── CONFIG ── */
.config-profile-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .9rem 1rem;
  margin-bottom: .75rem;
  display: flex; align-items: center; gap: .85rem;
}
.cfg-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface-3); border: 1.5px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem; font-weight: 700; color: var(--brand-text); flex-shrink: 0;
  overflow: hidden;
}
.cfg-profile-info { flex: 1; min-width: 0; }
.cfg-profile-info strong {
  font-size: .95rem; font-weight: 600; color: var(--white);
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cfg-profile-info span { font-size: .75rem; color: var(--text-muted); }
.plan-badge-sm {
  background: var(--surface-3); color: var(--text-2);
  border: 1px solid var(--border); border-radius: 40px;
  padding: .2rem .6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem; font-weight: 700; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .05em;
}
.plan-badge-sm.pro {
  background: var(--brand-pale); color: var(--brand);
  border-color: var(--border-2);
}

.config-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .9rem 1rem;
  margin-bottom: .6rem;
  transition: box-shadow var(--transition);
}
.config-section:has(.cfg-body) { cursor: default; }
.config-section h3 {
  display: flex; align-items: center; gap: .5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: .65rem;
  user-select: none;
}
.config-section.collapsible h3 {
  cursor: pointer;
  margin-bottom: 0;
  justify-content: space-between;
  padding: .1rem 0;
}
.config-section.collapsible h3:hover { color: var(--text); }
.config-section.collapsible h3 .cfg-chevron {
  width: 18px; height: 18px; color: var(--text-muted);
  flex-shrink: 0; transition: transform .25s ease;
  margin-left: auto;
}
.config-section.collapsible[data-open="true"] h3 .cfg-chevron { transform: rotate(180deg); }
.cfg-body {
  overflow: hidden; max-height: 0;
  transition: max-height .28s cubic-bezier(.4,0,.2,1), opacity .2s ease, margin-top .2s ease;
  opacity: 0; margin-top: 0;
}
.config-section.collapsible[data-open="true"] .cfg-body {
  /* Antes 600px → recortaba secciones largas (Egresos fijos: filas + Publicidad +
     Planilla + Impuestos + Reserva + Guardar + waterfall no cabían y el botón
     quedaba oculto). 2600px da aire de sobra a todas las secciones. */
  max-height: 2600px; opacity: 1; margin-top: .65rem;
}
.config-section.collapsible[data-open="false"] h3 { margin-bottom: 0; }

.config-section h3 .icon { color: var(--brand); width: 16px; height: 16px; }
.config-section h3 .icon svg { width: 16px; height: 16px; }

.config-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .35rem 0;
}
.config-row label { font-size: .85rem; color: var(--text-2); }
.cfg-desc { font-size: .8rem; color: var(--text-muted); margin-bottom: .7rem; line-height: 1.5; }

.toggle { display: flex; align-items: center; flex-shrink: 0; }
.toggle input { display: none; }
.toggle-slider {
  width: 40px; height: 22px; background: var(--border-2);
  border-radius: 11px; position: relative; cursor: pointer;
  transition: background var(--transition);
}
.toggle input:checked + .toggle-slider { background: var(--brand); }
.toggle-slider::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--white);
  transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.toggle input:checked + .toggle-slider::after { transform: translateX(18px); }

.bridge-detail { margin-top: .65rem; display: flex; flex-direction: column; gap: .45rem; }
.sheets-result {
  margin-top: .65rem; font-size: .8rem;
  background: rgba(0,200,150,.06); border: 1px solid rgba(0,200,150,.2);
  padding: .6rem .85rem; border-radius: var(--radius-sm); color: var(--success-text);
  font-family: 'JetBrains Mono', monospace;
}
.subscription-status-block { margin-bottom: .7rem; font-size: .85rem; color: var(--text-2); line-height: 1.5; }

/* ══ SmartClub Subscription Card ══ */
.smartclub-card {
  position: relative; overflow: hidden;
  border-radius: var(--liquid-radius);
  background: linear-gradient(145deg, rgba(194,24,91,.18) 0%, rgba(12,8,20,.95) 60%);
  border: 1px solid rgba(194,24,91,.35);
  box-shadow: 0 4px 32px rgba(194,24,91,.15), inset 0 1px 0 rgba(255,255,255,.08);
  padding: 1.1rem;
  margin-bottom: .75rem;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--spring);
}
.smartclub-card.is-pro {
  background: linear-gradient(145deg, rgba(0,200,100,.12) 0%, rgba(12,8,20,.95) 60%);
  border-color: rgba(0,200,100,.35);
  box-shadow: 0 4px 32px rgba(0,200,100,.12), inset 0 1px 0 rgba(255,255,255,.06);
}
.smartclub-glow {
  position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(194,24,91,.35) 0%, transparent 70%);
  pointer-events: none;
}
.smartclub-card.is-pro .smartclub-glow {
  background: radial-gradient(circle, rgba(0,200,100,.3) 0%, transparent 70%);
}
.smartclub-top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem;
}
.smartclub-badge {
  display: flex; align-items: center; gap: .35rem;
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--brand); font-family: 'JetBrains Mono', monospace;
}
.smartclub-badge svg { color: var(--brand); }
.smartclub-price {
  font-size: 1.15rem; font-weight: 800; color: var(--white);
  font-family: 'JetBrains Mono', monospace;
}
.smartclub-period { font-size: .72rem; font-weight: 400; color: var(--text-muted); }

.smartclub-status-block { margin-bottom: .75rem; font-size: .8rem; }
.smartclub-active-tag {
  display: inline-flex; align-items: center; gap: .3rem;
  color: #22c55e; font-weight: 600; font-size: .8rem;
}
.smartclub-inactive-tag { color: var(--text-muted); font-size: .78rem; }

.smartclub-features {
  list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .35rem;
}
.smartclub-features li {
  display: flex; align-items: center; gap: .4rem;
  font-size: .78rem; color: var(--text-2);
}
.smartclub-features li svg { color: var(--brand); flex-shrink: 0; }

.smartclub-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1rem;
  background: linear-gradient(135deg, var(--brand-bright) 0%, var(--brand) 100%);
  color: #fff; border: none; border-radius: var(--liquid-radius-sm);
  font-size: .88rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 20px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .18s var(--spring), box-shadow .18s ease;
}
.smartclub-btn:hover { box-shadow: 0 6px 28px var(--brand-glow); transform: translateY(-1px); }
.smartclub-btn:active { transform: scale(.97); }
.smartclub-card.is-pro .smartclub-btn {
  background: rgba(255,255,255,.08);
  box-shadow: none; border: 1px solid var(--glass-border-premium);
  color: var(--text);
}
.smartclub-note {
  font-size: .65rem; color: var(--text-muted); text-align: center;
  margin-top: .65rem; line-height: 1.5;
}

/* ══ SmartCoin Promo Card (config tab) ══ */
.smartcoin-promo {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: radial-gradient(ellipse at 30% 0%, rgba(0,230,180,.15) 0%, rgba(0,230,180,.03) 50%, transparent 70%),
              linear-gradient(145deg, rgba(0,40,32,.7) 0%, rgba(6,20,18,.8) 100%);
  border: 1px solid rgba(0,230,180,.3);
  box-shadow: 0 0 40px rgba(0,230,180,.1), inset 0 1px 0 rgba(0,230,180,.2);
  padding: 1.5rem;
  margin: .75rem 0 1.5rem;
  text-decoration: none; display: block;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
  cursor: pointer;
}
.smartcoin-promo:hover {
  border-color: rgba(0,230,180,.55);
  box-shadow: 0 0 60px rgba(0,230,180,.2), inset 0 1px 0 rgba(0,230,180,.3);
  transform: translateY(-2px);
}
.smartcoin-promo:active { transform: scale(.98); }

/* Floating particles bg */
.scp-particles {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.scp-dot {
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: #00E6B4; opacity: 0;
  animation: scpFloat var(--d, 4s) var(--delay, 0s) ease-in-out infinite;
}
@keyframes scpFloat {
  0%   { opacity: 0; transform: translateY(0) scale(0); }
  20%  { opacity: .6; transform: translateY(-10px) scale(1); }
  80%  { opacity: .3; transform: translateY(-40px) scale(.8); }
  100% { opacity: 0; transform: translateY(-60px) scale(0); }
}

/* Hummingbird orbit */
.scp-hbird-wrap {
  position: absolute; top: -12px; right: -12px;
  width: 90px; height: 90px;
  animation: scpHbirdOrbit 6s ease-in-out infinite;
}
@keyframes scpHbirdOrbit {
  0%   { transform: translate(0,0) rotate(-5deg); }
  25%  { transform: translate(-8px, 6px) rotate(3deg); }
  50%  { transform: translate(-4px, 12px) rotate(-2deg); }
  75%  { transform: translate(4px, 6px) rotate(5deg); }
  100% { transform: translate(0,0) rotate(-5deg); }
}
.scp-hbird-img {
  width: 70px; height: 70px; border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 0 12px rgba(0,230,180,.6));
  opacity: .9;
  animation: scpWing .35s ease-in-out infinite alternate;
}
@keyframes scpWing {
  from { transform: scaleX(1); }
  to   { transform: scaleX(.92); }
}

/* Content */
.scp-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem; font-weight: 600; letter-spacing: .1em;
  color: #00E6B4; text-transform: uppercase; margin-bottom: .6rem;
  opacity: .8;
}
.scp-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.05rem; font-weight: 700;
  color: #fff; margin-bottom: .4rem; line-height: 1.2;
  max-width: 70%;
}
.scp-desc {
  font-size: .82rem; color: rgba(255,255,255,.65);
  line-height: 1.55; margin-bottom: 1rem; max-width: 75%;
}
.scp-desc span { color: #00E6B4; font-weight: 600; }
.scp-cta {
  display: inline-block;
  background: #00E6B4;
  color: #041210;
  font-family: 'JetBrains Mono', monospace;
  font-size: .85rem; font-weight: 700;
  padding: .65rem 1.25rem;
  border-radius: var(--radius);
  border: none; cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,230,180,.35);
  width: 100%;
  text-align: center;
}
.scp-cta:hover {
  background: #33EFC7; color: #041210;
  box-shadow: 0 6px 24px rgba(0,230,180,.5);
  transform: translateY(-1px);
}
.scp-cta:active { transform: scale(.97); }
.scp-note {
  font-size: .68rem; color: rgba(0,230,180,.5);
  text-align: center; margin-top: .6rem;
  font-family: 'JetBrains Mono', monospace;
}

.made-by { font-size: .82rem; color: var(--text-2); margin-bottom: .35rem; }
.made-by-link {
  color: var(--brand-text); font-weight: 700; text-decoration: none;
  border-bottom: 1px dashed var(--brand); padding-bottom: 1px;
}
.made-by-link:hover { color: var(--brand-bright); }
.footer-meta { font-size: .72rem; }

.app-footer-note {
  text-align: center; font-size: .7rem; color: var(--text-muted);
  padding: 1.5rem 0; margin-top: .25rem;
  font-family: 'JetBrains Mono', monospace;
}
.app-footer-note a { color: var(--brand-text); }

/* ── TOAST ── */
.toast-container {
  position: fixed;
  bottom: calc(var(--nav-h) + .75rem);
  /* 20000: SIEMPRE por encima de cualquier modal (el más alto hoy es 10300). Bug
     real (24-jul): con z-index 9000 los toasts quedaban DETRÁS de .credit-modal-ov
     (10000) — "Avisar por correo" sí se enviaba pero el toast era invisible. */
  right: .75rem; z-index: 20000;
  display: flex; flex-direction: column; gap: .4rem;
  pointer-events: none;
}
.toast {
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  color: var(--text); border-radius: var(--radius-sm);
  padding: .6rem .9rem;
  font-size: .82rem; font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toastIn .22s ease;
  max-width: 260px;
  display: flex; align-items: center; gap: .5rem;
}
.toast .icon { width: 16px; height: 16px; flex-shrink: 0; }
.toast .icon svg { width: 16px; height: 16px; }
.toast.success { border-color: rgba(0,200,150,.3); color: var(--success-text); }
.toast.error   { border-color: rgba(255,45,68,.3);  color: var(--danger-text); }
.toast.warning { border-color: rgba(245,158,11,.3); color: var(--warning-text); }
.toast.info    { border-color: rgba(0,180,216,.3);  color: var(--info-text); }
.toast.fade-out { animation: toastOut .22s ease forwards; }
@keyframes toastIn  { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { to   { opacity:0; transform:translateX(12px); } }

/* ── MISC ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; display: inline-block; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────
   El lienzo tiene UN ancho, `--app-w`, y todo lo que se centra lo lee de ahí.
   Antes eran 820px fijos a partir de 1024px: la app se quedaba clavada en esa
   columna aunque el monitor tuviera 1920 o 2560, y en un televisor se veía una
   tira estrecha en medio de la pantalla. Ahora el ancho SUBE por escalones y la
   rejilla se hace más densa con él, así que la pantalla grande sirve para ver
   más, no para ver lo mismo con más vacío a los lados.
   Se para en 1600px a propósito: más allá, una línea de texto se vuelve
   incómoda de leer y las tarjetas se estiran sin ganar información. */
:root { --app-w: 820px; }
@media (min-width: 1280px) { :root { --app-w: 1100px; } }
@media (min-width: 1600px) { :root { --app-w: 1340px; } }
@media (min-width: 1920px) { :root { --app-w: 1600px; } }

@media (min-width: 768px) {
  .stats-grid     { grid-template-columns: repeat(4, 1fr); }
  .form-grid      { grid-template-columns: repeat(3, 1fr); }
  .products-grid  { grid-template-columns: repeat(3, 1fr); }
  .finance-summary{ grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  /* `right: auto` es imprescindible. Con `left: 50%` y el `right: 0` que heredan de
     la regla base, un elemento fijo queda sobre-restringido y su ancho se resuelve
     como 50% del viewport: en un monitor de 1536px medía 768px y el `max-width`
     nunca llegaba a aplicarse. Por eso "820px" en realidad nunca fue 820 — era
     medio viewport. Soltando `right` y fijando el ancho, el número manda de verdad. */
  .app-main, .bottom-nav {
    left: 50%; right: auto; transform: translateX(-50%);
    width: min(var(--app-w), 100%); max-width: none;
  }
  /* max() protege el caso raro de una ventana estrecha con --app-w grande:
     el padding nunca se vuelve negativo ni empuja la marca fuera de pantalla. */
  .app-header { padding: 0 max(1rem, calc(50% - var(--app-w) / 2 + 1rem)); }
  .toast-container { right: max(.75rem, calc(50% - var(--app-w) / 2 + .75rem)); }
}
/* Más ancho = más columnas. Las tarjetas mantienen su tamaño cómodo en vez de
   estirarse: es la diferencia entre aprovechar la pantalla y sólo ocuparla. */
@media (min-width: 1280px) {
  .products-grid { grid-template-columns: repeat(4, 1fr); }
  .form-grid     { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1600px) {
  .products-grid { grid-template-columns: repeat(5, 1fr); }
}
/* ── Reducir movimiento NO es apagar la app (23-ago-2026) ──────────────────
   Esto decia `*, *::before, *::after { transition-duration: .01ms }`: mataba TODAS
   las transiciones de la app, no solo el movimiento. Con el ajuste de "reducir
   movimiento" activado — que en Android lo enciende solo el ahorro de bateria — la
   app perdia de golpe el color al pasar de estado, el brillo del vidrio, el
   desvanecido de los paneles y el crecimiento de las barras: todo saltaba de un
   fotograma al siguiente y se veia PLANA, sin la profundidad del liquid glass.
   Reducir movimiento significa quitar el DESPLAZAMIENTO, no el feedback: se quedan
   color, fondo, borde, sombra y opacidad (que son los que explican el cambio de
   estado) y se van los transform y los bucles infinitos. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: color, background-color, border-color, box-shadow, opacity, fill, stroke !important;
    transition-duration: .18s !important;
  }
}


/* ════════════════════════════════════════════
   LIQUID GLASS — translucent surfaces + blur
   ════════════════════════════════════════════ */
.app-header, .bottom-nav {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
}
.stat-card, .section-card, .chart-card, .config-section,
.form-card, .fin-card, .item-row, .insight-card,
.login-card, .ws-sheet, .config-profile-card, .plan-card,
.family-card, .product-card, .msg-bubble {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi);
}
.insight-card {
  background: linear-gradient(135deg, var(--brand-glow), var(--glass-bg-2)) !important;
}
.stat-card:hover, .chart-card:hover, .section-card:hover {
  border-color: var(--glass-border);
  box-shadow: var(--glow), inset 0 1px 0 var(--glass-hi);
}
/* glass ambient glow behind app */
.app-screen::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 40% at 80% 0%, var(--brand-glow), transparent 70%),
    radial-gradient(50% 35% at 0% 100%, var(--brand-glow), transparent 70%);
  opacity: .5;
}
/* bar chart follows accent */
.bar-fill { background: linear-gradient(180deg, var(--brand-bright) 0%, var(--brand) 60%, var(--brand-dim) 100%) !important; }

/* ── ACCENT SWATCHES ── */
.accent-row { display: flex; gap: .6rem; flex-wrap: wrap; }
/* Los círculos de color van en fila y muy juntos: con el ::after de 44px, el área
   de cada uno invadía la del vecino y ganaba el que pinta encima — medido, elegir
   un acento seleccionaba OTRO. Aquí el objetivo se agranda DE VERDAD (un selector
   de color se ve mejor grande) y se sale de la lista del ::after. */
.accent-sw {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: transform var(--transition), border-color var(--transition);
  position: relative;
}
@media (pointer: coarse) { .accent-sw { width: 40px; height: 40px; } }
.accent-sw:hover { transform: scale(1.12); }
.accent-sw.active { border-color: var(--white); box-shadow: 0 0 12px currentColor; }

/* Swatch de color personalizado (input type=color) */
.accent-custom {
  display: flex; align-items: center; justify-content: center;
  background: conic-gradient(from 0deg, #f43f5e, #f59e0b, #22c55e, #06b6d4, #6366f1, #d946ef, #f43f5e);
  overflow: hidden;
}
.accent-custom input[type="color"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: none; padding: 0;
}
.accent-custom svg { pointer-events: none; filter: drop-shadow(0 0 2px rgba(0,0,0,.5)); }

/* Preview del logo en Config */
.biz-logo-preview {
  width: 72px; height: 72px; border-radius: 14px; flex-shrink: 0;
  background: var(--surface-2); border: 2px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer; padding: 6px; text-align: center;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.biz-logo-preview:hover { border-color: var(--brand); box-shadow: 0 0 12px var(--brand-glow); }
.biz-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }


/* ── LOGO IMAGE (imagen oficial PNG) ── */
.logo-img { display:block; width:100%; height:100%; object-fit:contain; }
.header-logo .logo-img { object-fit: contain; }

.logo-img-full, .logo-img-small { border-radius: 50%; object-fit: cover; }

/* (2-ago) .coin-front / .coin-back eliminados con el splash viejo: el splash actual
   usa .ss-coin-face / .ss-coin-back y ninguna vista referenciaba ya estas clases. */
/* ícono familia SmartCoin redondo */
.family-icon { border-radius: 50%; overflow: hidden; }
.family-icon .logo-img { width:100%; height:100%; object-fit: cover; border-radius:50%; }

/* ── DONUT interactivo ── */
.donut-seg { cursor: pointer; transition: opacity .18s ease, filter .18s ease, transform .18s ease; transform-box: fill-box; transform-origin: center; }
.donut:hover .donut-seg:not(.active) { opacity: .35; }
.donut-seg.active { opacity: 1; filter: brightness(1.18); transform: scale(1.04); }
.donut-center-val, .donut-center-lbl { transition: opacity .15s ease; }
.donut-leg-item {
  background: none; border: none; width: 100%; text-align: left; cursor: pointer;
  padding: .15rem .25rem; border-radius: 6px;
  transition: background .15s ease;
}
/* Los renglones de la leyenda son BOTONES (filtran el donut) y medían 22px de alto.
   Aquí NO sirve el truco del ::after invisible que usan los demás controles: están
   apilados uno debajo de otro, así que un área de 44px se comería la del vecino y
   tocar una categoría seleccionaría la de al lado — peor que el objetivo pequeño.
   Se agranda la fila DE VERDAD con padding, que además airea el gráfico. Solo en
   pantallas de dedo: en escritorio la densidad compacta es la correcta. */
@media (pointer: coarse) {
  .donut-leg-item { padding: .55rem .35rem; min-height: 44px; }
  .donut-legend   { gap: .15rem; }
}
.donut-leg-item:hover, .donut-leg-item.active { background: var(--glass-hi); }
.donut-leg-item.active .donut-leg-lbl { color: var(--text); font-weight: 600; }

/* ══════════════════════════════════════════════════════
   CITAS (APPOINTMENTS) — full module styles
══════════════════════════════════════════════════════ */

.appt-section-header {
  display: flex; align-items: center; gap: .4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 1rem 0 .5rem; padding-bottom: .35rem;
  border-bottom: 1px solid var(--border);
}
.appt-section-header svg { color: var(--brand); }

.appt-list { display: flex; flex-direction: column; gap: .5rem; }

.appt-card {
  display: flex; align-items: stretch; gap: .75rem;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  padding: .75rem;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi);
  transition: transform var(--transition), box-shadow var(--transition);
}
.appt-card:active { transform: scale(.99); }
.appt-card.past { border-left-color: var(--border-2); opacity: .75; }

.appt-card-left { display: flex; align-items: flex-start; }
.appt-date-badge {
  display: flex; flex-direction: column; align-items: center;
  background: var(--brand-pale); border: 1px solid var(--brand-glow);
  border-radius: var(--radius-sm); padding: .3rem .5rem; min-width: 40px;
}
.appt-card.past .appt-date-badge { background: var(--surface-2); border-color: var(--border); }
.appt-date-day {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem; font-weight: 700; color: var(--brand-text);
  line-height: 1;
}
.appt-card.past .appt-date-day { color: var(--text-muted); }
.appt-date-mon {
  font-family: 'JetBrains Mono', monospace;
  font-size: .55rem; font-weight: 600; color: var(--text-muted);
  letter-spacing: .04em; margin-top: 2px;
}

.appt-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.appt-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.appt-client { font-weight: 600; font-size: .9rem; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt-status { font-size: .65rem; font-family: 'JetBrains Mono', monospace; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.appt-service { font-size: .8rem; color: var(--brand-text); font-weight: 500; }
.appt-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; font-size: .72rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
.appt-notes { font-size: .75rem; color: var(--text-2); font-style: italic; border-left: 2px solid var(--border-2); padding-left: .5rem; margin-top: .15rem; }

.appt-card-actions { display: flex; flex-direction: column; gap: .3rem; justify-content: flex-start; }
.appt-act-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border); color: var(--text-muted);
  background: var(--surface); transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
  flex-shrink: 0;
}
.appt-act-btn:active { transform: scale(.9); }
.appt-act-btn.appt-wa    { border-color: rgba(37,211,102,.4); color: #25D366; }
.appt-act-btn.appt-wa:hover { background: rgba(37,211,102,.12); border-color: rgba(37,211,102,.7); }
.appt-act-btn.appt-check { border-color: rgba(0,200,150,.4); color: var(--success-text); }
.appt-act-btn.appt-check:hover { background: rgba(0,200,150,.12); border-color: var(--success); }
.appt-act-btn.appt-edit  { border-color: rgba(0,180,216,.3); color: var(--info-text); }
.appt-act-btn.appt-edit:hover { background: rgba(0,180,216,.1); }
.appt-act-btn.appt-x     { border-color: rgba(255,45,68,.3); color: var(--danger-text); }
.appt-act-btn.appt-x:hover { background: rgba(255,45,68,.1); }

/* ══ WA INVITATION MODAL ══ */
.wa-modal-wrap {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: flex-end;
}
.wa-overlay-bg {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.65);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.wa-modal-sheet {
  position: relative; z-index: 1;
  width: 100%; max-width: 480px; margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 1.5rem 1.25rem 2rem;
  box-shadow: 0 -8px 40px rgba(0,0,0,.6);
  max-height: 90dvh; overflow-y: auto;
}
.wa-close {
  position: absolute; top: .9rem; right: 1rem;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--border-2);
  color: var(--text-muted); background: var(--surface-2);
  transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}
.wa-close:hover { color: var(--text); border-color: var(--border); }

.wa-modal-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
  text-align: center; margin-bottom: 1.1rem;
}

/* Preview card */
.wa-preview-card {
  background: linear-gradient(145deg, #0d1f1a 0%, #0a1612 100%);
  border: 1px solid rgba(37,211,102,.25);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0 30px rgba(37,211,102,.08), inset 0 1px 0 rgba(255,255,255,.06);
  margin-bottom: 1rem;
}
.wa-preview-header {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem; border-bottom: 1px solid rgba(37,211,102,.15);
  background: linear-gradient(135deg, rgba(37,211,102,.1) 0%, transparent 60%);
}
.wa-biz-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(37,211,102,.4);
}
.wa-biz-name-txt { font-weight: 700; font-size: .95rem; color: #fff; }
.wa-preview-subtitle { font-size: .65rem; color: rgba(37,211,102,.7); font-family: 'JetBrains Mono', monospace; }
.wa-divider { height: 1px; background: rgba(37,211,102,.1); margin: 0; }

.wa-msg-body { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.wa-greeting { font-size: .9rem; color: var(--text); }
.wa-greeting strong { color: #25D366; }
.wa-confirm-txt { font-size: .82rem; color: var(--text-2); margin-bottom: .25rem; }

.wa-detail-row {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .85rem; color: var(--text);
}
.wa-detail-icon { color: #25D366; flex-shrink: 0; margin-top: 2px; }
.wa-time-txt { font-family: 'JetBrains Mono', monospace; }

.wa-tolerance-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3);
  border-radius: 40px; padding: .25rem .65rem;
  font-size: .7rem; font-weight: 600; color: var(--warning-text);
  font-family: 'JetBrains Mono', monospace;
  margin-top: .25rem; align-self: flex-start;
}
.wa-footer-note { font-size: .78rem; color: var(--text-muted); font-style: italic; margin-top: .35rem; }
.wa-signature { font-size: .78rem; color: rgba(37,211,102,.6); font-weight: 600; }

.wa-actions { display: flex; flex-direction: column; gap: .6rem; }
.btn-wa-send {
  display: flex; align-items: center; justify-content: center; gap: .65rem;
  /* CONTRASTE (auditoria 12-ago-2026): blanco sobre el verde de WhatsApp da 1.98:1 y
     no se lee. Se conserva el VERDE —es el codigo de marca que hace reconocible el
     boton— y se oscurece el TEXTO: 7.49:1. Cambiar el verde habria costado el
     reconocimiento; cambiar el texto no cuesta nada. */
  background: #25D366; color: #0B2E13;
  font-family: 'JetBrains Mono', monospace; font-size: .9rem; font-weight: 700;
  padding: .9rem 1.5rem; border-radius: var(--radius);
  text-decoration: none; text-align: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.4);
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn-wa-send:hover { background: #20bb5a; color: #0B2E13; box-shadow: 0 6px 28px rgba(37,211,102,.55); }
.btn-wa-send:active { transform: scale(.97); }
.btn-wa-cal {
  display: flex; align-items: center; justify-content: center; gap: .65rem;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border-2);
  font-family: 'JetBrains Mono', monospace; font-size: .82rem; font-weight: 600;
  padding: .75rem 1.5rem; border-radius: var(--radius);
  text-decoration: none; text-align: center;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}
.btn-wa-cal:hover { border-color: var(--info); color: var(--info-text); background: rgba(0,180,216,.06); }

/* ══ SALE DETAIL BOTTOM SHEET ══ */
.detail-sheet-wrap {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: flex-end;
}
.detail-sheet-bg {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.detail-sheet {
  position: relative; z-index: 1;
  width: 100%; max-width: 520px; margin: 0 auto;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-top: 2px solid var(--brand);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 1.25rem 1.25rem 2.5rem;
  box-shadow: 0 -12px 50px rgba(0,0,0,.7);
  animation: sheetSlideUp .22s cubic-bezier(.25,.46,.45,.94);
}
@keyframes sheetSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
/* Zona de agarre real (23-ago-2026): la barrita se ve igual, lo arrastrable mide 28px. */
.detail-sheet-handle {
  width: 64px; height: 28px; margin: 0 auto .75rem;
  display: flex; align-items: center; justify-content: center;
  background: none; touch-action: none; cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.detail-sheet-handle::before {
  content: ""; width: 36px; height: 4px; border-radius: 99px; background: var(--border-2);
}
.detail-sheet-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--border-2);
  color: var(--text-muted); background: var(--surface);
}
.detail-sheet-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem; font-weight: 700; color: var(--white);
  margin-bottom: 1rem; padding-right: 2rem;
}
.detail-rows { display: flex; flex-direction: column; gap: .5rem; }
.detail-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .75rem;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font-size: .82rem;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.detail-row-label { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.detail-row-val { color: var(--text); font-weight: 600; text-align: right; }
.detail-row-val.profit { color: var(--success-text); }
.detail-row-val.amount { color: var(--white); font-family: 'JetBrains Mono', monospace; font-size: .95rem; }
.detail-row-val.payment {
  background: var(--brand-pale); color: var(--brand);
  border-radius: 40px; padding: .15rem .6rem;
  font-size: .7rem; font-family: 'JetBrains Mono', monospace; font-weight: 700;
  letter-spacing: .04em;
}

/* Long-press indicator */
.item-row {
  position: relative;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  cursor: pointer;
}
.item-row::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--brand-pale); opacity: 0; pointer-events: none;
  transition: opacity .15s ease;
}
.item-row.pressing::after { opacity: 1; }
.item-row:active { transform: scale(.99); }

/* ══ CLIENT AUTOCOMPLETE DROPDOWN ══ */
.client-suggestions {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius); z-index: 200;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.client-suggestion {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; padding: .6rem .85rem; gap: .15rem;
  border-bottom: 1px solid var(--border);
  text-align: left; color: var(--text);
  transition: background var(--transition);
}
.client-suggestion:last-child { border-bottom: none; }
.client-suggestion:hover, .client-suggestion:focus { background: var(--brand-pale); outline: none; }
.cs-name { font-size: .88rem; font-weight: 600; }
.cs-meta { font-size: .7rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

/* ══ SOLO PROVIDER LABEL ══ */
.provider-solo-label {
  display: block; margin-top: .4rem;
  font-size: .8rem; color: var(--brand-text);
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
}
/* Hide the select when in solo mode */
#f-appt-provider-wrap[data-solo="true"] select { display: none; }

/* ══ CONFLICT / AVAILABILITY indicator ══ */
.conflict-warn {
  display: flex; align-items: flex-start; gap: .55rem;
  background: rgba(255,45,68,.08); border: 1px solid rgba(255,45,68,.3);
  border-radius: var(--radius-sm); padding: .6rem .8rem;
  font-size: .78rem; color: var(--danger-text); line-height: 1.5;
}
.conflict-warn svg { flex-shrink:0; margin-top:2px; }
.conflict-warn strong { color: var(--white); }
.conflict-warn em { color: var(--text-2); font-style: normal; }
.conflict-free-row { margin-top: .35rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; font-size: .74rem; color: var(--text-2); }
.conflict-free-chip {
  background: rgba(0,200,150,.1); border: 1px solid rgba(0,200,150,.3);
  color: var(--success-text); border-radius: 40px; padding: .15rem .55rem;
  font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 600;
}
.conflict-ok {
  display: flex; align-items: center; gap: .45rem;
  background: rgba(0,200,150,.06); border: 1px solid rgba(0,200,150,.25);
  border-radius: var(--radius-sm); padding: .5rem .8rem;
  font-size: .78rem; color: var(--success-text);
}
.conflict-ok svg { color: var(--success-text); }

/* Conflict badge on card */
.appt-card.conflict { border-left-color: var(--danger); }
.appt-conflict-badge {
  position: absolute; top: .45rem; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(255,45,68,.1); border: 1px solid rgba(255,45,68,.4);
  border-radius: 40px; padding: .15rem .55rem;
  font-size: .62rem; font-weight: 700; color: var(--danger-text);
  font-family: 'JetBrains Mono', monospace; letter-spacing: .04em;
  white-space: nowrap; z-index: 1;
}
.appt-card { position: relative; }

/* Provider chip on card */
.appt-provider-chip {
  display: inline-flex; align-items: center;
  background: rgba(194,24,91,.07); border: 1px solid rgba(194,24,91,.2);
  border-radius: 40px; padding: .1rem .5rem;
  font-size: .65rem; font-weight: 600; color: var(--brand-text);
  font-family: 'JetBrains Mono', monospace;
  margin-top: .15rem;
}

/* ══ ANALYTICS ══ */
.analytics-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .5rem; margin-bottom: .75rem;
}
.analytics-kpi {
  display: flex; flex-direction: column; align-items: center;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: .65rem .5rem;
  text-align: center;
}
.kpi-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.05rem; font-weight: 700; color: var(--brand-text);
}
.kpi-lbl {
  font-size: .6rem; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .06em; font-family: 'JetBrains Mono', monospace; margin-top: 2px;
}

.analytics-chart-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: .6rem;
}
.analytics-chart-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: .75rem;
}

/* Bar chart (hours / days) */
.ah-chart {
  display: flex; align-items: flex-end; gap: 2px;
  height: 60px; padding-bottom: 20px; position: relative;
}
.ah-col { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; height: 100%; }
.ah-bar-wrap { flex: 1; display: flex; align-items: flex-end; width: 100%; }
.ah-bar {
  width: 100%; border-radius: 2px 2px 0 0;
  background: var(--brand-pale); border: 1px solid rgba(194,24,91,.3);
  transition: height .3s ease;
  min-height: 3px;
}
.ah-bar.top { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 6px var(--brand-glow); }
.ah-lbl {
  font-size: .55rem; color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 3px; white-space: nowrap;
}

/* Provider stats */
.prov-stats-list { display: flex; flex-direction: column; gap: .65rem; }
.prov-stat-card {
  display: flex; align-items: center; gap: .65rem;
}
.prov-stat-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-pale); border: 1px solid var(--brand-glow);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: .85rem; color: var(--brand-text);
}
.prov-stat-body { flex: 1; min-width: 0; }
.prov-stat-name { display: block; font-size: .82rem; font-weight: 600; color: var(--text); }
.prov-stat-meta { display: block; font-size: .68rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-bottom: .3rem; }
.prov-stat-bar-bg {
  height: 4px; background: var(--border-2); border-radius: 2px; overflow: hidden; margin-bottom: .2rem;
}
.prov-stat-bar-fill { height: 100%; background: var(--brand); border-radius: 2px; transition: width .4s ease; }
.prov-stat-pct { font-size: .62rem; color: var(--brand-text); font-family: 'JetBrains Mono', monospace; font-weight: 600; }

/* ══════════════════════════════════════════════════════
   LIQUID GLASS UI — SmartSell Premium (iOS 26 inspired)
   Frosted glass, depth, motion, tactile feel
══════════════════════════════════════════════════════ */

/* ── Liquid Glass tokens ── */
:root {
  --glass-bg-premium:      rgba(255,255,255,.045);
  --glass-bg-hover:        rgba(255,255,255,.075);
  --glass-bg-pressed:      rgba(255,255,255,.10);
  --glass-border-premium:  rgba(255,255,255,.10);
  --glass-border-bright:   rgba(255,255,255,.18);
  --glass-blur-premium:    blur(28px) saturate(1.6);
  --glass-shadow-card:     0 2px 24px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.06);
  --glass-shadow-hover:    0 8px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.10);
  --glass-shadow-brand:    0 4px 24px var(--brand-glow), 0 1px 4px rgba(0,0,0,.3);
  --liquid-radius:         18px;
  --liquid-radius-sm:      12px;
  --liquid-radius-lg:      24px;
  --spring: cubic-bezier(.34,1.56,.64,1);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  /* Curva de las hojas (23-ago-2026). La misma que SmartCoin y que iOS: sale
     rapido y aterriza sin rebotar. El rebote se reserva para lo que trae impulso
     del dedo, no para algo que se abrio de un toque. */
  --ease-drawer: cubic-bezier(.32,.72,0,1);
}

/* TEMA CLARO DEL GLASS (2-ago) — CAUSA RAÍZ del bug repetido de contraste.
   Estos tokens existían SOLO aquí arriba, con valores pensados para fondo oscuro:
   un velo BLANCO translúcido y bordes blancos. En tema claro eso es blanco sobre
   blanco, y como las tarjetas los aplican con `!important` ninguna regla posterior
   podía corregirlo: la tarjeta desaparecía y el texto quedaba flotando ilegible.
   Es lo que veía la clienta con el plan vencido en el muro de planes.
   En claro el vidrio se hace con velo BLANCO OPACO + borde y sombra oscuros. */
[data-theme="light"] {
  --glass-bg-premium:     rgba(255,255,255,.72);
  --glass-bg-hover:       rgba(255,255,255,.85);
  --glass-bg-pressed:     rgba(255,255,255,.94);
  --glass-border-premium: rgba(26,10,20,.12);
  --glass-border-bright:  rgba(26,10,20,.20);
  --glass-shadow-card:    0 2px 18px rgba(90,40,70,.10), 0 1px 3px rgba(90,40,70,.06), inset 0 1px 0 rgba(255,255,255,.8);
  --glass-shadow-hover:   0 8px 32px rgba(90,40,70,.16), 0 2px 8px rgba(90,40,70,.10), inset 0 1px 0 rgba(255,255,255,.9);
  --glass-shadow-brand:   0 4px 24px var(--brand-glow), 0 1px 4px rgba(90,40,70,.14);
}

/* ── Upgrade stat cards to Liquid Glass ── */
.stat-card {
  position: relative; overflow: hidden;
  background: var(--glass-bg-premium) !important;
  -webkit-backdrop-filter: var(--glass-blur-premium);
  backdrop-filter: var(--glass-blur-premium);
  border: 1px solid var(--glass-border-premium) !important;
  border-radius: var(--liquid-radius) !important;
  box-shadow: var(--glass-shadow-card);
  transition: transform .22s var(--spring), box-shadow .22s ease, border-color .2s ease;
  cursor: default;
  -webkit-user-select: none; user-select: none;
}
/* Specular highlight top edge */
.stat-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 50%);
  border-radius: inherit; pointer-events: none;
}
/* Bottom glow based on data-color */
.stat-card[data-color="rose"]::after   { background: radial-gradient(ellipse at 50% 120%, rgba(194,24,91,.3) 0%, transparent 70%); }
.stat-card[data-color="green"]::after  { background: radial-gradient(ellipse at 50% 120%, rgba(0,200,100,.25) 0%, transparent 70%); }
.stat-card[data-color="orange"]::after { background: radial-gradient(ellipse at 50% 120%, rgba(255,100,0,.25) 0%, transparent 70%); }
.stat-card[data-color="blue"]::after   { background: radial-gradient(ellipse at 50% 120%, rgba(37,99,235,.25) 0%, transparent 70%); }
.stat-card::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  /* Pulso "vivo" elegante: el glow inferior respira lento (como los paneles de
     Finanzas). Escalonado por color para que no latan todos a la vez. */
  animation: statGlowBreathe 4.4s ease-in-out infinite;
  will-change: opacity;
}
@keyframes statGlowBreathe { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.stat-card[data-color="rose"]::after   { animation-delay: 0s;   }
.stat-card[data-color="green"]::after  { animation-delay: .55s; }
.stat-card[data-color="orange"]::after { animation-delay: 1.1s; }
.stat-card[data-color="blue"]::after   { animation-delay: 1.65s;}
/* Con movimiento reducido el brillo deja de RECORRER, pero se queda puesto en
   diagonal: la tarjeta conserva el reflejo del vidrio en vez de quedarse mate. */
@media (prefers-reduced-motion: reduce) { .stat-card::after { animation: none; opacity: .55; } }
.stat-card:active { transform: scale(.97); box-shadow: var(--glass-shadow-brand); }

/* ── Upgrade chart cards ── */
.chart-card {
  background: var(--glass-bg-premium) !important;
  -webkit-backdrop-filter: var(--glass-blur-premium);
  backdrop-filter: var(--glass-blur-premium);
  border: 1px solid var(--glass-border-premium) !important;
  border-radius: var(--liquid-radius) !important;
  box-shadow: var(--glass-shadow-card);
  overflow: hidden; position: relative;
  transition: box-shadow .2s ease;
}
.chart-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  pointer-events: none;
}

/* ── Upgrade section cards ── */
.section-card {
  background: var(--glass-bg-premium) !important;
  -webkit-backdrop-filter: var(--glass-blur-premium);
  backdrop-filter: var(--glass-blur-premium);
  border: 1px solid var(--glass-border-premium) !important;
  border-radius: var(--liquid-radius) !important;
  box-shadow: var(--glass-shadow-card);
  position: relative; overflow: hidden;
}
.section-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  pointer-events: none;
}

/* ── Upgrade form cards ── */
.form-card:not(.collapsed) {
  background: var(--glass-bg-premium) !important;
  -webkit-backdrop-filter: var(--glass-blur-premium);
  backdrop-filter: var(--glass-blur-premium);
  border: 1px solid var(--glass-border-bright) !important;
  border-radius: var(--liquid-radius) !important;
  box-shadow: var(--glass-shadow-brand);
  animation: glassSlideDown .35s var(--ease-out-expo);
}
@keyframes glassSlideDown {
  from { opacity: 0; transform: translateY(-12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Premium buttons ── */
.btn-primary {
  background: linear-gradient(135deg, var(--brand-bright) 0%, var(--brand) 100%) !important;
  box-shadow: 0 4px 16px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.15) !important;
  border: none !important;
  border-radius: var(--liquid-radius-sm) !important;
  transition: transform .18s var(--spring), box-shadow .18s ease !important;
}
.btn-primary:active { transform: scale(.96) !important; }
.btn-primary:hover  { box-shadow: 0 6px 24px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.2) !important; }

.btn-ghost {
  background: rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border-premium) !important;
  border-radius: var(--liquid-radius-sm) !important;
  transition: background .15s ease, transform .15s ease !important;
}
.btn-ghost:active { transform: scale(.96) !important; background: rgba(255,255,255,.10) !important; }

.btn-fab-header {
  border-radius: var(--liquid-radius-sm) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform .2s var(--spring), box-shadow .2s ease !important;
}
.btn-fab-header:active { transform: scale(.93) !important; }

/* ── Bar chart upgrades ── */
.bar-fill {
  border-radius: 6px 6px 0 0 !important;
  background: linear-gradient(180deg,
    var(--brand-bright) 0%,
    var(--brand) 60%,
    var(--brand-dim) 100%) !important;
  box-shadow: 0 -2px 8px var(--brand-glow);
  animation: barGrow .5s var(--ease-out-expo) !important;
}
.bar-col.bar-clickable { cursor: pointer; }
.bar-col.bar-clickable:hover .bar-fill {
  filter: brightness(1.25);
  box-shadow: 0 -4px 14px var(--brand-glow);
}
.bar-col.bar-active .bar-fill {
  transform: scaleY(1.06); transform-origin: bottom;
  transition: transform .15s var(--spring);
}
.bar-tap-hint {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  font-size: .55rem; color: var(--brand-text); font-family: 'JetBrains Mono', monospace;
  opacity: 0; transition: opacity .15s ease; pointer-events: none;
  background: var(--glass-bg-premium); border-radius: 4px; padding: 1px 4px;
}
.bar-col.bar-clickable:hover .bar-tap-hint { opacity: 1; }
.bar-track { position: relative; }
.chart-hint {
  font-size: .68rem; color: var(--text-muted); text-align: center;
  margin-top: .4rem; font-family: 'JetBrains Mono', monospace;
  animation: fadeIn .4s ease .3s both;
}

/* ── Donut upgrade — glow via pseudo-element, NO CSS filter ── */
.donut-svg-wrap::after {
  box-shadow: 0 0 28px var(--brand-glow) !important;
}
.donut-seg {
  transition: opacity .18s ease, filter .18s ease, transform .2s var(--spring) !important;
}
.donut-seg.active { filter: brightness(1.18) !important; transform: scale(1.05); }
.donut:hover .donut-seg:not(.active) { opacity: .3; }

/* ══ BAR DETAIL PANEL ══ */
.bar-detail-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: flex-end;
  opacity: 0; transition: opacity .3s ease;
}
.bar-detail-overlay.open { opacity: 1; }
.bar-detail-overlay.hidden { display: none !important; }

.bar-detail-sheet {
  width: 100%; max-height: 75dvh;
  background: linear-gradient(160deg, rgba(30,14,30,.92) 0%, rgba(10,10,20,.96) 100%);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  backdrop-filter: blur(40px) saturate(1.8);
  border: 1px solid var(--glass-border-bright);
  border-bottom: none;
  border-radius: var(--liquid-radius-lg) var(--liquid-radius-lg) 0 0;
  box-shadow: 0 -8px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
  padding: 0 1.25rem 2rem;
  transform: translateY(100%);
  transition: transform .35s var(--ease-out-expo);
  display: flex; flex-direction: column; overflow: hidden;
}
.bar-detail-overlay.open .bar-detail-sheet { transform: translateY(0); }

.bar-detail-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.2); margin: .75rem auto .5rem;
  flex-shrink: 0;
}
.bar-detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: .5rem 0 1rem; flex-shrink: 0;
  border-bottom: 1px solid var(--glass-border-premium);
  margin-bottom: .75rem;
}
.bar-detail-period {
  font-family: 'JetBrains Mono', monospace; font-size: .72rem;
  font-weight: 700; color: var(--brand); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: .4rem;
}
.bar-detail-kpis { display: flex; gap: 1.25rem; }
.bd-kpi { display: flex; flex-direction: column; align-items: flex-start; }
.bd-kpi-val {
  font-size: 1rem; font-weight: 700; color: var(--white);
  font-family: 'JetBrains Mono', monospace;
}
.bd-kpi-lbl { font-size: .62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

.bar-detail-close {
  background: rgba(255,255,255,.08); border: 1px solid var(--glass-border-premium);
  border-radius: 50%; width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.bar-detail-close:hover { background: rgba(255,255,255,.14); color: var(--white); }

.bar-detail-list {
  overflow-y: auto; flex: 1;
  scrollbar-width: thin; scrollbar-color: var(--border-2) transparent;
}
.bd-sale-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 0; border-bottom: 1px solid var(--border);
  animation: fadeIn .2s ease;
}
.bd-sale-row:last-child { border-bottom: none; }
.bd-sale-product { font-size: .88rem; font-weight: 600; color: var(--white); }
.bd-sale-meta    { font-size: .7rem; color: var(--text-muted); margin-top: 2px; }
.bd-sale-amount  {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: .9rem; color: var(--brand); flex-shrink: 0; padding-left: .75rem;
}

/* ══ LONG-PRESS CONTEXT MENU ══ */
.ctx-menu-overlay {
  position: fixed; inset: 0; z-index: 800;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease;
}
.ctx-menu-overlay.open { opacity: 1; }
.ctx-menu-overlay.hidden { display: none !important; }

.ctx-menu {
  background: linear-gradient(160deg, rgba(30,20,40,.95) 0%, rgba(12,10,18,.98) 100%);
  -webkit-backdrop-filter: blur(40px) saturate(2);
  backdrop-filter: blur(40px) saturate(2);
  border: 1px solid var(--glass-border-bright);
  border-radius: var(--liquid-radius-lg);
  box-shadow: 0 24px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.10);
  min-width: 240px; max-width: 320px;
  overflow: hidden;
  transform: scale(.88); opacity: 0;
  transition: transform .28s var(--spring), opacity .2s ease;
}
.ctx-menu-overlay.open .ctx-menu { transform: scale(1); opacity: 1; }

.ctx-menu-title {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  padding: .9rem 1rem .5rem;
}
.ctx-menu-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem; cursor: pointer; width: 100%;
  background: none; border: none; color: var(--text); text-align: left;
  font-size: .9rem; transition: background .12s ease;
  border-top: 1px solid var(--border);
}
.ctx-menu-item:first-of-type { border-top: none; }
.ctx-menu-item:hover, .ctx-menu-item:active { background: rgba(255,255,255,.06); }
.ctx-menu-item svg { flex-shrink: 0; color: var(--brand); }
.ctx-menu-item.danger { color: var(--danger-text); }
.ctx-menu-item.danger svg { color: var(--danger-text); }
.ctx-menu-item.ctx-cancel {
  color: var(--text-muted); justify-content: center;
  background: rgba(255,255,255,.03) !important;
  font-size: .82rem;
}

/* Haptic press feedback on long-pressable elements */
.long-pressable {
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
}
.long-pressable.pressing {
  animation: pressScale .6s var(--ease-out-expo) forwards;
}
@keyframes pressScale {
  0%   { transform: scale(1); }
  60%  { transform: scale(.97); box-shadow: var(--glass-shadow-brand); }
  100% { transform: scale(.97); }
}

/* ── Nav bottom glow ── */
.nav-item.active {
  position: relative;
}
.nav-item.active::after {
  content: ''; position: absolute;
  bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 2px; border-radius: 1px;
  background: var(--brand);
  box-shadow: 0 0 8px var(--brand-glow);
}

/* ── Inputs premium ── */
.inp {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--glass-border-premium) !important;
  border-radius: var(--liquid-radius-sm) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.inp:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-glow) !important;
  outline: none !important;
  background: rgba(255,255,255,.06) !important;
}

/* ── Sub-tab pills liquid style ── */
.sub-tab {
  border-radius: var(--liquid-radius-sm) !important;
  transition: background .18s ease, color .18s ease, transform .15s var(--spring) !important;
}
.sub-tab.active {
  background: var(--brand) !important;
  box-shadow: 0 2px 12px var(--brand-glow) !important;
  transform: scale(1.03) !important;
}

/* ── Toast premium ── */
.toast {
  border-radius: var(--liquid-radius-sm) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
}

/* ── Appointment card glass upgrade ── */
.appt-card {
  -webkit-backdrop-filter: var(--glass-blur-premium) !important;
  backdrop-filter: var(--glass-blur-premium) !important;
  border-radius: var(--liquid-radius) !important;
  box-shadow: var(--glass-shadow-card) !important;
  transition: transform .2s var(--spring), box-shadow .2s ease !important;
}
.appt-card:active { transform: scale(.985) !important; }

/* ── Item rows hover ── */
.item-row {
  border-radius: var(--liquid-radius-sm);
  transition: background .12s ease;
  margin: 0 -.5rem; padding-left: .5rem !important; padding-right: .5rem !important;
}
.item-row:hover { background: rgba(255,255,255,.04); }

/* ── Scrollbar global premium ── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-dim); }

/* ══════════════════════════════════════════════════════
   LIQUID GLASS — ALL TABS (ventas, inventario, finanzas, IA, config)
   Coherencia visual total sin importar el sistema operativo
══════════════════════════════════════════════════════ */

/* ── Period nav (< Mayo 2026 >) ── */
.period-nav {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--glass-bg-premium) !important;
  -webkit-backdrop-filter: var(--glass-blur-premium);
  backdrop-filter: var(--glass-blur-premium);
  border: 1px solid var(--glass-border-premium);
  border-radius: var(--liquid-radius);
  padding: .35rem .5rem;
  box-shadow: var(--glass-shadow-card);
  margin-bottom: .75rem;
}
.period-arrow {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--glass-border-premium) !important;
  border-radius: var(--liquid-radius-sm) !important;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .15s var(--spring) !important;
  flex-shrink: 0;
}
.period-arrow:hover  { background: rgba(255,255,255,.12) !important; }
.period-arrow:active { transform: scale(.9) !important; }
.period-arrow:disabled { opacity: .3; pointer-events: none; }
.period-label {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: .85rem; color: var(--white); flex: 1; text-align: center;
  letter-spacing: .04em;
}
.select-sm {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--glass-border-premium) !important;
  border-radius: var(--liquid-radius-sm) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--text) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
  padding: .3rem .6rem !important;
}
.select-sm:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 2px var(--brand-glow) !important;
  outline: none !important;
}

/* ── AI Insight card ── */
.insight-card {
  background: linear-gradient(135deg, rgba(194,24,91,.12) 0%, var(--glass-bg-premium) 60%) !important;
  -webkit-backdrop-filter: var(--glass-blur-premium);
  backdrop-filter: var(--glass-blur-premium);
  border: 1px solid rgba(194,24,91,.25) !important;
  border-radius: var(--liquid-radius) !important;
  box-shadow: 0 4px 32px rgba(194,24,91,.10), var(--glass-shadow-card) !important;
  position: relative; overflow: hidden;
}
.insight-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194,24,91,.4), transparent);
  pointer-events: none;
}

/* ── Finance cards (fin-card) ── */
.fin-card {
  background: var(--glass-bg-premium) !important;
  -webkit-backdrop-filter: var(--glass-blur-premium);
  backdrop-filter: var(--glass-blur-premium);
  border: 1px solid var(--glass-border-premium) !important;
  border-radius: var(--liquid-radius) !important;
  box-shadow: var(--glass-shadow-card) !important;
  overflow: hidden; position: relative;
}
.fin-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  pointer-events: none;
}

/* ── Product cards (inventario) ── */
.product-card {
  background: var(--glass-bg-premium) !important;
  -webkit-backdrop-filter: var(--glass-blur-premium);
  backdrop-filter: var(--glass-blur-premium);
  border: 1px solid var(--glass-border-premium) !important;
  border-radius: var(--liquid-radius) !important;
  box-shadow: var(--glass-shadow-card) !important;
  transition: transform .2s var(--spring), box-shadow .2s ease, border-color .2s ease !important;
  position: relative; overflow: hidden;
  /* Columna flexible para que `.product-actions { margin-top: auto }` pueda anclar
     los botones al pie y las fichas de una misma fila terminen alineadas. */
  display: flex; flex-direction: column;
}
.product-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  pointer-events: none;
}
.product-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--glass-shadow-hover) !important;
  border-color: var(--glass-border-bright) !important;
}
.product-card:active { transform: scale(.98) !important; }

/* ── Config sections ── */
.config-section {
  background: var(--glass-bg-premium) !important;
  -webkit-backdrop-filter: var(--glass-blur-premium);
  backdrop-filter: var(--glass-blur-premium);
  border: 1px solid var(--glass-border-premium) !important;
  border-radius: var(--liquid-radius) !important;
  box-shadow: var(--glass-shadow-card) !important;
  overflow: hidden;
}
.config-section h3 {
  border-radius: var(--liquid-radius) var(--liquid-radius) 0 0;
  transition: background .15s ease;
}
.config-section h3:hover { background: rgba(255,255,255,.04); }

/* ── Sale rows / item rows — premium list items ── */
.item-row {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid transparent;
  border-radius: var(--liquid-radius-sm) !important;
  margin: 0 -.25rem .25rem !important;
  padding: .65rem .75rem !important;
  transition: background .15s ease, border-color .15s ease, transform .15s var(--spring) !important;
}
.item-row:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: var(--glass-border-premium) !important;
  transform: translateX(2px) !important;
}
.item-row:active { transform: scale(.98) !important; }

/* ── Sale list rows (in ventas tab) ── */
.sale-row, [class*="sale-item"] {
  background: rgba(255,255,255,.025);
  border: 1px solid transparent;
  border-radius: var(--liquid-radius-sm);
  padding: .65rem .75rem;
  transition: background .15s ease, border-color .15s ease;
}
.sale-row:hover { background: rgba(255,255,255,.06); border-color: var(--glass-border-premium); }

/* ── Bottom navigation bar ── */
.bottom-nav {
  background: rgba(8,4,16,.85) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  backdrop-filter: blur(40px) saturate(1.8);
  border-top: 1px solid var(--glass-border-premium) !important;
  box-shadow: 0 -4px 30px rgba(0,0,0,.3) !important;
}
/* B3 FIX: Light mode nav bar */
[data-theme="light"] .bottom-nav {
  background: rgba(255,255,255,.92) !important;
  border-top-color: rgba(194,24,91,.15) !important;
  box-shadow: 0 -2px 20px rgba(194,24,91,.08) !important;
}
[data-theme="light"] .nav-item { color: var(--text-2) !important; }
[data-theme="light"] .nav-item.active { color: var(--brand) !important; }
/* Medido en tema claro: las etiquetas de las pestañas NO activas salían #9A8FA0
   —el gris del tema OSCURO— sobre un nav casi blanco: 3.05:1, ilegible. Con esta
   regla, más específica y dentro del tema, el token se resuelve donde debe
   (#6B5563, 6.5:1) sin depender de qué regla estaba ganando antes. */
[data-theme="light"] .bottom-nav .nav-item { color: var(--text-muted); }

/* ── Header bar ── */
.app-header {
  /* Glass premium (estilo Instagram): más transparente + blur fuerte. El
     contenido pasa por DEBAJO (ver .app-main) y se desenfoca detrás. */
  background: rgba(8,4,16,.55) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  backdrop-filter: blur(24px) saturate(1.7);
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.22) !important;
}
/* B3 FIX: Light mode header — glass translúcido (antes .92 = casi sólido, se veía
   estático). Más transparente para que el contenido pase por detrás desenfocado. */
[data-theme="light"] .app-header {
  background: rgba(255,255,255,.6) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border-bottom-color: rgba(194,24,91,.15) !important;
  box-shadow: 0 4px 22px rgba(194,24,91,.08) !important;
}
[data-theme="light"] .app-header * { color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; }

/* MODO CLARO: NADA de texto blanco en campos. Fuerza color legible en inputs y
   evita el blanco que iOS aplica a los form controls. */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select,
[data-theme="light"] .chat-textarea {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; }
[data-theme="light"] .ws-pill { color: var(--text) !important; }

/* ── Panel headers (h2 in tabs) ── */
.panel-header h2 {
  background: linear-gradient(135deg, var(--white) 0%, rgba(255,255,255,.7) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* B2 FIX: Light mode panel headers */
/* Modo claro + accesibilidad (daltonismo): título y mes SÓLIDOS de alto
   contraste, sin gradiente transparente que baja la legibilidad. */
[data-theme="light"] .panel-header h2 {
  background: none;
  -webkit-text-fill-color: var(--text);
  color: var(--text) !important;
}
[data-theme="light"] .period-label,
[data-theme="light"] .chart-sub,
[data-theme="light"] .chart-title { color: var(--text) !important; }
/* Nombre del usuario en Configuración: legible en claro (antes casi blanco) */
[data-theme="light"] #cfg-name,
[data-theme="light"] .cfg-user-name,
[data-theme="light"] #cfg-email { color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; }
/* B2 FIX: Light mode text — stat values, fin values, list items */
[data-theme="light"] .stat-val,
[data-theme="light"] .fin-val,
[data-theme="light"] .item-title,
[data-theme="light"] .card-title,
[data-theme="light"] .donut-leg-val,
[data-theme="light"] .terms-title,
[data-theme="light"] .tutorial-title,
[data-theme="light"] .tutorial-desc strong,
[data-theme="light"] .form-title,
[data-theme="light"] .product-name,
[data-theme="light"] .product-stock,
[data-theme="light"] .appt-client,
[data-theme="light"] .section-title { color: var(--text) !important; }
[data-theme="light"] .donut-center-val { fill: var(--text) !important; }
[data-theme="light"] .item-amount { color: var(--text-2) !important; }
[data-theme="light"] .cfg-body, [data-theme="light"] .cfg-desc { color: var(--text-2); }

/* ── Secondary buttons ── */
.btn-secondary {
  background: rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border-premium) !important;
  border-radius: var(--liquid-radius-sm) !important;
  transition: background .15s ease, transform .15s var(--spring) !important;
}
.btn-secondary:hover  { background: rgba(255,255,255,.10) !important; }
.btn-secondary:active { transform: scale(.96) !important; }

/* ── Input shake animation (error feedback) ── */
@keyframes inputShake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.inp-error-shake {
  animation: inputShake .4s ease;
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(255,45,68,.25) !important;
}

/* ── Analytics mini cards (inside citas) ── */
.analytics-chart-card {
  background: var(--glass-bg-premium) !important;
  -webkit-backdrop-filter: var(--glass-blur-premium);
  backdrop-filter: var(--glass-blur-premium);
  border: 1px solid var(--glass-border-premium) !important;
  border-radius: var(--liquid-radius) !important;
  box-shadow: var(--glass-shadow-card) !important;
}
.analytics-kpi {
  background: var(--glass-bg-premium) !important;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border-premium) !important;
  border-radius: var(--liquid-radius-sm) !important;
  padding: .75rem !important;
}

/* ── Provider stat cards ── */
.prov-stat-card {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--glass-border-premium);
  border-radius: var(--liquid-radius-sm);
  padding: .75rem;
  transition: background .15s ease;
}
.prov-stat-card:hover { background: rgba(255,255,255,.06); }

/* ── Appt form fields — phone now optional visual ── */
#f-appt-phone::placeholder { opacity: .5; font-style: italic; }
label[for="f-appt-phone"]::after { content: ' (opcional)'; font-size:.7em; color: var(--text-muted); font-weight:400; }

/* ── Workspace pill ── */
.ws-pill {
  background: var(--glass-bg-premium) !important;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-color: var(--glass-border-premium) !important;
  border-radius: var(--liquid-radius-sm) !important;
  transition: border-color .15s ease, background .15s ease !important;
}
.ws-pill:hover {
  background: var(--glass-bg-hover) !important;
  border-color: var(--brand) !important;
}

/* ── Paywall screen glass ── */
.plan-card {
  background: var(--glass-bg-premium) !important;
  -webkit-backdrop-filter: var(--glass-blur-premium);
  backdrop-filter: var(--glass-blur-premium);
  border: 1px solid var(--glass-border-premium) !important;
  border-radius: var(--liquid-radius-lg) !important;
  box-shadow: var(--glass-shadow-card) !important;
}

/* ── Sales form card open animation ── */
#sale-form:not(.collapsed),
#product-form:not(.collapsed),
#finance-form:not(.collapsed) {
  animation: glassSlideDown .3s var(--ease-out-expo);
}

/* ── Floating sale button premium ── */
.fab {
  background: linear-gradient(135deg, var(--brand-bright), var(--brand)) !important;
  box-shadow: 0 6px 24px var(--brand-glow), 0 2px 8px rgba(0,0,0,.3) !important;
  border-radius: 50% !important;
  transition: transform .2s var(--spring), box-shadow .2s ease !important;
}
.fab:hover  { transform: scale(1.08) translateY(-2px) !important; }
.fab:active { transform: scale(.95) !important; }

/* ══ T&C MODAL + TUTORIAL ══ */
#terms-modal, #tutorial-modal {
  position: fixed; inset: 0; z-index: 10100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.75);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 1rem;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
#terms-modal.open, #tutorial-modal.open { opacity: 1; pointer-events: auto; }
.terms-card {
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius-lg); padding: 1.75rem;
  max-width: 480px; width: 100%; max-height: 85dvh; overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.7);
}
.terms-title { font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: .5rem; }
.terms-body { font-size: .8rem; color: var(--text-2); line-height: 1.65; max-height: 220px; overflow-y: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .85rem 1rem; margin: .85rem 0; }
.terms-check-row { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: 1rem; cursor: pointer; }
/* B1 FIX: Custom checkbox — native checkbox often invisible in PWA/WebView context */
.terms-check-row input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;
  border: 2px solid var(--brand); border-radius: 5px;
  background: transparent; cursor: pointer; position: relative;
  transition: background .15s ease, border-color .15s ease;
}
.terms-check-row input[type="checkbox"]:checked {
  background: var(--brand); border-color: var(--brand);
}
.terms-check-row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute; left: 5px; top: 1px;
  width: 6px; height: 11px;
  border: 2.5px solid #fff; border-top: none; border-left: none;
  transform: rotate(45deg);
}
.terms-check-row label { font-size: .82rem; color: var(--text); cursor: pointer; line-height: 1.5; }
.terms-check-row a { color: var(--brand); }
.tutorial-card {
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius-lg); padding: 2rem 1.75rem 1.5rem;
  max-width: 400px; width: 100%; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.7);
  animation: tutCardIn .3s ease;
}
@keyframes tutCardIn { from { transform: translateY(20px) scale(.97); opacity:0; } to { transform: none; opacity:1; } }
.tutorial-icon { width: 72px; height: 72px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; background: var(--surface-2); border: 1px solid var(--border-2); }
.tutorial-dots { display: flex; gap: .4rem; justify-content: center; margin-bottom: 1rem; }
.tutorial-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-2); transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; }
.tutorial-dot.active { background: var(--brand); width: 20px; border-radius: 4px; }
.tutorial-title { font-family: 'JetBrains Mono', monospace; font-size: 1.15rem; font-weight: 700; color: var(--white); margin-bottom: .5rem; }
.tutorial-desc { font-size: .88rem; color: var(--text-2); line-height: 1.65; margin-bottom: .75rem; }
.tutorial-desc strong { color: var(--white); }
.tutorial-tip { font-size: .78rem; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .55rem .85rem; margin-bottom: 1.25rem; line-height: 1.5; }
.tutorial-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
/* N16: text-shadow garantiza el texto blanco legible sobre cualquier color dinámico. */
.tutorial-btn-primary { flex: 1; padding: .75rem 1.25rem; border-radius: var(--radius); border: none; background: var(--brand); font-family: 'JetBrains Mono', monospace; font-size: .85rem; font-weight: 700; color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.4); box-shadow: 0 4px 16px rgba(0,0,0,.2); cursor: pointer; transition: opacity .15s ease, transform .15s ease; }
.tutorial-btn-primary:hover { opacity: .9; transform: translateY(-1px); }
.tutorial-btn-ghost { padding: .65rem 1rem; border-radius: var(--radius); border: 1px solid var(--border-2); background: none; font-family: 'JetBrains Mono', monospace; font-size: .8rem; color: var(--text-2); cursor: pointer; transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; }
.tutorial-btn-ghost:hover { color: var(--text); border-color: var(--border); }
.tutorial-skip { display: block; margin: .75rem auto 0; font-size: .75rem; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: .25rem .5rem; }

/* ══ BUSINESS PHOTO ══ */
.biz-photo-section { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.biz-photo-preview { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; background: var(--surface-2); border: 2px solid var(--border-2); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 1.6rem; font-weight: 700; color: var(--brand-text); font-family: 'JetBrains Mono', monospace; cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition); }
.biz-photo-preview:hover { border-color: var(--brand); box-shadow: 0 0 12px var(--brand-glow); }
.biz-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.biz-photo-actions { flex: 1; }
.biz-photo-actions p { font-size: .78rem; color: var(--text-muted); margin-bottom: .5rem; }

/* ══ DANGER ZONE / RESET ══ */
.danger-zone { background: rgba(255,45,68,.05); border: 1px solid rgba(255,45,68,.25); border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: .6rem; }
.danger-zone-title { font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 700; color: var(--danger-text); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .45rem; display: flex; align-items: center; gap: .35rem; }
.danger-zone p { font-size: .78rem; color: var(--text-muted); margin-bottom: .65rem; line-height: 1.5; }

/* ══ INVITATION IMAGE ══ */
.inv-img-wrap { position: fixed; inset: 0; z-index: 10200; display: flex; align-items: flex-end; background: rgba(0,0,0,.75); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.inv-img-sheet { width: 100%; max-width: 520px; margin: 0 auto; background: var(--surface-2); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border: 1px solid var(--border-2); padding: 1.25rem 1.25rem 2.5rem; box-shadow: 0 -12px 50px rgba(0,0,0,.7); animation: sheetSlideUp .22s cubic-bezier(.25,.46,.45,.94); }
.inv-img-preview { width: 100%; border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; display: block; box-shadow: 0 4px 20px rgba(0,0,0,.5); }
.inv-img-label { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; text-align: center; margin-bottom: .85rem; }
.btn-share-wa { display: flex; align-items: center; justify-content: center; gap: .65rem; background: #25D366; color: #0B2E13; font-family: 'JetBrains Mono', monospace; font-size: .9rem; font-weight: 700; padding: .9rem 1.5rem; border-radius: var(--radius); border: none; cursor: pointer; width: 100%; margin-bottom: .6rem; box-shadow: 0 4px 20px rgba(37,211,102,.4); transition: background var(--transition), transform var(--transition); text-decoration: none; }
.btn-share-wa:active { transform: scale(.97); }
.btn-download-img { display: flex; align-items: center; justify-content: center; gap: .65rem; background: var(--surface); border: 1px solid var(--border-2); color: var(--text-2); font-family: 'JetBrains Mono', monospace; font-size: .82rem; font-weight: 600; padding: .7rem 1.5rem; border-radius: var(--radius); cursor: pointer; width: 100%; transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); }
.btn-download-img:hover { border-color: var(--text-2); color: var(--text); }

/* ══ CONFIRM BUTTON ══ */
.appt-act-btn.appt-confirm { border-color: rgba(0,200,150,.35); color: #00b37a; }
.appt-act-btn.appt-confirm:hover { background: rgba(0,200,150,.1); border-color: #00b37a; }

/* ══ SHEETS EXPORT BUTTON ══ */
/* Mismo criterio que los botones de WhatsApp: el verde se QUEDA (es el código que
   hace reconocible el botón de Google Sheets), pero el blanco encima da 3.51:1.
   Se oscurece el texto en vez del fondo → 5.0:1 sin perder la identidad. */
.btn-sheets { display: flex; align-items: center; gap: .5rem; background: #0F9D58; color: #04180C; font-family: 'JetBrains Mono', monospace; font-size: .8rem; font-weight: 700; padding: .6rem 1rem; border-radius: var(--radius); border: none; cursor: pointer; transition: opacity var(--transition), transform var(--transition); margin-top: .5rem; }
.btn-sheets:hover { opacity: .9; }
.btn-sheets:active { transform: scale(.97); }

#reset-confirm-overlay.open { opacity: 1 !important; pointer-events: auto !important; }

/* ── Reset scope buttons ── */
.reset-scope-btn {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: .85rem .5rem; border-radius: var(--radius);
  border: 1px solid var(--border-2); background: var(--surface-2);
  color: var(--text-2); font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; font-weight: 600; line-height: 1.3; text-align: center;
  cursor: pointer; transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}
.reset-scope-btn small { color: var(--text-muted); font-weight: 400; font-size: .92em; }
.reset-scope-btn:hover { border-color: var(--warning); color: var(--text); transform: translateY(-1px); }
.reset-scope-btn:active { transform: scale(.96); }
.reset-scope-btn.reset-scope-all {
  border-color: rgba(255,45,68,.4); color: var(--danger-text);
  background: rgba(255,45,68,.06);
}
.reset-scope-btn.reset-scope-all small { color: var(--danger-text); opacity: .8; }
.reset-scope-btn.reset-scope-all:hover { border-color: var(--danger); background: rgba(255,45,68,.12); }

/* ══════════════════════════════════════════════════════
   SPRINT CHANGES — all new feature styles
══════════════════════════════════════════════════════ */

/* ── Discount coupon field (F3) ── */
.discount-row { display: flex; gap: .4rem; align-items: stretch; }
.discount-row select { flex: 0 0 60px; border-radius: var(--radius-sm); border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); font-size: .85rem; padding: 0 .4rem; }
.discount-row input { flex: 1; }
.discount-hint { font-size: .75rem; color: var(--text-muted); margin-top: .25rem; }

/* Selector de plan de pago (Total/Parcial/Cuotas) + bloque de cuotas del form de venta.
   Theme-aware: usa vars (--surface/--text/--border/--accent) para modo claro y oscuro. */
.plan-seg { display: flex; gap: .4rem; }
.plan-opt {
  flex: 1; padding: .55rem .4rem; border-radius: 10px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-2);
  color: var(--text-muted); font-size: .82rem; font-weight: 600; transition: color, background-color, border-color, box-shadow, transform, opacity .15s;   /* era `all`: animaba tambien el layout */
}
.plan-opt:hover { border-color: var(--accent); }
.plan-opt.active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: var(--accent); color: var(--accent);
}
.cuotas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cuotas-grid .field.full { grid-column: 1 / -1; }
.cuotas-preview { font-size: .8rem; color: var(--text-muted); margin-top: .55rem; min-height: 1em; }
.cuotas-hint { font-size: .78rem; line-height: 1.3; color: var(--text-muted); margin: 0 0 .6rem; padding: .5rem .65rem; border-radius: .5rem; background: color-mix(in srgb, var(--accent, #6c5ce7) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent, #6c5ce7) 22%, transparent); }
@media (max-width: 480px) { .cuotas-grid { grid-template-columns: 1fr; } }

/* ── Sale status badge (C2) ── */
.sale-status-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: .2rem .5rem; border-radius: 20px; margin-left: .4rem;
}
.sale-status-badge.cancelled { background: rgba(255,45,68,.12); color: var(--danger-text); }
.sale-status-badge.edited { background: rgba(0,200,150,.10); color: #00b37a; }
.item-row.cancelled-sale { opacity: .65; }

/* ── Edit buttons in lists (C1, C3, C4) ── */
.btn-action.edit { color: var(--brand); border-color: rgba(194,24,91,.25); }
.btn-action.edit:hover { background: rgba(194,24,91,.12); border-color: var(--brand); }
.btn-action.cancel-sale { color: var(--warning-text); border-color: rgba(255,193,7,.25); }
.btn-action.cancel-sale:hover { background: rgba(255,193,7,.10); }

/* ── Product photo slots (F1) ── */
.photo-slots { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.photo-slot {
  width: 72px; height: 72px; border-radius: var(--radius-sm);
  border: 1.5px dashed var(--border-2); background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden; position: relative;
  transition: border-color .15s ease, background .15s ease;
  flex-shrink: 0;
}
.photo-slot:hover { border-color: var(--brand); background: var(--brand-pale); }
.photo-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius-sm) - 1px); }
.photo-slot-icon { color: var(--text-muted); }
.photo-slot-del {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: rgba(255,45,68,.85); border: none;
  color: #fff; font-size: 11px; line-height: 18px; text-align: center;
  cursor: pointer; display: none;
}
.photo-slot:hover .photo-slot-del { display: block; }
.photo-slot-lbl { font-size: .62rem; color: var(--text-muted); text-align: center; margin-top: .2rem; }

/* ── Product share / promo panel (F2, F4) ── */
.product-share-btn {
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  padding: .35rem .6rem; border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border-premium); background: rgba(255,255,255,.04);
  color: var(--text-2); font-size: .72rem; cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
}
.product-share-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-pale); }
.product-photo-thumb { width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; }

/* 4A: acciones compactas del producto (Editar + ⋯) — siempre caben */
.product-actions { display: flex; gap: .4rem; margin-top: .6rem; }
.product-actions .btn-action { flex: 1; height: 34px; display: flex; align-items: center; justify-content: center; }
.product-card.pressing { transform: scale(.97); transition: transform .12s ease; }

/* 4B: hoja de acciones (bottom sheet premium reutilizable) */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .22s ease; padding: 0 0 env(safe-area-inset-bottom);
}
.sheet-overlay.open { opacity: 1; }
.sheet-card {
  width: 100%; max-width: 460px; background: var(--surface, #14101c);
  border: 1px solid var(--glass-border-premium, rgba(255,255,255,.08));
  border-bottom: none; border-radius: 22px 22px 0 0;
  padding: .7rem 1rem 1.1rem; transform: translateY(100%);
  transition: transform .3s var(--ease-drawer);
  box-shadow: 0 -12px 40px rgba(0,0,0,.5);
}
.sheet-overlay.open .sheet-card { transform: translateY(0); }
/* Zona de agarre: la barrita se ve igual, pero lo que se puede tocar y arrastrar
   mide 28px de alto en vez de 4. `touch-action:none` es obligatorio o el navegador
   se queda el gesto vertical y el pointermove nunca llega (initSheetDrag). */
.sheet-handle {
  width: 64px; height: 28px; margin: .1rem auto .5rem;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none;
}
.sheet-handle:active { cursor: grabbing; }
.sheet-handle::before {
  content: ""; width: 42px; height: 4px; border-radius: 99px;
  background: var(--border-2, rgba(255,255,255,.2));
}
.prod-menu-title { font-weight: 700; font-size: .95rem; margin-bottom: .7rem; text-align: center; color: var(--text); }
.prod-menu-list { display: flex; flex-direction: column; gap: .35rem; }
.prod-menu-item {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  padding: .85rem .9rem; border-radius: 14px; border: 1px solid transparent;
  background: rgba(255,255,255,.04); color: var(--text); font-size: .9rem;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.prod-menu-item:hover { background: var(--brand-pale); border-color: var(--brand); }
.prod-menu-item:active { transform: scale(.98); }
.prod-menu-item .prod-menu-ic { display: flex; color: var(--brand); }
.prod-menu-item.danger { color: var(--danger-text); }
.prod-menu-item.danger .prod-menu-ic { color: var(--danger-text); }
.prod-menu-item.danger:hover { background: rgba(255,45,68,.1); border-color: var(--danger); }

/* ── Promo image modal (F4) ── */
#promo-modal {
  position: fixed; inset: 0; z-index: 10300;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
#promo-modal.open { opacity: 1; pointer-events: auto; }
.promo-sheet {
  width: 100%; max-width: 480px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 1.25rem 1.25rem 2.5rem;
  box-shadow: 0 -12px 50px rgba(0,0,0,.6);
  animation: sheetSlideUp .22s cubic-bezier(.25,.46,.45,.94);
  /* FIX: el sheet podía superar la pantalla y cortar el preview arriba */
  max-height: 92dvh; overflow-y: auto;
}
.promo-sheet-title { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: .95rem; color: var(--white); margin-bottom: 1rem; }
.promo-photo-select { display: flex; gap: .5rem; margin-bottom: 1rem; overflow-x: auto; }
.promo-photo-opt { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; cursor: pointer; border: 2px solid transparent; transition: border-color .15s ease; flex-shrink: 0; }
.promo-photo-opt.selected { border-color: var(--brand); }
.promo-discount-row { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.promo-discount-row input { flex: 1; }
.promo-preview { width: 100%; border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; display: flex; justify-content: center; }
/* El canvas es 1:1 (800×800). Lo limitamos por ALTO para que la pieza completa
   (incluido el texto de arriba) se vea sin cortarse ni verse desproporcionada. */
.promo-preview canvas { display: block; width: auto; max-width: 100%; max-height: 46vh; border-radius: var(--radius); }
.promo-share-row { display: flex; gap: .5rem; }
.promo-share-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .7rem .5rem; border-radius: var(--radius-sm); border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-2); font-size: .78rem; font-weight: 600; cursor: pointer; transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; }
.promo-share-btn:hover { border-color: var(--brand); color: var(--brand); }
.promo-share-btn.wa { background: #25D366; border-color: #25D366; color: #fff; }
.promo-share-btn.wa:hover { background: #1ebe5a; }

/* ── Finance currency converter (FIN1) ── */
.fin-currency-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.fin-currency-row label { font-size: .78rem; color: var(--text-muted); flex-shrink: 0; }
.fin-currency-row select { flex: 1; font-size: .82rem; padding: .35rem .5rem; border-radius: var(--radius-sm); border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); }
.fin-currency-note { font-size: .72rem; color: var(--brand); }

/* ── Enterprise plan card (CFG1) ── */
.enterprise-card {
  background: linear-gradient(135deg, rgba(124,58,237,.12) 0%, rgba(194,24,91,.08) 100%);
  border: 1px solid rgba(124,58,237,.3); border-radius: var(--radius-lg);
  padding: 1.25rem; position: relative; overflow: hidden;
}
.enterprise-card::before {
  content: 'ENTERPRISE'; position: absolute; top: .75rem; right: .75rem;
  font-family: 'JetBrains Mono', monospace; font-size: .6rem; font-weight: 700;
  letter-spacing: .1em; color: rgba(124,58,237,.8);
  border: 1px solid rgba(124,58,237,.4); border-radius: 20px; padding: .15rem .5rem;
}
.enterprise-price { font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 700; color: #7C3AED; margin-bottom: .25rem; }
.enterprise-price small { font-size: .75rem; color: var(--text-muted); font-weight: 400; }
.enterprise-desc { font-size: .8rem; color: var(--text-2); margin-bottom: 1rem; line-height: 1.5; }
.enterprise-features { list-style: none; margin-bottom: 1rem; }
.enterprise-features li { font-size: .8rem; color: var(--text-2); padding: .2rem 0; display: flex; align-items: center; gap: .5rem; }
.enterprise-features li svg { color: #7C3AED; flex-shrink: 0; }
.btn-enterprise {
  display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  background: linear-gradient(135deg, #7C3AED, #A855F7);
  color: #fff; border: none; border-radius: var(--radius); font-family: 'JetBrains Mono', monospace;
  font-size: .85rem; font-weight: 700; padding: .85rem 1.5rem; cursor: pointer;
  transition: opacity .15s ease, transform .15s ease; box-shadow: 0 4px 16px rgba(124,58,237,.4);
}
.btn-enterprise:hover { opacity: .9; transform: translateY(-1px); }
.btn-enterprise:active { transform: scale(.97); }

/* ── Enterprise PREMIUM (desplegado, llamativo, animado) ── */
.enterprise-premium { isolation: isolate; }
.enterprise-premium::before { display: none; } /* evita ribbon duplicado */
.enterprise-premium {
  background: linear-gradient(135deg, rgba(124,58,237,.18) 0%, rgba(194,24,91,.12) 55%, rgba(217,119,6,.12) 100%);
  border: 1px solid rgba(167,139,250,.5);
  box-shadow: 0 8px 34px rgba(124,58,237,.28);
  animation: entGlow 3.4s ease-in-out infinite;
}
@keyframes entGlow {
  0%,100% { box-shadow: 0 8px 30px rgba(124,58,237,.25); border-color: rgba(167,139,250,.45); }
  50%     { box-shadow: 0 10px 44px rgba(168,85,247,.5); border-color: rgba(217,119,6,.55); }
}
/* Brillo que barre la tarjeta */
.enterprise-shine {
  position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform: skewX(-18deg); pointer-events: none;
  animation: entShine 4.2s ease-in-out infinite;
}
@keyframes entShine { 0% { left: -60%; } 55%,100% { left: 130%; } }
.enterprise-ribbon {
  position: absolute; top: 12px; right: -34px; transform: rotate(45deg);
  background: linear-gradient(135deg, #D97706, #F59E0B); color: #1a1208;
  font-family: 'JetBrains Mono', monospace; font-size: .58rem; font-weight: 800;
  letter-spacing: .14em; padding: .25rem 2.6rem; box-shadow: 0 2px 8px rgba(0,0,0,.4); z-index: 2;
}
.enterprise-crown { color: #F5B301; margin-bottom: .35rem; filter: drop-shadow(0 2px 6px rgba(245,179,1,.5)); animation: crownFloat 3s ease-in-out infinite; }
@keyframes crownFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
.btn-enterprise-primary { margin-bottom: .5rem; background: linear-gradient(135deg, #D97706, #F59E0B, #A855F7); background-size: 200% 100%; animation: entBtnFlow 5s ease infinite; }
@keyframes entBtnFlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.btn-enterprise-ghost { background: transparent; border: 1px solid rgba(167,139,250,.45); box-shadow: none; color: var(--text); font-size: .78rem; padding: .6rem 1rem; }
.btn-enterprise-ghost:hover { background: rgba(124,58,237,.12); }
.pulse { animation: entBtnFlow 5s ease infinite, btnPulse 2.2s ease-in-out infinite; }
@keyframes btnPulse {
  0%,100% { box-shadow: 0 4px 16px rgba(124,58,237,.4); transform: scale(1); }
  50%     { box-shadow: 0 6px 26px rgba(245,179,1,.55); transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .enterprise-premium, .enterprise-shine, .enterprise-crown, .btn-enterprise-primary, .pulse { animation: none; }
}

/* ── SmartClub sync card ── */
.smartclub-sync-card {
  margin-top: .8rem; padding: .9rem 1rem; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(6,182,212,.10), rgba(124,58,237,.08));
  border: 1px solid rgba(6,182,212,.28);
}
.smartclub-sync-head { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .7rem; }
.smartclub-sync-head svg { color: #06B6D4; flex-shrink: 0; margin-top: 2px; }
.smartclub-sync-title { font-weight: 700; font-size: .85rem; color: var(--text); }
.smartclub-sync-sub { font-size: .74rem; color: var(--text-2); line-height: 1.45; margin-top: .15rem; }
.btn-smartclub-sync {
  width: 100%; padding: .7rem 1rem; border-radius: var(--radius);
  background: linear-gradient(135deg, #06B6D4, #0891B2); color: #fff; border: none;
  font-weight: 700; font-size: .82rem; cursor: pointer; transition: transform .15s ease, opacity .15s ease;
}
.btn-smartclub-sync:hover { opacity: .92; transform: translateY(-1px); }
.btn-smartclub-sync:active { transform: scale(.97); }

/* ── Appointment currency field (S6) ── */
#f-appt-currency-wrap { transition: opacity .15s ease; }

/* ── Appointment success action bar (B5) ── */
.appt-success-bar {
  display: flex; gap: .5rem; margin-top: .75rem; padding: .75rem;
  background: rgba(0,200,150,.08); border: 1px solid rgba(0,200,150,.2);
  border-radius: var(--radius); animation: glassSlideDown .3s var(--ease-out-expo);
}
.appt-success-bar .btn-ghost { flex: 1; font-size: .8rem; }
.appt-success-bar .btn-primary { flex: 1; font-size: .8rem; }

/* ── Finance edit mode ── */
.finance-form-edit-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem; color: var(--brand); font-weight: 600; margin-bottom: .5rem;
}

/* ── Sale form inline product selection (S1) ── */
.sale-product-info {
  display: none; align-items: center; gap: .5rem;
  font-size: .75rem; color: var(--brand); margin-top: .3rem;
}
.sale-product-info.visible { display: flex; }
.sale-product-info svg { flex-shrink: 0; }


/* ════════════════════════════════════════════════════════════
   iOS PWA SAFE-AREA FIX  (notch arriba + home indicator abajo)
   ANTIBUGS: con viewport-fit=cover, el indicador de inicio del
   iPhone tapaba los iconos del bottom-nav. Reservamos el inset
   inferior en el nav y el inset superior en el header.
   Reutilizable en SmartCoin y cualquier PWA full-bleed.
   ════════════════════════════════════════════════════════════ */
.app-header {
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: border-box;
}
.app-main {
  /* El contenido arranca en el tope y se le da padding para no quedar tapado por
     el header → al hacer scroll, el contenido pasa por DETRÁS del header glass. */
  top: 0;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}
.bottom-nav {
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}
/* Garantiza que los iconos del nav SIEMPRE sean visibles y con color */
.bottom-nav .nav-item { color: var(--text-muted); }
/* Esta es la regla que GANA sobre `.nav-item.active` (más específica), así que es
   la que hay que corregir para que la etiqueta de la pestaña activa se lea. */
.bottom-nav .nav-item.active { color: var(--brand-text); }
.bottom-nav .nav-item svg {
  width: 20px; height: 20px;
  stroke: currentColor;
  opacity: 1; visibility: visible;
}
/* Toast por encima del nav + inset */
.toast-container {
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + .75rem);
}


/* ════════════════════════════════════════════════════════════
   F3.1 — PDF adjunto en producto  +  F1.5 nota en menú
   ════════════════════════════════════════════════════════════ */
.prod-pdf-zone {
  margin-top: .4rem;
  border: 1.5px dashed var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  transition: border-color .15s ease, background .15s ease;
  cursor: pointer;
}
.prod-pdf-zone:hover { border-color: var(--brand); background: var(--brand-pale); }
.prod-pdf-empty, .prod-pdf-filled {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem .8rem; color: var(--text-2); font-size: .82rem;
}
.prod-pdf-empty svg, .prod-pdf-filled svg { color: var(--brand); flex-shrink: 0; }
.prod-pdf-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text); font-weight: 500;
}
.prod-pdf-del {
  width: 22px; height: 22px; flex-shrink: 0; border: none; cursor: pointer;
  border-radius: 50%; background: rgba(255,45,68,.85); color: #fff;
  font-size: 13px; line-height: 22px; text-align: center;
}
.prod-menu-notes {
  font-size: .8rem; color: var(--text-2); line-height: 1.45;
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: .55rem .7rem; margin: .1rem 0 .6rem;
  white-space: pre-wrap; max-height: 140px; overflow-y: auto;
}


/* ════════════════════════════════════════════════════════════
   F2.3 — Estados de venta (pipeline / CRM)
   ════════════════════════════════════════════════════════════ */
.sale-status-badge.stage-pendiente {
  background: rgba(217,119,6,.18); color: #F59E0B;
  border: 1px solid rgba(245,158,11,.35);
}
.sale-status-badge.stage-seguimiento {
  background: rgba(37,99,235,.18); color: #60A5FA;
  border: 1px solid rgba(96,165,250,.35);
}
.item-row.pending-sale { opacity: .94; }
.item-row.pending-sale .item-amount { opacity: .7; }
.stage-switch {
  display: flex; gap: .4rem; margin: .35rem 0 .2rem; flex-wrap: wrap;
}
.stage-chip {
  flex: 1; min-width: 92px; padding: .5rem .4rem; cursor: pointer;
  border-radius: var(--radius-sm); font-size: .72rem; font-weight: 600;
  background: var(--surface-2); color: var(--text-2);
  border: 1.5px solid var(--border-2); transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
}
.stage-chip:hover { border-color: var(--brand); color: var(--text); }
.stage-chip.active {
  background: var(--brand-pale); color: var(--brand);
  border-color: var(--brand);
}


/* ════════════════════════════════════════════════════════════
   F3.3 — Imagen de fondo de plantilla (preview en identidad)
   ════════════════════════════════════════════════════════════ */
.biz-bg-preview {
  width: 96px; height: 60px; flex-shrink: 0; cursor: pointer;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1.5px dashed var(--border-2); background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; text-align: center;
  transition: border-color .15s ease;
}
.biz-bg-preview:hover { border-color: var(--brand); }


/* ════════════════════════════════════════════════════════════
   F2.2 — Acciones de gestión de colaboradores
   ════════════════════════════════════════════════════════════ */
.team-member { position: relative; }
.team-actions { display: flex; gap: .3rem; margin-left: .4rem; }
.team-actions .btn-action {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px solid var(--border-2); color: var(--text-2); cursor: pointer;
}
.team-actions .btn-action:hover { color: var(--brand); border-color: var(--brand); }
.team-actions .btn-action.danger:hover { color: var(--danger-text); border-color: var(--danger); }


/* ════════════════════════════════════════════════════════════
   F2.1 — Clientes (CRM)
   ════════════════════════════════════════════════════════════ */
.clients-list { display: flex; flex-direction: column; gap: .55rem; }
.client-card {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .8rem .85rem; border-radius: var(--radius-md, 14px);
  background: var(--glass-bg, rgba(255,255,255,.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,.08));
}
.client-avatar {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.05rem; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dim, #7C3AED));
}
.client-main { flex: 1; min-width: 0; }
.client-name { font-weight: 600; font-size: .95rem; color: var(--text); }
.client-meta { font-size: .75rem; color: var(--text-muted); margin-top: .1rem; }
.client-stats { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .4rem; }
.client-chip {
  font-size: .68rem; font-weight: 600; padding: .18rem .5rem;
  border-radius: 999px; background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border-2);
}
.client-chip.strong { background: var(--brand-pale); color: var(--brand-text); border-color: var(--brand); }
.client-chip.appt { background: rgba(8,145,178,.14); color: #22d3ee; border-color: rgba(8,145,178,.4); }
.client-last { font-size: .7rem; color: var(--text-muted); margin-top: .35rem; }
.client-actions { display: flex; flex-direction: column; gap: .3rem; }
.client-actions .btn-action {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px solid var(--border-2); color: var(--text-2); cursor: pointer; text-decoration: none;
}
.client-actions .btn-action:hover { color: var(--brand); border-color: var(--brand); }
.client-actions .btn-action.danger:hover { color: var(--danger-text); border-color: var(--danger); }


/* ════════════════════════════════════════════════════════════
   POTENCIADOR AV — Branding "moneda": logo redondo + acabado coin
   en TODAS las superficies de marca. (border-radius ya aplicado;
   aquí añadimos anillo sutil + profundidad para que lea como moneda.)
   ════════════════════════════════════════════════════════════ */
.logo-img-full, .logo-img-small {
  border-radius: 50% !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1;
}
/* Contenedores de marca: el <img> ya es círculo (border-radius:50%), por lo que
   NO usamos overflow:hidden — así el aro/sombra de moneda no se recorta. */
.header-logo, .brand-logo, .login-brand-logo, .paywall-logo {
  border-radius: 50%;
  overflow: visible;
}
/* Acabado moneda: aro fino + sombra de relieve (no en la animación de intro,
   que ya tiene su propio tratamiento 3D). */
.header-logo .logo-img-small,
.brand-logo .logo-img-full,
.login-brand-logo .logo-img-full,
.paywall-logo .logo-img-full {
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 4px 16px rgba(0,0,0,.45);
}
[data-theme="light"] .header-logo .logo-img-small,
[data-theme="light"] .brand-logo .logo-img-full,
[data-theme="light"] .login-brand-logo .logo-img-full {
  box-shadow:
    0 0 0 1.5px rgba(0,0,0,.06),
    0 4px 14px rgba(0,0,0,.18);
}


/* ════════════════════════════════════════════════════════════
   G6 — Botones de acción de cita con etiqueta (Confirmar/Completar)
   + G3 opción Google Calendar
   ════════════════════════════════════════════════════════════ */
/* Todas las acciones de cita como pills etiquetadas y cohesivas
   (mismo ancho en columna + tinte suave por color semántico). */
.appt-card-actions { align-items: stretch; min-width: 124px; }
.appt-act-btn.appt-act-labeled {
  width: 100%; height: 34px; padding: 0 .7rem; gap: .4rem;
  display: inline-flex; align-items: center; justify-content: flex-start;
  font-size: .72rem; font-weight: 600; letter-spacing: .01em;
}
.appt-act-btn.appt-act-labeled svg { flex-shrink: 0; }
.appt-act-btn.appt-act-labeled span { white-space: nowrap; }
/* Tinte suave uniforme por acción (premium, legible) */
.appt-act-btn.appt-confirm { background: rgba(37,99,235,.16);  color: #60A5FA; border: 1px solid rgba(96,165,250,.40); }
.appt-act-btn.appt-confirm:hover { background: rgba(37,99,235,.28); }
.appt-act-btn.appt-check   { background: rgba(16,185,129,.16); color: #34D399; border: 1px solid rgba(52,211,153,.40); }
.appt-act-btn.appt-check:hover { background: rgba(16,185,129,.28); }
.appt-act-btn.appt-wa.appt-act-labeled   { background: rgba(37,211,102,.14); color: #25D366; border: 1px solid rgba(37,211,102,.40); }
.appt-act-btn.appt-wa.appt-act-labeled:hover { background: rgba(37,211,102,.26); }
.appt-act-btn.appt-edit.appt-act-labeled { background: rgba(148,163,184,.14); color: var(--text-2); border: 1px solid rgba(148,163,184,.34); }
.appt-act-btn.appt-edit.appt-act-labeled:hover { background: rgba(148,163,184,.24); color: var(--text); }
.appt-act-btn.appt-x.appt-act-labeled    { background: rgba(255,45,68,.12);  color: #FF6B7A; border: 1px solid rgba(255,45,68,.34); }
.appt-act-btn.appt-x.appt-act-labeled:hover { background: rgba(255,45,68,.22); }

.appt-cal-opt {
  display: flex; align-items: center; gap: .5rem; cursor: pointer;
  font-size: .8rem; color: var(--text-2); margin: .6rem 0 .2rem;
  padding: .55rem .7rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border-2);
}
.appt-cal-opt input { width: 16px; height: 16px; accent-color: var(--brand); }
.appt-cal-opt span { display: inline-flex; align-items: center; gap: .4rem; }
.appt-cal-opt svg { color: var(--brand); }


/* G7 — botón eliminar negocio en el switcher */
.ws-item-del { color: var(--text-muted); }
.ws-item-del:hover { color: var(--danger-text) !important; }


/* ════════════════════════════════════════════════════════════
   POTENCIADOR AV — pulido premium seguro (solo estética)
   ════════════════════════════════════════════════════════════ */
/* ── Anillo de foco: LISTA NEGRA, no lista blanca (auditoría 12-ago-2026) ──────
   Antes esto era una lista blanca de 9 clases. Funcionaba el día que se escribió y se
   quedó atrás: cada componente nuevo (chips de servicio, celdas de la matriz, botones
   de los modales…) nació sin anillo de foco, y quien navega con teclado dejó de saber
   dónde está. Una lista blanca de accesibilidad SIEMPRE se queda atrás porque exige
   acordarse; una lista negra falla del lado seguro.

   Ahora lo recibe TODO lo enfocable. Si un control necesita otro tratamiento se le
   quita explícitamente, y esa excepción deja constancia en vez de esconderse en un
   olvido. `:where()` mantiene especificidad 0, así que cualquier regla existente que
   ya estilice el foco sigue mandando. */
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="tab"]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
/* Elevación táctil en tarjetas interactivas (suave, motivada) */
.client-card, .product-card, .item-row.sale {
  transition: transform .16s cubic-bezier(.4,0,.2,1), box-shadow .16s cubic-bezier(.4,0,.2,1), border-color .16s ease;
}
@media (hover: hover) {
  .client-card:hover, .product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    border-color: var(--brand);
  }
}
.client-card:active, .product-card:active { transform: scale(.99); }
/* Scroll suave entre vistas */
html { scroll-behavior: smooth; }
/* Skeleton de carga (si se usa en el futuro) y tipografía tabular en montos */
.item-amount, .stat-card .stat-value, .kpi-val, .client-chip.strong {
  font-variant-numeric: tabular-nums;
}
/* Inputs: transición de borde al enfocar (más fino) */
.inp { transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.inp:focus { box-shadow: 0 0 0 3px var(--brand-pale); }


/* ════════════════════════════════════════════════════════════
   AUTH — login/registro por correo + olvidé contraseña
   ════════════════════════════════════════════════════════════ */
.auth-form { display: flex; flex-direction: column; gap: .55rem; margin-top: .2rem; }
.auth-form .field { margin: 0; }
.auth-pass-wrap { position: relative; }
.auth-pass-wrap .inp { padding-right: 2.6rem; }
.auth-pass-toggle {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; padding: .25rem; border-radius: 6px;
}
.auth-pass-toggle:hover { color: var(--brand); }
.auth-links { display: flex; justify-content: space-between; gap: .5rem; margin-top: .6rem; }
.auth-link {
  background: none; border: none; cursor: pointer; padding: .2rem 0;
  color: var(--text-2); font-size: .78rem; font-family: inherit;
}
.auth-link:hover { color: var(--brand); text-decoration: underline; }
#btn-auth-toggle { color: var(--brand); font-weight: 600; }


/* ── Compartir combinado (foto+texto+PDF) ── */
.bundle-opts { display: flex; gap: .5rem; flex-wrap: wrap; }
.bundle-opt {
  flex: 1; min-width: 90px; display: flex; align-items: center; gap: .4rem;
  padding: .5rem .6rem; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--surface-2); border: 1.5px solid var(--border-2);
  font-size: .8rem; font-weight: 600; color: var(--text-2);
}
.bundle-opt input { accent-color: var(--brand); width: 16px; height: 16px; }
.bundle-opt.disabled { opacity: .4; cursor: not-allowed; }


/* ── Cascada de ganancia (egresos fijos) ── */
.pf-waterfall { background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: .6rem .75rem; }

/* ── Salud financiera: los indicadores leídos ──────────────────────────────
   El color del estado va en el filo izquierdo y en la etiqueta; el cuerpo del texto
   se queda en --text/--text-2. Así el diagnóstico se lee igual de bien aunque el
   usuario tenga daltonismo o el tema claro: el color acompaña, no carga el mensaje. */
.fin-salud { margin-top: 1rem; }
.fs-title { font-size: .95rem; font-weight: 800; color: var(--text); }
.fs-sub { font-size: .72rem; color: var(--text-2); margin: .15rem 0 .6rem; line-height: 1.4; }
.fs-score {
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
  padding: .6rem .75rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border-2); margin-bottom: .6rem;
}
.fs-score b { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.fs-score span { font-size: .7rem; color: var(--text-2); line-height: 1.4; }
.fs-score.ok b   { color: var(--fin-ok); }
.fs-score.warn b { color: var(--fin-warn); }
.fs-score.bad b  { color: var(--fin-bad); }
.fs-score.none b { font-size: .95rem; color: var(--text); }

.fs-list { display: grid; gap: .45rem; }
.fs-item {
  padding: .55rem .7rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-left: 3px solid var(--border-2);
}
.fs-item.ok   { border-left-color: var(--fin-ok); }
.fs-item.warn { border-left-color: var(--fin-warn); }
.fs-item.bad  { border-left-color: var(--fin-bad); }
.fs-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.fs-name { font-size: .82rem; font-weight: 700; color: var(--text); }
.fs-tag { font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.fs-item.ok .fs-tag   { color: var(--fin-ok); }
.fs-item.warn .fs-tag { color: var(--fin-warn); }
.fs-item.bad .fs-tag  { color: var(--fin-bad); }
.fs-read { font-size: .74rem; color: var(--text); margin: .25rem 0 0; line-height: 1.45; }
.fs-act { font-size: .72rem; color: var(--text-2); margin: .25rem 0 0; line-height: 1.45; }
.pf-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .82rem; padding: .22rem 0; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pf-row.sub { font-size: .76rem; color: var(--text-muted); }
.pf-row.strong { font-weight: 700; color: var(--brand-text); border-top: 1px solid var(--border-2); margin-top: .3rem; padding-top: .5rem; font-size: .95rem; }

/* ── Filas de egresos fijos segmentados ── */
.pf-expense-row { display: flex; gap: .4rem; align-items: center; width: 100%; }
.pf-expense-row .pf-exp-label { flex: 1 1 0 !important; min-width: 0; max-width: none !important; }
.pf-expense-row .pf-exp-value { flex: 0 0 96px !important; max-width: 96px !important; text-align: right; }
.pf-expense-row .pf-exp-del { flex: 0 0 auto; opacity: .5; transition: opacity .15s; background: none; border: none; color: var(--danger-text); cursor: pointer; font-size: 1rem; line-height: 1; }
.pf-expense-row .pf-exp-del:hover { opacity: 1; }
#pf-fixed-expenses-list { width: 100%; }

/* ── Ventas virtuales en finanzas ── */
.sale-virtual-row { opacity: .92; }
.sale-virtual-row .item-actions { min-width: 60px; }


/* ── Post con IA en el generador promocional ── */
.promo-ai-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.promo-ai-btn {
  flex: 1 1 46%; min-width: 140px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem .7rem; border-radius: var(--radius-sm); cursor: pointer;
  font-size: .78rem; font-weight: 700; color: #fff; text-align: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-dim, #7C3AED));
  border: none;
}
#promo-aiimg-btn { background: linear-gradient(135deg, #0891B2, var(--brand, #C2185B)); }
.promo-ai-btn:hover { filter: brightness(1.08); }
.promo-ai-btn:disabled { opacity: .6; cursor: default; }


/* ════════════════════════════════════════════════════════════
   POTENCIADOR AV — Capa premium "AlexVega" (tecnológico, detallista)
   Solo estética, aditivo. No toca funciones.
   ════════════════════════════════════════════════════════════ */
/* Scrollbar premium */
* { scrollbar-width: thin; scrollbar-color: var(--brand) transparent; }
.app-main::-webkit-scrollbar, body::-webkit-scrollbar { width: 8px; height: 8px; }
.app-main::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--brand), var(--brand-dim, #7C3AED)); border-radius: 8px;
}
.app-main::-webkit-scrollbar-track { background: transparent; }

/* Tarjetas: borde-luz superior + profundidad (toque vidrio premium) */
.stat-card, .section-card, .chart-card, .config-section, .product-card,
.client-card, .item-row, .analytics-kpi, .analytics-chart-card {
  position: relative;
}
.stat-card::before, .chart-card::before, .analytics-kpi::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%);
}
/* Realce sutil del borde con el color de marca al pasar el dedo/mouse */
@media (hover: hover) {
  .stat-card:hover, .chart-card:hover, .section-card:hover {
    border-color: var(--glass-border-premium, rgba(255,255,255,.16));
    box-shadow: 0 10px 30px rgba(0,0,0,.30);
  }
}
/* KPI: número con leve degradado de marca (detalle AlexVega) */
.stat-card .stat-value, .analytics-kpi .kpi-val {
  background: linear-gradient(135deg, var(--white,#fff), var(--brand-bright, #E91E8C));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Feedback táctil universal en botones (spring) */
.btn-primary:active, .btn-secondary:active, .btn-ghost:active,
.promo-share-btn:active, .prod-menu-item:active, .stage-chip:active { transform: scale(.97); }
.btn-primary, .btn-secondary, .btn-ghost { transition: transform .12s cubic-bezier(.34,1.56,.64,1), filter .15s ease, box-shadow .15s ease; }
/* Brillo sutil del botón primario (marca) */
.btn-primary { box-shadow: 0 6px 20px var(--brand-glow, rgba(194,24,91,.22)); }
.btn-primary:hover { box-shadow: 0 8px 26px var(--brand-glow, rgba(194,24,91,.30)); }

/* Pista visual de "mantén presionado" en elementos con longpress */
.long-pressable { position: relative; }
.long-pressable.pressing { transform: scale(.98); transition: transform .2s ease; }

/* Header: glow sutil de marca bajo el logo (firma tech) */
.header-brand .header-logo { filter: drop-shadow(0 0 6px var(--brand-glow, rgba(194,24,91,.35))); }

/* Chips de estado / badges: leve relieve */
.client-chip, .sale-status-badge, .role-tag { backdrop-filter: blur(4px); }

/* Spinner del generador de posts con IA */
@keyframes postSpin { to { transform: rotate(360deg); } }

/* Chips de "brief" de imagen del asesor (preguntas predeterminadas) */
.img-brief-opts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.img-brief-chip {
  font-size: .78rem; font-weight: 600; padding: .4rem .7rem;
  border-radius: 999px; cursor: pointer; color: #fff; border: none;
  background: linear-gradient(135deg, var(--brand, #C2185B), #0891B2);
}
.img-brief-chip.ghost {
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border-2);
}
.img-brief-chip.selfie {
  background: linear-gradient(135deg, #7C3AED, #0891B2); flex-basis: 100%;
}
.img-brief-chip:disabled { opacity: .5; cursor: default; }

/* Créditos de imágenes IA */
.credits-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .3rem; }
.credits-count-box { display: flex; align-items: baseline; gap: .35rem; }
.credits-count { font-family: 'JetBrains Mono', monospace; font-size: 1.6rem; font-weight: 800; color: var(--brand-text); }
.credits-count-lbl { font-size: .75rem; color: var(--text-muted); }
.credit-packs { display: flex; flex-direction: column; gap: .5rem; }
.credit-pack {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .8rem 1rem; border-radius: var(--radius); cursor: pointer; position: relative;
  background: var(--surface-2); border: 1.5px solid var(--border-2); color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.credit-pack:hover { border-color: var(--brand); box-shadow: 0 0 14px var(--brand-glow); transform: translateY(-1px); }
.credit-pack.best { border-color: var(--brand); }
.credit-pack-credits { font-weight: 700; font-size: .95rem; }
.credit-pack-price { font-family: 'JetBrains Mono', monospace; font-weight: 800; color: var(--brand); }
.credit-pack-tag { position: absolute; top: -9px; right: 12px; font-size: .62rem; font-weight: 700; background: var(--brand); color: #fff; padding: .1rem .5rem; border-radius: 999px; letter-spacing: .04em; }

/* ════════════════════════════════════════════════════════════════
   GASTOS FIJOS DEL MES (Finanzas) — estado de pago premium
   ════════════════════════════════════════════════════════════════ */
.fin-ganancias-panel {
  padding: .25rem .1rem 1rem;
  animation: ssSheetSpring .32s cubic-bezier(.22,1,.36,1) both;
}
.fin-ganancias-panel .config-row { margin-bottom: .55rem; }
@media (prefers-reduced-motion: reduce) { .fin-ganancias-panel { animation: none; } }

.fin-fixed-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: .9rem 1rem;
  margin-bottom: .9rem;
}
.ff-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .65rem; }
.ff-title { font-size: .82rem; font-weight: 700; color: var(--text); }
.ff-total { font-family: 'JetBrains Mono', monospace; font-size: .75rem; color: var(--text-2); }
.ff-row { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--border); }
.ff-main { flex: 1; min-width: 0; }
.ff-name { font-size: .82rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.ff-sub { font-size: .68rem; color: var(--text-muted); margin-top: .25rem; font-family: 'JetBrains Mono', monospace; }
.ff-bar { height: 5px; background: var(--surface-3); border-radius: 4px; margin-top: .35rem; overflow: hidden; }
.ff-bar-fill { height: 100%; border-radius: 4px; transition: width .4s var(--ease-out-expo, ease); }
.ff-bar-fill.pendiente { background: var(--border-2); }
.ff-bar-fill.parcial   { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.ff-bar-fill.pagado    { background: linear-gradient(90deg, #16a34a, #22c55e); }
.ff-chip { font-size: .6rem; font-weight: 700; padding: .12rem .5rem; border-radius: 20px; letter-spacing: .03em; }
.ff-chip.pend { background: rgba(148,163,184,.15); color: var(--text-muted); }
.ff-chip.part { background: rgba(245,158,11,.15); color: #f59e0b; }
.ff-chip.paid { background: rgba(34,197,94,.15); color: #22c55e; }
.ff-chip.due { background: rgba(8,145,178,.14); color: #22d3ee; }
.ff-chip.overdue { background: rgba(239,68,68,.16); color: #ef4444; }
.ff-actions { flex-shrink: 0; }
.ff-title svg { color: var(--brand, #C2185B); }

/* Gestor completo (pestaña Fijos) */
.ff-hint { font-size: .72rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 .8rem; }
.ffm-row { padding: .55rem 0; border-top: 1px solid var(--border); }
.ffm-inputs { display: flex; gap: .45rem; align-items: center; }
.ffm-inputs .ffm-label  { flex: 1 1 0; min-width: 0; }
.ffm-inputs .ffm-amount { flex: 0 0 88px; max-width: 88px; }
.ffm-inputs .ffm-due { flex: 0 0 62px; max-width: 62px; text-align: center; }
.ffm-inputs .ffm-del { flex-shrink: 0; padding: .25rem .55rem; color: var(--danger-text); }
.ffm-status { margin-top: .35rem; }
.ffm-meta { display: flex; align-items: center; gap: .55rem; margin-top: .3rem; flex-wrap: wrap; }
.ffm-actions { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .85rem; }

/* ════════════════════════════════════════════════════════════════
   SMARTTIP — aprendizaje financiero semanal (modal premium)
   ════════════════════════════════════════════════════════════════ */
.fintip-overlay {
  position: fixed; inset: 0; z-index: 10300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 1.25rem;
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.fintip-overlay.open { opacity: 1; pointer-events: auto; }
.fintip-card {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 70%);
  border: 1px solid var(--border-2);
  border-radius: 22px;
  padding: 2rem 1.6rem 1.4rem;
  max-width: 380px; width: 100%; text-align: center;
  box-shadow: 0 28px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  transform: translateY(16px) scale(.97);
  transition: transform .32s var(--spring, cubic-bezier(.34,1.56,.64,1));
}
.fintip-overlay.open .fintip-card { transform: none; }
.fintip-glow {
  position: absolute; top: -70px; left: 50%; transform: translateX(-50%);
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glow, rgba(194,24,91,.3)) 0%, transparent 70%);
  pointer-events: none;
}
.fintip-badge {
  font-family: 'JetBrains Mono', monospace; font-size: .58rem; font-weight: 700;
  letter-spacing: .14em; color: var(--brand);
  border: 1px solid var(--brand); border-radius: 20px;
  display: inline-block; padding: .2rem .7rem; margin-bottom: 1rem;
  background: var(--brand-pale, rgba(194,24,91,.06));
}
.fintip-icon { font-size: 2.6rem; line-height: 1; margin-bottom: .8rem; }
.fintip-title { font-family: 'JetBrains Mono', monospace; font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: .6rem; }
.fintip-body { font-size: .85rem; color: var(--text-2); line-height: 1.65; margin-bottom: 1.2rem; }
.fintip-body strong { color: var(--text); }
.fintip-cta {
  width: 100%; padding: .8rem 1rem; border: none; border-radius: 14px;
  background: linear-gradient(135deg, var(--brand-bright, var(--brand)), var(--brand));
  color: #fff; font-size: .82rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 22px var(--brand-glow, rgba(194,24,91,.3));
  transition: transform .15s var(--spring, ease), box-shadow .15s ease;
}
.fintip-cta:hover { transform: translateY(-1px); }
.fintip-cta:active { transform: scale(.97); }
.fintip-close {
  display: block; margin: .7rem auto 0; background: none; border: none;
  color: var(--text-muted); font-size: .76rem; cursor: pointer; padding: .3rem .6rem;
}
.fintip-close:hover { color: var(--text-2); }

/* ════════════════════════════════════════════════════════════════
   ANTIBUGS · Endurecimiento móvil + legibilidad (lanzamiento)
   ════════════════════════════════════════════════════════════════ */

/* — Long-press “se queda pegada” —
   En móvil, mantener presionada una fila (Finanzas, Ventas, etc.) disparaba la
   selección de texto / menú nativo (callout) que parece que la app se congela.
   Desactivamos la selección y el callout en TODA la UI… */
body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* …excepto donde el usuario SÍ necesita seleccionar/escribir. */
input, textarea, [contenteditable="true"], .selectable, .msg-bubble, .terms-body {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* — Panel de suscripción (SmartClub) ilegible en modo claro —
   La tarjeta es SIEMPRE oscura, pero en modo claro las variables de texto se
   vuelven oscuras → texto oscuro sobre fondo oscuro. Forzamos texto claro. */
[data-theme="light"] .smartclub-card .smartclub-price { color: #fff !important; }
[data-theme="light"] .smartclub-card .smartclub-features li,
[data-theme="light"] .smartclub-card .smartclub-status-block,
[data-theme="light"] .smartclub-card .smartclub-inactive-tag { color: rgba(255,255,255,.85) !important; }
[data-theme="light"] .smartclub-card .smartclub-period,
[data-theme="light"] .smartclub-card .smartclub-note { color: rgba(255,255,255,.62) !important; }
[data-theme="light"] .smartclub-card.is-pro .smartclub-btn { color: #fff !important; }

/* — Precio del plan invisible en modo claro (color:var(--white) sobre surface
   blanca). Usar el color de texto del tema. — */
[data-theme="light"] .price-amount { color: var(--text) !important; }


/* ════════════════════════════════════════════════════════════
   POTENCIADOR AV — Select canónico + jerarquía tipográfica
   Una sola fuente de verdad para TODOS los <select> de la app
   (chevron SVG propio, focus --brand, JetBrains Mono) y Mono
   deliberado en titulares/labels; Inter queda solo para body.
   ════════════════════════════════════════════════════════════ */
h1, h2, h3,
.section-title, .card-title, .detail-sheet-title, .modal-title, .sheet-title {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .02em;
}

select {
  -webkit-appearance: none; appearance: none;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4A5A' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  background-size: 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
select option { background: var(--surface-2); color: var(--text); }

/* Overrides ad-hoc armonizados a los tokens del sistema (antes cada uno
   tenía su propio borde/padding y el shorthand background mataba el chevron) */
.discount-row select,
.fin-currency-row select {
  border: 1.5px solid var(--border-2);
  background-color: var(--surface-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4A5A' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  background-size: 14px;
  border-radius: var(--radius-sm);
  padding: .35rem 1.8rem .35rem .5rem;
}

/* El skin liquid-glass del dashboard usaba background shorthand !important
   y borraba el chevron: lo reponemos respetando el glass */
.select-sm {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4A5A' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .4rem center !important;
  background-size: 14px !important;
  padding-right: 1.6rem !important;
}


/* ════════════════════════════════════════════════════════════
   POTENCIADOR AV — Premium visual: skeleton shimmer de marca,
   bottom-sheets con spring, soporte para tilt 3D en stat-cards.
   Todo respeta prefers-reduced-motion.
   ════════════════════════════════════════════════════════════ */
/* Skeleton de carga con shimmer del color de marca */
.skeleton {
  position: relative;
  color: transparent !important;
  background: var(--surface-2) !important;
  border-radius: 6px;
  overflow: hidden;
  min-width: 56px;
  user-select: none;
}
.skeleton::after {
  content: '';
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 25%, var(--brand-glow) 50%, transparent 75%);
  animation: ssShimmer 1.1s infinite;
}
@keyframes ssShimmer { to { transform: translateX(100%); } }

/* Bottom-sheets cohesionados: misma curva spring con rebote sutil */
@keyframes ssSheetSpring {
  0%   { transform: translateY(56px); opacity: 0; }
  70%  { transform: translateY(-5px); opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}
.ws-sheet, .detail-sheet, .promo-sheet {
  animation: ssSheetSpring .38s cubic-bezier(.22,1,.36,1) both;
}
/* 23-ago-2026: la curva de .sheet-card se declaraba DOS veces con valores distintos
   (esta ganaba por orden). Ahora vive una sola vez, arriba, en --ease-drawer. */

/* Soporte tilt 3D (el transform lo pone JS solo en desktop con hover) */
.stat-card { will-change: transform; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }

@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
  .ws-sheet, .detail-sheet, .promo-sheet { animation: none; }
  .sheet-overlay .sheet-card { transition: transform .2s ease; }
}

/* ════════════════════════════════════════════════════════════
   FASE 1 — Tamaño de fuente accesible, salud financiera (Inicio),
   texto legible en claro y alineación del nav.
   ════════════════════════════════════════════════════════════ */
/* Tamaños de letra (escala los rem; bump gentil para no romper layout) */
html.fs-med { font-size: 17px; }
html.fs-lg  { font-size: 18.5px; }

/* Salud financiera en Inicio: balance total a primer plano */
.fin-health-card {
  /* Liquid-glass premium ELEVADO: vidrio oscuro + degradado de marca + brillo
     superior + borde luminoso + glow. El elemento estrella del Inicio. */
  position: relative; overflow: hidden;
  border-radius: 22px;
  padding: 1.15rem 1.25rem 1.1rem;
  margin-bottom: 1rem;
  color: #fff;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(135deg, var(--brand) 0%, var(--brand-dim, #7C3AED) 62%, #1a1024 130%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 40px rgba(124,58,237,.34), inset 0 1px 0 rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .25s var(--spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .25s ease;
}
@media (hover:hover) { .fin-health-card:hover { transform: translateY(-2px); box-shadow: 0 20px 52px rgba(124,58,237,.42), inset 0 1px 0 rgba(255,255,255,.3); } }
/* Brillo diagonal sutil que recorre la tarjeta */
.fin-health-card::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-18deg); animation: fhShine 6.5s ease-in-out infinite; pointer-events: none;
}
@keyframes fhShine { 0%,72% { left: -60%; } 88%,100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .fin-health-card::after { animation: none; display: none; } }
.fin-health-card.negative {
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(135deg, #d6453b 0%, #8a201f 70%, #1a0a0a 130%);
  box-shadow: 0 14px 40px rgba(214,69,59,.34), inset 0 1px 0 rgba(255,255,255,.22);
}
.fin-health-top { display: flex; align-items: center; justify-content: space-between; }
.fin-health-lbl { font-size: .76rem; font-weight: 600; opacity: .9; letter-spacing: .02em; }
.fin-health-go {
  background: rgba(255,255,255,.18); color: #fff; border: none; cursor: pointer;
  font-size: .68rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.fin-health-balance {
  font-family: 'JetBrains Mono', monospace; font-weight: 800;
  font-size: 2rem; line-height: 1.1; margin: .25rem 0 .55rem;
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}
.fin-health-breakdown { display: flex; gap: 1rem; flex-wrap: wrap; }
.fh-item { display: flex; align-items: center; gap: .35rem; font-size: .72rem; }
.fh-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fh-dot.in  { background: #6EE7B7; }
.fh-dot.out { background: #FCA5A5; }
.fh-dot.inv { background: #93C5FD; }
.fh-k { opacity: .85; }
.fh-v { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
[data-theme="light"] .fin-health-card { color: #fff; }
[data-theme="light"] .fin-health-card * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
[data-theme="light"] .fin-health-go { color: #fff !important; }

/* MODO CLARO: texto del chat legible (asistente oscuro; usuario blanco sobre marca) */
[data-theme="light"] #chat-messages .msg.assistant .msg-bubble p,
[data-theme="light"] #chat-messages .msg.assistant .msg-bubble li,
[data-theme="light"] #chat-messages .msg.assistant .msg-bubble strong {
  color: var(--text) !important; -webkit-text-fill-color: var(--text) !important;
}
/* La regla glass (.msg-bubble{background:var(--glass-bg)!important}) le robaba el
   fondo de marca al bubble del usuario → en claro quedaba blanco sobre claro.
   Restauramos el fondo de marca (mayor especificidad + !important) y texto blanco. */
[data-theme="light"] .msg.user .msg-bubble {
  background: var(--brand) !important;
  border-color: transparent !important;
}
[data-theme="light"] .msg.user .msg-bubble,
[data-theme="light"] .msg.user .msg-bubble * {
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}

/* Nav: un poco más cerca de la base (reserva 60% del safe-area en vez de 100%)
   → en iPhones grandes (16 Pro Max) ya no queda "a un dedo" de la base. */
.bottom-nav {
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) * .6);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) * .6);
}

/* ════════════════════════════════════════════════════════════
   MODO CLARO — refuerzos definitivos (van al final = ganan por orden)
   ════════════════════════════════════════════════════════════ */
/* Texto que el usuario ESCRIBE: nunca blanco en claro. #chat-input por id +
   color fijo (no var) por si el iOS intenta repintarlo. */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select,
[data-theme="light"] #chat-input {
  color: #1A0A14 !important;
  -webkit-text-fill-color: #1A0A14 !important;
  caret-color: #C2185B;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #8a6a7e !important; -webkit-text-fill-color: #8a6a7e !important;
}

/* Logo SmartSell: en claro, "Smart" en color de paleta (no blanco invisible);
   "Sell" se mantiene en el rosa de marca. Aplica en intro, loading, login y header. */
[data-theme="light"] .brand-wordmark,
[data-theme="light"] .login-brand h1,
[data-theme="light"] .header-wordmark {
  color: var(--text) !important; -webkit-text-fill-color: var(--text) !important;
}
[data-theme="light"] .brand-wordmark span,
[data-theme="light"] .login-brand h1 span,
[data-theme="light"] .header-wordmark span {
  color: var(--brand) !important; -webkit-text-fill-color: var(--brand) !important;
}

/* SPLASH: lienzo negro fijo (#020109, el del splash nativo del TWA), así que sus
   textos NO pueden seguir al tema. La regla de arriba pinta el wordmark con
   var(--text): en claro eso da #1A0A14 sobre negro = 1.09:1, invisible. Y el rosa
   del claro (#C2185B) da 3.54:1. Aquí van los valores que sí se leen:
   blanco 20.77:1 y #F472B6 7.84:1. Vale para los dos temas. */
.loading-screen .brand-wordmark,
[data-theme="light"] .loading-screen .brand-wordmark {
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}
.loading-screen .brand-wordmark span,
[data-theme="light"] .loading-screen .brand-wordmark span,
.loading-screen .ss-splash-tag,
[data-theme="light"] .loading-screen .ss-splash-tag {
  color: #F472B6 !important; -webkit-text-fill-color: #F472B6 !important;
}

/* Egreso recurrente */
.rec-chip { font-size: .62rem; font-weight: 700; padding: .08rem .4rem; border-radius: 999px; background: rgba(8,145,178,.16); color: #0891B2; vertical-align: middle; }
[data-theme="light"] .rec-chip { background: rgba(8,145,178,.12); color: #0e7490; }
.btn-action.rec { color: #0891B2; }
.btn-action.rec:hover { background: rgba(8,145,178,.12); }

/* Mini-editor de imagen promocional (texto/fuente/tamaño/color) */
.promo-editor { margin: .1rem 0 .5rem; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; }
.promo-editor > summary { cursor: pointer; padding: .55rem .8rem; font-size: .8rem; font-weight: 700; color: var(--text); list-style: none; }
.promo-editor > summary::-webkit-details-marker { display: none; }
.promo-editor[open] > summary { border-bottom: 1px solid var(--border-2); }
.promo-editor-body { padding: .65rem .8rem; display: flex; flex-direction: column; gap: .5rem; }
.promo-editor .pe-row { display: flex; gap: .5rem; align-items: center; }
.promo-editor .pe-row select { flex: 1; }
.promo-editor #pe-color { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--bg-2); cursor: pointer; flex: none; }
.promo-editor .pe-size { display: flex; align-items: center; gap: .6rem; font-size: .76rem; color: var(--text-2); }
.promo-editor .pe-size input[type=range] { flex: 1; accent-color: var(--brand); }

.receipt-color { width: 40px; height: 40px; padding: 2px; border: 1px solid var(--border-2); border-radius: 50%; background: var(--surface-2); cursor: pointer; }

/* SmartSell Inmobiliaria */
.realty-block { margin: .4rem 0 .2rem; padding: .75rem .85rem; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface-2); }
.realty-title { font-weight: 700; font-size: .85rem; margin-bottom: .6rem; color: var(--text); }
.realty-amen-lbl { display: block; font-size: .78rem; color: var(--text-2); margin: .55rem 0 .35rem; font-weight: 600; }
.realty-amenities { display: flex; flex-wrap: wrap; gap: .35rem; }
.amen-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; padding: .25rem .55rem; border: 1px solid var(--border-2); border-radius: 999px; cursor: pointer; background: var(--bg-2); color: var(--text-2); }
.amen-chip input { accent-color: var(--brand); width: 13px; height: 13px; }
.realty-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .25rem 0; }
.rl-tag { font-size: .66rem; font-weight: 700; padding: .1rem .45rem; border-radius: 6px; background: var(--brand-pale); color: var(--brand); }

.promo-editor #pe-custom { font-size: .85rem; }

/* Balance: número con glow */
.fin-health-balance { text-shadow: 0 2px 14px rgba(0,0,0,.28); font-size: 2.15rem; }

/* Amenidades — selección premium (sin JS, native :has) */
.amen-chip { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease; user-select: none; }
.amen-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.amen-chip:active { transform: scale(.95); }
.amen-chip:has(input:checked) {
  background: linear-gradient(135deg, var(--brand), var(--brand-dim, #7C3AED));
  border-color: transparent; color: #fff; font-weight: 700;
  box-shadow: 0 3px 12px var(--brand-glow, rgba(194,24,91,.35));
}
.amen-chip:has(input:checked)::before { content: '✓'; font-weight: 900; margin-right: .15rem; }

/* Editor promo: evitar overflow horizontal (sensación de "zoom") + layout colores */
#promo-modal .promo-sheet { box-sizing: border-box; overflow-x: hidden; }
.promo-editor-body input, .promo-editor-body select { box-sizing: border-box; max-width: 100%; }
.promo-editor-body select, .promo-editor-body #pe-headline, .promo-editor-body #pe-custom { width: 100%; }
.pe-colors { display: flex; gap: .6rem; flex-wrap: wrap; }
.pe-clr { display: flex; flex-direction: column; gap: .2rem; font-size: .68rem; color: var(--text-2); font-weight: 600; }
.pe-clr input[type=color] { width: 100%; min-width: 54px; height: 32px; padding: 2px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--bg-2); cursor: pointer; }

/* ════════════════════════════════════════════════════════════
   COMIDA — botón descarga Finanzas (premium, no invasivo),
   panel de insumos bajos en Inicio, y editor de receta.
   ════════════════════════════════════════════════════════════ */
.fin-dl-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: .1rem 0 .7rem auto;            /* alineado a la derecha, discreto */
  padding: .42rem .8rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .01em;
  color: var(--brand-text);
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
  border-radius: 999px; cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.fin-dl-btn:hover {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 18%, transparent);
}
.fin-dl-btn:active { transform: translateY(0); }
.fin-dl-btn svg { opacity: .9; }

/* Panel de insumos bajos — mismo lenguaje liquid-glass que los paneles de Inicio */
.insumo-alert-panel {
  margin: .2rem 0 .9rem;
  padding: .85rem .95rem;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, #F59E0B 14%, transparent), transparent 60%),
    var(--surface);
  border: 1px solid color-mix(in srgb, #F59E0B 30%, var(--border));
  box-shadow: 0 6px 20px color-mix(in srgb, #F59E0B 12%, transparent);
}
.insumo-alert-panel.hidden { display: none; }
.insumo-alert-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; }
.insumo-alert-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #F59E0B;
  box-shadow: 0 0 0 0 color-mix(in srgb, #F59E0B 60%, transparent);
  animation: insumoPulse 2s infinite;
}
@keyframes insumoPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, #F59E0B 55%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.insumo-alert-title { font-size: .82rem; font-weight: 700; color: var(--text); }
.insumo-low-list { display: flex; flex-direction: column; gap: .3rem; }
.insumo-low-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  width: 100%; padding: .42rem .55rem;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: none; border-radius: var(--radius-sm); cursor: pointer; text-align: left;
  transition: background var(--transition);
}
.insumo-low-row:hover { background: color-mix(in srgb, #F59E0B 12%, transparent); }
.insumo-low-name { font-size: .8rem; font-weight: 600; color: var(--text); }
.insumo-low-val { font-size: .8rem; font-weight: 700; color: #D97706; white-space: nowrap; }
.insumo-low-min { font-weight: 500; color: var(--text-2); }

/* Editor de receta (producto → insumos que consume) */
.recipe-block {
  margin: .3rem 0 .2rem; padding: .8rem;
  border: 1px dashed color-mix(in srgb, var(--brand) 35%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--brand) 4%, transparent);
}
.recipe-title { font-size: .85rem; font-weight: 700; color: var(--text); margin-bottom: .25rem; }
.recipe-desc { font-size: .72rem; color: var(--text-2); margin: 0 0 .55rem; line-height: 1.4; }
.recipe-row { display: flex; align-items: center; gap: .45rem; margin-bottom: .4rem; }
.recipe-row .recipe-insumo { flex: 1; min-width: 0; }
.recipe-row .recipe-unit { font-size: .72rem; font-weight: 700; color: var(--text-2); min-width: 30px; }

/* Tarifario del servicio (confección): medida · precio · unidades por bloque.
   La medida manda el ancho; los dos números quedan angostos y a la derecha. */
.preset-row { display: flex; align-items: center; gap: .45rem; margin-bottom: .4rem; }
.preset-row .preset-label { flex: 1; min-width: 0; }
.preset-row .preset-price { width: 92px; flex: none; }
.preset-row .preset-block { width: 62px; flex: none; }

/* ── BANDEJA DE PEDIDOS DEL LINK PÚBLICO (20-ago) ──────────────────────────
   Va arriba del registro y sólo existe cuando hay algo que atender. El borde de
   acento la separa del resto sin gritar: es informacion, no una alarma. */
.inbox { margin-bottom: .9rem; }
.inbox-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; font-size: .84rem; }
.inbox-head b { color: var(--text); }
.inbox-sub { color: var(--text-2); font-size: .74rem; }
.inbox-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none;
             box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.inbox-card { background: var(--surface); border: 1px solid var(--border);
              border-left: 3px solid var(--brand); border-radius: 12px;
              padding: .85rem; margin-bottom: .55rem; }
.inbox-cli { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .55rem; margin-bottom: .5rem; }
.inbox-cli b { font-size: .92rem; }
.inbox-mail { font-size: .74rem; color: var(--text-2); word-break: break-all; }
.inbox-tag { font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
             padding: .18rem .45rem; border-radius: 5px; white-space: nowrap; }
.inbox-tag.new { background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand-text, var(--brand)); }
.inbox-tag.old { background: var(--surface-2); color: var(--text-2); }
.inbox-items { display: flex; flex-direction: column; gap: .22rem; }
.inbox-it { display: flex; justify-content: space-between; gap: .8rem; font-size: .82rem; }
.inbox-it span { color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-it b { flex: none; }
.inbox-nota { margin-top: .5rem; font-size: .76rem; color: var(--text-2); font-style: italic;
              border-left: 2px solid var(--border); padding-left: .5rem; }
.inbox-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
              gap: .5rem; margin-top: .7rem; }
.inbox-when { font-size: .72rem; color: var(--text-2); }
.inbox-btns { display: flex; gap: .4rem; margin-left: auto; }
/* En movil los dos botones se reparten el ancho: "Aceptar" no puede quedar a 30px */
@media (max-width: 420px) {
  .inbox-btns { width: 100%; }
  .inbox-btns button { flex: 1; min-height: 40px; }
}

/* Periodo del documento historico de Sheets */
.sheets-per { display: flex; align-items: center; gap: .4rem; }
.sheets-per .inp { flex: 1; min-width: 0; font-size: .8rem; }
.sheets-per-a { font-size: .75rem; color: var(--text-2); flex: none; }

/* ── RESERVA EN LINEA: horario de atencion (21-ago) ────────────────────────
   Plegada por defecto y con la cabecera como unico control visible: quien no da
   citas ve UNA linea, no una pantalla de ajustes. */
.agenda-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
               margin-bottom: 1rem; overflow: hidden; transition: border-color .18s ease; }
.agenda-card.open { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.agenda-head { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .85rem .9rem;
               background: none; border: none; color: var(--text); cursor: pointer;
               font-family: inherit; text-align: left; min-height: 56px; }
.agenda-ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center;
             background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-text, var(--brand)); }
.agenda-head-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.agenda-head-txt b { font-size: .92rem; }
.agenda-head-txt span { font-size: .72rem; color: var(--text-2); }
.agenda-head-txt span.on { color: var(--success-text, #059669); font-weight: 600; }
.agenda-chev { color: var(--text-2); flex: none; transition: transform .2s ease; }
.agenda-card.open .agenda-chev { transform: rotate(180deg); }
.agenda-body { padding: 0 .9rem .9rem; }
.agenda-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
              padding: .7rem 0; border-top: 1px solid var(--border); font-size: .85rem; }
.agenda-desc { font-size: .72rem; color: var(--text-2); line-height: 1.55; margin: .4rem 0 0; }
.agenda-sub { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
              text-transform: uppercase; color: var(--text-2); margin: 1rem 0 .5rem; }
.agenda-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }

/* Una fila por dia: el interruptor manda y las horas se apagan visualmente cuando
   ese dia no se atiende — asi no se rellena un horario que no va a usarse. */
.agenda-dias { display: flex; flex-direction: column; gap: .4rem; }
.agenda-dia { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem;
              border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2, var(--surface)); }
.agenda-dia .agenda-franjas { opacity: .38; transition: opacity .16s ease; pointer-events: none; }
.agenda-dia.on { border-color: color-mix(in srgb, var(--brand) 32%, var(--border)); }
.agenda-dia.on .agenda-franjas { opacity: 1; pointer-events: auto; }
.agenda-dia-sw { display: flex; align-items: center; gap: .4rem; flex: none; width: 74px;
                 cursor: pointer; min-height: 44px; }
.agenda-dia-sw input { accent-color: var(--brand); width: 17px; height: 17px; }
.agenda-dia-sw span { font-size: .78rem; font-weight: 600; text-transform: capitalize; }
.agenda-franjas { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.agenda-franja { display: flex; align-items: center; gap: .35rem; }
.agenda-franja span { font-size: .7rem; color: var(--text-2); flex: none; }
/* 44px en TODO lo que se toca. Se crece a lo ALTO: a lo ancho las dos horas de una
   franja comparten fila y una le robaria el toque a la otra. */
.agenda-franja .inp { flex: 1; min-width: 0; padding: .4rem .45rem; font-size: .82rem; min-height: 44px; }
.agenda-grid .inp { min-height: 44px; }
#btn-agenda-save, #btn-backup-export, #btn-backup-import,
#btn-order-link-create, .olink-btns button, .inbox-btns button { min-height: 44px; }

/* La previa: las horas EXACTAS que vera el cliente. Un horario en abstracto no
   avisa de que con citas de 90 min en 4 h solo caben dos. */
.agenda-prev { margin-top: .9rem; padding: .75rem .8rem; border-radius: 11px;
               background: var(--surface-2, var(--surface)); border: 1px solid var(--border); }
.agenda-prev-head { font-size: .8rem; color: var(--text-2); margin-bottom: .5rem; }
.agenda-prev-head b { color: var(--text); font-size: 1rem; }
.agenda-prev-dia { display: flex; gap: .6rem; align-items: baseline; padding: .22rem 0; }
.agenda-prev-d { font-size: .72rem; color: var(--text-2); width: 68px; flex: none; text-transform: capitalize; }
.agenda-prev-h { display: flex; flex-wrap: wrap; gap: .25rem; min-width: 0; }
.agenda-prev-h i { font-style: normal; font-size: .68rem; padding: .12rem .35rem; border-radius: 5px;
                   background: color-mix(in srgb, var(--brand) 13%, transparent);
                   color: var(--brand-text, var(--brand)); }
.agenda-prev-h i.mas { background: var(--surface); color: var(--text-2); }
.agenda-prev-h i.nada { background: none; color: var(--text-2); padding-left: 0; }
@media (max-width: 400px) {
  .agenda-dia { flex-direction: column; align-items: stretch; gap: .4rem; }
  .agenda-dia-sw { width: auto; }
}

/* Tarjeta de SOLICITUD DE CITA en la bandeja */
.inbox-card.cita { border-left-color: #00E6B4; }
.cita-cuando { display: flex; align-items: center; gap: .45rem; margin: .1rem 0 .5rem;
               font-size: .86rem; color: var(--text); }
.cita-cuando svg { color: #00E6B4; flex: none; }
.cita-cuando span { font-size: .72rem; color: var(--text-2); }
/* El aviso de solape NO es decorativo: es lo que evita dos personas a la misma hora */
.cita-choca { margin-top: .5rem; padding: .5rem .6rem; border-radius: 8px; font-size: .75rem;
              background: color-mix(in srgb, #F59E0B 14%, transparent);
              color: var(--warning-text, #B45309); border: 1px solid #F59E0B44; }

/* Respaldo: cuando caduca, el aviso se ve — pero con el token de texto legible
   sobre superficie, no con el ambar crudo que ya dio 1.88:1 en tema claro. */
#backup-estado.warn { color: var(--warning-text, #B45309); font-weight: 600; }

/* Que ofrece el link: tres opciones, una sola fila, 44px */
.olink-modo { margin-bottom: .7rem; }
.olink-modo > label { display: block; font-size: .78rem; color: var(--text-2); margin-bottom: .35rem; font-weight: 600; }
.seg { display: flex; gap: .25rem; padding: .25rem; background: var(--surface-2, var(--surface));
       border: 1px solid var(--border); border-radius: 11px; }
.seg button { flex: 1; min-width: 0; min-height: 40px; border: none; background: none; cursor: pointer;
              font-family: inherit; font-size: .74rem; font-weight: 600; color: var(--text-2);
              border-radius: 8px; padding: .3rem .2rem;
              transition: background .16s ease, color .16s ease; }
.seg button.on { background: color-mix(in srgb, var(--brand) 20%, var(--surface)); color: var(--text); }
@media (max-width: 360px) { .seg button { font-size: .68rem; } }

/* Link publico de pedidos (Configuracion) */
.olink-box { margin-bottom: .6rem; }
.olink-box .inp { font-size: .78rem; font-family: inherit; }
.olink-btns { display: flex; gap: .4rem; margin-top: .45rem; flex-wrap: wrap; }
.olink-btns button { flex: 1; min-width: 84px; min-height: 38px; }

/* VARIANTES del modelo (20-ago): misma fila que el tarifario, con dos precios —
   el base y el de 2XL-3XL. En movil el nombre se lleva el ancho y los precios
   quedan estrechos a proposito: son numeros de 5 caracteres. */
.variante-row { display: flex; align-items: center; gap: .45rem; margin-bottom: .4rem; }
.variante-row .variante-nombre { flex: 1; min-width: 0; }
.variante-row .variante-precio,
.variante-row .variante-precio-xl { width: 84px; flex: none; }
@media (max-width: 380px) {
  .variante-row .variante-precio,
  .variante-row .variante-precio-xl { width: 68px; }
}

/* ════════════════════════════════════════════════════════════
   Barrido premium: micro-interacciones (hover/active) en las tarjetas de TODOS
   los apartados + entrada suave. Solo estados → no parpadea al re-renderizar
   listas en tiempo real. Respeta prefers-reduced-motion.
   ════════════════════════════════════════════════════════════ */
.product-card, .client-card, .sale-card, .appt-card, .fin-item, .item-card {
  transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease, border-color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .product-card:hover, .client-card:hover, .sale-card:hover, .appt-card:hover, .fin-item:hover, .item-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow, 0 6px 20px rgba(0,0,0,.12));
    border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
  }
}
.product-card:active, .client-card:active, .sale-card:active, .appt-card:active, .fin-item:active, .item-card:active {
  transform: scale(.985);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes ssFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  /* Entrada en elementos que NO se re-montan con cada tick (sin replay/flicker) */
  .panel-header,
  .insight-card,
  .balance-card,
  .health-card,
  .sub-tab-row { animation: ssFadeUp .42s cubic-bezier(.22,.61,.36,1) both; }
  /* Botón sincronizar Sheets: leve realce al aparecer */
  .fin-dl-btn { animation: ssFadeUp .5s cubic-bezier(.22,.61,.36,1) both; }
}

/* ════════ POPUP INSUMOS — disponibilidad y uso (tema claro/oscuro) ════════ */
.ins-modal { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: flex-end; justify-content: center; }
.ins-modal.hidden { display: none; }
.ins-modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); }
.ins-modal-sheet {
  position: relative; width: 100%; max-width: 540px; max-height: 86vh; display: flex; flex-direction: column;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-2); border-bottom: none;
  border-radius: 20px 20px 0 0; box-shadow: var(--shadow);
  animation: insUp .34s cubic-bezier(.22,.61,.36,1) both;
}
@media (min-width: 600px) { .ins-modal { align-items: center; } .ins-modal-sheet { border-bottom: 1px solid var(--border-2); border-radius: 18px; } }
@keyframes insUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ins-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem .6rem; }
.ins-modal-head h3 { margin: 0; font-size: 1rem; }
.ins-modal-close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: .25rem; border-radius: 8px; display: flex; }
.ins-modal-close:hover { color: var(--text); background: var(--surface-2); }
.ins-modal-summary { display: flex; align-items: center; gap: 1.1rem; padding: .2rem 1.1rem 1rem; border-bottom: 1px solid var(--border); }
.ins-ring { width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; }
.ins-ring-hole { width: 58px; height: 58px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; text-align: center; line-height: 1; }
.ins-ring-hole b { font-size: 1.25rem; }
.ins-ring-hole span { font-size: .58rem; color: var(--text-muted); margin-top: 2px; }
.ins-legend { display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; flex: 1; }
.ins-leg { display: flex; align-items: center; gap: .45rem; }
.ins-leg b { margin-left: auto; }
.ins-dot { width: 9px; height: 9px; border-radius: 50%; }
.ins-dot.crit { background: var(--danger); } .ins-dot.warn { background: var(--warning); } .ins-dot.ok { background: var(--success); }
.ins-modal-body { overflow-y: auto; padding: .8rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
.ins-card { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--border-2); border-radius: 12px; padding: .6rem .7rem; }
.ins-card.crit { border-left-color: var(--danger); } .ins-card.warn { border-left-color: var(--warning); } .ins-card.ok { border-left-color: var(--success); }
.ins-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ins-name { font-weight: 600; font-size: .9rem; }
.ins-stock { font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.ins-chip { font-style: normal; font-size: .62rem; font-weight: 700; padding: .1rem .4rem; border-radius: 6px; margin-left: .3rem; }
.ins-chip.crit { background: rgba(255,45,68,.16); color: var(--danger-text); }
.ins-chip.warn { background: rgba(245,158,11,.18); color: var(--warning-text); }
.ins-chip.ok { background: rgba(0,200,150,.16); color: var(--success-text); }
.ins-bar { position: relative; height: 7px; border-radius: 4px; background: var(--border); margin: .5rem 0 .45rem; overflow: hidden; }
.ins-bar-fill { height: 100%; border-radius: 4px; transition: width .4s cubic-bezier(.22,.61,.36,1); }
.ins-bar-fill.crit { background: var(--danger); } .ins-bar-fill.warn { background: var(--warning); } .ins-bar-fill.ok { background: var(--success); }
.ins-bar-min { position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: var(--text); opacity: .5; }
.ins-uses { display: flex; flex-wrap: wrap; gap: .3rem; }
.ins-use { font-size: .68rem; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: .12rem .4rem; color: var(--text); }
.ins-use i { font-style: normal; color: var(--brand); font-weight: 600; margin-left: .25rem; }
.ins-nouse { font-size: .68rem; color: var(--text-muted); font-style: italic; }
.ins-empty { text-align: center; color: var(--text-muted); padding: 2rem 1rem; line-height: 1.6; }

/* ════════ FINANZAS: cards-resumen como accesos directos + "pulso" suave ════════ */
.finance-summary .fin-card { position: relative; overflow: hidden; cursor: pointer; transition: transform .18s var(--spring, ease), box-shadow .2s ease; }
.finance-summary .fin-card:hover { transform: translateY(-1px); }
.finance-summary .fin-card:active { transform: scale(.97); }
.finance-summary .fin-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* glow pulsante (mismo patrón radial que las stat-cards de Inicio, pero respirando) */
.finance-summary .fin-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse at 50% 120%, var(--fin-glow, transparent) 0%, transparent 70%);
  opacity: 0; animation: finPulse 3.6s ease-in-out infinite;
}
.finance-summary .fin-card.green  { --fin-glow: rgba(0,200,150,.55); }
.finance-summary .fin-card.red    { --fin-glow: rgba(255,45,68,.5); }
.finance-summary .fin-card.blue   { --fin-glow: rgba(0,180,216,.5); }
.finance-summary .fin-card.gold   { --fin-glow: rgba(245,158,11,.55); }
/* desfasadas → se sienten "vivas", no sincronizadas */
.finance-summary .fin-card:nth-child(2)::after { animation-delay: .9s; }
.finance-summary .fin-card:nth-child(3)::after { animation-delay: 1.8s; }
.finance-summary .fin-card:nth-child(4)::after { animation-delay: 2.7s; }
@keyframes finPulse { 0%, 100% { opacity: 0; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .finance-summary .fin-card::after { animation: none; } }

/* ════════ ANÁLISIS DE CLIENTES — origen/canal, tipo (B2B/B2C), distritos ════════ */
.clients-analytics { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: .85rem 1rem; margin-bottom: .8rem; }
.clients-analytics.hidden { display: none; }
.ca-head { font-size: .82rem; font-weight: 700; color: var(--text); margin-bottom: .6rem; }
.ca-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 560px) { .ca-grid { grid-template-columns: 1fr 1fr; } .ca-block.full { grid-column: 1 / -1; } }
.ca-block { min-width: 0; }
.ca-title { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: .45rem; }
.ca-row { display: grid; grid-template-columns: 4.6rem 1fr 1.4rem; align-items: center; gap: .45rem; margin-bottom: .32rem; }
.ca-label { font-size: .74rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-track { height: 7px; border-radius: 4px; background: var(--border); overflow: hidden; }
.ca-fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--brand-dim, var(--brand)), var(--brand-bright, var(--brand))); transition: width .5s cubic-bezier(.22,.61,.36,1); }
.ca-num { font-size: .72rem; font-weight: 700; color: var(--text-muted); text-align: right; }
.ca-split { display: flex; gap: .35rem; height: 48px; }
.ca-seg { border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; min-width: 2.4rem; }
.ca-seg b { font-size: 1rem; line-height: 1; }
.ca-seg span { font-size: .6rem; opacity: .9; margin-top: 2px; }
.ca-seg.b2c { background: var(--info); }
.ca-seg.b2b { background: var(--brand); }

/* ── CTA Planes SmartSell (config) — hero llamativo, separa planes de la config ── */
.planes-cta {
  position: relative; overflow: hidden; width: 100%;
  display: flex; align-items: center; gap: 14px; text-align: left;
  margin: 0 0 16px; padding: 16px 18px; border-radius: 18px; cursor: pointer;
  background: linear-gradient(135deg, var(--brand-dim), var(--brand-bright));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 28px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
.planes-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 36px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.22); }
.planes-cta:active { transform: scale(.985); }
.planes-cta-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.18), transparent 55%); }
.planes-cta-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.planes-cta-text { display: flex; flex-direction: column; gap: 2px; z-index: 1; }
.planes-cta-title { font-weight: 800; font-size: 1rem; color: #fff; letter-spacing: -.01em; }
.planes-cta-sub { font-size: .76rem; color: rgba(255,255,255,.85); }

/* ── #9 Venta multi-producto: botón "agregar" + carrito ── */
/* El borde DISCONTINUO era el problema de fondo: en toda interfaz significa "hueco
   vacío, aún no hay nada aquí". Anunciaba la mejor función del formulario como si
   fuera un placeholder, así que nadie la tocaba. Ahora es una tarjeta de acción con
   peso propio —insignia, título y beneficio— alineada a la izquierda como el resto
   de las filas del formulario, no centrada como un enlace suelto. */
.btn-add-item {
  display: flex; align-items: center; gap: 12px; text-align: left;
  width: 100%; margin: 10px 0 0; padding: 13px 14px; cursor: pointer;
  border-radius: var(--liquid-radius, 16px);
  color: var(--brand-text);
  background:
    linear-gradient(135deg, var(--brand-pale) 0%, transparent 60%),
    var(--surface-2);
  border: 1px solid var(--brand-glow);
  box-shadow: 0 2px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
  position: relative; overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s var(--spring, ease);
}
.btn-add-item .bai-badge {
  flex: 0 0 34px; height: 34px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--white);
  box-shadow: 0 4px 12px var(--brand-glow);
}
.btn-add-item .bai-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.btn-add-item .bai-title { font-weight: 800; font-size: .87rem; line-height: 1.2; color: var(--brand-text); }
/* El beneficio va en tono secundario: informa sin competir con el título. */
.btn-add-item .bai-hint  { font-weight: 500; font-size: .7rem; line-height: 1.25; color: var(--text-muted); }
.btn-add-item .bai-arrow { flex: 0 0 auto; opacity: .5; transition: transform .18s ease, opacity .18s ease; }

.btn-add-item:hover {
  border-color: var(--brand);
  box-shadow: 0 8px 24px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-add-item:hover .bai-arrow { transform: translateX(3px); opacity: 1; }
.btn-add-item:active { transform: scale(.985); }

/* Destello que cruza UNA vez al abrir el formulario: llama la atención sobre la
   función y se calla. Un brillo en bucle sería un anuncio parpadeando encima de un
   formulario de trabajo. */
.btn-add-item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.13) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: baiShine 1.5s ease-out .5s 1 forwards;
  pointer-events: none;
}
@keyframes baiShine { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .btn-add-item::after { animation: none; display: none; }
  .btn-add-item .bai-arrow { transition: none; }
}
.sale-cart { margin-top: 12px; padding: 12px; border-radius: 14px;
  background: var(--brand-pale); border: 1px solid var(--brand-glow); }
.sale-cart.hidden { display: none; }
.sale-cart-head { font-size: .76rem; font-weight: 700; opacity: .7; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
.sale-cart-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--brand-glow); }
.sci-name { flex: 1; font-size: .88rem; font-weight: 600; }
.sci-amt { font-size: .88rem; font-weight: 700; color: var(--brand); }
.sci-del { flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; cursor: pointer;
  background: rgba(244,63,94,.12); color: #f43f5e; border: none; font-size: .8rem; line-height: 1; }
.sci-del:hover { background: rgba(244,63,94,.22); }
.sale-cart-total { display: flex; justify-content: space-between; padding-top: 9px; font-weight: 800; font-size: .92rem; }

/* ── D Video de presentación (intro) con CoinMaster ── */
.intro-video-card { max-width: 460px; max-height: 92vh; overflow-y: auto; }
.intro-video-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ivh-title { font-weight: 800; font-size: 1rem; }
.ivh-sub { font-size: .76rem; opacity: .62; line-height: 1.3; }
.intro-video { width: 100%; border-radius: 14px; background: #000; max-height: 62vh; display: block; }

/* ── A3 Pantalla de Planes SmartSell ── */
.plans-card { max-height: 92vh; overflow-y: auto; max-width: 940px; width: 100%; margin: 0 auto; }
.plans-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-weight: 800; font-size: 1.15rem; }
.plans-close { background: rgba(255,255,255,.08); border: none; color: inherit; width: 32px; height: 32px; border-radius: 10px; cursor: pointer; font-size: 1rem; }
.plans-grid { display: grid; gap: 16px; padding-top: 4px; }
.plan-card { position: relative; overflow: hidden; border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 20px; padding: 20px 18px; text-align: center;
  background: rgba(255,255,255,.03); transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s; }
.plan-card:hover { transform: translateY(-4px); }
/* Escalada premium: entre más alto el plan, más lujoso y llamativo (Potenciador AV) */
.plan-card[data-plan="base"] { background: rgba(255,255,255,.025); }
.plan-card[data-plan="premium"] { border-color: rgba(45,226,176,.45);
  background: linear-gradient(180deg, rgba(45,226,176,.10), rgba(255,255,255,.03));
  box-shadow: 0 14px 44px rgba(45,226,176,.18), inset 0 1px 0 rgba(255,255,255,.08); }
.plan-card[data-plan="enterprise"] { border-color: rgba(212,175,55,.55);
  background: linear-gradient(165deg, rgba(212,175,55,.16), rgba(184,134,11,.06) 55%, rgba(0,0,0,.2));
  box-shadow: 0 18px 60px rgba(212,175,55,.26), inset 0 1px 0 rgba(255,255,255,.14); transform: scale(1.015); }
.plan-card[data-plan="enterprise"]:hover { transform: translateY(-4px) scale(1.015); }
.plan-card[data-plan="enterprise"]::before { content: ''; position: absolute; top: -60%; left: -30%; width: 60%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); transform: rotate(18deg);
  animation: planShine 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes planShine { 0%, 70% { left: -40%; } 100% { left: 130%; } }
/* S3: badge en FLUJO normal (antes absolute top:-11px → overflow:hidden lo cortaba). */
.plan-badge { display: inline-block; margin: 0 auto 10px; background: var(--brand, #C2185B); color: #fff;
  font-size: 10px; font-weight: 800; padding: 4px 13px; border-radius: 999px; letter-spacing: .04em; box-shadow: 0 4px 14px rgba(0,0,0,.3); position: relative; z-index: 2; }
.plan-card[data-plan="enterprise"] .plan-badge { background: linear-gradient(135deg, #D4AF37, #B8860B); }
.plan-logo { display: block; margin: 6px auto 10px; border-radius: 50%; position: relative; z-index: 1; }
.plan-card[data-plan="premium"] .plan-logo { box-shadow: 0 0 22px rgba(45,226,176,.45); width: 80px; height: 80px; }
.plan-card[data-plan="enterprise"] .plan-logo { box-shadow: 0 0 30px rgba(212,175,55,.55); width: 88px; height: 88px; }
.plan-name { font-weight: 800; font-size: 1.05rem; position: relative; z-index: 1; }
.plan-card[data-plan="enterprise"] .plan-name { font-size: 1.15rem; background: linear-gradient(135deg, #F5D67A, #D4AF37); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.plan-price { font-size: 1.9rem; font-weight: 900; margin: 6px 0 4px; letter-spacing: -.02em; position: relative; z-index: 1; }
.plan-card[data-plan="enterprise"] .plan-price { font-size: 2.15rem; }
.plan-price small { font-size: .8rem; font-weight: 600; opacity: .6; }
.plan-reg { font-size: .85rem; font-weight: 600; opacity: .45; text-decoration: line-through; margin-right: 8px; }
.plan-feats { list-style: none; padding: 0; margin: 10px 0 16px; display: flex; flex-direction: column; gap: 7px; font-size: .82rem; text-align: left; }
.plan-feats li { opacity: .85; }
.plan-buy { width: 100%; }
.plans-note { font-size: .72rem; opacity: .6; text-align: center; margin-top: 14px; line-height: 1.5; }
@media (min-width: 640px) { .plans-grid { grid-template-columns: repeat(3, 1fr); } }

/* MURO DE PLANES EN TEMA CLARO (2-ago) — todo este bloque estaba pintado SOLO para
   fondo oscuro: fondo y borde en blanco translúcido (invisibles sobre blanco) y el
   nombre "Enterprise" en degradado dorado recortado sobre el texto (~1.6:1). Cuando a
   un usuario se le vencía el plan, el muro que le bloquea la app era el que peor se
   leía. Las letras deben leerse SIEMPRE, con cualquier tema y cualquier color de marca. */
/* `!important` porque la capa Liquid Glass pinta `.plan-card` con !important; sin él
   estas tres tarjetas se quedarían con el vidrio genérico y sin su jerarquía visual. */
[data-theme="light"] .plan-card,
[data-theme="light"] .plan-card[data-plan="base"] {
  background: var(--surface) !important; border-color: var(--border-2) !important;
  box-shadow: var(--shadow-sm); }
[data-theme="light"] .plan-card[data-plan="premium"] {
  background: linear-gradient(180deg, rgba(0,168,140,.12), var(--surface) 70%) !important;
  border-color: rgba(0,128,107,.55) !important; box-shadow: 0 14px 44px rgba(0,128,107,.14); }
[data-theme="light"] .plan-card[data-plan="enterprise"] {
  background: linear-gradient(165deg, rgba(184,134,11,.18), var(--surface) 60%) !important;
  border-color: rgba(146,104,10,.6) !important; box-shadow: 0 18px 60px rgba(146,104,10,.18); }
/* El degradado se recorta sobre el texto: en claro tiene que ser oscuro, no dorado. */
[data-theme="light"] .plan-card[data-plan="enterprise"] .plan-name {
  background: linear-gradient(135deg, #8A6508, #5E4405); }
[data-theme="light"] .plan-card[data-plan="enterprise"]::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); }
/* Las opacidades venían calibradas para texto claro sobre negro; sobre blanco lavan. */
[data-theme="light"] .plan-feats li,
[data-theme="light"] .plan-price small,
[data-theme="light"] .plan-reg,
[data-theme="light"] .plans-note { opacity: 1; color: var(--text-2); }

/* ── #10 VS overlay (preview dinámico) ── */
.vs-card { max-height: 88vh; overflow-y: auto; }
.vs-list { max-height: 50vh; overflow-y: auto; }
.vs-preview { display: flex; align-items: center; justify-content: center; margin: 12px 0; min-height: 200px; }
.vs-canvas { width: 100%; max-width: 380px; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.vs-spin { opacity: .6; font-size: .85rem; padding: 2rem; }
.vs-actions { display: flex; gap: 10px; margin-top: 8px; }
.vs-actions .btn-ghost, .vs-actions .btn-brand { flex: 1; }

/* ── #14 Banner offline ── */
.offline-banner { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 24px);
  z-index: 9000; max-width: 92vw; padding: 10px 18px; border-radius: 999px; font-size: .82rem;
  font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.offline-banner.show { opacity: 1; transform: translate(-50%, 0); }
.offline-banner.off { background: #B8860B; color: #fff; }
.offline-banner.on  { background: linear-gradient(135deg,#0A6B5A,#2DE2B0); color: #fff; }

/* ── CoinMaster: avatar de imagen del Asesor IA (llena el círculo) ── */
.msg-avatar.ai { padding: 0; overflow: hidden; }
.coinmaster-av { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* ── N15 Checkbox de Términos claro + animado (señala dónde dar clic) ── */
/* N15: T&C como CARD prominente — obvio dónde tocar, animado, texto siempre legible. */
/* CONTRASTE (2-ago): decía `color: var(--text-1, #1f2430)` y --text-1 NO EXISTE en
   ninguna parte, así que SIEMPRE caía al fallback #1f2430. Sobre la tarjeta del tema
   oscuro (--surface #160C14) eso da ~1.2:1 de contraste: el texto de Términos era
   invisible y el registro parecía roto. Va con --text, que sí cambia con el tema. */
.tos-check { position: relative; display: flex; align-items: center; gap: 12px; margin: 8px 0 14px; padding: 13px 15px; cursor: pointer;
  font-size: .85rem; font-weight: 600; color: var(--text); user-select: none; border-radius: 14px;
  border: 1.5px solid var(--brand); background: var(--brand-pale);
  animation: tosCardPulse 2.1s ease-in-out infinite; transition: background .2s, box-shadow .2s; }
.tos-check:hover { background: var(--brand-glow); }
.tos-check:has(input:checked) { animation: none; background: var(--brand-pale); border-color: var(--brand); }
/* El input va invisible pero ENCIMA de la caja visible y con su mismo tamaño: así el
   aviso "debes aceptar los términos" del navegador apunta al recuadro correcto. Antes
   era 0×0 y absoluto sin ancestro posicionado → el submit se bloqueaba sin decir nada. */
.tos-check input { position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; margin: 0; opacity: 0; cursor: pointer; }
.tos-box { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; border: 2.5px solid var(--brand); display: flex; align-items: center; justify-content: center; color: transparent; background: #fff; transition: background .18s, color .18s; }
.tos-check input:checked + .tos-box { background: var(--brand); color: #fff; }
.tos-check input:focus-visible + .tos-box { outline: 2px solid var(--brand-bright); outline-offset: 2px; }
.tos-text { line-height: 1.35; }
.tos-text a { color: var(--brand); font-weight: 800; text-decoration: underline; }
@keyframes tosCardPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(194,24,91,0); } 50% { box-shadow: 0 0 0 4px var(--brand-glow); } }
@media (prefers-reduced-motion: reduce) { .tos-check { animation: none; } }

/* S5: glow-up del logo por plan — evolución visual progresiva (Básico→Premium→Enterprise). */
.header-logo[data-plan="premium"], .brand-logo[data-plan="premium"] { filter: drop-shadow(0 0 7px rgba(45,226,176,.55)); }
.header-logo[data-plan="enterprise"], .brand-logo[data-plan="enterprise"] { filter: drop-shadow(0 0 9px rgba(212,175,55,.65)) drop-shadow(0 0 2px rgba(212,175,55,.5)); }

/* ── Tour CoinMaster por sección (N18/N19): banner superior amigable ── */
.coin-tip { position: fixed; top: max(env(safe-area-inset-top,0px), 10px); left: 50%; transform: translate(-50%,-140%);
  z-index: 9600; display: flex; align-items: flex-start; gap: 11px; width: min(440px, 92vw); padding: 12px 14px;
  border-radius: 16px; background: rgba(14,16,22,.95); border: 1px solid rgba(45,226,176,.4);
  box-shadow: 0 14px 44px rgba(0,0,0,.5), 0 0 26px rgba(45,226,176,.15); backdrop-filter: blur(12px);
  opacity: 0; transition: transform .42s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
.coin-tip.show { transform: translate(-50%, 0); opacity: 1; }
.coin-tip-av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1.5px solid rgba(45,226,176,.5); }
.coin-tip-body { flex: 1; min-width: 0; }
.coin-tip-name { font-size: 11px; font-weight: 800; color: #2DE2B0; margin-bottom: 2px; }
.coin-tip-msg { font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.88); }
.coin-tip-x { flex-shrink: 0; width: 24px; height: 24px; border-radius: 8px; border: none; cursor: pointer;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.5); font-size: 13px; }
.coin-tip-x:hover { color: #fff; }

/* ══ LiquidGlass AV (jul 2026) — paridad SmartCoin ═══════════════════════════
   Las stat-cards del dashboard pasan de superficie plana a vidrio líquido usando
   los TOKENS temáticos existentes (--glass-*) → correcto en oscuro Y claro.
   Gradiente sutil + highlight superior + sombra inferior = luz física. */
.stat-card, .sheet-card {
  background-color: var(--glass-bg);
  background-image: linear-gradient(157deg, var(--glass-hi), transparent 52%);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
}
.stat-card {
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 1px rgba(0,0,0,.12), var(--shadow-sm);
}
.stat-card:hover { background-color: var(--glass-bg-2); }

/* ══ Splash v4 — moneda 2 caras nativa (2-jul, paridad SmartCoin) ═════════════
   CSS puro, tema-adaptativo (var(--bg)/(--brand)/(--white)): cae girando 4 vueltas
   que desaceleran y aterriza en el ÁRBOL; la otra cara es el colibrí (SmartCoin). */
/* El splash nativo deja el logo QUIETO y CENTRADO. Antes la moneda entraba cayendo
   desde -55vh, así que ese logo desaparecía y otro caía desde arriba: las "2 fases"
   que se veían. Ahora arranca en el mismo sitio y sólo se asienta girando. */
.ss-coin-wrap {
  perspective: 1100px;
  animation: ssSettle .9s cubic-bezier(.22,.9,.32,1) both;
}
.ss-coin {
  position: relative; width: 170px; height: 170px;
  transform-style: preserve-3d;
  animation: ssSpin 1.65s cubic-bezier(.22,.9,.32,1) both;
}
.ss-coin-face {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 6px solid var(--brand);
  background: #0a1210;
  box-shadow: 0 0 40px var(--brand-glow, rgba(20,184,166,.35)),
              0 12px 30px rgba(0,0,0,.4), inset 0 0 22px rgba(0,0,0,.45);
}
.ss-coin-face img { width: 100%; height: 100%; object-fit: cover; }
.ss-coin-face::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.24), transparent 44%),
              radial-gradient(circle at 70% 88%, rgba(0,0,0,.36), transparent 55%);
}
.ss-coin-back { transform: rotateY(180deg); }
.ss-splash-tag {
  font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand); margin: 0;
}
.ss-splash-rise { animation: ssRise .5s cubic-bezier(.34,1.4,.64,1) 1.7s both; }
@keyframes ssSpin { from { transform: rotateY(1440deg); } to { transform: rotateY(0deg); } }
@keyframes ssSettle { from { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes ssRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ss-coin, .ss-coin-wrap, .ss-splash-rise { animation: none; } }

/* Nav al ras del borde inferior (pedido Alex 2-jul): 25% del safe-area como colchón */
.bottom-nav { padding-bottom: max(calc(env(safe-area-inset-bottom, 0px) * 0.25), 4px) !important; }

/* MODA/TEXTIL: selector de color con muestra visual (rubro moda). */
.swatch-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: .35rem; }
.swatch {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid var(--border-2); box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.swatch:hover { transform: scale(1.12); }
.swatch.sel { border-color: var(--brand); transform: scale(1.15); box-shadow: 0 0 0 2px var(--brand); }
/* Color propio del negocio (añadido a la carta): anillo tenue de marca para
   distinguirlo de los 78 de la carta oficial del proveedor. */
.swatch.own { border-color: var(--brand); border-style: dashed; }
/* Botón "+" para abrir el editor de la carta. Mismo tamaño que una muestra para que
   la rejilla no se descuadre. */
.swatch-add {
  background: var(--surface-2); color: var(--text-muted);
  border-style: dashed; font-size: .95rem; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.swatch-add:hover { color: var(--brand); border-color: var(--brand); }
.swatch-selected { margin-top: .5rem; font-size: .8rem; opacity: .85; }
.swatch-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 4px; border: 1px solid rgba(0,0,0,.25); vertical-align: -1px; }

/* ══════════ VENTAS A CRÉDITO / COBRANZA (23-jul-2026) ══════════ */
/* 24-jul: reescrito THEME-AWARE (usa variables --surface/--text/--border) — antes
   usaba --bg-card/--card inexistentes → fallback oscuro fijo + texto heredado
   oscuro = invisible en modo claro. Ahora funciona en claro y oscuro. */
.credit-wrap { display: flex; flex-direction: column; gap: .9rem; color: var(--text); margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--border-2); }
.credit-section-title { font-size: .95rem; font-weight: 800; color: var(--text); margin: 0; }
.credit-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.credit-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: .7rem .8rem; text-align: center; }
.credit-kpi.is-mora { border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.10); }
.credit-kpi .ck-label { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: .2rem; }
.credit-kpi .ck-val { display: block; font-size: 1rem; font-weight: 800; color: var(--text); }
.credit-list { display: flex; flex-direction: column; gap: .6rem; }
.credit-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: .85rem .95rem; cursor: pointer; transition: border-color .15s, transform .1s; color: var(--text); }
.credit-card:active { transform: scale(.99); }
.credit-card:hover { border-color: var(--info); }
.cc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: .55rem; }
.cc-buyer { font-weight: 700; font-size: .92rem; color: var(--text); }
.cc-prod { font-size: .72rem; color: var(--text-2); margin-top: .1rem; }
.credit-badge { font-size: .64rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.credit-badge.ok { background: rgba(16,185,129,.15); color: #10b981; }
.credit-badge.mora { background: rgba(239,68,68,.15); color: #ef4444; }
.cc-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: .5rem; }
.cc-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--info), #10b981); transition: width .3s; }
.cc-foot { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text-2); }
.cc-foot b { color: var(--text); }
.credit-empty { text-align: center; padding: 2.5rem 1rem; color: var(--text-2); }
.credit-empty .muted { font-size: .8rem; color: var(--text-muted); margin-top: .3rem; }
.muted { color: var(--text-muted); }

/* Modal detalle / form — full-screen y scrollable en móvil */
.credit-modal-ov { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; justify-content: center; }
/* Altura tope con dvh (viewport dinámico): en móvil/PWA `vh` incluye la barra del
   navegador y hacía el sheet MÁS ALTO que la pantalla visible → la cabecera con la
   ✕ quedaba por encima del borde superior y no se podía cerrar. dvh corrige eso y
   deja una franja de overlay arriba para tocar y cerrar. */
.credit-modal { background: var(--surface); color: var(--text); width: 100%; max-width: 480px; max-height: 88vh; max-height: 85dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-radius: 20px 20px 0 0; border: 1px solid var(--border); border-bottom: 0; padding: 1.4rem 1.3rem calc(2rem + env(safe-area-inset-bottom)); box-shadow: 0 -8px 40px rgba(0,0,0,.35); }
.cm-head { position: sticky; top: 0; background: var(--surface); display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .9rem; gap: .6rem; padding: .15rem 0 .6rem; z-index: 10001; border-bottom: 1px solid var(--border-2); }
.cm-title { font-size: 1.05rem; font-weight: 800; color: var(--text); }
.cm-sub { font-size: .72rem; color: var(--text-2); margin-top: .15rem; }
.cm-x { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: 1.15rem; line-height: 1; cursor: pointer; min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; flex-shrink: 0; }
.cm-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: .8rem; }
.cm-summary > div { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: .5rem; text-align: center; }
.cm-summary span { display: block; font-size: .58rem; text-transform: uppercase; color: var(--text-2); }
.cm-summary b { font-size: .82rem; color: var(--text); }
.cm-mora { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #e0453a; font-size: .74rem; padding: .55rem .7rem; border-radius: 10px; margin-bottom: .8rem; }
.cm-cuotas { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; }
.cuota-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: .8rem; color: var(--text); }
.cuota-row.paid { opacity: .55; }
.cuota-row.overdue { border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.08); }
.cuota-n { font-weight: 700; color: var(--text-2); }
.cuota-date { color: var(--text-2); }
.cuota-amt { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.cuota-tag.ok { color: #10b981; font-size: .68rem; font-weight: 700; }
.cuota-pay { background: rgba(0,162,232,.14); border: 1px solid rgba(0,162,232,.4); color: var(--info-text); font-size: .68rem; font-weight: 700; padding: .35rem .65rem; border-radius: 8px; cursor: pointer; min-height: 32px; }
.cm-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.2rem; }
.cm-form .field.full { grid-column: 1 / -1; }
.cm-form label { display: block; font-size: .68rem; color: var(--text-2); margin-bottom: .25rem; }
.cm-form .inp { background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); border-radius: 10px; padding: .6rem .7rem; width: 100%; font-size: .9rem; }
.cm-preview { grid-column: 1 / -1; font-size: .78rem; color: var(--text-2); }
.cm-actions { display: flex; gap: .6rem; }
.cm-save { flex: 1; background: linear-gradient(90deg, var(--info), #10b981); color: #fff; border: 0; padding: .85rem; border-radius: 12px; font-weight: 800; cursor: pointer; min-height: 46px; }
.cm-del { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #e0453a; padding: .6rem .9rem; border-radius: 12px; font-weight: 700; font-size: .8rem; cursor: pointer; }
/* Móvil: form en 1 columna + modal casi full-screen para que las acciones no queden cortadas */
@media (max-width: 480px) {
  .cm-form { grid-template-columns: 1fr; }
  .cm-summary { grid-template-columns: repeat(2, 1fr); }
  .credit-modal { max-height: 90vh; max-height: 88dvh; border-radius: 18px 18px 0 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FASE DE VERIFICACIÓN — cuotas (26-jul-2026)
   Reclamo de Alex: "al dar clic a la cuota por pagar no se aprecia".
   El estado de selección se lee en la FILA COMPLETA, no en una casilla de 18px,
   y funciona igual en claro y en oscuro porque se construye con color-mix sobre
   --accent (el tono de marca del negocio) en vez de colores fijos.
   Acabado liquid glass: superficie translúcida, borde luminoso y realce interior.
   ══════════════════════════════════════════════════════════════════════════ */

.cuota-row { position: relative; transition: background .22s cubic-bezier(.2,.8,.2,1), border-color .22s, box-shadow .22s, transform .18s; }
.cuota-row:hover:not(.paid) { border-color: color-mix(in srgb, var(--accent) 38%, transparent); }

/* Fila SELECCIONADA para cobrar */
.cuota-row.sel {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent),
              0 8px 22px -12px color-mix(in srgb, var(--accent) 70%, transparent),
              inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
  transform: translateX(2px);
}
/* Barra lateral: indicador inequívoco de "esta entra en el cobro" */
.cuota-row.sel::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 85%, transparent);
}

/* Casilla propia (la nativa no se puede estilar igual en los dos temas) */
.cuota-check { display: flex; align-items: center; gap: .4rem; cursor: pointer; user-select: none; }
.cuota-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.cuota-check-box {
  width: 19px; height: 19px; border-radius: 6px; flex-shrink: 0;
  border: 1.5px solid color-mix(in srgb, var(--text) 32%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
  transition: background .18s, border-color .18s, box-shadow .18s, transform .12s;
}
.cuota-check-box::after {
  content: ''; width: 10px; height: 6px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(.4); opacity: 0;
  transition: transform .2s cubic-bezier(.2,1.4,.4,1), opacity .16s;
}
.cuota-check input:checked + .cuota-check-box {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent),
              0 3px 10px -3px color-mix(in srgb, var(--accent) 80%, transparent);
}
.cuota-check input:checked + .cuota-check-box::after { transform: rotate(-45deg) scale(1); opacity: 1; }
.cuota-check input:focus-visible + .cuota-check-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.cuota-check-txt { font-size: .72rem; font-weight: 600; opacity: .72; letter-spacing: .01em; }
.cuota-check:hover .cuota-check-box { border-color: var(--accent); transform: scale(1.06); }

/* Cuota EN VERIFICACIÓN: el comprador declaró el pago y falta confirmar */
.cuota-row.verifying {
  grid-template-columns: auto 1fr auto auto;
  background: color-mix(in srgb, #F5A524 12%, var(--surface-2));
  border-color: color-mix(in srgb, #F5A524 48%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
}
.cuota-row.verifying::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: #F5A524;
  box-shadow: 0 0 10px rgba(245,165,36,.7);
  animation: cuotaPulse 2.4s ease-in-out infinite;
}
@keyframes cuotaPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cuota-row.verifying::before { animation: none; opacity: .9; } }

.cuota-verify-note { grid-column: 1 / -1; font-size: .68rem; color: #F5A524; font-weight: 600; letter-spacing: .01em; margin-top: .15rem; }
.cuota-reject { grid-column: 1 / -1; font-size: .68rem; color: #ef4444; font-weight: 600; margin-top: .15rem; }

.cuota-verify-actions { display: flex; gap: .35rem; }
.cuota-ok, .cuota-no {
  border: 1px solid transparent; border-radius: 9px; padding: .34rem .62rem;
  font-size: .7rem; font-weight: 800; cursor: pointer; letter-spacing: .01em;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .14s, box-shadow .18s, background .18s;
}
.cuota-ok { background: color-mix(in srgb, var(--accent) 88%, transparent); color: #fff; }
.cuota-ok:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 90%, transparent); }
.cuota-no { background: color-mix(in srgb, #ef4444 14%, transparent); border-color: rgba(239,68,68,.42); color: #ef4444; }
.cuota-no:hover { transform: translateY(-1px); background: color-mix(in srgb, #ef4444 22%, transparent); }

@media (max-width: 480px) {
  .cuota-row.verifying { grid-template-columns: auto 1fr auto; }
  .cuota-verify-actions { grid-column: 1 / -1; margin-top: .3rem; }
  .cuota-ok, .cuota-no { flex: 1; padding: .5rem; }
}

/* ── CONFECCIÓN: servicios del pedido en el formulario de venta (26-jul-2026) ──
   El stock guarda modelos base; aquí se eligen los servicios y se ve, en vivo,
   cuántos bloques paga la cantidad del pedido. Mismo lenguaje liquid glass que
   la selección de cuotas: color-mix sobre --accent → idéntico en claro y oscuro. */
.sale-svc-grid { display: grid; gap: .4rem; }
.sale-svc {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem;
  padding: .55rem .7rem; border-radius: 12px; cursor: pointer; user-select: none;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  border: 1px solid var(--border); transition: background .2s, border-color .2s, box-shadow .2s, transform .14s;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sale-svc:hover { border-color: color-mix(in srgb, var(--accent) 42%, transparent); }
.sale-svc.sel {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  box-shadow: 0 6px 18px -12px color-mix(in srgb, var(--accent) 80%, transparent),
              inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
}
.sale-svc input { position: absolute; opacity: 0; width: 0; height: 0; }
.sale-svc-box {
  width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0; display: grid; place-items: center;
  border: 1.5px solid color-mix(in srgb, var(--text) 30%, transparent);
  background: color-mix(in srgb, var(--surface) 65%, transparent);
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.sale-svc-box::after {
  content: ''; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(.4); opacity: 0;
  transition: transform .2s cubic-bezier(.2,1.4,.4,1), opacity .16s;
}
.sale-svc input:checked + .sale-svc-box {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.sale-svc input:checked + .sale-svc-box::after { transform: rotate(-45deg) scale(1); opacity: 1; }
.sale-svc-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.sale-svc-name { font-size: .84rem; font-weight: 700; color: var(--text); }
.sale-svc-rule { font-size: .68rem; opacity: .6; font-variant-numeric: tabular-nums; }
.sale-svc-amt { font-size: .78rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }

.sale-svc-total {
  margin-top: .5rem; padding: .6rem .75rem; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.ssv-row { display: flex; justify-content: space-between; gap: .8rem; font-size: .74rem; opacity: .8; padding: .12rem 0; font-variant-numeric: tabular-nums; }
.ssv-sum { display: flex; justify-content: space-between; gap: .8rem; margin-top: .35rem; padding-top: .35rem; border-top: 1px dashed color-mix(in srgb, var(--accent) 34%, transparent); font-size: .84rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ssv-warn { margin-top: .35rem; font-size: .68rem; color: #F5A524; font-weight: 600; }

/* ── CONFECCIÓN: detalles de la prenda en la venta (27-jul-2026) ───────────────
   Estandarizamos modelos, colores, tallas y servicios; aquí solo se elige. */
.smd-head { display: flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-bottom: .55rem; }
.smd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 560px) { .smd-grid { grid-template-columns: 1fr; } }
.smd-field label { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .55; margin-bottom: .35rem; }
.smd-picked { text-transform: none; letter-spacing: 0; opacity: .9; font-weight: 800; color: var(--accent); }
.smd-empty { font-size: .74rem; opacity: .55; padding: .5rem 0; }

.smd-sizes { display: flex; flex-wrap: wrap; gap: .3rem; }
.smd-size {
  min-width: 40px; padding: .42rem .6rem; border-radius: 10px; cursor: pointer;
  font-size: .76rem; font-weight: 800; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
  border: 1px solid var(--border); color: var(--text);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .18s, border-color .18s, box-shadow .18s, transform .12s;
}
.smd-size:hover { border-color: color-mix(in srgb, var(--accent) 46%, transparent); transform: translateY(-1px); }
.smd-size.sel {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 5px 16px -6px color-mix(in srgb, var(--accent) 85%, transparent),
              inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent);
}

.smd-colors { display: flex; flex-wrap: wrap; gap: .3rem; max-height: 108px; overflow-y: auto; padding: .15rem; scrollbar-width: thin; }
.smd-color {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 1.5px solid color-mix(in srgb, var(--text) 16%, transparent);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.22);
  transition: transform .14s cubic-bezier(.2,1.4,.4,1), box-shadow .18s;
}
.smd-color:hover { transform: scale(1.16); }
.smd-color.sel {
  transform: scale(1.16);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent),
              0 4px 12px -3px color-mix(in srgb, var(--accent) 80%, transparent);
}
.sci-attrs { display: block; font-size: .66rem; opacity: .58; font-weight: 600; margin-top: .1rem; }

/* ── Servicios como CHIPS en la venta (27-jul-2026) ────────────────────────────
   Alex: los checkbox no son ágiles para selección rápida. Se replica el lenguaje
   de los chips de la ficha de stock: el chip entero es el blanco táctil. */
.sale-svc-grid { display: flex; flex-wrap: wrap; gap: .35rem; }
.svc-chip {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .48rem .78rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .01em;
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
  border: 1px solid var(--border); color: var(--text);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .18s, border-color .18s, box-shadow .2s, transform .12s;
}
.svc-chip:hover { border-color: color-mix(in srgb, var(--accent) 48%, transparent); transform: translateY(-1px); }
.svc-chip.sel {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 6px 18px -7px color-mix(in srgb, var(--accent) 88%, transparent),
              inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent);
}
.svc-chip-amt {
  font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: .1rem .4rem; border-radius: 999px;
  background: rgba(255,255,255,.22);
}

/* ══════════════════════════════════════════════════════════════════════════
   FORMULARIO DE NUEVA VENTA — acabado premium (30-jul-2026)
   Alex: "funciona bien pero la distribución y apariencia no se ve premium".
   Era una lista plana de campos sin jerarquía: todo pesaba igual y el ojo no
   sabía dónde mirar. Se agrupa por intención y se jerarquiza por peso visual,
   sin mover un solo id ni romper el JS que ya funciona.
   ══════════════════════════════════════════════════════════════════════════ */

/* Cabecera del formulario con acento de marca */
#sale-form .form-title,
#sale-form h3 {
  position: relative;
  padding-left: .75rem;
  letter-spacing: .02em;
}
#sale-form .form-title::before,
#sale-form h3::before {
  content: ''; position: absolute; left: 0; top: .15em; bottom: .15em; width: 3px;
  border-radius: 3px; background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
}

/* Etiquetas: más aire y menos grito */
#sale-form label {
  font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  opacity: .5; margin-bottom: .3rem;
}

/* Campos: superficie translúcida y foco que se siente */
#sale-form .inp {
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  border: 1px solid var(--border);
  transition: border-color .18s, box-shadow .2s, background .18s;
}
#sale-form .inp:hover { border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
#sale-form .inp:focus {
  outline: none;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--surface-2) 96%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* El PRECIO es el dato que manda: se lee primero */
#f-sale-price {
  font-size: 1.06rem; font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* Detalles de la prenda: tarjeta propia, no un campo más de la lista */
#sale-moda-details {
  border-radius: 16px;
  padding: .9rem 1rem 1rem;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 7%, transparent) 0%,
    color-mix(in srgb, var(--surface-2) 60%, transparent) 60%);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
}
#sale-moda-details .smd-head { color: var(--accent); opacity: .95; }

/* Plan de pago: segmentos con peso de control, no de enlace */
#sale-plan-row .plan-opt {
  border-radius: 12px; font-weight: 750;
  transition: background .18s, color .18s, box-shadow .2s, transform .12s;
}
#sale-plan-row .plan-opt.active {
  box-shadow: 0 5px 16px -8px color-mix(in srgb, var(--accent) 85%, transparent);
}

/* Acciones: el guardar domina, el cancelar acompaña */
#sale-form .form-actions { gap: .6rem; padding-top: .3rem; }
#sale-form .form-actions .btn-brand {
  border-radius: 13px; font-weight: 850; letter-spacing: .01em;
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent) 92%, transparent);
}
#sale-form .form-actions .btn-brand:hover { transform: translateY(-1px); }

@media (max-width: 560px) {
  #sale-moda-details { padding: .8rem .85rem .9rem; }
  #sale-form .form-actions { flex-direction: column-reverse; }
  #sale-form .form-actions > * { width: 100%; }
}

/* ── Hoja de envío de cobro (30-jul-2026) ────────────────────────────────────── */
.pay-card { max-width: 460px; }
.pay-title { font-size: 1.05rem; font-weight: 850; letter-spacing: -.01em; margin-bottom: .2rem; }
.pay-sub { font-size: .84rem; color: var(--text-muted); margin-bottom: .9rem; }
.pay-links { display: grid; gap: .4rem; }
.pay-link {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem;
  padding: .6rem .75rem; border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  border: 1px solid var(--border);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pay-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.pay-link-name { font-size: .84rem; font-weight: 750; }
.pay-link-prod { font-size: .7rem; opacity: .55; text-align: right; }

/* ══════════════════════════════════════════════════════════════════════════
   COBRO EN LÍNEA — bloque de la ficha de producto (30-jul-2026)
   Dos pasarelas afiliadas, y para quien no la tiene activa un estado bloqueado
   que INVITA en vez de esconder. Mismo lenguaje liquid glass del resto.
   ══════════════════════════════════════════════════════════════════════════ */
#f-prod-paylink-wrap {
  border-radius: 16px; padding: .85rem .9rem .9rem;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 6%, transparent) 0%,
    color-mix(in srgb, var(--surface-2) 55%, transparent) 62%);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
}
.paylink-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.paylink-title {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.paylink-badge {
  font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .18rem .5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.paylink-badge.off {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text-muted); border-color: var(--border);
}
.paylink-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; margin-bottom: .45rem; }
.paylink-row .inp { border-radius: 11px; font-size: .82rem; }
.paylink-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; flex-shrink: 0; }
.paylink-tag { font-size: .64rem; font-weight: 800; letter-spacing: .04em; opacity: .55; white-space: nowrap; }
.paylink-hint { font-size: .67rem; opacity: .6; line-height: 1.45; margin-top: .2rem; }

/* Estado bloqueado: enseña la capacidad, no la esconde */
.paylink-locked { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.paylink-locked-art {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
}
.paylink-locked-txt { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.paylink-locked-txt b { font-size: .86rem; font-weight: 800; }
.paylink-locked-txt span { font-size: .72rem; opacity: .62; line-height: 1.5; }
.paylink-cta { grid-column: 1 / -1; margin-top: .55rem; width: 100%; border-radius: 12px; font-weight: 800; }
.paylink-cta:disabled { opacity: .65; cursor: default; }

/* ── Hoja de cobro: elegir pasarela (30-jul-2026) ──────────────────────────────
   Antes se enviaban las dos pasarelas en el mismo mensaje y el cliente tenía que
   adivinar. Ahora el negocio elige, y la selección se ve de lejos. */
.pay-pick-label { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .5; margin: .9rem 0 .45rem; }
.pay-picker { display: grid; gap: .4rem; }
.pay-opt {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem;
  padding: .8rem .9rem; border-radius: 14px; cursor: pointer; width: 100%; text-align: left;
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
  border: 1.5px solid var(--border); color: var(--text);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .18s, background .18s, box-shadow .2s, transform .12s;
}
.pay-opt:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--pg) 55%, transparent); }
.pay-opt-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--pg); box-shadow: 0 0 10px var(--pg); }
.pay-opt-name { font-size: .92rem; font-weight: 800; letter-spacing: -.01em; }
.pay-opt-check { font-size: .9rem; font-weight: 900; color: var(--pg); opacity: 0; transform: scale(.5); transition: opacity .18s, transform .2s cubic-bezier(.2,1.4,.4,1); }
.pay-opt.sel {
  border-color: var(--pg);
  background: color-mix(in srgb, var(--pg) 12%, var(--surface-2));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pg) 16%, transparent),
              0 8px 22px -12px var(--pg), inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent);
}
.pay-opt.sel .pay-opt-check { opacity: 1; transform: scale(1); }

/* Botones de envío: el cobro es la acción principal de esta hoja */
.pay-send {
  width: 100%; margin-top: .7rem; padding: .95rem 1rem; border-radius: 14px; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  font-size: .95rem; font-weight: 850; letter-spacing: .01em;
  background: #25D366; color: #04140f;
  box-shadow: 0 10px 26px -12px rgba(37,211,102,.9);
  transition: transform .14s, box-shadow .2s, filter .18s;
}
.pay-send:hover { transform: translateY(-1px); filter: brightness(1.04); }
.pay-send:active { transform: translateY(0); }
.pay-send.alt {
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  color: var(--text); border: 1px solid var(--border);
  box-shadow: none; margin-top: .45rem;
}
.pay-send.alt:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

/* El botón que abre la hoja, en el detalle de la venta: que se vea */
#sale-detail-pay {
  margin-top: .7rem !important; padding: .95rem 1rem; border-radius: 14px;
  font-size: .95rem; font-weight: 850;
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent) 95%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   DETALLES DE LA PRENDA — capa a pantalla completa (30-jul-2026)
   Alex: en el móvil, el scroll de la paleta lo capturaba la página entera y era
   imposible elegir un color. La solución no es afinar el scroll inline sino
   sacarlo del formulario: cada control con su propio espacio.
   ══════════════════════════════════════════════════════════════════════════ */
.smd-open {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .7rem; padding: .85rem .9rem; border-radius: 14px; cursor: pointer; text-align: left;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 9%, transparent) 0%,
    color-mix(in srgb, var(--surface-2) 60%, transparent) 65%);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--text);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .14s, box-shadow .2s, border-color .18s;
}
.smd-open:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.smd-open-ic {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.smd-open-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.smd-open-txt b { font-size: .88rem; font-weight: 800; }
.smd-open-txt span { font-size: .72rem; opacity: .55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smd-open-txt span.lleno { opacity: .9; color: var(--accent); font-weight: 700; }
.smd-open-go { font-size: 1.3rem; opacity: .35; }

.moda-sheet { position: fixed; inset: 0; z-index: 10700; display: flex; align-items: flex-end; justify-content: center; }
.moda-sheet.hidden { display: none; }
.moda-sheet-bg {
  position: absolute; inset: 0; background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .24s;
}
.moda-sheet.open .moda-sheet-bg { opacity: 1; }
.moda-sheet-card {
  position: relative; width: 100%; max-width: 560px;
  max-height: 92vh; max-height: 90dvh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 22px 22px 0 0;
  transform: translateY(22px) scale(.98); opacity: 0;
  transition: transform .28s cubic-bezier(.2,.9,.25,1), opacity .22s;
  box-shadow: 0 -18px 50px -18px rgba(0,0,0,.6);
}
.moda-sheet.open .moda-sheet-card { transform: translateY(0) scale(1); opacity: 1; }
@media (min-width: 620px) {
  .moda-sheet { align-items: center; }
  .moda-sheet-card { border-radius: 22px; }
}
.moda-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.15rem .8rem; border-bottom: 1px solid var(--border); }
.moda-sheet-title { font-size: 1.05rem; font-weight: 850; letter-spacing: -.01em; }
.moda-sheet-sub { font-size: .74rem; opacity: .55; margin-top: .15rem; }
.moda-sheet-x { background: none; border: 0; color: var(--text); opacity: .45; font-size: 1.1rem; cursor: pointer; padding: .2rem .35rem; }
.moda-sheet-x:hover { opacity: 1; }
/* El scroll vive AQUÍ, no en la página: el gesto se queda dentro de la capa. */
.moda-sheet-body { padding: 1rem 1.15rem 1.2rem; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: grid; gap: 1.1rem; }
.moda-sheet-foot { padding: .85rem 1.15rem calc(.9rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
.moda-sheet-ok { width: 100%; padding: .95rem; border-radius: 14px; font-size: .95rem; font-weight: 850; }

/* Dentro de la capa la paleta respira: sin scroll propio, en rejilla completa */
.moda-sheet .smd-colors { max-height: none; overflow: visible; display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: .5rem; }
.moda-sheet .smd-color { width: 34px; height: 34px; }
.moda-sheet .smd-sizes { gap: .4rem; }
.moda-sheet .smd-size { min-width: 52px; padding: .6rem .7rem; font-size: .85rem; }

/* ── MATRIZ color x talla + servicios a medida (31-jul-2026) ───────────────────
   Réplica de las hojas con las que Ausban lleva sus pedidos: filas de color,
   columnas de talla, cantidad en el cruce. */
.smd-mx-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .4rem; }
.smd-mx-add {
  font-size: .7rem; font-weight: 800; padding: .3rem .65rem; border-radius: 9px; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent);
}
.smd-mx-wrap { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 12px; border: 1px solid var(--border); }
.smd-mx { width: 100%; border-collapse: collapse; font-size: .78rem; }
.smd-mx th {
  font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  opacity: .55; padding: .45rem .3rem; text-align: center; white-space: nowrap;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
.smd-mx th.mx-cth { text-align: left; padding-left: .6rem; min-width: 120px; }
.smd-mx td { padding: .25rem; text-align: center; border-top: 1px solid var(--border); }
.smd-mx td.mx-ctd { display: flex; align-items: center; gap: .4rem; padding-left: .6rem; }
.mx-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); }
/* Sin color todavía: un hueco a rayas se lee como "falta elegir", un círculo vacío no */
.mx-dot.vacio {
  border-style: dashed; opacity: .5;
  background: repeating-linear-gradient(45deg, transparent 0 3px, color-mix(in srgb, var(--text) 18%, transparent) 3px 6px);
}
/* Botón que abre la carta de colores: muestra el tono y su nombre, no un desplegable
   ciego. Ocupa toda la celda para que en el móvil sea fácil de acertar. */
.mx-color {
  flex: 1; min-width: 96px; display: flex; align-items: center; gap: .4rem;
  background: transparent; border: 0; border-radius: 9px; color: var(--text);
  font-size: .78rem; font-weight: 700; padding: .4rem .3rem; cursor: pointer;
  text-align: left; transition: background .15s;
}
.mx-color:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mx-color:not(.puesto) .mx-cname { opacity: .5; font-weight: 600; }
.mx-cname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-q {
  width: 46px; text-align: center; padding: .4rem .2rem; border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 85%, transparent);
  border: 1px solid var(--border); color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums;
}
.mx-q:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.mx-tot { font-weight: 850; font-variant-numeric: tabular-nums; color: var(--accent); }
.mx-del { background: none; border: 0; color: var(--text); opacity: .35; cursor: pointer; padding: .2rem .35rem; }
.mx-del:hover { opacity: 1; color: #ef4444; }
.smd-mx-total { margin-top: .45rem; font-size: .74rem; opacity: .55; font-weight: 700; }
.smd-mx-total.lleno { opacity: 1; color: var(--accent); }

/* Servicio con personalización por pedido */
.svc-item { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.svc-edit {
  font-size: .66rem; font-weight: 800; padding: .34rem .6rem; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--surface-2) 85%, transparent);
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent);
}
.svc-custom {
  width: 100%; display: grid; gap: .45rem; margin: .35rem 0 .2rem; padding: .65rem .7rem;
  border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
.svc-custom label { display: grid; gap: .2rem; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.svc-custom input {
  padding: .45rem .6rem; border-radius: 9px; font-size: .82rem; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.svc-custom input:focus { outline: none; border-color: var(--accent); }
.svc-custom-hint { font-size: .64rem; opacity: .5; margin: 0; text-transform: none; letter-spacing: 0; }
.ssv-cus { color: var(--accent); font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; }

/* Estándares del tarifario: fila propia bajo el servicio elegido. `width:100%` porque
   .svc-item es flex-wrap y si no, los chips se meterían en la línea del servicio.
   El chip activo pinta el acento y usa --on-accent (legible en ambos temas, y también
   si el negocio cambia su color de marca — nunca un #000/#fff fijo encima del acento). */
.svc-std { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .3rem 0 .1rem; }
.svc-std-chip {
  display: inline-flex; align-items: baseline; gap: .32rem; cursor: pointer;
  font-size: .7rem; font-weight: 700; padding: .3rem .56rem; border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  border: 1px solid var(--border); color: var(--text);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.svc-std-chip:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.svc-std-chip.on {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.ssc-amt { font-weight: 800; opacity: .72; font-variant-numeric: tabular-nums; }
.svc-std-chip.on .ssc-amt { opacity: .9; }
.svc-std-note { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
@media (hover: none) { .svc-std-chip:hover { border-color: var(--border); } }
@media (prefers-reduced-motion: reduce) { .svc-std-chip { transition: none; } }

/* Interruptor de control de stock (confección) */
.track-row { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .55rem; cursor: pointer; }
.track-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.track-box {
  width: 40px; height: 23px; border-radius: 999px; flex-shrink: 0; position: relative;
  background: color-mix(in srgb, var(--text) 16%, transparent);
  border: 1px solid var(--border); transition: background .2s;
}
.track-box::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%;
  background: #fff; transition: transform .22s cubic-bezier(.2,.9,.25,1);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.track-row input:checked + .track-box { background: var(--accent); border-color: var(--accent); }
.track-row input:checked + .track-box::after { transform: translateX(17px); }
.track-txt { display: flex; flex-direction: column; gap: .12rem; }
.track-txt b { font-size: .84rem; font-weight: 750; }
.track-txt span { font-size: .7rem; opacity: .55; line-height: 1.45; }

/* ── Enviar comprobante: WhatsApp y correo (31-jul-2026) ───────────────────── */
.rc-send { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .9rem; }
@media (max-width: 420px) { .rc-send { grid-template-columns: 1fr; } }
.rc-btn {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .85rem .7rem; border-radius: 13px; border: 0; cursor: pointer;
  font-size: .86rem; font-weight: 850; letter-spacing: .01em;
  transition: transform .14s, box-shadow .2s, filter .18s;
}
.rc-btn:hover { transform: translateY(-1px); }
.rc-wa { background: #25D366; color: #04140f; box-shadow: 0 8px 22px -12px rgba(37,211,102,.9); }
.rc-wa:hover { filter: brightness(1.05); }
.rc-mail {
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  color: var(--text); border: 1px solid var(--border);
}
.rc-mail:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

/* ── Capa de detalles: TODO visible sin desplazar (31-jul-2026) ────────────────
   Alex: "para ver +Color debo deslizar". El botón vivía dentro del área con
   scroll, así que en pantallas cortas quedaba fuera. Ahora la cabecera de la
   matriz es pegajosa y la capa aprovecha el alto disponible: en tablet y desktop
   entra completa, y en móvil solo desplaza la rejilla, nunca los controles. */
.moda-sheet-card { max-height: 94dvh; }
@media (min-width: 620px) { .moda-sheet-card { max-height: 88dvh; } }
@media (min-width: 900px) { .moda-sheet-card { max-width: 720px; } }
.moda-sheet-body { padding-top: .8rem; gap: .9rem; }
.smd-mx-head {
  position: sticky; top: 0; z-index: 3;
  padding: .35rem 0 .45rem;
  background: linear-gradient(180deg, var(--surface) 72%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.smd-mx-add { white-space: nowrap; }
/* La rejilla es lo único que puede desplazarse, y solo si de verdad no cabe. */
.smd-mx-wrap { max-height: min(42dvh, 340px); overflow: auto; overscroll-behavior: contain; }
.smd-mx thead th { position: sticky; top: 0; z-index: 2; }
@media (min-width: 900px) { .smd-mx-wrap { max-height: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   FORMULARIO DE VENTA — reorganizado por intención (31-jul-2026)
   No se quita ninguna opción: se agrupa lo que se decide junto y se jerarquiza
   por peso. El ojo va: qué vendo → cuánto cuesta → a quién → cómo cobra.
   ══════════════════════════════════════════════════════════════════════════ */
#sale-form .form-grid { gap: .75rem 1rem; }
#sale-form .field { min-width: 0; }

/* El importe manda: precio y cantidad se leen antes que nada */
#f-sale-price { font-size: 1.15rem; font-weight: 850; letter-spacing: -.015em; }
#f-sale-qty { font-weight: 800; font-variant-numeric: tabular-nums; }
#f-sale-qty[readonly] {
  opacity: .8; cursor: not-allowed;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Separadores suaves entre bloques de decisión, sin añadir ruido visual */
#sale-plan-row { margin-top: .35rem; padding-top: .9rem; border-top: 1px solid var(--border); }
#sale-moda-details { margin-top: .35rem; }

/* Carrito del pedido: cada bloque se lee de un vistazo */
.sale-cart-item { align-items: flex-start; padding: .6rem .7rem; border-radius: 12px; }
.sci-name { display: flex; flex-direction: column; gap: .12rem; min-width: 0; font-weight: 750; }
.sci-amt { font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sale-cart-head {
  font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  opacity: .5; margin-bottom: .4rem;
}

/* Editar una prenda del pedido sin borrarla y rehacerla */
.sci-edit {
  background: none; border: 0; cursor: pointer; padding: .2rem .35rem;
  color: var(--accent); opacity: .75; font-size: .9rem; line-height: 1;
  transition: opacity .16s, transform .12s;
}
.sci-edit:hover { opacity: 1; transform: scale(1.12); }

/* La prenda que está abierta en el formulario. Sin esta señal, el usuario no sabe
   cuál de las del pedido está tocando y cree que va a duplicarla al agregar. */
.sale-cart-item.editando {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
}
.sci-badge {
  align-self: flex-start; margin-top: .18rem; font-size: .58rem; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase; padding: .1rem .38rem; border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent);
}

/* ── Carta de colores: la MISMA en Stock y en Ventas (1-ago-2026) ──────────────
   Cada fila enseña la muestra, el nombre y el código hex. En Ventas la fila entera
   es el botón de elegir; en Stock solo se edita la carta. */
/* La carta se abre DESDE la capa de detalles de la prenda (z-index 10700). Sin esto
   quedaría detrás y parecería que el botón no hizo nada. */
.mc-ov { z-index: 10800; }
.mc-modal .mc-find { width: 100%; margin-bottom: .7rem; }
.mc-row { display: flex; align-items: center; gap: .6rem; padding: .45rem .3rem; border-radius: 10px; }
.mc-row.pick { cursor: pointer; transition: background .14s; }
.mc-row.pick:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mc-row.sel { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.mc-sw { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; border: 1px solid var(--border-2); }
.mc-nm { flex: 1; font-size: .82rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-nm b { font-size: .66rem; color: var(--accent); }
.mc-nm i { font-size: .66rem; color: var(--accent); font-style: normal; font-weight: 800; }
.mc-row code { font-size: .7rem; opacity: .55; font-family: ui-monospace, monospace; }
.mc-del {
  background: rgba(255,77,77,.12); color: #FF4D4D; border: 0; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-weight: 800;
}
.mc-del:hover { background: rgba(255,77,77,.24); }

/* ══════════════════════════════════════════════════════════════════════════
   ÁREA TÁCTIL MÍNIMA (auditoría UI, 12-ago-2026)
   La auditoría midió cada control renderizado: ocho grupos quedaban por debajo
   de 44×44 CSS px, el mínimo con el que un dedo acierta de forma fiable (WCAG
   2.5.5 / HIG). Los peores eran botones de texto de 14-15 px de alto: en móvil
   se fallan constantemente y el usuario cree que la app "no responde".

   Se amplía el ÁREA DE TOQUE, no el tamaño visual, con un ::after invisible y
   centrado. Es la técnica correcta aquí: agrandar el botón de verdad rompería
   la cabecera y la barra de período a 320 px, y la densidad visual premium es
   una decisión de diseño, no un descuido. El usuario ve lo mismo y acierta.

   `position: relative` es imprescindible para que el ::after se ancle al botón;
   se declara junto al pseudo-elemento para que nunca se separen. */
.period-arrow,
.user-avatar-btn,
.btn-icon,
.ws-pill,
.btn-text,
.btn-text-sm,
.fin-health-go,
/* Segunda tanda (auditoría de modales y formularios): controles que solo aparecen con
   un modal abierto y por eso no salieron en el primer barrido de pestañas. */
.auth-link,
.auth-pass-toggle,
.moda-sheet-x,
.smd-mx-add,
.photo-slot-del,
.mx-del,
.mc-del,
/* Anadidos tras medir el area real: van en filas horizontales, asi que crecer a
   lo alto no invade a ningun vecino. */
.sub-tab,
.btn-fab-header,
.qp,
.btn-action.prod-more,
.btn-send,
.btn-ghost-sm,
/* La X que colapsa el panel de embajador mide 24px: sin ampliar el area de toque,
   en movil se falla y el usuario cree que el panel no se puede quitar. */
#amb-hide,
.select-sm { position: relative; }

#amb-hide::after,
.period-arrow::after,
.user-avatar-btn::after,
.btn-icon::after,
.ws-pill::after,
.btn-text::after,
.btn-text-sm::after,
.fin-health-go::after,
.auth-link::after,
.auth-pass-toggle::after,
.moda-sheet-x::after,
.smd-mx-add::after,
.photo-slot-del::after,
.mx-del::after,
.mc-del::after,
.sub-tab::after,
.btn-fab-header::after,
.qp::after,
.btn-action.prod-more::after,
.btn-send::after,
.btn-ghost-sm::after {
  content: '';
  position: absolute;
  /* Ampliación SOLO VERTICAL. La versión anterior crecía tambien a lo ancho
     (min-width 44) y en la cabecera los tres controles estan a menos de 44px unos
     de otros: sus areas se solapaban y ganaba el que pinta encima, asi que tocar
     el avatar activaba el boton de sincronizar. Medido con elementFromPoint.
     A lo alto siempre hay sitio; a lo ancho, el vecino manda. */
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  height: 44px;
  /* El área extra no debe tapar nada ni capturar el hover de lo que hay debajo:
     solo existe para el toque. */
  pointer-events: auto;
  z-index: 0;
}
/* El contenido real va por encima del área de toque, no debajo de ella. */
.period-arrow > *, .user-avatar-btn > *, .btn-icon > *,
.ws-pill > *, .btn-text > *, .btn-text-sm > *, .fin-health-go > *,
.auth-link > *, .auth-pass-toggle > *, .moda-sheet-x > *, .smd-mx-add > *,
.photo-slot-del > *, .mx-del > *, .mc-del > *,
.sub-tab > *, .btn-fab-header > *, .qp > *, .btn-action.prod-more > *,
.btn-send > *, .btn-ghost-sm > * { position: relative; z-index: 1; }

/* Un <select> no admite ::after (no tiene árbol de pseudo-elementos utilizable en
   todos los navegadores), así que aquí sí se agranda de verdad: cabe sin romper nada. */
.select-sm { min-height: 44px; }
/* Apilados en vertical: un ::after de 44px invadiria al boton de arriba, asi que
   aqui el alto crece de verdad. En un boton de bloque no cambia el layout. */
@media (pointer: coarse) { .btn-secondary, .btn-primary { min-height: 44px; } }

/* En escritorio, con ratón, el área ampliada no aporta y puede solapar controles
   vecinos muy juntos. Se aplica solo donde el puntero es grueso: el dedo. */
@media (pointer: fine) {
  #amb-hide::after,
  .period-arrow::after, .user-avatar-btn::after, .btn-icon::after,
  .ws-pill::after, .btn-text::after, .btn-text-sm::after, .fin-health-go::after,
  .auth-link::after, .auth-pass-toggle::after, .moda-sheet-x::after, .smd-mx-add::after,
  .photo-slot-del::after, .mx-del::after, .mc-del::after,
.sub-tab::after,
.btn-fab-header::after,
.qp::after,
.btn-action.prod-more::after,
.btn-send::after,
.btn-ghost-sm::after { display: none; }
  .select-sm { min-height: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CABECERA A 320 px (auditoría responsive, 12-ago-2026)
   A 320 px —iPhone SE 1ª gen y Android de gama de entrada, todavía muy vivos en
   LATAM— la fila de acciones medía 333 px de borde derecho sobre un viewport de
   320: el botón de la cuenta quedaba 13 px FUERA de pantalla y no se podía tocar.
   No lo delataba el scroll horizontal (algo lo recortaba antes), y por eso llevaba
   tiempo así: la comprobación de "¿hay scroll lateral?" daba negativo mientras un
   control seguía siendo inalcanzable. Por eso la auditoría mide el borde de CADA
   elemento y no solo el scroll del documento.

   Se estrecha la píldora del negocio, que es lo único elástico de la fila: el
   nombre ya tiene elipsis, así que cede sin perder función. Los botones no se
   tocan porque ya están en su mínimo táctil. */
@media (max-width: 359px) {
  .ws-pill { max-width: 92px; padding-left: .5rem; padding-right: .45rem; }
  .header-actions { gap: .3rem; }
}


/* ══ BUSCADOR + DESPLEGABLE (smart-picker) ═══════════════════════════════════
   El <select> nativo sigue existiendo (es la fuente de verdad de todo sales.js)
   pero se oculta: lo que ve el usuario es la caja de texto que filtra. */
.sp-wrap { position: relative; }
.sp-native { display: none !important; }
.sp-list {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 260px; overflow-y: auto;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 12px; box-shadow: var(--shadow-lg, 0 12px 30px rgba(0,0,0,.35));
  padding: .25rem;
}
.sp-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; color: var(--text);
  font-size: .82rem; padding: .6rem .7rem; border-radius: 8px;
  min-height: 44px;                     /* área táctil: se mide, no se deduce */
}
.sp-opt:hover, .sp-opt.on { background: var(--glass-bg-2, rgba(255,255,255,.07)); }
.sp-empty { padding: .8rem .7rem; font-size: .78rem; color: var(--text-muted); text-align: center; }

/* Nombre del cliente en la fila de venta (20-ago, Ausban): sin él no se puede
   saber de quién es cada pedido al armar la Tabla de producción. */
.item-client {
  font-size: .72rem; color: var(--brand-text, var(--brand));
  font-weight: 600; margin-top: .12rem;
}

/* ══ PANEL DE PRODUCCION (20-ago, Ausban) ═══════════════════════════════════ */
.prod-intro { margin-bottom: .85rem; }
.prod-intro-t { font-size: 1rem; font-weight: 700; color: var(--text); }
.prod-intro-s { font-size: .78rem; color: var(--text-muted); margin-top: .2rem; line-height: 1.45; }

.prod-actions { display: flex; gap: .4rem; align-items: center; margin: .6rem 0 .8rem; flex-wrap: wrap; }
.prod-actions .btn-mini {
  background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text);
  font-size: .72rem; padding: .45rem .7rem; border-radius: 9px; cursor: pointer;
  min-height: 36px;
}
.prod-actions .btn-mini:hover { background: var(--glass-bg-2, rgba(255,255,255,.07)); }
.prod-range { flex: 1; min-width: 140px; font-size: .76rem; padding: .45rem .6rem; min-height: 36px; }

.prod-sales-list { display: flex; flex-direction: column; gap: .4rem; padding-bottom: 5.5rem; }
.prod-row {
  display: flex; align-items: center; gap: .7rem; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 12px; padding: .7rem .8rem; min-height: 56px;
  transition: border-color .15s, background .15s;
}
.prod-row.on { border-color: var(--brand); background: var(--glass-bg-2, rgba(255,255,255,.05)); }
.prod-check { width: 20px; height: 20px; accent-color: var(--brand); flex-shrink: 0; cursor: pointer; }
.prod-row-main { flex: 1; min-width: 0; }
.prod-row-t {
  font-size: .84rem; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prod-row-s { font-size: .72rem; color: var(--text-muted); margin-top: .12rem; }
.prod-row-right { text-align: right; flex-shrink: 0; }
.prod-row-qty { font-size: .78rem; font-weight: 700; color: var(--brand-text, var(--brand)); }
.prod-row-amount { font-size: .7rem; color: var(--text-muted); margin-top: .1rem; }

/* Barra de accion: aparece SOLO cuando hay seleccion */
.prod-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: .7rem;
  background: var(--surface); border-top: 1px solid var(--border-2);
  padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  z-index: 20;
}
.prod-bar-info { font-size: .78rem; color: var(--text-muted); }
.prod-bar-info strong { color: var(--text); font-size: .9rem; }
.prod-bar .btn-primary { min-height: 44px; padding: .6rem 1.1rem; font-size: .82rem; white-space: nowrap; }

/* ══ GESTOR DE CATEGORIAS (20-ago) ═══════════════════════════════════════════ */
.cat-mgr-ov {
  position: fixed; inset: 0; z-index: 3000; display: flex;
  align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
}
.cat-mgr {
  width: 100%; max-width: 460px; max-height: 76vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 18px 18px 0 0; padding: 1rem .9rem calc(1rem + env(safe-area-inset-bottom, 0px));
}
.cat-mgr .cm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; }
.cat-mgr .cm-title { font-size: 1rem; font-weight: 700; color: var(--text); }
.cat-mgr .cm-sub { font-size: .74rem; color: var(--text-muted); margin-top: .15rem; }
.cat-mgr .cm-x {
  background: transparent; border: 0; color: var(--text-muted);
  font-size: 1.6rem; line-height: 1; cursor: pointer; min-width: 44px; min-height: 44px;
}
.cat-mgr .cm-body { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.cat-mgr .cm-row {
  display: flex; align-items: center; gap: .55rem; min-height: 48px;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 11px; padding: .5rem .7rem;
}
.cat-mgr .cm-row.off { opacity: .5; }
.cat-mgr .cm-name { flex: 1; font-size: .84rem; color: var(--text); }
.cat-mgr .cm-tag { font-size: .64rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.cat-mgr .cm-btn {
  background: var(--surface); border: 1px solid var(--border-2); color: var(--text);
  font-size: .72rem; padding: .4rem .6rem; border-radius: 8px; cursor: pointer; min-height: 36px;
}
.cat-mgr .cm-btn.danger { color: var(--danger-text, var(--danger)); border-color: var(--danger-text, var(--danger)); }
.cat-mgr .cm-empty { font-size: .78rem; color: var(--text-muted); text-align: center; padding: 1rem; }
.cat-mgr .cm-foot { display: flex; gap: .4rem; margin-top: .8rem; }
.cat-mgr .cm-new { flex: 1; font-size: .82rem; min-height: 44px; }
.cat-mgr .cm-add {
  background: var(--brand); color: var(--on-accent, #fff); border: 0;
  font-size: .8rem; font-weight: 600; padding: .5rem .9rem; border-radius: 10px;
  cursor: pointer; min-height: 44px;
}

/* ── Hover pegajoso en pantallas táctiles (23-ago-2026, auditoría de motion) ──
   En un teléfono no existe el hover: al tocar, el navegador aplica :hover igual y el
   elemento SE QUEDA levantado hasta que se toca otra cosa. Son 42 selectores que se
   mueven al pasar por encima. Aquí no se les quita nada al ratón: solo se anula el
   desplazamiento donde el hover no existe de verdad. */
@media (hover: none) {
  .stat-card:hover,
  .donut-svg-wrap:hover,
  .btn-primary:hover,
  .btn-send:hover:not(:disabled),
  .smartclub-btn:hover,
  .smartcoin-promo:hover,
  .scp-cta:hover,
  .accent-sw:hover,
  .product-card:hover,
  .item-row:hover,
  .fab:hover,
  .tutorial-btn-primary:hover,
  .reset-scope-btn:hover,
  .btn-enterprise:hover,
  .btn-smartclub-sync:hover,
  .client-card:hover,
  .credit-pack:hover,
  .fintip-cta:hover,
  .fin-health-card:hover,
  .fin-dl-btn:hover,
  .sale-card:hover,
  .appt-card:hover,
  .fin-item:hover,
  .item-card:hover,
  .finance-summary .fin-card:hover,
  .planes-cta:hover,
  .btn-add-item:hover .bai-arrow,
  .plan-card:hover,
  .plan-card[data-plan="enterprise"]:hover,
  .swatch:hover,
  .cuota-check:hover .cuota-check-box,
  .cuota-ok:hover,
  .cuota-no:hover,
  .smd-size:hover,
  .smd-color:hover,
  .svc-chip:hover,
  #sale-form .form-actions .btn-brand:hover,
  .pay-opt:hover,
  .pay-send:hover,
  .smd-open:hover,
  .rc-btn:hover,
  .sci-edit:hover {
    transform: none !important;
  }
}

/* ── Respuesta al PULSAR (23-ago-2026) ─────────────────────────────────────
   El bloque de arriba quita el levantamiento que el hover disparaba al tocar y se
   quedaba pegado. Pero ese efecto accidental era la unica respuesta que daban
   estas tarjetas en un telefono: al quitarlo, tocar dejaba de acusar recibo y la
   interfaz se sentia mas plana. Aqui se devuelve como corresponde — hundir al
   apretar, no levantar al rozar — que es la regla de Apple: el feedback ocurre
   en la presion, dura lo que dura el dedo encima y no deja rastro al soltar. */
@media (hover: none) {
  .stat-card:active,
  .donut-svg-wrap:active,
  .btn-primary:active,
  .btn-send:active:not(:disabled),
  .smartclub-btn:active,
  .smartcoin-promo:active,
  .scp-cta:active,
  .accent-sw:active,
  .product-card:active,
  .item-row:active,
  .fab:active,
  .tutorial-btn-primary:active,
  .reset-scope-btn:active,
  .btn-enterprise:active,
  .btn-smartclub-sync:active,
  .client-card:active,
  .credit-pack:active,
  .fintip-cta:active,
  .fin-health-card:active,
  .fin-dl-btn:active,
  .sale-card:active,
  .appt-card:active,
  .fin-item:active,
  .item-card:active,
  .finance-summary .fin-card:active,
  .planes-cta:active,
  .btn-add-item:active .bai-arrow,
  .plan-card:active,
  .plan-card[data-plan="enterprise"]:active,
  .swatch:active,
  .cuota-check:active .cuota-check-box,
  .cuota-ok:active,
  .cuota-no:active,
  .smd-size:active,
  .smd-color:active,
  .svc-chip:active,
  #sale-form .form-actions .btn-brand:active,
  .pay-opt:active,
  .pay-send:active,
  .smd-open:active,
  .rc-btn:active,
  .sci-edit:active {
    transform: scale(.97) !important;
    transition: transform .1s cubic-bezier(.23,1,.32,1) !important;
  }
}

/* ── Ficha del inmueble: panel de edición dentro del modal (23-ago-2026) ──────
   Vive bajo la vista previa del documento, para que cada cambio de color o de
   portada se vea al instante sobre la ficha real y no en un formulario aparte. */
.rf-tab {
  flex: 1; padding: .5rem .7rem; min-height: 40px;
  border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text-2);
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}
.rf-tab.on { background: var(--brand); border-color: var(--brand); color: var(--white); }
.rf-col { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--text-2); }
.rf-col input[type="color"] {
  width: 38px; height: 34px; padding: 0; border-radius: 8px;
  border: 1.5px solid var(--border); background: none; cursor: pointer;
}
.rf-reset {
  margin-left: auto; padding: .4rem .7rem; min-height: 34px;
  border-radius: 8px; border: 1.5px solid var(--border);
  background: none; color: var(--text-2); font-size: .74rem; font-weight: 600;
}
.rf-hint { font-size: .72rem; color: var(--text-2); margin-bottom: .35rem; }
.rf-thumb {
  width: 54px; height: 54px; flex: none; border-radius: 8px;
  background-size: cover; background-position: center;
  border: 2px solid transparent; opacity: .55; padding: 0;
  transition: opacity .16s ease, border-color .16s ease;
}
.rf-thumb.on { border-color: var(--brand); opacity: 1; }
.rl-opt {
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-text, var(--brand)); border: 1px solid var(--border);
  border-radius: 999px; padding: .05rem .35rem; margin-left: .3rem; vertical-align: 1px;
}