/* ============================================================
   MEDIALOO SHOP — Sistema de diseño v4
   ------------------------------------------------------------
   Regla única: todo estilo vive aquí. Ninguna página vuelve a
   declarar <style> ni style="". Si algo falta, se agrega como
   componente en este archivo.

   Índice
     01  Tokens
     02  Reset y base
     03  Tipografía
     04  Layout (app, sidebar, topbar, contenido, tabbar)
     05  Utilidades de composición
     06  Botones
     07  Formularios
     08  Superficies: card, cifras, tabla, pestañas
     09  Estados: badge, alerta, banner
     10  Componentes de producto
     11  Onboarding
     12  Notificaciones
     13  Skeletons y carga
     14  Responsive
   ============================================================ */

/* ─────────────────────────────────────────────
   01  TOKENS
   ───────────────────────────────────────────── */
:root {
  /* Marca. El gradiente existe pero se reserva para UNA cosa:
     el botón de acción principal. Todo lo demás usa azul sólido. */
  --azul:        #199CF4;
  --azul-osc:    #0B6FBB;
  --azul-agua:   #C0F3FC;
  --turquesa:    #40C8D4;
  --grad:        linear-gradient(100deg, #199CF4, #40C8D4);

  /* Superficies */
  --bg:          #F1F5F6;
  --surface:     #FFFFFF;
  --surface-2:   #F7FAFB;
  --surface-3:   #ECF1F3;

  /* Chrome (barra lateral y superior). Neutro muy oscuro, no negro puro:
     el negro puro produce bordes duros y abarata el resultado. */
  --chrome:      #0B0F11;
  --chrome-text: #FFFFFF;
  --chrome-soft: #9BA6AB;

  /* Texto */
  --text:        #10161A;
  --text-soft:   #55636A;
  --text-mute:   #87949B;

  /* Bordes */
  --border:        #DDE5E8;
  --border-soft:   #EBF0F2;
  --border-fuerte: #C6D2D7;

  /* Semántica: cada estado tiene texto, fondo y línea. */
  --ok:     #0F7A46;  --ok-bg:     #E4F6EC;  --ok-line:     #A8E0C4;
  --warn:   #8A5D00;  --warn-bg:   #FDF3E0;  --warn-line:   #F0D19A;
  --err:    #B02020;  --err-bg:    #FDEAEA;  --err-line:    #F2B5B5;
  --info:   #0B6FBB;  --info-bg:   #E6F3FD;  --info-line:   #AED6F5;
  --neutro: #55636A;  --neutro-bg: #EEF2F4;  --neutro-line: #D8E1E4;

  /* Escala tipográfica — 7 pasos, ni uno más. */
  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 26px;

  --lh-tight:  1.25;
  --lh-normal: 1.5;

  /* Escala de espaciado — base 4. */
  --s1:  4px;  --s2:  8px;  --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s8: 32px;  --s10: 40px;
  --s12: 48px; --s16: 64px;

  /* Radios — 4 valores. */
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-full: 999px;

  /* Elevación. La sombra es información, no decoración: las tarjetas
     normales llevan borde, no sombra. La sombra se reserva para lo
     que flota (menús, hojas, barras fijas). */
  --sh-1: 0 1px 2px rgba(11,25,35,.06);
  --sh-2: 0 4px 12px rgba(11,25,35,.08);
  --sh-3: 0 12px 32px rgba(11,25,35,.14);

  /* Movimiento */
  --t-rapido: .12s ease;
  --t-normal: .2s cubic-bezier(.4,0,.2,1);

  /* Área táctil mínima en móvil */
  --tap: 44px;

  --ancho-contenido: 1080px;
  --ancho-sidebar:    232px;
  --alto-topbar:       60px;
}

[data-theme="dark"] {
  --bg:          #0A0E10;
  --surface:     #151B1E;
  --surface-2:   #1C2427;
  --surface-3:   #232C30;
  --chrome:      #05080A;
  --chrome-soft: #8B979D;
  --text:        #E9EFF1;
  --text-soft:   #A5B1B6;
  --text-mute:   #748288;
  --border:        #29343A;
  --border-soft:   #202A2F;
  --border-fuerte: #3A484F;

  --ok:     #4FD394;  --ok-bg:     #0E2A1E;  --ok-line:     #1D5138;
  --warn:   #EFC167;  --warn-bg:   #2C2310;  --warn-line:   #57441B;
  --err:    #F08A8A;  --err-bg:    #2E1616;  --err-line:    #5B2A2A;
  --info:   #6FC0F7;  --info-bg:   #0C2334;  --info-line:   #1B4763;
  --neutro: #A5B1B6;  --neutro-bg: #1E272B;  --neutro-line: #2E3A40;

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 4px 12px rgba(0,0,0,.45);
  --sh-3: 0 12px 32px rgba(0,0,0,.55);
}

/* ─────────────────────────────────────────────
   02  RESET Y BASE
   ───────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-wrap: break-word;
}

a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }

/* Tamaño por defecto de los iconos.
   Sin esta regla, un SVG suelto (fuera de .btn, .nav-item y demás
   componentes que sí lo dimensionan) se estira hasta llenar su
   contenedor y aparece un icono gigante en mitad de la pantalla.
   Cualquier regla de componente es más específica y la pisa. */
svg { width: 20px; height: 20px; flex-shrink: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
hr { border: none; border-top: 1px solid var(--border-soft); margin: var(--s5) 0; }
ul, ol { list-style: none; }

/* Foco visible y consistente en todo lo interactivo. */
:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ─────────────────────────────────────────────
   03  TIPOGRAFÍA
   ───────────────────────────────────────────── */
.t-page     { font-size: var(--fs-2xl); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -.028em; }
.t-section  { font-size: var(--fs-lg);  font-weight: 600; line-height: var(--lh-tight); letter-spacing: -.012em; }
.t-card     { font-size: var(--fs-md);  font-weight: 600; line-height: var(--lh-tight); }
.t-body     { font-size: var(--fs-md);  font-weight: 400; }
.t-meta     { font-size: var(--fs-sm);  font-weight: 400; color: var(--text-soft); }
.t-mini     { font-size: var(--fs-xs);  font-weight: 400; color: var(--text-mute); }
.t-label    { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute); }
.t-cifra    { font-size: var(--fs-xl);  font-weight: 600; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.t-soft  { color: var(--text-soft); }
.t-mute  { color: var(--text-mute); }
.t-ok    { color: var(--ok); }
.t-warn  { color: var(--warn); }
.t-err   { color: var(--err); }
.t-azul  { color: var(--azul); }
.t-num   { font-variant-numeric: tabular-nums; }
.t-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.t-centro { text-align: center; }

/* Encabezado de página: título + bajada + acción. */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6);
}
.page-head__texto { min-width: 0; }
.page-head__bajada { font-size: var(--fs-sm); color: var(--text-soft); margin-top: var(--s1); }
.page-head__acciones { display: flex; gap: var(--s2); flex-shrink: 0; }

/* Encabezado de sección dentro de una página. */
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin: var(--s8) 0 var(--s3);
}
.sec-head:first-child { margin-top: 0; }
.sec-head__link { font-size: var(--fs-sm); color: var(--azul); font-weight: 500; flex-shrink: 0; }
.sec-head__link:hover { color: var(--azul-osc); }

/* Enlace de vuelta. */
.volver {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-sm); color: var(--text-soft); font-weight: 500;
  margin-bottom: var(--s4); min-height: 32px;
}
.volver:hover { color: var(--azul); }
.volver svg { width: 16px; height: 16px; }

/* ─────────────────────────────────────────────
   04  LAYOUT
   ───────────────────────────────────────────── */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--ancho-sidebar); flex-shrink: 0;
  background: var(--chrome);
  padding: var(--s6) var(--s3) var(--s4);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar__logo { padding: 0 var(--s2) var(--s6); }
.sidebar__logo img { height: 32px; width: auto; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }

.nav-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s3); border-radius: var(--r-sm);
  color: var(--chrome-soft); font-size: var(--fs-md); font-weight: 400;
  transition: background var(--t-rapido), color var(--t-rapido);
  position: relative;
}
.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active { background: rgba(255,255,255,.11); color: #fff; font-weight: 500; }
.nav-item.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--azul);
}
.nav-item__badge {
  margin-left: auto; background: var(--azul); color: #fff;
  font-size: var(--fs-2xs); font-weight: 600; min-width: 20px; height: 20px;
  border-radius: var(--r-full); display: grid; place-items: center; padding: 0 6px;
}
.nav-spacer { flex: 1; }
.nav-sep { border-top: 1px solid rgba(255,255,255,.1); margin: var(--s3) var(--s1); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) var(--s6);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
  min-height: var(--alto-topbar);
}
.topbar__title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.012em; }
.topbar__right { display: flex; align-items: center; gap: var(--s3); }
.topbar__sub { font-size: var(--fs-sm); color: var(--text-soft); }

.topbar__logo { display: none; }
.topbar__logo .logo-dark { display: none; }
[data-theme="dark"] .topbar__logo .logo-light { display: none; }
[data-theme="dark"] .topbar__logo .logo-dark  { display: block; }

.content {
  padding: var(--s6);
  max-width: var(--ancho-contenido); width: 100%; margin: 0 auto;
  flex: 1;
}
.content--angosto { max-width: 720px; }

/* Botón circular de la topbar (tema, notificaciones). */
.icon-btn {
  width: 38px; height: 38px; border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--surface);
  display: grid; place-items: center; color: var(--text-soft);
  transition: background var(--t-rapido), color var(--t-rapido), border-color var(--t-rapido);
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-fuerte); }
.icon-btn svg { width: 19px; height: 19px; }

.tabbar { display: none; }

/* ─────────────────────────────────────────────
   05  UTILIDADES DE COMPOSICIÓN
   ───────────────────────────────────────────── */
.stack   { display: flex; flex-direction: column; gap: var(--s3); }
.stack-2 { display: flex; flex-direction: column; gap: var(--s2); }
.stack-4 { display: flex; flex-direction: column; gap: var(--s4); }
.stack-6 { display: flex; flex-direction: column; gap: var(--s6); }

.cluster   { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.cluster-3 { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.between   { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.push      { margin-left: auto; }

.grid-2    { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: var(--s3); }

.mt-2 { margin-top: var(--s2); }  .mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }  .mt-6 { margin-top: var(--s6); }
.mt-8 { margin-top: var(--s8); }
.mb-0 { margin-bottom: 0; }       .mb-3 { margin-bottom: var(--s3); }
.mb-4 { margin-bottom: var(--s4); } .mb-6 { margin-bottom: var(--s6); }

.oculto          { display: none !important; }
.solo-movil      { display: none; }
.solo-escritorio { display: initial; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─────────────────────────────────────────────
   06  BOTONES
   ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 42px; padding: 0 var(--s5);
  border-radius: var(--r-sm);
  font-size: var(--fs-md); font-weight: 500;
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--t-rapido), border-color var(--t-rapido),
              color var(--t-rapido), filter var(--t-rapido);
  white-space: nowrap; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Principal: el único lugar donde vive el gradiente. */
.btn--principal { background: var(--grad); color: #fff; font-weight: 600; }
.btn--principal:hover:not(:disabled) { filter: brightness(1.07); }

/* Sólida de marca: acciones frecuentes que no son la principal. */
.btn--azul { background: var(--azul); color: #fff; }
.btn--azul:hover:not(:disabled) { background: var(--azul-osc); }

.btn--suave { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn--suave:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-fuerte); }

.btn--plano { background: transparent; color: var(--text-soft); }
.btn--plano:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }

/* Destructiva: siempre secundaria. Nunca es lo más llamativo de la pantalla. */
.btn--peligro { background: transparent; border-color: var(--err-line); color: var(--err); }
.btn--peligro:hover:not(:disabled) { background: var(--err-bg); }

.btn--sm { height: 34px; padding: 0 var(--s3); font-size: var(--fs-sm); }
.btn--sm svg { width: 16px; height: 16px; }
.btn--lg { height: 50px; padding: 0 var(--s6); font-size: var(--fs-lg); }
.btn--full { width: 100%; }
.btn--icono { width: 38px; padding: 0; flex-shrink: 0; }

.btn-link {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-size: var(--fs-sm); font-weight: 500; color: var(--azul);
  min-height: 32px;
}
.btn-link:hover { color: var(--azul-osc); text-decoration: underline; }
.btn-link svg { width: 15px; height: 15px; }

/* ─────────────────────────────────────────────
   07  FORMULARIOS
   ───────────────────────────────────────────── */
.campo { margin-bottom: var(--s4); }
.campo:last-child { margin-bottom: 0; }
.campo > label,
.campo__label {
  display: block; font-size: var(--fs-sm); font-weight: 500;
  color: var(--text); margin-bottom: 6px;
}
.campo__ayuda { font-size: var(--fs-xs); color: var(--text-mute); margin-top: 5px; line-height: 1.45; }
.campo__error { font-size: var(--fs-xs); color: var(--err); margin-top: 5px; font-weight: 500; }
.campo__opt   { color: var(--text-mute); font-weight: 400; }

.input, select.input, textarea.input {
  width: 100%;
  min-height: 42px; padding: 10px var(--s3);
  font-size: var(--fs-md); font-family: inherit;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
  appearance: none;
}
textarea.input { min-height: 92px; resize: vertical; line-height: var(--lh-normal); }
select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2387949B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  padding-right: 38px; cursor: pointer;
}
.input::placeholder { color: var(--text-mute); }
.input:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(25,156,244,.16);
}
.input:disabled { background: var(--surface-3); color: var(--text-mute); cursor: not-allowed; }
.input--error { border-color: var(--err); }
.input--error:focus { box-shadow: 0 0 0 3px rgba(176,32,32,.14); }
.input[type="file"] { padding: 9px var(--s3); cursor: pointer; }

/* Prefijo/sufijo, para $ y Bs. */
.input-grupo { display: flex; align-items: stretch; }
.input-grupo .input { border-radius: 0; }
.input-grupo > :first-child { border-top-left-radius: var(--r-sm); border-bottom-left-radius: var(--r-sm); }
.input-grupo > :last-child  { border-top-right-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); }
.input-fijo {
  display: grid; place-items: center; padding: 0 var(--s3);
  background: var(--surface-3); border: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text-soft); white-space: nowrap;
}
.input-grupo .input + .input-fijo,
.input-grupo .input-fijo + .input { border-left: 0; }

/* Buscador con lupa. */
.buscador { position: relative; flex: 1; min-width: 180px; }
.buscador svg {
  position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-mute); pointer-events: none;
}
.buscador .input { padding-left: 40px; }

.filtros { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); align-items: center; }
.filtros select.input { width: auto; min-width: 130px; }

/* Casilla y radio como fila pulsable: el área táctil es toda la fila. */
.check {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; min-height: var(--tap);
  transition: border-color var(--t-rapido), background var(--t-rapido);
  margin-bottom: var(--s2);
}
.check:last-child { margin-bottom: 0; }
.check:hover { border-color: var(--border-fuerte); background: var(--surface-2); }
.check input[type="checkbox"],
.check input[type="radio"] {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;
  accent-color: var(--azul); cursor: pointer;
}
.check__texto   { min-width: 0; flex: 1; }
.check__titulo  { font-size: var(--fs-md); font-weight: 500; line-height: 1.35; }
.check__detalle { font-size: var(--fs-xs); color: var(--text-soft); margin-top: 2px; line-height: 1.45; }
.check:has(input:checked) { border-color: var(--azul); background: var(--info-bg); }

/* Casilla simple en línea, sin caja. */
.check-linea {
  display: inline-flex; align-items: center; gap: var(--s2);
  cursor: pointer; min-height: 32px; font-size: var(--fs-md);
}
.check-linea input { width: 18px; height: 18px; accent-color: var(--azul); cursor: pointer; flex-shrink: 0; }

/* Interruptor. */
.switch { display: inline-flex; align-items: center; gap: var(--s3); cursor: pointer; min-height: var(--tap); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__pista {
  width: 44px; height: 26px; border-radius: var(--r-full);
  background: var(--border-fuerte); position: relative; flex-shrink: 0;
  transition: background var(--t-normal);
}
.switch__pista::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: var(--sh-1); transition: transform var(--t-normal);
}
.switch input:checked + .switch__pista { background: var(--azul); }
.switch input:checked + .switch__pista::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__pista { outline: 2px solid var(--azul); outline-offset: 2px; }

/* Separador de secciones dentro de un formulario largo. */
.form-sec {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-mute);
  margin: var(--s6) 0 var(--s3); padding-bottom: var(--s2);
  border-bottom: 1px solid var(--border-soft);
}
.form-sec:first-child { margin-top: 0; }

/* Subida de imágenes. */
.dropzone {
  display: block;
  border: 1.5px dashed var(--border-fuerte); border-radius: var(--r-md);
  padding: var(--s6); text-align: center; background: var(--surface-2);
  cursor: pointer; transition: border-color var(--t-rapido), background var(--t-rapido);
}
.dropzone:hover { border-color: var(--azul); background: var(--info-bg); }
.dropzone svg { width: 26px; height: 26px; color: var(--text-mute); margin: 0 auto var(--s2); }
.dropzone__titulo { font-size: var(--fs-md); font-weight: 500; }
.dropzone__ayuda  { font-size: var(--fs-xs); color: var(--text-mute); margin-top: 2px; }
.dropzone input[type="file"] { display: none; }

.miniaturas { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.miniaturas img {
  width: 76px; height: 76px; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--border);
}

/* ─────────────────────────────────────────────
   08  SUPERFICIES
   ───────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s5);
  margin-bottom: var(--s4);
}
.card:last-child { margin-bottom: 0; }
.card--plano   { padding: 0; overflow: hidden; }
.card--relleno { padding: var(--s5); }
.card--elevado { box-shadow: var(--sh-2); border-color: transparent; }
.card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s4);
}
.card__titulo { font-size: var(--fs-md); font-weight: 600; }
.card__bajada { font-size: var(--fs-sm); color: var(--text-soft); margin-top: 2px; }
.card__pie {
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--border-soft);
}
.card__seccion { padding: var(--s5); border-bottom: 1px solid var(--border-soft); }
.card__seccion:last-child { border-bottom: 0; }

/* Cifras. */
.cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap: var(--s3); margin-bottom: var(--s6);
}
.cifra {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s4);
}
.cifra__label { font-size: var(--fs-xs); color: var(--text-soft); margin-bottom: var(--s1); }
.cifra__valor {
  font-size: var(--fs-xl); font-weight: 600; line-height: 1.1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.cifra__valor--azul { color: var(--azul); }
.cifra__pie { font-size: var(--fs-xs); color: var(--text-mute); margin-top: var(--s1); }

/* Fila de dato: etiqueta izquierda, valor derecha. Reemplaza a .row/.info-row. */
.dato {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-md);
}
.dato:last-child { border-bottom: 0; }
.dato__k { color: var(--text-soft); font-size: var(--fs-sm); flex-shrink: 0; }
.dato__v { text-align: right; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

.lista { display: flex; flex-direction: column; }
.lista > * { border-bottom: 1px solid var(--border-soft); }
.lista > *:last-child { border-bottom: 0; }

/* Tabla — solo cuando comparar muchas filas lo justifica. */
.tabla-wrap {
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; overflow-x: auto; background: var(--surface);
}
table.tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
table.tabla th {
  text-align: left; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-mute);
  padding: var(--s3) var(--s4); background: var(--surface-2);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.tabla td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border-soft); }
table.tabla tr:last-child td { border-bottom: 0; }
table.tabla tbody tr:hover td { background: var(--surface-2); }

/* Pestañas de contenido. Sin gradiente: subrayado. */
.tabs {
  display: flex; gap: var(--s1); margin-bottom: var(--s5);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  padding: var(--s3) var(--s4) 10px; font-size: var(--fs-md); font-weight: 500;
  color: var(--text-soft); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--t-rapido), border-color var(--t-rapido);
}
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--azul); border-bottom-color: var(--azul); }
.tabs__conteo {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: var(--r-full); background: var(--surface-3);
  font-size: var(--fs-2xs); font-weight: 600; color: var(--text-soft);
}
.tabs a.active .tabs__conteo { background: var(--info-bg); color: var(--azul); }

/* ─────────────────────────────────────────────
   09  ESTADOS
   ───────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: 500;
  padding: 3px 10px; border-radius: var(--r-full);
  white-space: nowrap; border: 1px solid transparent;
}
.badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.badge--limpio::before { display: none; }
.badge--ok     { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok-line); }
.badge--warn   { background: var(--warn-bg);   color: var(--warn);   border-color: var(--warn-line); }
.badge--err    { background: var(--err-bg);    color: var(--err);    border-color: var(--err-line); }
.badge--info   { background: var(--info-bg);   color: var(--info);   border-color: var(--info-line); }
.badge--neutro { background: var(--neutro-bg); color: var(--neutro); border-color: var(--neutro-line); }

/* Alerta en página. */
.alerta {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-sm);
  font-size: var(--fs-md); margin-bottom: var(--s4);
  border: 1px solid transparent;
}
.alerta svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; }
.alerta__cuerpo  { flex: 1; min-width: 0; }
.alerta__titulo  { font-weight: 600; }
.alerta__detalle { font-size: var(--fs-sm); margin-top: 2px; opacity: .9; }
.alerta__accion  { font-weight: 600; text-decoration: underline; white-space: nowrap; flex-shrink: 0; }
.alerta--ok   { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-line); }
.alerta--warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.alerta--err  { background: var(--err-bg);  color: var(--err);  border-color: var(--err-line); }
.alerta--info { background: var(--info-bg); color: var(--info); border-color: var(--info-line); }

/* Banner de facturación, pegado bajo la topbar. */
.banner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s3); flex-wrap: wrap;
  padding: 10px var(--s5); font-size: var(--fs-sm); font-weight: 500;
  position: sticky; top: var(--alto-topbar); z-index: 25;
  border-bottom: 1px solid transparent;
}
.banner--aviso  { background: var(--warn-bg); color: var(--warn); border-bottom-color: var(--warn-line); }
.banner--gracia { background: var(--err-bg);  color: var(--err);  border-bottom-color: var(--err-line); }
.banner__cta { font-weight: 600; text-decoration: underline; white-space: nowrap; }

/* ─────────────────────────────────────────────
   10  COMPONENTES DE PRODUCTO
   ───────────────────────────────────────────── */

/* 10.1 · Salud de tienda */
.salud {
  display: flex; align-items: flex-start; gap: var(--s4);
  padding: var(--s5); margin-bottom: var(--s6);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); border-left: 3px solid var(--neutro);
}
.salud--ok   { border-left-color: var(--ok); }
.salud--warn { border-left-color: var(--warn); }
.salud--err  { border-left-color: var(--err); }
.salud__icono {
  width: 38px; height: 38px; border-radius: var(--r-full);
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--neutro-bg); color: var(--neutro);
}
.salud__icono svg { width: 20px; height: 20px; }
.salud--ok   .salud__icono { background: var(--ok-bg);   color: var(--ok); }
.salud--warn .salud__icono { background: var(--warn-bg); color: var(--warn); }
.salud--err  .salud__icono { background: var(--err-bg);  color: var(--err); }
.salud__cuerpo   { min-width: 0; flex: 1; }
.salud__titulo   { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.012em; line-height: 1.3; }
.salud__detalle  { font-size: var(--fs-sm); color: var(--text-soft); margin-top: 3px; }
.salud__acciones { margin-top: var(--s3); display: flex; gap: var(--s2); flex-wrap: wrap; }

/* 10.2 · Tarjeta de prioridad */
.prioridades { display: flex; flex-direction: column; gap: var(--s2); }
.prioridad {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4); min-height: 68px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-rapido), transform var(--t-rapido);
}
.prioridad:hover { border-color: var(--azul); }
.prioridad:active { transform: scale(.995); }
.prioridad__icono {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--neutro-bg); color: var(--neutro);
}
.prioridad__icono svg { width: 20px; height: 20px; }
.prioridad--urgente  .prioridad__icono { background: var(--err-bg);  color: var(--err); }
.prioridad--atencion .prioridad__icono { background: var(--warn-bg); color: var(--warn); }
.prioridad--info     .prioridad__icono { background: var(--info-bg); color: var(--info); }
.prioridad__cuerpo  { min-width: 0; flex: 1; }
.prioridad__titulo  { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; }
.prioridad__detalle { font-size: var(--fs-sm); color: var(--text-soft); margin-top: 1px; line-height: 1.4; }
.prioridad__flecha  { color: var(--text-mute); flex-shrink: 0; }
.prioridad__flecha svg { width: 18px; height: 18px; }

/* 10.3 · Accesos rápidos */
.accesos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin-bottom: var(--s6); }
.acceso {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s2); padding: var(--s4) var(--s2); min-height: 88px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 500; text-align: center; line-height: 1.3;
  transition: border-color var(--t-rapido), color var(--t-rapido);
}
.acceso:hover { border-color: var(--azul); color: var(--azul); }
.acceso svg { width: 22px; height: 22px; color: var(--azul); }

/* 10.4 · Tarjeta de venta */
.venta {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4); min-height: 76px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-rapido);
}
.venta:hover { border-color: var(--azul); }
.venta__cuerpo  { min-width: 0; flex: 1; }
.venta__linea1  { display: flex; align-items: baseline; gap: var(--s2); }
.venta__num     { font-size: var(--fs-xs); color: var(--text-mute); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.venta__cliente { font-size: var(--fs-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venta__meta {
  font-size: var(--fs-xs); color: var(--text-soft); margin-top: 3px;
  display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center;
}
.venta__lado     { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.venta__monto    { font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.venta__monto-bs { font-size: var(--fs-2xs); color: var(--text-mute); font-variant-numeric: tabular-nums; }

/* 10.5 · Fila de producto del catálogo */
/* Tarjeta de producto del catálogo.
   Cada producto es una tarjeta propia, no un renglón de lista:
   el comerciante lo reconoce por la foto y el nombre, y las
   acciones tienen jerarquía clara en vez de tres botones grises
   del mismo peso. */
.catalogo { display: grid; gap: var(--s3); }
.producto {
  display: flex; gap: var(--s4); padding: var(--s4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.producto:hover { border-color: var(--border-fuerte); box-shadow: var(--sh-1); }
.producto:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(25,156,244,.12); }
.producto__foto {
  width: 84px; height: 84px; flex-shrink: 0;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface-2); overflow: hidden;
  display: grid; place-items: center; color: var(--text-mute);
  /* Sin esto la fila del grid se dimensiona al contenido y el
     height:100% de la foto resuelve contra la altura natural de la
     imagen, no contra la caja: la foto se desborda y se recorta por
     abajo. Con la pista explícita, object-fit recorta centrado. */
  grid-template: 100% / 100%;
}
.producto__foto img { width: 100%; height: 100%; object-fit: cover; }
.producto__foto svg { width: 26px; height: 26px; }
.producto__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }
.producto__nombre {
  font-size: var(--fs-lg); font-weight: 600; line-height: 1.3;
  letter-spacing: -.012em; overflow-wrap: anywhere;
}
.producto__nombre a { display: block; }
.producto__nombre a:hover { color: var(--azul); }
.producto__meta { font-size: var(--fs-xs); color: var(--text-soft); margin-top: 2px; }

/* Aviso dentro de la tarjeta: publicado pero sin precio. */
.producto__alerta {
  display: flex; align-items: flex-start; gap: var(--s2);
  font-size: var(--fs-xs); line-height: 1.45; color: var(--err);
  background: var(--err-bg); border: 1px solid var(--err-line);
  border-radius: var(--r-sm); padding: var(--s2) var(--s3);
}
.producto__alerta svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }

/* Fila de edición rápida: precio y visibilidad al alcance,
   sin tener que entrar al detalle. */
.producto__rapido {
  display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap;
}
.producto__rapido .campo { margin-bottom: 0; }
.producto__rapido .input { min-height: 38px; font-size: var(--fs-sm); }
.producto__rapido select.input { width: auto; min-width: 130px; }

/* Precio con el signo pegado al campo: se lee como dinero. */
.precio-campo {
  display: flex; align-items: center; width: 132px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); overflow: hidden;
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.precio-campo:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(25,156,244,.14); }
.precio-campo span {
  padding: 0 var(--s2) 0 var(--s3); font-size: var(--fs-sm);
  color: var(--text-mute); font-weight: 600;
}
.precio-campo .input {
  border: 0; box-shadow: none; padding-left: 0; min-height: 38px;
  font-weight: 600; font-variant-numeric: tabular-nums;
}

.producto__acciones { display: flex; gap: var(--s2); align-items: center; margin-left: auto; }

/* El botón de guardar aparece solo cuando hay algo que guardar.
   No reserva espacio: reservarlo dejaba un hueco vacío enorme al
   final de las tarjetas altas, como las de métodos de cobro. */
[data-guardar] { display: none; }
.con-cambios [data-guardar] {
  display: inline-flex;
  animation: aparece-guardar .16s ease-out;
}
@keyframes aparece-guardar {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
.con-cambios .producto__aviso { opacity: 1; }
.producto__aviso {
  font-size: var(--fs-xs); font-weight: 600; color: var(--warn);
  opacity: 0; transition: opacity var(--t-rapido);
}

@media (max-width: 640px) {
  .producto { flex-direction: column; }
  .producto__foto { width: 100%; height: 150px; }
  .producto__acciones { margin-left: 0; width: 100%; }
  .producto__acciones .btn { flex: 1; }
  .precio-campo { flex: 1; width: auto; }
  .producto__rapido select.input { flex: 1; min-width: 0; }
}

/* Avatar del comerciante en la barra superior. */
.avatar-btn {
  width: 34px; height: 34px; border-radius: var(--r-full); flex-shrink: 0;
  border: 1px solid var(--border); background: var(--surface-2);
  overflow: hidden; display: grid; place-items: center;
  grid-template: 100% / 100%;   /* mismo motivo que .producto__foto */
  color: var(--text-soft); font-size: var(--fs-sm); font-weight: 700;
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.avatar-btn:hover { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(25,156,244,.12); }
/* El interruptor de tema ahora vive en la barra lateral como un
   ítem más; siendo <button> hay que forzarle el ancho y la
   alineación que los <a> traen de fábrica. */
button.nav-item { width: 100%; text-align: left; font: inherit; }

/* Enlaces del pie del login, con jerarquía distinta entre sí. */
.auth__link {
  display: block; margin-top: var(--s5); text-align: center;
  font-size: var(--fs-sm); font-weight: 600; color: var(--azul);
}
.auth__link:hover { text-decoration: underline; }
.auth__pie {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--border-soft);
  text-align: center; font-size: var(--fs-xs); color: var(--text-mute);
}
.auth__pie a { color: var(--text-soft); font-weight: 600; margin-left: var(--s1); }
.auth__pie a:hover { color: var(--azul); }
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; }
.avatar-btn svg { width: 18px; height: 18px; }

/* Cargador de foto de perfil.
   Antes el <img> salía sin clase ni tamaño y se dibujaba a su
   resolución original, ocupando media pantalla. */
.foto-perfil {
  display: flex; align-items: center; gap: var(--s5);
  padding-bottom: var(--s5); margin-bottom: var(--s5);
  border-bottom: 1px solid var(--border-soft);
}
.foto-perfil__marco {
  width: 88px; height: 88px; flex-shrink: 0;
  border-radius: var(--r-full); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2);
  display: grid; place-items: center; grid-template: 100% / 100%;
}
.foto-perfil__marco img { width: 100%; height: 100%; object-fit: cover; }
.foto-perfil__inicial {
  font-size: var(--fs-2xl); font-weight: 700; color: var(--text-mute);
  display: grid; place-items: center; width: 100%; height: 100%;
}
.foto-perfil__lado   { min-width: 0; }
.foto-perfil__titulo { font-size: var(--fs-md); font-weight: 600; }
.foto-perfil__ayuda  { font-size: var(--fs-xs); color: var(--text-mute); margin: 2px 0 var(--s3); }
.foto-perfil label.btn { cursor: pointer; }
@media (max-width: 520px) {
  .foto-perfil { flex-direction: column; align-items: flex-start; gap: var(--s4); }
}

/* Resumen del plan contratado. */
.plan-actual {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s6); flex-wrap: wrap;
}
.plan-actual__info   { flex: 1; min-width: 220px; }
.plan-actual__nombre { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.02em; }
.plan-actual__desc   { font-size: var(--fs-sm); color: var(--text-soft); margin-top: 2px; }
.plan-actual__precio { text-align: right; flex-shrink: 0; }
.plan-actual__precio b {
  display: block; font-size: 34px; font-weight: 700;
  letter-spacing: -.03em; line-height: 1.05;
}
.plan-actual__precio span { font-size: var(--fs-sm); color: var(--text-mute); }
@media (max-width: 520px) {
  .plan-actual__precio { text-align: left; }
}

/* Botón de cerrar de un aviso descartable. */
.cerrar-aviso {
  flex-shrink: 0; align-self: flex-start;
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--text-mute);
  transition: background var(--t-rapido), color var(--t-rapido);
}
.cerrar-aviso:hover { background: var(--surface-3); color: var(--text); }
.cerrar-aviso svg { width: 16px; height: 16px; }

/* 10.6 · Estado vacío guiado */
.vacio {
  text-align: center; padding: var(--s12) var(--s5);
  display: flex; flex-direction: column; align-items: center;
}
.vacio__icono {
  width: 56px; height: 56px; border-radius: var(--r-full);
  display: grid; place-items: center; margin-bottom: var(--s4);
  background: var(--surface-3); color: var(--text-mute);
}
.vacio__icono svg { width: 26px; height: 26px; }
.vacio__titulo { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.012em; }
.vacio__texto  { font-size: var(--fs-sm); color: var(--text-soft); margin-top: var(--s2); max-width: 40ch; }
.vacio__accion { margin-top: var(--s5); }

/* 10.7 · Checklist de preparación */
.checklist { display: flex; flex-direction: column; }
.checklist__item {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--border-soft);
  min-height: 56px;
}
.checklist__item:last-child { border-bottom: 0; }
.checklist__marca {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1.5px solid var(--border-fuerte); color: transparent;
}
.checklist__marca svg { width: 14px; height: 14px; }
.checklist__item--listo .checklist__marca { background: var(--ok); border-color: var(--ok); color: #fff; }
/* ml_checklist() los emite como <span>, así que hay que forzar el
   salto de línea: si no, el título y el detalle salen pegados. */
.checklist__cuerpo  { flex: 1; min-width: 0; display: block; }
.checklist__titulo  { display: block; font-size: var(--fs-md); font-weight: 500; line-height: 1.35; }
.checklist__item--listo .checklist__titulo { color: var(--text-soft); }
.checklist__detalle { display: block; font-size: var(--fs-xs); color: var(--text-mute); margin-top: 1px; }
.checklist__progreso { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.checklist__barra { flex: 1; height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.checklist__barra span { display: block; height: 100%; border-radius: var(--r-full); background: var(--ok); transition: width var(--t-normal); }
.checklist__conteo { font-size: var(--fs-sm); color: var(--text-soft); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* 10.8 · Historial / línea de tiempo */
.timeline { display: flex; flex-direction: column; padding-left: var(--s1); }
.timeline__item { display: flex; gap: var(--s4); padding-bottom: var(--s5); position: relative; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ''; position: absolute; left: 9px; top: 22px; bottom: 0;
  width: 1.5px; background: var(--border);
}
.timeline__item:last-child::before { display: none; }
.timeline__punto {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface); border: 2px solid var(--border-fuerte);
  display: grid; place-items: center; z-index: 1; margin-top: 1px;
}
.timeline__punto svg { width: 11px; height: 11px; }
.timeline__item--ok   .timeline__punto { border-color: var(--ok);   background: var(--ok);   color: #fff; }
.timeline__item--warn .timeline__punto { border-color: var(--warn); background: var(--warn); color: #fff; }
.timeline__item--err  .timeline__punto { border-color: var(--err);  background: var(--err);  color: #fff; }
.timeline__cuerpo { min-width: 0; flex: 1; }
.timeline__titulo { font-size: var(--fs-md); font-weight: 500; line-height: 1.35; }
.timeline__meta   { font-size: var(--fs-xs); color: var(--text-mute); margin-top: 2px; }

/* 10.9 · Selector de método de cobro */
.metodos { display: flex; flex-direction: column; gap: var(--s2); }
.metodo {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
}
.metodo--activo { border-color: var(--azul); }
.metodo__head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); min-height: 64px; }
.metodo__icono {
  width: 38px; height: 38px; border-radius: var(--r-sm); flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-soft);
}
.metodo--activo .metodo__icono { background: var(--info-bg); color: var(--azul); }
.metodo__icono svg { width: 19px; height: 19px; }
.metodo__cuerpo  { flex: 1; min-width: 0; }
.metodo__nombre  { font-size: var(--fs-md); font-weight: 600; }
.metodo__detalle { font-size: var(--fs-xs); color: var(--text-soft); margin-top: 1px; }
/* Los campos solo se muestran en los métodos activos. Tenerlos
   todos abiertos a la vez llenaba la pantalla de formularios que
   el comerciante no está usando y costaba encontrar el suyo.
   Al encender el interruptor aparecen sin recargar la página. */
.metodo__campos {
  padding: var(--s4);
  border-top: 1px solid var(--border-soft);
  display: none;
}
.metodo--activo .metodo__campos,
.metodo:has(input[name="activo"]:checked) .metodo__campos { display: block; }
.metodo__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s3); }
.metodo__grid .campo { margin-bottom: 0; }
.metodo__grid .campo--ancho { grid-column: 1 / -1; }
.metodo__acciones { margin-top: var(--s4); display: flex; gap: var(--s2); }

/* 10.10 · Confirmación de cambio de estado */
.confirmar {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
}
.confirmar__head   { padding: var(--s5); border-bottom: 1px solid var(--border-soft); }
.confirmar__titulo { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.confirmar__bajada { font-size: var(--fs-sm); color: var(--text-soft); margin-top: var(--s2); }
.confirmar__cuerpo { padding: var(--s5); }
.confirmar__pie {
  padding: var(--s4) var(--s5); background: var(--surface-2);
  border-top: 1px solid var(--border-soft);
  display: flex; gap: var(--s2); flex-wrap: wrap;
}
.confirmar__pie .btn { flex: 1; min-width: 150px; }

/* Comparación monto esperado vs recibido. */
.montos { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3); align-items: center; margin-bottom: var(--s5); }
.monto-caja {
  padding: var(--s4); border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border); text-align: center;
}
.monto-caja__label { font-size: var(--fs-xs); color: var(--text-soft); }
.monto-caja__valor {
  font-size: var(--fs-xl); font-weight: 600; margin-top: var(--s1);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.monto-caja__bs  { font-size: var(--fs-xs); color: var(--text-mute); font-variant-numeric: tabular-nums; }
.monto-caja--ok  { border-color: var(--ok-line);  background: var(--ok-bg); }
.monto-caja--err { border-color: var(--err-line); background: var(--err-bg); }
.montos__flecha  { color: var(--text-mute); display: grid; place-items: center; }
.montos__flecha svg { width: 20px; height: 20px; }

/* Comprobante de pago. */
.comprobante {
  display: block; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2);
  max-width: 320px;
}
.comprobante img { width: 100%; height: auto; }
.comprobante__pie {
  padding: var(--s2) var(--s3); font-size: var(--fs-xs); color: var(--text-soft);
  border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: var(--s2);
}
.comprobante__pie svg { width: 14px; height: 14px; }

/* Barra de acciones, fija al fondo en móvil. */
.barra-accion {
  display: flex; gap: var(--s2);
  padding: var(--s5) 0 0;
}
.barra-accion .btn { flex: 1; }

/* Tarjeta de sección de la pantalla Tienda. */
.secciones { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s3); margin-bottom: var(--s8); }
.seccion {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4); min-height: 76px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-rapido);
}
.seccion:hover { border-color: var(--azul); }
.seccion__icono {
  width: 40px; height: 40px; border-radius: var(--r-sm); flex-shrink: 0;
  display: grid; place-items: center; background: var(--info-bg); color: var(--azul);
}
.seccion__icono svg { width: 20px; height: 20px; }
.seccion__cuerpo  { min-width: 0; flex: 1; }
.seccion__titulo  { font-size: var(--fs-md); font-weight: 600; }
.seccion__detalle { font-size: var(--fs-xs); color: var(--text-soft); margin-top: 1px; }
.seccion__estado  { flex-shrink: 0; }

/* Ítem de producto dentro del detalle de una venta. */
.linea-producto {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--border-soft);
}
.linea-producto:last-child { border-bottom: 0; }
.linea-producto__cant {
  min-width: 30px; height: 30px; padding: 0 6px; border-radius: var(--r-sm);
  background: var(--surface-3); color: var(--text-soft);
  display: grid; place-items: center; flex-shrink: 0;
  font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums;
}
.linea-producto__nombre { flex: 1; min-width: 0; font-size: var(--fs-md); line-height: 1.35; }
.linea-producto__total  { font-size: var(--fs-md); font-weight: 500; font-variant-numeric: tabular-nums; flex-shrink: 0; }

.contacto { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }

/* Enlace para compartir la tienda. */
.compartir {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3); border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  margin-bottom: var(--s4);
}
.compartir__url {
  flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Renglón editable de una venta manual. */
.renglon {
  display: grid; grid-template-columns: 1fr 84px 104px 38px;
  gap: var(--s2); align-items: end;
  padding: var(--s3) 0; border-bottom: 1px solid var(--border-soft);
}
.renglon:last-of-type { border-bottom: 0; }
.renglon .campo { margin-bottom: 0; max-width: none; }

/* ─────────────────────────────────────────────
   11  ONBOARDING
   ───────────────────────────────────────────── */
.onb-shell {
  min-height: 100vh; background: var(--chrome);
  padding: var(--s8) var(--s5) var(--s12);
  display: flex; justify-content: center;
}
.onb { width: 100%; max-width: 560px; }
.onb__marca { margin-bottom: var(--s6); }
.onb__marca img { height: 30px; }
.onb__paso { font-size: var(--fs-xs); color: var(--chrome-soft); margin-bottom: var(--s2); }
.onb__barra { display: flex; gap: 5px; margin-bottom: var(--s6); }
.onb__barra span {
  height: 4px; flex: 1; border-radius: var(--r-full);
  background: rgba(255,255,255,.16); transition: background var(--t-normal);
}
.onb__barra span.listo { background: var(--azul); }
.onb__card { background: var(--surface); border-radius: var(--r-lg); padding: var(--s8) var(--s6); }
.onb__icono {
  width: 56px; height: 56px; border-radius: var(--r-full); margin-bottom: var(--s5);
  display: grid; place-items: center; background: var(--info-bg); color: var(--azul);
}
.onb__icono svg { width: 26px; height: 26px; }
.onb__icono--ok { background: var(--ok-bg); color: var(--ok); }
.onb__titulo { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.028em; line-height: 1.2; }
.onb__bajada { font-size: var(--fs-md); color: var(--text-soft); margin: var(--s3) 0 var(--s6); }
.onb__pie { margin-top: var(--s5); text-align: center; font-size: var(--fs-xs); color: var(--text-mute); }
.onb__saltar { display: block; text-align: center; margin-top: var(--s4); font-size: var(--fs-sm); color: var(--chrome-soft); }
.onb__saltar:hover { color: #fff; }

/* ─────────────────────────────────────────────
   12  NOTIFICACIONES
   ───────────────────────────────────────────── */
.notif { position: relative; display: inline-flex; }
.notif__badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full);
  background: var(--err); color: #fff;
  font-size: var(--fs-2xs); font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--surface);
}
.notif__panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 340px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
  z-index: 100; overflow: hidden;
}
.notif__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-md); font-weight: 600;
}
.notif__markall { font-size: var(--fs-sm); color: var(--azul); font-weight: 500; }
.notif__lista { max-height: 60vh; overflow-y: auto; }
.notif__item {
  display: flex; gap: var(--s3); padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--t-rapido);
}
.notif__item:last-child { border-bottom: 0; }
.notif__item:hover { background: var(--surface-2); }
.notif__item.leida { opacity: .55; }
.notif__ic {
  width: 32px; height: 32px; border-radius: var(--r-sm); flex-shrink: 0;
  display: grid; place-items: center; background: var(--surface-3); color: var(--text-soft);
}
.notif__ic svg { width: 16px; height: 16px; }
.notif__cuerpo  { min-width: 0; flex: 1; }
.notif__titulo  { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.notif__item.leida .notif__titulo { font-weight: 400; }
.notif__detalle { font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.4; margin-top: 1px; }
.notif__time    { font-size: var(--fs-2xs); color: var(--text-mute); margin-top: 2px; }
.notif__vacio   { padding: var(--s8) var(--s4); text-align: center; color: var(--text-mute); font-size: var(--fs-sm); }
.notif__foot {
  display: block; text-align: center; padding: var(--s3);
  font-size: var(--fs-sm); color: var(--azul); font-weight: 500;
  border-top: 1px solid var(--border-soft);
}
.notif__foot:hover { background: var(--surface-2); }

/* ─────────────────────────────────────────────
   13  SKELETONS Y CARGA
   ───────────────────────────────────────────── */
@keyframes ml-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.sk { background: var(--surface-3); border-radius: var(--r-sm); animation: ml-pulso 1.4s ease-in-out infinite; }
.sk--titulo { height: 18px; width: 45%; }
.sk--texto  { height: 12px; width: 75%; }
.sk--corto  { height: 12px; width: 35%; }
.sk--fila   { height: 76px; border-radius: var(--r-md); }
.sk--cifra  { height: 84px; border-radius: var(--r-md); }
.sk-lista   { display: flex; flex-direction: column; gap: var(--s2); }

@keyframes ml-giro { to { transform: rotate(360deg); } }
.spin { animation: ml-giro .8s linear infinite; }
.cargando { pointer-events: none; opacity: .6; }

/* ─────────────────────────────────────────────
   14  RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .secciones { grid-template-columns: 1fr; }
  .metodo__grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .sidebar { display: none; }

  .topbar { padding: var(--s3) var(--s4); min-height: 56px; }
  .topbar__logo { display: flex; align-items: center; }
  .topbar__logo img { height: 26px; }
  .topbar__title { display: none; }

  .banner { top: 56px; }

  .content { padding: var(--s4) var(--s4) calc(var(--s16) + var(--s6)); }

  .t-page { font-size: 22px; }
  .page-head { margin-bottom: var(--s5); }

  .cifras  { grid-template-columns: 1fr 1fr; }
  .accesos { grid-template-columns: 1fr 1fr; }
  .grid-2  { grid-template-columns: 1fr; }

  .solo-movil      { display: initial; }
  .solo-escritorio { display: none !important; }

  /* Acciones de cabecera: ocupan su propia línea y se reparten el ancho.
     Los botones llevan white-space: nowrap, así que no encogen solos: sin
     esto, dos botones de texto largo empujaban la página hacia la derecha. */
  .page-head { gap: var(--s3); }
  .page-head__acciones { width: 100%; flex-wrap: wrap; }
  .page-head__acciones .btn { flex: 1 1 auto; }
  /* Si no caben en una línea se apilan: la acción principal va arriba. */
  .page-head__acciones .btn--principal { order: -1; }

  /* Área táctil cómoda. */
  .btn { height: var(--tap); }
  .btn--sm { height: 38px; }
  .input, select.input { min-height: var(--tap); }

  /* Barra de pestañas inferior. */
  .tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 6px var(--s1) calc(6px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    flex: 1; padding: var(--s1) 0; min-height: var(--tap);
    font-size: var(--fs-2xs); font-weight: 500; color: var(--text-mute);
    position: relative; transition: color var(--t-rapido);
  }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a.active { color: var(--azul); }
  .tabbar__badge {
    position: absolute; top: 2px; left: 50%; margin-left: 5px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-full);
    background: var(--err); color: #fff; font-size: 9px; font-weight: 700;
    display: grid; place-items: center; border: 2px solid var(--surface);
  }

  /* La barra de acciones se ancla sobre la tabbar. */
  .barra-accion {
    position: fixed; left: 0; right: 0;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    padding: var(--s3) var(--s4);
    background: var(--surface); border-top: 1px solid var(--border);
    z-index: 55; margin: 0;
  }
  .con-barra-accion .content { padding-bottom: calc(var(--s16) + var(--s16)); }

  .renglon { grid-template-columns: 1fr 70px 38px; }
  .renglon .campo--ancho { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .montos { grid-template-columns: 1fr; }
  .montos__flecha { transform: rotate(90deg); justify-self: center; }
  .confirmar__pie { flex-direction: column-reverse; }
  .confirmar__pie .btn { width: 100%; }
  .producto__foto { width: 56px; height: 56px; }
  .producto__rapido { display: grid; grid-template-columns: 1fr auto; }
  .producto__rapido .campo { max-width: none; grid-column: 1 / -1; }
  .venta__cliente { max-width: 44vw; }
  .onb__card { padding: var(--s6) var(--s5); }
  .onb__titulo { font-size: 22px; }
  .vacio { padding: var(--s8) var(--s4); }
  .dato { flex-direction: column; align-items: flex-start; gap: 2px; }
  .dato__v { text-align: left; }
}

/* ─────────────────────────────────────────────
   15  PANTALLAS ESPECÍFICAS
   ------------------------------------------------
   Estos componentes vivían en bloques <style> al
   final de cada página. Se traen aquí para que
   exista un solo sistema y no vuelvan a romperse
   por estar definidos donde no se ven.
   ───────────────────────────────────────────── */

/* 15.1 · Pantallas sin sesión (login, recuperar, ayuda) */
.auth {
  min-height: 100vh; background: var(--chrome);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s6) var(--s4);
}
.auth__card {
  width: 100%; max-width: 420px;
  background: var(--surface); border-radius: var(--r-lg);
  padding: var(--s8) var(--s6);
}
.auth__brand { margin-bottom: var(--s5); }
.auth__brand img { height: 30px; }
.auth__accent { width: 40px; height: 3px; border-radius: var(--r-full); background: var(--grad); margin-bottom: var(--s4); }
.auth__title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.022em; }
.auth__sub { font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: var(--s6); }
.back { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: var(--text-soft); margin-top: var(--s5); }
.back:hover { color: var(--azul); }

/* 15.2 · Distintivos y utilidades sueltas */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 500;
  background: var(--surface-3); color: var(--text-soft);
  border: 1px solid var(--border);
}
.chip--moneda { background: var(--info-bg); color: var(--info); border-color: var(--info-line); }
.chip--on  { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok-line); }
.chip--off { background: var(--neutro-bg); color: var(--neutro); border-color: var(--neutro-line); }
.is-off, .is-inactive { opacity: .55; }
.accent { color: var(--azul); }
.hide-mobile { display: initial; }
.sep { border: none; border-top: 1px solid var(--border-soft); margin: var(--s5) 0; }
.volver-link { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: var(--s4); }
.volver-link:hover { color: var(--azul); }
.btn-link-danger { font-size: var(--fs-sm); font-weight: 500; color: var(--err); }
.btn-link-danger:hover { text-decoration: underline; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4); }
.empty-state { padding: var(--s8) var(--s4); text-align: center; color: var(--text-soft); font-size: var(--fs-sm); }
.toast {
  position: fixed; bottom: var(--s6); left: 50%; transform: translateX(-50%);
  background: var(--chrome); color: #fff; padding: var(--s3) var(--s5);
  border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 500;
  box-shadow: var(--sh-3); z-index: 200;
}
.dot--usd, .dot--ves, .metodo-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-mute); flex-shrink: 0;
}
.dot--usd { background: var(--ok); }
.dot--ves { background: var(--azul); }

/* 15.3 · Planes y cambio de plan */
.planes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: var(--s4); }
.plan-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s2);
}
.plan-card--actual { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
.plan-card__badge {
  align-self: flex-start; padding: 3px 10px; border-radius: var(--r-full);
  background: var(--info-bg); color: var(--azul);
  font-size: var(--fs-2xs); font-weight: 600;
}
.plan-card__name  { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.012em; }
.plan-card__price { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan-card__anual { font-size: var(--fs-xs); color: var(--text-mute); }
.plan-card__desc  { font-size: var(--fs-sm); color: var(--text-soft); }
.plan-card__nota  { font-size: var(--fs-xs); color: var(--text-mute); margin-top: auto; padding-top: var(--s3); }
.planes-cambio {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
  gap: var(--s4); margin-top: var(--s4);
}
.nota--pago    { font-size: var(--fs-sm); color: var(--text-soft); }
.nota--credito { font-size: var(--fs-sm); color: var(--ok); font-weight: 500; }

/* 15.4 · Modales */
.modal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 300;
  background: rgba(8,14,17,.72);
  align-items: center; justify-content: center;
  padding: var(--s5);
}
.modal-overlay.active { display: flex; }
.modal-box {
  width: 100%; max-width: 440px;
  background: var(--surface); border-radius: var(--r-lg);
  padding: var(--s6); box-shadow: var(--sh-3);
  max-height: 88vh; overflow-y: auto;
}
.modal-title { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.02em; margin-bottom: var(--s3); }
.modal-detalle { font-size: var(--fs-md); color: var(--text-soft); line-height: 1.55; margin-bottom: var(--s5); }
.modal-box form > div { display: flex; gap: var(--s2); }
.modal-close {
  position: absolute; top: var(--s5); right: var(--s6);
  font-size: 34px; line-height: 1; color: #fff; cursor: pointer;
}
.modal-overlay img { max-width: 92vw; max-height: 86vh; border-radius: var(--r-md); }

/* 15.5 · Suscripción del comerciante (pagos.php) */
.pay-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s5); align-items: start; }
.pay-tasa { font-size: var(--fs-xs); color: var(--text-mute); margin-top: var(--s2); }
.monto-fijo {
  padding: var(--s5); border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border); text-align: center;
}
.monto-fijo__usd { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.monto-fijo__ves { font-size: var(--fs-sm); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.metodo-pago {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); margin-bottom: var(--s3); overflow: hidden;
}
.metodo-pago__head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); }
.metodo-pago__name { font-size: var(--fs-md); font-weight: 600; flex: 1; min-width: 0; }
.metodo-pago__monto { font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.dato-copia {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  margin-bottom: var(--s2);
}
.dato-copia__txt { flex: 1; min-width: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.copia-btn { color: var(--azul); font-size: var(--fs-xs); font-weight: 600; flex-shrink: 0; }
.pagos-hist { display: flex; flex-direction: column; }
.pago-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--border-soft);
}
.pago-row:last-child { border-bottom: 0; }
.pago-row__main  { flex: 1; min-width: 0; }
.pago-row__monto { font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.pago-row__ves   { font-size: var(--fs-2xs); color: var(--text-mute); font-variant-numeric: tabular-nums; }
.pago-row__met   { font-size: var(--fs-xs); color: var(--text-soft); }
.pago-row__fecha { font-size: var(--fs-xs); color: var(--text-mute); }
.pago-row__side  { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }

/* 15.6 · Cobros Medialoo (admin/metodos_pago.php) */
.cobros-head  { margin-bottom: var(--s5); }
.cobros-title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.012em; }
.cobros-sub   { font-size: var(--fs-sm); color: var(--text-soft); margin-top: var(--s1); }
.cobros-grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--s4); }
.cobros-list  { display: flex; flex-direction: column; gap: var(--s2); }
.cobros-form  { display: flex; flex-direction: column; gap: var(--s3); }
.metodo-item {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
}
.metodo-summary {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4); cursor: pointer; min-height: 62px;
}
.metodo-summary__main { flex: 1; min-width: 0; }
.metodo-name { font-size: var(--fs-md); font-weight: 600; }
.metodo-caret { color: var(--text-mute); transition: transform var(--t-rapido); flex-shrink: 0; }
details[open] > summary .metodo-caret { transform: rotate(180deg); }
.metodo-edit { padding: var(--s4); border-top: 1px solid var(--border-soft); }
.metodo-edit__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s3); }
.metodo-edit__actions { display: flex; gap: var(--s2); margin-top: var(--s4); }
.metodo-edit__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--border-soft);
}
.metodo-delete { font-size: var(--fs-sm); color: var(--err); font-weight: 500; }
.metodo-preview {
  padding: var(--s3); border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px dashed var(--border-fuerte);
  font-size: var(--fs-sm); color: var(--text-soft);
}
.metodo-preview__label { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute); margin-bottom: var(--s2); }
.dato-linea { font-size: var(--fs-sm); color: var(--text-soft); padding: 2px 0; }
.tasa-chip {
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
}
.tasa-chip__label { font-size: var(--fs-2xs); color: var(--text-mute); }
.tasa-chip__value { font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-sm); background: var(--surface-3); gap: 2px; }
.seg__opt {
  padding: 6px var(--s3); border-radius: 6px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-soft); cursor: pointer;
}
.seg__opt.active { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }

/* 15.7 · Plantillas de correo (admin/correos.php) */
.pg-title { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.02em; }
.pg-sub   { font-size: var(--fs-sm); color: var(--text-soft); margin-top: var(--s1); margin-bottom: var(--s5); }
.plantilla {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); margin-bottom: var(--s2); overflow: hidden;
}
.plantilla-sum { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); cursor: pointer; min-height: 62px; }
.plantilla-sum__main { flex: 1; min-width: 0; }
.plantilla-name { font-size: var(--fs-md); font-weight: 600; }
.plantilla-desc { font-size: var(--fs-xs); color: var(--text-soft); margin-top: 1px; }
.plantilla-edit { padding: var(--s4); border-top: 1px solid var(--border-soft); }
.plantilla-test {
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--border-soft);
  display: flex; gap: var(--s2); align-items: flex-end; flex-wrap: wrap;
}
.test-label { font-size: var(--fs-sm); font-weight: 500; }
.var-row  { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.var-chip {
  padding: 2px 8px; border-radius: var(--r-sm);
  background: var(--surface-3); color: var(--text-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs);
}
.smtp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--s3); }
.smtp-divider { border: none; border-top: 1px solid var(--border-soft); margin: var(--s6) 0; }

/* 15.8 · Ficha de cliente (admin/cliente.php) */
.cl-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s5); align-items: start; }
.hist-list { display: flex; flex-direction: column; }
.hist-row {
  display: flex; gap: var(--s3); padding: var(--s3) 0;
  border-bottom: 1px solid var(--border-soft);
}
.hist-row:last-child { border-bottom: 0; }
.hist-ic {
  width: 30px; height: 30px; border-radius: var(--r-sm); flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-soft); font-size: var(--fs-sm);
}
.hist-body { flex: 1; min-width: 0; }
.hist-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.hist-accion  { font-size: var(--fs-sm); font-weight: 600; }
.hist-actor   { font-size: var(--fs-2xs); color: var(--text-mute); }
.hist-fecha   { font-size: var(--fs-2xs); color: var(--text-mute); white-space: nowrap; flex-shrink: 0; }
.hist-detalle { font-size: var(--fs-xs); color: var(--text-soft); margin-top: 2px; }

/* 15.9 · Ajustes del admin */
.aj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: var(--s4); }
.correos-link {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4); min-height: 74px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: border-color var(--t-rapido);
}
.correos-link:hover { border-color: var(--azul); }
.correos-link__icon {
  width: 40px; height: 40px; border-radius: var(--r-sm); flex-shrink: 0;
  display: grid; place-items: center; background: var(--info-bg); color: var(--azul);
}
.correos-link__txt   { flex: 1; min-width: 0; }
.correos-link__title { font-size: var(--fs-md); font-weight: 600; }
.correos-link__sub   { font-size: var(--fs-xs); color: var(--text-soft); margin-top: 1px; }

/* 15.10 · Métodos por tienda (admin) */
.mt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: var(--s3); }
.metodo-card {
  padding: var(--s4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; min-height: var(--tap); }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-slider {
  width: 44px; height: 26px; border-radius: var(--r-full);
  background: var(--border-fuerte); position: relative;
  transition: background var(--t-normal);
}
.toggle-slider::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: var(--sh-1); transition: transform var(--t-normal);
}
.toggle input:checked + .toggle-slider { background: var(--azul); }
.toggle input:checked + .toggle-slider::after { transform: translateX(18px); }

/* 15.11 · Editor de producto e imágenes */
.imagenes-grid { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3); }
.img-item {
  position: relative; width: 96px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow: hidden; background: var(--surface-2);
}
.img-item img { width: 96px; height: 96px; object-fit: cover; }
.principal-tag {
  position: absolute; top: 4px; left: 4px;
  padding: 2px 7px; border-radius: var(--r-full);
  background: var(--azul); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.del-label {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 5px; font-size: var(--fs-2xs); color: var(--err);
  border-top: 1px solid var(--border-soft); cursor: pointer;
}
.remove-btn {
  width: 34px; height: 34px; border-radius: var(--r-sm); flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--err-bg); color: var(--err); font-size: var(--fs-lg); line-height: 1;
}
.variaciones-preview {
  padding: var(--s4); border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px dashed var(--border-fuerte);
  font-size: var(--fs-sm); color: var(--text-soft); margin-top: var(--s3);
}

/* 15.12 · Preguntas frecuentes */
.faq { border-bottom: 1px solid var(--border-soft); }
.faq:last-child { border-bottom: 0; }
.faq__p {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) 0; min-height: 56px;
  font-size: var(--fs-md); font-weight: 500; line-height: 1.4;
}
.faq__p:hover { color: var(--azul); }
.faq__caret { color: var(--text-mute); flex-shrink: 0; transition: transform var(--t-rapido); }
.faq__caret svg { width: 18px; height: 18px; }
.faq[open] .faq__caret { transform: rotate(180deg); }
.faq__r { font-size: var(--fs-sm); color: var(--text-soft); padding-bottom: var(--s4); max-width: 62ch; }

/* 15.13 · Pedidos del admin */
.ped-body { padding-top: var(--s4); }
.prod-img {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  object-fit: cover; border: 1px solid var(--border); flex-shrink: 0;
}
.comprobante-img {
  max-width: 260px; border-radius: var(--r-sm);
  border: 1px solid var(--border); cursor: zoom-in;
}

/* Fila etiqueta/valor sin las clases hijas: se estilizan por posición
   para que .dato funcione también donde venía de .row o .info-row. */
.dato > *:first-child:not(.dato__v) { color: var(--text-soft); font-size: var(--fs-sm); flex-shrink: 0; }
.dato > *:last-child:not(.dato__k)  { text-align: right; font-weight: 500; min-width: 0; }
.dato > *:only-child { text-align: left; }

@media (max-width: 900px) {
  .pay-grid, .cl-grid, .two-col { grid-template-columns: 1fr; }
  .metodo-edit__row { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .hide-mobile { display: none !important; }
  .auth__card { padding: var(--s6) var(--s5); }
}

/* Impresión: sin chrome. */
@media print {
  .sidebar, .topbar, .tabbar, .barra-accion, .banner { display: none !important; }
  .content { padding: 0; max-width: none; }
  .card { border-color: #ccc; break-inside: avoid; }
}

/* 15.x · Qué ganas y qué pierdes al cambiar de plan.
   Ver el precio no basta para decidir: hace falta saber qué se
   gana y, sobre todo, qué se deja de tener al bajar. */
.cambio-lista {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: var(--s3); padding: var(--s3);
  border-radius: var(--r-sm); font-size: var(--fs-xs); line-height: 1.4;
}
.cambio-lista--gana   { background: var(--ok-bg);  border: 1px solid var(--ok-line); }
.cambio-lista--pierde { background: var(--err-bg); border: 1px solid var(--err-line); }
.cambio-lista__titulo {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; margin-bottom: 2px;
}
.cambio-lista--gana   .cambio-lista__titulo { color: var(--ok); }
.cambio-lista--pierde .cambio-lista__titulo { color: var(--err); }
.cambio-lista__item { display: flex; align-items: flex-start; gap: 6px; text-align: left; }
.cambio-lista__item svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; }
.cambio-lista--gana   .cambio-lista__item { color: var(--ok); }
.cambio-lista--pierde .cambio-lista__item { color: var(--err); }

/* La tarjeta del plan actual también dice qué incluye: si está vacía
   al lado de la otra, no hay comparación posible y la pantalla parece
   empujar hacia el plan caro. */
.plan-card__incluye { display: flex; flex-direction: column; gap: 4px; margin-top: var(--s3); text-align: left; }
.plan-card__incluye-titulo {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-mute); margin-bottom: 2px;
}
.plan-card__incluye-item {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--fs-xs); line-height: 1.4; color: var(--text-soft);
}
.plan-card__incluye-item svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; color: var(--text-mute); }

/* Las tarjetas se estiran a la misma altura para poder compararlas. */
.planes-cambio { align-items: stretch; }
.plan-card { display: flex; flex-direction: column; }
.plan-card .btn { margin-top: auto; }

/* ─────────────────────────────────────────────
   Ventas que el comerciante no ha abierto
   Una venta del sábado se veía igual que una de hace diez
   minutos. El distintivo y la barra lateral hacen que salte
   a la vista sin gritar.
   ───────────────────────────────────────────── */
.venta--nueva {
  border-left: 3px solid var(--azul);
  background: linear-gradient(90deg, rgba(25,156,244,.05), transparent 40%);
}
.venta__nueva {
  display: inline-flex; align-items: center;
  margin-left: var(--s2); padding: 2px 8px;
  border-radius: var(--r-full); background: var(--azul); color: #fff;
  font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .04em; line-height: 1.4;
  animation: nueva-entra .3s ease-out;
}
@keyframes nueva-entra {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────
   Selector de ciclo de facturación
   Va antes que las tarjetas porque decidir mensual o anual
   cambia todos los precios de abajo.
   ───────────────────────────────────────────── */
.ciclo-sel {
  display: inline-flex; gap: 2px; padding: 3px; margin: var(--s4) 0 var(--s2);
  background: var(--surface-3); border-radius: var(--r-full);
}
.ciclo-sel__op {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px var(--s5); border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft);
  transition: background var(--t-rapido), color var(--t-rapido), box-shadow var(--t-rapido);
}
.ciclo-sel__op:hover { color: var(--text); }
.ciclo-sel__op.on { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }
.ciclo-sel__op em {
  font-style: normal; font-size: var(--fs-2xs); font-weight: 700;
  color: var(--ok); background: var(--ok-bg);
  padding: 2px 7px; border-radius: var(--r-full);
}
@media (max-width: 520px) {
  .ciclo-sel { display: flex; width: 100%; }
  .ciclo-sel__op { flex: 1; justify-content: center; padding: 8px var(--s3); }
}

/* ─────────────────────────────────────────────
   Prestaciones de un plan (panel de admin)
   ───────────────────────────────────────────── */
.prest-lista { display: flex; flex-direction: column; }
.prest {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--border-soft);
  cursor: pointer; min-height: 52px;
}
.prest:last-child { border-bottom: 0; }
.prest input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--azul); }
.prest__txt { flex: 1; min-width: 0; display: block; }
.prest__txt b { display: block; font-size: var(--fs-md); font-weight: 500; }
.prest__txt span { display: block; font-size: var(--fs-xs); color: var(--text-mute); }
.prest__lim { flex-shrink: 0; width: 116px; }
.prest__lim .input { min-height: 36px; font-size: var(--fs-sm); text-align: center; }
@media (max-width: 520px) {
  .prest { flex-wrap: wrap; }
  .prest__lim { width: 100%; }
}

/* ============================================================
   EL RECORRIDO DE ALTA
   ────────────────────────────────────────────────────────────
   Las cinco pantallas desde "quiero una tienda" hasta "estoy
   vendiendo". No llevan barra lateral: durante el alta no hay a
   dónde ir más que hacia delante, y un menú lleno de secciones
   que todavía no existen solo da sensación de estar perdido.
   ============================================================ */

.alta-body { background: var(--bg); }

.alta {
  max-width: 620px;
  margin: 0 auto;
  padding: var(--s6) var(--s4) var(--s16);
}
.alta--ancha { max-width: 1120px; }

.alta__marca { margin-bottom: var(--s6); }
.alta__marca img { height: 26px; display: block; }

/* ── La barra de los cinco pasos ─────────────────────────────
   El paso que hacemos nosotros se marca distinto a propósito:
   así la espera se lee como parte del trabajo y no como un
   agujero en el que la persona está sola. */
.alta-barra { margin-bottom: var(--s6); }

.alta-barra__t {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 var(--s3);
}
.alta-barra__t span { font-weight: 500; text-transform: none; letter-spacing: 0; }

.alta-barra__l {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--s2);
}
.alta-barra__l li {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding-top: var(--s2);
  border-top: 3px solid var(--border);
  color: var(--text-mute);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.alta-barra__l li.listo  { border-top-color: var(--ok);   color: var(--ok); }
.alta-barra__l li.activo { border-top-color: var(--azul); color: var(--azul); }
.alta-barra__l li.nuestro.activo { border-top-color: var(--turquesa); color: var(--info); }

.alta-barra__n {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  display: grid; place-items: center;
  font-size: var(--fs-2xs);
  font-weight: 700;
}
.alta-barra__n svg { width: 12px; height: 12px; }
li.listo  .alta-barra__n { background: var(--ok);   color: #fff; }
li.activo .alta-barra__n { background: var(--azul); color: #fff; }

.alta-barra__x { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* En teléfono los cinco títulos no caben. Se deja solo el del
   paso actual: los demás siguen ahí como marcas de progreso. */
@media (max-width: 620px) {
  .alta-barra__l li:not(.activo) .alta-barra__x { display: none; }
  .alta-barra__l li:not(.activo) { flex: 0 0 auto; }
  .alta-barra__l li.activo { flex: 1; }
}

/* ── Cabecera y tarjetas ─────────────────────────────────── */
.alta__cab { margin-bottom: var(--s5); }
.alta__cab--centro { text-align: center; }

.alta__titulo {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
  margin: 0 0 var(--s2);
}
.alta__bajada {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}

.alta__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s5);
  margin-bottom: var(--s4);
}

.alta__pie,
.alta__ayuda {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-mute);
  margin: var(--s4) 0 0;
}

.orbe {
  width: 64px; height: 64px;
  margin: 0 auto var(--s4);
  border-radius: var(--r-full);
  background: var(--info-bg);
  color: var(--info);
  display: grid; place-items: center;
}
.orbe svg { width: 30px; height: 30px; }

/* ── Campos ──────────────────────────────────────────────── */
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 520px) { .dupla { grid-template-columns: 1fr; } }

.campo__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}
.campo__cuenta {
  flex: 0 0 auto;
  font-size: var(--fs-2xs);
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.campo__cuenta.cerca { color: var(--warn); font-weight: 700; }

.campo__estado {
  margin: var(--s2) 0 0;
  font-size: var(--fs-xs);
  min-height: 16px;
}
.campo__estado--espera { color: var(--text-mute); }
.campo__estado--ok     { color: var(--ok); font-weight: 600; }
.campo__estado--mal    { color: var(--err); }

/* La dirección de la tienda: el dominio va pegado al campo para
   que se lea como una sola cosa y nadie intente escribirlo. */
.sub-fila { display: flex; align-items: stretch; }
.sub-fila .input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sub-fila__dom {
  display: flex; align-items: center;
  padding: 0 var(--s3);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--text-soft);
  font-size: var(--fs-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}

/* ── Dos opciones enfrentadas ────────────────────────────── */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
@media (max-width: 520px) { .dos { grid-template-columns: 1fr; } }

.op { position: relative; display: block; cursor: pointer; }
.op input { position: absolute; opacity: 0; pointer-events: none; }
.op__c {
  display: block;
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s3);
  transition: var(--t-rapido);
}
.op:hover .op__c { border-color: var(--border-fuerte); }
.op input:checked + .op__c { border-color: var(--azul); background: var(--info-bg); }
.op input:focus-visible + .op__c { outline: 2px solid var(--azul); outline-offset: 2px; }
.op__c b { display: block; font-size: var(--fs-sm); }
.op__c > span { display: block; font-size: var(--fs-xs); color: var(--text-mute); margin-top: 2px; }

/* ── Subir un archivo ────────────────────────────────────── */
.subir {
  display: flex; align-items: center; gap: var(--s3);
  border: 1.5px dashed var(--border);
  border-radius: var(--r-md);
  padding: var(--s3);
  background: var(--surface-2);
  cursor: pointer;
  transition: var(--t-rapido);
}
.subir:hover { border-color: var(--azul); background: var(--info-bg); }
.subir input { display: none; }
.subir__ico {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  display: grid; place-items: center;
  overflow: hidden;
  color: var(--text-mute);
}
.subir__ico img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.subir__txt b { display: block; font-size: var(--fs-sm); }
.subir__txt span { font-size: var(--fs-xs); color: var(--text-mute); }

/* ── Colores ─────────────────────────────────────────────── */
.colores { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

.swatch { position: relative; cursor: pointer; line-height: 0; }
/* Solo el radio se esconde. Antes esta regla decía `.swatch input`
   y también borraba la casilla de texto del color propio, que vive
   dentro de un .swatch y es lo único que ahí se tiene que ver. */
.swatch > input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.swatch > span {
  display: block;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--sw);
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(11,25,35,.08);
  transition: var(--t-rapido);
}
.swatch input:checked + span { border-color: var(--text); transform: scale(1.08); }
.swatch input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }

.swatch--propio { display: flex; align-items: center; gap: var(--s2); }
.swatch--propio input[type=color] {
  position: static; opacity: 1; pointer-events: auto;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: none; cursor: pointer;
}
.swatch--propio > span {
  width: auto; height: auto; background: none; border: none; box-shadow: none;
  font-size: var(--fs-xs); color: var(--text-mute); line-height: 1.4;
}

/* ── Plantillas ──────────────────────────────────────────── */
.plantillas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }

.plantilla { position: relative; cursor: pointer; }
.plantilla input { position: absolute; opacity: 0; pointer-events: none; }
.plantilla__c {
  display: block;
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s2);
  text-align: center;
  transition: var(--t-rapido);
}
.plantilla:hover .plantilla__c { border-color: var(--border-fuerte); }
.plantilla input:checked + .plantilla__c { border-color: var(--azul); background: var(--info-bg); }
.plantilla__c b { display: block; font-size: var(--fs-xs); margin-top: var(--s2); }
.plantilla__c > span { display: block; font-size: var(--fs-2xs); color: var(--text-mute); line-height: 1.35; }

.plantilla__mini {
  display: block; position: relative;
  height: 46px; border-radius: var(--r-sm); overflow: hidden;
}
.plantilla__mini i { position: absolute; display: block; border-radius: 2px; }
.plantilla__mini i:nth-child(1) { left: 8px; top: 8px;  width: 22px; height: 5px; }
.plantilla__mini i:nth-child(2) { left: 8px; top: 20px; width: 46px; height: 6px; }
.plantilla__mini i:nth-child(3) { left: 8px; top: 32px; width: 24px; height: 7px; border-radius: 99px; }

.plantilla__mini--clara  { background: #F7F9FC; }
.plantilla__mini--clara  i:nth-child(1) { background: #0F1B2A; }
.plantilla__mini--clara  i:nth-child(2) { background: #C6D2DE; }
.plantilla__mini--clara  i:nth-child(3) { background: var(--azul); }

.plantilla__mini--oscura { background: #141B26; }
.plantilla__mini--oscura i:nth-child(1) { background: #fff; }
.plantilla__mini--oscura i:nth-child(2) { background: #41505F; }
.plantilla__mini--oscura i:nth-child(3) { background: var(--azul); }

.plantilla__mini--color  { background: var(--azul); }
.plantilla__mini--color  i:nth-child(1) { background: #fff; }
.plantilla__mini--color  i:nth-child(2) { background: rgba(255,255,255,.55); }
.plantilla__mini--color  i:nth-child(3) { background: #fff; }

/* ── El paso 2 en dos columnas ───────────────────────────── */
.marca { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: var(--s5); align-items: start; }
@media (max-width: 900px) { .marca { grid-template-columns: 1fr; } }

.previo { position: sticky; top: var(--s5); }
@media (max-width: 900px) { .previo { position: static; } }

.previo__cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s3); }
.previo__cab b {
  font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute);
}
.previo__vivo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); color: var(--ok); font-weight: 600; }
.previo__vivo::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  animation: latido 1.8s ease-in-out infinite;
}
@keyframes latido { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.previo__nota { margin: var(--s3) 0 0; font-size: var(--fs-xs); color: var(--text-mute); line-height: var(--lh-normal); }

.navegador {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.navegador__barra {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
}
.navegador__p { display: flex; gap: 5px; }
.navegador__p i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-fuerte); display: block; }
.navegador__url {
  flex: 1; min-width: 0;
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 4px var(--s3);
  font-size: var(--fs-2xs);
  color: var(--text-mute);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── El adelanto del escaparate ──────────────────────────────
   Los colores llegan como variables desde marca.js: el CSS no
   sabe nada de plantillas, solo pinta lo que le dan. */
.hero-previo {
  background: var(--f, #EFF7FE);
  color: var(--t, #0F1B2A);
  padding: var(--s5) var(--s6) var(--s12);
  display: flex; flex-direction: column; gap: var(--s8);
  min-height: 320px;
}
.hero-previo__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.hero-previo__marca { font-weight: 800; font-size: var(--fs-xl); letter-spacing: -.02em; }
.hero-previo__marca img { max-height: 38px; max-width: 160px; object-fit: contain; display: block; }
.hero-previo__nav { display: flex; gap: var(--s4); font-size: var(--fs-xs); color: var(--s, inherit); }

.hero-previo__cuerpo { max-width: 360px; }
.hero-previo__ante {
  margin: 0 0 var(--s2);
  font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--s, inherit);
}
.hero-previo__tit {
  margin: 0 0 var(--s3);
  font-size: 30px; line-height: 1.14; letter-spacing: -.03em;
}
.hero-previo__tit.vacio { opacity: .3; }
.hero-previo__desc { margin: 0 0 var(--s5); font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--s, inherit); }
.hero-previo__btn {
  display: inline-block;
  padding: 11px var(--s6);
  border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 600;
  background: var(--bb, #199CF4);
  color: var(--bt, #fff);
}

/* ── Resumen de la compra ────────────────────────────────── */
.resumen__f, .resumen__t { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; }
.resumen__f { font-size: var(--fs-sm); color: var(--text-soft); }
.resumen__f b { color: var(--text); }
.resumen__f b.ok { color: var(--ok); }
.resumen__t {
  border-top: 1px solid var(--border);
  margin-top: var(--s2); padding-top: var(--s3);
  font-size: var(--fs-lg); font-weight: 700;
}
.resumen__bs { margin: var(--s2) 0 0; text-align: right; font-size: var(--fs-xs); color: var(--text-mute); }

/* ── Elegir entre varias cosas (planes, métodos) ─────────── */
.opciones { display: flex; flex-direction: column; gap: var(--s2); }

.opcion {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--s3);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s3);
  cursor: pointer;
  transition: var(--t-rapido);
}
.opcion:hover { border-color: var(--border-fuerte); }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion--sel, .opcion:has(input:checked) { border-color: var(--azul); background: var(--info-bg); }
.opcion--sel .datos, .opcion:has(input:checked) .datos { display: block; }

.opcion__marca {
  flex: 0 0 auto; margin-top: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border-fuerte);
  background: var(--surface);
}
.opcion--sel .opcion__marca, .opcion:has(input:checked) .opcion__marca {
  border-color: var(--azul);
  box-shadow: inset 0 0 0 4px var(--azul);
}
.opcion__txt { flex: 1; min-width: 0; }
.opcion__txt b { display: block; font-size: var(--fs-sm); }
.opcion__txt > span { display: block; font-size: var(--fs-xs); color: var(--text-mute); }
.opcion__precio { flex: 0 0 auto; text-align: right; }
.opcion__precio b { display: block; font-size: var(--fs-lg); }
.opcion__precio span { font-size: var(--fs-2xs); color: var(--text-mute); }

/* Los datos para pagar. Cada renglón se copia por separado:
   nadie quiere pegar "Teléfono:" dentro del campo del banco. */
.datos { display: none; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--info-line); }
.datos[hidden] { display: none; }
.opcion--sel .datos[hidden], .opcion:has(input:checked) .datos[hidden] { display: block; }
.datos__t { display: block; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); margin-bottom: var(--s2); }
.datos__lista { display: flex; flex-direction: column; gap: var(--s1); }
.datos__monto { display: flex; justify-content: space-between; gap: var(--s3); margin-top: var(--s3); padding-top: var(--s2); border-top: 1px dashed var(--info-line); font-size: var(--fs-sm); }
.datos__monto b { font-size: var(--fs-lg); }

.dato-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.dato-fila__txt { min-width: 0; }
.dato-fila__txt em { display: block; font-style: normal; font-size: var(--fs-2xs); color: var(--text-mute); }
.dato-fila__txt b { font-size: var(--fs-sm); word-break: break-all; }
.dato-fila__btn, .copiar {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 5px var(--s3);
  font: inherit; font-size: var(--fs-2xs); font-weight: 600;
  color: var(--text-soft); cursor: pointer;
}
.copiar { width: 100%; margin-top: var(--s3); padding: var(--s2); }
.dato-fila__btn:hover, .copiar:hover { border-color: var(--azul); color: var(--azul); }

/* ── La línea de progreso del montaje ────────────────────── */
.linea { list-style: none; margin: 0; padding: 0; }
.linea__i { display: flex; gap: var(--s3); padding-bottom: var(--s5); position: relative; }
.linea__i:last-child { padding-bottom: 0; }
.linea__i:not(:last-child)::before {
  content: ""; position: absolute; left: 13px; top: 30px; bottom: 4px;
  width: 2px; background: var(--border);
}
.linea__i--listo:not(:last-child)::before { background: var(--ok-line); }

.linea__p {
  flex: 0 0 auto; z-index: 1;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-mute);
}
.linea__p svg { width: 16px; height: 16px; }
.linea__i--listo  .linea__p { background: var(--ok-bg);   color: var(--ok); }
.linea__i--activo .linea__p { background: var(--info-bg); color: var(--info); box-shadow: 0 0 0 4px var(--info-bg); }

.linea__c { flex: 1; min-width: 0; padding-top: 3px; }
.linea__c b { display: block; font-size: var(--fs-md); }
.linea__d { display: block; font-size: var(--fs-sm); color: var(--text-soft); line-height: var(--lh-normal); margin-top: 2px; }
.linea__e {
  display: inline-block; margin-top: var(--s2);
  font-size: var(--fs-2xs); font-weight: 700;
  padding: 2px var(--s2); border-radius: var(--r-full);
}
.linea__e--tu { background: var(--ok-bg);   color: var(--ok); }
.linea__e--ml { background: var(--info-bg); color: var(--info); }

/* ── Lo que eligió, mientras espera ──────────────────────── */
.resumen-marca__f { display: flex; align-items: center; gap: var(--s3); }
.resumen-marca__logo {
  flex: 0 0 auto; width: 44px; height: 44px;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--c, var(--surface-3));
  display: grid; place-items: center;
  color: #fff; font-size: var(--fs-lg);
}
.resumen-marca__logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; background: var(--surface); }
.resumen-marca__d { flex: 1; min-width: 0; }
.resumen-marca__d b { display: block; font-size: var(--fs-sm); word-break: break-all; }
.resumen-marca__d span { font-size: var(--fs-xs); color: var(--text-mute); }

/* ── Tarjetas de "mientras tanto" ────────────────────────── */
.mientras { display: flex; flex-direction: column; gap: var(--s2); }
.mientras a {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  color: inherit; text-decoration: none;
  transition: var(--t-rapido);
}
.mientras a:hover { border-color: var(--azul); }
.mientras a > svg:first-child { flex: 0 0 auto; color: var(--azul); width: 22px; height: 22px; }
.mientras a > svg:last-child  { flex: 0 0 auto; color: var(--text-mute); width: 18px; height: 18px; }
.mientras a > span { flex: 1; min-width: 0; }
.mientras a b { display: block; font-size: var(--fs-sm); }
.mientras a b + span { display: block; font-size: var(--fs-xs); color: var(--text-mute); line-height: var(--lh-normal); }

/* ── Botón en forma de pastilla ──────────────────────────── */
.btn--chip {
  width: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface-2);
  font-size: var(--fs-xs);
}
.btn--chip:hover { border-color: var(--azul); color: var(--azul); }
.btn--chip svg { width: 15px; height: 15px; }

/* ── La marca del cliente, en el panel de admin ──────────────
   Lo que antes llegaba por WhatsApp: logo, color, estilo y los
   tres textos, en un sitio y listos para copiar. */
.marca-admin { display: flex; align-items: center; gap: var(--s4); }
@media (max-width: 520px) { .marca-admin { flex-direction: column; align-items: stretch; } }

.marca-admin__logo {
  flex: 0 0 auto;
  width: 96px; height: 96px;
  border-radius: var(--r-md);
  background: var(--c, var(--surface-3));
  display: grid; place-items: center;
  overflow: hidden;
}
.marca-admin__logo img { width: 100%; height: 100%; object-fit: contain; padding: var(--s2); background: var(--surface); }
.marca-admin__logo span { color: #fff; font-size: var(--fs-xs); font-weight: 600; }
.marca-admin__d { flex: 1; min-width: 0; }

.muestra-color {
  display: inline-block; vertical-align: -3px;
  width: 16px; height: 16px; margin-right: 6px;
  border-radius: 4px; background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(11,25,35,.15);
}

/* ── Teléfono con prefijo de país ────────────────────────────
   Un campo de texto suelto no se lee como un teléfono. El
   prefijo delante lo deja claro de un vistazo, y de paso el
   número queda guardado con país: hace falta para armar el
   enlace de WhatsApp sin adivinar de dónde es cada quien.

   El <select> va invisible encima del prefijo. Así se abre el
   selector nativo del teléfono —que es el bueno— pero lo que se
   ve es el prefijo con el mismo estilo que el resto. */
.tel-fila {
  position: relative;
  display: flex; align-items: stretch;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.tel-fila:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(25,156,244,.12); }
.tel-fila--error { border-color: var(--err); }

.tel-fila__pre {
  display: flex; align-items: center; gap: 5px;
  padding: 0 var(--s3);
  background: var(--surface-3);
  border-right: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-md); font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tel-fila__pre::after {
  content: ""; display: block;
  width: 0; height: 0; margin-top: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-mute);
}

.tel-fila__pais {
  position: absolute; left: 0; top: 0;
  height: 100%; width: 108px;
  opacity: 0; cursor: pointer;
  font-size: 16px;              /* menos de 16px hace que iOS acerque la pantalla */
  border: none; background: none;
}

.tel-fila__num {
  flex: 1; min-width: 0;
  border: none; background: none;
  padding: 11px var(--s3);
  font: inherit; font-size: var(--fs-md);
  color: var(--text);
}
.tel-fila__num:focus { outline: none; }

/* ── Color propio en hexadecimal ─────────────────────────────
   El selector de color del sistema abre un panel enorme con
   lápices y cuentagotas. Para elegir entre seis colores, o pegar
   el hex exacto de una marca, estorba más de lo que ayuda. */
.swatch--hex {
  display: flex; align-items: center; gap: var(--s2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px 3px 3px var(--s2);
  line-height: normal;
  transition: var(--t-rapido);
}
.swatch--hex-on, .swatch--hex:focus-within { border-color: var(--azul); }
.swatch--hex-mal { border-color: var(--err); }
.swatch--hex input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }

.swatch--hex__m {
  display: block; flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 6px; background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(11,25,35,.15);
}
.swatch--hex__i {
  width: 82px;
  border: none; background: none;
  padding: 4px 2px;
  font: inherit; font-size: var(--fs-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  color: var(--text);
}
.swatch--hex__i:focus { outline: none; }

/* ============================================================
   EL ALTA EN TELÉFONO
   ────────────────────────────────────────────────────────────
   No es "que quepa": es que esté pensado para ahí, porque por
   ahí va a entrar la mayoría. Tres decisiones de fondo:

   1. La vista previa sube arriba y se queda fija. En escritorio
      va al lado y siempre se ve; apilada debajo del formulario
      quedaría fuera de pantalla justo mientras la persona toca
      los colores, que es el único momento en que sirve.
   2. Los campos pasan a 16px. Por debajo de eso, Safari en iPhone
      hace zoom solo al enfocar y descoloca la página entera.
   3. Todo lo que se toca llega a 44px de alto. Un dedo no es un
      puntero de ratón.
   ============================================================ */
@media (max-width: 900px) {

  .alta { padding: var(--s4) var(--s3) var(--s12); }

  /* La vista previa, arriba y siempre a la vista. */
  .marca { display: flex; flex-direction: column; gap: var(--s4); }
  .marca__previo { order: -1; position: sticky; top: 0; z-index: 20; margin: 0 calc(-1 * var(--s3)); }
  .marca__form   { order: 1; }

  .marca__previo .previo {
    background: var(--bg);
    padding: var(--s2) var(--s3) var(--s3);
    box-shadow: 0 6px 16px rgba(11,25,35,.10);
  }
  .previo__cab   { margin-bottom: var(--s2); }
  .previo__nota  { display: none; }        /* el pie explicativo estorba fijo */

  /* El escaparate se encoge: sigue leyéndose y deja sitio al
     formulario, que es donde están las manos. */
  .hero-previo { min-height: 0; padding: var(--s3) var(--s4) var(--s5); gap: var(--s4); }
  .hero-previo__tit  { font-size: 21px; }
  .hero-previo__desc { margin-bottom: var(--s3); font-size: var(--fs-sm); }
  .hero-previo__nav  { display: none; }
  .hero-previo__marca img { max-height: 28px; }
  .navegador__barra { padding: 5px var(--s2); }
}

@media (max-width: 620px) {

  /* iOS hace zoom si el campo baja de 16px. */
  .input,
  .tel-fila__num,
  .swatch--hex__i,
  .alta__card select { font-size: 16px; }

  .input { padding: 12px var(--s3); }

  /* Área táctil de verdad. */
  .btn--chip { min-height: 40px; }
  .swatch > span { width: 44px; height: 44px; }
  .swatch--propio input[type=color] { width: 44px; height: 44px; }
  .swatch--hex { padding: 4px 4px 4px var(--s3); }
  .swatch--hex__m { width: 26px; height: 26px; }
  .swatch--hex__i { width: 96px; font-size: 16px; }
  .dato-fila__btn { min-height: 36px; padding: 6px var(--s3); }

  .op__c    { padding: var(--s4) var(--s3); }
  .opcion   { padding: var(--s4) var(--s3); }
  .subir    { padding: var(--s4) var(--s3); }

  /* Las tres plantillas no caben en fila en 360px sin quedar
     ilegibles: pasan a una tira que se desliza. */
  .plantillas {
    display: flex;
    gap: var(--s2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--s4));
    padding: 0 var(--s4) var(--s2);
  }
  .plantillas::-webkit-scrollbar { display: none; }
  .plantilla { flex: 0 0 46%; scroll-snap-align: start; }

  .alta__card { padding: var(--s4); border-radius: var(--r-md); }
  .alta__titulo { font-size: 22px; }

  /* El resumen del pago se lee peor en dos columnas apretadas. */
  .opcion__precio b { font-size: var(--fs-md); }
}