/* =========================================================
   PORTAL DE USUARIO — tema limpio y moderno
   Barra lateral oscura · acento teal · tarjetas claras.
   Se aplica solo al panel de las empresas cliente (body.theme-portal),
   NO al panel root del superadmin. Reutiliza las variables de app.css.
   ========================================================= */
body.theme-portal {
  --bg: #eef2f7;
  --card: #ffffff;
  --ink: #0f172a;
  --ink-soft: #64748b;
  --primary: #0d9488;            /* teal: recolorea acentos que usan var(--primary) */
  --primary-soft: #d4f3ee;
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 26px rgba(15,23,42,.05);
  --borde: 1px solid #e6ebf2;
  --side: #0f172a;               /* sidebar oscura */
  --side-2: #111c33;
}
body.theme-portal { background: var(--bg); }

/* ---------- Barra lateral oscura ---------- */
body.theme-portal .sidebar {
  background: linear-gradient(180deg, var(--side) 0%, var(--side-2) 100%);
  border-right: none;
  padding: 20px 14px;
}
body.theme-portal .logo { padding: 6px 8px 24px; }
body.theme-portal .logo-text { color: #fff; }
body.theme-portal .logo-badge { background: linear-gradient(135deg, #0d9488, #2dd4bf); }
body.theme-portal nav { gap: 4px; }
body.theme-portal .nav-item {
  color: #9aa7bd;
  border-radius: 11px;
  padding: 11px 13px;
  font-weight: 600;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
body.theme-portal .nav-item .nav-icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border-radius: 9px;
  font-size: 15px;
  transition: background .15s ease;
}
body.theme-portal .nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
body.theme-portal .nav-item.active {
  background: linear-gradient(135deg, #0d9488, #14b8a6);
  color: #fff;
  box-shadow: 0 8px 18px rgba(13,148,136,.35);
}
body.theme-portal .nav-item.active .nav-icon { background: rgba(255,255,255,.20); }

body.theme-portal .sidebar-foot { border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; margin-top: 8px; }
body.theme-portal .sidebar-foot .nav-item { color: #8493ab; }
body.theme-portal .sidebar-foot .nav-item:hover { color: #fff; }

/* ---------- Topbar ---------- */
body.theme-portal .topbar h1 { color: var(--ink); letter-spacing: -.4px; }
body.theme-portal .btn-clock {
  background: var(--primary); box-shadow: 0 6px 16px rgba(13,148,136,.28);
}
body.theme-portal .user-chip { background: #fff; border: var(--borde); box-shadow: none; }
body.theme-portal .user-chip .avatar { background: #0f172a; color: #fff; }

/* ---------- Cards: claras, cabecera ligera con acento ---------- */
body.theme-portal .card {
  background: var(--card);
  border: var(--borde);
  border-radius: 18px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.theme-portal .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(15,23,42,.06), 0 18px 40px rgba(15,23,42,.10);
  border-color: #dbe3ee;
}
/* Cabecera del card: texto oscuro + barrita de acento + línea fina (sin banda pesada) */
body.theme-portal .card h2 {
  position: relative;
  align-items: center;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  padding: 0 0 14px 12px;
  margin: 0 0 18px;
  border-bottom: 1px solid #eef2f7;
}
body.theme-portal .card h2::before {
  content: "";
  position: absolute; left: 0; top: 1px;
  width: 4px; height: 18px; border-radius: 4px;
  background: linear-gradient(180deg, #0d9488, #2dd4bf);
}
body.theme-portal .card h2 .btn { box-shadow: none; }

/* Tarjeta de bienvenida (lleva gradiente inline): la sustituimos por uno limpio */
body.theme-portal .card[style*="gradient"] {
  background: linear-gradient(120deg, #0f766e 0%, #14b8a6 100%) !important;
  border: none;
}
body.theme-portal .card[style*="gradient"] h2 { color: #fff; border: none; padding-left: 0; margin-bottom: 6px; }
body.theme-portal .card[style*="gradient"] h2::before { display: none; }

/* ---------- Botones ---------- */
body.theme-portal .btn {
  background: var(--primary);
  border-radius: 11px;
  box-shadow: 0 6px 16px rgba(13,148,136,.22);
}
body.theme-portal .btn:hover { filter: brightness(1.05); }
body.theme-portal .btn.secundario { background: #fff; color: var(--ink); border: 1.5px solid #d8e0ea; box-shadow: none; }
body.theme-portal .btn.peligro { background: #ef4444; box-shadow: 0 6px 16px rgba(239,68,68,.22); }

/* ---------- Inputs / detalles ---------- */
body.theme-portal .campo input:focus,
body.theme-portal .campo select:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
body.theme-portal a { color: #0d9488; }
body.theme-portal .badge.morado { background: var(--primary-soft); color: #0f766e; }
body.theme-portal .tabla tr:hover td { background: #f7fafc; }

/* ---------- Login / Registro con este tema ---------- */
body.theme-portal.login-wrap, body.theme-portal .login-wrap { background: var(--bg); }

@media print {
  body.theme-portal .card h2 { border: none; padding-left: 0; }
  body.theme-portal .card h2::before { display: none; }
}