/* LELA'S / DIEGUIÑO — visual correction layer
   Prevents login and dashboard styles from leaking into each other. */

:root {
  --lelas-bg: #ffffff;
  --lelas-surface: #ffffff;
  --lelas-surface-soft: #fbfaf6;
  --lelas-border: #e2dccb;
  --lelas-border-strong: #c8bea1;
  --lelas-title: #2f2a27;
  --lelas-text: #403c39;
  --lelas-text-secondary: #746c65;
  --lelas-muted: #8c8279;
  --lelas-coral: #ff8d6e;
  --lelas-coral-dark: #cf795f;
  --lelas-navy: #425563;
}

html { color-scheme: light; }

body.dashboard-authenticated {
  background: var(--lelas-bg) !important;
  color: var(--lelas-text) !important;
  font-family: "Mulish", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.dashboard-authenticated #appShell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
}

@media (max-width: 980px) {
  body.dashboard-authenticated #appShell { display: block; }
}

#appShell {
  --bg: var(--lelas-bg);
  --panel: var(--lelas-surface);
  --panel-soft: var(--lelas-surface-soft);
  --line: var(--lelas-border);
  --line-strong: var(--lelas-border-strong);
  --text: var(--lelas-text);
  --muted: var(--lelas-muted);
  --green: var(--lelas-coral);
  --green-2: var(--lelas-coral-dark);
  --blue: var(--lelas-navy);
  min-height: 100vh;
  color: var(--lelas-text);
  background: var(--lelas-bg);
  font-family: "Mulish", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#appShell *,
#appShell *::before,
#appShell *::after { box-sizing: border-box; }

#appShell button,
#appShell input,
#appShell select,
#appShell textarea { font-family: inherit; }

#appShell h1,
#appShell h2,
#appShell h3,
#appShell h4,
#appShell .hero-title,
#appShell .section-title,
#appShell .card-title,
#appShell .executive-title {
  color: var(--lelas-title);
  text-wrap: balance;
}

#appShell p,
#appShell small,
#appShell .muted,
#appShell .subtitle,
#appShell .card-subtitle {
  text-rendering: optimizeLegibility;
}

/* Login visual system: isolated from the dashboard. */
#dialduLogin {
  --login-cyan: #19f2f4;
  --login-cyan-soft: rgba(25, 242, 244, .14);
  --login-white: #ffffff;
  --login-text: rgba(255, 255, 255, .90);
  --login-muted: rgba(255, 255, 255, .68);
  --login-border: rgba(255, 255, 255, .25);
  --login-surface: rgba(5, 7, 9, .70);
  color: var(--login-white);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#dialduLogin .v7-login-card {
  border: 1px solid rgba(255,255,255,.34);
  background:
    linear-gradient(180deg, rgba(18, 21, 24, .76), rgba(2, 3, 4, .88)),
    rgba(0,0,0,.70);
  box-shadow:
    0 32px 100px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.11);
}

#dialduLogin .v7-login-card .field {
  display: block;
  gap: 0;
  margin-bottom: 0;
}

#dialduLogin .field-label {
  margin-bottom: 9px;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
}

#dialduLogin .control {
  height: 58px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 13px;
  background: rgba(2, 4, 6, .58);
  box-shadow: none;
}

#dialduLogin .control:hover {
  border-color: rgba(255,255,255,.40);
  background: rgba(2,4,6,.68);
}

#dialduLogin .control:focus-within {
  border-color: rgba(25,242,244,.86);
  background: rgba(2,4,6,.78);
  box-shadow: 0 0 0 3px rgba(25,242,244,.10), 0 0 28px rgba(25,242,244,.08);
}

#dialduLogin .control > svg {
  width: 20px;
  height: 20px;
  margin-left: 17px;
  color: rgba(255,255,255,.76);
}

#dialduLogin .control input,
#dialduLogin .v7-login-card .field input {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  height: 100%;
  padding: 0 13px;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  caret-color: var(--login-cyan);
  font-size: 16px;
  font-weight: 600;
}

#dialduLogin .control input:-webkit-autofill,
#dialduLogin .control input:-webkit-autofill:hover,
#dialduLogin .control input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #080b0d inset !important;
  transition: background-color 9999s ease-out 0s;
}

#dialduLogin .control input::placeholder {
  color: #8fa7b4;
  opacity: .82;
  font-weight: 500;
}

#dialduLogin .password-toggle {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0 6px 0 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255,255,255,.72);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}

#dialduLogin .password-toggle::before { display: none; }

#dialduLogin .password-toggle:hover,
#dialduLogin .password-toggle:focus-visible {
  transform: none;
  border: 0;
  background: rgba(255,255,255,.075);
  color: var(--login-cyan);
  box-shadow: none;
  outline: 2px solid transparent;
}

#dialduLogin .password-toggle:active {
  transform: scale(.96);
  box-shadow: none;
}

#dialduLogin .password-toggle svg {
  position: static;
  width: 21px;
  height: 21px;
  margin: 0;
  stroke: currentColor;
}


#dialduLogin .control .password-toggle svg {
  position: static;
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  margin: 0;
}

#dialduLogin .password-toggle .eye-closed { display: none; }
#dialduLogin .password-toggle[aria-pressed="true"] .eye-open { display: none; }
#dialduLogin .password-toggle[aria-pressed="true"] .eye-closed { display: block; }

#dialduLogin .submit {
  height: 59px;
  margin-top: 27px;
  border: 1px solid rgba(25,242,244,.52);
  border-radius: 14px;
  background: linear-gradient(180deg, #151a1d 0%, #050708 100%);
  color: #fff;
  box-shadow:
    0 18px 38px rgba(0,0,0,.44),
    0 0 0 1px rgba(25,242,244,.035),
    inset 0 1px 0 rgba(255,255,255,.12);
  text-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#dialduLogin .submit::after {
  inset: 0;
  border: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(25,242,244,.055), transparent);
  box-shadow: none;
}

#dialduLogin .submit:hover,
#dialduLogin .submit:focus-visible {
  transform: translateY(-2px);
  filter: none;
  border-color: rgba(25,242,244,.92);
  background: linear-gradient(180deg, #192125 0%, #06090a 100%);
  color: #fff;
  box-shadow:
    0 22px 48px rgba(0,0,0,.52),
    0 0 28px rgba(25,242,244,.13),
    inset 0 1px 0 rgba(255,255,255,.15);
}

#dialduLogin .submit:active,
#dialduLogin .submit.is-pressed {
  transform: translateY(1px);
  filter: none;
  box-shadow: 0 10px 22px rgba(0,0,0,.44), inset 0 2px 8px rgba(0,0,0,.50);
}

#dialduLogin .submit svg {
  right: 20px;
  width: 24px;
  height: 24px;
  filter: none;
}

#dialduLogin .submit-label {
  position: relative;
  z-index: 2;
  color: inherit;
}

#dialduLogin .submit-spinner {
  display: none;
  position: absolute;
  left: 20px;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.20);
  border-top-color: var(--login-cyan);
  border-radius: 50%;
  animation: dialduSpin .72s linear infinite;
}

#dialduLogin .submit.is-loading .submit-spinner { display: block; }
#dialduLogin .submit.is-loading .submit-label { color: #cfffff; }
#dialduLogin .submit[disabled] {
  opacity: 1;
  cursor: wait;
  filter: none;
  border-color: rgba(25,242,244,.74);
  background: linear-gradient(180deg, #11191c 0%, #050708 100%);
}

#dialduLogin .login-error {
  min-height: 20px;
  margin-top: 12px;
  color: #ffaaa8;
  font-weight: 700;
}

@keyframes dialduSpin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  #dialduLogin .control,
  #dialduLogin .submit { height: 55px; }
  #dialduLogin .control input,
  #dialduLogin .v7-login-card .field input { font-size: 15px; }
}