@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Open+Sans:wght@400;600&display=swap');

/* Login de la app (modal de components/navbar.py) con el diseño de la maqueta acceso.html (web lyseon sep26).
   Manual de marca Lyseon v1.2. Solo diseño. Todo acotado a .ly-auth (y al modal que lo contiene via :has):
   Dash carga assets/ global y assets/custom.css fuerza label/inputs/botones en naranja con !important. */

/* el modal que contiene el login: ancho de pantalla partida, sin borde ni relleno propios */
.modal-dialog:has(.ly-auth) { max-width: 1080px; }
.modal-content:has(.ly-auth) { border: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 32, 91, .25); }

.ly-auth {
  display: grid;
  grid-template-columns: minmax(380px, 5fr) 7fr;
  min-height: 640px;
  max-height: 92vh;
  font-family: 'Open Sans', Arial, sans-serif;
  color: #333333;
  background: #FFFFFF;
}

/* ---------- panel del formulario ---------- */
.ly-auth__form { display: flex; flex-direction: column; padding: 28px 48px; min-height: 0; overflow: auto; }
.ly-auth__top { display: flex; align-items: center; justify-content: space-between; }
.ly-auth .ly-back { font: 700 14px/1 'Montserrat', Arial, sans-serif; color: #00205B; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.ly-auth .ly-back:hover { color: #DF3500; }
.ly-auth__logo { height: 34px; width: auto; }
.ly-auth__body { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 400px; width: 100%; margin: 0 auto; padding: 24px 0; }
.ly-auth .ly-kicker {
  font: 700 14px/1.4 'Montserrat', Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .1em;
  color: #DF3500; display: inline-block; margin-bottom: 12px;
}
.ly-auth .ly-kicker--dark { color: #FF5722; }
.ly-auth h1 { font: 700 30px/1.25 'Montserrat', Arial, sans-serif !important; color: #00205B !important; margin: 0 0 8px; }
.ly-auth .ly-sub { color: #555555; margin: 0 0 22px; }
.ly-auth .ly-feedback {
  font-size: 13px; line-height: 1.4; color: #555555;
  background: #F4F6F8; border-radius: 4px; padding: 10px 12px; margin-bottom: 18px;
}

/* campos */
.ly-auth .ly-field { margin-bottom: 18px; }
.ly-auth .ly-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ly-auth .ly-label label { font: 700 14px/1 'Montserrat', Arial, sans-serif !important; color: #00205B !important; margin: 0; }
.ly-auth .ly-input { position: relative; }
.ly-auth .ly-input .ly-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #888888; font-size: 15px; z-index: 2; pointer-events: none; }
.ly-auth .ly-input input.form-control,
.ly-auth .ly-input input {
  width: 100%; height: 48px; padding: 0 44px 0 42px;
  font: 400 15px 'Open Sans', Arial, sans-serif; color: #333333 !important;
  background: #FFFFFF !important;
  border: 1px solid #DDDDDD !important; border-radius: 4px !important;
  box-shadow: none; transition: border-color .2s, box-shadow .2s;
}
.ly-auth .ly-input input:focus { outline: none; border-color: #00205B !important; box-shadow: 0 0 0 3px #E6E9EF !important; }
.ly-auth .ly-passwrap { position: relative; }
.ly-auth .ly-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #555555; cursor: pointer; padding: 10px; font-size: 15px; z-index: 3;
}
.ly-auth .ly-eye:hover { color: #00205B; }
.ly-auth .ly-link { font: 600 13px/1 'Open Sans', Arial, sans-serif; color: #DF3500 !important; padding: 0; border: 0; text-decoration: none; background: none; box-shadow: none; }
.ly-auth .ly-link:hover { text-decoration: underline; }

/* boton principal: naranja con texto Navy (<19px), mayuscula, Montserrat */
.ly-auth .ly-btn-main {
  width: 100%; margin-top: 4px; padding: 15px 25px;
  font: 700 14px/1 'Montserrat', Arial, sans-serif; text-transform: uppercase; letter-spacing: .06em;
  background: #FF5722 !important; border: 2px solid #FF5722 !important; color: #00205B !important; border-radius: 4px;
  transition: background .2s, border-color .2s, color .2s;
}
.ly-auth .ly-btn-main:hover { background: #DF3500 !important; border-color: #DF3500 !important; color: #FFFFFF !important; }
.ly-auth .ly-btn-main:active { transform: translateY(1px); }
.ly-auth .ly-btn-main:focus-visible { outline: 3px solid #FF5722; outline-offset: 2px; }

.ly-auth .ly-help { margin-top: 24px; padding-top: 20px; border-top: 1px solid #DDDDDD; font-size: 14px; color: #555555; }
.ly-auth .ly-help a { color: #DF3500; font-weight: 600; text-decoration: none; }
.ly-auth .ly-help a:hover { text-decoration: underline; }
.ly-auth__legal { font-size: 14px; color: #555555; display: flex; gap: 8px; align-items: center; }
.ly-auth__legal i { color: #2E7D32; }

/* ---------- panel de marca ---------- */
.ly-auth__brand {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 48px 56px;
  color: #FFFFFF;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><g fill='none' stroke='white' stroke-opacity='.08' stroke-width='14'><circle cx='200' cy='130' r='110'/><circle cx='135' cy='245' r='110'/><circle cx='265' cy='245' r='110'/></g></svg>") no-repeat right -140px top -120px / 560px,
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(135deg, #00205B 0%, #001337 100%);
}
.ly-brand__inner { position: relative; z-index: 2; max-width: 560px; }
.ly-auth__brand h2 { font: 700 32px/1.25 'Montserrat', Arial, sans-serif !important; color: #FFFFFF !important; margin: 0 0 14px; }
.ly-auth__brand h2 .ly-accent { color: #FF5722; }
.ly-auth__brand p { color: rgba(255,255,255,.85); font-size: 17px; margin: 0 0 32px; }
.ly-layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ly-layers li {
  display: flex; gap: 16px; align-items: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
  padding: 14px 18px; color: rgba(255,255,255,.8); font-size: 15px;
}
.ly-layers li > span {
  width: 42px; height: 42px; flex: none; border-radius: 8px; background: rgba(255,255,255,.1);
  display: grid; place-items: center; color: #FF5722; font-size: 18px;
}
.ly-layers li b { display: block; font: 700 16px/1.3 'Montserrat', Arial, sans-serif; color: #FFFFFF; }

/* notebooks / pantallas bajas */
@media (max-height: 760px) {
  .ly-auth { min-height: 0; }
  .ly-auth__form { padding: 18px 40px; }
  .ly-auth__body { padding: 8px 0; }
  .ly-auth h1 { font-size: 26px; }
  .ly-auth .ly-sub { margin-bottom: 14px; }
  .ly-auth .ly-field { margin-bottom: 12px; }
  .ly-auth .ly-input input { height: 42px; }
  .ly-auth .ly-help { margin-top: 14px; padding-top: 12px; }
  .ly-auth__brand { padding: 32px 48px; }
  .ly-auth__brand h2 { font-size: 26px; }
  .ly-auth__brand p { margin-bottom: 18px; font-size: 15px; }
}
/* celulares: solo el formulario */
@media (max-width: 960px) {
  .modal-dialog:has(.ly-auth) { max-width: 520px; }
  .ly-auth { grid-template-columns: 1fr; min-height: 0; }
  .ly-auth__brand { display: none; }
  .ly-auth__form { padding: 24px 20px; }
}

/* ===== 2026-10-07: el login ya no es un popup sino una PANTALLA COMPLETA (dbc.Modal fullscreen, sin backdrop) ===== */
.modal-dialog.modal-fullscreen:has(.ly-auth) { max-width: none; }
.modal-fullscreen .modal-content:has(.ly-auth) { border-radius: 0; box-shadow: none; }
.modal-fullscreen .ly-auth { min-height: 100vh; height: 100vh; max-height: none; grid-template-columns: minmax(420px, 5fr) 7fr; }
.modal-fullscreen .ly-auth__form { padding: 32px 56px; }
.modal-fullscreen .ly-auth__brand { padding: 64px; }
@media (max-width: 960px) {
  .modal-fullscreen .ly-auth { grid-template-columns: 1fr; height: auto; }
  .modal-fullscreen .ly-auth__form { padding: 24px 16px; }
}

/* boton "Ver dashboard demo" del login: mismo tamaño y tipografia que "Ingresar", version contorno (secundario) */
.ly-auth .ly-btn-demo-login {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 10px; padding: 15px 25px;
  font: 700 14px/1 'Montserrat', Arial, sans-serif; text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  background: transparent; border: 2px solid #00205B; color: #00205B; border-radius: 4px; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.ly-auth .ly-btn-demo-login:hover { background: #00205B; color: #FFFFFF; }
.ly-auth .ly-btn-demo-login:focus-visible { outline: 3px solid #FF5722; outline-offset: 2px; }
@media (max-height: 760px) { .ly-auth .ly-btn-demo-login { padding: 12px 25px; margin-top: 8px; } }