/* ============================================================
   KOMERCIA — V2 Redesign System
   Basado en Claude Design "Híbrida v2"
   Cargado último para máxima prioridad en cascade.
   ============================================================ */

/* ============================================================
   1. TOKENS GLOBALES
   ============================================================ */

:root {
  /* Superficies — near white default */
  --bg:        #F8F8F6;
  --surface-1: #FFFFFF;
  --surface-2: #F2F1ED;
  --surface-3: #E8E6E0;

  /* Texto */
  --fg-1: #18181B;
  --fg-2: #5C5C66;
  --fg-3: #9A9A9F;

  /* Bordes */
  --border:      #E4E3DE;
  --border-weak: #EFEEE9;

  /* Semánticos */
  --ok:   #2B5D3F;
  --warn: #A66A1E;
  --bad:  #B8432A;

  /* Acento único: Terracota */
  --accent:       #B8432A;
  --accent-dark:  #8B2D1A;
  --accent-alpha: color-mix(in srgb, #B8432A 15%, transparent);

  /* Radius */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;

  /* Fuentes base (preset: editorial) */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Layout heights */
  --navbar-h: 64px;
  --footer-h: 76px;

  /* Retrocompatibilidad — mapear vars antiguas a nuevas */
  --surface-store:    var(--bg);
  --surface-elevated: var(--surface-1);
  --text-primary:     var(--fg-1);
  --text-secondary:   var(--fg-2);
  --text-tertiary:    var(--fg-3);
  --text-inverse:     #FFFFFF;
  --header-height:    var(--navbar-h);
  --footer-height:    var(--footer-h);
  --color-action-purple: var(--accent);
  --color-add-green:     var(--ok);
  --color-add-green-dark: #1e4530;
  --color-remove-red:    var(--bad);
  --color-warning-yellow: var(--warn);
}

/* Dark mode */
[data-theme="dark"] {
  --bg:          #0E0E10;
  --surface-1:   #17171A;
  --surface-2:   #1F1F24;
  --surface-3:   #2A2A30;
  --fg-1:        #F4F4F0;
  --fg-2:        #9E9EA5;
  --fg-3:        #6A6A72;
  --border:      #28282E;
  --border-weak: #1E1E22;
  --accent:      #E06A4F;
  --accent-dark: #B8432A;

  --surface-store:    var(--bg);
  --surface-elevated: var(--surface-1);
  --text-primary:     var(--fg-1);
  --text-secondary:   var(--fg-2);
}

/* ============================================================
   2. FONT TWEAKER — 4 presets tipográficos
   ============================================================ */

/* Preset 1: Editorial (default) — Fraunces serif + Inter */
[data-font-preset="editorial"] {
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
}

/* Preset 2: Moderno — Sora + DM Sans (geométrico/tech) */
[data-font-preset="moderno"] {
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
}

/* Preset 3: Humanista — Playfair Display + Source Sans 3 */
[data-font-preset="humanista"] {
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Source Sans 3', system-ui, sans-serif;
}

/* Preset 4: Vanguardista — Space Grotesk + IBM Plex Sans */
[data-font-preset="vanguardista"] {
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
}

/* ============================================================
   3. PESO DE FUENTE (bold modes)
   ============================================================ */

/* Normal: body 400, headings 600 (default) */
[data-font-weight="normal"] {
  --fw-body:     400;
  --fw-heading:  600;
  --fw-strong:   600;
}

/* Bold headings: body 400, headings 700 */
[data-font-weight="bold-headings"] {
  --fw-body:     400;
  --fw-heading:  700;
  --fw-strong:   700;
}

/* Bold all: body 500, headings 700 */
[data-font-weight="bold-all"] {
  --fw-body:     500;
  --fw-heading:  700;
  --fw-strong:   700;
}

/* ============================================================
   4. BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-weight: var(--fw-body, 400);
  color: var(--fg-1);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
}

/* ============================================================
   5. TIPOGRAFÍA
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-heading, 600);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fg-1);
  margin: 0;
}

h1 { font-size: 32px; letter-spacing: -0.025em; }
h2 { font-size: 22px; letter-spacing: -0.015em; }
h3 { font-size: 18px; }
h4 { font-size: 15px; }

/* Números y datos siempre mono */
.font-mono,
[class*="price"],
[class*="stock"],
[class*="total"],
[class*="amount"],
[class*="kpi__val"],
[class*="hero__val"],
[class*="paybar__total"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   6. NAVBAR
   ============================================================ */

.navbar {
  height: var(--navbar-h) !important;
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  padding: 0 20px !important;
}

.navbar-brand {
  gap: 12px !important;
}

/* Logo: punto terracota en lugar de gradiente amber */
.navbar-logo {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent) !important;
  flex-shrink: 0;
}

.navbar-logo i,
.navbar-logo svg {
  display: none !important;
}

/* Nombre tienda en Fraunces serif */
.navbar-title {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: var(--fw-heading, 600) !important;
  letter-spacing: -0.015em !important;
  color: var(--fg-1) !important;
}

/* Botones circulares */
.navbar-btn,
.navbar-btn.bell-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--surface-2) !important;
  color: var(--fg-1) !important;
  border: none !important;
  transition: background 0.12s, transform 0.12s !important;
}

.navbar-btn:hover {
  background: var(--surface-3) !important;
}

.navbar-btn:active {
  transform: scale(0.92) !important;
}

/* iOS Safari: clicks don't bubble through SVG to parent <a>/<button> unless
   the SVG has pointer-events:none. This makes all nav icons transparent to
   events so the parent link/button catches the click instead. */
.navbar-btn svg,
.navbar-btn i,
.footer-btn svg,
.footer-btn i,
.footer-pos-circle svg,
.footer-pos-circle i,
.page-back-btn svg,
.page-back-btn i,
.btn-back svg,
.btn-back i {
  pointer-events: none !important;
}

/* User dropdown */
.user-menu .user-dropdown {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.14) !important;
}

.dropdown-header {
  background: var(--surface-2) !important;
  border-radius: var(--r-md) var(--r-md) 0 0 !important;
}

.dropdown-item {
  color: var(--fg-1) !important;
  font-family: var(--font-body) !important;
  border-radius: var(--r-sm) !important;
}

.dropdown-item:hover {
  background: var(--surface-2) !important;
}

.dropdown-item-danger {
  color: var(--bad) !important;
}

.dropdown-item-danger:hover {
  background: color-mix(in srgb, var(--bad) 10%, transparent) !important;
}

.dropdown-divider {
  border-color: var(--border) !important;
}

/* Badge de notificaciones */
.notif-badge {
  background: var(--bad) !important;
  border-color: var(--bg) !important;
}

/* ============================================================
   7. STICKY FOOTER / BOTTOM NAV
   ============================================================ */

/* Cajero: botón único centrado */
.sticky-footer--single {
  justify-content: center !important;
}

.sticky-footer--single .footer-btn--pos {
  flex: 0 0 auto !important;
  min-width: 80px !important;
}

.sticky-footer {
  height: var(--footer-h) !important;
  background: var(--surface-1) !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: none !important;
  padding: 0 4px !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: stretch !important;
}

.footer-btn {
  position: relative !important;
  color: var(--fg-3) !important;
  background: transparent !important;
  padding: 8px 4px !important;
  gap: 4px !important;
  font-family: var(--font-body) !important;
  transition: color 0.15s !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.footer-btn:hover {
  color: var(--fg-1) !important;
  background: transparent !important;
}

/* Active: indicador superior + texto oscuro */
.footer-btn.active {
  color: var(--fg-1) !important;
  background: transparent !important;
  font-weight: var(--fw-strong, 600) !important;
}

.footer-btn.active::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 40px !important;
  height: 3px !important;
  background: var(--accent) !important;
  border-radius: 0 0 3px 3px !important;
}

.footer-btn span {
  font-size: 11px !important;
  font-weight: inherit !important;
  letter-spacing: 0.01em !important;
}

.footer-btn i,
.footer-btn svg {
  width: 22px !important;
  height: 22px !important;
}

/* ===== POS CENTER BUTTON — círculo terracota elevado ===== */
.footer-btn--pos {
  justify-content: center !important;
  padding: 0 4px 6px !important;
  overflow: visible !important;
  gap: 3px !important;
  color: var(--fg-3) !important;
}

.footer-btn--pos .footer-pos-circle {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: var(--accent, #B8432A) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  box-shadow:
    0 4px 14px color-mix(in srgb, var(--accent, #B8432A) 35%, transparent),
    0 2px 6px rgba(0,0,0,0.12) !important;
  transition: transform 0.2s cubic-bezier(.2,.8,.2,1.2), box-shadow 0.2s !important;
}

.footer-btn--pos .footer-pos-circle i,
.footer-btn--pos .footer-pos-circle svg {
  width: 24px !important;
  height: 24px !important;
}

.footer-btn--pos:hover .footer-pos-circle {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow:
    0 8px 20px color-mix(in srgb, var(--accent, #B8432A) 45%, transparent),
    0 4px 10px rgba(0,0,0,0.14) !important;
}

.footer-btn--pos:active .footer-pos-circle {
  transform: scale(0.94) !important;
}

.footer-btn--pos.active::before {
  display: none !important;
}

.footer-btn--pos.active {
  color: var(--fg-2) !important;
}

/* ============================================================
   8. MAIN CONTENT
   ============================================================ */

.main-content {
  margin-top: var(--navbar-h) !important;
  margin-bottom: var(--footer-h) !important;
  min-height: calc(100vh - var(--navbar-h) - var(--footer-h)) !important;
  background: var(--bg) !important;
}

/* ============================================================
   9. BOTONES
   ============================================================ */

.btn-primary {
  background: var(--accent) !important;
  color: white !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-strong, 600) !important;
  border-radius: var(--r-md) !important;
  border: none !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 28%, transparent) !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 32%, transparent) !important;
}

.btn-primary:active:not(:disabled) {
  transform: scale(0.98) !important;
}

.btn-primary:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.btn-secondary {
  background: var(--surface-2) !important;
  color: var(--fg-1) !important;
  border: 1px solid var(--border) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-body, 400) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}

.btn-secondary:hover {
  background: var(--surface-3) !important;
  border-color: var(--fg-3) !important;
}

.btn-danger {
  background: var(--bad) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-strong, 600) !important;
}

.btn-ghost {
  background: transparent !important;
  color: var(--fg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-body) !important;
}

.btn-ghost:hover {
  background: var(--surface-2) !important;
  color: var(--fg-1) !important;
}

/* Icon buttons compactos */
.icon-button-compact {
  background: var(--surface-2) !important;
  color: var(--fg-1) !important;
  border-radius: var(--r-sm) !important;
}

.icon-button-compact:hover {
  background: var(--surface-3) !important;
}

/* ============================================================
   10. CARDS
   ============================================================ */

.card,
.product-card,
.stat-card,
.kpi-card,
.action-card,
[class*="-card"]:not(.km-catalog-tile):not(.more-card):not([class*="more-card__"]):not([class*="-card-inline-"]):not(.usage-card-title):not(.plans-section-title):not([class*="va-card"]):not([class*="kx-"]) {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  transition: border-color 0.15s, transform 0.15s !important;
}

[class*="-card"]:not(.more-card):not([class*="more-card__"]):not([class*="-card-inline-"]):not(.usage-card-title):not([class*="va-card"]):not([class*="kx-"]):hover:not(:disabled) {
  border-color: var(--fg-1) !important;
  box-shadow: none !important;
}

/* ============================================================
   11. INPUTS Y FORMULARIOS
   ============================================================ */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-body, 400) !important;
  color: var(--fg-1) !important;
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  transition: border-color 0.15s !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--fg-1) !important;
  outline: none !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--fg-3) !important;
}

/* Barras de búsqueda */
.search-input,
[class*="search"] input,
[class*="scan"] input {
  font-family: var(--font-body) !important;
}

/* ============================================================
   12. BADGES Y TAGS
   ============================================================ */

.badge-ok,
.badge-success,
[class*="badge-ok"],
[class*="status-ok"] {
  background: color-mix(in srgb, var(--ok) 12%, transparent) !important;
  color: var(--ok) !important;
  border-radius: 999px !important;
}

.badge-warn,
[class*="badge-warn"],
[class*="status-warn"] {
  background: color-mix(in srgb, var(--warn) 12%, transparent) !important;
  color: var(--warn) !important;
  border-radius: 999px !important;
}

.badge-bad,
.badge-error,
[class*="badge-bad"],
[class*="status-bad"] {
  background: color-mix(in srgb, var(--bad) 12%, transparent) !important;
  color: var(--bad) !important;
  border-radius: 999px !important;
}

/* ============================================================
   13. TABLAS
   ============================================================ */

table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-body);
}

th {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
}

td {
  border-bottom: 1px solid var(--border-weak);
  padding: 12px;
  color: var(--fg-1);
  font-size: 14px;
}

tr:last-child td {
  border-bottom: none;
}

/* ============================================================
   14. MODALES
   ============================================================ */

.modal,
[class*="modal"] .modal-content,
.modal-content {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18) !important;
  font-family: var(--font-body) !important;
}

.modal-backdrop,
[class*="backdrop"] {
  background: rgba(12, 14, 20, 0.5) !important;
  backdrop-filter: blur(6px) !important;
}

/* ============================================================
   15. TABS / PILLS
   ============================================================ */

/* Tabs de filtro en inventario y otros */
[class*="tab-btn"],
[class*="filter-btn"],
.tab,
.tab-btn {
  background: var(--surface-2) !important;
  color: var(--fg-2) !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.15s !important;
}

[class*="tab-btn"].active,
[class*="tab-btn"][data-active="true"],
[class*="filter-btn"].active {
  background: var(--fg-1) !important;
  color: var(--surface-1) !important;
}

/* ============================================================
   16. ANIMACIONES GLOBALES
   ============================================================ */

@keyframes km-fade-up {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes km-slide-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.main-content > * {
  animation: km-fade-up 0.3s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* Animar opacity promueve el wrapper a su propio compositor layer y le crea un
   stacking context. Los módulos v4 (inventory, suppliers, etc) usan x-teleport
   para sacar sus modales del wrapper, pero `sales/pos_view.html` no — por eso
   sus modales (z:1000) quedaban atrapados detrás del header (z:100). */
.main-content > .pos-cashier-container {
  animation: none;
}

/* ============================================================
   17. SCROLLBAR
   ============================================================ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--fg-3);
}

/* ============================================================
   18. FONT TWEAKER PANEL
   ============================================================ */

.font-tweaker {
  position: fixed;
  bottom: calc(var(--footer-h) + 12px);
  right: 16px;
  z-index: 150;
  font-family: var(--font-body);
}

.font-tweaker__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  background: var(--fg-1);
  color: var(--surface-1);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  border: none;
  transition: opacity 0.15s;
}

.font-tweaker__pill:hover {
  opacity: 0.85;
}

.font-tweaker__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.font-tweaker__panel {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: 280px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
  overflow: hidden;
}

.font-tweaker__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.font-tweaker__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.font-tweaker__close {
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  background: none;
  border: none;
  color: var(--fg-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
}

.font-tweaker__close:hover {
  background: var(--surface-3);
  color: var(--fg-1);
}

.font-tweaker__body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.font-tweaker__label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 600;
  margin-bottom: 8px;
}

.font-tweaker__presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.font-tweaker__preset-btn {
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  transition: all 0.12s;
}

.font-tweaker__preset-btn:hover {
  border-color: var(--fg-3);
  background: var(--surface-3);
}

.font-tweaker__preset-btn[data-active="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-1));
}

.font-tweaker__preset-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-1);
  display: block;
}

.font-tweaker__preset-sample {
  font-size: 11px;
  color: var(--fg-3);
  display: block;
  margin-top: 2px;
  font-style: italic;
}

.font-tweaker__preset-btn[data-active="true"] .font-tweaker__preset-name {
  color: var(--accent);
}

.font-tweaker__weights {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  padding: 3px;
  border-radius: 999px;
}

.font-tweaker__weight-btn {
  flex: 1;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
  background: none;
  border: none;
  color: var(--fg-2);
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}

.font-tweaker__weight-btn:hover {
  color: var(--fg-1);
}

.font-tweaker__weight-btn[data-active="true"] {
  background: var(--surface-1);
  color: var(--fg-1);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.font-tweaker__divider {
  height: 1px;
  background: var(--border);
  margin: 0 -16px;
}

/* Dark mode toggle en el tweaker */
.font-tweaker__toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.font-tweaker__toggle-label {
  font-size: 12px;
  color: var(--fg-2);
  font-weight: 500;
}

.font-tweaker__toggle {
  width: 36px;
  height: 20px;
  background: var(--surface-3);
  border-radius: 999px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
}

.font-tweaker__toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-1);
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.font-tweaker__toggle[data-on="true"] {
  background: var(--accent);
}

.font-tweaker__toggle[data-on="true"]::after {
  transform: translateX(16px);
}

/* ============================================================
   BG TONE VARIANTS (data-bg-tone on <html>)
   ============================================================ */
[data-bg-tone="blanco"]    { --bg: #FFFFFF; }
[data-bg-tone="crema"]     { --bg: #F8F8F6; }
[data-bg-tone="gris"]      { --bg: #F0F0F2; }

/* ============================================================
   PAGE BACK BUTTON — componente unificado (reemplaza .btn-back y .back-btn)
   ============================================================ */
.page-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    background: var(--surface-1);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--fg-2);
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
}

.page-back-btn:hover {
    background: var(--surface-2);
    color: var(--fg-1);
}