/* ===== ENTRADA (login) — negro y blanco, igual en cualquier tema ===== */
.login-screen {
  --ol: #111111; --ol-osc: #000000; --ol-prof: #0a0a0a; --ol-cla: #efefef; --ol-med: #3a3a3a;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(160deg, var(--ol) 0%, var(--ol-osc) 55%, var(--ol-prof) 100%) !important;
  position: relative; overflow: hidden;
}
.login-screen::before, .login-screen::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(255,255,255,.07);
}
.login-screen::before { width: 520px; height: 520px; top: -170px; right: -140px; box-shadow: 0 0 0 60px rgba(255,255,255,.015), 0 0 0 120px rgba(255,255,255,.012); }
.login-screen::after { width: 360px; height: 360px; bottom: -150px; left: -110px; }

/* El logo es blanco: se queda blanco sobre el verde */
.login-logo-img, .desk-logo-img { filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)) !important; }
.login-sub { color: rgba(255,255,255,.78) !important; font-size: 13px !important; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.login-name { color: #fff !important; }

.login-top, .desk-brand > *, .login-sheet { position: relative; z-index: 1; }
.login-top { padding: 44px 24px 30px; animation: lg-sube .6s ease both; }
.login-logo-img { max-width: 168px; margin-bottom: 14px; animation: lg-flota 6s ease-in-out infinite; }

/* Hoja del formulario */
.login-sheet {
  background: #fff !important; border-radius: 30px 30px 0 0;
  padding: 30px 22px 34px; box-shadow: 0 -14px 40px rgba(0,0,0,.28) !important;
  animation: lg-hoja .6s .1s cubic-bezier(.2,.8,.2,1) both;
}
.login-badge span { background: var(--ol-cla); color: var(--ol); }
.login-sheet .login-badge i { color: var(--ol); }

.login-sheet .field-label { color: #5a5a5a; font-size: 11px; letter-spacing: .06em; }
.login-sheet .field-inner input {
  height: 52px; border: 1.5px solid #e2e2e2; background: #f7f7f7; border-radius: 14px;
  font-size: 16px; transition: border-color .18s, box-shadow .18s, background .18s;
}
.login-sheet .field-inner i.lead { color: #8a8a8a; transition: color .18s; }
.login-sheet .field-inner:focus-within i.lead { color: var(--ol); }
.login-sheet .field-inner input:focus {
  border-color: var(--ol); background: #fff; box-shadow: 0 0 0 4px rgba(17,17,17,.12);
}
.login-sheet .eye-btn { color: #8a8a8a; }
.login-sheet .eye-btn:hover { color: var(--ol); }
.login-sheet .help-text { color: #6f6f6f; }
.login-sheet .help-text a { color: var(--ol); font-weight: 600; text-decoration: none; }
.login-sheet .help-text a:hover { text-decoration: underline; }

.login-sheet .btn-login {
  height: 54px; border-radius: 14px; font-size: 16px; letter-spacing: .01em; margin-top: 4px;
  background: linear-gradient(180deg, #2e2e2e, var(--ol)) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.login-sheet .btn-login:hover { filter: brightness(1.08); box-shadow: 0 12px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18); }
.login-sheet .btn-login:active { transform: scale(.98); background: var(--ol-osc) !important; }

.login-sheet .btn-invitado {
  background: #fff; border: 1.5px solid #e2e2e2; color: var(--ol-osc); border-radius: 14px; height: 48px;
  transition: background .15s, border-color .15s;
}
.login-sheet .btn-invitado:hover { background: var(--ol-cla); border-color: #c8c8c8; }
.login-sheet .btn-invitado i { color: var(--ol); }
.login-sheet .login-footer span, .login-sheet .login-footer i { color: #8a8a8a !important; }
.login-sheet .error-box { background: #fdf1ef; border: 1px solid #f0c9c3; color: #7a2a20; border-radius: 12px; }

@keyframes lg-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lg-hoja { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes lg-flota { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Celular bajito: que quepa sin apretar */
@media (max-width: 899px) and (max-height: 700px) {
  .login-top { padding: 22px 24px 16px; }
  .login-logo-img { max-width: 120px; margin-bottom: 8px; }
  .login-sheet { padding-top: 22px; }
}

/* Escritorio */
@media (min-width: 900px) {
  .desk-brand {
    background: transparent !important; color: #fff !important; border-right: 0 !important;
    padding: 56px !important; animation: lg-sube .7s ease both;
  }
  .desk-brand .desk-logo-img { max-width: 230px; margin-bottom: 26px; animation: lg-flota 6s ease-in-out infinite; }
  .desk-titulo { font-size: 38px; line-height: 1.12; font-weight: 800; margin: 0 0 14px; letter-spacing: -.02em; max-width: 420px; }
  .desk-brand p { font-size: 17px !important; opacity: .85 !important; max-width: 380px !important; }
  .desk-feats { margin-top: 38px !important; gap: 14px !important; align-items: stretch !important; width: 100%; max-width: 400px; }
  .desk-feat {
    gap: 14px !important; font-size: 14.5px !important; opacity: 1 !important; text-align: left;
    background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(6px); border-radius: 16px; padding: 14px 16px;
    transition: transform .2s, background .2s;
  }
  .desk-feat:hover { transform: translateX(4px); background: rgba(255,255,255,.14); }
  .desk-feat i {
    font-size: 22px !important; width: 40px; height: 40px; flex: 0 0 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.14); border-radius: 12px;
  }
  .login-sheet {
    flex: 0 0 500px !important; max-width: 500px !important; width: 500px !important;
    padding: 0 64px !important; border-radius: 36px 0 0 36px !important;
    box-shadow: -20px 0 60px rgba(0,0,0,.30) !important;
    animation: lg-entra .7s .1s cubic-bezier(.2,.8,.2,1) both;
  }
  .desk-form-title { font-size: 28px !important; font-weight: 800 !important; color: var(--ol-prof) !important; letter-spacing: -.01em; }
  .desk-form-sub { color: #6f6f6f !important; font-size: 14px !important; margin-bottom: 18px !important; }
  @keyframes lg-entra { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
}
@media (min-width: 900px) and (max-height: 720px) {
  .desk-titulo { font-size: 30px; }
  .desk-feats { margin-top: 24px !important; gap: 10px !important; }
  .desk-feat { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-screen *, .login-screen { animation: none !important; }
}

/* Fondo del logo: negro puro */
.login-screen { background: #000 !important; }
.login-screen::before, .login-screen::after { display: none; }
@media (min-width: 900px) { .desk-brand { background: #000 !important; } }