/* Fase 3 (2026-10-02) — estilos propios de las pantallas del área "billing". */

/* ── Utilidades (reemplazan style="" en facturación y suscripción) ───────── */
.fx-m0   { margin: 0; }
.fx-mt4  { margin-top: 4px; }
.fx-mt6  { margin-top: 6px; }
.fx-mt8  { margin-top: 8px; }
.fx-mt12 { margin-top: 12px; }
.fx-mt14 { margin-top: 14px; }
.fx-mt16 { margin-top: 16px; }
.fx-mb4  { margin-bottom: 4px; }
.fx-mb6  { margin-bottom: 6px; }
.fx-mb12 { margin-bottom: 12px; }
.fx-mb14 { margin-bottom: 14px; }
.fx-mb16 { margin-bottom: 16px; }
.fx-maxw340 { max-width: 340px; }
.fx-push-right { margin-left: auto; }

.fx-ico--primary { color: var(--lt-primary); }
.fx-ico--ok      { color: var(--lt-success); }
.fx-ico--danger  { color: var(--lt-danger); }
.fx-ico--wait    { color: var(--lt-secondary, var(--lt-primary)); }
.fx-ico--void    { color: var(--lt-text-muted); }

.fx-loading { display: flex; justify-content: center; padding: 60px 0; }
.fx-loading-pad { padding: 40px 0; }

.fx-field-error {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--lt-danger);
}

/* ── Modales de /invoices ───────────────────────────────────────────────── */
.fx-modal { text-align: left; }
.fx-modal--md { max-width: 480px; }
.fx-modal--sm { max-width: 460px; }
.fx-modal__title { margin-top: 0; }
.fx-modal__lead { font-size: 13.5px; color: var(--lt-text-muted); margin: 4px 0 14px; }

/* ── /invoices ──────────────────────────────────────────────────────────── */
.fx-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fx-toolbar__month { min-width: 150px; width: auto; }

.fx-empty--compact { padding: 40px 20px; }
.fx-empty__steps i { vertical-align: -2px; }

/* Chip de estado activo: se distingue por borde fuerte + fondo, no solo por el celeste */
.fx-summary__chip--active {
  border-color: var(--lt-primary);
  background: var(--lt-primary-light);
  box-shadow: 0 0 0 2px var(--lt-primary);
}

.fx-inv-card__msg--void { background: #f1f5f9; color: #334155; }

.fx-card-alert { margin-top: 10px; }

.fx-email-row { margin-top: 10px; font-size: 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-email--ok   { color: var(--lt-success); }
.fx-email--warn { color: #92400e; }
.fx-email--none { color: var(--lt-text-muted); }

.fx-resend { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fx-resend__input { max-width: 280px; }

/* ── /fiscal ────────────────────────────────────────────────────────────── */
.fx-step__sub { font-size: 12px; }

.fx-card-lead { font-size: 14px; color: var(--lt-text-muted); margin: 0 0 16px; }
.fx-optional  { font-size: 12px; font-weight: 500; color: var(--lt-text-muted); }

.fx-check {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: .92rem; line-height: 1.35;
}
.fx-check input[type=checkbox] { accent-color: var(--lt-primary); width: 18px; height: 18px; flex-shrink: 0; }
.fx-check--lg { align-items: flex-start; font-size: .95rem; font-weight: 600; }
.fx-check--lg input[type=checkbox] { width: 20px; height: 20px; margin-top: 1px; }
.fx-checks { display: flex; gap: 24px; flex-wrap: wrap; }
.fx-help--normal { font-weight: 400; }
.fx-help--warn { color: #92400e; font-weight: 600; }
.fx-banner__note { font-size: 13px; margin-top: 4px; }

.fx-auto-box {
  margin-top: 16px; padding: 14px;
  background: var(--lt-primary-light);
  border: 1.5px solid var(--lt-primary);
  border-radius: 12px;
}

/* Confirmación en línea (sí / no) */
.fx-confirm {
  margin-top: 12px; padding: 12px 14px;
  background: var(--lt-warning-light);
  border: 1.5px solid #b45309;
  border-radius: 12px;
}
.fx-confirm__text { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: #78350f; }
.fx-confirm__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* "Se subirá / se quitará al guardar" */
.fx-pending {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; font-size: 13px; font-weight: 600; color: #92400e;
}

.fx-expired { color: var(--lt-danger); font-weight: 700; }

/* Zonas de subida: el InputFile está invisible, el foco se ve en el contenedor */
.fx-dropzone:focus-within {
  outline: 3px solid var(--lt-primary);
  outline-offset: 3px;
  background: var(--lt-primary-light);
}
.fx-dropzone--logo { flex: 1; min-width: 240px; padding: 18px; }
.fx-dropzone--logo i.fx-dropzone__icon { font-size: 28px; }
.fx-dropzone--logo .fx-dropzone__title { font-size: 14px; }

.fx-logo-row { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.fx-logo-current { text-align: center; }
.fx-logo-img {
  max-height: 80px; max-width: 200px;
  border: 1px solid var(--lt-border); border-radius: 10px;
  padding: 8px; background: #fff;
}

.fx-save-status:empty { display: none; }
.fx-save-status { margin: 4px 0 12px; scroll-margin-top: 80px; }
.fx-save-status:focus { outline: none; }
.fx-actions { margin-top: 4px; }
.fx-save-btn { min-width: 220px; }
@media (max-width: 480px) { .fx-save-btn { width: 100%; min-width: 0; } }

/* ── /subscription ──────────────────────────────────────────────────────── */
.sub-ico--ok     { color: var(--lt-success); }
.sub-ico--danger { color: var(--lt-danger); }
.sub-ico--muted  { color: var(--lt-text-muted); }
.sub-modal-note  { font-size: 13px; color: var(--lt-text-muted); margin-top: -4px; }

.sub-paid-alert { margin-bottom: 16px; display: flex; gap: 10px; align-items: flex-start; }
.sub-paid-alert__icon { font-size: 20px; flex-shrink: 0; }
.sub-paid-alert__meta { font-size: 13px; margin-top: 2px; }
.sub-paid-alert__link { font-size: 13px; }

.sub-brand-mark { font-weight: 900; color: #fff; font-style: italic; font-size: 11px; }
.sub-brand-mark--amex   { font-size: 11px; letter-spacing: -.5px; font-style: normal; }
.sub-brand-mark--diners { font-size: 10px; font-style: normal; }
.sub-brand-mark--default,
.sub-brand-mark--small  { font-size: 11px; }
.sub-brand-icon--sm { width: 34px; height: 22px; border-radius: 5px; }
.sub-vcard__kind { text-transform: capitalize; font-size: 12px; opacity: .85; }
.sub-card-mask { font-size: 13px; font-family: 'Courier New', monospace; color: var(--lt-text); }
.sub-card-default-tag { font-size: 12px; font-weight: 700; color: var(--lt-primary); margin-left: auto; }
.sub-plan__amount--featured { color: var(--lt-primary); }
.sub-ar-card--flush { margin-bottom: 0; }

.sub-pkg-card { margin-bottom: 24px; }
.sub-pkg-card__title { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.sub-pkg-card__lead { font-size: 14px; color: var(--lt-text-muted); margin: 0 0 12px; }
.sub-pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sub-pkg { border: 1px solid var(--lt-border, #e5e7eb); border-radius: 12px; padding: 14px; text-align: center; }
.sub-pkg__qty { font-size: 26px; font-weight: 800; line-height: 1; }
.sub-pkg__unit { font-size: 12px; color: var(--lt-text-muted); }
.sub-pkg__price { font-size: 18px; font-weight: 700; margin: 8px 0; }
.sub-pkg__btn { width: 100%; }

/* Enlace "Abrir pago manualmente": color AA */
.lt-pay-modal__fallback-btn { color: var(--lt-primary); }

/* ── /subscription/payments ─────────────────────────────────────────────── */
.fx-list { transition: opacity .15s; }
.fx-list--busy { opacity: .55; pointer-events: none; }
.fx-col-100 { min-width: 100px; }
.fx-col-110 { min-width: 110px; }
.fx-col-120 { min-width: 120px; }
.fx-col-130 { min-width: 130px; }
.fx-col-140 { min-width: 140px; }
.fx-col-170 { min-width: 170px; }
.fx-col-180 { min-width: 180px; }
.fx-dash { font-size: 13px; }

/* Botón "copiar referencia" (antes div role=button) */
button.lt-ph-txid,
button.lt-ph-card__row--txid {
  border: 0; font-family: 'Courier New', monospace; text-align: left; cursor: pointer;
}
button.lt-ph-card__row--txid { width: 100%; color: inherit; }
.fx-copied { margin-left: auto; font-weight: 700; color: var(--lt-success); }
.fx-copied--fail { color: var(--lt-danger); }

/* Estados sin estilo propio en lavantec.css */
.lt-ph-status--reversed { background: #f1f5f9; color: #7f1d1d; border: 1px solid #e2c9c9; }
.lt-ph-status--reversed .lt-ph-status__dot { background: #9f4a4a; box-shadow: 0 0 0 2px #e2c9c9; }
.lt-ph-status--failed { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.lt-ph-status--failed .lt-ph-status__dot { background: #b91c1c; box-shadow: 0 0 0 2px #fecaca; }
.lt-ph-status--unknown { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; }
.lt-ph-status--unknown .lt-ph-status__dot { background: #64748b; box-shadow: 0 0 0 2px #cbd5e1; }
.lt-ph-plan-badge--free { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; }

/* Restos de letra < 12px (el CSS de página con [b-xxxx] gana por especificidad: !important). */
.sub-usage__limit, .sub-plan__popular-badge { font-size: 12px !important; }
.lt-ph-card__row, .lt-ph-card__row > span { font-size: 12px; }