/* Authentech — páginas de cliente: suscripciones, soporte, afiliados y cuenta. (/estado tiene su propia hoja: estado.css) */

/* ---- Encabezado de página ---- */
.phead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s4); padding: 44px 0 28px; }
.phead h1 { font-size: clamp(36px, 4.2vw, 56px); }
.phead p { color: var(--ink-2); font-size: 17.5px; font-weight: 400; margin-top: 10px; max-width: 52ch; }
.phead__side { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

/* ---- Tarjeta y panel oscuro ---- */
.card { background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--sh-1); padding: var(--s5); }
.card__title { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.night {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; border-radius: 30px; box-shadow: var(--sh-2);
  background: radial-gradient(80% 70% at 92% 0%, #3d5cff 0%, rgba(61, 92, 255, 0) 62%), radial-gradient(60% 60% at 0% 100%, #0b2bfa 0%, rgba(11, 43, 250, 0) 62%), linear-gradient(160deg, var(--night-2), var(--night) 72%);
}
.night::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/media/img/guilloche.svg") 96% 40% / 900px auto no-repeat; opacity: .45; }
/* Las columnas son minmax(0, 1fr) y no 1fr: con 1fr una columna no baja del ancho de su contenido, y una
   tabla (520 px como mínimo) ensanchaba la página entera en el móvil en vez de desplazarse dentro de su caja. */
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
@media (max-width: 899px) { .cols { grid-template-columns: minmax(0, 1fr); } }

/* ---- Píldoras de estado ---- */
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 11px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill--ok { background: #e2f6ee; color: #076b4c; }
.pill--warn { background: #fdf0d9; color: #8a5600; }
.pill--bad { background: #fde8e6; color: #a3261c; }
.pill--info { background: var(--tint); color: var(--royal-deep); }
.pill--mute { background: #eceef5; color: var(--ink-2); }

/* ---- Cifras ---- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.stat { padding: 18px 20px; border-radius: 20px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.stat b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat span { font-size: 13.5px; color: rgba(255, 255, 255, .8); }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr 1fr; } .stats .stat:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ---- Tabla simple ---- */
.tbl-wrap { overflow-x: auto; margin: 0 calc(var(--s5) * -1); padding: 0 var(--s5); }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.tbl th { text-align: left; font-size: 12.5px; font-weight: 700; color: var(--ink-3); padding: 0 12px 10px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .id { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }

/* ---- Estado vacío ---- */
.blank { display: grid; justify-items: center; gap: var(--s3); text-align: center; padding: var(--s7) var(--s5); }
.blank img { width: min(300px, 80%); border-radius: 22px; }
.blank p { color: var(--ink-2); font-weight: 400; max-width: 40ch; }

/* ================= Mis suscripciones ================= */
.lic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: var(--s5); }
.lic { background: var(--sheet); border-radius: 26px; box-shadow: var(--sh-1); overflow: hidden; display: grid; grid-template-columns: 148px 1fr; }
.lic__art { position: relative; background: linear-gradient(135deg, #fff, var(--tint-2) 62%, var(--peri)); }
.lic__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lic__body { padding: 20px 22px; display: grid; gap: 12px; min-width: 0; }
.lic__top { display: flex; align-items: start; justify-content: space-between; gap: var(--s3); }
.lic__name { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.012em; word-spacing: .07em; line-height: 1.1; }
.lic__plan { color: var(--ink-3); font-size: 14px; margin-top: 3px; }
.meter { display: grid; gap: 6px; }
.meter__row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-2); }
.meter__row b { color: var(--ink); }
.meter__bar { height: 7px; border-radius: 7px; background: var(--tint); overflow: hidden; }
.meter__bar i { display: block; height: 100%; border-radius: 7px; background: var(--metal); transform-origin: left; animation: grow 1s cubic-bezier(.2, .8, .2, 1) both; }
.meter--warn .meter__bar i { background: linear-gradient(90deg, #d98a00, #f5b83d); }
.meter--bad .meter__bar i { background: linear-gradient(90deg, #b3261c, #e0574d); }
@keyframes grow { from { transform: scaleX(0); } }
.access { display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); }
/* El dato se lee entero: un usuario, un correo o una nota larga pasan a la línea siguiente en vez de cortarse. */
.access__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); min-width: 0; }
.access__row span { font-size: 13px; color: var(--ink-3); flex: none; }
.access__row code { font-family: var(--mono); font-size: 13.5px; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.link-btn { border: 0; background: transparent; color: var(--royal); font-weight: 700; font-size: 13.5px; cursor: pointer; padding: 4px 8px; border-radius: 8px; flex: none; }
.link-btn:hover { background: var(--tint); }
.lic__live { font-size: 14px; color: var(--ink-2); padding: 12px 14px; border-radius: 16px; background: var(--tint); }
.lic__live b { color: var(--ink); }
@media (max-width: 560px) { .lic { grid-template-columns: 1fr; } .lic__art { aspect-ratio: 16 / 7; } }

.bonos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); padding: var(--s6); }
.bonos__head { grid-column: 1 / -1; display: grid; gap: 6px; }
.bonos__head p { color: rgba(255, 255, 255, .82); font-weight: 400; }
.bono { padding: 20px; display: grid; gap: 10px; align-content: start; justify-items: start; }
.bono h3 { font-family: var(--display); font-weight: 600; font-size: 20px; word-spacing: .07em; }
.bono p { color: rgba(255, 255, 255, .84); font-weight: 400; font-size: 15px; }

.steps { counter-reset: s; display: grid; gap: var(--s3); list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: var(--s3); align-items: start; }
.steps li::before { content: counter(s); width: 40px; height: 40px; border-radius: 50%; background: var(--tint); color: var(--royal); display: grid; place-items: center; font-family: var(--display); font-weight: 600; }
.steps b { display: block; }
.steps span { color: var(--ink-2); font-weight: 400; font-size: 15px; }

/* ================= Soporte ================= */
.help { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s4); }
.help a { display: grid; gap: 6px; padding: 20px 22px; border-radius: 22px; background: var(--sheet); box-shadow: var(--sh-1); color: var(--ink); text-decoration: none; transition: transform .25s, box-shadow .25s; }
.help a:hover { transform: translateY(-3px); box-shadow: var(--sh-2); text-decoration: none; }
.help svg { width: 26px; height: 26px; color: var(--royal); }
.help b { font-family: var(--display); font-weight: 600; font-size: 18px; word-spacing: .07em; }
.help span { color: var(--ink-2); font-weight: 400; font-size: 14.5px; }

.desk { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: var(--s5); align-items: start; margin-top: var(--s5); }
.tk-list { display: grid; gap: 8px; padding: var(--s3); }
.tk { display: grid; gap: 6px; width: 100%; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1px solid transparent; background: transparent; cursor: pointer; }
.tk:hover { background: var(--bg); }
.tk[aria-current="true"] { background: var(--tint); border-color: var(--tint-2); }
.tk b { font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); font-size: 13px; color: var(--ink-3); }
.thread { display: grid; grid-template-rows: auto 1fr auto; min-height: 520px; padding: 0; overflow: hidden; }
.thread__head { padding: 20px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.thread__head h2 { font-family: var(--display); font-weight: 600; font-size: 20px; word-spacing: .07em; }
.thread__msgs { padding: 22px 24px; display: grid; gap: 14px; align-content: start; overflow-y: auto; max-height: 520px; }
.msg { max-width: min(78%, 560px); padding: 12px 16px; border-radius: 18px; font-weight: 400; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg small { display: block; margin-top: 6px; font-size: 12px; opacity: .7; }
.msg--cliente { justify-self: end; background: var(--metal); color: #fff; border-bottom-right-radius: 6px; }
.msg--soporte { justify-self: start; background: var(--bg); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.thread__form { padding: 16px 20px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: end; }
textarea.input { padding: 14px var(--s4); min-height: 54px; resize: vertical; line-height: 1.45; }
@media (max-width: 899px) { .desk { grid-template-columns: 1fr; } .thread { min-height: 0; } }

/* ================= Afiliados ================= */
.aff { padding: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s6); align-items: center; }
.aff h2 { font-size: clamp(30px, 3.6vw, 48px); }
.aff p { color: rgba(255, 255, 255, .84); font-weight: 400; font-size: 17px; margin-top: 12px; max-width: 44ch; }
.aff__link { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px; margin-top: var(--s5); max-width: 560px; }
.aff__link input { min-width: 0; border: 0; background: transparent; color: #fff; font-family: var(--mono); font-size: 14px; padding: 0 12px; outline: none; }
/* El campo no dibuja su propio foco: lo muestra la caja que lo contiene. */
.aff__link:has(input:focus-visible) { outline: 3px solid #fff; outline-offset: 2px; }
.aff__share { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.aff__share a, .aff__share button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; }
.aff__share a:hover, .aff__share button:hover { background: rgba(255, 255, 255, .22); text-decoration: none; }
@media (max-width: 899px) { .aff { grid-template-columns: 1fr; } }

/* ================= Mi cuenta ================= */
.me { padding: clamp(22px, 3.4vw, 40px); display: grid; gap: var(--s5); }
.me__who { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.me__ava { width: 72px; height: 72px; border-radius: 22px; flex: none; display: grid; place-items: center; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); font-family: var(--display); font-weight: 600; font-size: 30px; }
.me__who h1 { font-size: clamp(26px, 3vw, 38px); overflow-wrap: anywhere; }
.me__who p { color: rgba(255, 255, 255, .8); font-weight: 400; overflow-wrap: anywhere; }
.form-grid { display: grid; gap: var(--s4); }
.form-ok { color: var(--ok); font-weight: 700; font-size: 14.5px; }

/* ================= Páginas sencillas sin sesión (términos) ================= */
.simple-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 22px clamp(18px, 4vw, 48px); }

@media (prefers-reduced-motion: reduce) { .meter__bar i { animation: none; } .help a { transition: none; } }