/* GENERADO desde sistema-diseno/css/componentes.css con herramientas/sincronizar_sistema.py. No se edita aquí. */
/* Kitsite · componentes del sistema de diseño (2026-10-24)
 * Requiere tokens.css. Las clases que ya existían en la landing y el onboarding conservan su nombre
 * (.boton, .campo, .chip, .opcion, .segmento, .interruptor, .pasos, .codigo, .entregables, .ficha…) para que esas
 * páginas puedan cargar este archivo sin cambiar su HTML. Nombres en español, con bloque__elemento--variante.
 * Catálogo vivo: sistema-diseno/index.html. Reglas: sistema-diseno/README.md. */

/* ── 0 · Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.6; font-weight: var(--peso-cuerpo);
  font-variation-settings: "opsz" 18; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
[data-tema] { color: var(--color-ink); }
h1, h2, h3, h4, p, figure { margin: 0; font-weight: inherit; font-style: normal; }
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
::selection { background: var(--color-ink); color: var(--color-on-ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 0.92em; }

/* La esquina de Stackgrid va en todo lo que tiene radio (salvo lo redondo) */
:is(.boton, .campo__input, .campo__caja, .arranque__fila, .chip span, .chip-b, .segmento, .segmento :is(button, a), .pestanas--bandeja, .pestanas--bandeja [role="tab"],
  .etiqueta, .estado, .nivel, .avatar--negocio, .tooltip, .flotante, .menu__item, .kbd, .dialogo, .cajon, .toast, .banner, .esqueleto,
  .paginacion a, .paginacion button, .tarjeta, .bandeja, .opcion__caja, .fuente__caja, .ficha, .kit-cuadro, .kpi, .aviso, .lista-vacia, .zona-subida,
  .codigo input, .entregables li, .mensaje, .nota-interna, .asistente, .propuesta, .mensualidad, .lateral__item, .lateral__sitio, .barra-inferior a,
  .tabla-marco, .accion, .sitio-tarjeta, .alambre, .campo__mic, .casilla__caja,
  .tabla-bandeja, .tabla-bandeja td, .lista-cifras__fila, .widget, .widget__hoja, .item-tarjeta) { corner-shape: var(--esquina); }

/* ── 1 · Íconos ──
   Lineales (Lucide): 1.6 de trazo, puntas redondas, 16–20 px. Los íconos de kit son las 4 piezas (js/kits.js) */
.ico { flex: none; width: 18px; height: 18px; stroke-width: 1.6; }
.ico--chico { width: 16px; height: 16px; }
.ico--grande { width: 20px; height: 20px; }
.kit { --k: 1; position: relative; display: inline-block; flex: none; width: calc(22px * var(--k)); height: calc(22px * var(--k)); }
.kit__m { position: absolute; left: 0; top: 0; width: 22px; height: 22px; transform: scale(var(--k)); transform-origin: 0 0; }
.kit__m > i { position: absolute; background: currentColor; border-radius: 4px; /* libre: geometría del ícono de 22×22 (js/kits.js) */
  transition: left var(--dur-long) var(--ease-out), top var(--dur-long) var(--ease-out), width var(--dur-long) var(--ease-out), height var(--dur-long) var(--ease-out),
    border-radius var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.kit__m > i.hueco { background: var(--kit-hueco, var(--color-sheet)); }

/* Cuadro de kit: el único lugar con color. Degradado de malla calculado de --kc (luz arriba, sombra abajo, grano) */
.kit-cuadro { --tam: 44px; position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; flex: none;
  width: var(--tam); height: var(--tam); border-radius: var(--radius-pieza); background: var(--kc, var(--gris-800)); color: var(--color-sobre-kit); }
.kit-cuadro .kit { --k: 0.95; --kit-hueco: var(--kc, var(--gris-800)); z-index: 1; filter: var(--sombra-kit); }
.kit-cuadro--mini { --tam: 24px; } .kit-cuadro--mini .kit { --k: 0.5; }
.kit-cuadro--chico { --tam: 34px; } .kit-cuadro--chico .kit { --k: 0.68; }
.kit-cuadro--grande { --tam: 64px; } .kit-cuadro--grande .kit { --k: 1.4; }
.kit-cuadro--pieza { --tam: 112px; border-radius: var(--radius-pieza); } .kit-cuadro--pieza .kit { --k: 2.4; }
@supports (color: oklch(from red l c h)) {
  .kit-cuadro {
    background:
      radial-gradient(75% 65% at 18% 8%, oklch(from var(--kc, var(--gris-800)) calc(l + 0.17) calc(c * 0.7) calc(h + 24)) 0%, transparent 72%),
      radial-gradient(70% 70% at 92% 104%, oklch(from var(--kc, var(--gris-800)) calc(l - 0.15) calc(c * 1.05) calc(h - 22)) 0%, transparent 70%),
      radial-gradient(60% 60% at 100% 0%, oklch(from var(--kc, var(--gris-800)) calc(l + 0.06) c calc(h - 10)) 0%, transparent 70%),
      var(--kc, var(--gris-800));
  }
}
.kit-cuadro::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0.22; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
/* En tema oscuro, Tu sitio y Kit a la medida pasan a gis para no perderse en la hoja */
[data-tema="oscuro"] .kit-cuadro:has([data-kit="kitsite"], [data-kit="medida"]) { --kc: var(--gris-200) !important; color: var(--gris-800); }
[data-tema="oscuro"] .kit-cuadro :is([data-kit="kitsite"], [data-kit="medida"]) { --kit-hueco: var(--gris-200); }

/* Cuadro de ícono lineal (sin color): tinta con el ícono en papel */
.ico-cuadro { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-pieza); corner-shape: var(--esquina); background: var(--color-ink); color: var(--color-on-ink); }
.ico-cuadro--suave { background: var(--color-paper-3); color: var(--color-ink); }
.ico-cuadro--chico { width: 32px; height: 32px; }

/* Logo: la rejilla de 2×2 (22×22, 2 px de aire). Fijo, sin animar */
.logo { display: inline-flex; align-items: center; color: var(--color-ink); text-decoration: none; }
.logo svg { height: 20px; width: auto; fill: currentColor; }

/* ── 2 · Botones ── */
.boton {
  --bh: var(--control-h);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  height: var(--bh); padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-control);
  font-size: var(--text-body); font-weight: var(--peso-boton); letter-spacing: -0.005em; white-space: nowrap; text-decoration: none; cursor: pointer;
  background: var(--color-paper-2); color: var(--color-ink); box-shadow: var(--anillo-fuerte);
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
.boton .ico { margin-inline: -2px; }
.boton:hover { background: var(--color-paper-3); }
.boton:active { transform: translateY(0) scale(0.985); }
/* Principal: el único color de acción. Uno por pantalla */
.boton--tinta { background: var(--color-ink); color: var(--color-on-ink); box-shadow: none; }
.boton--tinta:hover { background: var(--color-ink-2); transform: translateY(-1px); }
/* Secundario de Stackgrid: gris con anillo (es el valor por defecto de .boton) */
.boton--gris { background: var(--color-paper-2); color: var(--color-ink); box-shadow: var(--anillo-fuerte); }
.boton--gris:hover { background: var(--color-paper-3); }
/* Fantasma: acciones terciarias y barras de herramientas */
.boton--fantasma { background: transparent; box-shadow: none; }
.boton--fantasma:hover { background: var(--color-paper-2); }
/* Destructivo: solo dentro del diálogo que confirma */
.boton--peligro { background: var(--color-error); color: var(--color-sobre-color); box-shadow: none; }
.boton--peligro:hover { background: color-mix(in oklch, var(--color-error) 88%, var(--gris-950)); }
.boton--peligro-suave { background: transparent; color: var(--color-error-texto); box-shadow: none; }
.boton--peligro-suave:hover { background: var(--color-error-fondo); }
/* Claro: sobre superficies en tinta (dock, ficha a la medida, toast) */
.boton--claro { background: var(--color-on-ink); color: var(--color-ink); box-shadow: none; }
.boton--claro:hover { background: color-mix(in oklch, var(--color-on-ink) 88%, var(--color-ink)); }
/* Tamaños */
.boton--chico { --bh: var(--control-h-chico); padding: 0 var(--space-sm); font-size: var(--text-sm); }
.boton--grande { --bh: var(--control-h-grande); padding: 0 var(--space-xl); font-size: var(--text-tarjeta); }
.boton--ancho { width: 100%; }
.boton--icono { width: var(--bh); padding: 0; }
/* Estados */
.boton:disabled, .boton[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; transform: none; }
.boton[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.boton[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  background: conic-gradient(var(--spin, var(--color-on-ink)) 0 28%, transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 6px, #000 6.5px); mask: radial-gradient(circle, transparent 6px, #000 6.5px); animation: girar 0.8s linear infinite; }
.boton:not(.boton--tinta, .boton--peligro)[aria-busy="true"]::after { --spin: var(--color-ink); }
.grupo-botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }

/* Liga: texto subrayado */
.liga { padding: 0; border: 0; background: none; color: var(--color-ink); font-size: inherit; font-weight: var(--peso-boton); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.liga:hover { color: var(--color-ink-soft); }
.liga-flecha { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; font-size: var(--text-sm); font-weight: var(--peso-boton); text-decoration: none; white-space: nowrap; color: var(--color-ink); }
.liga-flecha .ico { width: 14px; height: 14px; transition: transform var(--dur-short) var(--ease-out); }
.liga-flecha:hover .ico { transform: translateX(3px); }

/* ── 3 · Campos ── */
.campo { display: grid; gap: var(--space-xs); min-width: 0; }
.campo__label { font-size: var(--text-sm); font-weight: var(--peso-boton); }
.campo__label small { margin-left: var(--space-2xs); font-weight: var(--peso-cuerpo); color: var(--color-ink-soft); }
.campo__input { width: 100%; height: var(--campo-h); padding: 0 var(--space-md); border: 0; border-radius: var(--radius-campo); background: var(--color-sheet);
  box-shadow: var(--anillo-fuerte); font-size: var(--text-body); outline: none; transition: box-shadow var(--dur-short) var(--ease-out); }
[data-densidad="densa"] .campo__input { padding: 0 var(--space-sm); font-size: var(--text-ui); }
textarea.campo__input { height: auto; min-height: 104px; padding: var(--space-sm) var(--space-md); resize: vertical; line-height: 1.5; }
select.campo__input { appearance: none; padding-right: 40px; background: var(--color-sheet) var(--icono-flecha) right 14px center / 16px no-repeat; cursor: pointer; }
.campo__input:hover { box-shadow: inset 0 0 0 1px var(--color-ink-faint); }
.campo__input:focus, .campo__caja:focus-within { box-shadow: var(--anillo-sel); }
.campo__input::placeholder, .campo__caja input::placeholder { color: var(--color-ink-faint); }
.campo__input:disabled, .campo__caja:has(input:disabled) { background: var(--color-paper-2); color: var(--color-ink-soft); box-shadow: var(--anillo); cursor: not-allowed; }
.campo__nota { font-size: var(--text-xs); color: var(--color-ink-soft); }
.campo__pie { display: flex; justify-content: space-between; gap: var(--space-sm); }
.campo__contador { font-size: var(--text-xs); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; margin-left: auto; }
.campo__error { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--peso-boton); color: var(--color-error-texto); }
.campo__error .ico { width: 14px; height: 14px; }
.campo[data-error] .campo__input, .campo[data-error] .campo__caja { box-shadow: var(--anillo-error); }
/* Con prefijo o sufijo (+52, https://, @, $): la caja lleva el anillo y el input va limpio */
.campo__caja { display: flex; align-items: center; height: var(--campo-h); border-radius: var(--radius-campo); background: var(--color-sheet); box-shadow: var(--anillo-fuerte); transition: box-shadow var(--dur-short) var(--ease-out); overflow: hidden; }
.campo__caja input { flex: 1; min-width: 0; height: 100%; padding: 0 var(--space-md); border: 0; background: transparent; outline: none; font-size: var(--text-body); }
.campo__prefijo, .campo__sufijo { display: flex; align-items: center; height: 100%; padding: 0 var(--space-sm); color: var(--color-ink-soft); font-size: var(--text-sm); white-space: nowrap; }
.campo__prefijo { padding-right: 0; }
.campo__prefijo + input { padding-left: var(--space-xs); }
.campo__prefijo--caja { padding: 0 var(--space-sm); background: var(--color-paper-2); box-shadow: inset -1px 0 0 var(--color-line); }
.campo__prefijo--caja + input { padding-left: var(--space-sm); }
.campo__caja .ico { margin-left: var(--space-sm); color: var(--color-ink-soft); }
.campo__caja .ico + input { padding-left: var(--space-xs); }
/* Dictado: el micrófono vive en la esquina del campo (como en los chats) */
.dictado { position: relative; }
.dictado textarea.campo__input { display: block; padding-bottom: 52px; resize: none; }
.campo__mic { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius-control-chico); background: var(--color-paper-2); color: var(--color-ink-soft); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.campo__mic:hover { background: var(--color-paper-3); color: var(--color-ink); }
.campo__mic[aria-pressed="true"] { background: var(--color-ink); color: var(--color-on-ink); animation: voz-pulso 1.4s var(--ease-out) infinite; }
@keyframes voz-pulso { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-ink) 30%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }

/* Campo con acción (el «¿Cómo se llama tu negocio?» de la landing) */
.arranque { display: grid; gap: var(--space-xs); max-width: 460px; min-width: 0; }
@media (max-width: 767.98px) {
  /* Celular: el campo con su propio anillo y el botón abajo, a lo ancho (como en la landing) */
  .arranque__fila { flex-direction: column; padding: 0; background: transparent; box-shadow: none; }
  .arranque__fila:focus-within { box-shadow: none; }
  .arranque__campo { flex: none; height: 48px; border-radius: var(--radius-campo); corner-shape: var(--esquina); background: var(--color-sheet); box-shadow: var(--anillo-fuerte); }
  .arranque__campo:focus { box-shadow: var(--anillo-sel); }
  .arranque__fila .boton { width: 100%; height: 48px; }
  .arranque__nota { padding-left: 0; }
}
.arranque__label { font-size: var(--text-sm); font-weight: var(--peso-boton); }
.arranque__fila { display: flex; gap: var(--space-xs); padding: var(--space-2xs); border-radius: var(--radius-campo); background: var(--color-sheet); box-shadow: var(--anillo-fuerte); transition: box-shadow var(--dur-short) var(--ease-out); }
.arranque__fila:focus-within { box-shadow: var(--anillo-sel); }
.arranque__campo { flex: 1; min-width: 0; height: 44px; padding: 0 var(--space-md); border: 0; background: transparent; outline: none; font-size: var(--text-body); }
.arranque__campo::placeholder { color: var(--color-ink-faint); }
.arranque__nota { padding-left: var(--space-md); font-size: var(--text-xs); color: var(--color-ink-soft); }

/* Código de 6 dígitos (Fragment Mono: el único uso de la mono en un control) */
.codigo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-xs); }
.codigo input { width: 100%; height: 56px; border: 0; border-radius: var(--radius-control); box-shadow: var(--anillo-fuerte); background: var(--color-sheet); text-align: center; font-family: var(--font-mono); font-size: var(--text-seccion); outline: none; }
.codigo input:focus { box-shadow: var(--anillo-sel); }
.codigo[data-error] input { box-shadow: var(--anillo-error); }

/* Zona de subida */
.zona-subida { display: grid; justify-items: center; gap: var(--space-xs); padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-lg); border: 1.5px dashed var(--color-line-strong); text-align: center; color: var(--color-ink-soft); font-size: var(--text-sm); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.zona-subida b { color: var(--color-ink); font-weight: var(--peso-boton); }
.zona-subida:hover, .zona-subida[data-encima] { background: var(--color-paper-2); border-color: var(--color-ink-faint); }
.archivo { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-md); corner-shape: var(--esquina); box-shadow: var(--anillo); font-size: var(--text-sm); }
.archivo__nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--peso-boton); }
.archivo .progreso { width: 96px; }

/* ── 4 · Selección: casilla, radio, interruptor, chips, segmento, opciones ── */
.control { position: relative; display: flex; align-items: flex-start; gap: var(--space-sm); cursor: pointer; font-size: var(--text-ui); }
.control > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.control__txt { display: grid; gap: 1px; min-width: 0; line-height: 1.4; padding-top: 1px; }
.control__txt b { font-weight: var(--peso-boton); }
.control__txt small { font-size: var(--text-sm); color: var(--color-ink-soft); }
.casilla__caja, .radio__caja { flex: none; width: 20px; height: 20px; margin-top: 1px; box-shadow: inset 0 0 0 1.5px var(--color-line-strong); background: var(--color-sheet); transition: box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.casilla__caja { border-radius: var(--radius-pieza); }
.radio__caja { border-radius: 50%; }
.control:hover .casilla__caja, .control:hover .radio__caja { box-shadow: inset 0 0 0 1.5px var(--color-ink-faint); }
.control > input:checked + .casilla__caja { background: var(--color-ink) var(--icono-check) center / 14px no-repeat; box-shadow: none; }
.control > input:indeterminate + .casilla__caja { background: var(--color-ink) linear-gradient(var(--color-on-ink), var(--color-on-ink)) center / 10px 2px no-repeat; box-shadow: none; }
.control > input:checked + .radio__caja { box-shadow: inset 0 0 0 6px var(--color-ink); }
.control > input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.control > input:disabled ~ * { opacity: 0.45; cursor: not-allowed; }
/* Interruptor */
.interruptor { flex: none; position: relative; width: 40px; height: 24px; border-radius: var(--radius-redondo); background: var(--color-paper-3); box-shadow: var(--anillo-fuerte); transition: background-color var(--dur-short) var(--ease-out); }
.interruptor::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--gris-0); box-shadow: 0 1px 2px color-mix(in oklch, var(--sombra-base) 25%, transparent); transition: transform var(--dur-short) var(--ease-out); }
.control > input:checked + .interruptor, .opcion input:checked + .opcion__caja .interruptor { background: var(--color-ink); box-shadow: none; }
.control > input:checked + .interruptor::after, .opcion input:checked + .opcion__caja .interruptor::after { transform: translateX(16px); }
[data-tema="oscuro"] .control > input:checked + .interruptor::after { background: var(--gris-800); }
.control--derecha { justify-content: space-between; flex-direction: row-reverse; }

/* Chips: elegir uno o varios (giros, filtros, respuestas) */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; border: 0; }
.chips legend { padding: 0; margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: var(--peso-boton); }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span, .chip-b { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 40px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-control); background: transparent; box-shadow: var(--anillo-fuerte);
  font-size: var(--text-sm); font-weight: var(--peso-ui); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
[data-densidad="densa"] :is(.chip span, .chip-b) { min-height: 30px; }
.chip input:hover + span, .chip-b:hover { background: var(--color-paper-2); }
.chip input:checked + span, .chip-b[aria-pressed="true"] { background: var(--color-ink); color: var(--color-on-ink); box-shadow: none; }
.chip input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.chip-b__quitar { display: grid; place-items: center; width: 18px; height: 18px; margin-right: -4px; border-radius: var(--radius-pieza); opacity: 0.7; }
.chip-b__quitar:hover { opacity: 1; background: var(--color-ink-2); }

/* Segmento: 2 a 5 vistas de lo mismo (PC/celular, mensual/anual, filtros de lista) */
.segmento { display: inline-flex; width: fit-content; padding: 3px; border-radius: var(--radius-control); background: var(--color-paper-3); }
/* También con enlaces, cuando cada opción es otra URL (filtros del portal) */
.segmento :is(button, a) { display: inline-flex; text-decoration: none; align-items: center; justify-content: center; gap: 6px; height: calc(var(--control-h) - 12px); min-width: 76px; padding: 0 var(--space-sm); border: 0; border-radius: calc(var(--radius-control) - 3px); /* libre: radio anidado = el de fuera − el relleno */
  background: transparent; color: var(--color-ink-soft); font-size: var(--text-sm); font-weight: var(--peso-ui); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.segmento :is(button, a):hover { color: var(--color-ink); }
.segmento :is(button, a)[aria-pressed="true"] { background: var(--color-sheet); color: var(--color-ink); box-shadow: var(--sombra-1); }
.segmento__conteo { min-width: 20px; padding: 0 5px; border-radius: var(--radius-xs); background: var(--color-paper-2); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* Opciones grandes: una caja por opción (objetivo, kit, plan, método) */
.opciones { display: grid; gap: var(--space-xs); margin: 0; padding: 0; border: 0; }
.opciones--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.opcion { position: relative; display: block; }
.opcion input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.opcion__caja { display: flex; align-items: center; gap: var(--space-md); min-height: 60px; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); box-shadow: var(--anillo-fuerte); background: var(--color-sheet); transition: box-shadow var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.opcion input:hover + .opcion__caja { background: var(--color-paper-2); }
.opcion input:checked + .opcion__caja { box-shadow: var(--anillo-sel); }
.opcion input:focus-visible + .opcion__caja { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.opcion input:disabled { cursor: not-allowed; }
.opcion input:disabled:not(:checked) + .opcion__caja { opacity: 0.5; } /* las marcadas y fijas («Siempre va») se leen normal */
.opcion__txt { display: grid; flex: 1; min-width: 0; line-height: 1.4; }
.opcion__nombre { font-weight: var(--peso-boton); }
.opcion__desc { font-size: var(--text-sm); color: var(--color-ink-soft); }
.opcion__fijo { flex: none; font-size: var(--text-sm); font-weight: var(--peso-boton); font-variant-numeric: tabular-nums; }
.opcion__radio { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--color-line-strong); }
.opcion input:checked + .opcion__caja .opcion__radio { box-shadow: inset 0 0 0 6px var(--color-ink); }
.opcion__check { flex: none; width: 20px; height: 20px; border-radius: var(--radius-pieza); box-shadow: inset 0 0 0 1.5px var(--color-line-strong); }
.opcion input:checked + .opcion__caja .opcion__check { background: var(--color-ink) var(--icono-check) center / 14px no-repeat; box-shadow: none; }
.opcion--peligro input:checked + .opcion__caja { box-shadow: var(--anillo-error); }
/* Fuente: opción vertical con ícono (Google · Instagram · A mano) */
.fuentes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin: 0; padding: 0; border: 0; }
.fuente { position: relative; display: block; }
.fuente input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.fuente__caja { display: grid; justify-items: center; gap: 2px; padding: var(--space-sm) var(--space-2xs); border-radius: var(--radius-md); box-shadow: var(--anillo-fuerte); text-align: center; transition: box-shadow var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.fuente__caja .ico { width: 24px; height: 24px; margin-bottom: 4px; }
.fuente__caja b { font-size: var(--text-sm); font-weight: var(--peso-fuerte); }
.fuente__caja small { font-size: var(--text-xs); color: var(--color-ink-soft); }
.fuente input:hover + .fuente__caja { background: var(--color-paper-2); }
.fuente input:checked + .fuente__caja { box-shadow: var(--anillo-sel); }

/* ── 5 · Pestañas ── */
.pestanas { display: flex; gap: var(--space-lg); box-shadow: inset 0 -1px 0 var(--color-line); overflow-x: auto; scrollbar-width: none; }
.pestanas [role="tab"] { position: relative; display: inline-flex; align-items: center; gap: 6px; height: calc(var(--control-h) + 2px); padding: 0; border: 0; background: none; color: var(--color-ink-soft); font-size: var(--text-ui); font-weight: var(--peso-ui); white-space: nowrap; cursor: pointer; }
.pestanas [role="tab"]:hover { color: var(--color-ink); }
.pestanas [role="tab"][aria-selected="true"] { color: var(--color-ink); }
.pestanas [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: var(--radius-redondo); background: var(--color-ink); }
.pestanas [role="tab"]:focus-visible { outline-offset: -2px; }
/* En bandeja (galería de la landing): para categorías */
.pestanas--bandeja { display: inline-flex; gap: 6px; width: fit-content; max-width: 100%; padding: 6px; border-radius: var(--radius-control); background: var(--color-paper-3); box-shadow: none; }
.pestanas--bandeja [role="tab"] { height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-md); background: var(--color-sheet); color: var(--color-ink); font-size: var(--text-sm); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.pestanas--bandeja [role="tab"]:hover { background: var(--color-paper-2); }
.pestanas--bandeja [role="tab"][aria-selected="true"] { background: var(--color-ink); color: var(--color-on-ink); }
.pestanas--bandeja [role="tab"][aria-selected="true"]::after { display: none; }

/* ── 6 · Etiquetas, estados y niveles ──
   La etiqueta es la pastilla gris de la landing (opción C de opciones-etiquetas.html): 12 px, peso 600, esquina de Stackgrid */
.etiqueta { display: inline-flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; min-height: 26px; padding: 3px 10px; border-radius: var(--radius-sm);
  background: var(--color-paper-3); color: var(--color-ink); font-size: var(--text-xs); line-height: 1.35; font-weight: var(--peso-fuerte); white-space: nowrap; }
.etiqueta--chica { min-height: 22px; padding: 1px 8px; border-radius: var(--radius-sm); font-size: var(--text-2xs); }
.etiqueta--contorno { background: transparent; box-shadow: var(--anillo-fuerte); color: var(--color-ink-soft); }
.etiqueta--tinta { background: var(--color-ink); color: var(--color-on-ink); }
.etiqueta--ok { background: var(--color-ok-fondo); color: var(--color-ok-texto); }
.etiqueta--aviso { background: var(--color-aviso-fondo); color: var(--color-aviso-texto); }
.etiqueta--error { background: var(--color-error-fondo); color: var(--color-error-texto); }
.etiqueta--beta { background: transparent; box-shadow: inset 0 0 0 1px var(--color-line-strong); color: var(--color-ink-soft); }
.etiqueta--beta::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pieza); box-shadow: inset 0 0 0 1.5px currentColor; }

/* Estado: los 12 del ciclo de vida del sitio. El punto es un cuadrito (la pieza del logo), no un círculo.
   Quién tiene el turno decide el color: te toca → tinta · trabajamos → gris · bien → verde · atención → ámbar · problema → rojo · terminó → tenue */
.estado { --ef: var(--color-paper-3); --et: var(--color-ink); --ep: var(--color-ink-soft);
  display: inline-flex; align-items: center; gap: 7px; width: fit-content; min-height: 26px; padding: 3px 10px 3px 9px; border-radius: var(--radius-sm);
  background: var(--ef); color: var(--et); font-size: var(--text-xs); line-height: 1.35; font-weight: var(--peso-fuerte); white-space: nowrap; }
.estado::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: var(--radius-pieza); background: var(--ep); }
.estado[data-estado="borrador"] { --ef: var(--color-paper-2); --et: var(--color-ink-soft); --ep: var(--color-line-strong); box-shadow: var(--anillo); }
.estado[data-estado="construccion"] { --ep: var(--color-ink-soft); }
.estado[data-estado="construccion"]::before { animation: estado-late 1.6s var(--ease-in-out) infinite; }
.estado[data-estado="muestra"] { --ef: var(--color-ink); --et: var(--color-on-ink); --ep: var(--color-on-ink); }
.estado[data-estado="revision"] { --ef: var(--color-sheet); --ep: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.estado[data-estado="ajustes"] { --ep: var(--color-ink-soft); }
.estado[data-estado="ajustes"]::before { animation: estado-late 1.6s var(--ease-in-out) infinite; }
.estado[data-estado="aprobado"] { --ef: var(--color-ok-fondo); --et: var(--color-ok-texto); --ep: var(--color-ok); }
.estado[data-estado="publicando"] { --ef: var(--color-ok-fondo); --et: var(--color-ok-texto); --ep: var(--color-ok); }
.estado[data-estado="publicando"]::before { animation: estado-late 1.2s var(--ease-in-out) infinite; }
.estado[data-estado="publicado"] { --ef: var(--color-ok); --et: var(--color-sobre-color); --ep: var(--color-sobre-color); }
[data-tema="oscuro"] .estado[data-estado="publicado"] { --et: var(--gris-950); --ep: var(--gris-950); }
.estado[data-estado="pausado-pago"] { --ef: var(--color-error-fondo); --et: var(--color-error-texto); --ep: var(--color-error); }
.estado[data-estado="pausado"] { --ef: var(--color-aviso-fondo); --et: var(--color-aviso-texto); --ep: var(--color-aviso); }
.estado[data-estado="cancelado"] { --ef: transparent; --et: var(--color-ink-soft); --ep: var(--color-ink-faint); box-shadow: var(--anillo-fuerte); }
.estado[data-estado="archivado"] { --ef: transparent; --et: var(--color-ink-soft); --ep: transparent; box-shadow: inset 0 0 0 1px var(--color-line-strong); }
.estado[data-estado="archivado"]::before { box-shadow: inset 0 0 0 1.5px var(--color-ink-faint); }
@keyframes estado-late { 50% { opacity: 0.25; } }
/* Punto suelto (en tablas densas y listas) */
.punto { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-pieza); background: var(--color-ink-faint); vertical-align: 1px; }
.punto--ok { background: var(--color-ok); } .punto--aviso { background: var(--color-aviso); } .punto--error { background: var(--color-error); } .punto--tinta { background: var(--color-ink); }

/* Nivel del kit: $39 · $79 · $149, con 1 a 3 piezas llenas */
.nivel { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 3px 10px 3px 8px; border-radius: var(--radius-sm); background: var(--color-paper-3); font-size: var(--text-xs); font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nivel i { display: grid; grid-template-columns: repeat(3, 5px); gap: 2px; }
.nivel i::before, .nivel i::after, .nivel i b { content: ""; width: 5px; height: 5px; border-radius: var(--radius-pieza); background: var(--color-line-strong); }
.nivel i::before { grid-column: 1; }
.nivel i b { grid-column: 2; }
.nivel i::after { grid-column: 3; }
.nivel[data-nivel="1"] i::before, .nivel[data-nivel="2"] i::before, .nivel[data-nivel="2"] i b, .nivel[data-nivel="3"] i::before, .nivel[data-nivel="3"] i b, .nivel[data-nivel="3"] i::after { background: var(--color-ink); }

/* ── 7 · Avatares ── */
.avatar { --av: 36px; display: inline-grid; place-items: center; flex: none; width: var(--av); height: var(--av); border-radius: 50%; overflow: hidden; background: var(--color-paper-3); color: var(--color-ink); font-size: calc(var(--av) * 0.38); font-weight: var(--peso-fuerte); letter-spacing: -0.01em; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--chico { --av: 28px; } .avatar--grande { --av: 48px; }
.avatar--negocio { border-radius: var(--radius-pieza); background: var(--color-ink); color: var(--color-on-ink); }
.avatar--equipo { background: var(--color-ink); color: var(--color-on-ink); }
.avatares { display: inline-flex; }
.avatares .avatar { box-shadow: 0 0 0 2px var(--color-sheet); }
.avatares .avatar + .avatar { margin-left: -8px; }

/* ── 8 · Flotantes: tooltip, menú y popover (vidrio esmerilado, como el menú de la landing) ── */
.tooltip { display: inline-block; max-width: 240px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-on-ink); font-size: var(--text-xs); font-weight: var(--peso-ui); line-height: 1.4; box-shadow: var(--sombra-2); }
.flotante { min-width: 220px; padding: 6px; border-radius: var(--radius-xl); background: var(--color-vidrio); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--gris-0) 50%, transparent), inset 0 0 0 1px color-mix(in oklch, var(--color-ink) 8%, transparent), var(--sombra-4); }
[data-tema="oscuro"] .flotante { box-shadow: inset 0 1px 0 color-mix(in oklch, var(--gris-0) 6%, transparent), inset 0 0 0 1px color-mix(in oklch, var(--gris-0) 8%, transparent), var(--sombra-4); }
.flotante--panel { width: min(360px, 100%); padding: var(--space-md); border-radius: var(--radius-xl); }
.menu { display: grid; }
.menu__grupo { padding: 8px 10px 4px; font-size: var(--text-xs); font-weight: var(--peso-fuerte); color: var(--color-ink-soft); }
.menu__item { display: flex; align-items: center; gap: var(--space-sm); width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: var(--radius-md); background: none; font-size: var(--text-sm); font-weight: var(--peso-ui); text-align: left; text-decoration: none; cursor: pointer; }
[data-densidad="densa"] .menu__item { min-height: 32px; }
.menu__item .ico { color: var(--color-ink-soft); width: 16px; height: 16px; }
.menu__item:hover, .menu__item:focus-visible, .menu__item[data-activo] { background: color-mix(in oklch, var(--color-ink) 7%, transparent); outline: none; }
.menu__item[aria-checked="true"]::after { content: ""; width: 16px; height: 16px; margin-left: auto; background: var(--color-ink); -webkit-mask: var(--icono-check-mascara) center / 16px no-repeat; mask: var(--icono-check-mascara) center / 16px no-repeat; }
.menu__item--peligro { color: var(--color-error-texto); } .menu__item--peligro .ico { color: currentColor; }
.menu__atajo { margin-left: auto; display: flex; gap: 3px; }
.menu__separador { height: 1px; margin: 5px 8px; background: color-mix(in oklch, var(--color-ink) 10%, transparent); }
.menu__buscar { display: flex; align-items: center; gap: var(--space-xs); height: 40px; margin-bottom: 4px; padding: 0 10px; border-radius: var(--radius-md); corner-shape: var(--esquina); background: color-mix(in oklch, var(--color-ink) 5%, transparent); }
.menu__buscar input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: var(--text-sm); }
.menu__buscar .ico { width: 16px; height: 16px; color: var(--color-ink-soft); }
:root { --icono-check-mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* Tecla */
.kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-xs); background: var(--color-sheet); box-shadow: var(--anillo-fuerte), 0 1px 0 var(--color-line-strong); font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: var(--peso-fuerte); color: var(--color-ink-soft); line-height: 1; }

/* ── 9 · Diálogo y hoja (con <dialog>) ── */
.dialogo, .cajon { padding: 0; border: 0; color: var(--color-ink); background: var(--color-sheet); box-shadow: var(--anillo), var(--sombra-5); }
.dialogo::backdrop, .cajon::backdrop { background: var(--color-velo); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.dialogo { width: min(520px, calc(100vw - 2 * var(--space-md))); max-height: min(720px, calc(100svh - 2 * var(--space-md))); border-radius: var(--radius-xl); overflow: auto; }
.dialogo--chico { width: min(400px, calc(100vw - 2 * var(--space-md))); }
.dialogo--grande { width: min(760px, calc(100vw - 2 * var(--space-md))); }
.dialogo[open] { animation: dialogo-entra var(--dur-long) var(--ease-out); }
.dialogo[open]::backdrop { animation: velo-entra var(--dur-long) var(--ease-out); }
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes velo-entra { from { opacity: 0; } }
.dialogo__cabeza { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-lg) var(--space-lg) 0; }
.dialogo__cabeza > :first-child { flex: 1; min-width: 0; }
.dialogo__titulo { flex: 1; font-size: var(--text-seccion); line-height: 1.2; font-weight: var(--peso-fuerte); letter-spacing: -0.02em; }
.dialogo__texto { margin-top: var(--space-2xs); font-size: var(--text-ui); color: var(--color-ink-soft); }
.dialogo__cuerpo { display: grid; gap: var(--space-md); padding: var(--space-lg); }
.dialogo__pie { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-xs); padding: var(--space-md) var(--space-lg) var(--space-lg); }
.dialogo__pie--linea { box-shadow: inset 0 1px 0 var(--color-line); }
.dialogo__cerrar { margin: -6px -6px 0 0; }
/* Hoja: lateral en PC, desde abajo en el celular */
.cajon { position: fixed; inset: 8px 8px 8px auto; margin: 0; width: min(440px, calc(100vw - 16px)); height: auto; max-height: none; border-radius: var(--radius-xl); display: none; }
.cajon[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: hoja-entra var(--dur-panel) var(--ease-panel); }
@keyframes hoja-entra { from { transform: translateX(24px); opacity: 0; } }
.cajon .dialogo__cuerpo { overflow: auto; }
@media (max-width: 767.98px) {
  .cajon { inset: auto 0 0 0; width: 100%; max-height: 88svh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .cajon[open] { animation-name: hoja-sube; }
  .cajon::before { content: ""; position: absolute; left: 50%; top: 8px; translate: -50% 0; width: 36px; height: 4px; border-radius: var(--radius-redondo); background: var(--color-line-strong); }
  @keyframes hoja-sube { from { transform: translateY(32px); opacity: 0; } }
  .dialogo { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .dialogo__pie { flex-direction: column-reverse; }
  .dialogo__pie .boton { width: 100%; }
}

/* ── 10 · Acordeón: el cuadrito gira 45° al abrir (preguntas de la landing) ── */
.acordeon { border-top: 1px solid var(--color-line); }
.acordeon details { border-bottom: 1px solid var(--color-line); }
.acordeon summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 56px; padding: var(--space-sm) 0; cursor: pointer; list-style: none; font-size: var(--text-tarjeta); font-weight: var(--peso-boton); letter-spacing: -0.01em; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: ""; flex: none; width: 12px; height: 12px; border-radius: var(--radius-pieza); background: var(--color-ink); transition: transform var(--dur-short) var(--ease-out); }
.acordeon details[open] summary::after { transform: rotate(45deg) scale(0.85); }
.acordeon details > :not(summary) { padding-bottom: var(--space-lg); max-width: 60ch; color: var(--color-ink-soft); }
.acordeon--chico summary { min-height: 48px; font-size: var(--text-ui); }
.acordeon--chico summary::after { width: 10px; height: 10px; }

/* ── 11 · Avisos: toast, banner y aviso en línea ── */
.toasts { position: fixed; z-index: var(--z-toast); right: var(--space-md); bottom: var(--space-md); display: grid; gap: var(--space-xs); width: min(380px, calc(100vw - 2 * var(--space-md))); }
.toast { display: flex; align-items: center; gap: var(--space-sm); min-height: 52px; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md); border-radius: var(--radius-control); background: var(--color-ink); color: var(--color-on-ink); font-size: var(--text-sm); font-weight: var(--peso-ui); box-shadow: var(--sombra-flotante); animation: toast-entra var(--dur-long) var(--ease-out); }
.toast__txt { flex: 1; min-width: 0; line-height: 1.4; padding: 6px 0; }
.toast__txt small { display: block; color: var(--color-on-ink-soft); font-weight: var(--peso-cuerpo); }
.toast .ico { width: 18px; height: 18px; }
.toast--ok .ico:first-child { color: var(--color-ok-en-tinta); }
.toast--error .ico:first-child { color: var(--color-error-en-tinta); }
.toast .boton { --bh: 36px; padding: 0 var(--space-sm); font-size: var(--text-sm); border-radius: var(--radius-control-chico); }
.toast.sale { animation: toast-sale var(--dur-short) var(--ease-in) forwards; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes toast-sale { to { opacity: 0; transform: translateY(8px); } }
@media (max-width: 767.98px) { .toasts { left: var(--space-xs); right: var(--space-xs); bottom: calc(var(--barra-inferior-h) + var(--space-xs)); width: auto; } }

/* Banner: franja a lo ancho, arriba de todo (SYS-04) */
.banner { display: flex; align-items: center; gap: var(--space-sm); min-height: 44px; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-md); background: var(--color-paper-3); color: var(--color-ink); font-size: var(--text-sm); }
.banner__txt { flex: 1; min-width: 0; line-height: 1.4; }
.banner__txt b { font-weight: var(--peso-fuerte); }
.banner .boton { --bh: 32px; padding: 0 var(--space-sm); font-size: var(--text-sm); border-radius: var(--radius-control-chico); }
.banner--aviso { background: var(--color-aviso-fondo); color: var(--color-aviso-texto); }
.banner--error { background: var(--color-error-fondo); color: var(--color-error-texto); }
.banner--ok { background: var(--color-ok-fondo); color: var(--color-ok-texto); }
/* Impersonación: franja fija en tinta con rayas, imposible de no ver */
.banner--entrando { border-radius: 0; background: repeating-linear-gradient(-45deg, var(--color-ink) 0 14px, var(--color-ink-2) 14px 28px); color: var(--color-on-ink); justify-content: center; }
.banner--entrando .boton { background: var(--color-on-ink); color: var(--color-ink); box-shadow: none; }
.banner--pegado { position: sticky; top: 0; z-index: var(--z-banner); border-radius: 0; }

/* Aviso en línea (dentro de un formulario o tarjeta) */
.aviso { display: flex; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--color-paper-2); font-size: var(--text-sm); line-height: 1.5; }
.aviso .ico { margin-top: 2px; }
.aviso b { font-weight: var(--peso-fuerte); }
.aviso--aviso { background: var(--color-aviso-fondo); color: var(--color-aviso-texto); }
.aviso--error { background: var(--color-error-fondo); color: var(--color-error-texto); }
.aviso--ok { background: var(--color-ok-fondo); color: var(--color-ok-texto); }

/* ── 12 · Carga y progreso ── */
.esqueleto { display: block; height: 12px; border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--color-paper-3) 0 40%, var(--color-paper-2) 50%, var(--color-paper-3) 60% 100%) 0 0 / 300% 100%; animation: esqueleto 1.6s linear infinite; }
.esqueleto--titulo { height: 20px; border-radius: var(--radius-sm); }
.esqueleto--caja { height: auto; aspect-ratio: 16 / 10; border-radius: var(--radius-md); }
.esqueleto--avatar { width: 36px; height: 36px; border-radius: 50%; }
@keyframes esqueleto { to { background-position: -150% 0; } }
.girador { display: inline-block; flex: none; width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--color-ink) 0 28%, var(--color-paper-3) 0);
  -webkit-mask: radial-gradient(circle, transparent 6.5px, #000 7px); mask: radial-gradient(circle, transparent 6.5px, #000 7px); animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(1turn); } }
.progreso { --v: 0; height: 6px; border-radius: var(--radius-redondo); background: var(--color-paper-3); overflow: hidden; }
.progreso::after { content: ""; display: block; height: 100%; width: calc(var(--v) * 1%); border-radius: inherit; background: var(--color-ink); transition: width var(--dur-long) var(--ease-out); }
.progreso--ok::after { background: var(--color-ok); }
.progreso--aviso::after { background: var(--color-aviso); }
/* Pasos (onboarding, Arma tu plan, cuenta asistida) */
.pasos { display: flex; gap: 6px; }
.pasos__paso { display: grid; gap: 6px; flex: 1; min-width: 0; padding: 6px 0; border: 0; background: none; text-align: left; color: var(--color-ink-faint); font-size: var(--text-xs); font-weight: var(--peso-ui); cursor: pointer; }
.pasos__paso i { display: block; width: 100%; height: 4px; border-radius: var(--radius-redondo); background: var(--color-paper-3); overflow: hidden; }
.pasos__paso i::after { content: ""; display: block; height: 100%; background: var(--color-ink); transform-origin: 0 50%; transform: scaleX(0); transition: transform var(--dur-long) var(--ease-out); }
.pasos__paso.hecho i::after, .pasos__paso.actual i::after { transform: scaleX(1); }
.pasos__paso.hecho, .pasos__paso.actual { color: var(--color-ink); }
.pasos__paso span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Entregables: lista de lo que se está armando */
.entregables { display: grid; gap: var(--space-xs); }
.entregables li { display: flex; align-items: center; gap: var(--space-sm); min-height: 48px; padding: 0 var(--space-md); border-radius: var(--radius-md); box-shadow: var(--anillo); color: var(--color-ink-soft); }
.entregables li i { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--color-line-strong); }
.entregables li.trabajando { color: var(--color-ink); }
.entregables li.trabajando i { box-shadow: none; animation: girar 0.9s linear infinite; background: conic-gradient(var(--color-ink) 0 25%, var(--color-paper-3) 0); -webkit-mask: radial-gradient(circle, transparent 6px, #000 6.5px); mask: radial-gradient(circle, transparent 6px, #000 6.5px); }
.entregables li.hecho { color: var(--color-ink); }
.entregables li.hecho i { background: var(--color-ink) var(--icono-check) center / 14px no-repeat; box-shadow: none; }
/* Seguidor de estado: dónde va tu sitio (horizontal en Inicio) */
.seguidor { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: var(--space-2xs); }
.seguidor li { display: grid; gap: var(--space-xs); font-size: var(--text-xs); font-weight: var(--peso-ui); color: var(--color-ink-faint); }
.seguidor li::before { content: ""; height: 6px; border-radius: var(--radius-redondo); background: var(--color-paper-3); }
.seguidor li.hecho, .seguidor li.actual { color: var(--color-ink); }
.seguidor li.hecho::before { background: var(--color-ink); }
.seguidor li.actual::before { background: linear-gradient(90deg, var(--color-ink) 50%, var(--color-paper-3) 50%); }
.seguidor li b { font-weight: var(--peso-fuerte); }
/* Línea de tiempo vertical */
.linea-tiempo { display: grid; }
.linea-tiempo li { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-sm); padding-bottom: var(--space-lg); }
.linea-tiempo li::before { content: ""; position: relative; z-index: 1; width: 10px; height: 10px; margin: 6px 0 0 5px; border-radius: var(--radius-pieza); background: var(--color-sheet); box-shadow: inset 0 0 0 1.5px var(--color-line-strong); }
.linea-tiempo li:not(:last-child)::after { content: ""; position: absolute; left: 9.5px; top: 18px; bottom: 0; width: 1px; background: var(--color-line); }
.linea-tiempo li.hecho::before { background: var(--color-ink); box-shadow: none; }
.linea-tiempo li.actual::before { box-shadow: inset 0 0 0 2px var(--color-ink); }
.linea-tiempo__txt { display: grid; gap: 2px; font-size: var(--text-ui); }
.linea-tiempo__txt b { font-weight: var(--peso-fuerte); }
.linea-tiempo__txt time, .linea-tiempo__txt small { font-size: var(--text-xs); color: var(--color-ink-soft); }

/* ── 13 · Navegación chica: migas y paginación ── */
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--color-ink-soft); }
.migas a { text-decoration: none; } .migas a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.migas li + li::before { content: "/"; margin-right: 6px; color: var(--color-ink-faint); }
.migas [aria-current] { color: var(--color-ink); font-weight: var(--peso-ui); }
.paginacion { display: flex; align-items: center; gap: 4px; font-size: var(--text-sm); }
.paginacion a, .paginacion button { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border: 0; border-radius: var(--radius-control-chico); background: none; text-decoration: none; font-weight: var(--peso-ui); font-variant-numeric: tabular-nums; cursor: pointer; }
.paginacion a:hover, .paginacion button:hover { background: var(--color-paper-2); }
.paginacion [aria-current="page"] { background: var(--color-ink); color: var(--color-on-ink); }
.paginacion__info { margin-right: auto; color: var(--color-ink-soft); }

/* ── 14 · Superficies: tarjeta, bandeja, grupo de ajustes ── */
.tarjeta { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding: var(--tarjeta-p); border-radius: var(--radius-lg); background: var(--color-sheet); box-shadow: var(--anillo); min-width: 0; }
.tarjeta--elevada { box-shadow: var(--anillo), var(--sombra-3); }
.tarjeta--hundida { background: var(--color-paper-2); box-shadow: none; }
.tarjeta--tinta { background: var(--color-ink); color: var(--color-on-ink); box-shadow: none; }
.tarjeta--tinta .tarjeta__desc { color: var(--color-on-ink-soft); }
.tarjeta--sin-p { padding: 0; overflow: hidden; }
.tarjeta--enlace { text-decoration: none; transition: box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.tarjeta--enlace:hover { box-shadow: var(--anillo-fuerte), var(--sombra-3); transform: translateY(-1px); }
.tarjeta__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-width: 0; }
.tarjeta__titulo { font-size: var(--text-tarjeta); line-height: 1.25; font-weight: var(--peso-fuerte); letter-spacing: var(--tracking-nombre); }
.tarjeta__desc { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-soft); }
.tarjeta__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-sm); box-shadow: inset 0 1px 0 var(--color-line); }
/* Bandeja: el contenedor gris que agrupa tarjetas (Tu sitio, en tus manos). Radio de dentro = radio de fuera − relleno */
.bandeja { display: grid; gap: var(--space-xs); padding: var(--space-xs); border-radius: var(--radius-2xl); background: var(--color-paper-3); }
.bandeja > .tarjeta { border-radius: var(--radius-lg); }
/* Grupo de ajustes: una tarjeta con filas, una acción por fila */
.ajustes { border-radius: var(--radius-lg); corner-shape: var(--esquina); background: var(--color-sheet); box-shadow: var(--anillo); }
.ajustes__fila { display: flex; align-items: center; gap: var(--space-md); min-height: var(--fila-h); padding: var(--space-sm) var(--tarjeta-p); }
.ajustes__fila + .ajustes__fila { box-shadow: inset 0 1px 0 var(--color-line); }
.ajustes__txt { display: grid; flex: 1; min-width: 0; line-height: 1.4; font-size: var(--text-ui); }
.ajustes__txt b { font-weight: var(--peso-boton); }
.ajustes__txt small { font-size: var(--text-sm); color: var(--color-ink-soft); }
.ajustes__valor { color: var(--color-ink-soft); font-size: var(--text-ui); text-align: right; }
.separador { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); color: var(--color-ink-soft); }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }
.regla { height: 1px; border: 0; margin: 0; background: var(--color-line); }

/* ── 15 · Datos: KPI, gráfica de barras, tabla, vacío ── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--space-xs); }
.kpi { display: grid; gap: 2px; padding: var(--space-md); border-radius: var(--radius-lg); background: var(--color-sheet); box-shadow: var(--anillo); min-width: 0; }
.kpi__nombre { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--color-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi__valor { font-size: var(--text-kpi); line-height: 1.15; font-weight: var(--peso-fuerte); letter-spacing: var(--tracking-titulo); font-variant-numeric: tabular-nums; }
.kpi__delta { font-size: var(--text-xs); font-weight: var(--peso-fuerte); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.kpi__delta--sube { color: var(--color-ok-texto); } .kpi__delta--baja { color: var(--color-error-texto); }
.kpis--pestanas .kpi { cursor: pointer; text-align: left; border: 0; font: inherit; color: inherit; }
.kpis--pestanas .kpi[aria-selected="true"] { box-shadow: var(--anillo-sel); }
/* Barras: la gráfica del portal de la landing. La última (hoy) va en tinta */
.barras { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.barras i { flex: 1; height: calc(var(--h) * 1%); min-height: 3px; border-radius: var(--radius-xs) var(--radius-xs) 0 0; corner-shape: var(--esquina); background: var(--color-paper-3); transition: background-color var(--dur-micro) var(--ease-out); }
.barras i:hover { background: var(--color-line-strong); }
.barras i:last-child { background: var(--color-ink); }
.barras__eje { display: flex; justify-content: space-between; margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
/* Tabla de datos: cómoda en el portal, densa en la consola */
.tabla-marco { border-radius: var(--radius-lg); background: var(--color-sheet); box-shadow: var(--anillo); overflow: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--text-ui); font-variant-numeric: tabular-nums; }
.tabla th { position: sticky; top: 0; z-index: 1; height: 40px; padding: 0 var(--celda-x); background: var(--color-sheet); box-shadow: inset 0 -1px 0 var(--color-line); text-align: left; font-size: var(--text-xs); font-weight: var(--peso-fuerte); color: var(--color-ink-soft); white-space: nowrap; }
.tabla th[aria-sort] { cursor: pointer; } .tabla th[aria-sort]::after { content: " ↕"; color: var(--color-ink-faint); }
.tabla th[aria-sort="ascending"]::after { content: " ↑"; color: var(--color-ink); } .tabla th[aria-sort="descending"]::after { content: " ↓"; color: var(--color-ink); }
.tabla td { height: var(--fila-h); padding: 0 var(--celda-x); box-shadow: inset 0 -1px 0 var(--color-line); white-space: nowrap; }
.tabla tbody tr:last-child td { box-shadow: none; }
.tabla tbody tr { transition: background-color var(--dur-micro) var(--ease-out); }
.tabla tbody tr:hover { background: var(--color-paper-2); }
.tabla tbody tr[aria-selected="true"] { background: color-mix(in oklch, var(--color-ink) 5%, var(--color-sheet)); }
.tabla .tabla__num { text-align: right; }
.tabla .tabla__suave { color: var(--color-ink-soft); }
.tabla .tabla__control { width: 44px; padding-right: 0; }
.tabla__principal { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.tabla__principal b { font-weight: var(--peso-boton); }
.tabla__principal small { display: block; color: var(--color-ink-soft); font-size: var(--text-xs); }
.tabla-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--celda-x); box-shadow: inset 0 -1px 0 var(--color-line); }
.tabla-barra .campo__caja { height: var(--control-h-chico); width: 240px; }
.tabla-pie { display: flex; align-items: center; padding: var(--space-xs) var(--celda-x); box-shadow: inset 0 1px 0 var(--color-line); }
/* Estado vacío: el hueco punteado del plano vacío de la landing (paso 0) */
.lista-vacia { display: grid; justify-items: center; gap: var(--space-sm); padding: var(--space-2xl) var(--space-lg); border-radius: var(--radius-lg); text-align: center; }
.lista-vacia__dibujo { display: grid; grid-template-columns: repeat(2, 22px); gap: 4px; margin-bottom: var(--space-xs); }
.lista-vacia__dibujo i { width: 22px; height: 22px; border-radius: var(--radius-pieza); border: 1.5px dashed var(--color-line-strong); }
.lista-vacia__dibujo i:last-child { border: 0; background: var(--color-ink); }
.lista-vacia__titulo { font-size: var(--text-tarjeta); font-weight: var(--peso-fuerte); letter-spacing: var(--tracking-nombre); }
.lista-vacia__texto { max-width: 42ch; font-size: var(--text-sm); color: var(--color-ink-soft); }
.lista-vacia--marco { border: 1.5px dashed var(--color-line-strong); }

/* ── 15b · Datos del portal (de HeroUI Pro template-4; ganó en el taller del portal, variante A, 2026-10-29) ── */
/* KPI en fila: el nombre arriba; la cifra y su cambio en una fila */
.kpis--fila { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--space-sm); }
.kpi--fila { gap: var(--space-md); }
.kpi--fila .kpi__valor { font-size: var(--text-pagina); }
.kpi__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-width: 0; }
.kpi__cambio .ico { width: 12px; height: 12px; stroke-width: 2.2; }
/* Dos columnas: la gráfica (2/3) y una lista sobre el papel (1/3) */
.dos-columnas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.dos-columnas--ancha { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
.dos-columnas > section, .dos-columnas__col { display: grid; gap: var(--space-xs); align-content: start; min-width: 0; }
/* Cabeza de bloque: título, conteo y una acción al final */
.cabeza-bloque { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); min-height: 40px; }
.cabeza-bloque h2 { font-size: var(--text-tarjeta); line-height: 1.25; font-weight: var(--peso-fuerte); letter-spacing: var(--tracking-nombre); }
.cabeza-bloque > :last-child:not(h2, .etiqueta) { margin-left: auto; }
/* Total de la gráfica: periodo, cifra y comparación */
.total-graf { display: grid; gap: 2px; }
.total-graf small { font-size: var(--text-xs); color: var(--color-ink-soft); }
.total-graf b { font-size: var(--text-pagina); line-height: 1.15; font-weight: var(--peso-fuerte); letter-spacing: var(--tracking-titulo); font-variant-numeric: tabular-nums; }
.total-graf span { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); color: var(--color-ink-soft); }
.total-graf .kpi__delta { display: inline-flex; align-items: center; gap: 2px; }
/* Gráfica de línea: una serie, 2 px en tinta, cruz y tooltip al pasar */
.graf-linea { display: grid; gap: var(--space-xs); }
.graf-linea__area { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); }
.graf-linea__y { position: relative; }
.graf-linea__y span, .graf-linea__x span { position: absolute; font-size: var(--text-2xs); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.graf-linea__y span { right: var(--space-xs); transform: translateY(-50%); }
.graf-linea__plot { position: relative; outline-offset: 6px; cursor: crosshair; }
.graf-linea__plot svg { width: 100%; height: 100%; overflow: visible; }
.graf-linea__rejilla { stroke: var(--color-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.graf-linea__linea { fill: none; stroke: var(--color-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.graf-linea__relleno { fill: url(#graf-relleno); }
.graf-linea__degradado { stop-color: var(--color-ink); }
.graf-linea__x { position: relative; height: 18px; margin-left: 44px; }
.graf-linea__x span { transform: translateX(-50%); }
.graf-linea__cruz { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-line-strong); pointer-events: none; opacity: 0; }
.graf-linea__punto { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: var(--radius-redondo); background: var(--color-ink); box-shadow: 0 0 0 2px var(--color-sheet); pointer-events: none; opacity: 0; }
.graf-linea__tip { position: absolute; z-index: 1; top: -8px; pointer-events: none; opacity: 0; transform: translate(-50%, -100%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.graf-linea__tip b { font-weight: var(--peso-fuerte); }
.graf-linea__plot[data-activo] :is(.graf-linea__cruz, .graf-linea__punto, .graf-linea__tip) { opacity: 1; }
/* Línea chica: verde si sube, roja si baja (siempre con la flecha y el número al lado) */
.chispa { display: block; width: 72px; height: 28px; flex: none; }
.chispa polyline { fill: none; stroke: var(--color-ok); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.chispa[data-tendencia="baja"] polyline { stroke: var(--color-error); }
.chispa[data-tendencia="igual"] polyline { stroke: var(--color-ink-faint); }
/* Lista con cifras (Holdings): cuadro, nombre, línea chica y cifra, sobre el papel */
.lista-cifras { display: grid; gap: 2px; container-type: inline-size; }
.lista-cifras__fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(72px, auto); align-items: center; gap: var(--space-sm); min-height: 58px; padding: var(--space-xs); border-radius: var(--radius-md); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
a.lista-cifras__fila:hover { background: var(--color-paper-2); }
.lista-cifras__txt { display: grid; min-width: 0; line-height: 1.35; }
.lista-cifras__txt b { font-size: var(--text-ui); font-weight: var(--peso-fuerte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-cifras__txt small, .lista-cifras__cifra small { font-size: var(--text-xs); color: var(--color-ink-soft); }
.lista-cifras__cifra { display: grid; justify-items: end; line-height: 1.35; font-variant-numeric: tabular-nums; }
.lista-cifras__cifra b { font-size: var(--text-ui); font-weight: var(--peso-fuerte); }
.lista-cifras__cifra .kpi__delta { display: inline-flex; align-items: center; gap: 2px; }
.lista-cifras--en-hoja .lista-cifras__fila { padding-inline: 0; }
/* Angosta (columna de 1/3 en una pantalla chica, celular): sin línea chica */
@container (max-width: 340px) {
  .lista-cifras__fila { grid-template-columns: auto minmax(0, 1fr) minmax(64px, auto); }
  .lista-cifras__fila .chispa { display: none; }
}
/* Tabla en bandeja (Recent activity): la cabeza en el gris, las filas en una hoja */
.tabla-bandeja { padding: 0 var(--space-2xs) var(--space-2xs); border-radius: var(--radius-xl); background: var(--color-paper-3); overflow-x: auto; }
.tabla-bandeja .tabla { border-collapse: separate; border-spacing: 0; }
.tabla-bandeja .tabla th { position: static; height: 44px; background: transparent; box-shadow: none; }
.tabla-bandeja .tabla td { background: var(--color-sheet); transition: background-color var(--dur-micro) var(--ease-out); }
.tabla-bandeja .tabla tbody tr:hover td { background: var(--color-paper-2); }
.tabla-bandeja tbody tr:first-child td:first-child { border-top-left-radius: var(--radius-lg); }
.tabla-bandeja tbody tr:first-child td:last-child { border-top-right-radius: var(--radius-lg); }
.tabla-bandeja tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-lg); }
.tabla-bandeja tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-lg); }
.tabla-bandeja .tabla td:last-child, .tabla-bandeja .tabla th:last-child { padding-right: var(--space-md); }
.tabla__recorte { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; color: var(--color-ink-soft); }
/* Widget: marco gris con la cabeza en la banda y una hoja dentro (la tabla en bandeja es el mismo patrón) */
.widget { display: grid; min-width: 0; padding: 0 var(--space-2xs) var(--space-2xs); border-radius: var(--radius-xl); background: var(--color-paper-3); }
.widget__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); min-height: 52px; padding: var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-md); }
.widget__cabeza > b { font-size: var(--text-ui); font-weight: var(--peso-fuerte); }
.widget__cabeza > :last-child:not(b, .etiqueta) { margin-left: auto; }
.widget__hoja { min-width: 0; border-radius: var(--radius-lg); background: var(--color-sheet); overflow-x: auto; }
.widget__hoja > :is(.agenda, .lista) { border-radius: 0; box-shadow: none; }
.widget__hoja > .agenda { min-width: 640px; }
.widget__hoja--p { padding: var(--space-md); }
/* Item Card: ícono, título, ayuda y una acción al final */
.items-tarjeta { display: grid; gap: var(--space-xs); }
.items-tarjeta--rejilla { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.item-tarjeta { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; min-height: var(--fila-h); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-lg); background: var(--color-sheet); box-shadow: var(--anillo); text-decoration: none; transition: box-shadow var(--dur-short) var(--ease-out); }
a.item-tarjeta:hover { box-shadow: var(--anillo-fuerte), var(--sombra-3); }
.item-tarjeta__txt { display: grid; flex: 1; min-width: 0; line-height: 1.4; }
.item-tarjeta__txt b { font-size: var(--text-ui); font-weight: var(--peso-boton); }
.item-tarjeta__txt small { font-size: var(--text-sm); color: var(--color-ink-soft); }
.item-tarjeta > :last-child:not(.item-tarjeta__txt) { flex: none; }
/* Chat: las conversaciones a la izquierda y el hilo a la derecha, en una sola hoja */
.chat { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 600px; }
.chat__lista { box-shadow: inset -1px 0 0 var(--color-line); }
.chat__lista .fila[aria-current] { background: var(--color-paper-2); }
.chat__hilo { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; }
.chat__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); min-height: 64px; padding: var(--space-sm) var(--space-md); box-shadow: inset 0 -1px 0 var(--color-line); }
.chat__cabeza .fila__txt { flex: 1; }
.chat__cuerpo { padding: var(--space-lg) var(--space-md); }
.chat__pie { padding: var(--space-sm); }
@media (max-width: 1179.98px) {
  .dos-columnas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .chat { grid-template-columns: minmax(0, 1fr); }
  .chat__lista { display: none; }
}

/* ── 16 · Producto: kits, opciones de plan, mensualidad, acción requerida ── */
/* Ficha de kit (catálogo, sugerida, activa, a la medida) */
.fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 212px), 1fr)); gap: var(--space-sm); }
.ficha { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-md); min-height: 196px; padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-sheet); box-shadow: var(--anillo); text-decoration: none; transition: box-shadow var(--dur-short) var(--ease-out), opacity var(--dur-long) var(--ease-out); }
a.ficha:hover, button.ficha:hover { box-shadow: var(--anillo-fuerte), var(--sombra-3); }
.ficha__nombre { font-weight: var(--peso-fuerte); letter-spacing: var(--tracking-nombre); }
.ficha__desc { margin-top: var(--space-2xs); font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink-soft); }
.ficha__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.ficha__marca { position: absolute; right: var(--space-md); top: var(--space-md); }
.ficha.sugerida { box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.ficha.atenuada { opacity: 0.5; }
.ficha--medida { background: var(--color-ink); color: var(--color-on-ink); box-shadow: none; }
.ficha--medida .ficha__desc { color: var(--color-on-ink-soft); }
.ficha--medida .kit-cuadro { --kc: var(--color-on-ink) !important; color: var(--color-ink); }
.ficha--medida .kit-cuadro::after { display: none; }
.ficha--medida .kit-cuadro .kit { --kit-hueco: var(--color-on-ink); }
[data-tema="oscuro"] .ficha--medida .kit-cuadro { --kc: var(--gris-800) !important; color: var(--gris-200); }
[data-tema="oscuro"] .ficha--medida .kit-cuadro .kit { --kit-hueco: var(--gris-800); }
.ficha--medida .etiqueta, .ficha--medida .nivel { background: var(--color-ink-2); color: var(--color-on-ink); }
.ficha--fila { grid-template-rows: none; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; min-height: 0; padding: var(--space-md); }
.ficha--fila .ficha__desc { margin: 0; }
/* Resumen de la mensualidad: base + kits + páginas, cada uno a su precio (sin tope desde el 2026-10-29) */
.mensualidad { display: grid; gap: var(--space-md); padding: var(--tarjeta-p); border-radius: var(--radius-lg); background: var(--color-sheet); box-shadow: var(--anillo); }
.mensualidad__lineas { display: grid; gap: var(--space-xs); font-size: var(--text-ui); }
.mensualidad__lineas li { display: flex; align-items: center; gap: var(--space-sm); }
.mensualidad__lineas li span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; }
.mensualidad__lineas .incluido { color: var(--color-ink-soft); }
.mensualidad__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-sm); box-shadow: inset 0 1px 0 var(--color-line); font-weight: var(--peso-boton); }
.mensualidad__total b { font-size: var(--text-pagina); line-height: 1.1; font-weight: var(--peso-fuerte); letter-spacing: var(--tracking-titulo); font-variant-numeric: tabular-nums; }
.mensualidad__total small { font-size: var(--text-sm); font-weight: var(--peso-cuerpo); color: var(--color-ink-soft); }
.tope { display: grid; gap: 6px; font-size: var(--text-xs); color: var(--color-ink-soft); }
.tope__barra { position: relative; height: 8px; border-radius: var(--radius-redondo); background: var(--color-paper-3); }
.tope__barra i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); border-radius: inherit; background: var(--color-ink); }
.tope__fila { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.tope--lleno .tope__barra i { background: var(--color-ok); }
/* Hoy pagas (onboarding y cambio de plan) */
.hoy-pagas { display: grid; gap: 2px; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); corner-shape: var(--esquina); background: var(--color-paper-2); }
.hoy-pagas__hoy { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); font-size: var(--text-sm); font-weight: var(--peso-boton); }
.hoy-pagas__hoy b { font-size: var(--text-pagina); line-height: 1.1; font-weight: var(--peso-fuerte); letter-spacing: var(--tracking-titulo); font-variant-numeric: tabular-nums; }
.hoy-pagas__despues { font-size: var(--text-xs); color: var(--color-ink-soft); }
.hoy-pagas__despues b { font-weight: var(--peso-fuerte); color: var(--color-ink); }
/* Acción requerida: lo que te toca hacer (Inicio del portal) */
.accion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); padding: var(--space-md); border-radius: var(--radius-lg); background: var(--color-sheet); box-shadow: inset 0 0 0 1.5px var(--color-ink), var(--sombra-3); }
.accion__txt { display: grid; flex: 1 1 220px; min-width: 0; line-height: 1.4; }
.accion__txt b { font-weight: var(--peso-fuerte); }
.accion__txt span { font-size: var(--text-sm); color: var(--color-ink-soft); }
.accion--suave { box-shadow: var(--anillo); }

/* Estructura alámbrica: la miniatura de un sitio (sin color, como la ve el cliente antes del diseño) */
.alambre { position: relative; display: grid; grid-template-rows: 9% 38% 1fr; gap: 5%; padding: 6%; aspect-ratio: 16 / 10; border-radius: var(--radius-md); background: var(--cliente-fondo); box-shadow: var(--anillo); overflow: hidden; container-type: inline-size; }
.alambre i { display: block; border-radius: 1.6cqw; background: var(--cliente-acento); }
.alambre i:first-child { display: flex; gap: 3cqw; align-items: center; background: none; }
.alambre i:first-child::before { content: ""; width: 22cqw; height: 60%; border-radius: 1cqw; background: var(--cliente-sol); }
.alambre i:first-child::after { content: ""; margin-left: auto; width: 14cqw; height: 80%; border-radius: 1.2cqw; background: var(--cliente-tinta); }
.alambre i:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; background: none; }
.alambre i:last-child::before, .alambre i:last-child::after { content: ""; border-radius: 1.6cqw; background: var(--cliente-suave); }
.alambre--celular { aspect-ratio: 390 / 700; grid-template-rows: 7% 30% 1fr; }
/* Tarjeta de sitio (Inicio y Mis sitios) */
.sitio-tarjeta { display: grid; gap: var(--space-sm); padding: var(--space-xs) var(--space-xs) var(--space-md); border-radius: var(--radius-lg); background: var(--color-sheet); box-shadow: var(--anillo); text-decoration: none; }
.sitio-tarjeta .alambre { border-radius: var(--radius-control); corner-shape: var(--esquina); }
.sitio-tarjeta__txt { display: grid; gap: 2px; padding: 0 var(--space-xs); }
.sitio-tarjeta__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.sitio-tarjeta__nombre { font-weight: var(--peso-fuerte); letter-spacing: var(--tracking-nombre); }
.sitio-tarjeta__dominio { font-size: var(--text-sm); color: var(--color-ink-soft); }

/* ── 17 · Conversación e IA ── */
.hilo { display: grid; gap: var(--space-md); }
.mensaje { display: grid; gap: 4px; max-width: min(80%, 520px); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-control); background: var(--color-paper-2); font-size: var(--text-ui); line-height: 1.5; }
.mensaje__autor { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--color-ink-soft); }
.mensaje__autor b { color: var(--color-ink); font-weight: var(--peso-fuerte); }
.mensaje--mio { justify-self: end; background: var(--color-ink); color: var(--color-on-ink); border-bottom-right-radius: var(--radius-xs); }
.mensaje--mio .mensaje__autor, .mensaje--mio .mensaje__autor b { color: var(--color-on-ink-soft); }
.mensaje--suyo { border-bottom-left-radius: var(--radius-xs); }
.evento { display: flex; align-items: center; gap: var(--space-xs); justify-content: center; font-size: var(--text-xs); color: var(--color-ink-soft); }
.evento::before, .evento::after { content: ""; flex: 1; max-width: 80px; height: 1px; background: var(--color-line); }
/* Nota interna: solo la ve el equipo */
.nota-interna { display: grid; gap: 4px; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--color-aviso-fondo); color: var(--color-aviso-texto); font-size: var(--text-ui); line-height: 1.5; box-shadow: inset 3px 0 0 var(--color-aviso); }
.nota-interna__cabeza { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--peso-fuerte); }
/* Campo del asistente: pídelo con tus palabras */
.asistente { display: grid; gap: var(--space-xs); padding: var(--space-xs); border-radius: var(--radius-lg); background: var(--color-sheet); box-shadow: var(--anillo), var(--sombra-3); }
.asistente:focus-within { box-shadow: var(--anillo-sel), var(--sombra-3); }
.asistente textarea { width: 100%; min-height: 52px; padding: var(--space-xs) var(--space-sm); border: 0; background: none; outline: none; resize: none; font-size: var(--text-body); line-height: 1.5; }
.asistente textarea::placeholder { color: var(--color-ink-faint); }
.asistente__barra { display: flex; align-items: center; gap: var(--space-2xs); }
.asistente__barra .boton--tinta { margin-left: auto; }
.sugerencias { display: flex; flex-wrap: wrap; gap: 6px; }
/* Propuesta de cambio: antes y después; se aplica cuando el dueño confirma */
.propuesta { display: grid; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-lg); background: var(--color-sheet); box-shadow: var(--anillo); }
.propuesta__cambio { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-sm); padding: var(--space-sm); border-radius: var(--radius-md); corner-shape: var(--esquina); background: var(--color-paper-2); font-size: var(--text-ui); }
.propuesta__antes { color: var(--color-ink-soft); text-decoration: line-through; text-decoration-color: var(--color-ink-faint); }
.propuesta__despues { font-weight: var(--peso-fuerte); }
.propuesta__cambio .ico { color: var(--color-ink-soft); }

/* ── 18 · Estructura: shell del portal, de la consola y cabeza de pantalla ── */
.shell { display: grid; grid-template-columns: var(--lateral-w) minmax(0, 1fr); min-height: 100svh; background: var(--color-paper); transition: grid-template-columns var(--dur-short) var(--ease-out); }
.shell[data-lateral="corto"] { grid-template-columns: 76px minmax(0, 1fr); }
.lateral { position: sticky; top: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: var(--space-md); height: 100svh; padding: var(--space-md) var(--space-sm); }
.lateral__marca { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 var(--space-xs); }
.lateral__sitio { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: 6px; border: 0; border-radius: var(--radius-control); background: var(--color-sheet); box-shadow: var(--anillo); text-align: left; cursor: pointer; }
.lateral__sitio:hover { box-shadow: var(--anillo-fuerte); }
.lateral__sitio-txt { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.lateral__sitio-txt b { font-size: var(--text-sm); font-weight: var(--peso-fuerte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral__sitio-txt small { font-size: var(--text-xs); color: var(--color-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral__nav { display: grid; align-content: start; gap: 2px; overflow: auto; }
.lateral__grupo { padding: var(--space-md) var(--space-sm) 4px; font-size: var(--text-xs); font-weight: var(--peso-fuerte); color: var(--color-ink-soft); }
.lateral__item { display: flex; align-items: center; gap: var(--space-sm); min-height: 40px; padding: 0 var(--space-sm); border-radius: var(--radius-md); color: var(--color-ink-soft); font-size: var(--text-ui); font-weight: var(--peso-ui); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
[data-densidad="densa"] .lateral__item { min-height: 32px; }
.lateral__item:hover { background: var(--color-paper-2); color: var(--color-ink); }
/* El elegido: relleno gris, sin hoja ni anillo (HeroUI; ganó en el taller del portal el 2026-10-29) */
.lateral__item[aria-current="page"] { background: var(--color-paper-3); color: var(--color-ink); font-weight: var(--peso-boton); }
.lateral__item[aria-disabled="true"] { color: var(--color-ink-faint); cursor: default; }
.lateral__item[aria-disabled="true"]:hover { background: none; }
.lateral .etiqueta { margin-left: auto; }
.lateral__item .ico { width: 18px; height: 18px; }
/* Punto: algo te espera en esa sección (la muestra lista, en Mi sitio) */
.lateral__punto { margin-left: auto; width: 8px; height: 8px; border-radius: var(--radius-pieza); background: var(--color-ink); }
.lateral__conteo { margin-left: auto; min-width: 22px; padding: 0 6px; border-radius: var(--radius-xs); corner-shape: var(--esquina); background: var(--color-ink); color: var(--color-on-ink); font-size: var(--text-2xs); font-weight: var(--peso-fuerte); line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.lateral__pie { display: grid; gap: 2px; padding-top: var(--space-sm); box-shadow: inset 0 1px 0 var(--color-line); }
.lateral__persona { display: flex; align-items: center; gap: var(--space-sm); padding: 6px var(--space-xs); font-size: var(--text-sm); }
.lateral__persona div { display: grid; min-width: 0; line-height: 1.3; }
.lateral__persona small { color: var(--color-ink-soft); font-size: var(--text-xs); }
.principal { min-width: 0; padding: var(--space-xs) var(--space-xs) var(--space-xs) 0; }
.principal__hoja { min-height: calc(100svh - 2 * var(--space-xs)); border-radius: var(--radius-xl); corner-shape: var(--esquina); background: var(--color-sheet); box-shadow: var(--anillo); }
.principal__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); max-width: var(--max-contenido); margin: 0 auto; padding: var(--space-xl) var(--space-xl) var(--space-3xl); }
.principal__hoja .tarjeta, .principal__hoja .kpi, .principal__hoja .ajustes, .principal__hoja .tabla-marco { background: var(--color-sheet); }
/* Shell sobre el papel (portal): la barra lateral con una línea, la barra de arriba a lo ancho y cada bloque en su propia hoja.
   Ganó en el taller del portal (variante A, 2026-10-29). La consola sigue con .principal__hoja */
.shell--papel .lateral { box-shadow: inset -1px 0 0 var(--color-line); overflow: hidden; }
.shell--papel .lateral__sitio { background: none; box-shadow: none; }
.shell--papel .lateral__sitio:hover { background: var(--color-paper-2); box-shadow: none; }
.shell--papel .lateral__sitio .ico { color: var(--color-ink-soft); }
.shell--papel .principal { display: grid; align-content: start; padding: 0; }
.shell--papel .principal__cuerpo { width: 100%; max-width: calc(var(--max-contenido) + 2 * var(--space-lg)); padding: var(--space-xs) var(--space-lg) var(--space-3xl); }
.shell--papel .principal__cuerpo > section { display: grid; gap: var(--space-sm); min-width: 0; }
/* Barra lateral corta: solo íconos */
.shell[data-lateral="corto"] :is(.lateral__txt, .lateral__conteo, .lateral__punto, .lateral__grupo, .lateral .etiqueta, .lateral__sitio-txt, .lateral__sitio > .ico, .lateral__persona div, .lateral__marca .logo) { display: none; }
.shell[data-lateral="corto"] :is(.lateral__item, .lateral__sitio, .lateral__persona) { justify-content: center; padding-inline: 0; }
.shell[data-lateral="corto"] .lateral__marca { justify-content: center; }
/* Barra del portal: a lo ancho, el título junto a la barra lateral y las tres acciones en la orilla */
.barra-portal { position: sticky; top: 0; z-index: var(--z-pegajoso); display: flex; align-items: center; gap: var(--space-sm); min-height: 72px; padding: var(--space-sm) var(--space-lg);
  background: color-mix(in oklch, var(--color-paper) 86%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); container: barra-portal / inline-size; }
.barra-portal__titulo { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-sm); }
.barra-portal__titulo h1 { font-size: var(--text-seccion); line-height: 1.2; font-weight: var(--peso-titulo); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Lo que le toca al cliente (la muestra lista): el estado en tinta hecho enlace, junto al saludo. No hay banner */
.barra-portal__aviso { flex: none; text-decoration: none; }
.barra-portal__aviso:hover { --ef: var(--color-ink-2); }
/* Según el ancho de la barra (no de la ventana): primero se va la etiqueta, luego el texto del aviso y al final el de los botones */
@container barra-portal (max-width: 1080px) { .barra-portal__titulo .etiqueta { display: none; } }
@container barra-portal (max-width: 900px) { .barra-portal__aviso-txt { display: none; } }
@container barra-portal (max-width: 640px) {
  .barra-portal .boton .barra-portal__txt { display: none; }
  .barra-portal .boton:has(.barra-portal__txt) { width: var(--bh); padding: 0; }
}
/* Cabeza de pantalla: migas, título, descripción y acciones */
.cabeza-pantalla { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-md); }
.cabeza-pantalla__txt { display: grid; gap: var(--space-2xs); flex: 1; min-width: min(100%, 280px); }
.cabeza-pantalla__titulo { font-size: var(--text-pagina); line-height: 1.1; font-weight: var(--peso-titulo); letter-spacing: var(--tracking-titulo); font-variation-settings: "opsz" 32; }
.cabeza-pantalla__desc { font-size: var(--text-ui); color: var(--color-ink-soft); max-width: 60ch; }
.titulo-seccion { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.titulo-seccion h2, .titulo-seccion h3 { font-size: var(--text-seccion); line-height: 1.2; font-weight: var(--peso-fuerte); letter-spacing: -0.02em; }
/* Barra superior (consola): búsqueda ⌘K y acciones */
.barra-superior { display: flex; align-items: center; gap: var(--space-sm); height: 52px; padding: 0 var(--space-md); box-shadow: inset 0 -1px 0 var(--color-line); }
.barra-superior .campo__caja { height: 34px; width: min(360px, 100%); border-radius: var(--radius-control-chico); background: var(--color-paper-2); box-shadow: none; }
/* Barra inferior del celular */
.barra-inferior { position: fixed; z-index: var(--z-nav); left: 0; right: 0; bottom: 0; display: none; grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(var(--barra-inferior-h) + env(safe-area-inset-bottom)); padding: 6px 6px env(safe-area-inset-bottom); background: var(--color-vidrio); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); box-shadow: inset 0 1px 0 var(--color-line); }
.barra-inferior a { display: grid; justify-items: center; align-content: center; gap: 2px; border-radius: var(--radius-md); color: var(--color-ink-soft); font-size: var(--text-2xs); font-weight: var(--peso-fuerte); text-decoration: none; }
.barra-inferior a[aria-current="page"] { color: var(--color-ink); background: color-mix(in oklch, var(--color-ink) 7%, transparent); }
.barra-inferior .ico { width: 22px; height: 22px; }
@media (max-width: 1023.98px) {
  .shell, .shell[data-lateral="corto"] { grid-template-columns: minmax(0, 1fr); }
  .shell > .lateral, .barra-portal__lateral { display: none; }
  .barra-inferior { display: grid; }
  .principal { padding: 0 0 var(--barra-inferior-h); }
  .principal__hoja { border-radius: 0; box-shadow: none; min-height: 100svh; }
  .principal__cuerpo { padding: var(--space-lg) var(--space-md) var(--space-2xl); gap: var(--space-lg); }
  .shell--papel .principal { padding-bottom: var(--barra-inferior-h); }
  .shell--papel .principal__cuerpo { padding-inline: var(--space-md); }
  .barra-portal { padding-inline: var(--space-md); }
}

/* ════════ Bloques por zona (v1.1, 2026-10-24): lo que faltaba del inventario ════════ */
:is(.barra-revision, .visor, .visor__url, .pin, .comentario, .calendario__dias button, .agenda, .cita, .copiable, .verificacion, .metodo, .metodo__tarjeta, .stripe-hueco,
  .lista, .plegable summary, .salud b, .horas, .barra-constructor, .arbol__item, .muestras-color button, .diff__campo, .diff__antes, .diff__despues, .lienzo, .paleta__caja,
  .paleta__colores, .foto-hueco, .plan, .pasos-num li::before, .lanzador, .archivo-tarjeta, .barra-sitio, .pagina-alambre, .revision__panel, .comandos) { corner-shape: var(--esquina); }

/* Hueco de foto: la caja de imagen de la estructura alámbrica, con sus dos diagonales */
.foto-hueco { position: relative; display: block; border-radius: var(--radius-sm); background:
  linear-gradient(to top right, transparent calc(50% - 0.6px), var(--cliente-trazo) 50%, transparent calc(50% + 0.6px)),
  linear-gradient(to bottom right, transparent calc(50% - 0.6px), var(--cliente-trazo) 50%, transparent calc(50% + 0.6px)), var(--cliente-sol); }
.linea-alambre { display: block; height: 10px; border-radius: var(--radius-redondo); background: var(--cliente-acento); }

/* ── 19 · Revisión de la muestra (CLI-06, CON-05, SIT-12) ── */
/* Barra de decisión: dónde va la muestra, la ronda y qué puedes hacer */
.barra-revision { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md); border-radius: var(--radius-lg); background: var(--color-sheet); box-shadow: var(--anillo), var(--sombra-3); }
.barra-revision__txt { display: grid; flex: 1 1 220px; min-width: 0; line-height: 1.35; font-size: var(--text-ui); }
.barra-revision__txt b { font-weight: var(--peso-fuerte); }
.barra-revision__txt small { font-size: var(--text-sm); color: var(--color-ink-soft); }
/* Botón que se queda presionado (Comentar, Vista previa) */
.boton[aria-pressed="true"] { background: var(--color-ink); color: var(--color-on-ink); box-shadow: none; }
/* Visor: el sitio a su ancho real (PC o celular), sin marco falso de navegador: solo la dirección real y la hoja */
.visor { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: 0; border-radius: var(--radius-xl); background: var(--color-paper-2); box-shadow: var(--anillo); overflow: hidden; }
.visor__barra { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs); }
.visor__url { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; height: var(--control-h-chico); padding: 0 var(--space-sm); border-radius: var(--radius-control-chico); background: var(--color-sheet); box-shadow: var(--anillo); font-size: var(--text-sm); color: var(--color-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visor__lienzo { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; min-height: 0; padding: var(--space-md) var(--space-md) var(--space-2xl); overflow: auto; overscroll-behavior: contain; }
.visor__hoja { position: relative; width: min(100%, var(--ancho, 1040px)); transition: width var(--dur-long) var(--ease-out); }
.visor[data-dispositivo="celular"] .visor__hoja { --ancho: 390px; }
.visor--comentando .visor__hoja { cursor: crosshair; }
/* Visor con la muestra real en un iframe (CLI-06): la hoja llena el alto del lienzo y el iframe scrollea por dentro */
.visor--marco .visor__lienzo { align-content: stretch; padding: var(--space-xs); }
.visor--marco .visor__hoja { height: 100%; }
.visor__hoja > iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: var(--radius-md); background: var(--color-sheet); box-shadow: var(--anillo); }
/* Pin de comentario: una pieza con una esquina en punta, que señala el lugar */
.pin { position: absolute; z-index: 2; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); translate: 0 -100%; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0;
  border-radius: var(--radius-pieza) var(--radius-pieza) var(--radius-pieza) 0; background: var(--color-ink); color: var(--color-on-ink); font-size: var(--text-xs); font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--color-sheet), var(--sombra-2); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); transform-origin: 0 100%; }
.pin:hover, .pin[aria-pressed="true"] { transform: scale(1.12); }
.pin--equipo { background: var(--color-sheet); color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--color-ink), 0 0 0 2px var(--color-sheet), var(--sombra-2); }
.pin--resuelto { background: var(--color-ok); color: var(--color-sobre-color); }
.pin--nuevo { background: var(--color-sheet); color: var(--color-ink); outline: 2px dashed var(--color-ink); outline-offset: -2px; }
/* Panel de comentarios */
.comentarios { display: grid; gap: var(--space-xs); align-content: start; }
.comentario { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--space-sm); padding: var(--space-sm); border-radius: var(--radius-md); background: var(--color-sheet); box-shadow: var(--anillo); font-size: var(--text-ui); line-height: 1.45; }
.comentario > .pin { position: static; translate: none; width: 24px; height: 24px; box-shadow: none; grid-row: span 3; }
.comentario__cabeza { display: flex; align-items: baseline; gap: 6px; font-size: var(--text-xs); color: var(--color-ink-soft); }
.comentario__cabeza b { color: var(--color-ink); font-weight: var(--peso-fuerte); }
.comentario__acciones { display: flex; gap: 2px; margin-left: calc(-1 * var(--space-xs)); }
.comentario[aria-current="true"] { box-shadow: var(--anillo-sel); }
.comentario--resuelto { background: var(--color-paper-2); box-shadow: none; color: var(--color-ink-soft); }

/* ── 20 · Fechas y agenda ── */
.calendario { display: grid; gap: var(--space-xs); width: min(100%, 288px); }
.calendario__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); font-size: var(--text-ui); font-weight: var(--peso-boton); }
.calendario__dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px 0; text-align: center; }
.calendario__dias > span { padding: 4px 0; font-size: var(--text-xs); color: var(--color-ink-soft); }
.calendario__dias button { height: 36px; padding: 0; border: 0; border-radius: var(--radius-control-chico); background: none; font-size: var(--text-sm); font-variant-numeric: tabular-nums; cursor: pointer; }
.calendario__dias button:hover { background: var(--color-paper-2); }
.calendario__dias button.fuera { color: var(--color-ink-faint); }
.calendario__dias button.hoy { font-weight: var(--peso-fuerte); box-shadow: inset 0 0 0 1px var(--color-line-strong); }
.calendario__dias button.en-rango { border-radius: 0; background: var(--color-paper-3); }
.calendario__dias button[aria-selected="true"] { background: var(--color-ink); color: var(--color-on-ink); box-shadow: none; }
.calendario__dias button:disabled { color: var(--color-ink-faint); text-decoration: line-through; cursor: not-allowed; background: none; }
/* Selector de periodo: atajos a la izquierda y el calendario */
.periodo { display: grid; grid-template-columns: 152px auto; gap: var(--space-md); }
.periodo__atajos { display: grid; align-content: start; gap: 2px; padding-right: var(--space-sm); box-shadow: inset -1px 0 0 var(--color-line); }
/* Agenda de la semana: horas a la izquierda, un día por columna; la cita ocupa sus horas */
.agenda { display: grid; grid-template-columns: 56px repeat(var(--dias, 5), minmax(0, 1fr)); border-radius: var(--radius-lg); background: var(--color-sheet); box-shadow: var(--anillo); overflow: hidden; }
.agenda__dia { display: grid; justify-items: center; gap: 2px; padding: var(--space-xs) 0; font-size: var(--text-xs); color: var(--color-ink-soft); box-shadow: inset 0 -1px 0 var(--color-line), inset 1px 0 0 var(--color-line); }
.agenda__dia b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-control-chico); corner-shape: var(--esquina); color: var(--color-ink); font-size: var(--text-tarjeta); font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; }
.agenda__dia--hoy b { background: var(--color-ink); color: var(--color-on-ink); }
.agenda__hora { height: 56px; padding: 4px var(--space-xs) 0 0; font-size: var(--text-xs); color: var(--color-ink-soft); text-align: right; font-variant-numeric: tabular-nums; box-shadow: inset 0 -1px 0 var(--color-line); }
.agenda__celda { position: relative; height: 56px; box-shadow: inset 0 -1px 0 var(--color-line), inset 1px 0 0 var(--color-line); }
.cita { position: absolute; z-index: 1; inset: 3px 3px auto 3px; height: calc(var(--horas, 1) * 56px - 6px); display: grid; align-content: start; gap: 1px; padding: 6px 8px 6px 10px; border-radius: var(--radius-sm);
  background: var(--color-paper-3); box-shadow: inset 3px 0 0 var(--color-ink); font-size: var(--text-xs); line-height: 1.3; overflow: hidden; cursor: pointer; }
.cita b { font-size: var(--text-sm); font-weight: var(--peso-fuerte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cita span { color: var(--color-ink-soft); }
.cita--pendiente { background: var(--color-sheet); box-shadow: inset 0 0 0 1px var(--color-line-strong), inset 3px 0 0 var(--color-aviso); }
.cita--cancelada { opacity: 0.55; } .cita--cancelada b { text-decoration: line-through; }
/* Editor de horario: un renglón por día, turnos y cerrado */
.horario { display: grid; }
.horario__dia { display: grid; grid-template-columns: 112px auto minmax(0, 1fr); align-items: center; gap: var(--space-sm); min-height: var(--fila-h); padding: var(--space-xs) 0; box-shadow: inset 0 -1px 0 var(--color-line); font-size: var(--text-ui); }
.horario__dia:last-child { box-shadow: none; }
.horario__nombre { font-weight: var(--peso-boton); }
.horario__turnos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.turno { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--color-ink-soft); }
.turno .campo__input { width: 88px; height: var(--control-h-chico); padding: 0 var(--space-xs); border-radius: var(--radius-control-chico); text-align: center; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-ink); }
.horario__dia--cerrado .horario__turnos { color: var(--color-ink-soft); font-size: var(--text-sm); }
@media (max-width: 767.98px) {
  .horario__dia { grid-template-columns: minmax(0, 1fr) auto; }
  .horario__turnos { grid-column: 1 / -1; }
  .periodo { grid-template-columns: minmax(0, 1fr); }
  .periodo__atajos { display: flex; flex-wrap: wrap; padding: 0 0 var(--space-sm); box-shadow: inset 0 -1px 0 var(--color-line); }
}

/* ── 21 · Dominio (CLI-11, CLI-12, EQ-08) ── */
/* Valor que se copia (registros DNS, enlaces, códigos) */
.copiable { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: 30px; padding: 0 2px 0 var(--space-xs); border-radius: var(--radius-sm); background: var(--color-paper-2); font-family: var(--font-mono); font-size: var(--text-xs); }
.copiable span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copiable .boton { --bh: 26px; width: 26px; padding: 0; border-radius: var(--radius-xs); background: transparent; box-shadow: none; }
.copiable .boton:hover { background: var(--color-paper-3); }
/* Estado de la verificación del dominio */
.verificacion { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--color-paper-2); font-size: var(--text-ui); }
.verificacion__txt { display: grid; flex: 1; min-width: 0; line-height: 1.4; }
.verificacion__txt b { font-weight: var(--peso-fuerte); }
.verificacion__txt small { font-size: var(--text-sm); opacity: 0.85; }
.verificacion[data-estado="conectado"] { background: var(--color-ok-fondo); color: var(--color-ok-texto); }
.verificacion[data-estado="error"] { background: var(--color-error-fondo); color: var(--color-error-texto); }
.dominio__nombre { font-weight: var(--peso-fuerte); letter-spacing: var(--tracking-nombre); }
.dominio__nombre span { color: var(--color-ink-soft); font-weight: var(--peso-cuerpo); }

/* ── 22 · Pagos y facturas (CLI-08…09, CLI-31…33, EQ-10…11) ── */
.metodo { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); border-radius: var(--radius-lg); background: var(--color-sheet); box-shadow: var(--anillo); }
.metodo__tarjeta { display: grid; place-items: center; flex: none; width: 52px; height: 36px; border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-on-ink); }
.metodo__txt { display: grid; flex: 1; min-width: 0; line-height: 1.35; font-size: var(--text-ui); }
.metodo__txt b { font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; }
.metodo__txt small { font-size: var(--text-sm); color: var(--color-ink-soft); }
.metodo--principal { box-shadow: var(--anillo-sel); }
/* Donde va el formulario embebido de Stripe (no se dibuja: lo pinta Stripe con nuestra apariencia) */
.stripe-hueco { display: grid; place-items: center; gap: var(--space-2xs); min-height: 168px; padding: var(--space-lg); border-radius: var(--radius-md); border: 1.5px dashed var(--color-line-strong); text-align: center; font-size: var(--text-sm); color: var(--color-ink-soft); }
/* Renglones de grupo y total en tablas de partidas y facturas */
.tabla .tabla__grupo td { height: 36px; background: var(--color-paper-2); font-size: var(--text-xs); font-weight: var(--peso-fuerte); color: var(--color-ink-soft); }
.tabla .tabla__total td { height: var(--fila-h); font-weight: var(--peso-fuerte); box-shadow: inset 0 1px 0 var(--color-ink); }
.tabla .tabla__total:hover { background: none; }
.descargas { display: inline-flex; gap: 4px; }

/* ── 23 · Listas y filas (páginas, solicitudes, versiones, avisos, bitácora, prospectos) ── */
.lista { border-radius: var(--radius-lg); background: var(--color-sheet); box-shadow: var(--anillo); overflow: hidden; }
.fila { display: flex; align-items: center; gap: var(--space-sm); width: 100%; min-height: var(--fila-h); padding: var(--space-xs) var(--celda-x); border: 0; background: none; color: inherit; font: inherit; font-size: var(--text-ui); text-align: left; text-decoration: none; }
.fila + .fila { box-shadow: inset 0 1px 0 var(--color-line); }
a.fila, button.fila { cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
a.fila:hover, button.fila:hover { background: var(--color-paper-2); }
.fila__txt { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.fila__titulo { font-weight: var(--peso-boton); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila__meta { font-size: var(--text-sm); color: var(--color-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila__lado { display: flex; align-items: center; gap: var(--space-xs); flex: none; font-size: var(--text-sm); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.fila--no-leida { background: color-mix(in oklch, var(--color-ink) 3%, var(--color-sheet)); }
.fila--no-leida .fila__titulo { font-weight: var(--peso-fuerte); }
.fila--no-leida::before { content: ""; flex: none; width: 8px; height: 8px; margin-left: calc(-1 * var(--space-2xs)); border-radius: var(--radius-pieza); background: var(--color-ink); }
/* De → a (bitácora y actividad) */
.de-a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.de-a .ico { width: 14px; height: 14px; color: var(--color-ink-soft); }
.actividad { display: grid; }
.actividad li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--space-sm); align-items: start; padding: var(--space-xs) 0; font-size: var(--text-sm); line-height: 1.5; }
.actividad li + li { box-shadow: inset 0 1px 0 var(--color-line); }
.actividad time { color: var(--color-ink-soft); font-size: var(--text-xs); white-space: nowrap; padding-top: 2px; }
.actividad b { font-weight: var(--peso-fuerte); }

/* ── 24 · Consola (EQ) ── */
/* Paleta de comandos ⌘K: el menú de vidrio en grande */
.comandos { width: min(640px, 100%); padding: 0; border-radius: var(--radius-xl); overflow: hidden; }
.comandos__buscar { display: flex; align-items: center; gap: var(--space-sm); height: 56px; padding: 0 var(--space-md); box-shadow: inset 0 -1px 0 color-mix(in oklch, var(--color-ink) 10%, transparent); }
.comandos__buscar input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: var(--text-tarjeta); }
.comandos__buscar .ico { width: 20px; height: 20px; color: var(--color-ink-soft); }
.comandos .menu { padding: 6px; max-height: 360px; overflow: auto; }
.comandos__pie { display: flex; flex-wrap: wrap; gap: var(--space-md); padding: var(--space-xs) var(--space-md); box-shadow: inset 0 1px 0 color-mix(in oklch, var(--color-ink) 10%, transparent); font-size: var(--text-xs); color: var(--color-ink-soft); }
.comandos__pie span { display: inline-flex; align-items: center; gap: 4px; }
/* Grupo plegable: un estado con su conteo y sus filas */
.plegable summary { display: flex; align-items: center; gap: var(--space-xs); min-height: 40px; padding: 0 var(--celda-x); background: var(--color-paper-2); font-size: var(--text-sm); font-weight: var(--peso-boton); list-style: none; cursor: pointer; }
.plegable summary::-webkit-details-marker { display: none; }
.plegable summary::before { content: ""; width: 7px; height: 7px; margin: 0 4px 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: -45deg; transition: rotate var(--dur-short) var(--ease-out); }
.plegable[open] summary::before { rotate: 45deg; }
.plegable + .plegable { box-shadow: inset 0 1px 0 var(--color-line); }
/* Salud de una cuenta o sitio: 3 barras */
.salud { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: var(--peso-boton); white-space: nowrap; }
.salud i { display: inline-grid; grid-template-columns: repeat(3, 5px); gap: 2px; align-items: end; }
.salud b { display: block; width: 5px; border-radius: var(--radius-redondo); background: var(--color-line-strong); }
.salud b:nth-child(1) { height: 8px; } .salud b:nth-child(2) { height: 11px; } .salud b:nth-child(3) { height: 14px; }
.salud[data-salud="bien"] b { background: var(--color-ok); }
.salud[data-salud="aviso"] b:nth-child(-n+2) { background: var(--color-aviso); }
.salud[data-salud="riesgo"] b:nth-child(1) { background: var(--color-error); }
/* Registro de horas: cronómetro y entrada manual */
.horas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md); border-radius: var(--radius-lg); background: var(--color-sheet); box-shadow: var(--anillo); }
.horas__reloj { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-seccion); font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-nombre); }
.horas__txt { flex: 1 1 140px; min-width: 0; font-size: var(--text-sm); color: var(--color-ink-soft); }
.horas--corriendo .horas__reloj::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pieza); background: var(--color-error); animation: estado-late 1.2s var(--ease-in-out) infinite; }

/* ── 25 · Constructor (CON) ── */
.barra-constructor { display: flex; align-items: center; gap: var(--space-xs); height: 52px; padding: 0 var(--space-xs); background: var(--color-sheet); box-shadow: inset 0 -1px 0 var(--color-line); }
.barra-constructor__centro { display: flex; justify-content: center; align-items: center; gap: var(--space-xs); flex: 1; min-width: 0; }
.barra-constructor .regla-v { width: 1px; height: 20px; background: var(--color-line); }
/* Árbol de páginas y secciones (se arrastran por el asa) */
.arbol { display: grid; gap: 1px; font-size: var(--text-sm); }
.arbol__pagina { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--space-xs); margin-top: var(--space-xs); font-weight: var(--peso-boton); }
.arbol__pagina .ico { color: var(--color-ink-soft); }
.arbol__item { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 32px; padding: 0 var(--space-xs) 0 var(--space-xl); border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-ink-soft); font: inherit; text-align: left; cursor: pointer; }
.arbol__item:hover { background: var(--color-paper-2); color: var(--color-ink); }
.arbol__item[aria-current="true"] { background: var(--color-ink); color: var(--color-on-ink); }
.arbol__asa { margin-left: auto; opacity: 0; cursor: grab; }
.arbol__item:hover .arbol__asa, .arbol__item[aria-current="true"] .arbol__asa { opacity: 0.7; }
.arbol__item--oculto { opacity: 0.5; }
.arbol__item--oculto span { text-decoration: line-through; }
/* Panel de propiedades */
.propiedades { display: grid; gap: var(--space-md); align-content: start; }
.propiedades__grupo { display: grid; gap: var(--space-sm); padding-bottom: var(--space-md); box-shadow: inset 0 -1px 0 var(--color-line); }
.propiedades__grupo:last-child { box-shadow: none; }
.propiedades__titulo { font-size: var(--text-xs); font-weight: var(--peso-fuerte); color: var(--color-ink-soft); }
.muestras-color { display: flex; flex-wrap: wrap; gap: 6px; }
.muestras-color button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-pieza); background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-ink) 12%, transparent); cursor: pointer; }
.muestras-color button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--color-sheet), 0 0 0 4px var(--color-ink); }
/* Lienzo: el sitio con la sección elegida marcada */
.lienzo { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; min-height: 0; padding: var(--space-lg); overflow: auto; background: var(--color-paper-2); }
.lienzo .sel { position: relative; outline: 2px solid var(--color-ink); outline-offset: -2px; }
.lienzo .sel > .etiqueta { position: absolute; left: 0; top: 0; z-index: 1; border-radius: 0 0 var(--radius-sm) 0; }
/* Diferencias propuestas por la IA, campo por campo; se puede aplicar solo una parte */
.diff { display: grid; gap: var(--space-xs); }
.diff__campo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--space-sm); align-items: start; padding: var(--space-sm); border-radius: var(--radius-md); background: var(--color-sheet); box-shadow: var(--anillo); font-size: var(--text-ui); }
.diff__campo > .control { grid-row: span 3; padding-top: 2px; }
.diff__nombre { font-size: var(--text-xs); font-weight: var(--peso-fuerte); color: var(--color-ink-soft); }
.diff__antes, .diff__despues { justify-self: start; padding: 1px 6px; border-radius: var(--radius-xs); line-height: 1.5; }
.diff__antes { background: var(--color-error-fondo); color: var(--color-error-texto); text-decoration: line-through; }
.diff__despues { background: var(--color-ok-fondo); color: var(--color-ok-texto); }
/* Lista de verificación (auditoría antes de publicar): cumple, no cumple y aceptado */
.entregables li.falla { color: var(--color-ink); }
.entregables li.falla i { background: var(--color-error) var(--icono-x) center / 12px no-repeat; box-shadow: none; }
.entregables li.aceptado i { background: var(--color-aviso) var(--icono-check) center / 14px no-repeat; box-shadow: none; }
.entregables li > .boton, .entregables li > .etiqueta { margin-left: auto; }

/* ── 26 · Onboarding y primeros pasos ── */
/* Paleta sugerida: 3 opciones de 4 colores sacados del logo. Son colores del cliente, no de Kitsite */
.paletas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin: 0; padding: 0; border: 0; }
.paleta { position: relative; display: block; }
.paleta input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.paleta__caja { display: grid; gap: var(--space-xs); padding: 6px 6px var(--space-xs); border-radius: var(--radius-md); box-shadow: var(--anillo-fuerte); font-size: var(--text-xs); font-weight: var(--peso-boton); text-align: center; }
.paleta__colores { display: flex; height: 40px; border-radius: var(--radius-sm); overflow: hidden; }
.paleta__colores i { flex: 1; background: var(--c); }
.paleta input:checked + .paleta__caja { box-shadow: var(--anillo-sel); }
.paleta input:focus-visible + .paleta__caja { outline: 2px solid var(--color-focus); outline-offset: 3px; }
/* Ficha del negocio encontrada (estructura, sin color) */
.negocio__fotos { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4px; height: 96px; }
.negocio__nombre { font-size: var(--text-tarjeta); font-weight: var(--peso-fuerte); letter-spacing: var(--tracking-nombre); }
.negocio__datos { display: grid; gap: 2px; font-size: var(--text-sm); color: var(--color-ink-soft); }
.negocio__datos span { display: flex; align-items: center; gap: 6px; }

/* ── 27 · Marketing (PUB) ── */
.plan { display: grid; gap: var(--space-lg); align-content: start; padding: var(--space-xl); border-radius: var(--radius-2xl); background: var(--color-sheet); box-shadow: var(--anillo); }
.plan__precio { display: flex; align-items: baseline; gap: var(--space-xs); }
.plan__precio b { font-size: var(--text-h2); line-height: 1; font-weight: var(--peso-titulo); letter-spacing: var(--tracking-h2); font-variant-numeric: tabular-nums; }
.plan__precio span { color: var(--color-ink-soft); }
.plan__incluye { display: grid; gap: var(--space-xs); font-size: var(--text-ui); }
.plan__incluye li { display: flex; gap: var(--space-xs); align-items: flex-start; }
.plan__incluye li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; background: currentColor; -webkit-mask: var(--icono-check-mascara) center / 16px no-repeat; mask: var(--icono-check-mascara) center / 16px no-repeat; }
.plan--tinta { background: var(--color-ink); color: var(--color-on-ink); box-shadow: none; }
.plan--tinta .plan__precio span, .plan--tinta .tarjeta__desc { color: var(--color-on-ink-soft); }
.calculadora { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
/* Pasos numerados: el número va en una pieza en tinta */
.pasos-num { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--space-lg) var(--space-md); counter-reset: paso; }
.pasos-num li { display: grid; gap: var(--space-xs); align-content: start; counter-increment: paso; font-size: var(--text-sm); color: var(--color-ink-soft); }
.pasos-num li::before { content: counter(paso); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: var(--space-2xs); border-radius: var(--radius-pieza); background: var(--color-ink); color: var(--color-on-ink); font-size: var(--text-sm); font-weight: var(--peso-fuerte); }
.pasos-num b { color: var(--color-ink); font-size: var(--text-ui); font-weight: var(--peso-fuerte); }
.pasos-num--vertical { grid-template-columns: minmax(0, 1fr); }
.pasos-num--vertical li { grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--space-sm); }
.pasos-num--vertical li::before { grid-row: span 2; margin: 0; }
@media (max-width: 767.98px) { .calculadora { grid-template-columns: minmax(0, 1fr); } }

/* ── 28 · Ayuda, archivos y datos sueltos ── */
.lanzador { position: fixed; z-index: var(--z-flotante); right: var(--space-md); bottom: var(--space-md); display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: var(--radius-pieza);
  background: var(--color-ink); color: var(--color-on-ink); box-shadow: var(--sombra-flotante); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); }
.lanzador:hover { transform: translateY(-1px); }
.lanzador .ico { width: 22px; height: 22px; }
.lanzador--quieto { position: static; }
.archivo-tarjeta { display: grid; gap: var(--space-xs); padding: 6px 6px var(--space-sm); border-radius: var(--radius-lg); background: var(--color-sheet); box-shadow: var(--anillo); }
.archivo-tarjeta .foto-hueco { aspect-ratio: 4 / 3; border-radius: var(--radius-md); }
.archivo-tarjeta__txt { display: grid; gap: 2px; padding: 0 6px; font-size: var(--text-sm); line-height: 1.35; }
.archivo-tarjeta__txt b { font-weight: var(--peso-boton); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archivo-tarjeta__txt small { color: var(--color-ink-soft); font-size: var(--text-xs); }
.archivo-tarjeta--doc .foto-hueco { display: grid; place-items: center; background: var(--color-paper-2); color: var(--color-ink-soft); }
.resumen-ia__cabeza { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--peso-fuerte); color: var(--color-ink-soft); }
.detalles { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-xs) var(--space-md); margin: 0; font-size: var(--text-ui); }
.detalles dt { color: var(--color-ink-soft); }
.detalles dd { margin: 0; min-width: 0; }
.barra-sitio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-xl); padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md); border-radius: var(--radius-lg); background: var(--color-sheet); box-shadow: var(--anillo); }
.barra-sitio__dato { display: grid; line-height: 1.35; font-size: var(--text-ui); }
.barra-sitio__dato small { font-size: var(--text-xs); color: var(--color-ink-soft); }
.barra-sitio__dato b { font-weight: var(--peso-boton); font-variant-numeric: tabular-nums; }
.barra-sitio .grupo-botones { margin-left: auto; }

/* ── 29 · Página alámbrica: el sitio del cliente completo, sin color (visor, lienzo y onboarding) ── */
.pagina-alambre { background: var(--cliente-fondo); color: var(--cliente-tinta); border-radius: var(--radius-md); box-shadow: var(--anillo), var(--sombra-3); overflow: hidden; container-type: inline-size; font-size: var(--text-sm); }
.pagina-alambre > section { position: relative; display: grid; gap: var(--space-md); padding: var(--space-xl) var(--space-2xl); box-shadow: inset 0 1px 0 var(--cliente-suave); }
.pagina-alambre > section:first-child { box-shadow: none; }
.pa-cab { display: flex !important; align-items: center; gap: var(--space-md); padding-block: var(--space-md) !important; }
.pa-logo { width: 28px; height: 28px; border-radius: var(--radius-pieza); background: var(--cliente-sol); flex: none; }
.pa-nombre { font-weight: var(--peso-fuerte); white-space: nowrap; }
.pa-menu { display: flex; gap: var(--space-lg); margin-left: auto; }
.pa-menu i { width: 52px; }
.pa-boton { display: inline-flex; align-items: center; justify-self: start; height: 36px; padding: 0 var(--space-md); border-radius: var(--radius-redondo); background: var(--cliente-tinta); color: var(--cliente-fondo); font-size: var(--text-sm); font-weight: var(--peso-fuerte); white-space: nowrap; }
.pa-portada { grid-template-columns: 1.1fr 1fr; align-items: center; column-gap: var(--space-2xl) !important; }
.pa-portada .foto-hueco { aspect-ratio: 4 / 3; }
.pa-titulo { font-size: var(--text-pagina); line-height: 1.05; font-weight: var(--peso-fuerte); letter-spacing: var(--tracking-titulo); }
.pa-filas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-2xl); }
.pa-filas p { display: flex; justify-content: space-between; gap: var(--space-sm); padding-bottom: var(--space-xs); box-shadow: inset 0 -1px 0 var(--cliente-suave); font-variant-numeric: tabular-nums; }
.pa-galeria { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-xs); height: 180px; }
.pa-h { font-size: var(--text-tarjeta); font-weight: var(--peso-fuerte); }
.pa-pie { background: var(--cliente-suave); }
@container (max-width: 560px) {
  .pagina-alambre > section { padding: var(--space-lg) var(--space-md); }
  .pa-menu { display: none; }
  .pa-cab .pa-boton { margin-left: auto; }
  .pa-portada, .pa-filas { grid-template-columns: minmax(0, 1fr); }
  .pa-galeria { grid-template-columns: 1fr 1fr; height: 220px; }
  .pa-galeria .foto-hueco:first-child { grid-column: span 2; }
}

/* ── 30 · Pantallas completas sin barra lateral: revisión de la muestra y constructor ── */
.revision { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-xs); height: 100svh; padding: var(--space-xs); background: var(--color-paper); }
.revision > .barra-revision { grid-column: 1 / -1; }
.revision__panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; border-radius: var(--radius-xl); background: var(--color-sheet); box-shadow: var(--anillo); overflow: hidden; }
.revision__panel > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-md) var(--space-md) var(--space-xs); }
.revision__panel > header h2 { white-space: nowrap; font-size: var(--text-tarjeta); font-weight: var(--peso-fuerte); }
.revision__panel .comentarios { padding: var(--space-xs) var(--space-md) var(--space-md); overflow: auto; }
.revision__panel > footer { padding: var(--space-sm) var(--space-md) var(--space-md); box-shadow: inset 0 1px 0 var(--color-line); }
.constructor { display: grid; grid-template-columns: 248px minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr); height: 100svh; background: var(--color-sheet); }
.constructor > .barra-constructor { grid-column: 1 / -1; }
.constructor__lado { min-height: 0; padding: var(--space-sm); overflow: auto; }
.constructor__lado--izq { box-shadow: inset -1px 0 0 var(--color-line); }
.constructor__lado--der { box-shadow: inset 1px 0 0 var(--color-line); }
@media (max-width: 1023.98px) {
  .revision { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .revision__panel { max-height: 40svh; }
  .constructor { grid-template-columns: minmax(0, 1fr); }
  .constructor__lado { display: none; }
}

/* ── Movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 150ms !important; animation-duration: 150ms !important; animation-iteration-count: 1 !important; }
}