/* Tarjeta de planes universal (tarjeta-planes.js). Un solo CSS para el diagnóstico, el cobro y la app: aquí no hay ningún color escrito;
   cada superficie pone el suyo. Los colores salen de los nombres de cada una (diagnóstico: --rb, --rs, --rt, --az…; app: --hf-*) y las
   variables --tp-* se pueden redefinir para reestilizar el componente sin tocar su estructura. */
.tp {
  --tp-fondo: var(--rb, var(--hf-fondo, Canvas));
  --tp-panel: var(--rs, var(--hf-panel, Canvas));
  --tp-panel2: var(--rs2, var(--hf-panel-2, Canvas));
  --tp-texto: var(--rt, var(--hf-texto, CanvasText));
  --tp-tenue: var(--rt2, var(--hf-tenue, GrayText));
  --tp-linea: var(--rl, var(--hf-linea, currentColor));
  --tp-linea2: var(--rl2, var(--hf-linea-2, currentColor));
  --tp-acento: var(--az, var(--hf-brasa, Highlight));
  --tp-sobre: var(--azon, var(--hf-sobre-brasa, HighlightText));
  --tp-acento-texto: var(--azt, var(--hf-brasa-texto, LinkText));
  --tp-foco: var(--foco, var(--hf-foco, Highlight));
  --tp-radio: var(--hf-r-tarjeta, 16px);
  --tp-radio-inv: var(--hf-r-tarjeta-inv, 16px);
  --tp-radio-boton: var(--hf-r-boton-tecla, 12px);
  --tp-display: var(--hf-f-display, system-ui, sans-serif);
  --tp-texto-fuente: var(--hf-f-texto, system-ui, sans-serif);
  --tp-mono: var(--hf-f-mono, ui-monospace, monospace);
  container-type: inline-size;
  display: grid; gap: var(--hf-e4, 16px); min-width: 0; color: var(--tp-texto); font: 400 15px/1.5 var(--tp-texto-fuente);
  text-transform: none; letter-spacing: normal; word-spacing: normal;
}
.tp *, .tp *::before, .tp *::after { box-sizing: border-box; }
.tp :focus-visible { outline: 2px solid var(--tp-foco); outline-offset: 3px; }
.tp h3, .tp p, .tp ul { margin: 0; }
:where(.tp) button, :where(.tp) input { font: inherit; color: inherit; }     /* sin especificidad: no pisa los botones del componente */

/* ───── barra: pestañas por audiencia, interruptor de pago y moneda ───── */
.tp-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hf-e3, 12px) var(--hf-e5, 24px); }
.tp-tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--tp-linea2); border-radius: var(--hf-r-pildora, 99px); }
.tp-tab { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--hf-r-pildora, 99px); background: transparent; cursor: pointer;
  font: 500 12px var(--tp-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tp-tenue); }
.tp-tab[aria-selected="true"] { background: var(--tp-acento); color: var(--tp-sobre); }
.tp-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hf-e3, 12px) var(--hf-e4, 16px); }
.tp-pago { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--tp-linea2); border-radius: var(--hf-r-pildora, 99px); }
.tp-opc { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--hf-r-pildora, 99px);
  background: transparent; cursor: pointer; font: 500 13px var(--tp-texto-fuente); color: var(--tp-tenue); }
.tp-opc[aria-pressed="true"] { background: var(--tp-texto); color: var(--tp-fondo); }
.tp-ahorro { font: 600 11px var(--tp-mono); letter-spacing: .04em; padding: 2px 8px; border-radius: var(--hf-r-pildora, 99px); background: var(--tp-acento); color: var(--tp-sobre); }
.tp-moneda { display: inline-flex; gap: 2px; }
.tp-mon { min-height: 44px; min-width: 52px; padding: 0 10px; border: 0; background: transparent; cursor: pointer; font: 500 11px var(--tp-mono);
  letter-spacing: .1em; color: var(--tp-tenue); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; }
.tp-mon[aria-pressed="true"] { color: var(--tp-texto); text-decoration-color: var(--tp-acento); text-decoration-thickness: 2px; }

/* ───── tarjetas ───── */
.tp-grid { display: grid; gap: var(--hf-e3, 12px); grid-template-columns: minmax(0, 1fr); }
.tp-card { position: relative; display: flex; flex-direction: column; gap: var(--hf-e2, 8px); min-width: 0; padding: 26px 20px 20px;
  background: var(--tp-panel); border: 1px solid var(--tp-linea2); border-radius: var(--tp-radio); }
.tp-card:hover { border-radius: var(--tp-radio-inv); }
.tp-rec { border: 2px solid var(--tp-acento); background: color-mix(in srgb, var(--tp-acento) 9%, var(--tp-panel)); }
.tp-tuya { border-style: dashed; }
.tp-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tp-nombre { font: 700 22px/1 var(--tp-display); text-transform: uppercase; letter-spacing: -.01em; word-spacing: var(--hf-ws-display, .15em); overflow-wrap: anywhere; }
.tp-etiqueta { padding: 4px 10px; border-radius: var(--hf-r-pildora, 99px); background: var(--tp-acento); color: var(--tp-sobre);
  font: 600 10.5px var(--tp-mono); letter-spacing: .1em; text-transform: uppercase; }
.tp-para { color: var(--tp-tenue); }
.tp-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: var(--hf-e2, 8px); }
.tp-monto { font: 700 clamp(28px, 1rem + 1.4vw, 34px)/1 var(--tp-display); letter-spacing: -.02em; white-space: nowrap; }
.tp-unidad { font: 500 13px var(--tp-mono); color: var(--tp-tenue); }
.tp-sin { color: var(--tp-tenue); font-style: italic; }
.tp-gris { font: 400 13px/1.4 var(--tp-texto-fuente); color: var(--tp-tenue); }

/* botón de ancho completo, ANTES de las funciones */
.tp-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: var(--hf-e2, 8px); padding: 0 18px;
  border: 2px solid var(--tp-linea2); border-radius: var(--tp-radio-boton); background: transparent; color: var(--tp-texto); cursor: pointer; text-decoration: none;
  font: 600 14px var(--tp-texto-fuente); text-align: center; }
.tp-btn:hover:not([disabled]) { border-color: var(--tp-texto); }
.tp-btn-lleno { background: var(--tp-acento); border-color: var(--tp-acento); color: var(--tp-sobre); }
.tp-btn-lleno:hover:not([disabled]) { border-color: var(--tp-texto); }
.tp-btn[aria-pressed="true"] { background: var(--tp-texto); border-color: var(--tp-texto); color: var(--tp-fondo); }
.tp-btn[disabled] { opacity: .5; cursor: default; }
.tp-btn-tuyo { cursor: default; border-style: dashed; color: var(--tp-tenue); }
.tp-btn-sec { width: auto; margin-top: 0; padding: 0 22px; }
.tp-hueco { min-height: 56px; }

.tp-hereda { font: 500 11.5px/1.4 var(--tp-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tp-tenue); margin: var(--hf-e3, 12px) 0 8px; }
.tp-lista { list-style: none; padding: 0; display: grid; gap: 7px; font-size: 14px; }
.tp-lista > li { position: relative; padding-left: 24px; }
.tp-lista > li::before { content: ""; position: absolute; left: 5px; top: .3em; width: 6px; height: 11px; border: solid var(--tp-acento-texto);
  border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tp-lista strong { font-weight: 700; }

/* ───── Equipo: dos columnas en ancho, una en móvil ───── */
.tp-equipo { display: grid; gap: var(--hf-e5, 24px); }
.tp-col { display: flex; flex-direction: column; gap: var(--hf-e2, 8px); min-width: 0; }
.tp-asientos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hf-e2, 8px); margin-top: var(--hf-e2, 8px); }
.tp-asiento { display: grid; align-content: start; gap: 2px; padding: 12px; border: 1px solid var(--tp-linea2); border-radius: var(--hf-r-fila, 12px); background: var(--tp-fondo); }
.tp-asiento-et { font: 500 11px/1.3 var(--tp-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tp-tenue); }
.tp-asiento-precio { font: 700 clamp(20px, 1rem + 1vw, 26px)/1.1 var(--tp-display); white-space: nowrap; }
.tp-asiento-un, .tp-asiento-nota { font: 400 12px/1.3 var(--tp-texto-fuente); color: var(--tp-tenue); }
.tp-asiento-cr { font-size: 13px; margin-top: 4px; }
.tp-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--hf-e3, 12px); margin-top: var(--hf-e2, 8px); }
.tp-paso { display: grid; gap: 6px; }
.tp-paso-et { font: 500 11px/1.3 var(--tp-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tp-tenue); }
.tp-paso-fila { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; }
.tp-mm { min-height: 48px; border: 1px solid var(--tp-linea2); background: var(--tp-fondo); cursor: pointer; font: 600 20px var(--tp-texto-fuente); }
.tp-mm:first-child { border-radius: var(--hf-r-control, 12px) 0 0 var(--hf-r-control, 12px); }
.tp-mm:last-child { border-radius: 0 var(--hf-r-control, 12px) var(--hf-r-control, 12px) 0; }
.tp-mm[disabled] { opacity: .4; cursor: default; }
.tp-num { width: 100%; min-width: 0; min-height: 48px; padding: 0 4px; text-align: center; border: 1px solid var(--tp-linea2); border-inline: 0; border-radius: 0;
  background: var(--tp-fondo); font: 600 16px var(--tp-texto-fuente); -moz-appearance: textfield; appearance: textfield; }
.tp-num::-webkit-outer-spin-button, .tp-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tp-num:disabled { opacity: .5; }
.tp-total { margin-top: var(--hf-e2, 8px); font: 700 clamp(18px, 1rem + .8vw, 22px)/1.25 var(--tp-display); overflow-wrap: anywhere; }

/* ───── Enterprise: franja bajo las tarjetas ───── */
.tp-franja { display: grid; gap: var(--hf-e3, 12px) var(--hf-e5, 24px); align-items: center; padding: 20px; border: 1px solid var(--tp-linea2);
  border-radius: var(--tp-radio-inv); background: var(--tp-panel); margin-top: var(--hf-e3, 12px); }
.tp-lista-linea { display: grid; gap: 6px 20px; }
.tp-pie { display: grid; gap: 6px; }
.tp-nota { font: 400 13px/1.45 var(--tp-texto-fuente); color: var(--tp-tenue); }
.tp-panel { display: grid; min-width: 0; }

@container (min-width: 38rem) {
  .tp-grid.tp-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); column-gap: var(--hf-e3, 12px); row-gap: 0; }
  /* las seis filas de cada tarjeta se comparten (subgrid): nombre, para quién, precio, línea gris, botón y funciones quedan a la misma altura */
  .tp-grid.tp-3 > .tp-card { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: var(--hf-e2, 8px); }
  .tp-grid.tp-3 > .tp-card > .tp-cab { align-self: start; }
}
@container (min-width: 44rem) {
  .tp-equipo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .tp-franja { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto; }
  .tp-lista-linea { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
  .tp-card, .tp-btn, .tp-tab, .tp-opc { transition: background-color 180ms, border-color 180ms, color 180ms, border-radius 250ms; }
}
@media (forced-colors: active) {
  .tp-tab[aria-selected="true"], .tp-opc[aria-pressed="true"], .tp-btn[aria-pressed="true"] { outline: 2px solid Highlight; }
}