/*
 * Aiden UI · bloque comparison-table — CSS module de Arc (registry/blocks/comparison-table/comparison-table.module.css)
 * traducido a clases aui-comparison-table-<parte>, con las MISMAS variables de Arc (kit/foundation-web.css).
 * Acotado a .aui-comparison-table.
 *
 * Arc la monta con <div role="table">; aquí es una <table> de verdad (semántica y SEO) que se maqueta con la
 * misma rejilla de Arc (cada <tr> es una fila de grid con --grid). Los roles ARIA van en el marcado para que el
 * cambio de display no le quite la tabla al lector de pantalla.
 *
 *   Arc → aquí:  .root .inner .header .intro .title .description → -inner -header -intro -title -description
 *   .toggle .switch .thumb → -toggle -switch -thumb      .picker .pick .pickHighlight → -picker -pick -pick-highlight
 *   .table .head .headRow .headFeature .headCell .headText .headName .headCaption → la <table>, <thead>, <tr>, <th>…
 *   .sectionRow .sectionTitle .band .row .feature .hint .cell .cellInner → -section-row -section-title -band -row -feature -hint -cell -cell-inner
 *   .markWrap .check .partial .cross .note .text → -mark -check -partial -cross -note -text
 *   .footRow .footCell .legend .cta → -foot-row -foot-cell -legend -cta
 */

.aui-comparison-table { width: 100%; min-width: 0; container: aui-compare / inline-size; background: var(--background); color: var(--foreground); font-family: var(--font-body); letter-spacing: var(--tracking-body); }
.aui-comparison-table .aui-comparison-table-inner { display: grid; gap: var(--space-8); max-width: 1080px; margin: 0 auto; padding: var(--space-16) var(--space-6); }

.aui-comparison-table .aui-comparison-table-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.aui-comparison-table .aui-comparison-table-intro { display: grid; gap: var(--space-3); max-width: 560px; }
.aui-comparison-table .aui-comparison-table-title { margin: 0; color: var(--foreground); font-family: var(--font-display); font-size: clamp(var(--text-2xl), 1rem + 3cqi, var(--text-4xl)); font-weight: 500; letter-spacing: var(--tracking-display); line-height: var(--leading-display); text-wrap: balance; }
.aui-comparison-table .aui-comparison-table-description { margin: 0; color: var(--text-secondary); font-size: var(--text-base); line-height: var(--leading-body); text-wrap: pretty; }

/* Interruptor «solo diferencias»: un checkbox de verdad con role="switch". Funciona sin JS (CSS :has). */
.aui-comparison-table .aui-comparison-table-toggle { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.aui-bloque.aui-comparison-table .aui-comparison-table-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.aui-comparison-table .aui-comparison-table-switch { position: relative; width: 38px; height: 22px; flex: none; border-radius: var(--radius-pill); background: var(--control-track); transition: background-color var(--duration-fast) var(--ease-standard); }
.aui-comparison-table .aui-comparison-table-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--control-thumb); box-shadow: var(--control-thumb-shadow); transition: transform var(--duration-spring) var(--ease-spring), background-color var(--duration-fast) var(--ease-standard); }
.aui-comparison-table .aui-comparison-table-toggle input:checked + .aui-comparison-table-switch { background: var(--control-on); }
.aui-comparison-table .aui-comparison-table-toggle input:checked + .aui-comparison-table-switch .aui-comparison-table-thumb { background: var(--control-thumb-on); transform: translateX(16px); }
.aui-comparison-table .aui-comparison-table-toggle:has(input:checked) { color: var(--foreground); }
@media (hover: hover) and (pointer: fine) { .aui-comparison-table .aui-comparison-table-toggle:hover input:not(:checked) + .aui-comparison-table-switch { background: var(--control-track-hover); } }
.aui-comparison-table .aui-comparison-table-toggle input:focus-visible:not(:checked) + .aui-comparison-table-switch { background: var(--control-track-hover); }

/* Selector de competidor en el móvil: hueco reservado (36 px) que rellena el JS; solo existe en la vista apilada. */
.aui-comparison-table .aui-comparison-table-picker { display: none; gap: 2px; min-height: 36px; margin: 0 calc(var(--space-4) * -1); overflow-x: auto; padding: 0 var(--space-4); scrollbar-width: none; position: relative; isolation: isolate; }
.aui-comparison-table .aui-comparison-table-picker::-webkit-scrollbar { display: none; }
.aui-bloque.aui-comparison-table .aui-comparison-table-pick { position: relative; flex: none; height: 36px; border: 0; border-radius: var(--radius-pill); padding: 0 var(--space-4); background: none; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard); }
.aui-bloque.aui-comparison-table .aui-comparison-table-pick[aria-pressed="true"], .aui-bloque.aui-comparison-table .aui-comparison-table-pick:focus-visible { color: var(--foreground); }
.aui-comparison-table .aui-comparison-table-pick-highlight { position: absolute; z-index: -1; top: 0; left: 0; height: 36px; border-radius: var(--radius-pill); background: var(--surface-muted); pointer-events: none; }

/* ── Tabla ──────────────────────────────────────────────────────────────────────────────────────────────── */
.aui-comparison-table .aui-comparison-table-scroller { position: relative; overscroll-behavior: contain; scrollbar-width: thin; }
.aui-bloque.aui-comparison-table .aui-comparison-table-table {
  --band: color-mix(in oklab, var(--accent) 6%, var(--surface));
  --grid: minmax(0, 1.7fr) repeat(var(--columns), minmax(0, 1fr));
  display: grid; width: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; background: none; table-layout: auto;
}
.aui-bloque.aui-comparison-table .aui-comparison-table-table :is(thead, tbody, tfoot) { display: block; border: 0; background: none; }
.aui-bloque.aui-comparison-table .aui-comparison-table-table tr { display: grid; grid-template-columns: var(--grid); border: 0; background: none; }
.aui-bloque.aui-comparison-table .aui-comparison-table-table :is(th, td) { margin: 0; border: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: inherit; vertical-align: middle; min-width: 0; }
.aui-comparison-table .aui-comparison-table-head { position: sticky; z-index: 3; top: var(--sticky-top, 0px); background: color-mix(in oklab, var(--background) 94%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
.aui-bloque.aui-comparison-table .aui-comparison-table-head tr { border-bottom: 1px solid var(--border); }
.aui-bloque.aui-comparison-table .aui-comparison-table-head-feature { min-height: 84px; }
.aui-bloque.aui-comparison-table .aui-comparison-table-head-cell { position: relative; display: grid; min-height: 84px; align-items: end; justify-items: center; overflow: hidden; padding: var(--space-4) var(--space-2) var(--space-4); text-align: center; }
.aui-bloque.aui-comparison-table .aui-comparison-table-head-cell[data-own] { border-radius: 20px 20px 0 0; background: var(--band); }
.aui-comparison-table .aui-comparison-table-head-text { display: grid; gap: 2px; }
.aui-comparison-table .aui-comparison-table-head-name { font-size: var(--text-base); font-weight: 500; line-height: var(--leading-body); }
.aui-comparison-table .aui-comparison-table-head-cell[data-own] .aui-comparison-table-head-name { color: var(--accent-strong); }
[data-theme="dark"] .aui-comparison-table .aui-comparison-table-head-cell[data-own] .aui-comparison-table-head-name,
.dark .aui-comparison-table .aui-comparison-table-head-cell[data-own] .aui-comparison-table-head-name { color: var(--foreground); }
.aui-comparison-table .aui-comparison-table-head-caption { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); font-variant-numeric: tabular-nums; }

.aui-bloque.aui-comparison-table .aui-comparison-table-section-row { overflow: hidden; }
.aui-bloque.aui-comparison-table .aui-comparison-table-section-title { padding: var(--space-8) var(--space-2) var(--space-2) 0; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; text-align: left; }
.aui-bloque.aui-comparison-table .aui-comparison-table-band[data-own] { background: var(--band); }
.aui-bloque.aui-comparison-table .aui-comparison-table-row { overflow: hidden; }
.aui-bloque.aui-comparison-table .aui-comparison-table-row > * { border-bottom: 1px solid var(--border-subtle); transition: background-color var(--duration-fast) var(--ease-standard); }
.aui-bloque.aui-comparison-table .aui-comparison-table-feature { display: grid; align-content: center; gap: 2px; min-height: 56px; padding: var(--space-3) var(--space-4) var(--space-3) 0; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); text-align: left; }
.aui-comparison-table .aui-comparison-table-hint { color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; }
.aui-bloque.aui-comparison-table .aui-comparison-table-cell { position: relative; display: grid; place-items: center; padding: var(--space-2); text-align: center; }
.aui-bloque.aui-comparison-table .aui-comparison-table-cell[data-own] { background: var(--band); }
.aui-comparison-table .aui-comparison-table-cell-inner { display: grid; place-items: center; }
@media (hover: hover) and (pointer: fine) {
  .aui-bloque.aui-comparison-table .aui-comparison-table-row:hover > * { background: color-mix(in oklab, var(--foreground) 2.5%, transparent); }
  .aui-bloque.aui-comparison-table .aui-comparison-table-row:hover > .aui-comparison-table-cell[data-own] { background: color-mix(in oklab, var(--accent) 9%, var(--surface)); }
}

.aui-comparison-table .aui-comparison-table-mark { display: inline-grid; justify-items: center; gap: 2px; }
.aui-comparison-table .aui-comparison-table-mark svg { display: block; }
.aui-comparison-table .aui-comparison-table-check circle { fill: color-mix(in oklab, var(--foreground) 8%, transparent); }
.aui-comparison-table .aui-comparison-table-check path { fill: none; stroke: var(--foreground); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.aui-comparison-table .aui-comparison-table-check[data-own] circle,
.aui-comparison-table [data-own] .aui-comparison-table-check circle { fill: var(--control-on); }
.aui-comparison-table .aui-comparison-table-check[data-own] path,
.aui-comparison-table [data-own] .aui-comparison-table-check path { stroke: var(--control-glyph); }
.aui-comparison-table .aui-comparison-table-partial circle { fill: none; stroke: var(--text-muted); stroke-width: 1.5; }
.aui-comparison-table .aui-comparison-table-partial path { fill: var(--text-muted); }
.aui-comparison-table .aui-comparison-table-cross { color: var(--text-muted); opacity: .7; }
.aui-comparison-table .aui-comparison-table-note { max-width: 12ch; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
.aui-comparison-table .aui-comparison-table-text { font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; }
.aui-comparison-table .aui-comparison-table-cell:not([data-own]) .aui-comparison-table-text { color: var(--text-secondary); font-weight: 400; }

.aui-bloque.aui-comparison-table .aui-comparison-table-foot-row > * { padding-top: var(--space-5); }
.aui-bloque.aui-comparison-table .aui-comparison-table-foot-cell { display: grid; place-items: center; padding-bottom: var(--space-5); }
.aui-bloque.aui-comparison-table .aui-comparison-table-foot-cell[data-own] { border-radius: 0 0 20px 20px; background: var(--band); }
.aui-bloque.aui-comparison-table .aui-comparison-table-legend { display: flex; flex-wrap: wrap; align-content: start; gap: var(--space-2) var(--space-4); padding-right: var(--space-4); color: var(--text-muted); font-size: var(--text-xs); text-align: left; }
.aui-comparison-table .aui-comparison-table-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.aui-comparison-table .aui-comparison-table-legend .aui-comparison-table-check path { stroke-width: 2.2; }
.aui-bloque.aui-comparison-table .aui-comparison-table-cta { display: inline-flex; height: var(--control-height-sm); max-width: calc(100% - var(--space-2)); align-items: center; justify-content: center; overflow: hidden; border: 0; border-radius: var(--radius-pill); padding: 0 var(--space-4); background: var(--foreground); color: var(--background); font: inherit; font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--duration-instant) var(--ease-standard); }
.aui-bloque.aui-comparison-table .aui-comparison-table-cta:active { transform: scale(.97); }
.aui-bloque.aui-comparison-table .aui-comparison-table-cta:focus-visible { opacity: .91; }
/* Nota al pie (Aiden: la comparativa publica de dónde salen los precios). */
.aui-comparison-table .aui-comparison-table-footnote { margin: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); text-wrap: pretty; }

/* Columnas fuera de la vista (vista apilada, competidor no elegido). */
.aui-bloque.aui-comparison-table .aui-comparison-table-table [data-off] { display: none; }
/* Solo diferencias: filas iguales en todas las columnas visibles. Sin JS lo hace el CSS con data-same de PHP. */
.aui-comparison-table:not(.aui-bloque-on):has(.aui-comparison-table-toggle input:checked) .aui-comparison-table-row[data-same] { display: none; }
.aui-bloque.aui-comparison-table .aui-comparison-table-table tr[hidden] { display: none; }

@container aui-compare (max-width: 820px) {
  .aui-bloque.aui-comparison-table .aui-comparison-table-table { --grid: minmax(0, 1.4fr) repeat(var(--columns), minmax(0, 1fr)); }
}
@container aui-compare (max-width: 640px) {
  .aui-comparison-table .aui-comparison-table-inner { gap: var(--space-6); padding: var(--space-12) var(--space-4); }
  .aui-bloque.aui-comparison-table .aui-comparison-table-table { --grid: minmax(0, 1.3fr) repeat(var(--columns), minmax(0, .9fr)); }
  .aui-bloque.aui-comparison-table :is(.aui-comparison-table-head-feature, .aui-comparison-table-head-cell) { min-height: 72px; }
  .aui-bloque.aui-comparison-table .aui-comparison-table-legend { flex-direction: column; }
  .aui-bloque.aui-comparison-table .aui-comparison-table-feature { padding-right: var(--space-3); }
}
/* Vista apilada (stackBelow = 640): tu columna junto a UN competidor. Sin JS, el primero; con JS, el elegido. */
@container aui-compare (max-width: 639.98px) {
  .aui-comparison-table .aui-comparison-table-picker[data-multiple] { display: flex; }
  .aui-bloque.aui-comparison-table:not(.aui-bloque-on) .aui-comparison-table-table { --grid: minmax(0, 1.3fr) repeat(var(--columns-narrow, 2), minmax(0, .9fr)); }
  .aui-comparison-table:not(.aui-bloque-on) .aui-comparison-table-table tr > :not([data-own]):not(:first-child) ~ :not([data-own]) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aui-comparison-table .aui-comparison-table-thumb { transition: none; }
  .aui-bloque.aui-comparison-table .aui-comparison-table-cta:active { transform: none; }
}