/* Layout del CRM real (reutiliza las variables de crm.css) */
.crm { display: grid; grid-template-columns: var(--sb-w) 1fr; min-height: 100vh; }

.crm-side {
  background: var(--side); color: var(--side-ink);
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1.1rem .85rem; position: sticky; top: 0; height: 100vh;
}
.crm-brand { display: flex; align-items: center; gap: .55rem; padding: .3rem .55rem 1.2rem; color: #fff; }
.crm-brand img { height: 26px; width: auto; }
.crm-brand b { font-weight: 600; font-size: .95rem; letter-spacing: -.01em; }
.crm-side nav { display: grid; gap: .12rem; }
.crm-side nav a {
  display: flex; align-items: center; gap: .55rem; padding: .58rem .75rem;
  border-radius: var(--r-sm); color: var(--side-ink); font-weight: 500; font-size: .9rem;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.crm-side nav a:hover { background: var(--side-2); color: #fff; }
.crm-side nav a.is-active { background: linear-gradient(90deg, var(--acc), var(--acc-deep)); color: #fff; box-shadow: 0 8px 20px -10px var(--acc); }
.crm-side nav a[data-soon]::after { content: "pronto"; margin-left: auto; font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; opacity: .55; }
.crm-side-link {
  margin-top: auto; padding: .5rem .75rem; font-size: .82rem; color: var(--side-ink);
  border-radius: var(--r-sm);
}
.crm-side-link:hover { background: var(--side-2); color: #fff; }
.crm-logout {
  margin-top: .4rem; background: transparent; border: 1px solid var(--side-line);
  color: var(--side-ink); padding: .55rem; border-radius: var(--r-sm); font-weight: 500;
}
.crm-logout:hover { background: var(--side-2); color: #fff; }

.crm-main { padding: 1.5rem clamp(1rem, 3vw, 2.4rem) 3rem; }
.crm-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.crm-top h1 { font-family: var(--f-num); font-weight: 500; font-size: 1.7rem; }
.crm-user { color: var(--ink-2); font-size: .88rem; }

.crm-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: 1.3rem; }
.crm-card h3 { font-size: 1rem; margin-bottom: .9rem; }

.crm-table { width: 100%; border-collapse: collapse; }
.crm-table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); padding: .5rem .55rem; border-bottom: 1px solid var(--line); }
.crm-table td { padding: .6rem .55rem; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.crm-table code { background: var(--panel-2); padding: .12em .45em; border-radius: 5px; font-size: .82rem; color: var(--ink-2); }

.crm-inp { width: 100%; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; background: #fff; color: var(--ink); }
.crm-inp:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
label { display: grid; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--ink-2); }
/* checkbox en línea con su texto */
label.chk { display: flex; align-items: center; gap: .5rem; }
label.chk input { width: 1rem; height: 1rem; accent-color: var(--acc); flex: none; }

.crm-btn { background: var(--acc); color: #fff; border: 0; padding: .55rem 1.05rem; border-radius: var(--r-sm); font-weight: 600; transition: background .15s; }
.crm-btn:hover { background: var(--acc-deep); }
.crm-btn--ghost { background: var(--acc-soft); color: var(--acc-deep); }
.crm-btn--ghost:hover { background: #d3efef; }
.crm-btn--danger { background: var(--bad-soft); color: var(--bad); }
.crm-btn--danger:hover { background: #fcd5d5; }
.crm-btn--sm { padding: .35rem .7rem; font-size: .82rem; }

.crm-badge { font-size: .7rem; padding: .22em .65em; border-radius: 99px; font-weight: 600; }
.crm-badge--on { background: var(--ok-soft); color: var(--ok); }
.crm-badge--off { background: var(--bad-soft); color: var(--bad); }

/* Login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background: radial-gradient(120% 120% at 50% 0%, #1C2540 0%, #141B2D 55%, #0F172A 100%); }
.login-card { background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  padding: 2rem 1.8rem; width: min(100%, 380px); display: grid; gap: .9rem; }
.login-logo { height: 46px; width: auto; margin: 0 auto .2rem; }
.login-card h1 { font-family: var(--f-num); font-weight: 500; font-size: 1.5rem; text-align: center; }
.login-sub { text-align: center; color: var(--ink-3); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; margin-top: -.6rem; }
.login-card .crm-btn { padding: .7rem; margin-top: .3rem; }
.login-card #msg { text-align: center; color: var(--bad); font-size: .85rem; min-height: 1em; }

@media (max-width: 48em) {
  .crm { grid-template-columns: 1fr; }
  .crm-side { position: static; height: auto; }
  .crm-logout { margin-top: .5rem; }
}