/* ════════════════════════════════════════════════════════ */
/*                      LOGIN SCREEN                        */
/* ════════════════════════════════════════════════════════ */

#login-screen {
  position: fixed;
  inset: 0;
  background: #0a0a0a;
  z-index: 9000;
  display: flex;
  align-items: stretch;
  justify-content: center;
  animation: loginFadeIn .4s ease both;}

@keyframes loginFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }}

/* ════════════════════════════════════════════════════════ */
/*                     PANEL IZQUIERDO                      */
/* ════════════════════════════════════════════════════════ */

.login-left {
  flex: 0 0 55%;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, rgba(232,96,44,.18) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,.4) 0%, transparent 60%),
    linear-gradient(145deg, #111 0%, #0a0a0a 100%);
  display: flex;
  align-items: flex-end;
  padding: 40px;}

/* Balanza SVG central */
.login-left-visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .13;}

.login-left-visual svg {
  width: 340px;
  height: 340px;
  filter: drop-shadow(0 0 40px rgba(232,96,44,.3));}

/* Branding inferior izquierdo */
.login-left-brand {
  position: relative;
  z-index: 2;}

.login-left-brand-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.2px;}

.login-left-brand-title span {
  color: var(--acc);}

.login-left-brand-sub {
  font-size: 12px;
  color: rgba(255,255,255,.35);
  margin-top: 4px;}

/* Línea divisora vertical */
.login-divider {
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.06) 30%, rgba(255,255,255,.06) 70%, transparent);
  flex-shrink: 0;}

/* ════════════════════════════════════════════════════════ */
/*                     PANEL DERECHO                        */
/* ════════════════════════════════════════════════════════ */

.login-right {
  flex: 0 0 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: #0d0d0d;}

/* ════════════════════════════════════════════════════════ */
/*                       LOGIN BOX                          */
/* ════════════════════════════════════════════════════════ */

.login-box {
  width: 100%;
  max-width: 360px;
  animation: loginSlideUp .45s cubic-bezier(.16,1,.3,1) both;}

@keyframes loginSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }}

/* ════════════════════════════════════════════════════════ */
/*                          LOGO                            */
/* ════════════════════════════════════════════════════════ */

.login-logo {
  width: 48px;
  height: 48px;
  background: var(--acc);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 18px;
  box-shadow: 0 8px 24px rgba(232,96,44,.35);
  transition: transform .2s ease;}

.login-logo:hover { transform: scale(1.06); }

/* ════════════════════════════════════════════════════════ */
/*                       HEADER TEXT                        */
/* ════════════════════════════════════════════════════════ */

.login-title {
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  color: #fff;
  letter-spacing: -.4px;
  line-height: 1.1;
  margin-bottom: 2px;}

.login-title-law {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--acc);
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: .02em;}

.login-sub {
  font-size: 12px;
  color: var(--text2);
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.5;}

/* ════════════════════════════════════════════════════════ */
/*                   SELECTOR CLIENTE/ABOGADO               */
/* ════════════════════════════════════════════════════════ */

.login-role-selector {
  display: flex;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 22px;
  gap: 3px;}

.role-btn {
  flex: 1;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  background: transparent;
  color: rgba(255,255,255,.4);}

.role-btn.active {
  background: var(--acc);
  color: #fff;
  box-shadow: 0 4px 12px rgba(232,96,44,.3);}

.role-btn:not(.active):hover {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);}

/* ════════════════════════════════════════════════════════ */
/*                          CAMPOS                          */
/* ════════════════════════════════════════════════════════ */

.login-field {
  margin-bottom: 12px;
  position: relative;}

.login-field label {
  font-size: 11.5px;
  color: rgba(255,255,255,.5);
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  letter-spacing: .02em;}

.login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;}

.login-input-icon {
  position: absolute;
  left: 13px;
  font-size: 14px;
  color: rgba(255,255,255,.25);
  pointer-events: none;
  z-index: 1;}

.login-field input {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  padding: 11px 14px 11px 38px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;}

.login-field input::placeholder {
  color: rgba(255,255,255,.2);
  font-size: 12.5px;}

.login-field input:focus {
  border-color: rgba(232,96,44,.5);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 3px rgba(232,96,44,.1);}

.login-field input.input-error {
  border-color: rgba(239,68,68,.5);
  box-shadow: 0 0 0 3px rgba(239,68,68,.1);
  animation: shake .35s ease;}

.login-field input.input-success {
  border-color: rgba(34,197,94,.4);
  box-shadow: 0 0 0 3px rgba(34,197,94,.1);}

/* Ojo contraseña */
.login-eye {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,.25);
  font-size: 15px;
  padding: 4px;
  transition: color .15s ease;
  z-index: 1;}

.login-eye:hover { color: rgba(255,255,255,.6); }

@keyframes shake {
  0%,100% { transform: translateX(0);    }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px);  }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px);  }}

/* ════════════════════════════════════════════════════════ */
/*                    RECUPERAR CONTRASEÑA                  */
/* ════════════════════════════════════════════════════════ */

.login-forgot {
  display: block;
  text-align: right;
  font-size: 11.5px;
  color: var(--acc);
  margin-bottom: 18px;
  cursor: pointer;
  transition: opacity .15s ease;
  background: none;
  border: none;
  font-family: inherit;
  width: 100%;
  opacity: .7;}

.login-forgot:hover { opacity: 1; }

/* ════════════════════════════════════════════════════════ */
/*                     BOTON PRINCIPAL                      */
/* ════════════════════════════════════════════════════════ */

.login-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: .03em;
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 4px 20px rgba(232,96,44,.35);
  position: relative;
  overflow: hidden;}

.login-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.1), transparent);
  pointer-events: none;}

.login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(232,96,44,.45);}

.login-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(232,96,44,.3);}

.login-btn.loading {
  opacity: .6;
  cursor: not-allowed;
  transform: none;}

/* ════════════════════════════════════════════════════════ */
/*                       ERROR MESSAGE                      */
/* ════════════════════════════════════════════════════════ */

.login-err {
  font-size: 12px;
  color: var(--red);
  text-align: center;
  margin-top: 10px;
  min-height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;}

/* ════════════════════════════════════════════════════════ */
/*                       DIVISOR + FOOTER                   */
/* ════════════════════════════════════════════════════════ */

.login-divider-text {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
  color: rgba(255,255,255,.15);
  font-size: 11px;}

.login-divider-text::before,
.login-divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.07);}

.login-register {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,.3);}

.login-register a {
  color: var(--acc);
  text-decoration: none;
  font-weight: 600;
  transition: opacity .15s ease;
  cursor: pointer;}

.login-register a:hover { opacity: .75; }

.login-hint {
  font-size: 11px;
  color: rgba(255,255,255,.15);
  text-align: center;
  margin-top: 14px;}

/* ════════════════════════════════════════════════════════ */
/*                       RESPONSIVE                         */
/* ════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .login-left,
  .login-divider {
    display: none;}

  .login-right {
    flex: 1;
    padding: 32px 24px;}}

/* ════════════════════════════════════════════════════════ */
/*                        LIGHT MODE                        */
/* ════════════════════════════════════════════════════════ */

.light #login-screen {
  background: #f0efe9;}

.light .login-left {
  background:
    radial-gradient(circle at 20% 30%, rgba(232,96,44,.12) 0%, transparent 55%),
    linear-gradient(145deg, #e8e7e0 0%, #dddcd4 100%);}

.light .login-right {
  background: #f4f3ef;}

.light .login-field input {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.1);
  color: #111;}

.light .login-field input::placeholder {
  color: rgba(0,0,0,.3);}

.light .login-role-selector {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.08);}

.light .role-btn {
  color: rgba(0,0,0,.4);}

.light .login-title { color: #111; }
.light .login-divider-text { color: rgba(0,0,0,.2); }
.light .login-register { color: rgba(0,0,0,.4); }
.light .login-hint { color: rgba(0,0,0,.25); }