/* ══════════════════════════════════════════════════════════════════════
   NILO ACCOUNT · login + dashboard "Mi cuenta Nilo"
   Se apoya en las variables de styles.css (:root)
   ══════════════════════════════════════════════════════════════════════ */

/* Botón "Mi cuenta" en la nav */
.nacct-navbtn{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-left:1rem; padding:.55rem 1.1rem; border-radius:999px;
  border:1px solid var(--line); background:var(--card);
  color:var(--ink); font-family:var(--font-body); font-size:.95rem;
  cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nacct-navbtn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(14,46,43,.12); }
.nacct-navbtn__dot{ width:8px; height:8px; border-radius:50%; background:var(--mint-deep); box-shadow:0 0 0 3px rgba(31,191,143,.18); }

/* Overlays */
.nacct-ov{
  position:fixed; inset:0; z-index:1000; display:none;
  align-items:center; justify-content:center; padding:1.2rem;
  background:rgba(14,46,43,.28); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .3s var(--ease);
}
.nacct-ov.show{ display:flex; opacity:1; }

/* Tarjeta modal (login) */
.nacct-card{
  width:100%; max-width:420px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:2.2rem 2rem; box-shadow:0 30px 80px rgba(14,46,43,.22);
  transform:translateY(14px); transition:transform .35s var(--ease);
}
.nacct-ov.show .nacct-card{ transform:translateY(0); }
.nacct-card__logo{ width:44px; height:44px; display:block; margin:0 auto .9rem; }
.nacct-tabs{ display:flex; gap:.4rem; background:rgba(14,46,43,.05); border-radius:14px; padding:.3rem; margin:0 auto 1.2rem; max-width:320px; }
.nacct-tab{ flex:1; padding:.55rem .5rem; border:none; background:transparent; border-radius:10px; cursor:pointer;
  font-family:var(--font-body); font-size:.95rem; color:var(--ink-soft); transition:all .2s var(--ease); }
.nacct-tab.active{ background:var(--paper); color:var(--ink); box-shadow:0 2px 8px rgba(14,46,43,.08); font-weight:600; }
.nacct-card h3{ font-family:var(--font-display); text-align:center; font-size:1.9rem; color:var(--ink); margin:0 0 .2rem; }
.nacct-card p.sub{ text-align:center; color:var(--ink-soft); font-family:var(--font-body); margin:0 0 1.4rem; font-size:1rem; }
.nacct-field{ margin-bottom:.85rem; }
.nacct-field label{ display:block; font-size:.85rem; color:var(--ink-soft); margin-bottom:.35rem; font-family:var(--font-body); }
.nacct-field input{
  width:100%; padding:.8rem .9rem; border-radius:14px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font-size:1rem; font-family:var(--font-body); outline:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.nacct-field input:focus{ border-color:var(--mint-deep); box-shadow:0 0 0 3px rgba(31,191,143,.15); }
.nacct-btn-primary{
  width:100%; margin-top:.4rem; padding:.85rem; border:none; border-radius:14px;
  background:linear-gradient(120deg, var(--mint-deep), var(--blue-deep));
  color:#fff; font-size:1rem; font-weight:600; cursor:pointer;
  transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.nacct-btn-primary:hover{ transform:translateY(-1px); }
.nacct-alt{ text-align:center; margin-top:1rem; font-size:.9rem; color:var(--ink-soft); font-family:var(--font-body); }
.nacct-alt a{ color:var(--blue-deep); cursor:pointer; text-decoration:none; }
.nacct-alt a:hover{ text-decoration:underline; }
.nacct-msg{ margin-top:.9rem; font-size:.88rem; text-align:center; min-height:1.1em; font-family:var(--font-body); }
.nacct-msg.err{ color:#c0392b; }
.nacct-msg.ok{ color:var(--mint-deep); }
.nacct-x{ position:absolute; top:1rem; right:1.1rem; background:none; border:none; font-size:1.6rem; line-height:1; color:var(--ink-soft); cursor:pointer; }

/* Dashboard */
.nacct-dash{ position:relative; width:100%; max-width:780px; max-height:88vh; overflow:auto;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:2.4rem 2.2rem; box-shadow:0 30px 80px rgba(14,46,43,.22);
  transform:translateY(14px); transition:transform .35s var(--ease); }
.nacct-ov.show .nacct-dash{ transform:translateY(0); }
.nacct-dash__head{ display:flex; align-items:center; gap:1rem; margin-bottom:1.6rem; }
.nacct-avatar{ width:56px; height:56px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-family:var(--font-display); font-size:1.6rem; color:#fff;
  background:linear-gradient(120deg, var(--mint-deep), var(--blue-deep)); }
.nacct-dash__head h3{ font-family:var(--font-display); font-size:1.7rem; color:var(--ink); margin:0; }
.nacct-dash__head p{ color:var(--ink-soft); font-family:var(--font-body); margin:.15rem 0 0; font-size:.95rem; }
.nacct-sectitle{ font-family:var(--font-body); text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; color:var(--ink-soft); margin:0 0 .9rem; }
.nacct-products{ display:grid; gap:1rem; }
.nacct-prod{ border:1px solid var(--line); border-radius:18px; padding:1.1rem 1.2rem;
  display:flex; align-items:center; gap:1rem; background:var(--card); }
.nacct-prod__icon{ width:44px; height:44px; border-radius:12px; flex:none; display:grid; place-items:center; font-size:1.4rem;
  background:rgba(31,191,143,.12); }
.nacct-prod__body{ flex:1 1 auto; min-width:0; }
.nacct-prod__body h4{ margin:0 0 .15rem; font-family:var(--font-display); font-size:1.25rem; color:var(--ink); }
.nacct-prod__meta{ font-family:var(--font-body); color:var(--ink-soft); font-size:.9rem; }
.nacct-badge{ display:inline-block; padding:.2rem .6rem; border-radius:999px; font-size:.72rem; font-family:var(--font-body); font-weight:600; }
.nacct-badge.active{ background:rgba(31,191,143,.15); color:var(--mint-deep); }
.nacct-badge.trial{ background:rgba(79,140,255,.15); color:var(--blue-deep); }
.nacct-badge.paused,.nacct-badge.canceled{ background:rgba(192,57,43,.12); color:#c0392b; }
.nacct-badge.off{ background:rgba(14,46,43,.07); color:var(--ink-soft); }
.nacct-prod__link{ flex:none; color:var(--blue-deep); font-family:var(--font-body); font-size:.92rem; text-decoration:none; white-space:nowrap; }
.nacct-prod__link:hover{ text-decoration:underline; }
.nacct-prod--empty{ opacity:.6; }
.nacct-dash__foot{ margin-top:1.8rem; display:flex; justify-content:space-between; align-items:center; }
.nacct-logout{ background:none; border:1px solid var(--line); border-radius:12px; padding:.55rem 1rem; color:var(--ink-soft); font-family:var(--font-body); cursor:pointer; }
.nacct-logout:hover{ color:#c0392b; border-color:rgba(192,57,43,.3); }

@media (max-width:520px){
  .nacct-prod{ flex-wrap:wrap; }
  .nacct-prod__link{ width:100%; }
}