/* ============================================================
   Modal con el estado de la membresía
   ------------------------------------------------------------
   Capa: componente
   ============================================================ */

/* ═══════════════════════════════════════════════════
   MODAL BIENVENIDA — premium
═══════════════════════════════════════════════════ */
#modal-bienvenida {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(8,8,24,.6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  align-items: center; justify-content: center;
}
#modal-bienvenida.visible { display: flex; }
.modal-bienv-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 40px 44px;
  max-width: 430px; width: 90%;
  box-shadow: 0 24px 80px rgba(0,0,0,.22), 0 0 0 1px rgba(var(--accent-rgb),.12);
  text-align: center;
  animation: modal-in .3s cubic-bezier(.34,1.4,.64,1);
  position: relative; overflow: hidden;
}
/* Línea de acento superior.
   Se llamaba "línea gold" y lo era literalmente: el tercer stop
   era #ffd270, el gold claro de Premium, en un componente COMÚN.
   Mismo caso que #progress-bar en navegacion.css. */
.modal-bienv-box::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent), var(--accent-glow));
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-bienv-box h2 {
  font-family: var(--font-mono); font-size: 1.05rem;
  color: var(--accent-2); margin-bottom: .5rem;
}
.modal-bienv-box .saludo {
  font-size: .97rem; color: var(--text);
  margin-bottom: 1.2rem; line-height: 1.65;
}
.modal-bienv-vence {
  display: inline-block; background: var(--bg2);
  border-radius: var(--radius-sm); padding: 11px 20px;
  font-size: .87rem; color: var(--gray);
  margin-bottom: 1.5rem; line-height: 1.7;
}
.modal-bienv-vence strong { color: var(--accent-2); }
.modal-bienv-vence .dias-ok   { color: var(--estado-ok); font-weight: 700; }
.modal-bienv-vence .dias-warn { color: var(--estado-aviso); font-weight: 700; }
.modal-bienv-vence .dias-venc { color: var(--estado-critico); font-weight: 700; }
.modal-bienv-btn {
  background: var(--accent-2); color: var(--on-accent-2); border: none;
  padding: 12px 36px; border-radius: var(--radius); font-size: .95rem;
  font-family: var(--font-body); font-weight: 600; cursor: pointer;
  transition: background .2s, transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.modal-bienv-btn:hover {
  background: var(--accent-2-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
html.dark-mode .modal-bienv-box h2, body.dark-mode .modal-bienv-box h2 { color: var(--accent); }
html.dark-mode .modal-bienv-btn, body.dark-mode .modal-bienv-btn { background: var(--accent); color: var(--on-accent); }
body.dark-mode .modal-bienv-btn:hover { background: var(--accent-strong); }