/* cuenta.css · /entrar y /cuenta/*: el portal del cliente. Mismos tokens y misma marca que la portada.
   Reglas: toda acción tiene forma en reposo (borde, relleno o subrayado) y mide 44 px; el estado va en forma + texto
   (nunca solo color); nada se mueve en reposo; sin scroll horizontal. */

/* lo común con la portada que site.css no carga aquí: marca, imágenes por tema y botón de tema */
.img-claro { display: var(--show-light); }
.img-oscuro { display: var(--show-dark); }
.marca { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--fs-app-marca); font-weight: var(--fw-marca); line-height: 1; letter-spacing: -0.01em; }
.marca img { width: 26px; height: 27px; flex: none; }
[data-theme-toggle] { display: inline-grid; visibility: hidden; }
html[data-tema-vivo] [data-theme-toggle] { visibility: visible; }
.btn-icono .i-sol { display: none; }
:root[data-theme="dark"] .btn-icono .i-luna { display: none; }
:root[data-theme="dark"] .btn-icono .i-sol { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-icono .i-luna { display: none; }
  :root:not([data-theme="light"]) .btn-icono .i-sol { display: block; }
}

body.cuenta { font-size: var(--fs-app-cuerpo); line-height: var(--lh-app); letter-spacing: 0; }
.cuenta .marca { font-size: var(--fs-app-marca); }
.cuenta :focus-visible { outline: var(--foco) solid var(--text); outline-offset: var(--foco-separacion); }

/* sin JavaScript: lo que solo funciona con JS no se ofrece (el <noscript> de cada página dice por qué y da salida) */
html:not([data-js]) [data-requiere-js] { display: none; }

/* ── armazón ── */
.app { min-height: 100svh; }
.lateral { display: none; }
.barra {
  position: sticky; top: 0; z-index: var(--z-arriba); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 56px; padding: 0 var(--margen-app); background: var(--bg); border-bottom: 1px solid var(--line);
}
.pestanas {
  position: fixed; inset: auto 0 0; z-index: var(--z-arriba); display: flex; background: var(--bg); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pestanas { background: var(--surface); }
.pestanas a {
  position: relative; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: var(--h-pestanas);
  padding: 0 4px; border-inline-start: 1px solid var(--line); font-size: var(--fs-app-ui); line-height: 1.25; color: var(--text); text-align: center;
}
.pestanas a:first-child { border-inline-start: 0; }
.pestanas a[aria-current] { background: var(--bg); font-weight: var(--fw-fuerte); box-shadow: inset 0 3px 0 var(--accent); }

.cuerpo { width: 100%; max-width: var(--ancho-lectura); padding: var(--s-5) var(--margen-app) calc(var(--h-pestanas) + var(--s-6) + env(safe-area-inset-bottom, 0px)); }
.cuerpo--entrada { max-width: none; padding: 0; }

@media (min-width: 900px) {
  .app__col { margin-left: var(--ancho-lateral); }
  .barra, .pestanas { display: none; }
  .lateral {
    display: flex; flex-direction: column; gap: var(--s-5); position: fixed; inset: 0 auto 0 0; width: var(--ancho-lateral); padding: var(--s-5) var(--s-3) var(--s-4);
    border-right: 1px solid var(--line); overflow-y: auto; background: var(--bg);
  }
  .cuerpo { padding: var(--s-6) var(--margen-app-escritorio) var(--s-8); }
}
.lateral__marca { padding-inline: var(--s-3); }
.lateral__cuenta { display: grid; gap: var(--s-2); }
.lateral__grupo { padding-inline: var(--s-3); font-size: var(--fs-app-nota); color: var(--muted); }
.cuenta-subnav { display: flex; gap: var(--s-1); overflow-x: auto; padding: var(--s-1) 0; margin-top: var(--s-4); }
.cuenta-subnav a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--h-toque); flex: 0 0 auto; padding: 0 var(--s-3); border-radius: var(--r-campo); font-size: var(--fs-app-ui); color: var(--muted); }
.cuenta-subnav a[aria-current] { background: var(--control); color: var(--text); font-weight: var(--fw-fuerte); }
@media (min-width: 900px) { .cuenta-subnav { display: none; } }
.lateral__nav { display: flex; flex-direction: column; gap: var(--s-1); }
.lateral__nav a {
  display: flex; align-items: center; min-height: var(--h-toque); padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-campo);
  background: var(--surface); font-size: var(--fs-app-ui); color: var(--text);
}
.lateral__nav a[aria-current] { background: var(--control); font-weight: var(--fw-fuerte); box-shadow: inset 3px 0 0 var(--accent); }
@media (hover: hover) { .lateral__nav a:hover, .lateral__pie a:hover { color: var(--text); background: var(--control); } }
.lateral__pie { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-1); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.lateral__pie a, .lateral__pie button {
  display: flex; align-items: center; min-height: var(--h-toque); padding: 0 var(--s-3); border-radius: var(--r-campo);
  font-size: var(--fs-app-ui); color: var(--text); text-align: left; width: 100%; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.lateral__correo { padding: var(--s-1) var(--s-3); font-size: var(--fs-app-nota); line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; min-height: 2.8em; }

/* ── títulos ── */
.titulo { font-size: var(--fs-app-titulo); line-height: var(--lh-app-titulo); letter-spacing: var(--tr-app-titulo); font-weight: var(--fw-fuerte); overflow-wrap: anywhere; }
.desc { margin-top: var(--s-1); font-size: var(--fs-app-ui); line-height: var(--lh-app); color: var(--muted); }
.volver { display: inline-flex; align-items: center; min-height: var(--h-toque); margin-bottom: var(--s-2); font-size: var(--fs-app-ui); color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.zona { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-5); }
.zona > * { min-width: 0; }
.subtitulo { font-size: var(--fs-app-nota); line-height: 1.4; color: var(--muted); margin-bottom: var(--s-2); }
.nota-app { font-size: var(--fs-app-nota); line-height: 1.5; color: var(--muted); }
.prueba-runtime { margin-bottom: var(--s-4); }
.texto { font-size: var(--fs-app-ui); line-height: var(--lh-app); overflow-wrap: anywhere; }
.texto--cuerpo { font-size: var(--fs-app-cuerpo); }
.mono-id { font-family: var(--font-mono); font-size: var(--fs-app-ui); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

@media (prefers-reduced-motion: no-preference) {
  .entra-app { animation: hc-aparece var(--t-estado) var(--ease-ui) both; }
}
@keyframes hc-aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── estados: forma + texto ── */
.glifo {
  display: inline-block; flex: none; width: var(--glifo); height: var(--glifo); box-sizing: border-box;
  border: 2px solid currentColor; vertical-align: baseline; position: relative; top: 0;
}
.glifo--ok { color: var(--ok); background: var(--ok); }
.glifo--advertencia { color: var(--warn); background: var(--warn); }
.glifo--falla { color: var(--err); background: var(--err); }
.glifo--falla::after { content: ""; position: absolute; left: 50%; top: 1px; bottom: 1px; width: 2px; margin-left: -1px; background: var(--bg); }
.glifo--pausa { color: var(--muted); background: linear-gradient(90deg, transparent 20%, currentColor 20% 40%, transparent 40% 60%, currentColor 60% 80%, transparent 80%); }
.glifo--idle { color: var(--idle); }
.glifo--info { color: var(--text); }
.estado { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-fuerte); }
.estado--ambar { color: var(--warn); }
.estado--carmin { color: var(--err); }

.aviso {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-4);
  border: var(--b-1) solid var(--line); border-radius: var(--r-lista); background: var(--surface);
}
.aviso .glifo { margin-top: 6px; }
.aviso__texto { font-size: var(--fs-app-cuerpo); line-height: var(--lh-app); overflow-wrap: anywhere; }
.aviso__acciones { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.aviso--ambar { border-width: var(--b-2); border-color: var(--warn); }
.aviso--carmin { border-width: var(--b-3); border-color: var(--err); }

/* cargando: bloques quietos y texto; sin brillo ni ruedita */
.cargando { display: flex; flex-direction: column; gap: var(--s-3); }
.cargando__texto { font-size: var(--fs-app-ui); color: var(--muted); }
.cargando__bloque { height: 56px; border-radius: var(--r-lista); background: var(--surface); border: 1px solid var(--line); }
.cargando__bloque--alto { height: 144px; }

.franja { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); border: var(--b-3) solid var(--err); border-left-width: var(--b-3); border-radius: var(--r-lista); background: var(--surface); }
.franja--ok { border-color: var(--ok); border-width: var(--b-2); }
.franja--neutra { border-color: var(--line); border-width: var(--b-1); }
.franja p { font-size: var(--fs-app-cuerpo); line-height: var(--lh-app); overflow-wrap: anywhere; }

/* ── botones de cuenta ── */
.acciones { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.cuenta .btn { min-height: var(--h-toque); height: auto; padding: var(--s-2) var(--s-4); border-radius: var(--r-campo); font-size: var(--fs-app-ui); font-weight: var(--fw-medio); line-height: 1.25; white-space: normal; text-align: center; gap: var(--s-2); }
.cuenta .btn-icono { border-radius: var(--r-campo); }
.cuenta .btn--tinta, .cuenta .btn--contorno { transition: background-color var(--t-toque) var(--ease-ui); }
.cuenta .btn[aria-disabled="true"], .cuenta .btn:disabled { color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); background: transparent; cursor: not-allowed; }
.btn__marca { width: 18px; height: 18px; flex: none; }
.btn--google {
  background: var(--google-fondo); color: var(--google-texto); box-shadow: inset 0 0 0 1px var(--google-borde);
  font-family: "Roboto Google", Roboto, Arial, sans-serif; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.25px;
}
@media (hover: hover) { .btn--google:hover { background: var(--google-hover); } }
.btn--ancho { width: 100%; }
.cuenta .btn--copiar { min-height: var(--h-toque); padding-inline: var(--s-3); }

/* ── lista agrupada ── */
.lista { border: 1px solid var(--line); border-radius: var(--r-lista); background: var(--surface); }
.lista__fila { display: flex; gap: var(--s-1) var(--s-4); align-items: baseline; padding: var(--s-3) var(--s-4); min-height: var(--h-fila); border-top: 1px solid var(--line); }
.lista__fila:first-child { border-top: 0; }
.lista__k { flex: 0 0 7.5rem; font-size: var(--fs-app-ui); color: var(--muted); }
.lista__v { flex: 1 1 0; min-width: 0; text-align: left; font-size: var(--fs-app-ui); overflow-wrap: anywhere; }
.lista__v--grande { font-size: var(--fs-app-cifra); line-height: var(--lh-app-cifra); font-weight: var(--fw-fuerte); letter-spacing: -0.02em; }
.lista__fila--bloque { display: block; }
@media (max-width: 559.98px) {
  .lista__fila--correo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-4); align-items: center; }
  .lista__fila--correo .lista__k { grid-column: 1; }
  .lista__fila--correo .lista__v { grid-column: 1; grid-row: 2; }
  .lista__fila--correo .btn--copiar { grid-column: 2; grid-row: 1 / span 2; }
}

/* ── Mis PC, Pagos, Solicitudes: filas con contenido propio ── */
.items { border: 1px solid var(--line); border-radius: var(--r-lista); background: var(--surface); }
.item { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; }
.item__titulo { font-size: var(--fs-app-cuerpo); line-height: 1.35; font-weight: var(--fw-fuerte); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item__titulo--libre { display: block; -webkit-line-clamp: unset; overflow: visible; }
.item__linea { font-size: var(--fs-app-ui); line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.item__linea strong { color: var(--text); font-weight: var(--fw-medio); }
.item__codigo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--fs-app-ui); color: var(--muted); }
.item__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-1); }
.item__motivo { flex: 1 1 12rem; font-size: var(--fs-app-ui); color: var(--muted); }
.item--atenuado .item__titulo { color: var(--muted); font-weight: var(--fw-medio); }
.item__nota { font-size: var(--fs-app-ui); line-height: 1.5; color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; }
.item__nota--corta { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Mis PC: datos a la izquierda y la acción a la derecha desde 560 px; buscador y «Ver las otras» cuando hay muchas */
.bloque-pcs { display: flex; flex-direction: column; gap: var(--s-3); }
.bloque-pcs > .subtitulo { margin-bottom: 0; }
.campo--buscar { max-width: 22rem; }
.items--pc[hidden] { display: none; }
.items__pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.items__pie:empty { display: none; }
.item__datos { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.item--pc .item__acciones { margin-top: var(--s-1); }
@media (min-width: 560px) {
  .item--pc { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
  .item--pc .item__datos { flex: 1 1 0; }
  .item--pc .item__acciones { flex: none; margin-top: 0; }
}
.item__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-4); }

/* ── formularios ── */
.campo { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; border: 0; padding: 0; margin: 0; }
legend { padding: 0; }
.campo__rotulo { font-size: var(--fs-app-ui); font-weight: var(--fw-medio); }
.campo__ayuda { font-size: var(--fs-app-nota); color: var(--muted); line-height: 1.45; }
.campo__error { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-app-ui); color: var(--err); line-height: 1.4; }
.campo__error .glifo { margin-top: 4px; }
.entrada {
  width: 100%; min-height: var(--h-toque); padding: var(--s-2) var(--s-3); border: 1px solid var(--muted); border-radius: var(--r-campo);
  background: var(--field); color: var(--text); font-size: var(--fs-app-cuerpo); line-height: 1.4;
}
textarea.entrada { min-height: 96px; resize: vertical; }
.entrada[aria-invalid="true"] { border-color: var(--err); border-width: var(--b-2); }
.fila-campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@media (min-width: 560px) { .fila-campos--2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.campo > legend { margin-bottom: var(--s-3); }
.opciones { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcion span {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--h-toque); padding: 0 var(--s-4); border: 1px solid var(--muted);
  border-radius: var(--r-campo); font-size: var(--fs-app-ui); font-weight: var(--fw-medio); background: transparent;
}
.opcion input:checked + span { background: var(--btn-ink-bg); color: var(--btn-ink-fg); border-color: var(--btn-ink-bg); }
.opcion input:focus-visible + span { outline: var(--foco) solid var(--text); outline-offset: var(--foco-separacion); }
.ajuste-tema { display: grid; gap: var(--s-3); }
.contador { text-align: right; font-size: var(--fs-app-nota); color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── medios de pago, soporte, pasos ── */
.metodo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); padding: var(--s-4); border-top: 1px solid var(--line); }
.metodo:first-child { border-top: 0; }
.metodo__marca { width: 36px; height: 36px; flex: none; }
.metodo__texto { flex: 1 1 10rem; min-width: 0; }
.metodo__nombre { font-size: var(--fs-app-cuerpo); font-weight: var(--fw-fuerte); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: baseline; }
.metodo__etq { font-size: var(--fs-app-nota); font-weight: var(--fw-normal); color: var(--muted); }
.soporte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.soporte__numero { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-app-ui); }
.pasos-app { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lista); background: var(--surface); counter-reset: paso; }
.pasos-app li { counter-increment: paso; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4); border-top: 1px solid var(--line); font-size: var(--fs-app-ui); line-height: 1.5; }
.pasos-app li:first-child { border-top: 0; }
.pasos-app li::before { content: counter(paso); display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--text); font-size: var(--fs-app-ui); font-weight: var(--fw-medio); font-variant-numeric: tabular-nums; }

/* ── hoja de confirmación ── */
dialog.hoja {
  border: 0; padding: 0; background: var(--bg); color: var(--text); border-radius: var(--r-hoja);
  width: calc(100% - 2 * var(--margen-app)); max-width: var(--ancho-dialogo); max-height: 90svh; overflow-y: auto; margin: auto;
}
dialog.hoja::backdrop { background: var(--scrim); }
dialog.hoja[open] { animation: hc-hoja var(--t-hoja) var(--ease-ui) both; }
@keyframes hc-hoja { from { opacity: 0; transform: translateY(var(--desplaza-hoja)); } to { opacity: 1; transform: none; } }
.hoja__in { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); }
.hoja__titulo { font-size: var(--fs-app-titulo); line-height: var(--lh-app-titulo); font-weight: var(--fw-fuerte); overflow-wrap: anywhere; }
.hoja__acciones { display: flex; flex-direction: column-reverse; gap: var(--s-2); margin-top: var(--s-2); }
@media (min-width: 560px) { .hoja__acciones { flex-direction: row; justify-content: flex-end; } }
@media (max-width: 699.98px) {
  dialog.hoja { margin: auto 0 0; width: 100%; max-width: none; border-radius: var(--r-hoja) var(--r-hoja) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ── entrar ── */
.entrar { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100svh; align-content: start; }
.entrar__cab { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); }
.entrar__in { display: grid; gap: var(--s-4); align-items: center; padding-block: var(--s-5) var(--s-6); }
.entrar__texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); max-width: var(--ancho-entrada); }
.entrar__titulo { font-size: clamp(32px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.045em; font-weight: var(--fw-medio); }
.entrar__texto .btn { align-self: stretch; }
.entrar .universo { max-width: min(520px, 60svh); }
@media (min-width: 900px) {
  .entrar__in { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: var(--s-7); min-height: calc(100svh - 2 * var(--nav-h)); padding-block: 0; }
}
.entrar__mensaje { width: 100%; }
.pagina-estado { max-width: var(--ancho-entrada); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); padding-block: var(--s-6); }

/* sin licencia dentro de la cuenta */
.sin-licencia { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); max-width: var(--ancho-entrada); }