/* ═══════════════════════════════════════════════════════
   BBS Skin — Login Admin + Cliente
   sistema.bbscomunicaciones.com
   BBS Comunicaciones © 2004–2026
   ═══════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --bbs-gold: #db9500;
  --bbs-gold2: #a97518;
  --bbs-light: #ffc866;
  --bbs-dark: #0f0e0e;
  --bbs-bg: #f5f6f5;
}

/* ══ LOGIN ADMIN ══════════════════════════════════════ */
body.login_admin {
  background: #f4f5f4 !important;
  font-family: 'Segoe UI', 'Lato', Arial, sans-serif !important;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Fondo con canvas de partículas */
body.login_admin::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #f0f1f0 0%, #e8eae8 50%, #f0f1f0 100%);
  z-index: 0;
}

/* Canvas de partículas */
#bbs-particles-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}

/* Wrapper del formulario */
body.login_admin .authentication-form-wrapper {
  position: relative;
  z-index: 10;
}

/* Logo */
body.login_admin .company-logo {
  padding: 20px 10px 12px !important;
}
body.login_admin .company-logo img {
  height: 64px !important;
  width: auto !important;
  filter: drop-shadow(0 2px 8px rgba(219,149,0,.2));
  transition: filter 0.3s;
}

/* Card del form */
body.login_admin .authentication-form-wrapper > div:last-child,
body.login_admin .tw-bg-white {
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 32px rgba(0,0,0,.09) !important;
  padding: 2rem 1.8rem !important;
}

/* Heading */
body.login_admin h1.tw-text-neutral-800 {
  font-family: 'Rajdhani', 'Segoe UI', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111 !important;
  letter-spacing: .3px;
}
body.login_admin p.tw-text-neutral-600 {
  font-size: 12px !important;
  color: #888 !important;
}

/* Inputs */
body.login_admin .form-control {
  background: #f5f6f5 !important;
  border: 1px solid rgba(0,0,0,.1) !important;
  border-radius: 7px !important;
  font-size: 13.5px !important;
  padding: 9px 12px !important;
  color: #111 !important;
  transition: border-color .2s, box-shadow .2s !important;
  box-shadow: none !important;
}
body.login_admin .form-control:focus {
  border-color: var(--bbs-gold) !important;
  box-shadow: 0 0 0 3px rgba(219,149,0,.1) !important;
}

/* Labels */
body.login_admin label.control-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #888 !important;
}

/* Botón submit */
body.login_admin .btn-primary {
  background: linear-gradient(135deg, #a97518, #db9500) !important;
  border: none !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 10px !important;
  box-shadow: 0 3px 12px rgba(219,149,0,.25) !important;
  transition: all .2s !important;
  color: #000 !important;
}
body.login_admin .btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 16px rgba(219,149,0,.35) !important;
}

/* Link forgot password */
body.login_admin a.text-muted {
  font-size: 11px !important;
  color: #aaa !important;
}
body.login_admin a.text-muted:hover {
  color: var(--bbs-gold) !important;
}

/* Checkbox */
body.login_admin .checkbox label {
  font-size: 12px !important;
  color: #888 !important;
}

/* ══ LOGIN CLIENTE ════════════════════════════════════ */
body.login_client_area {
  background: #f4f5f4 !important;
  font-family: 'Segoe UI', 'Lato', Arial, sans-serif !important;
}
body.login_client_area::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #f0f1f0 0%, #e8eae8 100%);
  z-index: 0;
}

/* ══ FOOTER BBS ═══════════════════════════════════════ */
.bbs-login-footer {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  text-align: center;
  font-size: 10px;
  color: #aaa;
  white-space: nowrap;
}
.bbs-login-footer a {
  color: var(--bbs-gold);
  text-decoration: none;
}
.bbs-login-footer a:hover {
  opacity: .8;
}

/* ══ TOGGLE CLARO/OSCURO ══════════════════════════════ */
.bbs-toggle-wrap {
  position: fixed;
  top: 1rem;
  right: 1.2rem;
  z-index: 200;
  cursor: pointer;
}
.bbs-tg-track {
  width: 52px; height: 28px; border-radius: 14px;
  background: linear-gradient(135deg,#87CEEB,#FDB813);
  border: 1.5px solid rgba(255,255,255,.4);
  position: relative; overflow: hidden;
  transition: background .5s ease;
}
.bbs-dark-mode .bbs-tg-track {
  background: linear-gradient(135deg,#1a1a3e,#0d0d2b);
  border-color: rgba(255,255,255,.2);
}
.bbs-tg-track::before {
  content: ''; position: absolute; top: 4px; right: 6px;
  width: 3px; height: 3px; border-radius: 50%; background: #fff;
  box-shadow: 6px 3px 0 rgba(255,255,255,.6), 10px -1px 0 rgba(255,255,255,.4);
  opacity: 0; transition: opacity .4s .1s;
}
.bbs-dark-mode .bbs-tg-track::before { opacity: 1; }
.bbs-tg-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,#FFE87C,#FDB813);
  box-shadow: 0 2px 6px rgba(0,0,0,.25), 0 0 8px rgba(253,184,19,.4);
  transition: left .35s cubic-bezier(.4,0,.2,1), background .4s;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
}
.bbs-dark-mode .bbs-tg-thumb {
  left: 27px;
  background: radial-gradient(circle at 30% 30%,#e8e8f0,#c8c8e0);
  box-shadow: 0 2px 6px rgba(0,0,0,.5), inset -3px -2px 0 rgba(180,180,210,.8);
}

/* ══ MODO OSCURO LOGIN ════════════════════════════════ */
.bbs-dark-mode body.login_admin,
body.login_admin.bbs-dark {
  background: #0f0e0e !important;
}
.bbs-dark-mode body.login_admin::before {
  background: linear-gradient(135deg,#0a0700,#140e02) !important;
}
.bbs-dark-mode .tw-bg-white,
.bbs-dark-mode .authentication-form-wrapper > div:last-child {
  background: rgba(18,14,4,.92) !important;
  border-color: rgba(219,149,0,.15) !important;
}
.bbs-dark-mode h1.tw-text-neutral-800 { color: #f0f0f0 !important; }
.bbs-dark-mode .form-control {
  background: #1a1a1a !important;
  border-color: rgba(219,149,0,.2) !important;
  color: #f0f0f0 !important;
}
.bbs-dark-mode label.control-label { color: #666 !important; }
.bbs-dark-mode p.tw-text-neutral-600 { color: #555 !important; }