/* Piezas de Inicio del mock v2.1: accesos rápidos (.kx-tile), tira de KPIs (.kx-strip) y avatar de estado.
   Único lugar con degradado y marca de agua (decisión de producto): solo los accesos rápidos de Inicio.
   Color solo vía tokens (--quick-…) u oklch; movimiento solo con los tokens de duración y --ease. */
@layer components {

  /* ───────── Acceso rápido ───────── */
  .kx-tile {
    --kx-q: var(--quick-accent);
    --kx-q2: color-mix(in oklch, var(--kx-q), black 32%);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 9.5rem;
    padding: var(--sp-4);
    border-radius: var(--r-lg);
    background: linear-gradient(150deg, var(--kx-q) 0%, var(--kx-q2) 100%);
    color: var(--quick-fg);
    text-decoration: none;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 22%, transparent), 0 10px 22px -12px var(--kx-q2);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    animation: kx-tile-in var(--dur-slow) var(--ease) both;
    animation-delay: calc(var(--i, 0) * var(--dur-fast));
  }
  .kx-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, white 28%, transparent), transparent 60%);
  }
  .kx-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, white 22%, transparent) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform calc(var(--dur-slow) * 2) var(--ease);
  }
  .kx-tile:focus-visible { outline: var(--focus-w) solid var(--fg-1); outline-offset: var(--focus-offset); }
  .kx-tile:active { transform: translateY(-1px) scale(.98); }
  @media (hover: hover) {
    .kx-tile:hover { transform: translateY(-4px); color: var(--quick-fg); box-shadow: inset 0 1px 0 color-mix(in srgb, white 22%, transparent), 0 22px 38px -16px var(--kx-q2); }
    .kx-tile:hover::after { transform: translateX(120%); }
    .kx-tile:hover .kx-tile__bg { transform: rotate(0) scale(1.12); opacity: .22; }
    .kx-tile:hover .kx-tile__icon { transform: scale(1.08) rotate(-4deg); }
    .kx-tile:hover .kx-tile__go { opacity: 1; transform: none; }
  }

  .kx-tile__bg {
    position: absolute;
    right: -1.1rem;
    bottom: -1.4rem;
    z-index: -1;
    color: var(--quick-fg);
    opacity: .14;
    transform: rotate(-14deg);
    transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
  }
  .kx-tile__bg svg { width: 7.4rem; height: 7.4rem; stroke-width: 1.6; }
  .kx-tile__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); }
  .kx-tile__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--control);
    height: var(--control);
    border-radius: var(--r-md);
    background: color-mix(in srgb, white 20%, transparent);
    box-shadow: inset 0 0 0 var(--border-w) color-mix(in srgb, white 18%, transparent);
    transition: transform var(--dur) var(--ease);
  }
  .kx-tile__icon svg { width: var(--icon-lg); height: var(--icon-lg); }
  .kx-tile__badge {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-pill);
    background: color-mix(in srgb, white 22%, transparent);
    font-family: var(--font-mono);
    font-size: var(--text-13);
    font-weight: var(--w-700);
    line-height: 1;
    white-space: nowrap;
  }
  .kx-tile__value {
    display: block;
    margin-bottom: var(--sp-1);
    font-family: var(--font-mono);
    font-size: var(--text-32);
    font-weight: var(--w-700);
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  .kx-tile__title { display: block; font-size: var(--text-18); font-weight: var(--w-700); line-height: var(--lh-tight); letter-spacing: -.01em; }
  .kx-tile__sub { display: block; margin-top: var(--sp-1); font-size: var(--text-13); font-weight: var(--w-500); line-height: 1.3; color: color-mix(in srgb, white 88%, transparent); }
  .kx-tile__go {
    position: absolute;
    right: var(--sp-3);
    bottom: var(--sp-3);
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: color-mix(in srgb, white 20%, transparent);
    opacity: 0;
    transform: translate(-6px, 6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .kx-tile__go svg { width: var(--icon-sm); height: var(--icon-sm); }

  @media (min-width: 64.0625em) {
    .kx-tile { min-height: 13.5rem; padding: var(--sp-6); }
    .kx-tile__icon { width: var(--control-lg); height: var(--control-lg); }
    .kx-tile__icon svg { width: var(--icon-xl); height: var(--icon-xl); }
    .kx-tile__badge { font-size: var(--text-14); }
    .kx-tile__value { margin-bottom: var(--sp-2); font-size: calc(var(--text-32) * 1.45); }
    .kx-tile__title { font-size: var(--text-24); }
    .kx-tile__sub { font-size: var(--text-16); }
    .kx-tile__bg svg { width: 10.6rem; height: 10.6rem; }
    .kx-tile__go { right: var(--sp-5); bottom: var(--sp-5); width: 2.5rem; height: 2.5rem; }
  }

  /* un tono por acción */
  .kx-tile--vender { --kx-q: var(--quick-accent); }
  .kx-tile--ingresar { --kx-q: oklch(.56 .13 225); --kx-q2: oklch(.44 .12 240); }
  .kx-tile--critico { --kx-q: oklch(.58 .13 65); --kx-q2: oklch(.45 .11 55); }
  .kx-tile--vence { --kx-q: oklch(.57 .18 20); --kx-q2: oklch(.45 .16 18); }
  .kx-tile--admin { --kx-q: oklch(.52 .17 285); --kx-q2: oklch(.40 .15 280); }
  .kx-tile--caja { --kx-q: oklch(.56 .12 165); --kx-q2: oklch(.43 .10 170); }
  .kx-tile--vender .kx-tile__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: kx-tile-pulse calc(var(--dur-slow) * 7) ease-out infinite;
  }

  @keyframes kx-tile-in {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to { opacity: 1; transform: none; }
  }
  @keyframes kx-tile-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, white 55%, transparent); }
    70%, 100% { box-shadow: 0 0 0 14px color-mix(in srgb, white 0%, transparent); }
  }
  @media (prefers-reduced-motion: reduce) {
    .kx-tile, .kx-tile *, .kx-tile::after { animation: none; transition: none; }
  }

  /* ───────── Tira de KPIs (una tarjeta, celdas separadas por línea) ───────── */
  .kx-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--border-w);
    overflow: hidden;
    border: var(--border-w) solid var(--border);
    border-radius: var(--r-md);
    background: var(--border);
  }
  .kx-strip__cell { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding: var(--sp-4) var(--sp-5); background: var(--surface-1); }
  .kx-strip__label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-14); font-weight: var(--w-500); color: var(--fg-2); }
  .kx-strip__value { font-family: var(--font-mono); font-size: var(--text-24); font-weight: var(--w-700); line-height: var(--lh-tight); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .kx-strip__meta { font-size: var(--text-14); color: var(--fg-2); }

  /* ───────── Glifo cuadrado con tono de estado (fila de pendiente) ───────── */
  .kx-glyph { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--avatar); height: var(--avatar); border-radius: var(--r-sm); background: var(--surface-2); color: var(--fg-2); }
  .kx-glyph svg { width: var(--icon); height: var(--icon); }
  .kx-glyph--bad { background: var(--bad-soft); color: var(--bad); }
  .kx-glyph--warn { background: var(--warn-soft); color: var(--warn); }
  .kx-glyph--info { background: var(--accent-soft); color: var(--accent); }

  /* ───────── Pie de tarjeta separado por línea (par de cifras del hero móvil) ───────── */
  .kx-card__split { padding: var(--sp-4) var(--sp-5); border-top: var(--border-w) solid var(--border-weak); }

  /* Cifras del hero móvil de Inicio */
  .kx-figure { font-family: var(--font-mono); font-size: calc(var(--text-32) * 1.3); font-weight: var(--w-700); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .kx-figure--sm { font-size: var(--text-18); letter-spacing: -.01em; line-height: var(--lh-tight); }
  .kx-figure--text { font-family: var(--font-ui); }
}

/* Piezas de Más · Tareas y Biblioteca (mock v2.1): filas con icono suave,
   baldosas de atajo, tarjeta oscura "empieza por aquí" y ruta numerada. Color solo vía tokens. */
@layer components{

  /* lista de filas separadas por línea (la primera no lleva si va sola en su tarjeta) */
  .kx-rows{display:flex;flex-direction:column;min-width:0}
  .kx-rows>*{border-top:var(--border-w) solid var(--border-weak)}
  .kx-rows--bare>:first-child{border-top:0}
  .kx-rows--bare{overflow:hidden}

  /* fila: icono suave · texto · cola (estado, estrella, flecha) */
  .kx-linkrow{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--row-list);padding:var(--sp-3) var(--sp-4);color:var(--fg-1);text-decoration:none}
  .kx-linkrow--card{border:var(--border-w) solid var(--border-weak);border-radius:var(--r-md);background:var(--surface-1)}
  .kx-linkrow__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}
  .kx-linkrow__title{font-size:var(--text-16);font-weight:var(--w-700);line-height:var(--lh-tight);color:var(--fg-1);text-decoration:none;overflow-wrap:anywhere}
  .kx-linkrow__sub{font-size:var(--text-14);color:var(--fg-2)}
  .kx-linkrow__go{flex:none;width:var(--icon);height:var(--icon);color:var(--fg-2)}
  .kx-linkrow__tag svg{width:var(--icon-sm);height:var(--icon-sm)}
  .kx-linkrow__detail{padding:var(--sp-4);background:var(--bg);border-top:var(--border-w) dashed var(--border);font-size:var(--text-16);color:var(--fg-2)}
  @media (hover:hover){a.kx-linkrow:hover{background:var(--bg);color:var(--fg-1)}}

  .kx-ic{flex:none;display:grid;place-items:center;width:var(--avatar);height:var(--avatar);border-radius:var(--r-sm);background:var(--surface-2);color:var(--fg-2)}
  .kx-ic svg{width:var(--icon);height:var(--icon)}
  .kx-ic--accent{background:var(--accent-soft);color:var(--accent)}
  .kx-ic--warn{background:var(--warn-soft);color:var(--warn)}
  .kx-ic--bad{background:var(--bad-soft);color:var(--bad)}
  .kx-ic--ok{background:var(--ok-soft);color:var(--ok)}

  /* atajos: baldosas chicas icono + etiqueta */
  .kx-shortcut-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2)}
  .kx-shortcut{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);min-height:5.5rem;padding:var(--sp-3) var(--sp-2);border:var(--border-w) solid var(--border-weak);border-radius:var(--r-md);background:var(--surface-1);color:var(--fg-1);font-size:var(--text-14);font-weight:var(--w-600);line-height:var(--lh-tight);text-align:center;text-decoration:none;overflow-wrap:anywhere;cursor:pointer}
  .kx-shortcut svg{flex:none;width:var(--icon);height:var(--icon)}
  .kx-shortcut--add{border:var(--border-w) dashed var(--border);background:transparent;color:var(--fg-2)}
  @media (hover:hover){.kx-shortcut:hover{border-color:var(--fg-3);color:var(--fg-1)}}

  /* tarjetas en dos columnas desde M, sin huecos */
  .kx-masonry{display:flex;flex-direction:column;gap:var(--sp-4)}
  .kx-masonry__item{overflow:hidden}
  @media (min-width:40.0625em){
    .kx-masonry{display:block;columns:2;column-gap:var(--sp-5)}
    .kx-masonry>*{break-inside:avoid;margin-bottom:var(--sp-5)}
  }

  /* tarjeta oscura "empieza por aquí" */
  .kx-hero{display:grid;gap:var(--sp-4);align-items:center;padding:var(--sp-4);border-radius:var(--r-lg);background:var(--quick-ink);color:var(--quick-fg)}
  @media (min-width:40.0625em){.kx-hero{padding:var(--sp-7);gap:var(--sp-7)}.kx-hero--shot{grid-template-columns:minmax(0,1fr) minmax(0,20rem)}}
  .kx-hero__body{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
  .kx-hero__body>div:last-child{padding-top:var(--sp-1)}
  .kx-hero__kicker{font-family:var(--font-mono);font-size:var(--text-13);letter-spacing:.08em;text-transform:uppercase;color:var(--ok-soft)}
  .kx-hero__title{color:inherit;font-size:var(--text-24);font-weight:var(--w-700);line-height:1.25;text-wrap:pretty}
  .kx-hero__lede{font-size:var(--text-16);color:color-mix(in srgb,var(--quick-fg) 78%,transparent)}
  .kx-hero__shot{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;border:var(--border-w) solid color-mix(in srgb,var(--quick-fg) 16%,transparent);border-radius:var(--r-sm)}
  .kx-segs{display:flex;gap:var(--sp-1)}
  .kx-segs i{flex:1;height:var(--sp-1);border-radius:var(--r-pill);background:color-mix(in srgb,var(--quick-fg) 22%,transparent)}
  .kx-segs i.is-on{background:var(--ok-soft)}

  /* paso de la ruta: círculo numerado unido por una línea al siguiente */
  .kx-route-step{position:relative;display:grid;grid-template-columns:var(--avatar) minmax(0,1fr);gap:var(--sp-3);align-items:center}
  .kx-route-step::before{content:"";position:absolute;left:calc(var(--avatar) / 2 - 1px);top:calc(var(--sp-2) * -1);bottom:calc(var(--sp-2) * -1);width:var(--border-w-strong);background:var(--border)}
  .kx-route-step:first-of-type::before{top:50%}
  .kx-route-step:last-of-type::before{bottom:50%}
  .kx-route-step:only-of-type::before{display:none}
  .kx-route-step__n{position:relative;z-index:1;display:grid;place-items:center;width:var(--avatar);height:var(--avatar);border:var(--border-w) solid var(--border);border-radius:50%;background:var(--surface-1);font-family:var(--font-mono);font-size:var(--text-14);color:var(--fg-2)}
  .kx-route-step__n svg{width:var(--icon-sm);height:var(--icon-sm)}
  .kx-route-step.is-next .kx-route-step__n{background:var(--fg-1);border-color:var(--fg-1);color:var(--bg)}

  /* rótulo de sección en mono (mock: 'AHORA MISMO EN TU LOCAL', 'PASOS DE INSTALACIÓN') */
  .kx-eyebrow{font-family:var(--font-mono);font-size:var(--text-13);font-weight:var(--w-500);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}

  /* botón con etiquetas alternables de ancho constante: todas las opciones comparten celda de grid y la
     inactiva (--off) se oculta sin salir del flujo => el botón mide siempre lo que la más larga */
  .kx-swap{display:inline-grid;justify-items:center}
  .kx-swap__opt{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2)}
  .kx-swap__opt--off{visibility:hidden}

  /* Rejilla de KPIs de las páginas de listado (antes en v4/components.css, capa legacy) */
  .kx-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;padding:1.5rem}
}