/* ==========================================================================
   BestByte · SISTEMA — Pantallas de cuenta del cliente ("cli-cuenta")
   cliente/promociones.html · cliente/soporte.html · cliente/seguridad.html
   acceso.html (pantalla de acceso del sistema)
   Requiere: app-tokens.css + app.css (antes). Solo var(--token): los colores
   salen del tema claro/oscuro.
   Ya viven en app.css (comunes a todo el sistema): .settings/.settings-row,
   .choice-grid/.choice, .input-group__btn, .pw-meter/.pw-rules, .otp,
   .disclosure (y .card.disclosure), .note--box, .state-tile, .attach-list/
   .attachment, .cell-stack, .stat-strip--3, .thread/.msg/.composer y .qr.
   --------------------------------------------------------------------------
   ÍNDICE (clase → uso)
    1. Comunes ...... .drawer-section-title · cabeceras de tarjeta en teléfonos
    2. Promociones .. .promo-hero(__offer __price __compare) .promo-grid
                      .promo-card(__body __top __scope __title __text __value
                      __terms __foot __why) .coupon(__label __code)
                      .resource-grid .resource(__icon __main __title __text __meta)
    3. Soporte ...... .open-now .ticket-steps .rating(__star) .ticket-closed
                      .stars-static
    4. Seguridad .... .setup-grid .num-steps .codes .perm-table
                      .danger-zone .keep-grid .health-list--cols .export-box
    5. Acceso ....... .auth-body .auth(__main __top __body __panel __head
                      __title __desc __icon __note __foot __legal)
                      .auth-demo .invite-card .demo-hint .auth-aside(__inner
                      __title __text __list __mock __trust) .mock-card
   ========================================================================== */

/* ==========================================================================
   1. COMUNES
   ========================================================================== */

/* En teléfonos, la cabecera de tarjeta deja bajar sus acciones en vez de apretar el título */
@media (max-width: 479.98px) { [data-screen] .card__head { flex-wrap: wrap; } }

.drawer-section-title { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-text); margin-bottom: var(--sp-3); }

/* ==========================================================================
   2. PROMOCIONES
   ========================================================================== */
.promo-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-5) var(--sp-7);
  align-items: center;
  padding: var(--sp-6);
}
.promo-hero .promo__title { font-size: var(--fs-xl); }
.promo-hero .promo__text { font-size: var(--fs-base); max-width: 60ch; }
.promo-hero__offer {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 230px;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
}
.promo-hero__label { font-size: var(--fs-xs); color: var(--c-text-3); font-weight: var(--fw-medium); }
.promo-hero__price { font-size: var(--fs-2xl); font-weight: var(--fw-semi); letter-spacing: var(--tracking-title); line-height: 1.15; color: var(--c-text); font-variant-numeric: tabular-nums; }
.promo-hero__price small { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--c-text-3); letter-spacing: 0; }
.promo-hero__compare { font-size: var(--fs-sm); color: var(--c-text-3); }
.promo-hero__compare s { font-variant-numeric: tabular-nums; }
.promo-hero__offer .badge { align-self: flex-start; margin-top: 4px; }
@media (max-width: 767.98px) {
  .promo-hero { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5); }
  .promo-hero__offer { min-width: 0; }
}

/* Filtros por tipo: sin contadores en teléfonos para que entren los cuatro */
@media (max-width: 479.98px) { [data-screen="promociones"] .segmented .tab__count { display: none; } }
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: var(--sp-4); }
.promo-card { display: flex; flex-direction: column; }
.promo-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding: var(--sp-5) var(--sp-5) var(--sp-4); min-width: 0; }
.promo-card__top { display: flex; align-items: center; justify-content: space-between; gap: 6px var(--sp-2); flex-wrap: wrap; min-height: 22px; }
.promo-card__scope { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-text-2); }
.promo-card__scope .i { color: var(--c-text-3); }
.promo-card__scope--services, .promo-card__scope--services .i { color: var(--c-indigo-text); }
.promo-card__title { font-size: var(--fs-md); font-weight: var(--fw-semi); line-height: var(--lh-snug); }
.promo-card__text { font-size: var(--fs-sm); color: var(--c-text-2); }
.promo-card__value {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px;
  margin-top: 2px;
  font-size: var(--fs-xl); font-weight: var(--fw-semi); letter-spacing: var(--tracking-title);
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.promo-card__value small { font-size: var(--fs-sm); font-weight: var(--fw-regular); letter-spacing: 0; color: var(--c-text-3); }
.promo-card__value--text { font-size: var(--fs-md); letter-spacing: var(--tracking-tight); }
.promo-card__terms { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--c-text-3); }
.promo-card__terms li { display: flex; align-items: flex-start; gap: 6px; }
.promo-card__terms .i { margin-top: 1px; }
.promo-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--c-divider);
  background: var(--c-surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.promo-card__why { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-xs); color: var(--c-text-3); }
.promo-card__why .i { flex: none; }
.promo-card.is-scheduled .promo-card__value { color: var(--c-text-2); }
.promo-card[hidden] { display: none; }

/* Cupón: separador punteado + código copiable */
.coupon {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 var(--sp-5);
  padding: 10px 0;
  border-top: 1px dashed var(--c-border-strong);
  min-width: 0;
}
.coupon__label { font-size: var(--fs-xs); color: var(--c-text-3); white-space: nowrap; }
.coupon__code { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-base); font-weight: var(--fw-semi); letter-spacing: .08em; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coupon__auto { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); color: var(--c-text-2); }
@media (max-width: 639.98px) {
  .promo-card__body { padding: var(--sp-4); }
  .coupon { margin: 0 var(--sp-4); }
  .promo-card__foot { padding: var(--sp-3) var(--sp-4); }
}

/* Software útil / recursos */
.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--sp-4); }
.resource { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); }
.resource__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.resource__title { font-size: var(--fs-base); font-weight: var(--fw-semi); color: var(--c-text); }
.resource__text { font-size: var(--fs-sm); color: var(--c-text-2); }
.resource__meta { font-size: var(--fs-xs); color: var(--c-text-3); }
.resource__actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Esqueleto de tarjetas (carga simulada) */
.skeleton-card { padding: var(--sp-5); display: flex; flex-direction: column; gap: 10px; }

/* ==========================================================================
   3. SOPORTE
   ========================================================================== */
.open-now { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--c-text-2); }

.ticket-steps { margin-top: var(--sp-2); }

.drawer .modal__foot { background: var(--c-surface); }

.ticket-closed { flex: 1 1 100%; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }

/* Calificación con estrellas (radios nativos + etiquetas) */
.rating { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; border: 0; margin: 0; padding: 0; min-width: 0; }
.rating legend { float: left; padding: 0; margin-right: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text); }
.rating__stars { display: inline-flex; gap: 2px; }
.rating__star {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--c-text-3); /* contorno visible (≥3:1) en ambos temas */
  cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.rating__star:hover { background: var(--c-bg-subtle); }
.rating__star .i { width: 20px; height: 20px; }
.rating input:focus-visible + .rating__star { outline: 2px solid var(--c-focus); outline-offset: 1px; }
.rating[data-value="1"] .rating__star:nth-of-type(-n+1),
.rating[data-value="2"] .rating__star:nth-of-type(-n+2),
.rating[data-value="3"] .rating__star:nth-of-type(-n+3),
.rating[data-value="4"] .rating__star:nth-of-type(-n+4),
.rating[data-value="5"] .rating__star { color: var(--c-warning); }
.rating[data-value="1"] .rating__star:nth-of-type(-n+1) .i,
.rating[data-value="2"] .rating__star:nth-of-type(-n+2) .i,
.rating[data-value="3"] .rating__star:nth-of-type(-n+3) .i,
.rating[data-value="4"] .rating__star:nth-of-type(-n+4) .i,
.rating[data-value="5"] .rating__star .i { fill: currentColor; }
.stars-static { display: inline-flex; gap: 1px; color: var(--c-warning); vertical-align: -2px; }
.stars-static .i { width: 14px; height: 14px; fill: currentColor; }
.stars-static .is-off { color: var(--c-text-disabled); fill: none; }

/* El selector de archivos del modal "Nuevo ticket" pinta su propia lista */
#modal-ticket .file-drop__picked { display: none; }
#modal-ticket .file-drop { padding: var(--sp-5) var(--sp-4); }

/* ==========================================================================
   4. SEGURIDAD Y PRIVACIDAD
   ========================================================================== */
.tab .badge { margin-left: 2px; }
.tabs__list .tab .i { color: var(--c-text-3); }
.tabs__list .tab[aria-selected="true"] .i { color: var(--c-text-2); }

.profile-head { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; min-width: 0; }
.verified { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-success-text); }
.pending-email { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--c-warning-text); }

.setup-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 559.98px) {
  .setup-grid { grid-template-columns: minmax(0, 1fr); }
  .setup-grid > .qr { justify-self: center; }
}
.num-steps { list-style: none; margin: 0; padding: 0; counter-reset: nstep; display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-2); }
.num-steps > li { position: relative; padding-left: 32px; min-width: 0; }
.num-steps > li::before {
  counter-increment: nstep; content: counter(nstep);
  position: absolute; left: 0; top: -1px;
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-bg-subtle); border: 1px solid var(--c-border);
  color: var(--c-text-2); font-size: var(--fs-xs); font-weight: var(--fw-semi);
}
.num-steps strong { color: var(--c-text); }
.app-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* Códigos de recuperación */
ul.codes { /* ul. para ganarle a ul[class] { padding: 0 } de app.css */
  list-style: none; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  counter-reset: rcode;
}
.codes li { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-base); letter-spacing: .06em; color: var(--c-text); }
.codes li::before { counter-increment: rcode; content: counter(rcode, decimal-leading-zero); font-size: var(--fs-2xs); letter-spacing: 0; color: var(--c-text-3); }
@media (max-width: 359.98px) { .codes { grid-template-columns: minmax(0, 1fr); } }

.wizard-foot-start { margin-right: auto; font-size: var(--fs-sm); color: var(--c-text-3); }
#modal-2fa .stepper { margin-bottom: var(--sp-5); }

/* Matriz de permisos por rol */
.perm-table { width: 100%; font-size: var(--fs-sm); }
.perm-table th, .perm-table td { padding: 9px var(--sp-3); border-bottom: 1px solid var(--c-divider); text-align: left; vertical-align: middle; }
.perm-table th:first-child, .perm-table td:first-child { padding-left: var(--sp-5); }
.perm-table th:last-child, .perm-table td:last-child { padding-right: var(--sp-5); }
.perm-table thead th { background: var(--c-bg-subtle); color: var(--c-text-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.perm-table tbody tr:last-child td { border-bottom: 0; }
.perm-table .is-center { text-align: center; width: 104px; }
.perm-yes { color: var(--c-success-text); }
.perm-no { color: var(--c-text-disabled); }
@media (max-width: 639.98px) {
  .perm-table th:first-child, .perm-table td:first-child { padding-left: var(--sp-4); }
  .perm-table th:last-child, .perm-table td:last-child { padding-right: var(--sp-4); }
  .perm-table .is-center { width: 76px; }
}

/* Zona de peligro */
.danger-zone { border-color: var(--c-danger-line); }
.danger-zone > .card__head .card__title { color: var(--c-danger-text); }
.danger-zone > .card__head .card__title .i { color: var(--c-danger-text); }
.keep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-6); }
.keep-grid__title { display: flex; align-items: center; gap: 6px; margin-bottom: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-text); }
@media (max-width: 767.98px) { .keep-grid { grid-template-columns: minmax(0, 1fr); } }
.health-list .is-neutral .i { color: var(--c-text-3); }
.health-list--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--sp-5); }
@media (max-width: 639.98px) { .health-list--cols { grid-template-columns: minmax(0, 1fr); } }

.export-box { display: flex; align-items: flex-start; gap: var(--sp-4); }
.export-box__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
@media (max-width: 479.98px) { .export-box { flex-direction: column; gap: var(--sp-3); } }

/* ==========================================================================
   5. ACCESO (acceso.html)
   ========================================================================== */
.auth-body { background: var(--c-surface); }
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
@media (min-width: 1440px) { .auth { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.auth__main {
  display: flex; flex-direction: column;
  min-width: 0;
  padding: var(--sp-5) var(--gutter);
  background: var(--c-surface);
}
.auth__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-width: 0; }
.auth__top-end { display: flex; align-items: center; gap: 4px; }
.auth__body { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: var(--sp-8) 0; min-width: 0; }
.auth__body:focus { outline: none; }
.auth__panel { width: 100%; max-width: 400px; min-width: 0; }
.auth-state { display: flex; flex-direction: column; gap: var(--sp-5); }
.auth-state[hidden] { display: none; }
.auth__head { display: flex; flex-direction: column; gap: 6px; }
.auth__title { font-size: var(--fs-2xl); font-weight: var(--fw-semi); letter-spacing: var(--tracking-title); line-height: 1.2; }
.auth__title:focus { outline: none; }
.auth__title:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 4px; }
.auth__desc { color: var(--c-text-2); }
.auth__desc strong { color: var(--c-text); font-weight: var(--fw-semi); overflow-wrap: anywhere; }
.auth .input, .auth .select { height: var(--control-h-lg); }
.auth .input-group .input { height: calc(var(--control-h-lg) - 2px); }
.auth .otp .otp__input { height: 52px; }
.auth__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary-text); margin-bottom: 4px; }
.auth__icon .i { width: 22px; height: 22px; }
.auth__icon--success { background: var(--c-success-bg); color: var(--c-success-text); }
.auth__note { font-size: var(--fs-sm); color: var(--c-text-3); }
.auth__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.auth__sep { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--c-text-3); }
.auth__sep::before, .auth__sep::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--c-divider); }
.auth__foot { display: flex; flex-direction: column; gap: var(--sp-3); }
.auth__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-4); font-size: var(--fs-xs); color: var(--c-text-3); }
.auth__legal a { color: var(--c-text-3); }
.auth__legal a:hover { color: var(--c-link); }
.auth__legal .auth__admin { margin-left: auto; }
@media (max-width: 639.98px) {
  .auth__body { padding: var(--sp-7) 0 var(--sp-6); align-items: flex-start; }
  .auth__title { font-size: var(--fs-xl); }
  .auth__legal .auth__admin { margin-left: 0; }
}

.auth-demo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 10px 12px;
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
}
.auth-demo__label { margin-right: 4px; font-size: var(--fs-2xs); font-weight: var(--fw-semi); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-text-3); }
.auth-demo .chip { height: 26px; padding: 0 10px; font-size: var(--fs-xs); text-decoration: none; }
.auth-demo .chip:hover { text-decoration: none; }
.auth-demo .chip[aria-current="page"] { background: var(--c-primary-soft); border-color: var(--c-primary-line); color: var(--c-primary-text); }

.demo-hint { padding: 10px 12px; border: 1px solid var(--c-divider); border-radius: var(--r-md); background: var(--c-surface-2); font-size: var(--fs-xs); color: var(--c-text-3); }
.demo-hint .btn--link { font-size: var(--fs-xs); }

.invite-card { display: flex; align-items: center; gap: var(--sp-3); padding: 12px 14px; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface-2); min-width: 0; }
.invite-card__text { min-width: 0; font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.4; }
.invite-card__text strong { color: var(--c-text); font-weight: var(--fw-semi); }

.who-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 10px 4px 4px; border: 1px solid var(--c-border); border-radius: var(--r-full); font-size: var(--fs-sm); color: var(--c-text); }
.who-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Panel lateral de marca (sobrio: tinte azul suave + retícula tenue) */
.auth-aside {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
  padding: var(--sp-9) var(--sp-8);
  border-left: 1px solid var(--c-border);
  background: linear-gradient(165deg, var(--c-primary-soft) 0%, var(--c-bg) 58%);
}
.auth-aside::before {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--c-border) 1px, transparent 1px), linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 25%, rgba(0, 0, 0, .9), transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 70% 25%, rgba(0, 0, 0, .9), transparent 75%);
  opacity: .6;
  pointer-events: none;
}
.auth-aside__inner { position: relative; width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: var(--sp-7); }
.auth-aside__mark { width: 40px; height: 46px; }
.auth-aside__title { margin-top: var(--sp-4); font-size: var(--fs-2xl); font-weight: var(--fw-semi); letter-spacing: var(--tracking-title); line-height: 1.2; }
.auth-aside__text { margin-top: var(--sp-2); color: var(--c-text-2); }
.auth-aside__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-aside__list li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-2); }
.auth-aside__list strong { display: block; font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--c-text); }
.auth-aside__mock { display: flex; flex-direction: column; gap: 10px; }
.mock-card {
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: 380px;
  padding: 12px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  min-width: 0;
}
.mock-card + .mock-card { margin-left: var(--sp-7); }
.mock-card__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mock-card__title { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-card__meta { font-size: var(--fs-xs); color: var(--c-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-card .file__icon { width: 30px; height: 36px; font-size: 8px; padding-bottom: 4px; }
.auth-aside__trust { display: flex; flex-wrap: wrap; gap: 6px var(--sp-4); font-size: var(--fs-xs); color: var(--c-text-3); }
.auth-aside__trust span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 1023.98px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-aside { display: none; }
}

/* Paneles del asistente 2FA: reciben el foco por script (tabindex=-1) solo para que el lector
   de pantalla lea el paso; no son interactivos, así que sin anillo sobre toda la sección */
[data-wz-panel]:focus, [data-wz-panel]:focus-visible { outline: none; }