/* ═══════════════════════════════════════════════════════════════════════════
   KIUN UI — capa de componentes estilo iOS para las mini apps (2026-08-04)

   POR QUÉ EXISTE: cada pantalla nueva reinventaba sus cards/listas/números y
   terminábamos con 6 formas de mostrar lo mismo ("equivocaciones", dixit Alex).
   Esta capa es la ÚNICA fuente de componentes para las mini apps.

   CONTRATO (lee esto antes de escribir CSS nuevo):
   1. Los COLORES/TIPOS salen de kiun.css (tokens). Aquí NO se define ni un
      color crudo — todo es var(--…). Así light/dark y el contraste AA se
      heredan solos y el guard de hex crudo no truena.
   2. Namespace `ui-`. Es la capa de las MINI APPS (v2 + inner pages).
      El namespace `k-` de kiun.css es la capa WEB legacy (admin*.html).
      NO los mezcles dentro del mismo bloque: elige la capa por página.
   3. Si necesitas un componente que no está aquí: agrégalo AQUÍ y muéstralo
      en /ui (la página viva). Nunca CSS suelto dentro de una página.
   4. Todo target tocable ≥44px. Todo número de dinero en tabular (.ui-num).

   ORDEN: escala → layout → nav → listas → datos → estado → feedback.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* escala de espaciado 4pt (Material/HIG) — usa SIEMPRE estos, no números sueltos */
  --ui-1:4px;  --ui-2:8px;  --ui-3:12px; --ui-4:16px;
  --ui-5:20px; --ui-6:24px; --ui-8:32px; --ui-10:40px;
  /* radios: fila < card < hoja (jerarquía de elevación iOS) */
  --ui-r-row:12px; --ui-r-card:16px; --ui-r-sheet:22px; --ui-r-pill:999px;
  /* hairline iOS: 0.5px en pantallas retina */
  --ui-hair:1px;
  /* movimiento: entra 220ms ease-out, sale ~65% (HIG) */
  --ui-in:220ms cubic-bezier(.22,1,.36,1);
  --ui-out:140ms cubic-bezier(.4,0,1,1);
}
@media (min-resolution:2dppx){ :root{ --ui-hair:.5px } }

/* ── layout base de una mini app ──────────────────────────────────────────
   .ui-screen envuelve TODA pantalla: ancho legible, safe-areas, y el hueco
   del tab bar para que el contenido no quede debajo (regla fixed-element-offset). */
.ui-screen{width:100%;max-width:520px;margin:0 auto;
  padding:var(--ui-4) var(--ui-5) calc(86px + env(safe-area-inset-bottom,0px))}
@media(min-width:1024px){ .ui-screen{max-width:880px;padding:var(--ui-8) 34px var(--ui-10)} }

/* ── nav: Large Title iOS ─────────────────────────────────────────────────
   El eyebrow (fecha/contexto) va ARRIBA del título, chico y en mono. */
.ui-eyebrow{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dimmer);margin:2px 2px 1px}
.ui-title{font-size:28px;font-weight:800;letter-spacing:-.022em;line-height:1.15;
  margin:0 2px var(--ui-4);display:flex;align-items:center;gap:10px}
.ui-title-sm{font-size:22px}
/* botón atrás (chevron iOS) — 44px real aunque el glifo sea chico */
.ui-back{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;border:var(--ui-hair) solid var(--bd);
  background:transparent;color:var(--dim);cursor:pointer;
  transition:background var(--ui-out),color var(--ui-out)}
.ui-back:hover{background:var(--elev);color:var(--teal)}
.ui-back:active{transform:scale(.94)}

/* encabezado de sección (iOS: caps chico, respirado) */
.ui-sec{font-size:17px;font-weight:800;letter-spacing:-.01em;margin:var(--ui-6) 2px var(--ui-3)}
.ui-sec-caps{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dimmer);margin:var(--ui-6) 2px var(--ui-2)}

/* ── LISTA AGRUPADA (el patrón iOS por excelencia para datos) ─────────────
   Un grupo = una card; las filas comparten fondo y se separan con hairline.
   Úsala para: pares dato→valor, navegación a sub-páginas, ajustes, listas.

   <div class="ui-group">
     <a class="ui-row" href="…">
       <span class="ui-row-ic"><span class="material-symbols-outlined">…</span></span>
       <span class="ui-row-tx"><b>Título</b><small>ayuda opcional</small></span>
       <span class="ui-row-val ui-num">$1,234</span>
       <span class="ui-row-go material-symbols-outlined">chevron_right</span>
     </a>
   </div> */
.ui-group{background:var(--card);border:var(--ui-hair) solid var(--bd);
  border-radius:var(--ui-r-card);overflow:hidden;margin-bottom:var(--ui-3)}
.ui-row{display:flex;align-items:center;gap:var(--ui-3);width:100%;
  padding:13px var(--ui-4);min-height:48px;background:transparent;border:0;
  color:var(--text);text-decoration:none;font-size:15px;text-align:left;
  font-family:inherit;cursor:pointer;position:relative;
  transition:background var(--ui-out)}
/* separador hairline con sangría iOS (arranca después del icono) */
.ui-row + .ui-row::before{content:"";position:absolute;left:var(--ui-4);right:0;top:0;
  height:var(--ui-hair);background:var(--bd)}
.ui-row.has-ic + .ui-row.has-ic::before{left:60px}
.ui-row:hover{background:var(--elev)}
.ui-row:active{background:var(--surface-2,var(--elev))}
.ui-row[aria-disabled="true"]{opacity:.45;pointer-events:none}
.ui-row-ic{flex:none;width:32px;height:32px;border-radius:9px;display:flex;
  align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal)}
.ui-row-ic .material-symbols-outlined{font-size:19px}
.ui-row-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ui-row-tx b{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-row-tx small{color:var(--dim);font-size:12.5px;line-height:1.35}
.ui-row-val{flex:none;color:var(--dim);font-size:14.5px}
.ui-row-val.strong{color:var(--text);font-weight:700}
.ui-row-go{flex:none;color:var(--dimmer);font-size:19px}
/* variante peligro (cerrar sesión, borrar) — semántica, no decorativa */
.ui-row.danger{color:var(--err)} .ui-row.danger .ui-row-go{color:var(--err)}

/* ── card libre (cuando el contenido no es una lista) ─────────────────────── */
.ui-card{background:var(--card);border:var(--ui-hair) solid var(--bd);
  border-radius:var(--ui-r-card);padding:var(--ui-4);margin-bottom:var(--ui-3)}
.ui-card-hd{display:flex;align-items:center;gap:6px;margin-bottom:var(--ui-2);
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--teal)}
.ui-card-hd .material-symbols-outlined{font-size:14px}
.ui-card p{font-size:14.5px;line-height:1.5;margin:0}

/* ── NÚMEROS: tabular siempre (evita que bailen al actualizar) ───────────── */
.ui-num{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}

/* fila de chips meta (valor estimado, confianza) bajo un texto */
.ui-meta{display:flex;flex-wrap:wrap;gap:var(--ui-2);margin-top:var(--ui-2)}
/* texto secundario dentro de una card (el "porqué" de una sugerencia) */
.ui-sub{color:var(--dim);font-size:12.5px;line-height:1.45;margin-top:var(--ui-2)!important}

/* ── stat tiles (grid de KPIs) ───────────────────────────────────────────── */
.ui-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--ui-2);margin-bottom:var(--ui-3)}
.ui-stat{background:var(--card);border:var(--ui-hair) solid var(--bd);
  border-radius:var(--ui-r-row);padding:var(--ui-3) 14px;min-width:0}
.ui-stat-l{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dimmer)}
.ui-stat-v{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;
  font-weight:700;font-size:22px;margin-top:3px;line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-stat-d{font-size:11px;font-weight:700;margin-top:2px}
.ui-stat-d.up{color:var(--ok)} .ui-stat-d.dn{color:var(--err)}
.ui-stat.hl{background:color-mix(in srgb,var(--teal) 8%,var(--card));
  border-color:color-mix(in srgb,var(--teal) 30%,var(--bd))}

/* ── anillo de progreso (hero "¿voy bien hoy?") ──────────────────────────── */
.ui-ringwrap{display:flex;flex-direction:column;align-items:center;padding:var(--ui-3) 0 var(--ui-1)}
.ui-ring{position:relative;width:186px;height:186px}
.ui-ring svg{transform:rotate(-90deg);display:block}
.ui-ring .trk{stroke:color-mix(in srgb,var(--teal) 14%,var(--bd));fill:none;stroke-width:15}
.ui-ring .fil{stroke:var(--teal);fill:none;stroke-width:15;stroke-linecap:round;
  transition:stroke-dashoffset .7s cubic-bezier(.33,1,.68,1)}
.ui-ring-cen{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.ui-ring-v{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;
  font-weight:700;font-size:29px;letter-spacing:-.02em}
.ui-ring-of{font-size:12px;color:var(--dim);margin-top:3px}
.ui-ring-cap{font-size:14px;color:var(--dim);margin-top:var(--ui-3);text-align:center}
.ui-ring.sm{width:58px;height:58px}
.ui-ring.sm .trk,.ui-ring.sm .fil{stroke-width:7}
.ui-ring.sm .ui-ring-v{font-size:13px}

/* ── barras de comparación (ROI por canal, categorías) ───────────────────── */
.ui-bar{margin-bottom:var(--ui-3)}
.ui-bar-hd{display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;margin-bottom:5px;gap:var(--ui-2)}
.ui-bar-hd span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-bar-track{height:10px;background:var(--elev);border-radius:7px;overflow:hidden}
.ui-bar-fill{display:block;height:100%;border-radius:7px;background:var(--teal);
  transition:width var(--ui-in)}
.ui-bar.ok .ui-bar-fill{background:var(--ok)}
.ui-bar.warn .ui-bar-fill{background:var(--warn)}
.ui-bar.err .ui-bar-fill{background:var(--err)}
.ui-note{font-size:11.5px;color:var(--dimmer);margin-top:var(--ui-1)}

/* ── progreso lineal grande (cola: "5 de 8 listos") ─────────────────────── */
.ui-prog-n{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--ui-2)}
.ui-prog-n b{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;font-size:24px}
.ui-prog-n span{font-size:12.5px;color:var(--dim)}
.ui-prog{height:12px;background:var(--elev);border-radius:8px;overflow:hidden}
.ui-prog i{display:block;height:100%;background:var(--teal);border-radius:8px;
  transition:width var(--ui-in)}

/* ── chips / badges de estado (color + texto, nunca color solo) ──────────── */
.ui-chip{display:inline-flex;align-items:center;gap:5px;border-radius:var(--ui-r-pill);
  padding:6px 12px;font-size:12.5px;font-weight:700;
  background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal)}
.ui-chip .material-symbols-outlined{font-size:15px}
.ui-chip.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.ui-chip.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.ui-chip.err{background:color-mix(in srgb,var(--err) 14%,transparent);color:var(--err)}
.ui-chip.mute{background:var(--elev);color:var(--dim)}
.ui-badge{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;
  font-weight:700;border-radius:var(--ui-r-pill);padding:2px 8px;
  background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal)}

/* ── segmented control (iOS) — cambiar rango/vista ──────────────────────── */
.ui-seg{display:inline-flex;background:var(--elev);border-radius:10px;padding:3px;gap:2px;
  border:var(--ui-hair) solid var(--bd)}
.ui-seg button{flex:1;border:0;background:transparent;color:var(--dim);
  font-family:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:8px;
  min-height:38px;cursor:pointer;transition:background var(--ui-out),color var(--ui-out)}
.ui-seg button[aria-selected="true"]{background:var(--card);color:var(--text);
  box-shadow:0 1px 3px rgba(0,0,0,.18)}

/* ── botones ─────────────────────────────────────────────────────────────── */
.ui-btnrow{display:flex;gap:var(--ui-2);margin-top:var(--ui-3)}
.ui-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--teal);color:var(--accent-on,#04221d);border:0;
  border-radius:var(--ui-r-row);padding:13px var(--ui-4);font-weight:800;font-size:14.5px;
  font-family:inherit;min-height:46px;cursor:pointer;text-decoration:none;
  transition:filter var(--ui-out),transform var(--ui-out)}
html.kiun-light .ui-btn{background:linear-gradient(180deg,#0D9488,#0F766E);color:#fff}
.ui-btn:active{transform:scale(.98);filter:brightness(.95)}
.ui-btn--ghost{flex:none;background:transparent;color:var(--dim);
  border:var(--ui-hair) solid var(--bd);font-weight:600;font-size:13.5px}
html.kiun-light .ui-btn--ghost{background:transparent;color:var(--dim)}
.ui-btn[disabled],.ui-btn--ghost[disabled]{opacity:.45;pointer-events:none}
/* pill compacto (acción dentro de una fila) */
.ui-pill{flex:none;display:inline-flex;align-items:center;gap:5px;
  background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal);
  border:0;border-radius:var(--ui-r-pill);padding:10px 14px;font-weight:700;
  font-size:12px;font-family:inherit;text-decoration:none;min-height:40px;cursor:pointer}
.ui-pill .material-symbols-outlined{font-size:15px}
.ui-pill:active{transform:scale(.96)}

/* ── estados: vacío, carga, error ────────────────────────────────────────── */
.ui-empty{display:flex;flex-direction:column;align-items:center;gap:var(--ui-2);
  padding:var(--ui-6) var(--ui-4);color:var(--dim);font-size:13.5px;text-align:center}
.ui-empty .material-symbols-outlined{font-size:30px;color:var(--dimmer)}
.ui-skel{border-radius:var(--ui-r-card);
  background:linear-gradient(90deg,var(--elev) 25%,var(--card) 50%,var(--elev) 75%);
  background-size:200% 100%;animation:ui-sk 1.2s linear infinite}
@keyframes ui-sk{to{background-position:-200% 0}}

/* ── tab bar (mini app) ──────────────────────────────────────────────────── */
.ui-tabs{position:fixed;left:0;right:0;bottom:0;display:flex;z-index:10;
  background:var(--card);border-top:var(--ui-hair) solid var(--bd);
  padding:var(--ui-2) 0 calc(10px + env(safe-area-inset-bottom,0px))}
.ui-tabs button{flex:1;background:transparent;border:0;color:var(--dimmer);
  font-size:10.5px;font-weight:600;font-family:inherit;display:flex;flex-direction:column;
  align-items:center;gap:2px;min-height:48px;cursor:pointer;
  transition:color .12s ease,transform .12s ease}
.ui-tabs button.on{color:var(--teal)}
/* tocar un tab no daba ninguna señal hasta que la vista cambiaba (2026-08-06,
   revisión ui-ux-pro-max) — mismo criterio :active que .ui-row/.ui-btn. */
.ui-tabs button:active{transform:scale(.92)}
.ui-tabs .material-symbols-outlined{font-size:23px}

/* ── sidebar de escritorio de una mini app (≥1024px) ──────────────────────
   Lista de "personas" del negocio, NO un menú de 29 links. En móvil no existe
   (ahí manda .ui-tabs). Vive en el sistema para que toda mini app futura tenga
   el mismo nav sin recrearlo. */
.ui-snav{display:none}
@media(min-width:1024px){
  /* .ui-snav toma el relevo de .ui-tabs a partir de aquí (mismo comentario
     de arriba) — pero nadie apagaba el bottom-tabs, así que ambos quedaban
     visibles a la vez en desktop (encontrado 2026-08-06 probando /v2 ancho:
     sidebar + bottom-tabs superpuestos). v2.html tenía un intento local con
     el selector equivocado (nav.bn, que nunca matcheó nav.ui-tabs) — el
     apagado real vive aquí, junto a donde .ui-snav se prende, no repetido
     por mini-app (regla del sistema, ver test_mini_app_no_redefine_componentes). */
  .ui-tabs{display:none}
  .ui-snav{display:flex;flex-direction:column;width:230px;flex:none;position:sticky;top:0;
    height:100dvh;background:var(--card);border-right:var(--ui-hair) solid var(--bd);
    padding:22px 14px 16px}
  .ui-snav-brand{font-size:20px;font-weight:800;letter-spacing:-.02em;padding:0 10px 4px}
  .ui-snav-brand .c{color:var(--teal)}
  .ui-snav-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.09em;
    text-transform:uppercase;color:var(--dimmer);padding:0 10px var(--ui-5)}
  /* 44px reales (era 42 — cazado por el auditor 2026-08-04) */
  .ui-snav-lnk{display:flex;align-items:center;gap:11px;padding:12px 11px;min-height:44px;
    border-radius:10px;color:var(--text);font-size:14px;font-weight:600;border:0;
    background:transparent;width:100%;text-align:left;margin-bottom:2px;
    font-family:inherit;cursor:pointer;transition:background var(--ui-out)}
  .ui-snav-lnk .material-symbols-outlined{font-size:20px;color:var(--dim)}
  .ui-snav-lnk:hover{background:var(--input)}
  .ui-snav-lnk.on{background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal)}
  .ui-snav-lnk.on .material-symbols-outlined{color:var(--teal)}
  .ui-snav-grow{flex:1}
  .ui-snav-foot{border-top:var(--ui-hair) solid var(--bd);padding-top:var(--ui-2)}
}

/* ── ÁREA TÁCTIL: 44px reales sin engordar el diseño ─────────────────────
   Regla HIG/Material: mínimo 44×44. Estos 3 componentes se ven compactos a
   propósito (38–40px) porque el look iOS lo pide, así que el área se extiende
   con un ::after invisible en vez de inflar la caja visual. Cazado por el
   propio audit del sistema el 2026-08-04 — el contrato decía ≥44 y el CSS
   entregaba 38. */
.ui-back,.ui-pill,.ui-seg button{position:relative}
.ui-back::after,.ui-pill::after,.ui-seg button::after{
  content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:44px;min-height:100%}

/* ── accesibilidad transversal (aplica a toda la capa) ───────────────────── */
.ui-screen :focus-visible,.ui-tabs :focus-visible{outline:2px solid var(--teal);
  outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){
  .ui-skel,.ui-ring .fil,.ui-bar-fill,.ui-prog i,.ui-btn,.ui-row,.ui-back{
    animation:none!important;transition:none!important}
}

/* ── PISO DE LEGIBILIDAD EN MÓVIL — 2026-08-04 ────────────────────────────
   El audit móvil midió 66 textos por debajo de 10.5px. Casi todos son la
   misma cosa: la etiqueta en mayúsculas que va arriba de un número. A 9px
   quedan por debajo del mínimo de Apple (11pt) y de Material (11sp) — en un
   celular real, con brillo de calle, no se leen.

   Se sube el piso a 11px SOLO en móvil: en escritorio la etiqueta chica sí
   funciona (se ve de cerca) y cambiarla movería el look de todo el producto
   sin necesidad. El letter-spacing se afloja un pelo para que a 11px la
   mayúscula no se apelmace. */
@media(max-width:899px){
  .ui-eyebrow,.ui-card-hd,.ui-stat-l,.ui-meta,.ui-chip{font-size:11px}
}
/* Estos dos pintan el texto con un token y el fondo con un tinte del MISMO
   token, así que el fondo "jala" hacia el color del texto y le come
   contraste. En oscuro no importa (el token es claro sobre fondo negro),
   pero en claro se quedaban en 4.37 y 4.49 — debajo del 4.5 por un pelo.
   Bajar el tinte de 16/14% a 12% los deja en 4.63, con margen. Medido, no
   estimado: el cálculo reproduce exacto lo que reportó el navegador. */
html.kiun-light .ui-badge{background:color-mix(in srgb,var(--teal) 12%,transparent)}
html.kiun-light .ui-chip.ok{background:color-mix(in srgb,var(--ok) 12%,transparent)}
@media(max-width:899px){
  .ui-stat-l,.ui-card-hd{letter-spacing:.06em}
}