/* LIDER4 — sistema de diseño: papel, tinta y luz.

   Dos registros, una sola familia de piezas:
   · OPERAR (vender, cobrar, registrar, consultar): papel blanco, tarjetas en gris muy claro y tinta. Plano,
     rápido y sin adornos; el color solo aparece cuando significa algo y nunca va solo (lleva icono o texto).
   · VALOR (beneficios, Fondo de Ahorro, Crecimiento, Liga LIDER4, logros y recompensas): el "escenario",
     una superficie de tinta con luz, profundidad y piezas con relieve. Solo CSS y SVG: sin motor 3D.

   Cómo convive con lo anterior:
   · Todo lo de este archivo vive bajo `.ui-…` (piezas) e `.is-…` (variantes y estados). styles.css no se
     toca: una pantalla que todavía no se rehace se ve exactamente igual que antes.
   · Los colores son los de siempre (--ink, --card, --accent…): las mismas 32 variables que el servidor
     calcula para la identidad de cada negocio (server/identidad.js) y que aspecto.js pone en la pantalla y
     en cada hoja. Por eso cada pieza toma sola la identidad del negocio abierto, sin reglas aparte.
   · Aquí se agregan las ESCALAS (letra, espacio, radios, relieve, movimiento, alturas, iconos, capas) y unos
     pocos colores derivados. Fuera del bloque [tokens] no se escribe ningún color, tamaño de letra, peso,
     duración ni capa a mano: tests/sistema-diseno.test.js lo revisa.

   Guía viva con todas las piezas:  npm run guia   ·   Documento: docs/SISTEMA-DE-DISENO.md */

/* [tokens] */
:root {
  /* Letra: siete tamaños. En rem, para que respeten el tamaño de letra que la persona eligió en su teléfono. */
  --fs-xs: 0.75rem;     /* 12 · etiquetas de la navegación, insignias */
  --fs-s: 0.875rem;     /* 14 · texto secundario, ayudas, chips */
  --fs-m: 1rem;         /* 16 · texto, botones, campos (nunca menos en un campo: evita el zoom del teléfono) */
  --fs-l: 1.125rem;     /* 18 · título de tarjeta, lo que se destaca en un renglón */
  --fs-xl: 1.375rem;    /* 22 · título de sección y de hoja */
  --fs-2xl: 1.75rem;    /* 28 · título de pantalla, cifra de un indicador */
  --fs-3xl: 2.25rem;    /* 36 · la cifra principal de una pantalla */
  /* Pesos: cuatro. */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  /* Interlineado y espaciado entre letras */
  --lh-tight: 1.15;     /* cifras y títulos */
  --lh-snug: 1.3;       /* etiquetas, botones, renglones */
  --lh-body: 1.5;       /* párrafos */
  --track-title: -0.015em;
  --track-figure: -0.025em;

  /* Espacio: base 4. El número es el múltiplo (--sp-4 = 16 px). */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --gutter: var(--sp-4);          /* margen lateral de la pantalla */
  --measure: 34ch;                /* ancho cómodo de un párrafo corto centrado */

  /* Radios: los tres de siempre (--r-s controles, --r-m tarjetas, --r-l hojas; los cambia la identidad del
     negocio) más el de pastilla. --r-xs se deriva de --r-s más abajo. */
  --r-pill: 999px;

  /* Relieve: cuatro escalones. En la casa las tarjetas son planas (las separa el tono); un negocio puede
     darles sombra con su identidad (--shadow-card). */
  --elev-0: none;
  --elev-2: 0 1px 3px rgb(0 0 0 / .07), 0 8px 18px -8px rgb(0 0 0 / .2);       /* lo que flota sobre la pantalla */
  --elev-3: 0 2px 6px rgb(0 0 0 / .06), 0 18px 40px -18px rgb(0 0 0 / .3);     /* hojas, avisos, menús */
  --ring-soft: 0 0 0 1px rgb(0 0 0 / .06), 0 1px 2px rgb(0 0 0 / .07);        /* la opción elegida de un control */

  /* Movimiento: tres duraciones y dos curvas. Con "reducir movimiento" todo queda quieto (al final del archivo). */
  --dur-1: 120ms;       /* respuesta al dedo: presionar, pasar el cursor */
  --dur-2: 200ms;       /* cambios de estado: interruptores, avisos, hojas */
  --dur-3: 320ms;       /* entradas del escenario, barras de progreso */
  --dur-loop: 1000ms;   /* lo que se repite mientras se espera */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-move: cubic-bezier(.4, 0, .2, 1);

  /* Alturas: tres de control y la de un renglón. --hit es el mínimo que se puede tocar. */
  --h-s: 36px;          /* controles compactos (su zona táctil se extiende a --hit) */
  --h-m: 44px;          /* botones y campos */
  --h-l: 52px;          /* la acción principal de una pantalla o de una hoja */
  --h-row: 56px;
  --hit: 44px;

  /* Iconos: tres tamaños; el grosor de línea es el de la casa o el que elija el negocio (--icon-w). */
  --icon-s: 16px;
  --icon-m: 20px;
  --icon-l: 24px;
  --icon-w: 1.75;

  /* Capas */
  --z-raise: 1;
  --z-sticky: 10;
  --z-bar: 20;
  --z-overlay: 50;
  --z-toast: 60;

  /* Puntos de quiebre (las consultas de medios no aceptan variables: van aquí como referencia y los revisa
     la prueba). Se diseña primero a 360. */
  --bp-compact: 380px;  /* por debajo: teléfonos angostos */
  --bp-roomy: 600px;    /* desde aquí: dos columnas, tableta */
  --bp-wide: 1024px;    /* desde aquí: escritorio */
  --bp-max: 1280px;

  /* Colores que faltaban. Los demás son los de styles.css y los de la identidad de cada negocio. */
  --tap: rgb(0 0 0 / .035);        /* un renglón bajo el dedo o el cursor */
  --tap-2: rgb(0 0 0 / .07);       /* presionado */
  --scrim: rgb(0 0 0 / .36);
  --o-disabled: .5;
  --page-max: 560px;               /* ancho de la columna de un teléfono (el de siempre) */
  --note-h: 30px;                  /* alto de un aviso fijo del marco (datos de prueba, sin conexión) */
  --fade: #000;                    /* tinta de una máscara: lo que se desvanece al borde de una fila que sigue */
  /* Derivados de la tinta y el papel (valores de la casa; con color-mix siguen a cada negocio, abajo) */
  --field-line: #6D7989;           /* borde de un campo: 3 a 1 sobre papel, tarjeta y hundido */
  --stage: #0B1F3B;                /* el escenario */
  --stage-2: #2D3E56;              /* su parte iluminada y los planos que se levantan sobre él */
  --stage-line: #37475E;
  --on-stage: #FFFFFF;
  --on-stage-2: #E2E4E7;
  --stage-light: var(--stage-2);                 /* el punto más claro de la luz (sin color-mix: sin tinte) */
  --paper-light: transparent;                    /* la misma luz sobre el escenario de papel */
  --on-strong: #FFFFFF;            /* texto sobre un color de estado lleno (un aviso de error, una cuenta) */
  --stage-edge: rgb(255 255 255 / .1);           /* el filo de luz de un plano */
  --stage-shade: rgb(0 0 0 / .3);                /* la sombra del fondo del escenario */
  --stage-cast: rgb(0 0 0 / .55);                /* la sombra que proyecta una pieza */
  /* Metal de las piezas con relieve: neutro, para que combine con cualquier identidad. */
  --metal-1: #F4F4F4;
  --metal-2: #A6A6A6;
  --metal-3: #DADADA;
  --metal-dim-1: #4A4A4A;
  --metal-dim-2: #2E2E2E;
  --metal-dim-3: #3D3D3D;
  --metal-hi: rgb(255 255 255 / .7);
  --metal-lo: rgb(0 0 0 / .35);
  --r-xs: 6px;
}
/* Lo que se deriva de la tinta, el papel y las esquinas se vuelve a calcular donde la identidad del negocio
   los cambia: el marco de la pantalla y cada hoja. */
@supports (color: color-mix(in srgb, red, blue)) {
  :root, .shell, .studio, .sheet-wrap {
    --field-line: color-mix(in srgb, var(--ink) 60%, var(--bg));
    --stage: var(--ink);
    --stage-2: color-mix(in srgb, var(--ink) 86%, var(--bg));
    --stage-line: color-mix(in srgb, var(--ink) 82%, var(--bg));
    --on-stage: var(--bg);
    --on-stage-2: color-mix(in srgb, var(--bg) 88%, var(--ink));
    /* La luz lleva solo una parte del color del negocio: así el texto del escenario se lee (4.5 a 1) también en
       su punto más claro, sea cual sea ese color. La prueba de contraste lo calcula con esta misma fórmula. */
    --stage-light: color-mix(in srgb, var(--stage-glow) 20%, var(--stage-2));
    --paper-light: color-mix(in srgb, var(--stage-glow) 10%, transparent);
  }
}
:root, .shell, .studio, .sheet-wrap {
  --r-xs: max(2px, calc(var(--r-s) - 4px));
  --stage-glow: var(--biz-accent, var(--biz));   /* la luz del escenario: el color del negocio abierto */
}
/* [/tokens] */

/* ───────── Texto ───────── */
.ui-title-1, .ui-title-2, .ui-title-3 { margin: 0; font-family: var(--display); font-size-adjust: var(--dfa, none); font-variant-numeric: lining-nums; font-weight: var(--fw-semi); line-height: var(--lh-tight); letter-spacing: var(--dls, var(--track-title)); color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.ui-title-1 { font-size: var(--fs-2xl); }
.ui-title-2 { font-size: var(--fs-xl); }
.ui-title-3 { font-size: var(--fs-l); line-height: var(--lh-snug); }
.ui-text { margin: 0; font-size: var(--fs-m); line-height: var(--lh-body); color: var(--ink); }
.ui-text-s { margin: 0; font-size: var(--fs-s); line-height: var(--lh-body); color: var(--ink-2); }
.ui-caption { margin: 0; font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--ink-2); }
.ui-figure { font-family: var(--display); font-size-adjust: var(--dfa, none); font-variant-numeric: lining-nums tabular-nums; font-weight: var(--fw-bold); font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--dls, var(--track-figure)); overflow-wrap: anywhere; }
.ui-num { font-variant-numeric: tabular-nums; }
.ui-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ui-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────── Composición ───────── */
.ui-stack { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.ui-stack.is-s { gap: var(--sp-2); }
.ui-stack.is-l { gap: var(--sp-6); }
.ui-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.ui-split { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-width: 0; }
.ui-grow { flex: 1; min-width: 0; }
.ui-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }

/* ───────── Iconos ───────── */
.icon.ui-i { width: var(--icon-m); height: var(--icon-m); stroke-width: var(--icon-w); }
.icon.ui-i.is-s { width: var(--icon-s); height: var(--icon-s); }
.icon.ui-i.is-l { width: var(--icon-l); height: var(--icon-l); }

/* ───────── Botones ─────────
   Uno solo por pantalla lleva la tinta (is-primary). El texto puede partirse en dos renglones: un botón no
   corta su etiqueta ni desborda la pantalla. */
.ui-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-width: 0; min-height: var(--h-m); padding: var(--sp-2) var(--sp-4); border: 1px solid var(--line-2); border-radius: var(--btn-r, var(--r-s)); background: var(--surface); color: var(--ink); font-family: var(--ui); font-size: var(--fs-m); font-weight: var(--fw-semi); line-height: var(--lh-tight); letter-spacing: -0.005em; text-align: center; text-decoration: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-1) var(--ease-move), border-color var(--dur-1) var(--ease-move), transform var(--dur-1) var(--ease-move); }
.ui-btn .icon { flex: none; width: var(--icon-m); height: var(--icon-m); stroke-width: var(--icon-w); }
.ui-btn:active { background: var(--sunken); transform: scale(.985); }
.ui-btn.is-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ui-btn.is-primary:active { background: var(--accent-hover); border-color: var(--accent-hover); }
.ui-btn.is-quiet { background: transparent; border-color: transparent; color: var(--accent-ink); padding-inline: var(--sp-3); }
.ui-btn.is-quiet:active { background: var(--tap-2); }
.ui-btn.is-danger { color: var(--bad-ink); border-color: var(--bad); }
.ui-btn.is-danger:active { background: var(--bad-soft); }
.ui-btn.is-danger.is-primary { background: var(--bad-ink); border-color: var(--bad-ink); color: var(--on-strong); }
.ui-btn.is-s { min-height: var(--h-s); padding: var(--sp-1) var(--sp-3); font-size: var(--fs-s); }
.ui-btn.is-s .icon { width: var(--icon-s); height: var(--icon-s); }
.ui-btn.is-l { min-height: var(--h-l); padding-inline: var(--sp-5); }
.ui-btn.is-block { display: flex; width: 100%; }
/* Lo compacto se ve de 36, pero se toca como de 44. */
.ui-btn.is-s::after, .ui-chip::after, .ui-seg > *::after { content: ''; position: absolute; inset: calc((var(--h-s) - var(--hit)) / 2) 0; }
.ui-btn.is-s::after { inset: calc((var(--h-s) - var(--hit)) / 2 - 1px) -1px; } /* el botón tiene borde: la zona se mide desde su borde exterior */
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: var(--o-disabled); pointer-events: none; }
.ui-btn[aria-busy="true"] { pointer-events: none; }
/* Un botón con cifra a la derecha (Cobrar con su total). */
.ui-btn.is-between { justify-content: space-between; text-align: left; }
.ui-btn.is-between > b { flex: none; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .ui-btn:hover { background: var(--card); border-color: var(--ink-3); }
  .ui-btn.is-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .ui-btn.is-quiet:hover { background: var(--tap); border-color: transparent; }
  .ui-btn.is-danger:hover { background: var(--bad-soft); border-color: var(--bad); }
  .ui-btn.is-danger.is-primary:hover { background: var(--bad-ink); border-color: var(--bad-ink); }
}
/* El negocio que eligió botones de contorno. */
[data-look="propia"][data-buttons="contorno"] .ui-btn.is-primary:not(.is-danger) { background: var(--surface); color: var(--ink); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* Botón de solo icono: siempre con su nombre para lectores de pantalla (aria-label). */
.ui-iconbtn { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--hit); height: var(--hit); padding: 0; border: 0; border-radius: var(--r-s); background: none; color: var(--ink-2); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-1) var(--ease-move); }
.ui-iconbtn .icon { width: var(--icon-l); height: var(--icon-l); stroke-width: var(--icon-w); }
.ui-iconbtn:active { background: var(--tap-2); color: var(--ink); }
.ui-iconbtn:disabled { opacity: var(--o-disabled); pointer-events: none; }
@media (hover: hover) { .ui-iconbtn:hover { background: var(--tap); color: var(--ink); } }

/* Giro de espera (dentro de un botón o junto a un texto). */
.ui-spin { flex: none; width: var(--icon-s); height: var(--icon-s); border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ui-spin var(--dur-loop) linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ───────── Campos ─────────
   Una caja dibujada con tinta sobre el papel: el borde se distingue (3 a 1) también sobre una tarjeta. */
.ui-field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.ui-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-s); font-weight: var(--fw-semi); line-height: var(--lh-snug); color: var(--ink); }
.ui-label > small { font-size: var(--fs-s); font-weight: var(--fw-regular); color: var(--ink-2); }
.ui-control { position: relative; display: flex; align-items: stretch; min-height: var(--h-m); border: 1px solid var(--field-line); border-radius: var(--r-s); background: var(--surface); color: var(--ink); transition: border-color var(--dur-1) var(--ease-move); }
.ui-control.is-l { min-height: var(--h-l); }
.ui-control.is-l > .ui-input { min-height: calc(var(--h-l) - 2px); }
.ui-control > .icon { flex: none; align-self: center; width: var(--icon-m); height: var(--icon-m); stroke-width: var(--icon-w); color: var(--ink-2); pointer-events: none; }
.ui-control > .ui-affix { flex: none; align-self: center; font-size: var(--fs-m); color: var(--ink-2); font-variant-numeric: tabular-nums; pointer-events: none; }
/* Lo que acompaña al valor ($, ml, la lupa) va en las orillas; el campo ocupa todo lo demás, de borde a borde. */
.ui-control > .icon:first-child, .ui-control > .ui-affix:first-child { margin-left: var(--sp-3); }
.ui-control > .ui-affix:last-child { margin-right: var(--sp-3); }
.ui-control > .icon + .ui-input, .ui-control > .ui-affix + .ui-input { padding-left: var(--sp-2); }
.ui-control > .ui-input:has(+ .ui-affix) { padding-right: var(--sp-2); }
.ui-control:focus-within { border-color: var(--ink); outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.ui-input { flex: 1; min-width: 0; width: 100%; min-height: var(--h-m); padding: 0 var(--sp-3); border: 0; border-radius: inherit; background: none; color: inherit; font-family: var(--ui); font-size: var(--fs-m); line-height: var(--lh-snug); appearance: none; }
.ui-input:focus, .ui-input:focus-visible { outline: none; }
.ui-input::placeholder { color: var(--ink-3); opacity: 1; }
.ui-input.is-num { font-variant-numeric: tabular-nums; }
select.ui-input { padding-right: calc(var(--sp-3) * 2 + var(--icon-m)); cursor: pointer; text-overflow: ellipsis; }
.ui-control > select.ui-input + .icon { position: absolute; top: 50%; right: var(--sp-3); margin-top: calc(var(--icon-m) / -2); }
textarea.ui-input { min-height: calc(var(--sp-12) * 2); padding-block: var(--sp-3); resize: vertical; line-height: var(--lh-body); }
.ui-hint { font-size: var(--fs-s); line-height: var(--lh-snug); color: var(--ink-2); }
.ui-error { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-s); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--bad-ink); }
.ui-error .icon { flex: none; width: var(--icon-s); height: var(--icon-s); margin-top: 1px; stroke-width: 2; }
.ui-error:empty { margin-top: calc(var(--sp-2) * -1); }
.ui-field.is-invalid .ui-control { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.ui-field.is-invalid .ui-control:focus-within { border-color: var(--bad); }
.ui-control.is-disabled { background: var(--card); opacity: var(--o-disabled); }
.ui-input:disabled { cursor: not-allowed; }

/* Casilla e interruptor: todo el renglón se toca. */
.ui-check, .ui-switch { position: relative; display: flex; align-items: center; gap: var(--sp-3); min-height: var(--hit); font-size: var(--fs-m); line-height: var(--lh-snug); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-check > input { flex: none; width: var(--icon-l); height: var(--icon-l); margin: 0; accent-color: var(--accent); }
.ui-check > span > small, .ui-switch > span > small { display: block; margin-top: 2px; font-size: var(--fs-s); color: var(--ink-2); }
.ui-switch { justify-content: space-between; }
.ui-switch > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-switch-track { order: 2; flex: none; position: relative; width: var(--hit); height: var(--sp-6); border-radius: var(--r-pill); background: var(--field-line); transition: background-color var(--dur-2) var(--ease-move); }
.ui-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: var(--sp-5); height: var(--sp-5); border-radius: 50%; background: var(--surface); box-shadow: var(--ring-soft); transition: transform var(--dur-2) var(--ease-out); }
.ui-switch > input:checked ~ .ui-switch-track { background: var(--accent); }
.ui-switch > input:checked ~ .ui-switch-track::after { transform: translateX(var(--sp-5)); }
.ui-switch > input:focus-visible ~ .ui-switch-track { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.ui-switch > input:disabled ~ * { opacity: var(--o-disabled); }

/* ───────── Tarjetas ───────── */
.ui-card { min-width: 0; padding: var(--sp-4); border-radius: var(--r-m); background: var(--card); color: var(--ink); box-shadow: var(--shadow-card, var(--elev-0)); }
.ui-card.is-flush { padding: 0; overflow: hidden; }
.ui-card.is-outline { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ui-card .ui-card, .sheet .ui-card .ui-card { background: var(--surface); box-shadow: var(--elev-0); }
a.ui-card, button.ui-card { display: block; width: 100%; border: 0; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--dur-1) var(--ease-move); }
a.ui-card:active, button.ui-card:active { background: var(--sunken); }
.ui-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.ui-card-head > .ui-btn.is-quiet { flex: none; margin: calc(var(--sp-2) * -1) calc(var(--sp-3) * -1) calc(var(--sp-2) * -1) 0; }
.ui-card.is-flush > .ui-card-head { margin: 0; padding: var(--sp-4) var(--sp-4) var(--sp-2); }

/* ───────── Insignias ─────────
   El estado se lee en el texto; el punto o el icono lo acompañan. Nunca solo color. */
.ui-badge { display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 100%; font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: var(--lh-snug); color: var(--ink-2); white-space: nowrap; }
.ui-badge::before { content: ''; flex: none; width: var(--sp-2); height: var(--sp-2); border-radius: 50%; background: currentColor; }
.ui-badge.is-icon::before { content: none; }
.ui-badge .icon { flex: none; width: var(--icon-s); height: var(--icon-s); stroke-width: 2; }
.ui-badge.is-ok { color: var(--ok-ink); }
.ui-badge.is-warn { color: var(--warn-ink); }
.ui-badge.is-bad { color: var(--bad-ink); }
.ui-badge.is-info { color: var(--accent-ink); }
.ui-badge.is-solid { padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); background: var(--sunken); color: var(--ink); }
.ui-badge.is-solid.is-ok { background: var(--ok-soft); color: var(--ok-ink); }
.ui-badge.is-solid.is-warn { background: var(--warn-soft); color: var(--warn-ink); }
.ui-badge.is-solid.is-bad { background: var(--bad-soft); color: var(--bad-ink); }
/* Sobre el fondo suave del acento el texto va en tinta (el acento de un negocio no siempre se lee ahí); el acento queda en el punto o el icono. */
.ui-badge.is-solid.is-info { background: var(--accent-soft); color: var(--ink); }
.ui-badge.is-solid.is-info::before { background: var(--accent-ink); }
.ui-badge.is-solid.is-info .icon { color: var(--accent-ink); }
/* Cuenta de pendientes (avisos sin leer). */
.ui-count { display: inline-grid; place-items: center; min-width: var(--sp-5); height: var(--sp-5); padding: 0 var(--sp-1); border-radius: var(--r-pill); background: var(--accent-ink); color: var(--on-strong); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1; font-variant-numeric: tabular-nums; }

/* ───────── Chips (filtros) ───────── */
.ui-chips { display: flex; gap: var(--sp-2); margin-inline: calc(var(--gutter) * -1); padding: var(--sp-1) var(--gutter); overflow-x: auto; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.ui-chips::-webkit-scrollbar { display: none; }
.ui-chips.is-wrap { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; }
.ui-chip { position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--h-s); max-width: 100%; padding: var(--sp-1) var(--sp-3); border: 0; border-radius: var(--r-s); background: var(--card); color: var(--ink-2); font-family: var(--ui); font-size: var(--fs-s); font-weight: var(--fw-medium); line-height: var(--lh-snug); white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-1) var(--ease-move), color var(--dur-1) var(--ease-move); }
.ui-chip > span { overflow: hidden; text-overflow: ellipsis; }
.ui-chip .icon { flex: none; width: var(--icon-s); height: var(--icon-s); stroke-width: 2; }
.ui-chip[aria-pressed="true"], .ui-chip[aria-current="page"], .ui-chip[aria-current="true"] { background: var(--ink); color: var(--bg); font-weight: var(--fw-semi); }
.ui-chip:active { background: var(--sunken); }
.ui-chip[aria-pressed="true"]:active, .ui-chip[aria-current="page"]:active, .ui-chip[aria-current="true"]:active { background: var(--ink); }
@media (hover: hover) { .ui-chip:not([aria-pressed="true"]):not([aria-current]):hover { background: var(--sunken); color: var(--ink); } }

/* ───────── Listas y renglones ───────── */
.ui-list { list-style: none; margin: 0; padding: 0; border-radius: var(--r-m); background: var(--card); overflow: hidden; box-shadow: var(--shadow-card, var(--elev-0)); }
.ui-list.is-plain { border-radius: 0; background: none; box-shadow: var(--elev-0); }
.ui-list > li + li { border-top: 1px solid var(--line); }
.ui-card .ui-list { background: none; border-radius: 0; box-shadow: var(--elev-0); }
.ui-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--h-row); padding: var(--sp-3) var(--sp-4); border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; }
.ui-list.is-plain .ui-row { padding-inline: 0; }
a.ui-row, button.ui-row { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-1) var(--ease-move); }
a.ui-row:active, button.ui-row:active { background: var(--tap-2); }
a.ui-row:focus-visible, button.ui-row:focus-visible { outline-offset: -2px; }
@media (hover: hover) { a.ui-row:hover, button.ui-row:hover { background: var(--tap); } }
.ui-row-lead { flex: none; display: grid; place-items: center; width: var(--sp-10); height: var(--sp-10); border-radius: var(--r-s); background: var(--surface); color: var(--ink-2); overflow: hidden; }
.ui-row-lead img { width: 100%; height: 100%; object-fit: cover; }
.ui-row-lead .icon { width: var(--icon-m); height: var(--icon-m); stroke-width: var(--icon-w); }
.ui-row-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); }
.ui-row-body { flex: 1 1 8rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-row-title { font-size: var(--fs-m); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--ink); }
.ui-row-sub { font-size: var(--fs-s); line-height: var(--lh-snug); color: var(--ink-2); }
.ui-row-end { flex: none; max-width: 100%; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; font-size: var(--fs-m); font-weight: var(--fw-semi); line-height: var(--lh-snug); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-row-end > small { font-size: var(--fs-s); font-weight: var(--fw-regular); color: var(--ink-2); }
.ui-row > .icon { flex: none; width: var(--icon-m); height: var(--icon-m); color: var(--ink-3); stroke-width: var(--icon-w); }

/* ───────── Indicadores (KPI) ───────── */
.ui-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.ui-kpi { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding: var(--sp-4); border: 0; border-radius: var(--r-m); background: var(--card); color: var(--ink); font: inherit; text-align: left; text-decoration: none; box-shadow: var(--shadow-card, var(--elev-0)); }
.ui-kpi.is-wide { grid-column: 1 / -1; }
.ui-kpi-label { font-size: var(--fs-s); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--ink-2); }
.ui-kpi-value { font-family: var(--display); font-size-adjust: var(--dfa, none); font-size: clamp(var(--fs-xl), 6.6vw, var(--fs-2xl)); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--dls, var(--track-figure)); font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.ui-kpi.is-wide .ui-kpi-value { font-size: clamp(var(--fs-2xl), 9vw, var(--fs-3xl)); }
.ui-kpi-note { font-size: var(--fs-s); line-height: var(--lh-snug); color: var(--ink-2); }
.ui-delta { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-s); font-weight: var(--fw-semi); line-height: var(--lh-snug); color: var(--ink-2); }
.ui-delta .icon { flex: none; width: var(--icon-s); height: var(--icon-s); stroke-width: 2.2; }
.ui-delta.is-up { color: var(--ok-ink); }
.ui-delta.is-down { color: var(--bad-ink); }
a.ui-kpi, button.ui-kpi { cursor: pointer; transition: background-color var(--dur-1) var(--ease-move); }
a.ui-kpi:active, button.ui-kpi:active { background: var(--sunken); }

/* ───────── Progreso ───────── */
.ui-progress { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.ui-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-s); line-height: var(--lh-snug); }
.ui-progress-head > span { font-weight: var(--fw-medium); color: var(--ink); overflow-wrap: anywhere; }
.ui-progress-head > b { flex: none; font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.ui-progress-track { height: var(--sp-2); border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.ui-progress-track > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--mark); transition: width var(--dur-3) var(--ease-out); }
.ui-progress.is-s .ui-progress-track { height: var(--sp-1); }
.ui-progress.is-done .ui-progress-track > i { background: var(--ok); }
.ui-progress.is-warn .ui-progress-track > i { background: var(--warn-fill); }
.ui-progress-note { margin: 0; font-size: var(--fs-s); line-height: var(--lh-snug); color: var(--ink-2); }

/* ───────── Selector de opciones y pestañas ───────── */
.ui-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-1); padding: var(--sp-1); border-radius: var(--r-s); background: var(--card); }
.ui-card .ui-seg { background: var(--sunken); }
.ui-seg > * { position: relative; display: grid; place-items: center; min-width: 0; min-height: var(--h-s); padding: var(--sp-1) var(--sp-2); border: 0; border-radius: var(--r-xs); background: none; color: var(--ink-2); font-family: var(--ui); font-size: var(--fs-s); font-weight: var(--fw-medium); line-height: var(--lh-tight); text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-1) var(--ease-move), color var(--dur-1) var(--ease-move); }
.ui-seg > [aria-pressed="true"], .ui-seg > [aria-selected="true"], .ui-seg > [aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: var(--fw-semi); box-shadow: var(--ring-soft); }
.ui-tabs { display: flex; gap: var(--sp-5); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tab { flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--hit); padding: 0 2px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--ink-2); font-family: var(--ui); font-size: var(--fs-m); font-weight: var(--fw-medium); line-height: var(--lh-snug); white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-tab[aria-selected="true"], .ui-tab[aria-current="page"] { color: var(--ink); font-weight: var(--fw-semi); border-bottom-color: var(--ink); }
.ui-tab:focus-visible { outline-offset: -2px; }

/* ───────── Cantidad (− 2 +) y pasos de un proceso ───────── */
.ui-stepper { display: inline-flex; align-items: center; border-radius: var(--r-s); background: var(--card); }
.ui-card .ui-stepper { background: var(--surface); }
.ui-stepper > button { display: grid; place-items: center; width: var(--hit); height: var(--hit); padding: 0; border: 0; border-radius: var(--r-s); background: none; color: var(--ink); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ui-stepper > button .icon { width: var(--icon-m); height: var(--icon-m); stroke-width: 2.2; }
.ui-stepper > button:active { background: var(--tap-2); }
.ui-stepper > button:disabled { opacity: var(--o-disabled); pointer-events: none; }
.ui-stepper > output { min-width: var(--sp-8); padding-inline: var(--sp-1); text-align: center; font-size: var(--fs-m); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.ui-steps { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.ui-steps > ol { display: flex; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.ui-steps > ol > li { flex: 1; height: var(--sp-1); border-radius: var(--r-pill); background: var(--line); }
.ui-steps > ol > li.is-done, .ui-steps > ol > li[aria-current="step"] { background: var(--mark); }
.ui-steps > p { margin: 0; font-size: var(--fs-s); line-height: var(--lh-snug); color: var(--ink-2); }
.ui-steps > p > b { font-weight: var(--fw-semi); color: var(--ink); }

/* ───────── Encabezados ───────── */
.ui-pagehead { display: flex; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
.ui-pagehead > .ui-iconbtn:first-child { margin: calc(var(--sp-2) * -1) 0 0 calc(var(--sp-3) * -1); }
.ui-pagehead-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.ui-pagehead-actions { flex: none; display: flex; align-items: center; gap: var(--sp-1); margin-top: calc(var(--sp-2) * -1); }
.ui-sechead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--h-s); min-width: 0; }
.ui-sechead > .ui-btn { margin-right: calc(var(--sp-3) * -1); }

/* ───────── Estados: vacío, cargando, error, avisos ───────── */
.ui-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-10) var(--sp-6); text-align: center; color: var(--ink-2); }
.ui-empty-mark { display: grid; place-items: center; width: var(--sp-12); height: var(--sp-12); margin-bottom: var(--sp-2); border-radius: var(--r-m); background: var(--card); color: var(--ink-2); }
.ui-card .ui-empty-mark { background: var(--surface); }
.ui-empty-mark .icon { width: var(--icon-l); height: var(--icon-l); stroke-width: var(--icon-w); }
.ui-empty > p { margin: 0; max-width: var(--measure); font-size: var(--fs-m); line-height: var(--lh-body); }
.ui-empty > .ui-btn { margin-top: var(--sp-3); }
.ui-empty.is-error .ui-empty-mark { background: var(--bad-soft); color: var(--bad-ink); }
.ui-empty.is-ok .ui-empty-mark { background: var(--ok-soft); color: var(--ok-ink); }
.ui-empty.is-wait .ui-empty-mark { background: var(--warn-soft); color: var(--warn-ink); }
.ui-empty.is-off .ui-empty-mark { background: var(--sunken); color: var(--ink-2); }
.ui-empty.is-compact { padding: var(--sp-6) var(--sp-4); }
.ui-empty.is-compact .ui-empty-mark { width: var(--sp-10); height: var(--sp-10); margin-bottom: var(--sp-1); }
.ui-empty.is-compact > p { font-size: var(--fs-s); }

.ui-sk { display: block; border-radius: var(--r-xs); background: var(--sunken); animation: ui-breathe var(--dur-loop) var(--ease-move) infinite alternate; }
.ui-sk.is-line { height: var(--fs-s); width: 60%; }
.ui-sk.is-line.is-full { width: 100%; }
.ui-sk.is-title { height: var(--fs-2xl); width: 46%; }
.ui-sk.is-block { height: calc(var(--sp-12) * 2); border-radius: var(--r-m); }
.ui-sk.is-row { height: var(--h-row); border-radius: var(--r-s); }
.ui-sk.is-circle { width: var(--sp-10); height: var(--sp-10); border-radius: 50%; }
.ui-skeleton { display: grid; gap: var(--sp-3); }
.ui-skeleton > .ui-kpis > .ui-sk { height: calc(var(--sp-10) * 2); border-radius: var(--r-m); }
@keyframes ui-breathe { from { opacity: 1; } to { opacity: .5; } }

.ui-notice { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m); background: var(--card); color: var(--ink); }
.ui-card .ui-notice { background: var(--surface); }
.ui-notice > .icon { flex: none; width: var(--icon-m); height: var(--icon-m); margin-top: 2px; stroke-width: 2; color: var(--ink-2); }
.ui-notice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-s); line-height: var(--lh-body); }
.ui-notice-body > b { font-size: var(--fs-m); font-weight: var(--fw-semi); line-height: var(--lh-snug); }
.ui-notice-body > .ui-btn { align-self: flex-start; margin: var(--sp-1) 0 0 calc(var(--sp-3) * -1); }
.ui-notice.is-row { align-items: center; padding-top: var(--sp-1); padding-bottom: var(--sp-1); padding-right: var(--sp-2); min-height: var(--h-m); }
.ui-notice.is-row > .icon { margin-top: 0; }
.ui-notice.is-row > .ui-notice-body { flex-direction: row; align-items: center; gap: var(--sp-2); }
.ui-notice.is-row > .ui-notice-body > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-notice.is-row > .ui-notice-body > .ui-btn { align-self: center; flex: none; margin: 0; }
.ui-notice.is-info { background: var(--accent-soft); }
.ui-notice.is-info > .icon { color: var(--accent-ink); }
.ui-notice.is-ok { background: var(--ok-soft); }
.ui-notice.is-ok > .icon { color: var(--ok-ink); }
.ui-notice.is-warn { background: var(--warn-soft); }
.ui-notice.is-warn > .icon { color: var(--warn-ink); }
.ui-notice.is-bad { background: var(--bad-soft); }
.ui-notice.is-bad > .icon { color: var(--bad-ink); }

/* Guardado: lo que pasó con lo que la persona acaba de cambiar. */
.ui-save { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 1px; min-height: var(--sp-6); font-size: var(--fs-s); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--ink-2); }
.ui-save .icon { flex: none; width: var(--icon-s); height: var(--icon-s); stroke-width: 2.2; }
.ui-save.is-saving { color: var(--ink-2); }
.ui-save.is-saved { color: var(--ok-ink); }
.ui-save.is-error { color: var(--bad-ink); }
.ui-save > button { min-height: var(--hit); margin-block: calc(var(--sp-2) * -1); padding: 0 var(--sp-1); border: 0; background: none; color: var(--accent-ink); font: inherit; font-weight: var(--fw-semi); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ───────── Avisos breves ─────────
   Se muestran en la caja de avisos de siempre (#toasts), sobre la navegación. */
.ui-toast { display: flex; align-items: center; gap: var(--sp-3); max-width: min(calc(var(--sp-12) * 10), 100%); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-s); background: var(--ink); color: var(--bg); font-size: var(--fs-s); font-weight: var(--fw-medium); line-height: var(--lh-snug); box-shadow: var(--elev-3); pointer-events: auto; animation: ui-rise var(--dur-2) var(--ease-out) both; }
.ui-toast > .icon { flex: none; width: var(--icon-m); height: var(--icon-m); stroke-width: 2.2; }
.ui-toast > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-toast.is-bad { background: var(--bad-ink); color: var(--on-strong); }
.ui-toast > button { flex: none; min-height: var(--hit); margin: calc(var(--sp-3) * -1) calc(var(--sp-2) * -1) calc(var(--sp-3) * -1) 0; padding: 0 var(--sp-2); border: 0; background: none; color: inherit; font: inherit; font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@keyframes ui-rise { from { opacity: 0; transform: translateY(var(--sp-3)); } }

/* ───────── Hojas ─────────
   El mecanismo es el de siempre (core.js: foco, Escape, Atrás). Esto es su vestido nuevo, para las hojas
   que se abren con ui-live.js; las demás siguen como estaban. */
.sheet-wrap.ui-overlay .sheet-head { padding: var(--sp-4) var(--sp-2) var(--sp-2) var(--sp-5); }
.sheet-wrap.ui-overlay .sheet-head h2 { font-size: var(--fs-xl); font-weight: var(--fw-semi); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.sheet-wrap.ui-overlay .sheet-body { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-2) var(--sp-5) calc(var(--sp-5) + var(--safe-b)); }
.sheet-wrap.ui-overlay .ui-input:focus { scroll-margin-block: var(--sp-16); }
/* Las acciones de una hoja: siempre a la vista, por encima del área segura del teléfono. */
.ui-sheet-foot { position: sticky; bottom: calc((var(--sp-5) + var(--safe-b)) * -1); z-index: var(--z-raise); display: flex; gap: var(--sp-2); margin: var(--sp-2) calc(var(--sp-5) * -1) calc((var(--sp-5) + var(--safe-b)) * -1); padding: var(--sp-3) var(--sp-5) calc(var(--sp-4) + var(--safe-b)); border-top: 1px solid var(--line); background: var(--surface); }
.ui-sheet-foot > .ui-btn { flex: 1; }
.ui-sheet-foot.is-stack { flex-direction: column; }

/* ───────── Marco ─────────
   El mismo para todos: aviso fijo (si lo hay), barra superior, navegación de contexto o columna de destinos,
   contenido y navegación inferior. En el teléfono, de arriba abajo; desde 1024 px, con columna a la izquierda
   (`is-side`) y sin navegación inferior. La columna del contenido (su ancho y sus márgenes) todavía la define
   cada pantalla anterior en styles.css; aquí solo se le da su lugar. */
.ui-frame { min-height: 100dvh; display: flex; flex-direction: column; --frame-col: var(--page-max); }
.ui-frame.is-col-full { --frame-col: none; }
.ui-frame-main:focus { outline: none; }
.ui-skip { position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: var(--z-toast); min-height: var(--hit); padding: 0 var(--sp-4); border: 0; border-radius: var(--r-s); background: var(--ink); color: var(--bg); font-family: var(--ui); font-size: var(--fs-m); font-weight: var(--fw-semi); cursor: pointer; transform: translateY(calc((var(--hit) + var(--sp-4)) * -1)); }
.ui-skip:focus-visible { transform: none; }
.ui-frame-note.is-offline { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--note-h); padding: var(--sp-1) var(--sp-3); background: var(--warn-soft); color: var(--warn-ink); font-size: var(--fs-s); font-weight: var(--fw-medium); line-height: var(--lh-snug); text-align: center; }
.ui-frame-note.is-offline > .icon { flex: none; width: var(--icon-s); height: var(--icon-s); stroke-width: 2; }

/* ───────── Navegación ───────── */
.ui-topbar { position: sticky; top: 0; z-index: var(--z-bar); border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.ui-topbar-in { display: flex; align-items: center; gap: var(--sp-2); max-width: var(--frame-col); min-height: var(--bar-h); margin: 0 auto; padding: 0 var(--sp-2) 0 var(--sp-4); }
.ui-topbar-in > .ui-identity { flex: 0 1 auto; }
.ui-topbar-actions { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }
.ui-iconbtn > .ui-dot { position: absolute; top: var(--sp-2); right: var(--sp-2); width: var(--sp-2); height: var(--sp-2); border-radius: 50%; background: var(--accent-ink); box-shadow: 0 0 0 2px var(--surface); }
.ui-iconbtn > .ui-dot[hidden] { display: none; }
.ui-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar); padding-bottom: var(--safe-b); border-top: 1px solid var(--line); background: var(--surface); }
.ui-nav.is-static { position: static; }
.ui-nav > ul { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-width: var(--page-max); height: var(--nav-h); margin: 0 auto; padding: 0; list-style: none; }
.ui-nav a, .ui-nav button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); width: 100%; height: 100%; min-width: 0; padding: 0 2px; border: 0; background: none; color: var(--ink-2); font-family: var(--ui); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: var(--lh-tight); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-nav a > span, .ui-nav button > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-nav .icon { width: var(--icon-l); height: var(--icon-l); stroke-width: var(--icon-w); }
.ui-nav [aria-current] { color: var(--ink); font-weight: var(--fw-semi); }
.ui-nav [aria-current] .icon { stroke-width: 2.2; }
.ui-nav [aria-current]::before { content: ''; position: absolute; top: -1px; left: 50%; width: var(--sp-6); height: 2px; border-radius: var(--r-pill); background: var(--ink); transform: translateX(-50%); }
.ui-nav .ui-count { position: absolute; top: var(--sp-2); left: calc(50% + var(--sp-2)); }
.ui-nav a:focus-visible, .ui-nav button:focus-visible { outline-offset: -3px; }
.ui-nav a:active, .ui-nav button:active { background: var(--tap-2); }
[data-look="propia"][data-icons="grueso"] .ui-nav [aria-current] .icon { stroke-width: 2.6; }

/* Columna de destinos. En el teléfono no se ve (los destinos están en la navegación inferior), salvo que sea
   una fila (`is-strip`): los negocios de quien administra, que se deslizan bajo la barra superior y se
   desvanecen al borde para que se note que la fila sigue. */
.ui-rail { display: none; }
.ui-rail.is-strip { display: block; position: sticky; top: var(--bar-h); z-index: var(--z-sticky); border-bottom: 1px solid var(--line); background: var(--surface); }
.ui-rail-in { display: flex; gap: var(--sp-1); padding: 0 var(--sp-5) 0 var(--sp-2); overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to left, transparent, var(--fade) var(--sp-5)); mask-image: linear-gradient(to left, transparent, var(--fade) var(--sp-5)); }
.ui-rail-in::-webkit-scrollbar { display: none; }
.ui-rail-group { display: flex; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.ui-rail-group.is-wide { display: none; }
.ui-rail-group > li { display: flex; flex: none; min-width: 0; }
.ui-rail-item { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--hit); padding: 0 var(--sp-3); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-2); font-family: var(--ui); font-size: var(--fs-s); font-weight: var(--fw-medium); line-height: var(--lh-snug); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-rail-item > .icon { width: var(--icon-m); height: var(--icon-m); stroke-width: var(--icon-w); }
.ui-rail-item > i { flex: none; width: var(--sp-2); height: var(--sp-2); border-radius: 50%; background: var(--dot, var(--accent)); }
.ui-rail-item > img { flex: none; width: var(--icon-m); height: var(--icon-m); border-radius: var(--r-xs); object-fit: contain; }
.ui-rail-item > span { min-width: 0; }
.ui-rail-item[aria-current] { border-bottom-color: var(--ink); color: var(--ink); font-weight: var(--fw-semi); }
.ui-rail-item:focus-visible { outline-offset: -3px; }
.ui-rail-item:active { background: var(--tap-2); }

/* ───────── Producto ─────────
   La tarjeta con la que se elige un producto. Va acostada: la foto a la izquierda y, a su lado, el nombre, la
   presentación con su precio, la condición y una frase que lo describe; el control, en la esquina de abajo.
   Se ven cuatro en un teléfono de hoy sin encoger la letra. Las presentaciones de un producto van debajo, cada una
   con su precio y su botón. */
/* Una columna en un teléfono; en pantallas más anchas, tantas como quepan con 288 px por tarjeta. */
.ui-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--sp-12) * 6)), 1fr)); gap: var(--sp-2); }
.ui-product { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-m); background: var(--card); overflow: hidden; }
.ui-product.is-selected::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--ink); border-radius: inherit; pointer-events: none; }
.ui-product-head { position: relative; display: flex; flex: 1; min-width: 0; }
.ui-product-main { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-content: start; column-gap: var(--sp-3); flex: 1; min-width: 0; padding: var(--sp-2); border: 0; background: none; color: var(--ink); font-family: var(--ui); text-align: left; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ui-product-main:focus-visible { outline-offset: -3px; }
.ui-product-main > * { grid-column: 2; min-width: 0; }
/* La foto: un cuadro fijo, igual en todas las tarjetas, con foto o sin ella. */
.ui-product-main > .ui-product-media { grid-column: 1; grid-row: 1 / -1; align-self: start; display: block; width: calc(var(--sp-10) * 2 + var(--sp-2)); border-radius: var(--r-s); background: var(--surface); overflow: hidden; }
.ui-product-media > img, .ui-product-blank { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.ui-product-media > img { object-fit: cover; }
.ui-product-media.is-whole > img { object-fit: contain; }
.ui-product-blank { display: grid; place-items: center; background: var(--sunken); color: var(--ink-3); }
.ui-product-blank > .icon { width: var(--icon-m); height: var(--icon-m); stroke-width: var(--icon-w); }
.ui-product.is-dim .ui-product-media > img { opacity: var(--o-disabled); }
.ui-product.is-dim .ui-product-name { color: var(--ink-2); }
.ui-product-main > .ui-product-name { grid-row: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: var(--fs-s); font-weight: var(--fw-semi); line-height: var(--lh-snug); }
/* La presentación va pegada a su precio: se leen juntos. La condición sigue en el mismo renglón si cabe. */
.ui-product-main > .ui-product-line { grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); margin-top: 2px; font-size: var(--fs-m); line-height: var(--lh-snug); }
.ui-product-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); min-width: 0; font-variant-numeric: tabular-nums; }
.ui-product-price > b { font-size: var(--fs-m); font-weight: var(--fw-semi); letter-spacing: var(--track-title); }
.ui-product-price > small { font-size: var(--fs-s); font-weight: var(--fw-medium); color: var(--ink-2); }
.ui-product-price > s { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--ink-2); }
.ui-product-price > em { font-family: var(--ui); font-size: var(--fs-xs); font-style: normal; font-weight: var(--fw-semi); font-variant-numeric: normal; color: var(--accent-ink); }
.ui-product-meta { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); min-width: 0; font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--ink-2); }
.ui-product-status, .ui-product-tag { font-weight: var(--fw-medium); }
.ui-product-status.is-warn, .ui-product-opt > .is-warn { color: var(--warn-ink); }
.ui-product-status.is-bad, .ui-product-opt > .is-bad { color: var(--bad-ink); }
.ui-product-status.is-info, .ui-product-tag, .ui-product-opt > .is-info { color: var(--accent-ink); }
.tiles .bo .ui-product-status.is-info { font-weight: var(--fw-semi); }
.tiles .bo .ui-product-add { background: var(--accent); color: var(--on-accent); }
/* El pie: la descripción y, a su derecha, el lugar del control. Mide lo que el control aunque no haya descripción. */
.ui-product-main > .ui-product-foot { grid-row: 3; align-self: end; display: block; box-sizing: border-box; min-height: var(--hit); padding: 2px calc(var(--hit) + var(--sp-2)) 0 0; }
.ui-product-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: var(--fs-xs); font-weight: var(--fw-regular); line-height: var(--lh-snug); color: var(--ink-2); }
.ui-product-ctl { position: absolute; right: var(--sp-2); bottom: var(--sp-2); display: flex; }
/* Con piezas en la venta, el «− n +» toma el lugar de la descripción (que conserva su espacio: la tarjeta no cambia de alto). */
.ui-product.is-counting .ui-product-desc { visibility: hidden; }
/* La tarjeta de un producto con presentaciones conserva su descripción: se le hace lugar a «n ›». */
.ui-product.is-selected:not(.is-counting) .ui-product-foot { padding-right: calc(var(--hit) + var(--sp-8) + var(--sp-1)); }
.ui-product-qty, .ui-product-add { display: inline-flex; align-items: center; justify-content: center; min-width: var(--hit); height: var(--hit); padding: 0; border: 0; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--ring-soft); color: var(--ink); font-family: var(--ui); font-variant-numeric: tabular-nums; }
.ui-product-qty > button, .ui-product-add { font-size: var(--fs-xl); font-weight: var(--fw-regular); line-height: 1; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ui-product-qty > button { width: var(--hit); height: var(--hit); padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; font-family: var(--ui); }
.ui-product-qty > output { min-width: var(--sp-5); padding: 0 2px; text-align: center; font-size: var(--fs-m); font-weight: var(--fw-semi); }
.ui-product-qty:not(.is-on) > button:first-child, .ui-product-qty:not(.is-on) > output { display: none; }
.ui-product-add.is-on { gap: var(--sp-1); padding: 0 var(--sp-2) 0 var(--sp-3); }
.ui-product-add > b { font-size: var(--fs-m); font-weight: var(--fw-semi); }
.ui-product-add > .icon { width: var(--icon-s); height: var(--icon-s); stroke-width: 2; }
/* El foco de los botones redondos va por dentro, sobre su propio fondo. */
.ui-product-qty > button:focus-visible, .ui-product-add:focus-visible, .ui-product-opt:focus-visible { outline-offset: -3px; }
.ui-product-qty > button:active, .ui-product-add:active, .ui-product-opt:active { background: var(--sunken); }
/* Las presentaciones: cada una dice su nombre y su precio, y se suma con un toque. */
/* Se reparten el renglón por igual: cinco presentaciones caben juntas desde 308 px de tarjeta; si una necesita más, pasa al siguiente. */
.ui-product-opts { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: 0 var(--sp-2) var(--sp-2); }
.ui-product-opt { position: relative; display: flex; flex: 1 1 calc(var(--hit) + var(--sp-2) + 2px); flex-direction: column; align-items: center; justify-content: center; min-width: min-content; max-width: 100%; min-height: calc(var(--hit) + var(--sp-1)); padding: var(--sp-2) 2px var(--sp-1); border: 0; border-radius: var(--r-s); background: var(--surface); box-shadow: var(--ring-soft); color: var(--ink); font-family: var(--ui); line-height: var(--lh-snug); white-space: nowrap; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ui-product-opt > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--ink-2); }
.ui-product-opt > b { font-size: var(--fs-s); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.ui-product-opt > small { font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.ui-product-opt.is-dim > b { color: var(--ink-2); }
.ui-product-opt.is-on { box-shadow: inset 0 0 0 2px var(--ink); }
/* Cuántas van de esa presentación: sobre su esquina, por fuera (la presentación deja ese alto libre arriba), sin tapar su nombre. */
.ui-product-opt > i { position: absolute; top: calc(var(--sp-2) * -1); right: calc(var(--sp-1) * -1 + 2px); box-shadow: 0 0 0 2px var(--card); min-width: var(--sp-4); height: var(--sp-4); padding: 0 var(--sp-1); border-radius: var(--r-pill); background: var(--ink); color: var(--surface); font-size: var(--fs-xs); font-style: normal; font-weight: var(--fw-semi); line-height: var(--sp-4); text-align: center; font-variant-numeric: tabular-nums; }
.ui-sk.is-product { height: calc(var(--sp-12) * 2 + var(--sp-2)); border-radius: var(--r-m); }

/* ───────── Identidad: la plataforma y cada negocio ─────────
   Un solo dibujo para "quién es": el logotipo del negocio si lo tiene, su punto de color si no, y su nombre.
   La plataforma usa el mismo lugar con su logotipo oficial cuando exista (marca.js); nunca se mezclan. */
.ui-identity { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; color: var(--ink); font-size: var(--fs-m); font-weight: var(--fw-semi); line-height: var(--lh-snug); letter-spacing: var(--track-title); text-decoration: none; }
.ui-identity > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-identity > img { flex: none; width: var(--sp-6); height: var(--sp-6); border-radius: var(--r-xs); object-fit: contain; }
.ui-identity > i { flex: none; width: var(--sp-3); height: var(--sp-3); border-radius: 50%; background: var(--dot, var(--biz)); }
a.ui-identity { min-height: var(--hit); }
.ui-identity > .ui-identity-word { width: auto; height: var(--sp-6); max-width: 100%; border-radius: 0; }
.ui-identity.is-l > .ui-identity-word { width: auto; height: var(--sp-10); }
.ui-identity.is-pick { min-height: var(--hit); max-width: 100%; padding: 0 var(--sp-2) 0 var(--sp-3); border: 0; border-radius: var(--r-s); background: var(--card); font-family: var(--ui); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-identity.is-pick > .icon { flex: none; width: var(--icon-s); height: var(--icon-s); stroke-width: 2; color: var(--ink-2); }
.ui-identity.is-pick > img { mix-blend-mode: multiply; }
.ui-identity.is-pick:disabled { padding-left: 0; background: none; cursor: default; }
.ui-identity.is-l { gap: var(--sp-3); font-size: var(--fs-xl); }
.ui-identity.is-l > img { width: var(--sp-10); height: var(--sp-10); border-radius: var(--r-s); }
.ui-identity.is-l > i { width: var(--sp-4); height: var(--sp-4); }

/* ═════════ VALOR: el escenario y sus piezas ═════════
   Para lo que la persona gana con su trabajo: beneficios, Fondo de Ahorro, Crecimiento, Liga LIDER4, logros y
   recompensas. Tinta con luz del color del negocio, planos que se levantan y piezas con relieve.
   Las piezas no traen reglas: el texto, la condición y las cifras los pone quien las usa, con datos reales.
   Lo que todavía no tiene reglas se muestra como "Próximamente", sin inventar condiciones. */
.ui-stage { position: relative; isolation: isolate; min-width: 0; padding: var(--sp-5); border-radius: var(--r-l); overflow: hidden; color: var(--on-stage); background-color: var(--stage); background-image: linear-gradient(165deg, var(--stage-2) 0%, var(--stage) 60%); box-shadow: inset 0 1px 0 var(--stage-edge), var(--elev-2); }
/* La luz: entra por arriba a la derecha, con el color del negocio. */
.ui-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(95% 70% at 100% 0%, var(--stage-light) 0%, transparent 64%); }
/* El piso: el fondo se oscurece hacia abajo y da dónde apoyar las piezas. */
.ui-stage::after { content: ''; position: absolute; inset: 55% 0 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, var(--stage-shade), transparent); }
.ui-stage .ui-title-1, .ui-stage .ui-title-2, .ui-stage .ui-title-3, .ui-stage .ui-text, .ui-stage .ui-figure { color: var(--on-stage); }
.ui-stage .ui-text-s, .ui-stage .ui-caption, .ui-stage .ui-progress-note { color: var(--on-stage-2); }
.ui-stage :focus-visible { outline-color: var(--on-stage); }
.ui-stage .ui-btn { background: transparent; border-color: var(--on-stage-2); color: var(--on-stage); }
.ui-stage .ui-btn:active { background: var(--stage-2); }
.ui-stage .ui-btn.is-primary { background: var(--on-stage); border-color: var(--on-stage); color: var(--stage); box-shadow: var(--elev-0); }
.ui-stage .ui-btn.is-quiet { border-color: transparent; }
@media (hover: hover) {
  .ui-stage .ui-btn:hover { background: var(--stage-2); border-color: var(--on-stage); }
  .ui-stage .ui-btn.is-primary:hover { background: var(--on-stage-2); border-color: var(--on-stage-2); }
}
.ui-stage .ui-badge { color: var(--on-stage-2); }
.ui-stage .ui-badge.is-solid { background: var(--stage-2); color: var(--on-stage); box-shadow: inset 0 1px 0 var(--stage-edge); }
.ui-stage .ui-progress-head > span, .ui-stage .ui-progress-head > b { color: var(--on-stage); }
.ui-stage .ui-progress-track { background: var(--stage-line); box-shadow: inset 0 1px 2px var(--stage-shade); }
.ui-stage .ui-progress-track > i { background: var(--on-stage); }
/* Un plano levantado sobre el escenario (una cifra, un dato). */
.ui-plane { min-width: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m); background: var(--stage-2); box-shadow: inset 0 1px 0 var(--stage-edge), 0 6px 14px -8px var(--stage-cast); }
/* El mismo escenario en papel: para cuando el valor acompaña y no protagoniza. */
.ui-stage.is-paper { color: var(--ink); background-color: var(--card); background-image: linear-gradient(180deg, var(--surface) 0%, var(--card) 100%); box-shadow: inset 0 0 0 1px var(--line), var(--elev-2); }
.ui-stage.is-paper::before { background: radial-gradient(95% 70% at 100% 0%, var(--paper-light) 0%, transparent 64%); }
.ui-stage.is-paper::after { content: none; }
.ui-stage.is-paper .ui-title-1, .ui-stage.is-paper .ui-title-2, .ui-stage.is-paper .ui-title-3, .ui-stage.is-paper .ui-text, .ui-stage.is-paper .ui-figure { color: var(--ink); }
.ui-stage.is-paper .ui-text-s, .ui-stage.is-paper .ui-caption, .ui-stage.is-paper .ui-progress-note, .ui-stage.is-paper .ui-badge { color: var(--ink-2); }
.ui-stage.is-paper :focus-visible { outline-color: var(--accent-ink); }
.ui-stage.is-paper .ui-btn { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.ui-stage.is-paper .ui-btn.is-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ui-stage.is-paper .ui-badge.is-solid { background: var(--sunken); color: var(--ink); box-shadow: var(--elev-0); }
.ui-stage.is-paper .ui-progress-head > span, .ui-stage.is-paper .ui-progress-head > b { color: var(--ink); }
.ui-stage.is-paper .ui-progress-track { background: var(--line); box-shadow: var(--elev-0); }
.ui-stage.is-paper .ui-progress-track > i { background: var(--mark); }
.ui-stage.is-paper .ui-plane { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

/* Pieza con relieve: una medalla (disco), un escudo (la Liga) o una placa (un beneficio). Metal neutro con un
   centro de tinta; encendida, la rodea la luz del negocio. Apagada (por desbloquear o próximamente) se ve
   como la misma pieza sin luz, no como un hueco. */
.ui-medal { --m-size: var(--sp-16); position: relative; flex: none; display: grid; place-items: center; width: var(--m-size); height: var(--m-size); border-radius: 50%; color: var(--on-stage); background: radial-gradient(circle at 30% 22%, var(--metal-hi) 0%, transparent 42%), conic-gradient(from 215deg, var(--metal-1), var(--metal-2), var(--metal-1), var(--metal-3), var(--metal-2), var(--metal-1)); box-shadow: inset 0 -2px 4px var(--metal-lo), 0 10px 16px -8px var(--stage-cast); }
.ui-medal::before { content: ''; position: absolute; inset: 9%; border-radius: inherit; background: linear-gradient(155deg, var(--stage-2) 0%, var(--stage) 70%); box-shadow: inset 0 2px 3px var(--stage-cast), 0 1px 0 var(--metal-hi); }
.ui-medal > * { position: relative; }
.ui-medal .icon { width: 44%; height: 44%; stroke-width: var(--icon-w); }
.ui-medal.is-s { --m-size: var(--hit); }
.ui-medal.is-l { --m-size: calc(var(--sp-12) * 2); }
.ui-medal.is-shield { border-radius: 22% 22% 50% 50% / 16% 16% 56% 56%; }
.ui-medal.is-plate { border-radius: 28%; }
.ui-medal.is-lit { box-shadow: inset 0 -2px 4px var(--metal-lo), 0 0 0 2px var(--stage-glow), 0 10px 18px -8px var(--stage-glow), 0 10px 16px -8px var(--stage-cast); }
.ui-medal.is-dim { color: var(--on-stage-2); background: radial-gradient(circle at 30% 22%, var(--stage-edge) 0%, transparent 42%), conic-gradient(from 215deg, var(--metal-dim-1), var(--metal-dim-2), var(--metal-dim-1), var(--metal-dim-3), var(--metal-dim-2), var(--metal-dim-1)); }
.ui-medal.is-dim::before { box-shadow: inset 0 2px 3px var(--stage-cast), 0 1px 0 var(--stage-edge); }
/* Un destello recorre la pieza encendida una sola vez al aparecer. */
.ui-medal.is-lit::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 38%, var(--metal-hi) 50%, transparent 62%); background-size: 260% 100%; background-position: 130% 0; opacity: .7; animation: ui-glint calc(var(--dur-3) * 3) var(--ease-move) var(--dur-3) 1 both; }
@keyframes ui-glint { from { background-position: 130% 0; } to { background-position: -40% 0; } }

/* Anillo de avance (el nivel dentro de Crecimiento): la cifra va al centro. */
.ui-ring { --ring-size: calc(var(--sp-12) * 2 + var(--sp-6)); position: relative; flex: none; display: grid; place-items: center; width: var(--ring-size); height: var(--ring-size); }
.ui-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ui-ring circle { fill: none; stroke-width: 9; }
.ui-ring .is-track { stroke: var(--line); }
.ui-ring .is-value { stroke: var(--mark); stroke-linecap: round; transition: stroke-dashoffset var(--dur-3) var(--ease-out); }
.ui-ring-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-3); text-align: center; }
.ui-ring-in > b { font-family: var(--display); font-size-adjust: var(--dfa, none); font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--dls, var(--track-figure)); font-variant-numeric: lining-nums tabular-nums; }
.ui-ring-in > span { font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--ink-2); }
.ui-stage .ui-ring .is-track { stroke: var(--stage-line); }
.ui-stage .ui-ring .is-value { stroke: var(--on-stage); filter: drop-shadow(0 0 6px var(--stage-glow)); }
.ui-stage .ui-ring-in > span { color: var(--on-stage-2); }
.ui-stage.is-paper .ui-ring .is-track { stroke: var(--line); }
.ui-stage.is-paper .ui-ring .is-value { stroke: var(--mark); filter: none; }
.ui-stage.is-paper .ui-ring-in > span { color: var(--ink-2); }

/* Tarjeta de valor: un beneficio, el Fondo de Ahorro, la Liga, una recompensa. Su estado se lee en palabras. */
.ui-value { display: flex; flex-direction: column; gap: var(--sp-3); }
.ui-value-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.ui-value-top > .ui-badge { white-space: normal; }
.ui-value-text { margin: 0; max-width: 46ch; font-size: var(--fs-m); line-height: var(--lh-body); color: var(--on-stage-2); }
.ui-stage.is-paper .ui-value-text { color: var(--ink-2); }
.ui-value > .ui-btn { align-self: flex-start; margin-top: var(--sp-1); }
.ui-value > .ui-progress { margin-top: var(--sp-1); }
/* Compacta: para una lista de beneficios. */
.ui-value.is-compact { flex-direction: row; align-items: center; gap: var(--sp-4); padding: var(--sp-4); }
.ui-value.is-compact > .ui-value-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.ui-value.is-compact .ui-value-text { font-size: var(--fs-s); line-height: var(--lh-snug); }
.ui-value.is-compact .ui-badge { align-self: flex-start; margin-top: var(--sp-1); }
/* Logro: la pieza con su nombre debajo. */
.ui-achievements { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--sp-16) + var(--sp-6)), 1fr)); gap: var(--sp-4) var(--sp-2); margin: 0; padding: 0; list-style: none; }
.ui-achievement { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 0; text-align: center; }
.ui-achievement > b { font-size: var(--fs-s); font-weight: var(--fw-semi); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.ui-achievement > span { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--on-stage-2); }
.ui-stage.is-paper .ui-achievement > span { color: var(--ink-2); }
/* La entrada del escenario: una sola vez, las piezas se asientan. */
.ui-stage.is-enter > * { animation: ui-settle var(--dur-3) var(--ease-out) both; }
.ui-stage.is-enter > *:nth-child(2) { animation-delay: calc(var(--dur-1) / 2); }
.ui-stage.is-enter > *:nth-child(3) { animation-delay: var(--dur-1); }
.ui-stage.is-enter > *:nth-child(n + 4) { animation-delay: calc(var(--dur-1) * 1.5); }
@keyframes ui-settle { from { opacity: 0; transform: translateY(var(--sp-2)); } }

/* ───────── Anchos ─────────
   Se diseña a 360. Por debajo de 380 se aprieta lo justo; desde 600 hay aire y más columnas. */
@media (max-width: 379px) {
  .ui-stage { padding: var(--sp-4); }
  /* Cinco destinos en 360 px: las etiquetas más largas («Crecimiento», «Comentarios») caben completas a 12 px. */
  .ui-nav a, .ui-nav button { padding: 0; letter-spacing: -0.02em; }
  .ui-tabs { gap: var(--sp-4); }
}
@media (min-width: 600px) {
  :root { --gutter: var(--sp-6); }
  .ui-kpis { grid-template-columns: repeat(auto-fit, minmax(calc(var(--sp-10) * 4), 1fr)); }
  .ui-kpi.is-wide { grid-column: span 2; }
  .ui-stage { padding: var(--sp-6); }
  .ui-value:not(.is-compact) { gap: var(--sp-4); }
  .ui-sheet-foot:not(.is-stack) { justify-content: flex-end; }
  .ui-sheet-foot:not(.is-stack) > .ui-btn { flex: 0 1 auto; min-width: calc(var(--sp-16) * 2); }
  .ui-products { gap: var(--sp-3); }
}
@media (hover: hover) {
  .ui-rail-item:hover { color: var(--ink); }
  .ui-nav a:hover, .ui-nav button:hover { color: var(--ink); }
  .ui-product-qty > button:hover, .ui-product-add:hover { background: var(--sunken); }
  .ui-identity.is-pick:not(:disabled):hover { background: var(--sunken); }
}
@media (min-width: 1024px) {
  .ui-stage { padding: var(--sp-8); }
  /* Escritorio: la columna de destinos a la izquierda, fija; el contenido a su derecha; sin navegación inferior. */
  .ui-frame.is-side { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); grid-auto-rows: min-content; align-content: start; background: linear-gradient(to right, var(--rail) var(--rail-w), var(--bg) var(--rail-w)); --frame-col: none; }
  .ui-frame.is-side > .ui-frame-note, .ui-frame.is-side > .ui-topbar { grid-column: 1 / -1; }
  .ui-frame.is-side > .ui-frame-note { min-height: var(--note-h); }
  .ui-frame.is-side > .ui-frame-main { grid-column: 2; min-height: calc(100dvh - var(--bar-h)); }
  .ui-frame.is-side > .ui-nav { display: none; }
  /* La columna ocupa todo el alto del contenido (su fondo y su borde no se cortan al deslizar); lo que se queda
     a la vista mientras se desliza es su lista, del alto de la pantalla menos la barra y los avisos fijos. */
  .ui-frame.is-side > .ui-rail { display: block; grid-column: 1; position: static; border-right: 1px solid var(--line); border-bottom: 0; background: var(--rail); }
  .ui-frame.is-side > .ui-rail > .ui-rail-in { position: sticky; top: var(--bar-h); flex-direction: column; gap: var(--sp-2); height: calc(100dvh - var(--bar-h)); padding: var(--sp-4) var(--sp-3); overflow: hidden auto; -webkit-mask-image: none; mask-image: none; }
  .ui-frame.is-side:has(> .ui-frame-note) > .ui-rail > .ui-rail-in { height: calc(100dvh - var(--bar-h) - var(--note-h)); }
  .ui-frame.is-side:has(> .ui-frame-note ~ .ui-frame-note) > .ui-rail > .ui-rail-in { height: calc(100dvh - var(--bar-h) - var(--note-h) * 2); }
  .ui-frame.is-side .ui-rail-group { flex-direction: column; gap: 1px; }
  .ui-frame.is-side .ui-rail-group.is-wide { display: flex; }
  .ui-frame.is-side .ui-rail-group.is-end { margin-top: auto; padding-top: var(--sp-4); }
  .ui-frame.is-side .ui-rail-group > li { flex: 0 0 auto; }
  .ui-frame.is-side .ui-rail-item { width: 100%; min-height: var(--h-m); padding: var(--sp-2) var(--sp-3); border-bottom: 0; border-radius: var(--r-s); white-space: normal; overflow-wrap: anywhere; }
  .ui-frame.is-side .ui-rail-item[aria-current] { background: var(--sunken); }
  .ui-frame.is-side .ui-rail-item:focus-visible { outline-offset: 2px; }
  .ui-frame.is-side .ui-topbar-in { padding-left: var(--sp-6); }
  @media (hover: hover) { .ui-frame.is-side .ui-rail-item:not([aria-current]):hover { background: var(--tap); } }
}

/* ───────── Reducir movimiento ─────────
   Quien lo pide en su teléfono no ve entradas, destellos, giros ni pulsos: todo aparece ya en su lugar. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
  .ui-spin, .ui-sk, .ui-toast, .ui-medal.is-lit::after, .ui-stage.is-enter > * { animation: none; }
  .ui-medal.is-lit::after { content: none; }
  .ui-btn:active { transform: none; }
}