/* kit.css · La hoja común de las trece demos · S7, 2026-09-20.
   ───────────────────────────────────────────────────────────────────────────────
   Por qué existe: hasta hoy cada demo era una isla. Trece archivos de una sola
   página, cada uno con su escala inventada (58 tamaños distintos entre todas, 35
   por debajo de 12 px), sus propias familias (Inter, Plus Jakarta Sans, Oswald,
   JetBrains Mono, Bebas Neue, Cormorant Garamond, Playfair, DM Sans) y sus propias
   etiquetas en versalitas con tracking. Nico las abre al lado de la web: si la web
   tiene una escala y las demos tienen trece, se nota.

   La vara es la misma de S7d. El bloque de tokens de abajo es el del principio de
   `yustalabs-vue/src/styles/base.css`, con los mismos nombres y los mismos valores.
   Lo único que cambia son las tres variables que dependen del color del papel: la
   web es tinta (#050B17) y las demos son pantallas claras. La FÓRMULA se respeta
   —la hairline es el 12 % de la tinta, la superficie de lectura el 4,5 %— pero se
   calcula contra el papel de la demo, porque una línea de plata al 12 % sobre
   blanco no se ve. Está anotado en DECISIONES.md.

   Cómo la usa una demo:
     <link rel="stylesheet" href="../_kit/kit.css">   ← antes de su propio <style>
   y en su :root declara SOLO los colores de su rubro (--color-*), su letra de títulos
   (--font-display, S7i) y la mano de sus íconos (--icono-*). Ninguna demo
   escribe una familia ni un tamaño a mano: todo sale de estos tokens.
   ─────────────────────────────────────────────────────────────────────────────── */

/* ── Tipografía · las tres familias del estudio ────────────────────────────────
   Archivo en títulos y botones. Barlow en prosa, tablas, formularios y etiquetas.
   Archivo Narrow SOLO en cifras, con tabular-nums. Son los papeles de S7d.
   Desde S7i (Nico, 23-09: «la tipografía de cada uno debería variar») cada demo PISA
   `--font-display` en su propio :root con la letra de su rubro (la tabla y el motivo, en
   `docs/web-v2/demos/arquetipos.md`); Archivo queda solo para la raíz, que es de Yusta.
   Barlow y Archivo Narrow no cambian: son lo que las trece tienen en común. */
:root {
  --font-display: 'Archivo', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-num:     'Archivo Narrow', 'Archivo', system-ui, Arial, sans-serif;

  /* ── La escala · ocho peldaños, razón 1,25 anclada en 16 px ──────────────────
     En `rem` para que respete el tamaño de letra del navegador del visitante.
     Piso duro: ningún texto por debajo de 12 px. Una demo es una pantalla de
     trabajo y tiene más densidad que una web, pero eso se resuelve con el espacio,
     no achicando la letra hasta los 10 px como estaban. */
  --text-xs:  0.8rem;    /* 12,8 px · metas, pies de tabla, ayudas */
  --text-s:   0.9rem;    /* 14,4 px · navegación, botones, etiquetas, celdas */
  --text-m:   1rem;      /* 16 px   · prosa, campos de formulario */
  --text-l:   1.25rem;   /* 20 px   · título de pantalla */
  --text-xl:  1.5625rem; /* 25 px   · h3, cifra de tarjeta */
  --text-2xl: 1.9531rem; /* 31,25 px · h2 */
  --text-3xl: 2.4414rem; /* 39 px   · cifra grande del tablero */
  --text-4xl: 3.0518rem; /* 48,8 px · el total de una pantalla de caja */

  --lh-tight: 1.06;
  --lh-title: 1.18;
  --lh-body:  1.55;
  --track-display: -0.02em;
  --track-body: 0;
  --track-caps: 0.06em;  /* lo poco que queda en versalitas: siglas y © */
  --medida: 65ch;

  /* ── Espacio · 4 pt, ocho peldaños ──────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Las alturas de sección del sitio. Una demo no tiene secciones de página, pero
     sí bloques que respiran: el alto del encabezado de pantalla sale de acá. */
  --section-compacta: clamp(44px, 5.5vw, 72px);
  --section:          clamp(56px, 7vw, 96px);
  --section-aire:     clamp(72px, 9vw, 128px);

  /* Tres radios. */
  --radius-s: 4px;
  --radius: 12px;
  --radius-pill: 999px;

  /* ── Paleta de rubro · el contrato ───────────────────────────────────────────
     Estos son los VALORES POR DEFECTO. Cada demo los pisa en su propio :root con
     los colores de su rubro y no escribe un hexadecimal en ningún otro lado
     (`hallmark`, «Mid-render token improvisation»). Los nombres no cambian: así
     el kit sabe siempre cuál es el papel, cuál la tinta y cuál el acento. */
  --color-papel:        #EEF1F6;  /* el fondo de la aplicación */
  --color-superficie:   #FFFFFF;  /* tarjetas, tablas, barras */
  --color-superficie-2: #E7EAF1;  /* la fila alterna, el hover de una fila */
  --color-tinta:        #0F172A;  /* el texto que se lee */
  --color-tinta-2:      #475569;  /* el texto secundario · 7,0:1 sobre blanco */
  --color-tinta-3:      #5A6577;  /* metas y ayudas · 4,9:1 sobre blanco */
  --color-acento:       #1E293B;  /* la marca del rubro */
  --color-acento-tinta: #16223A;  /* el acento cuando lleva texto encima */
  --color-acento-suave: #E5EAF2;  /* el fondo tenue del acento */
  --color-sobre-acento: #FFFFFF;  /* el texto arriba del acento */
  --color-ok:           #1F7A54;
  --color-ok-bg:        #EEF7F2;
  --color-alerta:       #8A5200;
  --color-alerta-bg:    #FFF4DB;
  --color-error:        #B3261E;
  --color-error-bg:     #FDECEB;
  /* La luz y la sombra de base: el blanco de un reflejo sobre papel oscuro y el negro de una
     sombra, para mezclar con transparente (S7b, paletas.mjs). */
  --color-luz:          #FFFFFF;
  --color-sombra:       #000000;

  /* ── La marca de Yusta, para lo que la demo dice de sí misma ─────────────────
     La barra de «así podría verse el sistema de…» y cualquier aviso que hable en nombre
     de Yusta, no del rubro. Son los colores del sitio (tinta, plata, cian): así, adentro
     de una demo de peluquería color rosa, lo que dice Nico se reconoce igual. */
  --marca-tinta: #050B17;
  --marca-plata: #DCE3EA;
  --marca-blanco: #FFFFFF;
  --marca-cian:  #9FE4EE;

  /* El velo detrás de una hoja que sube desde abajo, y su sombra. */
  --color-velo: rgba(15, 23, 42, 0.45);
  --sombra-hoja: 0 -8px 32px rgba(15, 23, 42, 0.18);

  /* ── Las tres que dependen del papel ─────────────────────────────────────────
     Misma fórmula que en el sitio, calculada contra la tinta de la demo. */
  --hairline: 1px solid rgba(15, 23, 42, 0.12);
  --superficie-lectura: rgba(15, 23, 42, 0.045);
  /* El anillo de foco: en el sitio es plata sobre tinta; acá es la tinta sobre
     papel, con el mismo grosor y el mismo desplazamiento. */
  --foco: 2px solid var(--color-tinta);
  --foco-sep: 2px;

  /* Las dos sombras que el kit usa, y ninguna más (S7b): la del aviso de abajo y la del
     panel que se abre arriba de todo (el buscador). Gris neutro: una sombra de color es
     la huella que S7 sacó de 206 lugares. */
  --sombra-aviso: 0 8px 24px rgba(15, 23, 42, 0.22);
  --sombra-panel: 0 24px 64px rgba(15, 23, 42, 0.28);

  /* Cuánto hay que levantar el aviso de abajo para que no tape una barra de pestañas fija
     del teléfono. Cada demo con barra abajo lo pisa en su media query. */
  --k-avisos-abajo: 0px;
}

/* ── El papel oscuro ─────────────────────────────────────────────────────────────
   Cuatro de las trece trabajan sobre papel oscuro (S7b: el gimnasio, el mapa de noche, la
   madera del bar, la obra). La fórmula de las tres variables de papel es la misma, calculada
   contra el blanco en lugar de contra la tinta. Una demo oscura lo declara en su <html>:
   <html data-papel="oscuro">. */
:root[data-papel='oscuro'] {
  --hairline: 1px solid rgba(255, 255, 255, 0.12);
  --superficie-lectura: rgba(255, 255, 255, 0.045);
  --color-velo: rgba(0, 0, 0, 0.62);
  --sombra-aviso: 0 8px 24px rgba(0, 0, 0, 0.5);
  --sombra-panel: 0 24px 64px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* En el teléfono la escala baja un peldaño, entera y de una sola vez. La prosa
   (m, s, xs) no se mueve nunca: en una pantalla de trabajo, lo que se lee para
   trabajar es justamente lo que no se puede achicar. */
@media (max-width: 640px) {
  :root {
    --text-4xl: 2.4414rem;
    --text-3xl: 1.9531rem;
    --text-2xl: 1.5625rem;
    --text-xl:  1.25rem;
    --text-l:   1rem;
  }
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--color-papel);
  color: var(--color-tinta);
  font-family: var(--font-body);
  font-size: var(--text-m);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Los controles no heredan la tipografía por defecto: sin esto un <button> sin
   estilo propio sale en Arial. Pasaba en nueve de las trece. */
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-title);
  letter-spacing: var(--track-display);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-l); }
h3 { font-size: var(--text-m); }
h4 { font-size: var(--text-s); }

p { margin: 0; max-width: var(--medida); text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
small { font-size: var(--text-xs); }

/* Una sola forma de foco en las trece demos, y visible sobre cualquier papel. */
:focus-visible {
  outline: var(--foco);
  outline-offset: var(--foco-sep);
  border-radius: var(--radius-s);
}

/* Toda columna de números se lee en Archivo Narrow y alineada. */
.k-num, td.num, th.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* Los íconos dibujados que reemplazaron a los emojis (`_kit/iconos.mjs`). Heredan el
   color de la fila y miden lo mismo en las trece. Van con `aria-hidden`: la palabra
   está escrita al lado, siempre. */
.k-icono { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -3px; }
/* El juego de íconos de cada rubro (S7i): el mismo dibujo, con el trazo, la punta y la unión que
   pide el oficio (filos de chapa en el corralón, trazo fino de birome en las cuotas). Cada demo los
   pisa en su :root; el CSS gana sobre los atributos del SVG. */
:root { --icono-trazo: 1.6; --icono-punta: round; --icono-union: round; }
.k-icono, .k-icono * { stroke-width: var(--icono-trazo); stroke-linecap: var(--icono-punta); stroke-linejoin: var(--icono-union); }
.k-vacio .k-icono, .k-icono--grande { width: 28px; height: 28px; vertical-align: -6px; }

/* Un solo momento de entrada, y ninguno para quien pidió que la pantalla se quede
   quieta. Las demos no animan nada más. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Los siete componentes. Los usa `demos/tuyo/` entera y cualquier pantalla nueva
   que haga falta en una demo. Las demos viejas consumen los tokens de arriba por
   sus propias clases; estas son para lo que se escribe de cero.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Cabecera ──────────────────────────────────────────────────────────────
   La barra de arriba: la marca del negocio, qué es esto, y a la derecha el sello
   que dice que es una demo. Sin cromo de navegador dibujado (compuerta 47 de
   `hallmark`): esto ES la aplicación, no la foto de una aplicación. */
.k-barra {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}
.k-barra__marca {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-l);
  letter-spacing: var(--track-display);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
}
.k-barra__marca svg, .k-barra__marca img { width: 24px; height: 24px; flex: none; }
.k-barra__que { font-size: var(--text-s); opacity: 0.82; }
.k-barra__sello {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-sobre-acento);
  color: var(--color-acento-tinta);
  white-space: nowrap;
}

/* ── 2. Navegación ────────────────────────────────────────────────────────────
   Costado en escritorio, pie en el teléfono. Cada blanco táctil mide 44 px, que es
   el mínimo que pide `ui-ux-pro-max`. Sin versalitas con tracking en las etiquetas
   de grupo: caja normal, que es lo que hizo S7d en el sitio. */
.k-nav { display: flex; flex-direction: column; padding: var(--space-2) 0; }
.k-nav__grupo {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-tinta-3);
  padding: var(--space-3) var(--space-4) var(--space-1);
}
.k-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-s);
  color: var(--color-tinta-2);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.k-nav__item:hover { background: var(--color-superficie-2); color: var(--color-tinta); }
.k-nav__item[aria-current='page'], .k-nav__item.activo {
  background: var(--color-acento-suave);
  color: var(--color-acento-tinta);
  border-left-color: var(--color-acento);
  font-weight: 600;
}
.k-nav__item svg { width: 18px; height: 18px; flex: none; }

/* ── 3. Tabla ─────────────────────────────────────────────────────────────────
   La pantalla que más se mira en un sistema de gestión. Cifras en Archivo Narrow
   y alineadas a la derecha; encabezado en caja normal. */
.k-tabla { width: 100%; border-collapse: collapse; background: var(--color-superficie); }
.k-tabla th, .k-tabla td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: var(--hairline);
  font-size: var(--text-s);
}
.k-tabla th {
  font-weight: 600;
  color: var(--color-tinta-3);
  white-space: nowrap;
}
.k-tabla td { color: var(--color-tinta); }
.k-tabla .num, .k-tabla th.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.k-tabla tbody tr:hover { background: var(--color-superficie-2); }
.k-tabla tbody tr:last-child td { border-bottom: 0; }
/* En el teléfono la tabla se desplaza a lo ancho dentro de su caja, nunca empuja
   la página: eso es lo que produce el desborde horizontal. */
/* `position: relative`: un `.k-solo-lectores` (posición absoluta) adentro de la tabla se escapaba
   de la caja y ensanchaba la página entera a 390 (lo encontró Corralón en S7b). */
.k-tabla-caja { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 4. Ficha ─────────────────────────────────────────────────────────────────
   La pantalla de un cliente, un vehículo, un animal. Dos estilos de tarjeta en
   todas las demos, como en el sitio: la de LECTURA (sin borde, sobre una
   superficie un tono distinta) y la que SE APRIETA (con la hairline). */
.k-ficha {
  background: var(--color-superficie);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.k-ficha--lectura { border: 0; background: var(--superficie-lectura); }
.k-ficha__titulo { font-size: var(--text-l); margin-bottom: var(--space-1); }
.k-ficha__meta { font-size: var(--text-xs); color: var(--color-tinta-3); }
.k-ficha__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 180px));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.k-dato__rotulo { display: block; font-size: var(--text-xs); color: var(--color-tinta-3); }
.k-dato__valor { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--text-xl); }

/* ── 5. Formulario ────────────────────────────────────────────────────────────
   Etiqueta visible siempre (nunca el placeholder haciendo de etiqueta), ayuda
   debajo del campo y error al lado del campo, no arriba de todo. */
.k-campo { display: block; margin-bottom: var(--space-5); }
.k-campo__rotulo {
  display: block;
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--color-tinta-2);
  margin-bottom: var(--space-2);
}
.k-campo input, .k-campo select, .k-campo textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3);
  font-size: var(--text-m);
  color: var(--color-tinta);
  background: var(--color-superficie);
  border: var(--hairline);
  border-radius: var(--radius-s);
}
.k-campo__ayuda { display: block; font-size: var(--text-xs); color: var(--color-tinta-3); margin-top: var(--space-2); }
.k-campo__error { display: block; font-size: var(--text-xs); color: var(--color-error); margin-top: var(--space-2); }
.k-campo[data-estado='error'] input,
.k-campo[data-estado='error'] select,
.k-campo[data-estado='error'] textarea { border-color: var(--color-error); }

.k-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-s);
  font-weight: 600;
  border: 0;
  border-radius: var(--radius-s);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
  cursor: pointer;
  transition: background 0.14s;
}
/* Al pasar y al apretar, el acento un 12 % más oscuro: la letra de encima (clara u oscura, según la
   demo) sigue leyéndose. Con --color-acento-tinta quedaba letra oscura sobre marrón en las demos
   de acento claro (taller, gimnasio, logística, obras). */
.k-boton:hover { background: color-mix(in srgb, var(--color-acento) 88%, var(--color-sombra)); }
.k-boton:active { background: color-mix(in srgb, var(--color-acento) 80%, var(--color-sombra)); }
.k-boton[disabled] { opacity: 0.45; cursor: not-allowed; }
.k-boton--secundario {
  background: transparent;
  color: var(--color-tinta);
  border: var(--hairline);
}
.k-boton--secundario:hover { background: var(--color-superficie-2); }

/* El estado de una cosa: al día, vencida, en curso. Con la palabra escrita, no
   con un color solo (que es lo que no ve quien no distingue el rojo del verde). */
.k-estado {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-superficie-2);
  color: var(--color-tinta-2);
}
.k-estado--ok { background: var(--color-ok-bg); color: var(--color-ok); }
.k-estado--alerta { background: var(--color-alerta-bg); color: var(--color-alerta); }
.k-estado--error { background: var(--color-error-bg); color: var(--color-error); }

/* ── 6. Estado vacío ──────────────────────────────────────────────────────────
   Qué se ve cuando todavía no hay nada. Dice qué falta y cómo se carga, que es
   distinto de un dibujo con la frase «no hay datos». */
.k-vacio {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--color-tinta-2);
  background: var(--superficie-lectura);
  border-radius: var(--radius);
}
.k-vacio__titulo { font-size: var(--text-l); color: var(--color-tinta); margin-bottom: var(--space-2); }
.k-vacio p { margin: 0 auto var(--space-5); font-size: var(--text-s); }

/* ── 7. Aviso ─────────────────────────────────────────────────────────────────
   Una línea que informa: esto es una demo, esta cuota venció, este stock quedó en
   cero. Lleva una franja del color del estado y el texto lo dice igual. */
.k-aviso {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-s);
  border-left: 3px solid var(--color-tinta-3);
  background: var(--superficie-lectura);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.k-aviso--ok { border-left-color: var(--color-ok); background: var(--color-ok-bg); color: var(--color-ok); }
.k-aviso--alerta { border-left-color: var(--color-alerta); background: var(--color-alerta-bg); color: var(--color-alerta); }
.k-aviso--error { border-left-color: var(--color-error); background: var(--color-error-bg); color: var(--color-error); }

/* ═══════════════════════════════════════════════════════════════════════════════
   S7b · Lo que Nico pidió que tuvieran las trece: su marca, el negocio de mentira con
   nombre propio, y un botón para dejar la demo como estaba. Son componentes nuevos; los
   siete de arriba no cambiaron.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 8. La marca ───────────────────────────────────────────────────────────────
   El monograma de Yusta Labs y el nombre del producto. Reemplaza al cuadradito de color
   que traía cada demo («falta mi logo en todas, fundamental», Nico, 21-09).

     <a class="k-marca" href="./" data-k-marca>
       <img class="k-marca__mono" src="../_kit/marca/yl-mark-cromado.webp" alt="" width="32" height="32">
       <span class="k-marca__texto">
         <span class="k-marca__nombre">Yusta Taller</span>
         <span class="k-marca__por">por Yusta Labs</span>
       </span>
     </a>

   Desde S7i (Nico, 23-09: «que el fondo sea translúcido y vaya mi logo plateado como está en la
   web, en todas») es el monograma CROMADO de la web, recortado a la letra y sin cuadrado detrás
   (`yl-mark-cromado.webp`, lo arma `marca-cromada.mjs`). El mismo archivo va sobre papel claro y
   sobre una barra oscura: medido, el contorno de la letra da 14 a 1 sobre blanco (el 10 % peor,
   4 a 1) y 10 a 1 sobre las barras oscuras, así que no lleva sombra (`marca/cromado-borde.json`).
   Ningún fondo, ningún radio, ningún borde: la letra sola. El nombre toma el color de donde está. */
.k-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.k-marca__mono {
  display: block;
  width: 32px;
  height: 32px;
  flex: none;
  object-fit: contain;
  background: none;
}
.k-marca__texto { display: flex; flex-direction: column; min-width: 0; line-height: var(--lh-title); }
.k-marca__nombre {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-m);
  letter-spacing: var(--track-display);
  white-space: nowrap;
}
.k-marca__por { font-family: var(--font-body); font-size: var(--text-xs); white-space: nowrap; }
/* En un riel angosto o en la barra del teléfono queda el monograma solo; el nombre lo sigue
   leyendo un lector de pantalla. */
.k-marca--solo-mono .k-marca__texto {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.k-marca--grande .k-marca__mono { width: 40px; height: 40px; }
.k-marca--grande .k-marca__nombre { font-size: var(--text-l); }

/* ── 9. El negocio ─────────────────────────────────────────────────────────────
   El nombre del negocio de mentira que usa el sistema, en la cabecera: «Taller Vallemar»,
   no «Taller». Es lo que ve el dueño en su sistema de verdad, y en la demo del prospecto
   se reemplaza por el nombre de él (`tuyo/armar.mjs` busca `data-k-negocio`). */
.k-negocio { display: flex; flex-direction: column; min-width: 0; line-height: var(--lh-title); }
.k-negocio__nombre {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-m);
  letter-spacing: var(--track-display);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-negocio__meta { font-size: var(--text-xs); color: var(--color-tinta-3); white-space: nowrap; }

/* ── 10. La firma ──────────────────────────────────────────────────────────────
   «Hecho por Yusta Labs», con el monograma chico, donde la demo cierra (pie del costado,
   pie de la página, pie del documento). Lleva a yustalabs.com. */
.k-firma {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: inherit;
  text-decoration: none;
}
.k-firma img { display: block; width: 18px; height: 18px; object-fit: contain; background: none; flex: none; }
.k-firma:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── 11. Restablecer ───────────────────────────────────────────────────────────
   El botón de la cabecera que deja la demo como la encontró. `kit.js` borra solo las
   claves de esta demo, recarga, y avisa con un «Deshacer» (sin ventana de confirmación).
   En el teléfono se ve «Restablecer»; el resto del nombre lo lee el lector de pantalla. */
.k-restablecer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  /* Barlow y no la letra de títulos (S7i): con Arvo o Bodoni el botón empujaba la cabecera. */
  font-family: var(--font-body);
  font-size: var(--text-s);
  font-weight: 600;
  color: inherit;
  background: transparent;
  border: var(--hairline);
  border-radius: var(--radius-s);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s;
}
.k-restablecer:hover { background: var(--superficie-lectura); }
.k-restablecer:active { background: var(--color-superficie-2); }
.k-restablecer svg { width: 16px; height: 16px; flex: none; }
/* «Restablecer» y «los datos de ejemplo» son dos piezas del botón (la segunda se esconde en el
   teléfono): el espacio del botón entre las dos se achica al de una palabra. */
.k-restablecer__resto { margin-inline-start: calc(0.26em - var(--space-2)); }
@media (max-width: 760px) {
  .k-restablecer__resto {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* ── 12. El aviso de abajo ─────────────────────────────────────────────────────
   Lo dibuja `kit.js` (`toast()` y los `alert()` de las demos). Superficie invertida: la tinta
   de la demo de fondo y su papel de letra, así se lee igual sobre papel claro u oscuro. */
.k-avisos {
  position: fixed;
  left: 50%;
  bottom: calc(var(--k-avisos-abajo) + var(--space-5));
  transform: translateX(-50%);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: min(560px, calc(100vw - 32px));
  pointer-events: none;
}
.k-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-s);
  line-height: var(--lh-body);
  color: var(--color-papel);
  background: var(--color-tinta);
  border-radius: var(--radius-s);
  box-shadow: var(--sombra-aviso);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}
.k-toast--visible { opacity: 1; transform: none; }
.k-toast__texto { flex: 1; min-width: 0; white-space: pre-line; }
.k-toast__accion {
  flex: none;
  min-height: 44px;
  padding: 0 var(--space-2);
  /* Barlow (S7i): es un link chico, y con Bodoni o Instrument Serif a 14 px no se lee. */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-s);
  color: inherit;
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.k-toast__accion:focus-visible { outline: 2px solid var(--color-papel); outline-offset: var(--foco-sep); }

/* ── 13. El buscador ───────────────────────────────────────────────────────────
   Ctrl+K o cualquier botón con `data-k-buscar`. Reemplaza a la pastilla flotante oscura
   que tenían once demos en la misma esquina (tapaba la barra de pestañas en el teléfono).
   Toma la superficie y el acento de la demo en la que está. */
.k-paleta-velo {
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: var(--color-velo);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.k-paleta {
  position: fixed;
  top: 12vh;
  left: 50%;
  z-index: 100002;
  display: flex;
  flex-direction: column;
  width: min(620px, calc(100vw - 32px));
  max-height: 70vh;
  color: var(--color-tinta);
  background: var(--color-superficie);
  border: var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--sombra-panel);
  transform: translate(-50%, -8px);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.15s, transform 0.15s;
}
.k-paleta-velo.k-abierta, .k-paleta.k-abierta { opacity: 1; pointer-events: auto; }
.k-paleta.k-abierta { transform: translate(-50%, 0); }
.k-paleta__fila {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--hairline);
}
.k-paleta__fila:focus-within { box-shadow: inset 0 -2px 0 var(--color-acento); }
.k-paleta__campo {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  font-size: var(--text-m);
  color: inherit;
  background: transparent;
  border: 0;
  outline: 0;
}
.k-paleta__tecla {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  color: var(--color-tinta-3);
  border: var(--hairline);
  border-radius: var(--radius-s);
}
.k-paleta__lista { overflow-y: auto; padding: var(--space-2) 0; }
.k-paleta__grupo {
  padding: var(--space-3) var(--space-4) var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-tinta-3);
}
.k-paleta__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  text-align: left;
  color: inherit;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  cursor: pointer;
}
.k-paleta__item:hover, .k-paleta__item[aria-selected='true'] {
  background: var(--color-acento-suave);
  border-left-color: var(--color-acento);
}
.k-paleta__titulo { font-size: var(--text-s); font-weight: 600; }
.k-paleta__sub { font-size: var(--text-xs); color: var(--color-tinta-3); }
.k-paleta__nada { padding: var(--space-6) var(--space-4); margin: 0 auto; text-align: center; font-size: var(--text-s); color: var(--color-tinta-2); }
.k-encontrado > td { background: var(--color-acento-suave); transition: background 0.3s; }

/* ── 14. La demo pensada para el celular (S7i) ────────────────────────────────
   Nico, 23-09: «explicar cuáles funcionan en el celular, como Yusta Obras, que está pensada
   principalmente para celular». En la compu la demo se muestra en una columna del ancho de un
   teléfono, centrada sobre el papel, SIN marco de teléfono dibujado (`hallmark`, compuerta 47), y
   arriba una línea que lo dice. En el teléfono la línea no aparece: ya está donde tiene que estar.

     <p class="k-celular" data-k-celular>Esta demo está pensada para el teléfono: abrila desde el tuyo.</p>

   La columna la arma la demo (`max-width: var(--ancho-celular)` en su contenedor). */
:root { --ancho-celular: 430px; }
.k-celular {
  max-width: var(--ancho-celular);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-s);
  line-height: var(--lh-body);
  color: var(--color-tinta-2);
  text-align: center;
}
@media (max-width: 700px) { .k-celular { display: none; } }

/* ── Utilidades mínimas ───────────────────────────────────────────────────────── */
.k-caja { max-width: 1360px; margin: 0 auto; padding: var(--space-5); }
.k-solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}