/* ==========================================================================
   Motor Kart — tema y componentes.

   Unico lugar donde viven color, tipografia, espaciado, radios y sombras.
   Paleta: rojo, blanco y negro, cada uno en una escala de tonos, para que
   la jerarquia se note sin recurrir a mas colores.

   Base de espaciado: 4px.
   ========================================================================== */

:root {
  /* --- Azul: la escala de marca --------------------------------------- */
  --rj-50:  #fdf2f3;
  --rj-100: #fbdfe1;
  --rj-200: #f7c2c6;
  --rj-300: #f09aa1;
  --rj-400: #e8616d;
  --rj-500: #dc3545;
  --rj-600: #c41226;   /* primario */
  --rj-700: #a20d1f;
  --rj-800: #85101e;
  --rj-900: #6d121d;
  --rj-950: #3d040c;

  /* --- Negro: del casi-negro al gris claro ---------------------------- */
  --ng-950: #0a0a0b;   /* casi negro: barra lateral */
  --ng-900: #141416;
  --ng-800: #1f1f23;
  --ng-700: #2e2e34;
  --ng-600: #4a4a5280;
  --ng-500: #6b6b74;
  --ng-400: #90909a;
  --ng-300: #b8b8c0;
  --ng-200: #dadade;
  --ng-100: #ebebee;
  --ng-50:  #f6f6f7;

  /* --- Blanco y superficies ------------------------------------------- */
  --blanco: #ffffff;
  --c-bg: var(--ng-50);
  --c-surface: var(--blanco);
  --c-surface-2: #f8f8f9;
  /* Superficie translucida de las barras fijas (cabecera y barra del movil). */
  --c-glass: rgba(255, 255, 255, .85);
  --c-glass-fuerte: rgba(255, 255, 255, .92);
  --c-border: var(--ng-200);
  --c-border-strong: var(--ng-300);

  /* --- Papeles de la marca -------------------------------------------- */
  --c-primary: var(--rj-600);
  --c-primary-hover: var(--rj-700);
  --c-primary-soft: var(--rj-50);
  --c-primary-border: var(--rj-200);
  --c-secondary: var(--rj-400);

  --c-text: var(--ng-900);
  --c-text-muted: var(--ng-500);
  --c-text-faint: var(--ng-400);

  /* --- Semantico, en la misma familia fria ---------------------------- */
  --c-success: #0f7a4d;
  --c-success-soft: #e3f6ec;
  --c-danger: #7d1420;
  --c-danger-soft: #fbe9eb;
  /* Texto que va ENCIMA del rojo solido. En oscuro el rojo se aclara, asi
     que el texto tiene que oscurecerse o no se lee. */
  --c-sobre-danger: var(--blanco);
  --c-danger-hover: #641019;
  --c-warning: #9a6300;
  --c-warning-soft: #fdf2dc;
  --c-info: var(--rj-700);
  --c-info-soft: var(--rj-50);

  /* --- Espaciado: base 4px -------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* --- Tipografia -----------------------------------------------------
     Dos familias: una de titulos, con mas caracter, y otra de lectura.
     Si no hay red, caen a la del sistema sin romper la pagina.          */
  --f-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace;

  --t-xs: 12px; --t-sm: 13px; --t-base: 14px; --t-md: 16px;
  --t-lg: 18px; --t-xl: 24px; --t-2xl: 30px; --t-3xl: 38px;

  /* --- Radios: generosos, como en una app movil ------------------------ */
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;

  /* --- Elevacion: sombras frias, nunca negro puro ---------------------- */
  --sh-sm: 0 1px 2px rgba(20, 20, 22, .06);
  --sh-md: 0 4px 14px rgba(20, 20, 22, .08);
  --sh-lg: 0 18px 44px rgba(16, 16, 18, .22);

  /* --- Medidas --------------------------------------------------------- */
  --sidebar-w: 248px;
  --header-h: 62px;
  --tabbar-h: 62px;
}

/* ==========================================================================
   Modo oscuro

   Solo se redefinen los papeles (--c-*) y las sombras (--sh-*), nunca las
   escalas de azul y gris: asi ningun componente necesita una regla propia
   para el oscuro. La barra lateral ya era casi negra, de modo que en oscuro
   lo que cambia es el resto.

   Se aplica si el sistema lo pide, salvo que el usuario haya elegido claro a
   mano; y siempre si ha elegido oscuro.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --c-bg: var(--ng-950);
    --c-surface: var(--ng-900);
    --c-surface-2: #141416;
    --c-glass: rgba(10, 10, 11, .85);
    --c-glass-fuerte: rgba(10, 10, 11, .94);
    --c-border: #2a2a30;
    --c-border-strong: #3b3b43;

    --c-primary: var(--rj-500);
    --c-primary-hover: var(--rj-400);
    --c-primary-soft: #2a0e13;
    --c-primary-border: #5e1620;

    --c-text: #ebebee;
    --c-text-muted: var(--ng-300);
    --c-text-faint: var(--ng-400);

    --c-success: #4ade80;  --c-success-soft: #10291d;
    --c-danger:  #f87171;  --c-danger-soft:  #2d1718;
    --c-sobre-danger: var(--ng-950);
    --c-danger-hover: #fca5a5;
    --c-warning: #fbbf24;  --c-warning-soft: #2a2010;
    --c-info:    var(--rj-300); --c-info-soft: #2a0e13;

    --sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-md: 0 4px 14px rgba(0, 0, 0, .45);
    --sh-lg: 0 18px 44px rgba(0, 0, 0, .6);
  }
}

:root[data-tema="oscuro"] {
  --c-bg: var(--ng-950);
  --c-surface: var(--ng-900);
  --c-surface-2: #141416;
  --c-glass: rgba(10, 10, 11, .85);
  --c-glass-fuerte: rgba(10, 10, 11, .94);
  --c-border: #2a2a30;
  --c-border-strong: #3b3b43;

  --c-primary: var(--rj-500);
  --c-primary-hover: var(--rj-400);
  --c-primary-soft: #2a0e13;
  --c-primary-border: #5e1620;

  --c-text: #ebebee;
  --c-text-muted: var(--ng-300);
  --c-text-faint: var(--ng-400);

  --c-success: #4ade80;  --c-success-soft: #10291d;
  --c-danger:  #f87171;  --c-danger-soft:  #2d1718;
  --c-sobre-danger: var(--ng-950);
  --c-danger-hover: #fca5a5;
  --c-warning: #fbbf24;  --c-warning-soft: #2a2010;
  --c-info:    var(--rj-300); --c-info-soft: #2a0e13;

  --sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-md: 0 4px 14px rgba(0, 0, 0, .45);
  --sh-lg: 0 18px 44px rgba(0, 0, 0, .6);
}

/* Las insignias llevan borde propio en claro; en oscuro lo heredan del papel. */
:root[data-tema="oscuro"] .badge--success,
:root[data-tema="oscuro"] .badge--danger,
:root[data-tema="oscuro"] .badge--warning,
:root[data-tema="oscuro"] .badge--info { border-color: currentColor; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .badge--success,
  :root:not([data-tema="claro"]) .badge--danger,
  :root:not([data-tema="claro"]) .badge--warning,
  :root:not([data-tema="claro"]) .badge--info { border-color: currentColor; }
}

/* Breakpoint del proyecto: 900px (la barra lateral pasa a barra inferior). */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family: var(--f-sans);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }
p { margin: 0; }
a { color: var(--rj-700); }

/* ==========================================================================
   Holder de la aplicacion
   ========================================================================== */

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--ng-950);
  color: var(--ng-200);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.sidebar__logo {
  box-sizing: border-box;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
.sidebar__logo img { width: 100%; height: 100%; display: block; }

.sidebar__name {
  font-family: var(--f-display);
  font-weight: 700; font-size: var(--t-md);
  color: var(--blanco);
  letter-spacing: -.01em;
}
.sidebar__sub {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ng-400); font-weight: 600;
}

.sidebar__nav { padding: var(--s-3); overflow-y: auto; flex: 1; }

.nav-group-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ng-500);
  padding: var(--s-4) var(--s-3) var(--s-2);
  font-weight: 700;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  color: var(--ng-300);
  text-decoration: none;
  font-size: var(--t-base);
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 2px;
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255, 255, 255, .06); color: var(--blanco); }
.nav-item.is-active {
  background: var(--rj-600);
  color: var(--blanco);
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(196, 18, 38, .35);
}
.nav-item__icon { width: 18px; height: 18px; flex: 0 0 18px; }

.sidebar__footer {
  padding: var(--s-4);
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: var(--t-xs);
  color: var(--ng-500);
}

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

.topbar {
  height: var(--header-h);
  background: var(--c-glass);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0 var(--s-6);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar__title { font-family: var(--f-display); font-size: var(--t-md); font-weight: 700; }
.topbar__spacer { flex: 1; }

.content { padding: var(--s-6); flex: 1; }

.page-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.page-head__text { flex: 1; min-width: 220px; }
.page-head__desc { color: var(--c-text-muted); font-size: var(--t-base); margin-top: var(--s-2); }
.page-head__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ==========================================================================
   Tarjeta
   ========================================================================== */

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.card__head {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.card__title { font-family: var(--f-display); font-size: var(--t-md); font-weight: 700; }
/* Lo que explica el titulo, en la misma linea cuando cabe. */
.card__sub { font-size: var(--t-xs); color: var(--c-text-faint); }
.card__body { padding: var(--s-5); }
.card__body--flush { padding: 0; }

/* ==========================================================================
   Indicadores
   ========================================================================== */

.stats { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); margin-bottom: var(--s-5); }

.stat {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--sh-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
}
.stat__icon {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--rj-50);
  color: var(--rj-700);
}
.stat__icon svg { width: 20px; height: 20px; }
.stat__icon--success { background: var(--c-success-soft); color: var(--c-success); }
.stat__icon--danger  { background: var(--c-danger-soft);  color: var(--c-danger); }
.stat__icon--warning { background: var(--c-warning-soft); color: var(--c-warning); }
.stat__icon--info    { background: var(--rj-50);          color: var(--rj-700); }
.stat__label { font-size: var(--t-sm); color: var(--c-text-muted); font-weight: 500; }
.stat__value {
  font-family: var(--f-display);
  font-size: var(--t-xl); font-weight: 800;
  letter-spacing: -.03em;
  margin-top: var(--s-1);
  font-variant-numeric: tabular-nums;
}
.stat__hint { font-size: var(--t-xs); color: var(--c-text-faint); margin-top: var(--s-1); }

/* ==========================================================================
   Botones
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 38px;
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: var(--rj-600);
  color: var(--blanco);
  font-size: var(--t-base);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s, box-shadow .15s, transform .08s;
  box-shadow: 0 1px 2px rgba(20, 20, 22, .12);
}
.btn:hover { background: var(--rj-700); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }

.btn--outline { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border-strong); box-shadow: none; }
.btn--outline:hover { background: var(--c-surface-2); border-color: var(--c-border-strong); }
.btn--ghost { background: transparent; color: var(--c-text-muted); box-shadow: none; }
.btn--ghost:hover { background: var(--ng-100); color: var(--c-text); }
.btn--danger { background: var(--c-danger); color: var(--c-sobre-danger); }
.btn--danger:hover { background: var(--c-danger-hover); }
.btn--sm { height: 32px; padding: 0 var(--s-3); font-size: var(--t-sm); }
.btn--icon { width: 34px; height: 34px; padding: 0; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ==========================================================================
   Formularios
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
.field__label { font-size: var(--t-sm); font-weight: 600; color: var(--c-text); }
.field__hint { font-size: var(--t-xs); color: var(--c-text-muted); line-height: 1.5; }
.field__error { font-size: var(--t-xs); color: var(--c-danger); font-weight: 500; }

.input, .select, .textarea {
  height: 38px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  font-size: var(--t-base);
  font-family: inherit;
  color: var(--c-text);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; min-height: 78px; padding: var(--s-2) var(--s-3); resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--rj-500);
  box-shadow: 0 0 0 3px var(--rj-100);
}
.input.is-invalid, .select.is-invalid { border-color: var(--c-danger); }

/* --------------------------------------------------------------------------
   El zoom que nadie pidio

   En el telefono, tocar un campo de menos de 16px hace que iOS acerque la
   pagina de golpe y la deje torcida: hay que alejarla a mano para seguir.
   No es un ajuste del usuario, es el navegador tratando de ayudar. Con 16px
   deja de pasar.

   touch-action: manipulation quita el zoom del doble toque, que es el otro
   que molesta —se dispara al pulsar rapido dos veces un boton— sin quitar
   el de pellizcar, que es el que necesita quien no ve bien de cerca.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .input, .select, .textarea { font-size: 16px; }
}
button, a, .btn, .input, .select, .textarea, label, [role="button"] {
  touch-action: manipulation;
}
/* El rebote al llegar al final: en una app instalada se nota como un fallo. */
body { overscroll-behavior-y: none; }

/* Un precio dentro de una tabla: mas bajo y estrecho que un campo de
   formulario, alineado a la derecha como el resto de la columna numerica. */
.input--precio {
  height: 32px;
  width: 92px;
  min-width: 92px;
  padding: 0 var(--s-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.input::placeholder { color: var(--c-text-faint); }

.form-grid { display: grid; gap: 0 var(--s-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.toolbar { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--s-4); }

/* Filtro de periodo: un solo mando, sin partirse en varias lineas. */
.periodo { display: flex; gap: var(--s-2); align-items: center; flex-wrap: nowrap; }
.periodo .input, .periodo .select { min-width: 0; }
.periodo .btn--icon { flex: 0 0 34px; }
@media (max-width: 560px) { .periodo { flex-wrap: wrap; } }

.toolbar__search { position: relative; flex: 1; min-width: 200px; max-width: 380px; }
.toolbar__search .input { padding-left: 36px; }
.toolbar__search svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--c-text-faint); pointer-events: none;
}

/* ==========================================================================
   Tabla
   ========================================================================== */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--c-text-muted);
  font-weight: 700;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-2);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr.is-clickable { cursor: pointer; }
.table tbody tr.is-clickable:hover { background: var(--rj-50); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .is-muted { color: var(--c-text-muted); }
.table th.num { text-align: right; }
.table tr.is-void td { color: var(--c-text-faint); }
.table tr.is-void td .cell-strong { text-decoration: line-through; }

.cell-strong { font-weight: 600; }
.cell-sub { font-size: var(--t-xs); color: var(--c-text-muted); }

/* El precio normal de un producto en promocion, tachado. Dentro del sistema;
   la tienda tiene el suyo (.cat-card__antes), que va con los colores fijos
   del escaparate y no con los del tema. */
.precio-antes {
  color: var(--c-text-muted);
  text-decoration: line-through;
  font-weight: 400;
}

/* ==========================================================================
   Insignia
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 3px var(--s-2);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  background: var(--ng-100);
  color: var(--ng-600);
  border: 1px solid var(--c-border);
  white-space: nowrap;
}
.badge--success { background: var(--c-success-soft); color: var(--c-success); border-color: #bfe6d1; }
.badge--danger  { background: var(--c-danger-soft);  color: var(--c-danger);  border-color: #f6c9c9; }
.badge--warning { background: var(--c-warning-soft); color: var(--c-warning); border-color: #f2dcae; }
.badge--info    { background: var(--rj-50);          color: var(--rj-800);    border-color: var(--rj-200); }
.badge--primary { background: var(--rj-600);         color: var(--blanco);    border-color: var(--rj-600); }

/* ==========================================================================
   Estado vacio
   ========================================================================== */

.empty { padding: var(--s-12) var(--s-6); text-align: center; color: var(--c-text-muted); }
.empty svg { width: 40px; height: 40px; color: var(--c-text-faint); margin-bottom: var(--s-3); }
.empty__title { font-family: var(--f-display); font-weight: 700; color: var(--c-text); margin-bottom: var(--s-1); }

/* ==========================================================================
   Dialogo
   ========================================================================== */

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 10, 11, .55);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--s-8) var(--s-4);
  z-index: 100;
  overflow-y: auto;
}
.modal {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  width: 100%;
  max-width: 560px;
  margin: auto;
  overflow: hidden;
}
.modal--wide { max-width: 880px; }
.modal__head {
  padding: var(--s-5);
  border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center; gap: var(--s-3);
}
.modal__title { font-family: var(--f-display); font-size: var(--t-md); font-weight: 700; flex: 1; }
.modal__body { padding: var(--s-5); }
.modal__foot {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--c-border);
  display: flex; justify-content: flex-end; gap: var(--s-2);
  /* Los botones no se encogen y el dialogo recorta lo que se sale: con tres
     botones en un telefono se perdia el de la izquierda sin dejar rastro. */
  flex-wrap: wrap;
  background: var(--c-surface-2);
}

/* ==========================================================================
   Aviso flotante
   ========================================================================== */

.toasts {
  position: fixed; bottom: var(--s-6); right: var(--s-6); z-index: 200;
  display: flex; flex-direction: column; gap: var(--s-2);
}
.toast {
  background: var(--ng-900);
  color: var(--blanco);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  font-size: var(--t-base);
  font-weight: 500;
  max-width: 340px;
}
.toast--success { background: var(--c-success); }
.toast--danger { background: var(--c-danger); }
/* El aviso ya se pedia desde el codigo -"se perdio el precio que escribiste",
   "faltan costos"- pero sin estilo salia igual que una nota cualquiera. En
   oscuro el ambar es claro, asi que ahi el texto va negro o no se lee. */
.toast--warning { background: var(--c-warning); color: var(--blanco); }
:root[data-tema="oscuro"] .toast--warning { color: var(--ng-900); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .toast--warning { color: var(--ng-900); }
}

/* ==========================================================================
   Utilidades
   ========================================================================== */

.row { display: flex; gap: var(--s-3); align-items: center; }
.row > svg { flex: none; }
.row--between { justify-content: space-between; }
.grid-2 { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.muted { color: var(--c-text-muted); }
.faint { color: var(--c-text-faint); }
.num { font-variant-numeric: tabular-nums; }
.pos { color: var(--c-success); font-weight: 700; }
.neg { color: var(--c-danger); font-weight: 700; }
.nowrap { white-space: nowrap; }
.mt-4 { margin-top: var(--s-4); }
.mb-4 { margin-bottom: var(--s-4); }
.text-sm { font-size: var(--t-sm); }
.text-xs { font-size: var(--t-xs); }
.hide { display: none; }

/* ==========================================================================
   Graficas simples, sin librerias
   ========================================================================== */

.bars { display: flex; flex-direction: column; gap: var(--s-3); }
.bar-row { display: grid; grid-template-columns: 1fr 76px; gap: var(--s-3); align-items: center; }
.bar-label { font-size: var(--t-sm); font-weight: 500; }
.bar-track {
  height: 9px; background: var(--ng-100); border-radius: var(--r-full);
  overflow: hidden; margin-top: var(--s-1); border: 1px solid var(--c-border);
}
.bar-fill {
  height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--rj-500), var(--rj-700));
}
.bar-value { text-align: right; font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums; }

.col-chart { display: flex; align-items: flex-end; gap: var(--s-2); height: 184px; padding-top: var(--s-4); }
.col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--s-2); height: 100%; }
.col__bar {
  width: 100%; border-radius: var(--r-sm) var(--r-sm) 0 0; min-height: 3px;
  background: linear-gradient(180deg, var(--rj-500), var(--rj-800));
}
.col__label { font-size: var(--t-xs); color: var(--c-text-muted); white-space: nowrap; }

/* ==========================================================================
   Catalogo
   ========================================================================== */

.cat-grid { display: grid; gap: var(--s-5) var(--s-4); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* En un telefono caben dos por fila: con una sola, ver el catalogo entero
   son noventa pantallazos. */
@media (max-width: 620px) {
  .cat-grid { gap: var(--s-4) var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-card__title { font-size: var(--t-xs); }
}

/* La tarjeta no se dibuja: la foto se apoya en la pagina y debajo van el
   nombre y el precio. Sin marco ni sombra, lo que se mira es el producto.
   Es como lo hacen las tiendas que el cliente ya conoce. */
.cat-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.cat-card__img {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  background: var(--c-surface);
  display: grid; place-items: center; overflow: hidden;
  transition: box-shadow .15s;
}
.cat-card:hover .cat-card__img { box-shadow: var(--sh-md); }

/* Las existencias, como pegatina sobre la foto. */
.cat-card__stock {
  position: absolute;
  top: var(--s-2); right: var(--s-2);
  z-index: 1;
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
  background: rgba(10, 10, 11, .72);
  color: var(--blanco);
  font-size: var(--t-xs);
  font-weight: 600;
}
.cat-card__stock--no { background: var(--c-danger); }

/* Compartir, en la esquina contraria a las existencias para que no se
   pisen. Sobre un circulo claro y no suelto encima de la foto: una foto
   oscura se tragaria el icono. */
.cat-card__share {
  position: absolute;
  top: var(--s-2); left: var(--s-2);
  z-index: 1;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  padding: 0;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #b01020;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(18, 18, 20, .22);
  transition: background .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.cat-card__share svg { width: 17px; height: 17px; }
.cat-card__share:hover { background: #fff; transform: scale(1.06); }

/* El precio y el "+" en la misma linea. */
.cat-card__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: 2px; }

.cat-mas {
  flex: 0 0 34px;
  width: 34px; height: 34px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit; font-size: var(--t-md); font-weight: 700; line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.cat-mas:hover { border-color: var(--c-primary); color: var(--c-primary); }
.cat-mas.is-puesto {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--blanco);
  font-variant-numeric: tabular-nums;
}
/* --- El tablero del resumen ----------------------------------------------

   La cifra del periodo a un lado, grande, y las otras tres al otro. No es
   decoracion: en una fila de cuatro tarjetas iguales todas pesan lo mismo,
   y lo que se busca al abrir el resumen es una sola.
   ------------------------------------------------------------------------ */

.tablero { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s-4); }
.tablero__lado { display: grid; gap: var(--s-4); }

.tablero__hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-6);
  border: 0;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--rj-600), var(--rj-800));
  color: var(--blanco);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--sh-md);
  transition: transform .12s, box-shadow .15s;
}
.tablero__hero:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }

.tablero__label { font-size: var(--t-sm); opacity: .85; }
.tablero__cifra {
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.tablero__pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-2); }
.tablero__antes { font-size: var(--t-sm); opacity: .8; }

/* La flecha con el porcentaje. Sobre el degradado va en blanco translucido
   fijo, porque el degradado no se invierte en modo oscuro. */
.tend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tend svg { width: 13px; height: 13px; }
.tablero__hero .tend { background: rgba(255, 255, 255, .22); color: var(--blanco); }
.tend--bien { background: var(--c-success-soft); color: var(--c-success); }
.tend--mal { background: var(--c-danger-soft); color: var(--c-danger); }

.mini {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.mini:hover { border-color: var(--c-border-strong); box-shadow: var(--sh-sm); }

.mini__icono {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.mini__icono svg { width: 19px; height: 19px; }
.mini__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mini__label { font-size: var(--t-xs); color: var(--c-text-muted); }
.mini__cifra {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--f-display); font-size: var(--t-md); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mini__pie { font-size: var(--t-xs); color: var(--c-text-muted); }

/* En un telefono no caben dos columnas: la cifra grande arriba y las tres
   debajo, en fila de una. */
@media (max-width: 900px) {
  .tablero { grid-template-columns: 1fr; }
  .tablero__cifra { font-size: 34px; }
}

/* --- El escaparate: la tienda que ve el cliente ---------------------------

   Es oscuro SIEMPRE, no sigue el tema claro/oscuro de la aplicacion. Una
   tienda de electronica no se lee como una hoja blanca: el fondo se va
   atras y las fotos de los productos, que casi todas vienen sobre blanco,
   saltan encima.

   Sus colores son fijos a proposito: el escaparate no se invierte, asi que
   usar tokens del tema lo romperia en cuanto alguien cambiara a claro.
   ------------------------------------------------------------------------ */

/* La barra de modulos de Credinova es hermana del escaparate, no hija: va
   fija al borde de la ventana y colgarla de dentro la habria metido en el
   desplazamiento. Por eso pide aqui los mismos colores, o los buscaria en
   un ambito donde no estan definidos y saldria toda del mismo gris. */
.escaparate, .credi-tabs {
  /* Blanco y gris de fondo, azul en varios tonos para lo que se pulsa,
     negro azulado para el texto, y el amarillo reservado a las ofertas: si
     se usara en mas sitios dejaria de significar "esto esta rebajado".

     Aqui SOLO van los colores. La forma del escaparate -su margen, su
     padding, su fondo- va en la regla de abajo, que es suya y nada mas:
     una barra fija a la que se le pegara un margen negativo se saldria de
     la ventana por el borde de abajo. */
  --e-fondo: #f6f6f7;        /* gris muy claro: la pagina */
  --e-panel: #ffffff;        /* blanco: tarjetas y barras */
  --e-panel-2: #eeeef1;      /* gris claro: campos y pastillas */
  --e-borde: #dcdce0;
  --e-texto: #121214;        /* negro azulado */
  --e-apagado: #5f5f6a;      /* gris azulado para lo secundario */
  --e-vivo: #b01020;         /* azul principal */
  --e-vivo-suave: rgba(176, 16, 32, .09);
  --e-marino: #17171a;       /* azul casi negro: la portada */
  --e-oferta: #f7b500;       /* amarillo */
  --e-oferta-txt: #3a2a00;   /* lo que se escribe encima del amarillo */

  /* Los azules del diseño B. El marino solo no basta: una cabecera oscura
     necesita un azul claro para lo secundario -el gris de siempre se
     apaga demasiado sobre fondo oscuro- y dos tonos mas para el degradado. */
  --e-marino-2: #3d040c;
  --e-marino-3: #6d121d;     /* el final del degradado y las pastillas */
  --e-sobre-marino: #f7c2c6; /* texto secundario encima del marino */
  --e-apagado-marino: #40404a;
  --e-azul-pista: #fbdfe1;   /* barras de progreso sin rellenar */
  --e-azul-lavado: #fdf2f3;  /* fondo de lo destacado en claro */
  --e-azul-medio: #f09aa1;   /* bordes punteados */
}

.escaparate {
  position: relative;
  margin: calc(var(--s-4) * -1);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--e-fondo);
  color: var(--e-texto);
}

/* Dos columnas: las categorias quietas a un lado y la tienda al otro. */
.escaparate__cuerpo { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.escaparate__main { min-width: 0; }

.escaparate__lado { position: sticky; top: var(--s-4); }
.lado__titulo {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--e-apagado);
  padding: 0 var(--s-3) var(--s-3);
}
.lado__lista { display: flex; flex-direction: column; gap: 2px; }
.lado__cat {
  display: block;
  padding: var(--s-2) var(--s-3);
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--e-texto);
  font: inherit; font-size: var(--t-sm); text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.lado__cat:hover { background: var(--e-panel-2); }
.lado__cat.is-active { background: var(--e-vivo); color: #ffffff; font-weight: 700; }

/* "Ofertas" en la columna: con su punto amarillo y el numero al lado, para
   que se distinga de las categorias sin gritar. */
.lado__cat--oferta { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; }
.lado__cat--oferta::before {
  content: ""; width: 7px; height: 7px; flex: 0 0 7px;
  border-radius: var(--r-full); background: var(--e-oferta);
}
.lado__n {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: var(--e-oferta);
  color: var(--e-oferta-txt);
  font-size: var(--t-xs); font-weight: 700;
}
.lado__cat--oferta.is-active .lado__n { background: #ffffff; color: var(--e-vivo); }

/* Columna o pastillas, nunca las dos. Lo decide UNA sola consulta: con dos
   (una de max-width y otra de min-width) hay anchos entre medias -el zoom
   del navegador los deja fraccionarios- en los que no se cumple ninguna y
   se ven las dos a la vez. Asi que en escritorio no hay pastillas, y en
   movil, donde la columna no cabe, vuelven. */
.escaparate .cat-cats { display: none; }

@media (max-width: 900px) {
  .escaparate__cuerpo { grid-template-columns: 1fr; }
  .escaparate__lado { display: none; }
  .escaparate .cat-cats { display: flex; }
}

/* Las tarjetas de dentro dejan de ser blancas. */
.escaparate .card {
  background: var(--e-panel);
  border-color: var(--e-borde);
  color: var(--e-texto);
}
.escaparate .card__title { color: var(--e-texto); }
.escaparate .muted,
.escaparate .faint,
.escaparate .cell-sub,
.escaparate .text-xs { color: var(--e-apagado); }

/* La barra pegajosa necesita el mismo fondo o se transparenta al bajar. */
.escaparate .cat-barra {
  background: var(--e-fondo);
  border-bottom-color: var(--e-borde);
}
.escaparate .toolbar__search .input {
  background: var(--e-panel-2);
  border-color: var(--e-borde);
  color: var(--e-texto);
}
.escaparate .toolbar__search svg { color: var(--e-apagado); }

.escaparate .cat-cat {
  background: var(--e-panel-2);
  border-color: var(--e-borde);
  color: var(--e-texto);
}
.escaparate .cat-cat:hover { border-color: var(--e-vivo); color: var(--e-vivo); background: var(--e-vivo-suave); }
.escaparate .cat-cat.is-active {
  background: var(--e-vivo);
  border-color: var(--e-vivo);
  color: #ffffff;
}
.escaparate .cat-cat--oferta { border-color: var(--e-oferta); color: #8a6300; font-weight: 700; }
.escaparate .cat-cat--oferta:hover { background: rgba(247, 181, 0, .14); border-color: var(--e-oferta); color: #6d4e00; }
.escaparate .cat-cat--oferta.is-active { background: var(--e-oferta); border-color: var(--e-oferta); color: var(--e-oferta-txt); }

/* Sobre el gris claro de la pagina, la tarjeta es una ficha blanca entera,
   no una foto suelta: es lo que la hace parecer un producto de tienda y no
   una imagen pegada en un documento. */
.escaparate .cat-card {
  background: var(--e-panel);
  border: 1px solid var(--e-borde);
  border-radius: var(--r-md);
  padding: var(--s-2);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.escaparate .cat-card:hover {
  border-color: var(--e-vivo);
  box-shadow: 0 10px 26px -14px rgba(23, 23, 26, .45);
  transform: translateY(-2px);
}
.escaparate .cat-card__img { background: #ffffff; border: 0; }
/* Con la letra mas grande la tarjeta necesita algo mas de ancho, o el
   titulo se parte en dos lineas cortadas en mitad de una palabra. */
.escaparate .cat-grid { grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: var(--s-5) var(--s-4); }
@media (max-width: 620px) {
  .escaparate .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
}

/* El titulo, a dos lineas como mucho.

   Con titulos de "ADAPTADOR MAGIC USB 3.0 A LAN RJ45 GIGABIT 1000MBPS PARA
   CABLE CAT5/CAT6" una tarjeta se comia cinco lineas y la de al lado dos:
   los precios de una misma fila quedaban a alturas distintas y la fila se
   veia dentada. El nombre completo sigue estando al abrir el producto. */
/* La escala de la tienda es mas grande que la del sistema: aqui se mira de
   lejos y desde el movil, no se trabaja. El titulo con la tipografia de
   titulos y el precio bien grande, que es lo que se busca con la vista. */
.escaparate .cat-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--f-display);
  font-size: var(--t-base);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.escaparate .cat-card__price { font-size: var(--t-xl); letter-spacing: -.02em; }
.escaparate .cat-card__antes { font-size: var(--t-base); }
.escaparate .cat-card__neto { font-size: var(--t-sm); }
.escaparate .cat-card__stock { font-size: var(--t-xs); padding: 3px var(--s-2); }
.escaparate .cat-card__sello { font-size: var(--t-xs); padding: 3px var(--s-2); letter-spacing: .06em; }
.escaparate .seccion__t { font-size: var(--t-xl); }
.escaparate .cat-cat { font-size: var(--t-base); padding: var(--s-2) var(--s-4); }
.escaparate .lado__cat { font-size: var(--t-base); padding: var(--s-3); }
.escaparate .lado__titulo { font-size: var(--t-sm); }
.escaparate .cat-barra__cuenta { font-size: var(--t-base); font-weight: 600; }
.escaparate .toolbar__search .input { height: 46px; font-size: var(--t-base); }
.escaparate .portada__nombre { font-size: 30px; letter-spacing: -.02em; }
.escaparate .portada__lema { font-size: var(--t-md); }
.escaparate .promo { font-size: var(--t-base); }

@media (max-width: 620px) {
  .escaparate .cat-card__title { font-size: var(--t-sm); }
  .escaparate .cat-card__price { font-size: var(--t-md); }
  .escaparate .seccion__t { font-size: var(--t-lg); }
  .escaparate .portada__nombre { font-size: 24px; }
}
/* El precio abajo del todo. La rejilla ya estira todas las tarjetas de una
   fila a la misma altura, asi que con esto los precios quedan en linea sin
   tener que reservar hueco a ojo. */
.escaparate .cat-card__fila { margin-top: auto; padding-top: var(--s-1); }

/* La de oferta se marca con una banda amarilla arriba, dentro de la propia
   ficha: ni recuadro aparte ni color de fondo, que taparia la foto. */
.escaparate .cat-card--oferta { border-color: #f0d79a; }
.escaparate .cat-card--oferta::before {
  content: "";
  display: block;
  height: 3px;
  margin: calc(var(--s-2) * -1) calc(var(--s-2) * -1) var(--s-2);
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--e-oferta);
}
.escaparate .cat-card__title { color: var(--e-texto); }
.escaparate .cat-card__price { color: var(--e-texto); }
.escaparate .cat-card__antes { color: var(--e-apagado); }
.escaparate .cat-card__neto { color: var(--e-apagado); }

.escaparate .cat-mas {
  background: var(--e-panel-2);
  border-color: var(--e-borde);
  color: var(--e-texto);
}
.escaparate .cat-mas:hover { border-color: var(--e-vivo); color: var(--e-vivo); }
.escaparate .cat-mas.is-puesto { background: var(--e-vivo); border-color: var(--e-vivo); color: #ffffff; }

.escaparate .cat-seccion__n { background: var(--e-panel-2); color: var(--e-apagado); }

/* ------------------------------------------------------------------------
   Secciones de la tienda

   Antes cada seccion era una "card": un recuadro con cabecera y cuerpo
   alrededor de cada rejilla. Con diecisiete categorias eso son diecisiete
   marcos anidados, que es lo que hacia que no pareciera una tienda sino un
   panel de administracion. Ahora el titulo se apoya en la pagina y las
   fotos van sueltas debajo.
   ------------------------------------------------------------------------ */

.seccion { margin-bottom: var(--s-6); }
.seccion__head {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--e-borde);
}
.seccion__t {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--t-lg); font-weight: 800;
  color: var(--e-texto);
}
.seccion__t svg { width: 18px; height: 18px; color: var(--e-oferta); }
.seccion__n {
  padding: 1px 8px;
  border-radius: var(--r-full);
  background: var(--e-panel-2);
  color: var(--e-apagado);
  font-size: var(--t-xs); font-weight: 700;
}
.seccion__mas {
  border: 1px solid var(--e-borde);
  border-radius: var(--r-full);
  background: var(--e-panel);
  color: var(--e-vivo);
  padding: var(--s-1) var(--s-3);
  font: inherit; font-size: var(--t-sm); font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.seccion__mas:hover { background: var(--e-vivo-suave); border-color: var(--e-vivo); }

/* La fila de ofertas se separa del resto con una banda amarilla a la
   izquierda, que es mas barato de leer que otro recuadro. */
.seccion--ofertas .seccion__head { border-bottom-color: var(--e-oferta); }
.seccion--ofertas .seccion__n { background: var(--e-oferta); color: var(--e-oferta-txt); }

/* ------------------------------------------------------------------------
   Carrusel

   Una sola fila que se desplaza a lo ancho. El dedo y la rueda los mueve el
   navegador: basta overflow-x. Las flechas son para el raton, que no tiene
   con que desplazar en horizontal.

   El scroll-snap hace que cada arrastre acabe con una tarjeta entera a la
   vista, no cortada por la mitad.
   ------------------------------------------------------------------------ */

.carrusel {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* La animacion la pide el JS con behavior:'smooth'. Ponerla tambien aqui
     eran dos fuentes de suavizado sobre el mismo scroll, y entre las dos se
     comian clics seguidos. */
  /* Sitio para la sombra del hover, que si no se corta contra el borde. */
  padding: 4px 4px var(--s-3);
  margin: -4px -4px calc(var(--s-3) * -1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--e-borde) transparent;
  overscroll-behavior-x: contain;
}
.carrusel::-webkit-scrollbar { height: 8px; }
.carrusel::-webkit-scrollbar-track { background: transparent; }
.carrusel::-webkit-scrollbar-thumb { background: var(--e-borde); border-radius: var(--r-full); }
.carrusel::-webkit-scrollbar-thumb:hover { background: var(--e-apagado); }

/* Ancho fijo: dentro de un flex que se desplaza, las tarjetas no deben
   encogerse para caber — se encogerian todas y no habria que desplazar. */
.carrusel > .cat-card {
  flex: 0 0 214px;
  width: 214px;
  scroll-snap-align: start;
}

.carrusel__flechas { display: flex; gap: var(--s-1); }
.carrusel__f {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--e-borde);
  border-radius: var(--r-full);
  background: var(--e-panel);
  color: var(--e-vivo);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
.carrusel__f:hover:not(:disabled) { background: var(--e-vivo); border-color: var(--e-vivo); color: #ffffff; }
.carrusel__f:disabled { opacity: .35; cursor: default; }

/* En el movil sobran: ahi se arrastra con el dedo, y dos botones de 30px
   en la cabecera solo quitan sitio al titulo. */
@media (max-width: 620px) {
  .carrusel__flechas { display: none; }
  .carrusel { gap: var(--s-3); }
  .carrusel > .cat-card { flex-basis: 158px; width: 158px; }
}

/* ------------------------------------------------------------------------
   La banda, dentro de la portada

   Va como textura DETRAS del nombre, no como imagen aparte: el degradado
   con los colores que elegiste sigue siendo el fondo, asi que el texto se
   lee igual aunque la imagen no llegue a cargar.

   No lleva carga diferida a proposito: esta arriba del todo, es lo primero
   que se ve y son 19 KB.
   ------------------------------------------------------------------------ */

.portada__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 2000x104 estirado al alto de la portada se va de escala por los lados.
     Centrado, lo que queda a la vista es la parte con los objetos. */
  object-position: center;
  opacity: .5;
  pointer-events: none;
}
.portada__txt { position: relative; z-index: 1; }

/* ------------------------------------------------------------------------
   Credinova

   Misma paleta y misma banda que la tienda de Motor Kart: es el mismo negocio.
   Lo que cambia es que aqui el acento es el amarillo, porque lo que hay que
   leer de un golpe no es el precio sino el plan de pago.
   ------------------------------------------------------------------------ */

/* El reparto por categoria de Flujo de Caja. Cada renglon es un boton: se
   pulsa para filtrar por esa categoria. */
.reparto {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
  padding: var(--s-2) 0;
  border: 0; background: transparent;
  font: inherit; color: var(--c-text);
  cursor: pointer;
  text-align: left;
}
.reparto:hover .reparto__t { color: var(--c-primary); }
.reparto__t { flex: 0 0 34%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reparto__barra { flex: 1; height: 8px; border-radius: var(--r-full); background: var(--c-surface-2); overflow: hidden; }
.reparto__relleno { display: block; height: 100%; border-radius: var(--r-full); background: currentColor; }
.reparto__n { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .reparto__t { flex-basis: 42%; }
}

.credinova__portada { background: linear-gradient(135deg, var(--e-marino), #b01020 70%, #dc3545); }

/* ------------------------------------------------------------------------
   La entrada de Credinova: bienvenida, instalacion y registro
   ------------------------------------------------------------------------ */

.credi-entrada { max-width: 680px; margin: 0 auto; }
.credi-entrada__marca {
  font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  opacity: .85; margin-bottom: var(--s-1);
}
.credi-entrada__resumen {
  margin: var(--s-5) 0;
  color: var(--e-texto);
  font-size: var(--t-md); line-height: 1.6;
}
.credi-entrada__resumen p { margin: 0; }
.credi-entrada__lista { margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.credi-entrada__lista li {
  position: relative;
  padding-left: var(--s-6);
  margin-bottom: var(--s-2);
  font-size: var(--t-base);
  color: var(--e-apagado);
}
/* La palomita va dibujada con bordes y no con un caracter: asi no depende
   de que la fuente del telefono traiga el simbolo. */
.credi-entrada__lista li::before {
  content: "";
  position: absolute; left: 4px; top: 6px;
  width: 6px; height: 11px;
  border: solid var(--e-oferta); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.credi-instalar { border-color: var(--e-vivo); }
.credi-instalar svg { color: var(--e-vivo); width: 22px; height: 22px; flex: 0 0 22px; }

/* --------------------------------------------------------------------------
   Los modulos de Credinova: la barra de abajo

   Fija al borde inferior, donde llega el pulgar sin recolocar el telefono, y
   por encima del area segura para que el gesto de inicio del iPhone no caiga
   justo sobre las pestañas.
   -------------------------------------------------------------------------- */

/* Una pildora oscura flotando sobre el contenido, no una barra pegada al
   borde. Separada de los lados deja ver que la pagina sigue por debajo, y
   el redondeo entero la aleja de la barra del sistema del telefono. */
.credi-tabs {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 40;
  padding: 0 var(--s-4);
  pointer-events: none;          /* los huecos de los lados no bloquean */
}
.credi-tabs__in {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 620px;
  margin: 0 auto;
  height: 58px;
  border-radius: 29px;
  background: var(--e-marino);
  box-shadow: 0 6px 24px rgba(18, 18, 20, .28);
  pointer-events: auto;
}
.credi-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 2px;
  background: none;
  border: 0;
  border-radius: 29px;
  cursor: pointer;
  color: var(--e-sobre-marino);
  font: inherit;
  /* El toque no se queda resaltado en gris al pasar el dedo. */
  -webkit-tap-highlight-color: transparent;
}
.credi-tab__ico { position: relative; display: block; line-height: 0; }
.credi-tab svg { width: 24px; height: 24px; }
/* Con cinco pestañas en 375px cada una tiene 75px: la etiqueta se achica y
   no se parte en dos lineas, que descuadraria la altura de la barra. */
.credi-tab__t {
  font-size: 10px; font-weight: 500; letter-spacing: 0;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
/* La abierta: icono amarillo y texto blanco en negrita. Dos señales y no
   una, porque a contraluz en la calle el color solo no se distingue. */
.credi-tab.is-active { color: #fff; }
.credi-tab.is-active .credi-tab__t { font-weight: 700; }
.credi-tab.is-active svg { color: var(--e-oferta); }
.credi-tab { position: relative; }

/* La insignia del pedido. */
.credi-tab__n {
  position: absolute;
  top: -5px; left: 13px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--e-oferta);
  color: var(--e-oferta-txt);
  font-size: 10px; font-weight: 800; line-height: 17px;
  text-align: center;
  /* El cerco es del color de la barra, que ahora es oscura. */
  box-shadow: 0 0 0 2px var(--e-marino);
}

/* El hueco para que la barra flotante no tape la ultima fila. */
.tienda .escaparate.credinova { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
/* Y mas hueco cuando ademas hay barra de accion al pagar: son dos barras
   apiladas, y sin esto el ultimo campo del formulario queda debajo. */
.tienda .escaparate.credinova:has(.barra-pago) {
  padding-bottom: calc(166px + env(safe-area-inset-bottom));
}

/* ==========================================================================
   El diseño B de Credinova

   Todo acotado a .credinova: la tienda de contado comparte estas clases
   -.cat-card, .cat-barra, .cat-cat- y no se toca. Dos tiendas, dos caras.
   ========================================================================== */

/* --- Los productos, en filas ---

   Una fila por producto en vez de una rejilla: en una tienda a credito lo
   que se compara es la cuota, y una columna de cifras alineadas se compara
   de un vistazo. Una rejilla obliga a saltar en zigzag. */
.credinova .cat-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.credinova .cat-card {
  display: flex;
  /* La tarjeta de la tienda de contado apila en columna; aqui es una fila. */
  flex-direction: row;
  align-items: center;
  gap: var(--s-3);
  padding: 10px;
  border: 1px solid var(--e-borde);
  border-radius: 16px;
  background: var(--e-panel);
}
.credinova .cat-card__img {
  flex: 0 0 88px;
  width: 88px; height: 88px;
  padding: 0;
  border: 1px solid var(--e-panel-2);
  border-radius: 12px;
  overflow: hidden;
  background: var(--e-panel);
}
.credinova .cat-card__img img { width: 100%; height: 100%; object-fit: contain; }
.credinova .cat-card__body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 0;
}
.credinova .cat-card__title {
  font-size: var(--t-sm); font-weight: 600; line-height: 1.3;
  /* Dos lineas como mucho: un titulo de cinco descuadraria toda la fila. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* La cuota, que es lo que se compara. */
.credinova .cat-card__price {
  font-family: var(--f-display);
  font-size: 20px; font-weight: 800; letter-spacing: -.3px;
  color: var(--e-vivo);
}
.credinova .cat-card__sub { font-size: 11px; color: var(--e-apagado); }
.credinova .cat-card__pie { font-size: 10px; color: var(--e-apagado); }
.credinova .cat-card__acc {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
}
.credinova .cat-mas {
  width: 44px; height: 44px;
  border: 0; border-radius: 12px;
  background: var(--e-vivo);
  color: #fff;
  font-size: 22px; font-weight: 700; line-height: 1;
}
.credinova .cat-mas.is-puesto { background: var(--e-oferta); color: var(--e-oferta-txt); }
/* Compartir deja de ir encima de la foto: en una fila hay sitio al lado. */
.credinova .cat-card__share {
  position: static;
  width: 34px; height: 34px;
  background: var(--e-azul-lavado);
  color: var(--e-vivo);
  box-shadow: none;
}
.credinova .cat-card__share:hover { background: var(--e-azul-pista); transform: none; }

/* --- La cabecera oscura con el buscador dentro --- */
.cabecera-b {
  margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-4);
  padding: var(--s-4) var(--s-4) var(--s-4);
  background: var(--e-marino);
  color: #fff;
}
.cabecera-b__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.cabecera-b__t { font-family: var(--f-display); font-size: 22px; font-weight: 800; }
.cabecera-b__n { font-size: var(--t-sm); color: var(--e-sobre-marino); }
/* El buscador blanco sobre el marino: el contraste lo señala sin flechas. */
.cabecera-b .search { margin: 0; }
.cabecera-b .input {
  height: 46px;
  border: 0; border-radius: 12px;
  background: #fff;
}

/* Las categorias: pastillas. La abierta en amarillo, que es el color que
   esta app reserva para "esto es lo que miras ahora". */
.credinova .cat-cats {
  display: flex; gap: var(--s-2);
  margin-top: var(--s-3);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.credinova .cat-cats::-webkit-scrollbar { display: none; }
.credinova .cat-cat {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 16px;
  border: 0; border-radius: 999px;
  background: var(--e-marino-3);
  color: #fff;
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.credinova .cat-cat.is-active {
  background: var(--e-oferta);
  color: var(--e-oferta-txt);
  font-weight: 700;
}

/* --- El hero de Inicio: marino de borde a borde ---

   Sin el banner de la tienda. Era una foto que no decia nada; aqui arriba
   lo que hace falta es cuanto se paga hoy y cuanto cada quincena. */
.credi-hero {
  margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-4);
  padding: var(--s-4) var(--s-4) var(--s-5);
  background: linear-gradient(170deg, var(--e-marino) 0%, var(--e-marino-2) 55%, var(--e-marino-3) 100%);
  color: #fff;
}
.credi-hero__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-4);
}
.credi-avatar {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: #dc3545; color: #fff;
  font-family: var(--f-display);
  font-size: 14px; font-weight: 800;
  cursor: pointer;
}
.credi-hero__t {
  margin: 0;
  font-family: var(--f-display);
  font-size: 28px; font-weight: 800; line-height: 1.12; letter-spacing: -.6px;
}
.credi-hero__t span { color: var(--e-oferta); }
.credi-hero__p {
  margin: var(--s-2) 0 0;
  font-size: 13px; line-height: 1.45; color: var(--e-sobre-marino);
}

/* El simulador, en blanco sobre el marino para que salte a la vista. */
.credi-sim {
  margin-top: var(--s-4);
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  color: var(--e-texto);
}
.credi-sim__cab { display: flex; justify-content: space-between; align-items: baseline; }
.credi-sim__t { font-family: var(--f-display); font-size: 14px; font-weight: 800; }
.credi-sim__n { font-size: 11px; color: var(--e-apagado); }
.credi-sim__cajas {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px; margin-top: 12px;
}
.credi-sim__c {
  padding: 8px 9px;
  border-radius: 10px;
  background: var(--e-fondo);
  display: flex; flex-direction: column; gap: 2px;
}
.credi-sim__c.is-hoy { background: var(--e-azul-lavado); }
.credi-sim__c.is-hoy .credi-sim__v { color: var(--e-vivo); }
.credi-sim__e { font-size: 10px; font-weight: 500; color: var(--e-apagado); }
.credi-sim__v { font-family: var(--f-display); font-size: 16px; font-weight: 800; }

/* La franja de confianza, al pie de Inicio. */
.credi-franja {
  display: flex; align-items: center; gap: 10px;
  margin-top: var(--s-4);
  padding: 10px 14px;
  border: 1px solid var(--e-borde); border-radius: 14px;
  background: var(--e-panel);
  font-size: 12px; line-height: 1.4;
}
.credi-franja svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--e-vivo); }

/* --------------------------------------------------------------------------
   Mi credito: el anillo, la proxima cuota y el calendario
   -------------------------------------------------------------------------- */

.credi-cab {
  margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) 0;
  padding: var(--s-4) var(--s-4) 30px;
  background: linear-gradient(170deg, var(--e-marino) 0%, var(--e-marino-2) 70%, var(--e-marino-3) 100%);
  color: #fff;
}
.credi-cab__top { display: flex; align-items: center; justify-content: space-between; }
.credi-cab__e { font-size: 11px; color: var(--e-sobre-marino); }
.credi-cab__n { font-family: var(--f-display); font-size: 20px; font-weight: 800; }
.credi-cab__cuerpo { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.credi-cab__cifras { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.credi-cab__g {
  font-family: var(--f-display); font-size: 26px; font-weight: 800; letter-spacing: -.5px;
}
.credi-cab__m { font-family: var(--f-display); font-size: 15px; font-weight: 700; }
.credi-cab__nota { margin-top: 12px; font-size: 11px; color: var(--e-sobre-marino); }

.credi-donut { position: relative; width: 128px; height: 128px; flex: none; }
.credi-donut svg { width: 128px; height: 128px; }
.credi-donut__txt {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.credi-donut__n { font-family: var(--f-display); font-size: 26px; font-weight: 800; line-height: 1; }
.credi-donut__e { font-size: 11px; color: var(--e-sobre-marino); }

.credi-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.credi-chip svg { width: 12px; height: 12px; }
.credi-chip--ok { background: #10291d; color: #4ade80; }
.credi-chip--mal { background: #35121a; color: #fca5a5; }

/* La proxima cuota: monta sobre la cabecera, para que se lea como una
   tarjeta que sale de ella y no como otra seccion mas. */
.credi-prox {
  position: relative;
  margin-top: -14px;
  padding: 14px;
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--e-borde); border-radius: 16px;
  background: var(--e-panel);
  box-shadow: var(--sh-sm);
}
.credi-prox__f {
  flex: 0 0 44px;
  width: 44px; height: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 10px;
  background: #fdf2dc;
}
.credi-prox__f span { font-size: 10px; font-weight: 700; color: #7a4e00; }
.credi-prox__f strong {
  font-family: var(--f-display); font-size: 18px; font-weight: 800;
  color: var(--e-oferta-txt); line-height: 1;
}
.credi-prox.is-vencida .credi-prox__f { background: #fde2e2; }
.credi-prox.is-vencida .credi-prox__f span { color: #8a1c1c; }
.credi-prox.is-vencida .credi-prox__f strong { color: #5c1010; }
.credi-prox__q { flex: 1; min-width: 0; }
.credi-prox__t { font-family: var(--f-display); font-size: 14px; font-weight: 800; }
.credi-prox__v { font-size: 12px; color: var(--e-apagado); }
.credi-prox.is-vencida .credi-prox__v { color: var(--c-danger); font-weight: 600; }
.credi-prox__m { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.credi-prox__n { font-family: var(--f-display); font-size: 18px; font-weight: 800; }
.credi-prox__m .btn { height: 36px; padding: 0 14px; border-radius: 10px; font-weight: 700; }

/* El calendario: una caja por renglon, desplazable si son muchas. */
.credi-cal {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(104px, 1fr);
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.credi-cal::-webkit-scrollbar { display: none; }
.credi-cal__c {
  padding: 10px;
  border: 1px solid var(--e-borde); border-radius: 12px;
  background: var(--e-panel);
  display: flex; flex-direction: column; gap: 3px;
}
.credi-cal__c.is-prox { border: 2px solid var(--e-vivo); background: var(--e-azul-lavado); padding: 9px; }
.credi-cal__c.is-vencida { border-color: var(--c-danger); }
.credi-cal__e { font-size: 11px; color: var(--e-apagado); }
.credi-cal__n { font-family: var(--f-display); font-size: 15px; font-weight: 800; }
.credi-cal__s {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--e-apagado);
}
.credi-cal__s svg { width: 11px; height: 11px; color: #0f7a4d; }
.credi-cal__c.is-prox .credi-cal__s { color: var(--e-vivo); font-weight: 700; }
.credi-cal__c.is-vencida .credi-cal__s { color: var(--c-danger); font-weight: 700; }

/* --- Los metodos de pago, al estilo B --- */
.credinova .metodo { border-width: 1px; border-radius: 12px; min-height: 48px; }
.credinova .metodo.is-active {
  border-width: 2px;
  background: var(--e-azul-lavado);
}

/* La zona de subir el comprobante: punteada, como un sitio donde soltar
   algo y no como un campo mas que rellenar. */
.credinova input[type="file"].input {
  height: auto;
  min-height: 64px;
  padding: var(--s-4);
  border: 2px dashed var(--e-azul-medio);
  border-radius: 14px;
  background: var(--e-panel);
  color: var(--e-vivo);
  font-weight: 600;
}

/* --- La barra de accion fija al pagar --- */
.barra-pago {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(82px + env(safe-area-inset-bottom));
  z-index: 35;
  display: flex; align-items: center; gap: var(--s-4);
  max-width: 620px;
  margin: 0 auto;
  padding: 10px var(--s-4) 12px;
  background: var(--e-panel);
  border-top: 1px solid var(--e-borde);
  box-shadow: 0 -4px 18px rgba(18, 18, 20, .1);
}
.barra-pago__q { display: flex; flex-direction: column; flex: 0 0 auto; }
.barra-pago__e { font-size: 11px; color: var(--e-apagado); }
.barra-pago__n { font-family: var(--f-display); font-size: 20px; font-weight: 800; }
.barra-pago .btn { flex: 1; height: 48px; border-radius: 12px; font-weight: 700; }

/* --- El plan, como linea de tiempo ---

   Los puntos unidos por una linea dicen que es una secuencia con fechas, no
   tres filas sueltas de una tabla. */
.credinova .renglon { position: relative; padding-left: 28px; border-bottom: 0; }
.credinova .renglon::before {
  content: "";
  position: absolute;
  left: 3px; top: 18px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--e-azul-medio);
  box-sizing: content-box;
}
.credinova .renglon.is-listo::before { background: var(--e-vivo); border-color: var(--e-azul-pista); }
/* La linea que los une: se corta en el ultimo. */
.credinova .renglon::after {
  content: "";
  position: absolute;
  left: 12px; top: 38px; bottom: -6px;
  width: 2px;
  background: var(--e-borde);
}
.credinova .renglon:last-child::after { display: none; }

/* El punto en el mapa, dentro del registro. */
.credi-mapa {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--e-borde);
  border-radius: 14px;
  background: var(--e-panel-2);
}
.credi-mapa__cab { margin-bottom: var(--s-3); }
.credi-mapa__estado { margin-top: var(--s-2); font-size: var(--t-xs); line-height: 1.4; }
.credi-mapa__ok { display: flex; align-items: flex-start; gap: 6px; color: var(--c-success); }
.credi-mapa__ok svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; }
.credi-mapa .field:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   La bienvenida: una portada entera

   Vive fuera de .escaparate a proposito —es marino de borde a borde, no una
   tarjeta sobre el gris— asi que trae sus propios colores.
   -------------------------------------------------------------------------- */

.credi-portada {
  --oro: #f7b500;
  --oro-txt: #3a2a00;
  --claro: #f7c2c6;
  --azul: #dc3545;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  margin: calc(var(--s-4) * -1);
  display: flex;
  flex-direction: column;
  background: linear-gradient(170deg, #17171a 0%, #3d040c 55%, #6d121d 100%);
  color: #fff;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
}
.credi-portada__arriba { padding: 28px 24px 0; }
.credi-logo {
  font-family: var(--f-display);
  font-size: 26px; font-weight: 800; letter-spacing: -.6px;
}
.credi-logo span { color: var(--oro); }
.credi-portada__sub { margin-top: 2px; font-size: 12px; color: var(--claro); }

.credi-portada__centro { padding: 44px 24px 0; }
.credi-titular {
  margin: 0;
  font-family: var(--f-display);
  font-size: 38px; font-weight: 800; line-height: 1.06; letter-spacing: -1px;
}
.credi-titular span { color: var(--oro); }
.credi-portada__p {
  margin: 14px 0 0;
  font-size: 15px; line-height: 1.5; color: var(--claro);
}

.credi-pasos { margin-top: 36px; display: flex; flex-direction: column; gap: 12px; }
.credi-paso { display: flex; align-items: center; gap: 14px; }
.credi-paso__n {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--azul);
  font-family: var(--f-display);
  font-size: 14px; font-weight: 800;
}
.credi-paso__t { font-size: 14px; line-height: 1.35; }

/* El espacio elastico empuja los botones al fondo: en una pantalla alta no
   se quedan flotando a media altura, y en una baja no se salen. */
.credi-portada__centro { flex: 1 0 auto; }
.credi-portada__abajo {
  padding: 24px 24px calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
}
.credi-btn {
  box-sizing: border-box;
  width: 100%;
  border: 0; border-radius: 14px;
  font-family: var(--f-display);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.credi-btn--oro {
  height: 54px;
  background: var(--oro); color: var(--oro-txt);
  font-size: 16px; font-weight: 800;
}
.credi-btn--linea {
  height: 50px;
  background: none;
  border: 2px solid var(--azul);
  color: #fff;
  font-size: 15px; font-weight: 700;
}
.credi-portada__links {
  display: flex; justify-content: center; gap: 18px;
  margin-top: 4px; font-size: 13px;
}
.credi-portada__links a {
  /* 44px de alto aunque el texto mida 16: es un enlace para un pulgar. */
  display: flex; align-items: center; min-height: 44px;
  color: var(--claro); text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Despues de registrarse: mandar los datos
   -------------------------------------------------------------------------- */

.credi-listo { display: flex; align-items: flex-start; gap: var(--s-3); }
.credi-listo svg { color: var(--c-success); width: 28px; height: 28px; flex: 0 0 28px; }
.credi-listo__t { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 800; }
.credi-listo__x { color: var(--e-apagado); font-size: var(--t-sm); margin-top: 2px; }
.credi-envios { margin-top: var(--s-5); }
.credi-envios .is-enviado { opacity: .72; }
.credi-envios__ok { font-weight: 800; }

/* --------------------------------------------------------------------------
   Mi cuenta
   -------------------------------------------------------------------------- */

.credi-cuenta__cab { display: flex; align-items: center; gap: var(--s-3); }
.credi-cuenta__ini {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex: 0 0 48px;
  border-radius: 999px;
  background: var(--e-marino);
  color: #fff;
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 800;
}
.credi-cuenta__n { font-family: var(--f-display); font-size: var(--t-md); font-weight: 700; }
.credi-cuenta__f { padding: var(--s-2) 0; border-bottom: 1px solid var(--e-borde); gap: var(--s-4); }
.credi-cuenta__f:last-of-type { border-bottom: 0; }
/* La direccion es larga y no debe empujar la etiqueta fuera de la tarjeta. */
.credi-cuenta__f strong { text-align: right; min-width: 0; word-break: break-word; }

/* --------------------------------------------------------------------------
   Mis compras
   -------------------------------------------------------------------------- */

.volver {
  display: inline-flex; align-items: center; gap: 4px;
  margin-bottom: var(--s-4);
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2);
  background: none; border: 0; border-radius: var(--r-md);
  color: var(--e-vivo); font: inherit; font-weight: 600; font-size: var(--t-sm);
  cursor: pointer;
}
.volver:hover { background: var(--e-vivo-suave); }
.volver svg { width: 18px; height: 18px; }

.credi-debe { font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 800; }

.credi-compra {
  display: block; width: 100%;
  margin-bottom: var(--s-3);
  padding: var(--s-4);
  text-align: left;
  background: var(--e-panel);
  border: 1px solid var(--e-borde);
  border-radius: var(--r-lg);
  font: inherit; color: inherit; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.credi-compra:hover { border-color: var(--e-vivo); box-shadow: var(--sh-sm); }
.credi-compra__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.credi-compra__f { color: var(--e-apagado); font-size: var(--t-sm); }
.credi-compra__q { margin-top: var(--s-2); font-weight: 600; }
.credi-compra__cifras {
  display: flex; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-2); font-size: var(--t-sm); color: var(--e-apagado);
}
.credi-compra__cifras strong { color: var(--e-texto); }
.credi-compra__cifras .ok { color: var(--c-success); }
.credi-compra__esp { margin-top: var(--s-2); font-size: var(--t-xs); color: var(--e-vivo); }

/* Un renglon del plan: la cuota, cuando vence y el boton de pagarla. */
.renglon {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--e-borde);
}
.renglon:last-child { border-bottom: 0; }
.renglon__t { font-weight: 600; }
.renglon__v { font-size: var(--t-xs); color: var(--e-apagado); }
.renglon__m { display: flex; align-items: center; gap: var(--s-3); }
.renglon__n { font-weight: 700; white-space: nowrap; }
.renglon__ok svg { width: 20px; height: 20px; color: var(--c-success); }
.renglon.is-listo .renglon__t, .renglon.is-listo .renglon__n { color: var(--e-apagado); }
.renglon.is-vencido .renglon__v { color: var(--c-danger); }

/* --------------------------------------------------------------------------
   Pagar: las dos monedas y los datos para transferir
   -------------------------------------------------------------------------- */

/* El precio en divisa es el acuerdo; los bolivares son lo que hay que
   transferir HOY. Por eso el dolar va arriba y en grande, y el bolivar
   debajo: si se invirtiera, el cliente leeria como precio una cifra que
   mañana ya no vale. */
.dinero { margin-top: var(--s-2); }
.dinero__div { font-family: var(--f-display); font-weight: 800; line-height: 1.1; }
.dinero--grande .dinero__div { font-size: var(--t-2xl); }
.dinero__bs { margin-top: 2px; font-size: var(--t-md); font-weight: 700; color: var(--e-vivo); }
.dinero__bs--no { font-size: var(--t-sm); font-weight: 400; color: var(--e-apagado); }

.tasa-nota {
  display: flex; align-items: flex-start; gap: var(--s-2);
  margin-top: var(--s-4);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--e-panel-2);
  font-size: var(--t-xs);
  color: var(--e-apagado);
}
.tasa-nota svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; }

.pagar-via { padding: var(--s-3) 0; border-bottom: 1px solid var(--e-borde); }
.pagar-via:last-child { border-bottom: 0; }
.pagar-via__t {
  display: flex; align-items: center; gap: var(--s-2);
  font-weight: 700; margin-bottom: var(--s-2);
}
.pagar-via__t svg { width: 18px; height: 18px; color: var(--e-vivo); }
.pagar-via__f {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 2px 0;
  font-size: var(--t-sm);
}
/* El dato ocupa lo que sobra y se parte si hace falta: una billetera USDT
   mide 42 caracteres y no cabe en un telefono de otra forma. */
.pagar-via__v { flex: 1; min-width: 0; font-weight: 600; word-break: break-all; }
.pagar-via__copiar {
  flex: 0 0 auto;
  padding: var(--s-2);
  background: var(--e-panel-2); border: 0; border-radius: var(--r-md);
  color: var(--e-vivo); cursor: pointer; line-height: 0;
}
.pagar-via__copiar:hover { background: var(--e-vivo-suave); }
.pagar-via__copiar svg { width: 16px; height: 16px; }

.previa-pago {
  max-width: 220px; width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--e-borde);
}

/* Los tres metodos de pago. Botones grandes y no un desplegable: en un
   telefono elegir entre tres cosas con el pulgar es un toque, y abrir un
   selector del sistema para lo mismo son tres. */
.metodos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.metodo {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-2);
  background: var(--e-panel);
  border: 2px solid var(--e-borde);
  border-radius: var(--r-lg);
  color: var(--e-apagado);
  font: inherit; font-size: var(--t-xs); font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.metodo svg { width: 24px; height: 24px; }
.metodo:hover { border-color: var(--e-vivo); }
.metodo.is-active {
  border-color: var(--e-vivo);
  background: var(--e-vivo-suave);
  color: var(--e-vivo);
}

/* La pantalla de "ya hiciste tu parte". */
.enproceso { text-align: center; padding: var(--s-6) var(--s-4); }
.enproceso__ico {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--e-vivo-suave);
  color: var(--e-vivo);
}
.enproceso__ico svg { width: 28px; height: 28px; }
.enproceso__t {
  margin-top: var(--s-3);
  font-family: var(--f-display); font-size: var(--t-xl); font-weight: 800;
}
.enproceso__n {
  margin-top: 2px;
  font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700;
  color: var(--e-vivo);
}
.enproceso__x {
  margin: var(--s-4) auto 0; max-width: 42ch;
  font-size: var(--t-sm); color: var(--e-apagado);
}

.nota-img {
  display: block; width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--e-borde);
}

/* El campo del codigo, en verde cuando el codigo vale: el cliente ve que ha
   funcionado en el momento en que desaparecen las referencias. */
.escaparate .input.is-ok { border-color: var(--c-success); }

.btn--bloque { width: 100%; justify-content: center; }

/* ------------------------------------------------------------------------
   Copiar el enlace (en el modulo)
   ------------------------------------------------------------------------ */

.enlace-caja { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.enlace-caja .input {
  flex: 1; min-width: 220px;
  font-family: var(--f-mono); font-size: var(--t-sm);
}

/* La puerta a Credinova desde la tienda de Motor Kart. Amarilla, que es el
   color del credito en las dos apps, y entera clicable. */
.credi-puerta {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--e-oferta);
  border-left: 5px solid var(--e-oferta);
  border-radius: var(--r-md);
  background: var(--e-panel);
  color: var(--e-texto);
  text-decoration: none;
  transition: background .15s, box-shadow .15s;
}
.credi-puerta:hover { background: #fffdf5; box-shadow: 0 8px 22px -14px rgba(23, 23, 26, .4); }
.credi-puerta__sello {
  flex: 0 0 auto;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  background: var(--e-oferta); color: var(--e-oferta-txt);
  font-family: var(--f-display); font-size: var(--t-sm); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
}
.credi-puerta__txt { display: flex; flex-direction: column; min-width: 0; }
.credi-puerta__txt strong { font-family: var(--f-display); font-size: var(--t-md); }
.credi-puerta__txt span { font-size: var(--t-sm); color: var(--e-apagado); }
.credi-puerta__ir {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--e-vivo); font-weight: 700; white-space: nowrap;
}
.credi-puerta__ir svg { width: 16px; height: 16px; }

@media (max-width: 620px) {
  .credi-puerta { flex-wrap: wrap; gap: var(--s-2) var(--s-3); padding: var(--s-4); }
  .credi-puerta__ir { margin-left: 0; width: 100%; }
}

/* Los tres pasos, delante de todo: a credito, lo primero que se pregunta
   no es que hay sino como se paga. */
.credinova__pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.credinova__paso {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--e-borde);
  border-radius: var(--r-md);
  background: var(--e-panel);
}
.credinova__n {
  flex: 0 0 28px; width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--e-oferta); color: var(--e-oferta-txt);
  font-family: var(--f-display); font-weight: 800;
}
.credinova__pt { font-family: var(--f-display); font-weight: 700; color: var(--e-texto); }
.credinova__px { font-size: var(--t-sm); color: var(--e-apagado); margin-top: 2px; }

@media (max-width: 760px) {
  .credinova__pasos { grid-template-columns: 1fr; }
}

/* El plan en la tarjeta del producto, debajo del precio. */
.credinova__plan {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--e-borde);
  font-size: var(--t-sm);
  color: var(--e-apagado);
}
.credinova__plan strong { color: var(--e-texto); font-family: var(--f-display); }

/* El desglose del plan, en el pedido y en la ficha. */
.credinova__resumen {
  padding: var(--s-4);
  border: 1px solid var(--e-borde);
  border-radius: var(--r-md);
  background: var(--e-panel-2);
  display: flex; flex-direction: column; gap: var(--s-2);
  font-size: var(--t-base);
}
.credinova__inicial {
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--e-oferta);
  font-size: var(--t-md);
}

/* Las pastillas de contacto.

   Mas grandes y con la tipografia de titulos: son el telefono, el WhatsApp
   y la direccion, o sea por donde te escriben. En letra pequeña de nota al
   pie no las lee nadie desde el movil. */
.escaparate .dato {
  background: var(--e-panel-2);
  border-color: var(--e-borde);
  color: var(--e-texto);
  font-family: var(--f-display);
  font-size: var(--t-base);
  font-weight: 600;
  padding: var(--s-3) var(--s-4);
  gap: var(--s-3);
}
.escaparate .dato svg { width: 18px; height: 18px; flex: 0 0 18px; }
.escaparate a.dato { background: var(--e-vivo-suave); border-color: var(--e-vivo); color: var(--e-vivo); }
.escaparate a.dato:hover { background: var(--e-vivo); color: #ffffff; border-color: var(--e-vivo); }
.escaparate .datos { gap: var(--s-3); }

@media (max-width: 620px) {
  .escaparate .dato { font-size: var(--t-sm); padding: var(--s-2) var(--s-3); }
}

.escaparate .promos { border-color: var(--e-vivo); }
.escaparate .promos .card__title { color: var(--e-vivo); }

/* Lo que se habia quedado con tokens del tema dentro de la tienda. Como el
   escaparate no se invierte, en tema claro eran colores pensados para fondo
   blanco puestos sobre azul oscuro: el contador no llegaba al contraste
   minimo y el sello de OFERTA era un rojo apagado. */
.escaparate .cat-barra__cuenta { color: var(--e-apagado); }
/* El sello en amarillo, con texto oscuro encima: sobre la foto blanca del
   producto se ve antes que el rojo de antes, y no compite con el azul. */
.escaparate .cat-card__sello { background: var(--e-oferta); color: var(--e-oferta-txt); }
.escaparate .cat-card__stock--no { color: #fca5a5; }

/* La tarjeta en oferta: el precio tachado apagado y el nuevo en rojo oscuro,
   que sobre blanco se lee mejor que el azul y no se confunde con un enlace. */
.escaparate .cat-card--oferta .cat-card__price { color: #b31212; }
.escaparate .cat-card__antes { color: var(--e-apagado); }

/* La portada NO se toca el fondo aqui: lo pone un style= en linea con los
   colores que elegiste en "Configurar", y una regla de aqui no le ganaria.
   Lo que si se ajusta es el alto -era un bloque de 48px de aire arriba y
   abajo antes de ver un producto- y el mensaje de descuento, que pasa al
   amarillo de las ofertas. */
.escaparate .portada { padding: var(--s-5); }
.escaparate .portada__nombre { font-size: 22px; }
.escaparate .promo { background: var(--e-oferta); color: var(--e-oferta-txt); font-weight: 700; }

.escaparate .empty, .escaparate .empty__title { color: var(--e-texto); }
.escaparate .empty svg { color: var(--e-apagado); }
.escaparate .table { color: var(--e-texto); }
.escaparate .table th { background: var(--e-panel-2); color: var(--e-apagado); }
.escaparate .table td { border-color: var(--e-borde); }

/* --- El pedido ------------------------------------------------------------

   El boton flota abajo y acompaña al cliente mientras recorre la tienda:
   si estuviera arriba habria que subir para ver cuanto llevas, y nadie
   sube. Solo aparece cuando hay algo dentro.
   ------------------------------------------------------------------------ */

.pedido-flota {
  position: fixed;
  left: 50%;
  bottom: var(--s-5);
  transform: translateX(-50%);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border: 0;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: var(--blanco);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--sh-lg);
  transition: transform .12s;
}
.pedido-flota:hover { transform: translateX(-50%) translateY(-2px); }
.pedido-flota svg { width: 18px; height: 18px; }
.pedido-flota__total {
  padding: 2px var(--s-3);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .22);
  font-variant-numeric: tabular-nums;
}

/* En la app hay barra de pestañas abajo: el boton se sube para no taparla. */
@media (max-width: 900px) {
  .app .pedido-flota { bottom: calc(var(--tabbar-h, 64px) + var(--s-3)); }
}

/* Mas y menos de cada renglon del pedido. */
.cantidad { display: inline-flex; align-items: center; gap: var(--s-2); }
.cantidad__n { min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.cantidad__b {
  width: 28px; height: 28px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit; font-size: var(--t-md); line-height: 1;
  cursor: pointer;
}
.cantidad__b:hover:not(:disabled) { border-color: var(--c-border-strong); background: var(--c-surface-2); }
.cantidad__b:disabled { opacity: .4; cursor: not-allowed; }

/* --- La barra de la tienda -----------------------------------------------

   Buscar y categorias, pegadas arriba al bajar. Con 89 productos en 17
   categorias, el cliente pasa casi todo el rato lejos de la cabecera, y
   obligarle a subir para cambiar de categoria es lo que hace que cierre.
   ------------------------------------------------------------------------ */

.cat-barra {
  position: sticky;
  /* Arriba del todo por defecto: la tienda suelta no tiene cabecera.
     No vale poner var(--header-h, 0px) — esa variable esta declarada en
     :root y vale 62px haya cabecera o no, asi que la barra se quedaba
     flotando con un hueco por el que asomaban los productos. */
  top: 0;
  z-index: 4;
  margin-bottom: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg);
}

/* Dentro de la aplicacion si hay cabecera, y hay que dejarle su sitio. */
.app .cat-barra { top: var(--header-h); }
.cat-barra__buscar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.cat-barra__buscar .toolbar__search { flex: 1; max-width: none; }
.cat-barra__cuenta { color: var(--c-text-muted); font-size: var(--t-sm); white-space: nowrap; }

/* El buscador pide 200px de minimo y la cuenta va sin partir: a 320px no
   caben en la misma linea. Mismo trato que .picker-barra y .buscador__campo. */
@media (max-width: 620px) {
  .cat-barra__buscar .toolbar__search { flex: 1 0 100%; }
}

/* Las categorias ruedan a lo ancho en vez de apilarse: diecisiete botones
   en bloque ocuparian la pantalla entera antes del primer producto. */
.cat-cats {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-3);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--s-1);
}
.cat-cats::-webkit-scrollbar { display: none; }

.cat-cat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.cat-cat:hover { border-color: var(--c-border-strong); background: var(--c-surface-2); }
.cat-cat.is-active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--blanco);
}


/* Cada categoria, con cuantos tiene al lado del nombre. */
.cat-seccion__n {
  margin-left: var(--s-2);
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  font-size: var(--t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- Ofertas -------------------------------------------------------------

   El escaparate va arriba del catalogo y se distingue por el borde y el
   titulo, no por un fondo de color: el manual dice que el color no mande
   en la pieza, y una rejilla de fotos sobre fondo fuerte se lee peor.
   ------------------------------------------------------------------------ */

.promos { border-color: var(--rj-300); }
.promos .card__title { color: var(--rj-700); }
.promos .card__title svg { width: 18px; height: 18px; }

.cat-card--oferta { border-color: var(--rj-300); }

/* El sello va sobre la foto, que es donde primero cae la vista. */

.cat-card__sello {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 1;
  background: var(--c-danger);
  color: var(--blanco);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 9px;
  border-radius: var(--r-sm);
}

.cat-card__antes {
  color: var(--c-text-muted);
  text-decoration: line-through;
  font-size: var(--t-sm);
}

/* El precio de contado, que solo ve quien entra al sistema. Va dentro del
   .cat-card__price, asi que hay que deshacer su tipografia de titular: es
   un dato de apoyo, no el precio que se anuncia. */
.cat-card__neto {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--c-text-muted);
  margin-top: 2px;
}

/* Barra de avance de una subida larga. Sin esto, subir 553 registros es
   una pantalla quieta y nadie sabe si va o se colgo. */
.barra-avance {
  height: 8px;
  border-radius: var(--r-full);
  background: var(--c-surface-2);
  overflow: hidden;
}
.barra-avance span {
  display: block;
  height: 100%;
  background: var(--c-primary);
  transition: width .2s;
}

/* Pasos numerados dentro de una tarjeta. No es .fila: aquello es un boton
   y lleva cursor de mano, que aqui mentiria — esto no se pulsa. */
.paso {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3) 0;
}
.paso + .paso { border-top: 1px solid var(--c-border); }
.paso > strong { flex: 0 0 24px; color: var(--c-text-muted); }

/* --- Portada del catalogo ------------------------------------------------

   El banner manda a lo ancho y conserva su forma: estas imagenes vienen
   apaisadas y con el texto dentro, asi que recortarlas se comeria las
   palabras. En el movil se encoge con la pantalla.
   ------------------------------------------------------------------------ */

/* Los datos de contacto llevan direcciones de Instagram y de Google Maps:
   cadenas largas sin un solo espacio, que en un telefono estrecho empujan
   la pagina a lo ancho. Se parten donde haga falta. */
/* Los datos de contacto, como pastillas. Las que llevan a algun sitio se
   pulsan; las demas solo se leen. */
.datos { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.dato {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 100%;
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  font-size: var(--t-sm);
  text-decoration: none;
}
.dato svg { width: 15px; height: 15px; flex: 0 0 15px; }
/* Las direcciones largas se parten en vez de empujar la pagina a lo ancho. */
.dato span { overflow-wrap: anywhere; }

a.dato { color: var(--c-primary); border-color: var(--c-primary-border); background: var(--c-primary-soft); }
a.dato:hover { border-color: var(--c-primary); }

.portada__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}

.portada {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: var(--s-6);
  color: var(--blanco);
}
.portada__nombre { font-family: var(--f-display); font-size: 24px; font-weight: 700; }
.portada__lema { margin-top: var(--s-1); opacity: .9; }

.promo {
  display: inline-block;
  margin-top: var(--s-3);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 600;
  background: var(--rj-50);
  color: var(--rj-800);
}
/* Sobre el degradado el chip va en blanco translucido fijo, NO en un token
   del tema: el degradado lo elige el dueño de la tienda y no se invierte en
   modo oscuro, asi que un color que si lo hiciera quedaria negro sobre azul. */
.promo--sobre { background: rgba(255, 255, 255, .2); color: var(--blanco); }

/* El producto abierto para pedir: la foto grande al lado de los datos, y
   debajo en el movil, donde no caben las dos columnas. */
.pedido { display: flex; gap: var(--s-5); align-items: flex-start; }
.pedido__img {
  flex: 0 0 180px;
  aspect-ratio: 1;
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.pedido__img img { width: 100%; height: 100%; object-fit: contain; }
.pedido__txt { flex: 1; min-width: 0; }

@media (max-width: 620px) {
  .pedido { flex-direction: column; }
  .pedido__img { flex: 0 0 auto; width: 100%; max-width: 240px; align-self: center; }
}


.cat-card__img img { width: 100%; height: 100%; object-fit: contain; }
.cat-card__body { padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-1); flex: 1; }
.cat-card__title { font-size: var(--t-sm); font-weight: 600; line-height: 1.35; }
.cat-card__price {
  font-family: var(--f-display); font-size: var(--t-md); font-weight: 800;
  color: var(--rj-700); margin-top: auto;
}

/* ==========================================================================
   Barra inferior: solo en movil, como en una app
   ========================================================================== */

.tabbar { display: none; }

@media (max-width: 900px) {
  .app { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

  .sidebar {
    position: fixed;
    left: 0; top: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--sh-lg);
  }
  .app.is-nav-open .sidebar { transform: translateX(0); }
  .app.is-nav-open::after {
    content: ""; position: fixed; inset: 0; background: rgba(10, 10, 11, .55); z-index: 50;
  }

  .content { padding: var(--s-4); }
  .topbar { padding: 0 var(--s-4); }
  h1 { font-size: var(--t-xl); }

  /* Accesos directos a lo que mas se usa, al alcance del pulgar. */
  .tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--c-glass-fuerte);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--c-border);
    z-index: 70;
  }
  .tabbar a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    color: var(--c-text-muted);
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .01em;
  }
  .tabbar a svg { width: 21px; height: 21px; }
  .tabbar a.is-active { color: var(--rj-600); }

  /* El distintivo del alojamiento se fija abajo a la derecha y taparia dos
     modulos de la barra. Cuando esta, la barra se sube por encima de el. */
  .app.con-distintivo .tabbar { bottom: 66px; }
  .app.con-distintivo { padding-bottom: calc(var(--tabbar-h) + 66px + env(safe-area-inset-bottom)); }
  .app.con-distintivo .toasts { bottom: calc(var(--tabbar-h) + 66px + env(safe-area-inset-bottom) + var(--s-3)); }

  .fab {
    display: grid;
    place-items: center;
    position: fixed;
    right: var(--s-4);
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s-4));
    z-index: 60;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: var(--r-full);
    background: var(--c-primary);
    color: var(--blanco);
    box-shadow: var(--sh-lg);
    cursor: pointer;
  }
  .fab svg { width: 24px; height: 24px; }
  .app.con-distintivo .fab { bottom: calc(var(--tabbar-h) + 66px + env(safe-area-inset-bottom) + var(--s-4)); }

  /* En movil el dialogo de busqueda ocupa la pantalla: se teclea mejor. */
  .buscador__lista { max-height: 60vh; }

  /* Crear esta en el boton flotante, asi que en la cabecera sobra. Lo que
     queda se estrecha y pierde su texto para que el titulo no se corte. */
  .accion-crear { display: none; }
  .solo-escritorio { display: none; }
  .btn--compacto { width: 32px; padding: 0; justify-content: center; }
  .topbar__acciones .btn--icon { width: 32px; height: 32px; }

  .toasts { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s-3)); right: var(--s-4); left: var(--s-4); }
  .toast { max-width: none; }

  .modal-backdrop { padding: var(--s-4) var(--s-2); }
  .modal__foot { position: sticky; bottom: 0; }
}

@media (min-width: 901px) { .nav-toggle { display: none; } }

@media print {
  .sidebar, .topbar, .tabbar, .page-head__actions, .toolbar, .no-print,
  .fab, .sin-red, .hay-version { display: none !important; }
  body { background: #fff; }
  .content { padding: 0; }
  .card { border: 0; box-shadow: none; }
  .table th { position: static; }
}

/* ==========================================================================
   Capa de aplicacion: busqueda global, avisos, acciones rapidas, conexion

   Todo se apoya en lo que ya existe — .modal para las superficies flotantes,
   .toolbar__search para el campo de busqueda, .badge para las etiquetas,
   .btn para los botones — asi que aqui solo esta lo que ninguno cubria.
   ========================================================================== */

/* --- Botones de la cabecera ------------------------------------------- */

.topbar__acciones { display: flex; align-items: center; gap: var(--s-1); }

/* La campana lleva el numero encima, como en una app de movil. */
.con-cuenta { position: relative; }
.con-cuenta__n {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 17px;
  height: 17px;
  padding: 0 var(--s-1);
  border-radius: var(--r-full);
  background: var(--c-danger);
  color: var(--c-sobre-danger);
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--c-surface);
}

/* El atajo, escrito como una tecla. */
.tecla {
  display: inline-block;
  padding: 1px var(--s-1);
  border: 1px solid var(--c-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 16px;
}

/* --- Fila pulsable -----------------------------------------------------

   Las tres listas de esta capa (resultados, avisos y acciones) son la misma
   fila: un boton a lo ancho con una linea arriba. Cada una solo cambia su
   relleno y su color al pasar por encima.
   ----------------------------------------------------------------------- */

.fila {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-4) var(--s-5);
  border: 0;
  border-top: 1px solid var(--c-border);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fila:hover { background: var(--c-surface-2); }

/* Las listas sangran hasta el borde del dialogo, que trae su propio relleno. */
.fila-lista { margin: calc(var(--s-5) * -1); }

/* --- Miniatura de producto ----------------------------------------------

   El mismo cuadro de 40px que repiten inventario, mercadeo y shopping,
   pero con el color del tema en vez de un blanco fijo: asi no queda un
   recuadro claro flotando en modo oscuro.
   ----------------------------------------------------------------------- */

.miniatura {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--c-surface-2);
}

/* --- Elegir producto ----------------------------------------------------

   La misma .fila de las otras listas, metida en una caja con su propio
   desplazamiento: el dialogo de la venta no puede crecer a lo alto con los
   89 productos, y asi el buscador se queda siempre a la vista.
   ----------------------------------------------------------------------- */

.picker {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  margin-top: var(--s-3);
}
.picker .fila { padding: var(--s-3) var(--s-4); }
.picker .fila:first-child { border-top: 0; }
.picker .fila:disabled { opacity: .55; cursor: not-allowed; }
.picker .fila:disabled:hover { background: transparent; }

/* El buscador trae min-width 200px y la cantidad otros 90: juntos no caben
   en un telefono estrecho, y el dialogo recorta lo que se sale. Se le da la
   linea entera, como ya se hizo en .buscador__campo y en .plegable__cabecera. */
@media (max-width: 620px) {
  .picker-barra .toolbar__search { flex: 1 0 100%; max-width: none; }
}

/* El titulo no parte la fila: se corta con puntos suspensivos. */
.picker__txt { flex: 1; min-width: 0; }
.picker__txt .cell-strong,
.picker__txt .cell-sub { display: block; }
.picker__txt .cell-strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Busqueda global --------------------------------------------------- */

.buscador__campo { margin-bottom: var(--s-3); }
.buscador__campo .toolbar__search { max-width: none; }

/* Alto fijo para que el dialogo no salte de tamaño al teclear. */
.buscador__lista { max-height: 52vh; overflow-y: auto; margin: 0 calc(var(--s-5) * -1) calc(var(--s-5) * -1); }

.res { padding: var(--s-3) var(--s-5); }
.res:hover, .res.is-active { background: var(--c-primary-soft); }
.res__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  color: var(--c-text-muted);
}
.res__texto { flex: 1; min-width: 0; }
.res__titulo {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.res__sub { display: block; font-size: var(--t-xs); color: var(--c-text-muted); }
.res__fin { flex: none; text-align: right; font-variant-numeric: tabular-nums; }

.buscador__grupo {
  padding: var(--s-2) var(--s-5);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-2);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.buscador__pie {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--c-border);
  font-size: var(--t-xs);
  color: var(--c-text-faint);
}

/* --- Avisos ------------------------------------------------------------ */

.aviso { align-items: flex-start; }
.aviso__punto {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: var(--s-2);
  border-radius: var(--r-full);
  background: var(--c-text-faint);
}
.aviso--alto .aviso__punto { background: var(--c-danger); }
.aviso--medio .aviso__punto { background: var(--c-warning); }
.aviso--bajo .aviso__punto { background: var(--c-info); }
.aviso__texto { flex: 1; min-width: 0; }
.aviso__titulo { display: block; font-weight: 600; }
.aviso__sub { display: block; font-size: var(--t-sm); color: var(--c-text-muted); }

/* --- Acciones rapidas -------------------------------------------------- */

.accion:hover { background: var(--c-primary-soft); }
.accion__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.accion__texto { flex: 1; min-width: 0; }
.accion__texto > span { display: block; }
.accion__sub { font-size: var(--t-xs); color: var(--c-text-muted); }

/* Boton flotante: solo en movil, donde no hay barra lateral. */
.fab { display: none; }

/* --- Sin conexion ------------------------------------------------------ */

.sin-red {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--c-warning-soft);
  color: var(--c-warning);
  font-size: var(--t-sm);
  font-weight: 600;
}
.app.sin-red-activa .sin-red { display: flex; }

/* ==========================================================================
   Puerta de entrada

   Lo unico que se ve cuando hay base compartida y todavia no se sabe quien
   esta entrando. No comparte nada con la aplicacion porque la aplicacion
   aun no existe en pantalla.
   ========================================================================== */

.puerta {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--s-5);
  background: var(--c-bg);
}
.puerta__caja { max-width: 440px; width: 100%; }
.puerta__logo {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--c-primary);
  color: var(--blanco);
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 800;
}

/* ==========================================================================
   Lista plegable

   La cabecera es la que se pulsa; el buscador vive fuera del boton para
   poder escribir sin abrir nada.
   ========================================================================== */

.plegable__cabecera {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
}
.plegable.is-abierta .plegable__cabecera { border-bottom: 1px solid var(--c-border); }

.plegable__toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  flex: 1;
  min-width: 0;
  padding: var(--s-1) 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.plegable__flecha { flex: none; transition: transform .18s ease; color: var(--c-text-muted); }
.plegable.is-abierta .plegable__flecha { transform: rotate(90deg); }
.plegable__titulo { font-family: var(--f-display); font-size: var(--t-md); font-weight: 700; }
.plegable__resumen { min-width: 0; color: var(--c-text-muted); font-size: var(--t-sm); }
.plegable__toggle:hover .plegable__titulo { color: var(--c-primary); }

/* Cerrada, la tarjeta es una sola linea; el relleno de la cabecera basta. */
.plegable__contenido[hidden] { display: none; }

@media (max-width: 900px) {
  /* En movil el buscador baja a su propia linea en vez de estrecharse. */
  .plegable__cabecera .toolbar__search { flex: 1 0 100%; max-width: none; }
  /* Y el resumen, a la suya dentro del boton: shrink 1 para que no empuje. */
  .plegable__resumen { flex: 1 1 100%; }
}

/* ==========================================================================
   Resumen: banda de caja, dona y proyeccion
   ========================================================================== */

/* La banda verde: la cifra que mas se mira, con su reparto al lado. */
.banda {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  width: 100%;
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 0;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--c-success) 0%, var(--rj-700) 160%);
  color: var(--blanco);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--sh-md);
}
.banda:hover { filter: brightness(1.06); }
.banda__icono {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .18);
}
.banda__texto { flex: 1; min-width: 0; }
.banda__label { display: block; font-size: var(--t-sm); opacity: .9; }
.banda__cifra {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.banda__chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.chip {
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .18);
  font-size: var(--t-xs);
  text-align: center;
}
.chip__label { display: block; opacity: .85; }
.chip__valor { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }

/* La dona y su leyenda. */
.dona { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; justify-content: center; }
.leyendas { display: flex; flex-direction: column; gap: var(--s-1); min-width: 170px; }
.leyenda {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.leyenda:hover { background: var(--c-surface-2); }
.leyenda__punto { width: 10px; height: 10px; border-radius: var(--r-full); flex: none; }
.leyenda__valor { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* La proyeccion: una tarjeta con el peso visual de un titular. */
.proy { background: linear-gradient(140deg, var(--rj-600) 0%, var(--rj-800) 100%); border: 0; color: var(--blanco); }
.proy__cabecera {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  font-weight: 700;
  opacity: .92;
}
.proy__bloque { padding: var(--s-3) 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.proy__bloque:first-of-type { border-top: 0; padding-top: 0; }
.proy__titulo { font-size: var(--t-sm); opacity: .85; }
.proy__cifra {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.proy__base { font-size: var(--t-xs); opacity: .85; }
.proy__aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .15);
  font-size: var(--t-xs);
}
.proy__aviso svg { flex: none; margin-top: 2px; }
.proy__nota { margin-top: var(--s-4); font-size: var(--t-xs); opacity: .75; }

/* Tarjeta de aviso: lo que hay que reponer. */
.card--aviso { border-color: var(--c-warning); }
.card--aviso .card__title { display: flex; align-items: center; gap: var(--s-2); color: var(--c-warning); }

/* Las otras dos caras del mismo aviso: algo va mal, o todo esta en orden.
   Solo el borde y el icono cambian — el fondo se queda blanco para que lo
   que se lee dentro siga teniendo el mismo contraste. */
.card--peligro { border-color: var(--c-danger); }
.card--peligro .card__title { color: var(--c-danger); }
.card--peligro svg { color: var(--c-danger); }
.card--ok { border-color: var(--c-success); }
.card--ok .card__title { color: var(--c-success); }
.card--ok svg { color: var(--c-success); }

/* --------------------------------------------------------------------------
   Pestañas dentro de una pantalla

   El modulo de Credinova las usa desde que existe, pero nunca tuvieron
   estilo: salian como botones del navegador, sin decir cual estaba abierta.
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  padding: 3px;
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
}
.tab {
  padding: var(--s-2) var(--s-4);
  background: none;
  border: 0;
  border-radius: var(--r-md);
  color: var(--c-text-muted);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.tab:hover { color: var(--c-text); }
/* La abierta va sobre fondo propio y no solo en otro color: a contraluz,
   dos grises distintos no se distinguen. */
.tab.is-active {
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--sh-sm);
}
/* Para los filtros, que son mas y mas cortos. */
.tabs--chip { background: none; padding: 0; }
.tabs--chip .tab {
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: var(--t-xs);
}
.tabs--chip .tab.is-active {
  border-color: var(--rj-500);
  background: var(--rj-100);
  color: var(--rj-700);
  box-shadow: none;
}

@media (max-width: 900px) {
  .banda__chips { flex: 1 0 100%; }
  .chip { flex: 1; }
}

/* ==========================================================================
   Asistente

   Una conversacion, no un formulario: lo tuyo a la derecha, lo suyo a la
   izquierda, y la cifra de la respuesta con el peso de un titular para que
   se lea de un vistazo.
   ========================================================================== */

.chat {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-height: 54vh;
  overflow-y: auto;
  padding-right: var(--s-1);
}
.chat__tuya {
  align-self: flex-end;
  max-width: 85%;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
  background: var(--c-primary);
  color: var(--blanco);
}
.chat__mia {
  align-self: flex-start;
  max-width: 92%;
  padding: var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sm);
  background: var(--c-surface-2);
}
.chat__cifra {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: var(--c-primary);
}
/* Los pasos de un "como se hace": una receta, numerada y en orden. */
.chat__pasos {
  margin: var(--s-3) 0 0;
  padding-left: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.chat__pasos li { padding-left: var(--s-1); }
.chat__pasos li::marker { color: var(--c-primary); font-weight: 700; }

.chat__filas { margin-top: var(--s-3); }
.chat__fila {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--c-border);
  font-size: var(--t-sm);
}
.chat__valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chat__ejemplos { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.chat__nota { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--c-text-muted); }

.chat__barra { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.chat__barra .input { flex: 1; }

/* Aviso de version nueva: mismo sitio y forma que el de sin conexion. */
.hay-version {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-2) var(--s-4);
  background: var(--c-primary-soft);
  color: var(--c-info);
  font-size: var(--t-sm);
  font-weight: 600;
}
.hay-version[hidden] { display: none; }