/* Kirava · guías, producto sellado, cuentas, vaults y páginas de texto */

@layer components {

/* --- Botones y formularios --------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: .9rem; font-weight: 600;
  transition: filter var(--dur-fast), transform var(--dur-fast), border-color var(--dur-fast);
}
/* La acción principal lleva los cuatro colores del logotipo.
   ------------------------------------------------------------------------
   EL TEXTO VA OSCURO, NO BLANCO, y no es una preferencia: sobre el amarillo
   del logotipo (#f8e183) el blanco da 1,3 de contraste — el texto desaparece,
   literalmente. Sobre el verde, 1,7. Con el tinte oscuro de la interfaz los
   cuatro tramos pasan de 5 a 1, así que la palabra se lee igual de bien esté
   donde esté dentro del botón.

   El degradado se hereda de `--brand-gradient`, en tokens.css, para que el día
   que cambie el logotipo cambie aquí y en cualquier otro sitio a la vez. */
.btn-primary {
  background: var(--brand-gradient);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
/* `brightness` sobre un degradado lava los cuatro colores a la vez y lo deja
   descolorido. Saturar un poco los aviva sin tocar el contraste del texto. */
.btn-primary:hover { filter: saturate(1.18); }
.btn-primary:active { transform: translateY(1px); }
.btn-quiet { border-color: var(--line); color: var(--ink-2); background: var(--surface); }
.btn-quiet:hover { border-color: var(--ink-3); color: var(--ink); }
.btn-add { background: var(--accent); color: #fff; padding-inline: var(--sp-4); }
.btn-danger { border-color: #d9534f; color: #b8322e; background: transparent; }
.btn-danger:hover { background: #fdecec; }

.field { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.field > span, .field legend {
  font-size: .78rem; font-weight: 600; color: var(--ink-2);
}
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="file"], .field textarea, .field select {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  font-size: .95rem;
}
.field input:focus, .field textarea:focus {
  outline: 0; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-wash);
}
.field small { font-size: .76rem; color: var(--ink-3); }
.field-inline { margin: 0; flex: 1; }

.radio { display: flex; gap: var(--sp-2); align-items: start; padding: var(--sp-2) 0; font-size: .86rem; }
.radio input { margin-top: .25em; accent-color: var(--secondary); }
.radio strong { color: var(--ink); }
.radio span { color: var(--ink-2); }

fieldset.field { border: 0; padding: 0; margin-block: var(--sp-3); }

.form-error {
  padding: var(--sp-3);
  border-radius: 9px;
  background: #fdecec;
  color: #a5312d;
  font-size: .88rem;
  margin-bottom: var(--sp-4);
}
.inline-form { display: inline-flex; gap: var(--sp-2); align-items: center; }

/* --- Entrar y registro -------------------------------------------------- */

.auth-wrap { display: grid; place-items: center; padding-block: var(--sp-6); }
.auth-card {
  width: min(100%, 400px);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  box-shadow: var(--shadow-2);
}
.auth-card h1 { font-size: 1.5rem; letter-spacing: -.02em; margin-bottom: var(--sp-5); }
.auth-card .btn { width: 100%; }
.auth-alt { margin-top: var(--sp-4); font-size: .85rem; color: var(--ink-2); text-align: center; }
.auth-alt a { color: var(--primary-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* --- Pestañas de idioma de carta / tipo -------------------------------- */

.lang-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.lang-tab {
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .82rem;
  color: var(--ink-2);
  background: var(--surface);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.lang-tab:hover { border-color: var(--ink-3); color: var(--ink); }
.lang-tab.is-on { border-color: var(--primary); background: var(--primary-wash); color: var(--primary-ink); font-weight: 650; }
.tab-n { font-family: var(--font-num); font-size: .7em; opacity: .65; }

/* --- Producto sellado --------------------------------------------------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.product-card {
  display: grid; gap: var(--sp-1); align-content: start;
  padding: var(--sp-4);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }

/* Cada tipo de producto con su color: en una rejilla mixta se distinguen de
   un vistazo sin tener que leer la etiqueta. */
.pc-kind, .sp-kind, .sc-kind {
  justify-self: start;
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  padding: 2px 7px; border-radius: 5px;
  background: var(--surface-3); color: var(--ink-2);
}
[data-kind="booster_box"] { background: var(--secondary-wash); color: var(--secondary-ink); }
[data-kind="etb"]         { background: var(--primary-wash);   color: var(--primary-ink); }
[data-kind="deck"]        { background: var(--accent-wash);    color: var(--accent-ink); }
[data-kind="tin"]         { background: #ede7f6; color: #5b3f8c; }
[data-kind="blister"]     { background: #fdeef4; color: #a53b6b; }

.pc-name { font-size: 1rem; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
.pc-set  { font-size: .82rem; color: var(--ink-2); }
.pc-meta { display: flex; gap: var(--sp-3); font-size: .76rem; color: var(--ink-3); font-family: var(--font-num); }

/* Banda de sellado dentro de los resultados de búsqueda: aparte de la rejilla
   de cartas, porque son objetos distintos y mezclarlos confunde. */
.sealed-strip { margin-bottom: var(--sp-5); }
.strip-h {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3);
  display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3);
}
.strip-h .count {
  font-family: var(--font-num); font-size: .7rem; letter-spacing: 0;
  padding: 0 6px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2);
}
.sealed-list { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.sealed-chip {
  display: grid; gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
  min-width: 190px;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.sealed-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.sc-title { font-size: .9rem; font-weight: 600; line-height: 1.25; }
.sc-sub { font-size: .74rem; color: var(--ink-3); font-family: var(--font-num); }

.set-products { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line-soft); }
.set-products ul { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.set-products a { display: grid; gap: 2px; }
.sp-name { font-size: .85rem; font-weight: 500; }
.sp-sub { font-size: .72rem; color: var(--ink-3); font-family: var(--font-num); }

/* --- Guías -------------------------------------------------------------- */

.page-head-wide { max-width: 62ch; }

.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}
.guide-card {
  padding: var(--sp-5);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.guide-card.is-lead { grid-column: 1 / -1; background: linear-gradient(150deg, var(--primary-wash), var(--surface) 60%); }
.guide-card h2 { font-size: 1.15rem; line-height: 1.25; letter-spacing: -.02em; }
.guide-card.is-lead h2 { font-size: 1.5rem; }
.guide-card p { margin-top: var(--sp-2); color: var(--ink-2); font-size: .9rem; line-height: 1.55; }
.guide-meta { display: flex; gap: var(--sp-3); font-size: .74rem !important; color: var(--ink-3) !important; font-family: var(--font-num); }
.guide-lang { padding: 0 5px; border-radius: 4px; background: var(--surface-3); }

/* --- Texto largo -------------------------------------------------------- */

.prose-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }

@media (min-width: 1000px) {
  .prose-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .prose-side { position: sticky; top: calc(var(--header-h) + var(--sp-4)); align-self: start; }
}

.prose-side { display: grid; gap: var(--sp-3); align-content: start; font-size: .84rem; }
.toc-h { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.toc { display: grid; gap: var(--sp-2); counter-reset: toc; }
.toc a { color: var(--ink-2); line-height: 1.35; display: block; }
.toc a:hover { color: var(--primary-ink); }

/* Medida de línea controlada: por encima de ~70 caracteres el ojo pierde el
   renglón al saltar de línea y leer cansa. */
.prose-main { max-width: 68ch; }
.prose-main h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); letter-spacing: -.035em; line-height: 1.12; }
.prose-lead { font-size: 1.1rem; color: var(--ink-2); margin-top: var(--sp-3); line-height: 1.6; }
.prose-meta { font-size: .78rem; color: var(--ink-3); margin-top: var(--sp-3); font-family: var(--font-num); }

.prose-section { margin-top: var(--sp-6); }
.prose-section h2 {
  font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.25;
  margin-bottom: var(--sp-3);
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}
.prose-section p { margin-bottom: var(--sp-3); line-height: 1.65; color: var(--ink); }
.prose-section p strong { font-weight: 650; }
.prose-section em { font-style: italic; color: var(--ink-2); }

.prose-list { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.prose-list li {
  padding-inline-start: var(--sp-5);
  position: relative;
  line-height: 1.6;
  color: var(--ink-2);
}
.prose-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--sp-2);
  top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--primary);
}
.prose-list li strong { color: var(--ink); }

.table-wrap { overflow-x: auto; margin-bottom: var(--sp-4); }
.prose-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.prose-table th, .prose-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
  text-align: start;
  vertical-align: top;
}
.prose-table th { font-family: var(--font-num); font-weight: 700; white-space: nowrap; }
.prose-table td:last-child { color: var(--ink-2); }

.faq {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
  margin-bottom: var(--sp-2);
}
.faq summary {
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-weight: 600;
  font-size: .95rem;
  list-style: none;
  display: flex; justify-content: space-between; gap: var(--sp-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-3); font-weight: 400; }
.faq[open] summary::after { content: "–"; }
.faq p { padding: 0 var(--sp-4) var(--sp-4); color: var(--ink-2); line-height: 1.6; font-size: .9rem; }

.related { display: grid; gap: var(--sp-3); }
.related a { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface); }
.related a:hover { border-color: var(--primary); }
.related strong { font-size: .95rem; }
.related span { font-size: .84rem; color: var(--ink-2); line-height: 1.5; }

/* --- Vaults ------------------------------------------------------------- */

.vault-new { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-5); max-width: 520px; }
.vault-desc { color: var(--ink-2); font-size: .92rem; }
.vault-owner { font-size: .84rem; color: var(--ink-3); margin-top: var(--sp-2); }
.vault-owner a { color: var(--primary-ink); font-weight: 600; }

.sc-serie[data-vis="public"]   { color: var(--accent-ink); }
.sc-serie[data-vis="unlisted"] { color: var(--secondary-ink); }
.serie[data-vis="public"]      { color: var(--accent-ink); }
.serie[data-vis="unlisted"]    { color: var(--secondary-ink); }

/* El valor total: solo el dueño, y se dice por qué. */
.owner-box {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}
.owner-value { font-size: 1.4rem; font-weight: 700; font-family: var(--font-num); }
.owner-value span { font-size: .78rem; font-weight: 400; color: var(--ink-3); margin-inline-start: var(--sp-2); }
.owner-note { font-size: .74rem; color: var(--ink-3); line-height: 1.45; margin-top: var(--sp-1); }

.vault-settings { margin-top: var(--sp-4); }
.vault-settings summary {
  cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--primary-ink);
  padding: var(--sp-2) 0;
}
.vault-io { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-block: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line-soft); }
.vault-io input[type="file"] { font-size: .78rem; max-width: 190px; }
.danger-form { padding-top: var(--sp-4); border-top: 1px solid var(--line-soft); }

.hit-owned { position: relative; }
.qty-badge {
  position: absolute; top: 5px; right: 5px;
  font-family: var(--font-num); font-size: .7rem; font-weight: 700;
  padding: 1px 6px; border-radius: 6px;
  background: var(--accent); color: #fff;
  box-shadow: var(--shadow-1);
}
.hit-variant { font-size: .68rem; color: var(--ink-3); line-height: 1.3; }
.hit-remove { position: absolute; top: 5px; left: 5px; opacity: 0; transition: opacity var(--dur-fast); }
.hit-owned:hover .hit-remove, .hit-remove:focus-within { opacity: 1; }
.hit-remove button {
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface); color: var(--ink-2);
  font-size: .7rem; box-shadow: var(--shadow-1);
}
.hit-remove button:hover { background: #fdecec; color: #b8322e; }

/* Añadir al vault desde la ficha, sin salir de ella. */
.vault-add { width: 100%; display: grid; gap: var(--sp-2); }
.vault-add-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.vault-add select {
  flex: 1; min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); font-size: .84rem;
}
.vault-add-msg { font-size: .78rem; color: var(--accent-ink); min-height: 1.2em; text-align: center; }
.vault-add-msg[data-error] { color: #b8322e; }

/* --- Móvil -------------------------------------------------------------- */

@media (max-width: 720px) {
  .vault-new { flex-direction: column; }
  .guide-card.is-lead h2 { font-size: 1.25rem; }
  .prose-main h1 { font-size: 1.6rem; }
  .sealed-chip { min-width: 160px; }
}

}

@layer components {

/* Una sesión caducada no es un error del usuario: se avisa sin alarma. */
.form-error-soft {
  background: var(--primary-wash);
  color: var(--primary-ink);
}

}

@layer components {

/* --- Cajas de vault -------------------------------------------------------
   Un vault es una colección con carácter: el de su dueño. Una fila de tarjetas
   grises todas iguales no transmite nada de eso.

   Cada caja lleva dos cosas suyas: un COLOR de acento que elige el dueño, y una
   PORTADA que es una carta del propio vault. La portada va dos veces — una
   ampliada y desenfocada de fondo, otra nítida encima— así que cada caja se tiñe
   sola con los colores de su carta sin que haya que calcular ni guardar ningún
   color.

   Todo por clases y `data-accent`, nunca por atributo `style`: la CSP del sitio
   lo ignora entero, así que un color en línea no llegaría a pintarse nunca. */

.vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-4);
}

.vcard {
  --vc-a:  var(--primary);
  --vc-w:  var(--primary-wash);
  --vc-i:  var(--primary-ink);

  position: relative;
  display: grid;
  grid-template-rows: 120px auto;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  min-width: 0;
}
.vcard:hover,
.vcard:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-2); }

.vcard[data-accent="ocean"] { --vc-a: #4f9fb0; --vc-w: #e6f2f4; --vc-i: #2c626d; }
.vcard[data-accent="ember"] { --vc-a: #e08748; --vc-w: #fdeddd; --vc-i: #a95f18; }
.vcard[data-accent="sage"]  { --vc-a: #9db76b; --vc-w: #eef2e3; --vc-i: #5c7333; }
.vcard[data-accent="plum"]  { --vc-a: #a3799f; --vc-w: #f3ecf2; --vc-i: #6d4569; }
.vcard[data-accent="slate"] { --vc-a: #7d8794; --vc-w: #edeff2; --vc-i: #4b545f; }
.vcard[data-accent="gold"]  { --vc-a: #c8a53f; --vc-w: #f7f0d8; --vc-i: #806619; }

/* La franja de arriba. Si hay portada la pinta la carta; si no, el acento. */
.vc-art {
  position: relative;
  display: block;
  overflow: hidden;
  background: linear-gradient(150deg, var(--vc-w), color-mix(in oklab, var(--vc-a) 22%, var(--surface)));
}

/* El fondo: la misma carta, ampliada y desenfocada. Es lo que le da a cada caja
   un color propio sin guardar ningún color en ninguna parte. */
.vc-blur {
  position: absolute;
  inset: -30%;
  width: 160%;
  height: 160%;
  object-fit: cover;
  filter: blur(22px) saturate(1.5);
  opacity: .85;
}

/* Y la carta de verdad, entera y nítida. `contain` y no `cover`: recortar una
   carta por la mitad es justo lo que un coleccionista no quiere ver. */
.vc-cover {
  position: relative;
  display: block;
  height: 96%;
  width: auto;
  margin: 2% auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 6px 16px -6px rgb(0 0 0 / .45);
}

.vc-empty {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in oklab, var(--vc-a) 26%, transparent), transparent 60%),
    radial-gradient(circle at 75% 80%, color-mix(in oklab, var(--vc-a) 18%, transparent), transparent 55%);
}

.vc-body { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4) var(--sp-4); min-width: 0; }
.vc-top { display: flex; align-items: center; gap: var(--sp-2); }

.vc-vis {
  font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px;
  background: var(--vc-w); color: var(--vc-i);
}
.vc-vis[data-vis="private"] { background: var(--surface-3); color: var(--ink-3); }
.vc-owner { font-size: .72rem; color: var(--ink-3); font-family: var(--font-num); margin-inline-start: auto; }

.vc-name {
  font-size: 1rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vc-desc {
  font-size: .8rem; color: var(--ink-2); line-height: 1.4;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.vc-meta { font-size: .74rem; color: var(--ink-3); font-family: var(--font-num); margin-top: var(--sp-1); }

/* --- Elegir color y portada ---------------------------------------------- */

.accent-pick { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.accent-opt { position: relative; }
.accent-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.accent-opt span {
  display: block; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--line);
  cursor: pointer;
  transition: transform var(--dur-fast), border-color var(--dur-fast);
}
.accent-opt span:hover { transform: scale(1.12); }
.accent-opt input:checked + span { border-color: var(--ink); transform: scale(1.12); }
.accent-opt input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

.accent-opt[data-accent="default"] span { background: var(--primary); }
.accent-opt[data-accent="ocean"]   span { background: #4f9fb0; }
.accent-opt[data-accent="ember"]   span { background: #e08748; }
.accent-opt[data-accent="sage"]    span { background: #9db76b; }
.accent-opt[data-accent="plum"]    span { background: #a3799f; }
.accent-opt[data-accent="slate"]   span { background: #7d8794; }
.accent-opt[data-accent="gold"]    span { background: #c8a53f; }

/* --- Barra de plan -------------------------------------------------------- */

.plan-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface);
  font-size: .82rem;
}
.plan-bar[data-state="full"] { border-color: var(--secondary); background: var(--secondary-wash); }
.plan-bar[data-state="over"] { border-color: var(--secondary); background: var(--secondary-wash); }
.pb-plan {
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: var(--primary-wash); color: var(--primary-ink);
}
.pb-count { font-family: var(--font-num); color: var(--ink-2); }
.pb-note { color: var(--secondary-ink); }
.pb-link { margin-inline-start: auto; color: var(--primary-ink); font-weight: 600; }
.pb-link:hover { text-decoration: underline; }

.plan-blocked {
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  border-radius: 12px;
  background: var(--secondary-wash);
  color: var(--secondary-ink);
  font-size: .88rem;
}
.plan-blocked a { font-weight: 600; text-decoration: underline; }

@media (max-width: 560px) {
  .vault-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
  .vcard { grid-template-rows: 92px auto; }
  .vc-body { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
  .vc-name { font-size: .9rem; }
  .vc-desc { display: none; }
}

}

@layer components {

/* --- Planes ---------------------------------------------------------------
   Tres columnas iguales. Sin destacar ninguna con un «el más popular»: eso es
   una técnica de venta, y aquí el plan bueno para la mayoría es el gratis. */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.plan-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.plan-card.is-current { border-color: var(--primary); background: var(--primary-wash); }

.pc-name { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.pc-price { display: flex; align-items: baseline; gap: 2px; margin-top: var(--sp-2); }
.pc-num { font-family: var(--font-num); font-size: 2.1rem; font-weight: 700; letter-spacing: -.04em; }
.pc-cur { font-size: 1.1rem; color: var(--ink-2); }
.pc-per { font-size: .8rem; color: var(--ink-3); margin-inline-start: 2px; }
.pc-for { font-size: .78rem; color: var(--ink-3); margin-top: var(--sp-1); }

.pc-list { display: grid; gap: var(--sp-2); font-size: .9rem; color: var(--ink-2); }
.pc-list li { display: flex; align-items: baseline; gap: var(--sp-2); }
/* La marca de verificación con ::before y no en el HTML: es decoración, y en un
   lector de pantalla «✓ 5 vaults» seis veces seguidas es ruido. */
.pc-list li::before { content: "✓"; color: var(--accent-ink); font-weight: 700; flex: none; }

.pc-foot { display: flex; }
.pc-foot .btn, .pc-foot form { width: 100%; }
.pc-foot .btn { justify-content: center; }
.pc-badge {
  display: inline-block; width: 100%; text-align: center;
  padding: var(--sp-2) var(--sp-3); border-radius: 999px;
  font-size: .8rem; font-weight: 600;
  background: var(--primary-wash); color: var(--primary-ink);
}
.pc-badge-soft { background: var(--surface-3); color: var(--ink-3); font-weight: 500; }

.plan-notes { max-width: 68ch; display: grid; gap: var(--sp-3); font-size: .9rem; color: var(--ink-2); }
/* La promesa de que no se borra nada va destacada a propósito: es la pregunta
   que se hace todo el que duda en pagar, y enterrarla sería tirarla. */
.plan-promise {
  padding: var(--sp-3) var(--sp-4);
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-wash);
  color: var(--accent-ink);
  border-radius: 0 10px 10px 0;
}
.plan-flash {
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  border-radius: 12px; background: var(--accent-wash); color: var(--accent-ink);
  font-size: .9rem; font-weight: 500;
}

.profile-follow { margin-top: var(--sp-3); }

}

@layer components {

/* --- Perfil ---------------------------------------------------------------
   La banda se compone con las PORTADAS de sus propios vaults. Cada
   coleccionista acaba con un perfil que se parece a lo que colecciona, sin
   subir una imagen, sin elegir nada, y sin nada que moderar. */

.prof {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
  margin-bottom: var(--sp-6);
}

.prof-banner {
  position: relative;
  display: flex;
  height: 150px;
  background: linear-gradient(120deg, var(--primary-wash), var(--secondary-wash), var(--accent-wash));
}
.prof-banner img {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  /* Desenfocadas: son fondo, no contenido. Nítidas competirían con las cajas
     de vault de abajo, que son lo que hay que mirar. */
  filter: blur(14px) saturate(1.6);
  transform: scale(1.15);
}
/* Un velo encima para que el nombre se lea SIEMPRE, salga la carta que salga.
   Sin esto, una portada clara deja el texto invisible. */
.prof-veil {
  position: absolute; inset: 0;
  /* Sólido del todo en el tercio bajo, que es por donde sube el nombre.
     La imagen de fondo la elige el usuario, así que no se puede confiar en que
     tenga contraste: sobre una portada clara, un velo a medias deja el nombre
     invisible. Arriba sigue viéndose la carta, que es para lo que está. */
  background: linear-gradient(to bottom,
    rgb(255 255 255 / .15) 0%, rgb(255 255 255 / .5) 35%, var(--surface) 72%);
}

.prof-main {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-4);
  padding: 0 var(--sp-5) var(--sp-4);
  margin-top: -44px;
}
.prof-main .avatar-xl {
  width: 88px; height: 88px; font-size: 2rem;
  border: 4px solid var(--surface);
  box-shadow: var(--shadow-2);
}
.prof-id { min-width: 0; padding-bottom: var(--sp-1); }
.prof-id h1 { font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.15; }
 /* --ink-2 y no --ink-3: el nombre cae SOBRE la banda, y sobre una portada
    clara el gris flojo desaparecía. El velo ayuda, pero no se puede confiar en
    él para el contraste cuando la imagen de fondo la elige el usuario. */
.prof-handle { font-family: var(--font-num); font-size: .85rem; color: var(--ink-2); }
.prof-bio { font-size: .9rem; color: var(--ink-2); margin-top: var(--sp-2); max-width: 60ch; }
.prof-action { padding-bottom: var(--sp-1); }

.prof-stats {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
}
/* Etiqueta pequeña arriba y cifra grande debajo: se lee el número de un
   vistazo y la palabra solo si hace falta. */
.prof-stats div { display: grid; gap: 1px; }
.prof-stats dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.prof-stats dd { font-family: var(--font-num); font-size: 1.15rem; font-weight: 650; }
.prof-country { text-transform: uppercase; }

/* --- Directorio de coleccionistas ----------------------------------------- */

.people-search { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); max-width: 460px; }
.people-search .field { flex: 1; }

.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.pcard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.pc-id { min-width: 0; align-self: center; }
.pc-name { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-handle { display: block; font-family: var(--font-num); font-size: .74rem; color: var(--ink-3); }
.pc-bio {
  grid-column: 1 / -1; font-size: .82rem; color: var(--ink-2); line-height: 1.4;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pc-stats {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  font-size: .74rem; color: var(--ink-3);
  padding-top: var(--sp-2); border-top: 1px solid var(--line-soft);
}
.pc-stats strong { color: var(--ink); font-family: var(--font-num); }

/* --- El vault como archivador ---------------------------------------------
   Es la MISMA hoja de nueve fundas que un set, así que hereda el zoom, el
   giro, el holográfico y la inclinación sin duplicar nada. Aquí solo va lo
   que un set no tiene: cantidad, variante y quitar. */

/* El color del vault tiñe su archivador: al abrirlo se reconoce sin leer. */
.binder[data-accent="ocean"] { --binder-tint: #4f9fb0; }
.binder[data-accent="ember"] { --binder-tint: #e08748; }
.binder[data-accent="sage"]  { --binder-tint: #9db76b; }
.binder[data-accent="plum"]  { --binder-tint: #a3799f; }
.binder[data-accent="slate"] { --binder-tint: #7d8794; }
.binder[data-accent="gold"]  { --binder-tint: #c8a53f; }
.binder[data-accent] { border-color: color-mix(in oklab, var(--binder-tint, var(--primary)) 35%, var(--line-soft)); }

.slot-vault { position: relative; }
.slot-vault .slot-link { display: block; position: relative; border-radius: 8px; }

/* Cantidad y variante van SOBRE la funda, como las pegatinas de una carpeta. */
.qty-badge, .slot-tag {
  position: absolute;
  font-size: .62rem; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 80%, transparent);
  color: var(--surface);
  pointer-events: none;
}
.qty-badge { top: 6px; right: 6px; font-family: var(--font-num); }
.slot-tag {
  left: 6px; bottom: 6px; max-width: calc(100% - 12px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: color-mix(in oklab, var(--secondary-ink) 88%, transparent);
}

/* Quitar aparece al pasar por encima: es destructivo y no tiene por qué estar
   compitiendo por la atención mientras miras tu colección. */
.slot-remove { position: absolute; top: 4px; left: 4px; opacity: 0; transition: opacity var(--dur-fast); }
.slot-vault:hover .slot-remove,
.slot-remove:focus-within { opacity: 1; }
.slot-remove button {
  width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in oklab, var(--ink) 75%, transparent);
  color: var(--surface); font-size: .7rem; line-height: 1;
}
.slot-remove button:hover { background: #b8322e; }

@media (max-width: 700px) {
  .prof-main { grid-template-columns: auto minmax(0, 1fr); }
  .prof-action { grid-column: 1 / -1; }
  .prof-stats { gap: var(--sp-4); }
  /* En movil no hay «pasar por encima»: el boton tiene que estar visible. */
  .slot-remove { opacity: 1; }
}

}

@layer components {

/* --- Vitrina del perfil ---------------------------------------------------
   Las cartas de verdad, no miniaturas de lista: llevan su holográfico y abren
   la misma ficha ampliada que en el resto del sitio. Es lo primero que se ve
   porque es lo que la gente entra a ver. Un número es más aburrido que un
   Charizard, y aquí hay Charizards. */

.sc-title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3);
  margin-bottom: var(--sp-3);
}
.sc-count {
  font-family: var(--font-num); font-size: .7rem; letter-spacing: 0;
  padding: 0 6px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2);
}

.showcase { margin-bottom: var(--sp-6); }

/* En fila y con scroll horizontal propio: una vitrina se recorre de lado, como
   se pasa una carpeta. Y el scroll se queda DENTRO, nunca mueve la página. */
.sc-strip {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: var(--sp-2) var(--sp-1) var(--sp-4);
  scrollbar-width: thin;
}
.sc-item {
  flex: none;
  width: 132px;
  scroll-snap-align: start;
  display: grid;
  gap: 2px;
}
.sc-item .card {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: var(--card-ratio);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--aura, 0 0 rgb(0 0 0 / 0)), var(--shadow-2);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.sc-item:hover .card,
.sc-item:focus-visible .card { transform: translateY(-6px) scale(1.03); box-shadow: var(--aura, 0 0 rgb(0 0 0 / 0)), var(--shadow-3); }
.sc-item .card-face { width: 100%; height: 100%; object-fit: cover; }
.sc-name {
  font-size: .78rem; font-weight: 600; margin-top: var(--sp-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-rar {
  font-size: .66rem; color: var(--secondary-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- De qué va la colección ----------------------------------------------- */

.collx { margin-bottom: var(--sp-6); }
.collx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.cx-box {
  padding: var(--sp-4);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  min-width: 0;
}
.cx-wide { grid-column: span 2; }
.cx-box h3 {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); margin-bottom: var(--sp-3);
}

.cx-bars { display: grid; gap: var(--sp-2); }
.cx-bars li {
  display: grid; grid-template-columns: 5.6em minmax(0, 1fr) 2.4em;
  align-items: center; gap: var(--sp-2);
  font-size: .8rem;
}
.cx-k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.cx-track { display: block; }
.cx-n { font-family: var(--font-num); font-size: .74rem; color: var(--ink-3); text-align: end; }

.cx-list { display: grid; gap: var(--sp-2); font-size: .82rem; }
.cx-list li {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-soft);
}
.cx-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.cx-list li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cx-axis {
  display: flex; justify-content: space-between;
  margin-top: var(--sp-2);
  font-family: var(--font-num); font-size: .68rem; color: var(--ink-3);
}

/* Las columnas del perfil son más discretas que las del panel: aquí acompañan,
   no son el contenido. */
.cx-box .ch { border: 0; background: transparent; height: 90px; }

/* --- Ajustes del bloque de identidad -------------------------------------- */

.prof-youare { font-size: .72rem; color: var(--ink-3); margin-top: var(--sp-2); text-align: end; }

/* Seguidores y siguiendo son enlaces: un contador que no se puede pulsar es un
   adorno, y esa lista es la mejor forma de encontrar gente parecida. */
.prof-stats dd a { color: inherit; border-bottom: 1px solid var(--line); }
.prof-stats dd a:hover { color: var(--primary-ink); border-color: currentColor; }

.prof-vaults { margin-bottom: var(--sp-6); }

@media (max-width: 700px) {
  .cx-wide { grid-column: span 1; }
  .sc-item { width: 108px; }
  .prof-youare { text-align: start; }
}

}

@layer components {

/* Las gráficas van en SVG, y no es por gusto.
   ------------------------------------------------------------------------
   Aquí había barras de div con la altura en `style="--h: 40%"`. Bajo la CSP
   del panel (`style-src 'self'`, sin unsafe-inline) el navegador ignora el
   atributo `style` ENTERO, así que en producción todas las barras salían
   planas. En local se veían bien solo porque el servidor de desarrollo no
   manda la cabecera — el peor tipo de fallo, el que solo aparece donde no
   estás mirando.

   En SVG la geometría va en atributos (`x`, `y`, `width`, `points`, `d`), que
   la CSP no toca, y el color viene de aquí por clase. Ver src/Chart.php. */
.ch {
  /* `height: auto` y no una altura fija: el lienzo tiene proporción propia
     desde que lleva ejes, y forzarle una altura volvería a deformar el texto,
     que es justo lo que impedía ponerlo. */
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line-soft); border-radius: 12px;
  background: var(--surface);
  overflow: visible;
}
.ch-cols { height: 110px; }

.ch-grid { stroke: var(--line-soft); stroke-width: 1; }

.ch-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-line.ch-views    { stroke: var(--primary); }
.ch-line.ch-visitors { stroke: var(--secondary); }
.ch-line.ch-sessions { stroke: var(--accent); }

/* El relleno por defecto de un <path> en SVG es NEGRO, no «nada». Si el área
   se pinta bajo una serie sin regla propia, sale un pegote negro tapando media
   gráfica. Por eso hay un color base y luego los específicos: el área va bajo
   la PRIMERA serie, y cada página ordena las suyas como le conviene. */
.ch-area { stroke: none; fill: var(--primary-wash); }
.ch-area.ch-views    { fill: var(--primary-wash); }
.ch-area.ch-visitors { fill: var(--secondary-wash); }
.ch-area.ch-sessions { fill: var(--accent-wash); }

.ch-dot.ch-views { fill: var(--primary); }

/* Zonas transparentes que solo existen para que el navegador enseñe el <title>
   al pasar por encima. Un tooltip sin una línea de JavaScript. */
.ch-hit { fill: transparent; }
.ch-hit:hover { fill: color-mix(in oklab, var(--primary) 8%, transparent); }

.ch-bar { fill: var(--primary); }
.ch-bar:hover { fill: var(--secondary); }

.ch-hbar { display: block; width: 100%; height: 8px; }
.ch-hbar-t { fill: var(--surface-3); }
.ch-hbar-f { fill: var(--primary); }

}

@layer components {

/* --- La oferta en el menú de usuario --------------------------------------
   Los planes estaban solo en el pie, y nadie baja al pie a descubrir que
   existe un plan de pago. Aquí lo ve cualquiera que abra su menú — que es
   exactamente quien ya usa la web y a quien tiene sentido ofrecérselo. */

/* .menu-upsell viste ahora .gold-cta: la oferta es la misma en el menu,
   el perfil y los ajustes, y su cara vive en un solo sitio. */

/* Distintivo del plan, junto al nombre. Solo si paga: a quien no paga se le
   ofrece mejorar, no se le recuerda que no tiene nada. */
.menu-plan {
  font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: var(--secondary-wash); color: var(--secondary-ink);
  align-self: center;
}
.menu-plan[data-plan="max"] {
  background: linear-gradient(120deg, #f2d98c, #e8c05f);
  color: #6b520f;
}

/* --- Lista de características en los planes -------------------------------
   Lo que NO trae un plan sale igualmente, tachado. Ver lo que te falta es la
   mitad de la decisión; esconderlo hace que la comparación parezca trucada. */

.pc-list li { display: grid; grid-template-columns: 1.1em minmax(0, 1fr); gap: var(--sp-2); align-items: baseline; }
.pc-list li::before { content: none; }
.pc-mark { font-weight: 700; text-align: center; }
.pc-list .is-in  .pc-mark { color: var(--accent-ink); }
.pc-list .is-out { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line); }
.pc-list .is-out .pc-mark { color: var(--line); text-decoration: none; }

.plan-card.is-featured {
  border-color: var(--secondary);
  box-shadow: 0 8px 28px -10px color-mix(in oklab, var(--secondary) 45%, transparent);
}

/* --- El archivador, con más cara de carpeta -------------------------------
   Antes era una caja blanca con una rejilla dentro. Una carpeta de verdad
   tiene canto, anillas y dos caras, y eso es lo que hace que se reconozca de
   un vistazo sin necesidad de leer nada. */

.binder {
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--binder-tint, var(--primary)) 22%, var(--surface)) 0 28px,
      var(--surface) 28px);
  border: 1px solid color-mix(in oklab, var(--binder-tint, var(--primary)) 30%, var(--line));
  padding-inline-start: calc(28px + clamp(var(--sp-3), 2.2vw, var(--sp-5)));
  box-shadow: var(--shadow-2), inset 30px 0 24px -26px rgb(47 42 37 / .35);
}

/* Las anillas: tres, metálicas, sobre el canto. Sustituyen a los agujeros
   dibujados de antes, que se leían como manchas. */
.binder::before {
  content: "";
  position: absolute;
  left: 9px; top: 12%; bottom: 12%;
  width: 11px;
  background:
    radial-gradient(ellipse at 50% 50%,
      #f6f4ef 0 3px, #cdc6b8 3px 4.5px, rgb(0 0 0 / .18) 4.5px 5.5px, rgb(0 0 0 / 0) 6px)
    0 0 / 100% 33.34%;
  pointer-events: none;
}

/* Y la hoja de plástico: un rectángulo ligeramente distinto del fondo, con su
   propio borde. Es lo que separa «la carpeta» de «la hoja que hay dentro». */
.sheet {
  padding: clamp(var(--sp-2), 1.4vw, var(--sp-3));
  border-radius: 10px;
  background: color-mix(in oklab, var(--surface-2) 70%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.sheet-count { font-family: var(--font-num); font-size: .8rem; color: var(--ink-3); }

@media (max-width: 560px) {
  /* En móvil el canto se estrecha: 28px de una pantalla de 390 son mucho. */
  .binder {
    background:
      linear-gradient(90deg,
        color-mix(in oklab, var(--binder-tint, var(--primary)) 22%, var(--surface)) 0 18px,
        var(--surface) 18px);
    padding-inline-start: calc(18px + var(--sp-2));
  }
  .binder::before { left: 5px; width: 8px; }
}

}

@layer components {

/* --- El dorado ------------------------------------------------------------
   Una sola clase para «hazte Premium» en el menú, el perfil y los ajustes: si
   la oferta cambia de cara, cambia en un sitio. Dorado y no naranja: el
   naranja ya significa «acción principal» en toda la web, y la oferta tiene
   que reconocerse como algo distinto — especial, no urgente. */

.gold-cta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 999px;
  background: linear-gradient(120deg, #f6e3a8, #e8c05f);
  border: 1px solid #d8b04e;
  color: #6b520f;
  font-weight: 700; font-size: .84rem;
  box-shadow: 0 2px 10px -3px rgb(200 165 63 / .6);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
  white-space: nowrap;
}
.gold-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px -4px rgb(200 165 63 / .75);
}
.gold-cta span[aria-hidden] { font-size: 1rem; line-height: 1; }

/* En el menú ocupa el ancho y respira respecto a los enlaces. */
.menu-upsell { display: flex; justify-content: center; margin: var(--sp-2) 0; }

/* --- Ajustes de cuenta -----------------------------------------------------
   La página usaba `prose-layout`, la maqueta de leer texto, que limita el ancho
   a una medida cómoda de lectura. Para un formulario eso es lo contrario de lo
   que hace falta: encerraba los campos en doscientos y pico píxeles y dejaba
   vacía media pantalla. Un formulario no se lee, se rellena.

   Lo de aquí abajo es maqueta propia: cabecera de estado, índice y una tarjeta
   por sección. Sin JavaScript y sin el atributo style, que la CSP bloquea. */

/* La cabecera: quién eres, qué plan tienes y cuánto llevas usado.
   ------------------------------------------------------------------------
   Flex y no rejilla de columnas fijas: así la identidad y las cifras del plan
   se mantienen juntas y, cuando no caben, bajan COMO BLOQUE en vez de romperse
   cada dato por su lado. Estirado en vertical —insignia, vaults, barra,
   cartas, botón, uno debajo de otro— ocupaba media pantalla y se leía como una
   lista de cosas sueltas. */
.acc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.acc-id { flex: 1 1 12rem; min-width: 0; }
.acc-id h2 { font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.2; }
.acc-handle { font-family: var(--font-num); font-size: .82rem; color: var(--ink-3); }
.acc-see {
  display: inline-block; margin-top: 2px;
  font-size: .8rem; font-weight: 600; color: var(--primary-ink);
  border-bottom: 1px solid var(--line);
}
.acc-see:hover { border-color: var(--primary); }

.acc-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-inline-start: auto;
}
.acc-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
}
/* Cada cifra es una frase corta con el número destacado: «1/5 vaults usados».
   Leerlo así cuesta menos que un rótulo encima de un número. */
.acc-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--ink-2);
  white-space: nowrap;
}
.acc-stat b {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
}

/* Un <progress> de verdad y no un <div> con el ancho puesto a mano: la CSP no
   deja estilos en línea, y el elemento nativo ya se anuncia solo a un lector de
   pantalla. Hay que quitarle la apariencia del sistema en los dos motores. */
.acc-bar {
  appearance: none;
  -webkit-appearance: none;
  width: 56px; height: 5px;
  border: 0; border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.acc-bar::-webkit-progress-bar { background: var(--surface-3); border-radius: 999px; }
.acc-bar::-webkit-progress-value { background: var(--primary); border-radius: 999px; }
.acc-bar::-moz-progress-bar { background: var(--primary); border-radius: 999px; }

/* Índice a la izquierda, contenido a la derecha.
   ------------------------------------------------------------------------
   La columna del índice necesita unos 900 px de ventana para no dejar el
   contenido apretado. Por debajo, el índice se pone arriba en horizontal. */
.acc-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}

.acc-nav {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

/* PASTILLAS, no texto suelto.
   ------------------------------------------------------------------------
   Sin fondo ni borde, cinco enlaces seguidos se leen como una frase —«Perfil
   público Tu plan Pagos Contraseña Borrar la cuenta»— y no como sitios a los
   que se puede ir. Con forma de botón no hay duda, y vale igual para la
   columna de escritorio que para la tira de móvil: un solo estilo. */
.acc-nav a {
  padding: 7px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface);
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.acc-nav a:hover {
  border-color: var(--primary);
  color: var(--ink);
}
/* Borrar la cuenta se marca ya desde el índice: que no llegue nadie por
   accidente ni la confunda con un ajuste más. */
.acc-nav a.is-danger { color: #a5312d; border-color: #f0cfcd; }
.acc-nav a.is-danger:hover { background: #fdecec; border-color: #d98b87; }

.acc-body { display: grid; gap: var(--sp-4); min-width: 0; }

.acc-card {
  padding: var(--sp-5);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  /* El ancla no puede quedar debajo de la cabecera fija. */
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}
.acc-card h2 { font-size: 1.05rem; letter-spacing: -.02em; }
/* Una frase que dice para qué sirve la sección: un formulario sin explicación
   se rellena a ciegas, y aquí hay cosas que no se pueden deshacer. */
.acc-sub {
  font-size: .84rem; color: var(--ink-2); line-height: 1.55;
  margin: var(--sp-1) 0 var(--sp-4); max-width: 62ch;
}
/* `.settings-form` lleva un `max-width: 460px` de la maqueta antigua, cuando la
   página entera cabía en una columna estrecha. Aquí sobra: la tarjeta ya pone
   el límite, y con él puesto el formulario se quedaba a la mitad del ancho —el
   mismo apretujamiento de antes, dentro de una caja más bonita. */
.acc-card .settings-form { margin: 0; max-width: none; }
.acc-card .field:last-of-type { margin-bottom: var(--sp-4); }

.acc-empty { font-size: .86rem; color: var(--ink-3); }
.acc-link { font-size: .82rem; color: var(--primary-ink); font-weight: 600; }
.acc-link:hover { text-decoration: underline; }

/* Dos campos por fila cuando caben, uno cuando no. Nombre y país no necesitan
   toda la anchura, y ponerlos uno debajo de otro alarga la página sin motivo. */
.acc-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-4);
  /* Sin esto, los dos campos se estiran a la altura del más alto: el que lleva
     una nota debajo dejaba al vecino con el recuadro el doble de alto, y
     parecía un fallo de la web. */
  align-items: start;
}

/* Lo que no debe estirarse: un desplegable de idioma o una contraseña con
   seiscientos píxeles de ancho se ve mal y no ayuda a nadie. */
.field-narrow { max-width: 320px; }

/* La tabla de pagos se desborda a lo suyo en pantallas estrechas, en vez de
   ensanchar la página entera y romper la maqueta. */
.acc-scroll { overflow-x: auto; }

.acc-danger { border-color: #f0cfcd; background: #fffbfb; }
.acc-danger h2 { color: #a5312d; }

@media (max-width: 980px) {
  .acc-layout { grid-template-columns: 1fr; gap: var(--sp-4); }

  /* El índice pasa a ser una tira horizontal que se desplaza. Sigue sirviendo
     para saltar de sección sin comerse la primera pantalla.
     `min-width: 0` no es opcional: un elemento de rejilla no baja de la anchura
     de su contenido salvo que se le diga, así que sin esto la tira ensancha la
     columna, la columna ensancha la página y el móvil acaba con scroll
     horizontal — se salían por la derecha hasta los títulos. */
  .acc-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-1);
    min-width: 0;
  }
  .acc-nav a { flex: none; }
}

@media (max-width: 640px) {
  .acc-cols { grid-template-columns: 1fr; }
  /* Las cifras del plan ya no caben a la derecha del nombre: bajan enteras,
     pero SEGUIDAS, no una por línea. */
  .acc-plan { margin-inline-start: 0; width: 100%; }
  .acc-card { padding: var(--sp-4); }
}

/* --- Ajustes: plan, pagos, contraseña -------------------------------------- */

.settings-plan { display: grid; gap: var(--sp-3); justify-items: start; }
.sp-row { display: flex; align-items: center; gap: var(--sp-3); }
.sp-badge {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-2);
}
.sp-badge[data-plan="premium"] { background: var(--secondary-wash); color: var(--secondary-ink); }
.sp-badge[data-plan="max"] { background: linear-gradient(120deg, #f2d98c, #e8c05f); color: #6b520f; }
.sp-until { font-size: .84rem; color: var(--ink-2); }
.sp-note { font-size: .8rem; color: var(--ink-3); max-width: 60ch; }
.sp-cancel { margin-top: var(--sp-1); }

.pay-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.pay-table th {
  text-align: start; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.pay-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line-soft); }
.pay-mono { font-family: var(--font-num); font-size: .8rem; }
.pay-status {
  font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 5px;
  background: var(--surface-3); color: var(--ink-2);
}
.pay-status[data-status="paid"] { background: var(--accent-wash); color: var(--accent-ink); }
.pay-status[data-status="refunded"],
.pay-status[data-status="failed"] { background: #fdecec; color: #b8322e; }

/* Aviso de error en ajustes; el de éxito reutiliza .note-star. */
.settings-form { max-width: 460px; }
.settings-form .field input,
.settings-form .field textarea,
.settings-form .field select { width: 100%; }

.note-err {
  padding: var(--sp-3) var(--sp-4);
  border-radius: 10px;
  background: #fdecec; color: #b8322e;
  font-size: .88rem; font-weight: 500;
}


/* --- Ejes de las gráficas de línea ----------------------------------------
   La gráfica no tenía ejes: se veía la forma de la curva pero no cuánto valía
   ningún punto ni de qué día era. Una línea que sube es la misma imagen tanto
   si pasa de 2 a 5 como de 200 a 500.

   El texto va DENTRO del SVG, y eso obligó a quitar `preserveAspectRatio:
   none`: estirando el lienzo se estiraban también las letras. Ahora el SVG
   mantiene su proporción y se escala entero, así que las cifras se leen. */
.ch-ylab {
  fill: var(--ink-3);
  font-family: var(--font-num);
  font-size: 11px;
  text-anchor: end;
}
.ch-xlab {
  fill: var(--ink-3);
  font-family: var(--font-num);
  font-size: 11px;
  text-anchor: middle;
}
/* La última fecha se ancla a la derecha para que no se salga del lienzo. */
.ch-xlab-fin { text-anchor: end; }

}