/* ==========================================================================
   Voz a Letra · app.css — solo la app (app.html). Requiere tokens.css y base.css antes.
   Calma, rapidez y una sola cosa que brilla por pantalla: la ballena de luz.
   ========================================================================== */

.app { --grain-opacity: 0.04; display: flex; flex-direction: column; min-height: 100dvh; }
.app > main { flex: 1 0 auto; } /* el pie legal queda abajo aunque la pantalla tenga poco contenido */
.app > .topbar, .app > .subnav, .app > .appfoot { flex: none; }
#main:focus { outline: none; }

/* ---------- Barra superior (siempre visible: logo · saldo · Comprar) ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding-top: env(safe-area-inset-top);
  background-color: rgb(6 10 20 / 0.94); /* taste-skill-ignore: barra fija sólida (DISENO §5) */
}
.topbar__in {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-h);
}
.logo { display: inline-flex; flex: none; border-radius: var(--radius); }
.logo img { width: auto; height: 32px; max-width: none; }
@media (min-width: 48em) { .logo img { height: 40px; } }
/* Teléfono chico con sesión: solo la ballena del logo, para que entren saldo y Comprar */
@media (max-width: 29.99em) {
  .topbar__in--user .logo { width: 4.1rem; overflow: hidden; } /* logo 344×64 a 32px: ballena hasta ~64px, letra desde ~71px */
}

.topnav { display: none; }
@media (min-width: 48em) {
  .topnav { display: flex; gap: var(--space-1); margin-left: var(--space-5); }
}
.topnav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--space-4);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: color var(--t-hover) ease, background-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .topnav__link:hover { color: var(--text); } }
.topnav__link[aria-current="page"] { color: var(--text); background-color: var(--surface-2); }

.topbar__end { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; min-width: 0; }
.balance { position: relative; text-decoration: none; gap: 0.5em; transition: background-color var(--t-hover) ease; }
.balance::after { content: ""; position: absolute; inset: -4px -2px; } /* área táctil de 44px (la píldora mide 36) */
@media (hover: hover) and (pointer: fine) { .balance:hover { --tone-bg: var(--surface-3); } }
/* Píldora del plan: "Pro · 42 h" (el nombre del plan se ve también en el teléfono) */
.balance { white-space: nowrap; }
.balance__label { font-weight: var(--weight-semibold); color: var(--text-soft); }
.balance__sep { color: var(--text-muted); }
@media (max-width: 29.99em) { .balance { padding-inline: 0.8rem; gap: 0.35em; } }

/* Aviso de renovación (faltan 3 días o menos, o ya venció) */
.planbar { padding-top: var(--space-3); }
.planbar[hidden] { display: none; }
.planbar__alert { padding-block: var(--space-2); }
.planbar__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.planbar__row p { max-width: none; }
.planbar .alert .btn { margin-top: 0; }

.topbar__public { margin-left: auto; }
.topbar__public a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: var(--tap);
  padding-inline: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--text);
  text-decoration: none;
}
.topbar__public a.is-highlight::before {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background-color: var(--light-cyan);
}

/* Menú del teléfono: debajo de la barra, se va con el scroll */
.subnav { padding-top: var(--space-1); }
.subnav .tabs { margin-inline: calc(-1 * var(--space-3)); }
@media (min-width: 48em) { .subnav { display: none !important; } }

/* ---------- Pantallas ---------- */
.view { padding-block: var(--space-6) var(--space-9); }
.view__head { margin-bottom: var(--space-6); }
@media (prefers-reduced-motion: no-preference) {
  .view { animation: ct-view-in 460ms var(--ease-out) both; }
  .is-arriving .done { animation: ct-arrive var(--t-scene) var(--ease-film) both; }
}
@keyframes ct-view-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
@keyframes ct-arrive { from { opacity: 0; transform: scale(1.012); } }

.boot {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-5);
  min-height: 60vh;
  text-align: center;
}
.boot .whale { width: min(70vw, 22rem); }

/* ---------- La ballena de luz (SVG) ---------- */
.whale { display: block; width: 100%; height: auto; overflow: visible; }
.whale__body { transform-box: fill-box; transform-origin: center; }
.whale__lines {
  fill: none;
  stroke: var(--light-cyan);
  stroke-width: 0.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.4;
}
.whale__trace {
  fill: none;
  stroke: var(--light-ice);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 5 95;
  opacity: 0.85;
}
.whale__stars { filter: var(--halo-star); } /* taste-skill-ignore: halo solo en los puntos de luz del motivo */
.whale__stars circle { fill: var(--light-ice); }
.whale--sm .whale__trace { stroke-width: 1.6; }
@media (prefers-reduced-motion: no-preference) {
  .whale__body { animation: ct-breathe 6.4s var(--ease-in-out) infinite; }
  .whale__halos circle { animation: ct-glow 6.4s var(--ease-in-out) infinite; }
  .whale__stars circle { animation: ct-twinkle 3.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.27s); }
  .whale__trace { animation: ct-trace 5.2s linear infinite; }
}
@media (prefers-reduced-motion: reduce) { .whale__trace { display: none; } }
@keyframes ct-breathe { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, -2%, 0) scale(1.035); } }
@keyframes ct-glow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes ct-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes ct-trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* ---------- Entrar / Crear cuenta / Recuperar (imagen de cine) ---------- */
.view--auth { padding: 0; }
.auth { position: relative; display: grid; min-height: calc(100dvh - var(--header-h)); }
.auth__media { aspect-ratio: 16 / 9; max-height: 46vh; width: 100%; }
.auth__media img { object-position: 72% 40%; }
.auth__scrim-d { display: none; }
.auth__panel { position: relative; z-index: 2; margin-top: calc(-1 * var(--space-7)); padding: 0 var(--margin) var(--space-9); }
.auth__inner { width: 100%; max-width: 27rem; margin-inline: auto; }
.auth__links a { font-weight: var(--weight-semibold); }
.google-slot { display: flex; justify-content: center; min-height: 44px; }
.or { text-align: center; }
@media (min-width: 64em) {
  .auth { align-items: center; }
  .auth__media { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; height: 100%; }
  .auth__media img { object-position: 78% 50%; }
  .auth__scrim-m { display: none; }
  .auth__scrim-d { display: block; }
  .auth__panel { margin: 0; padding: var(--space-9) var(--margin); width: min(100%, 40rem); }
  .auth__inner { margin-inline: 0 auto; margin-left: max(0px, calc((100vw - var(--container)) / 2)); }
}
.recovery-code { text-align: center; }
.form-error:empty { display: none; }

/* Contraseña con botón "Ver" */
.pass-wrap { position: relative; }
.pass-wrap .input { padding-right: 6.75rem; }
.pass-toggle { position: absolute; top: 0.25rem; right: 0.25rem; }

/* ---------- Panel: subir ---------- */
.upload { display: grid; gap: var(--space-5); }
.low-balance:empty { display: none; }
.drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  cursor: pointer;
  background-color: var(--bg-deep);
  border: 1.5px dashed var(--line-field); /* el campo de archivo: borde permitido (DISENO §6) */
  border-radius: var(--radius);
  transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .drop:hover { border-color: var(--line-field-hover); background-color: var(--surface-2); }
}
@media (min-width: 48em) { .drop { padding-block: var(--space-8); } }
.drop.is-drag { border-color: var(--light-cyan); background-color: var(--surface-2); }
/* Transcripción en mantenimiento: la zona se ve apagada y no se puede usar */
.drop.is-disabled, .drop.is-disabled:hover { cursor: not-allowed; opacity: 0.55; border-color: var(--line-field); background-color: var(--bg-deep); }
.drop.is-disabled:focus-within { outline: none; }
.drop:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.drop__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-2);
  color: var(--light-cyan);
  background-color: var(--info-bg);
  border-radius: 50%;
  transition: transform var(--t-ui) var(--ease-out);
}
.drop__icon .icon { width: 1.6rem; height: 1.6rem; }
.drop.is-drag .drop__icon { transform: translate3d(0, -4px, 0); }
.drop__title { font-size: var(--fs-h3); font-weight: var(--weight-semibold); line-height: var(--lh-snug); }
.drop__hint { font-size: var(--fs-small); color: var(--text-muted); }
.only-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .only-mouse { display: inline; }
  .only-touch { display: none; }
}
.upload__opts { display: grid; gap: var(--space-4); }
@media (min-width: 48em) {
  .upload__opts { grid-template-columns: minmax(12rem, 17rem) 1fr; align-items: end; gap: var(--space-6); }
}
.upload__switches { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }
/* "Separar quién habla" apagado + enlace "Business" (con candado) */
.switch-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.lockchip { position: relative; gap: 0.35em; text-decoration: none; }
.lockchip::after { content: ""; position: absolute; inset: -8px -4px; } /* área táctil de 44px */
.lockchip .icon { width: 0.95em; height: 0.95em; }
.lockchip[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .lockchip:hover { text-decoration: underline; } }

/* Sin plan activo: aviso grande con un solo botón (ámbar) */
.plan-gate {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--surface-2);
  border-radius: var(--radius);
}
@media (min-width: 48em) {
  .plan-gate { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-6); }
}
.plan-gate__title { margin: 0; }
@media (max-width: 47.99em) { .plan-gate__btn { width: 100%; } }
.upload__privacy { display: flex; align-items: flex-start; gap: 0.5em; max-width: none; }
.upload__privacy .icon { margin-top: 0.1em; color: var(--light-turquoise); }

/* Fila de subida */
/* La fila va justo debajo de la zona para soltar (en el teléfono se ve sin bajar) */
.queue { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.queue:empty { display: none; }
/* minmax(0, 1fr): un nombre largo (típico de WhatsApp) se corta con "…" en vez de ensanchar la página */
.qitem { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.qitem__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.qitem__title { flex: 1; min-width: 0; }
.qitem__name { font-weight: var(--weight-semibold); max-width: none; }
.qitem__status { display: flex; align-items: center; gap: var(--space-2); color: var(--text-soft); }

/* Lista de textos */
.jobs-sec { margin-top: var(--space-7); }
.jobs { display: grid; gap: var(--space-3); }
@media (min-width: 64em) { .jobs { grid-template-columns: 1fr 1fr; } }
.jobs > li { min-width: 0; }
.jobcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* el título largo se corta con "…": no empuja la tarjeta fuera de la pantalla */
  align-content: start;
  gap: var(--space-2);
  height: 100%;
}
.jobs--long .jobcard { content-visibility: auto; contain-intrinsic-size: auto 9rem; }
.jobcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.jobcard__title { min-width: 0; }
.jobcard__meta { max-width: none; }
.jobcard__preview {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-soft);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.jobcard__top .badge { flex: none; }
.jobcard__meta .num, .jobcard__meta { overflow-wrap: anywhere; }
.jobcard__error { color: var(--error); }
.jobcard__locked { color: var(--warn); }
.jobcard__wait { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
.jobcard__wait .whale { flex: none; width: 7rem; }

/* Sin textos todavía: una imagen de cine */
.empty-film { aspect-ratio: 4 / 3; }
.empty-film img { object-position: 74% 50%; }
.empty-film__text { justify-content: flex-end; gap: var(--space-2); max-width: 32rem; }
@media (min-width: 40em) { .empty-film { aspect-ratio: 2.39 / 1; } .empty-film__text { justify-content: center; } }

/* ---------- Transcripción ---------- */
.back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: var(--tap);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.back__arrow { transition: transform var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .back:hover .back__arrow { transform: translate3d(-3px, 0, 0); } }
.tview__head { display: grid; gap: var(--space-2); margin: var(--space-3) 0 var(--space-6); }
.tview__titlerow { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); }
.tview__title { min-width: 0; overflow-wrap: anywhere; }
.tview__meta { max-width: none; }
.rename { display: grid; gap: var(--space-3); max-width: 40rem; }
.tview__title-input { font-size: var(--fs-h3); font-weight: var(--weight-semibold); }

.toolbar { gap: var(--space-2); }
.tview__delete { margin-left: auto; }

.tbar {
  position: sticky;
  top: calc(var(--header-h) + env(safe-area-inset-top));
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  background-color: var(--bg);
}
.search { position: relative; display: flex; align-items: center; gap: var(--space-1); flex: 1 1 20rem; min-width: 0; }
.search__icon { position: absolute; left: 0.9rem; top: 50%; display: flex; color: var(--text-muted); pointer-events: none; transform: translateY(-50%); }
.search__input { flex: 1 1 auto; min-width: 0; padding-left: 2.75rem; }
.search__input::-webkit-search-cancel-button { filter: grayscale(1); }
.search__count { white-space: nowrap; }
.search__count:empty { display: none; }
.search__nav--up .icon { transform: rotate(180deg); }

.edit-hint { display: flex; flex-wrap: wrap; gap: 0 0.4em; max-width: none; }
.save-state[data-state="ok"] { color: var(--ok); }
.save-state[data-state="error"] { color: var(--error); }
.save-state[data-state="saving"], .save-state[data-state="dirty"] { color: var(--text-soft); }

.segs { display: grid; margin: 0; padding: 0; list-style: none; }
.seg {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-1);
}
/* Textos muy largos: el navegador solo dibuja lo que se ve */
.segs--long .seg { content-visibility: auto; contain-intrinsic-size: auto 3.5rem; }
.segs--notimes .seg { grid-template-columns: minmax(0, 1fr); }
.segs--notimes .seg__time { display: none; }
.seg__time { padding-top: 0.42em; font-size: var(--fs-small); color: var(--text-muted); }
.seg__main { min-width: 0; }
.seg__who { display: block; margin-top: var(--space-4); font-size: var(--fs-small); font-weight: var(--weight-bold); color: var(--light-turquoise); }
.seg:first-child .seg__who { margin-top: 0; }
.seg__text {
  max-width: var(--measure);
  margin-inline: -0.45rem;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius);
  cursor: text;
  scroll-margin-top: calc(var(--header-h) + 7rem); /* que la barra de búsqueda fija no tape la frase */
  scroll-margin-bottom: var(--space-8);
  transition: background-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .seg__text:hover { background-color: var(--surface-1); } }
.seg__text:focus { background-color: var(--surface-2); outline: 2px solid var(--focus); outline-offset: 1px; }
.seg.is-match .seg__text { background-color: var(--info-bg); }
::highlight(ct-search) { background-color: var(--surface-4); color: var(--text); text-decoration: underline 2px var(--light-cyan); }
::highlight(ct-current) { background-color: var(--light-cyan); color: var(--ocean-950); }


/* Texto cortado por falta de saldo: bloque amable al final de la parte que se ve */
.tools__why { margin-top: calc(-1 * var(--space-4)); }
.lock-top .btn { margin-top: var(--space-2); }
.locked {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  overflow: hidden;
}
.locked__ghost { display: grid; gap: var(--space-2); width: 100%; margin-bottom: var(--space-3); }
.locked__ghost span { display: block; height: 0.75rem; border-radius: var(--radius-pill); background-color: var(--surface-3); }
.locked__ghost span:nth-child(1) { width: 92%; opacity: 0.7; }
.locked__ghost span:nth-child(2) { width: 78%; opacity: 0.45; }
.locked__ghost span:nth-child(3) { width: 56%; opacity: 0.25; }
.locked__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: var(--warn);
  background-color: var(--warn-bg);
  border-radius: 50%;
}
.locked__icon .icon { width: 1.4rem; height: 1.4rem; }
.locked__need { font-weight: var(--weight-semibold); }
.locked__buy { margin-top: var(--space-2); }
@media (max-width: 39.99em) { .locked__buy { width: 100%; } }
.dl-note { margin-bottom: var(--space-4); }

/* Hoja "Descargar" */
.dl-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.dl-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 3.75rem;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  background-color: var(--surface-3);
  border-radius: var(--radius);
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .dl-item:hover { background-color: var(--surface-4); } }
.dl-item:active { transform: scale(0.99); }
.dl-item__text { display: grid; gap: 2px; }
.dl-item__ext { color: var(--text-muted); white-space: nowrap; }

/* Esperando: la ballena de luz respira */
.waiting {
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  padding-block: var(--space-6) var(--space-8);
  text-align: center;
}
.waiting__film { width: min(100%, 36rem); padding: var(--space-6) var(--space-5) 0; }
.waiting__text { align-items: center; max-width: 30rem; }
.waiting__text p { margin-inline: auto; }
.waiting .progress { width: min(100%, 18rem); }

/* ---------- Comprar ---------- */
.notices { margin-bottom: var(--space-5); }
.notices:empty { display: none; }
.buy__grid { display: grid; gap: var(--space-6); }
@media (min-width: 64em) { .buy__grid { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; } }
/* Pagos apagados: no hay caja de pago, así que los paquetes usan todo el ancho (sin columna vacía) y el aviso se separa */
@media (min-width: 64em) { .buy__grid--off { grid-template-columns: minmax(0, 1fr); } }
.buy__off { margin-bottom: var(--space-5); }
.buy__status { max-width: 46rem; }
.buy__soon { color: var(--warn); }
.plans { min-width: 0; }
.plans__period { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.plans__save { display: inline-flex; align-items: center; gap: 0.5em; max-width: none; color: var(--text-soft); }
.packs { display: grid; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
@media (min-width: 40em) { .packs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pack {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  cursor: pointer;
  transition: background-color var(--t-hover) ease, box-shadow var(--t-hover) ease; /* taste-skill-ignore: anillo interior */
}
@media (hover: hover) and (pointer: fine) { .pack:hover { background-color: var(--surface-2); } }
.pack:has(input:checked) { background-color: var(--surface-2); box-shadow: var(--ring-selected); } /* taste-skill-ignore: anillo interior de elegido */
.pack:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.pack__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-weight: var(--weight-semibold); color: var(--text-soft); }
.pack__per-unit { font-weight: var(--weight-regular); color: var(--text-soft); }
.pack__feats { display: grid; gap: var(--space-1); margin: var(--space-1) 0 0; padding: 0; list-style: none; color: var(--text-soft); }
.pack__feats li { display: flex; align-items: flex-start; gap: 0.45em; }
.pack__feats .icon { flex: none; width: 1em; height: 1em; margin-top: 0.2em; color: var(--light-turquoise); }
/* Express: a todo el ancho, compacto (como en el teléfono) */
.pack--wide { grid-column: 1 / -1; }
@media (min-width: 40em) {
  .pack--wide, .packs--extras .pack {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name price" "hours per" "feats feats";
    align-items: baseline;
    gap: var(--space-1) var(--space-4);
  }
  :is(.pack--wide, .packs--extras .pack) .pack__name { grid-area: name; }
  :is(.pack--wide, .packs--extras .pack) .pack__hours { grid-area: hours; }
  :is(.pack--wide, .packs--extras .pack) .pack__price { grid-area: price; justify-self: end; }
  :is(.pack--wide, .packs--extras .pack) .pack__per { grid-area: per; justify-self: end; }
  :is(.pack--wide, .packs--extras .pack) .pack__feats { grid-area: feats; }
  .pack--wide .pack__num { font-size: var(--fs-h3); }
}
.extras { margin-top: var(--space-5); }
@media (min-width: 40em) { .packs--extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pack__hours { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25em 0.6em; }
.pack__num { font-size: var(--fs-h2); line-height: 1; letter-spacing: var(--track-heading); }
.pack__unit { font-weight: var(--weight-semibold); }
.pack__price { font-weight: var(--weight-bold); }
.pack__usdt { display: block; font-size: var(--fs-small); font-weight: var(--weight-regular); }
/* Teléfono: cada paquete es una fila compacta (horas a la izquierda, precio a la derecha) para que
   "¿Cómo pagas?" y el botón Pagar entren en la primera pantalla */
@media (max-width: 39.99em) {
  .pack {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name price" "hours per" "feats feats";
    align-items: baseline;
    gap: var(--space-1) var(--space-4);
    padding: var(--space-3) var(--space-4);
  }
  .pack__name { grid-area: name; }
  .pack__hours { grid-area: hours; }
  .pack__price { grid-area: price; justify-self: end; text-align: right; white-space: nowrap; }
  .pack__usdt { display: none; } /* en el teléfono el precio USDT se ve en el botón Pagar */
  .pack__per { grid-area: per; justify-self: end; text-align: right; }
  .pack__feats { grid-area: feats; }
  .pack__num { font-size: var(--fs-h2); }
}
/* Pagos apagados: los paquetes se ven, pero no se eligen */
.buy__grid--off .pack { cursor: default; }
.buy__grid--off .pack:hover { background-color: var(--surface-1); }
.pay { align-content: start; }
@media (min-width: 64em) { .pay { position: sticky; top: calc(var(--header-h) + var(--space-5)); } }
/* Teléfono y tablet: la caja de pago se "abre" (display: contents) para que su barra con el botón Pagar
   quede pegada abajo de la pantalla mientras se ven los paquetes, y llegue a su lugar al final. */
@media (max-width: 63.99em) {
  .buy__grid { gap: 0; }
  .pay { display: contents; }
  .pay > * { margin-top: var(--space-4); }
  .pay > :first-child { margin-top: var(--space-6); }
  .pay__bar {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    margin-inline: calc(-1 * var(--margin));
    padding: var(--space-3) var(--margin) calc(var(--space-3) + env(safe-area-inset-bottom));
    background-color: var(--bg);
  }
}
.pay__method { min-width: 0; margin: 0; padding: 0; border: 0; }
.pay__bar-note { max-width: none; margin-bottom: var(--space-2); font-weight: var(--weight-semibold); color: var(--text-soft); text-align: center; }
.pay__bar-note[hidden] { display: none; }
@media (min-width: 64em) { .pay__bar-note { display: none; } }
/* USDT apagado para ítems sin precio USDT (mínimo de la red) */
.segmented > label:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.pay__usdt-note { max-width: none; }
.pay__usdt-note[hidden] { display: none; }
/* Qué pasa con esta compra: "Cambiar a Business: empieza hoy…" */
.pay__what { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); background-color: var(--surface-1); border-radius: var(--radius); }
.pay__what:empty { display: none; }
.pay__what p { max-width: none; }
.pay__what-title { font-weight: var(--weight-bold); }
.pay-note { max-width: none; }
.usdt-wrap { margin-top: var(--space-6); }
.usdt-wrap:empty { display: none; }
.usdt { display: grid; gap: var(--space-5); }
.usdt__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.usdt__grid { display: grid; gap: var(--space-5); }
@media (min-width: 48em) { .usdt__grid { grid-template-columns: minmax(0, 1fr) 12rem; align-items: start; } }
.usdt__steps { padding-left: 1.4em; }
.usdt__steps > li::marker { font-weight: var(--weight-bold); color: var(--light-cyan); }
.usdt__address { font-size: var(--fs-body); }
.usdt .input-group { flex-wrap: wrap; align-items: center; }
.usdt .input-group > .code-box { flex: 1 1 14rem; }
.qr { justify-self: center; width: 12rem; max-width: 100%; padding: var(--space-2); background-color: var(--ink); border-radius: var(--radius); }
.qr svg { display: block; width: 100%; height: auto; }
.usdt__status { display: flex; align-items: center; gap: var(--space-2); max-width: none; font-weight: var(--weight-semibold); }
.usdt__status[data-kind="warn"] { color: var(--warn); }
.usdt__status[data-kind="error"] { color: var(--error); }
.history { margin-top: var(--space-8); }
.history:empty { display: none; }

/* ---------- Cuenta ---------- */
.account__email { overflow-wrap: anywhere; }
.account__grid { display: grid; gap: var(--space-4); }
@media (min-width: 64em) { .account__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
/* Tu plan */
.plan-card__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.plan-card__plan { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-h2); line-height: 1; letter-spacing: var(--track-heading); }
.plan-card__data { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-5); margin: 0; }
.plan-card__data dt { color: var(--text-muted); }
.plan-card__data dd { margin: 0; font-weight: var(--weight-semibold); }
.account__id { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); max-width: none; }
.account__id code { font-size: var(--fs-small); overflow-wrap: anywhere; color: var(--text-soft); }

/* ---------- Admin ---------- */
.admin > * + * { margin-top: var(--space-6); }
.stats { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.stat { display: grid; gap: var(--space-1); align-content: start; }
.stat__value { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-h2); line-height: 1.05; }
.table .stack { align-items: flex-start; }
.stat--warn .stat__value { color: var(--warn); }
.stat--money .stat__value { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); white-space: nowrap; }
.stat--error .stat__value, .stat--error .stat__sub { color: var(--error); }
.table td .nowrap, .table td.nowrap { white-space: nowrap; }

/* Libro de Reclamaciones (admin) */
.claims__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
/* Teléfono: los 3 filtros entran a lo ancho (sin que "Todos" quede cortado) */
@media (max-width: 29.99em) {
  .claims__head .segmented { display: flex; width: 100%; }
  .claims__head .segmented > button { flex: 1 1 auto; padding-inline: 0.5rem; }
}
.claims__cards { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48em) { .claims__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.claim { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); height: 100%; }
.claim__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.claim__code { font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--text-soft); }
.claim__who { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.claim__due { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.claim__data { display: grid; grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; }
.claim__data dt { font-size: var(--fs-small); color: var(--text-muted); }
.claim__data dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 29.99em) {
  .claim__data { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .claim__data dd { margin-bottom: var(--space-3); }
}
.claim__long { white-space: pre-wrap; }
.claim__answer { margin-top: var(--space-6); }
.claim__reply { max-width: none; padding: var(--space-3) var(--space-4); background-color: var(--surface-3); border-radius: var(--radius); overflow-wrap: anywhere; }

.grant__fields { display: grid; gap: var(--space-4); }
@media (min-width: 48em) { .grant__fields { grid-template-columns: 2fr 1fr 2fr; align-items: start; } }
@media (min-width: 48em) { .grant__fields--plan { grid-template-columns: 2fr 2fr; } }

/* ---------- Pie: Términos · Privacidad · Libro de Reclamaciones (siempre a mano, también al comprar) ---------- */
.appfoot { padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); }
.appfoot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); padding-top: var(--space-4); }
.appfoot a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: var(--tap);
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .appfoot a:hover { color: var(--text); text-decoration: underline; } }
.appfoot a.appfoot__book { color: var(--text-soft); font-weight: var(--weight-semibold); }
.appfoot__icon { flex: none; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- Avisos ---------- */
.toast__action { display: inline-block; margin-top: var(--space-1); font-weight: var(--weight-semibold); text-decoration: underline; }

/* El título recibe el foco al cambiar de pantalla (para lectores de pantalla): sin anillo visible */
[data-focus]:focus, [data-focus]:focus-visible { outline: none; }

/* Sobre una tarjeta elevada o una ventana (ya en --surface-2), el código sube un tono para que se vea la caja */
.card--raised .code-box, .modal .code-box { background-color: var(--surface-3); }