/* views/login.css · upgrade 2 (20/10/26) · Ingreso a pantalla completa, "Mi cuenta", "Usuarios" y el monograma de
   Gonzalo. Todo bajo .v-login (la pantalla es .v-login--pantalla; las hojas llevan la clase v-login en el diálogo). */

.v-login-abierto, .v-login-abierto body { overflow: hidden; }

/* ---------------------------------------------------------------- pantalla de ingreso */
.v-login--pantalla {
  --v-login-glow: rgb(30 24 112 / .075);
  position: fixed; inset: 0; z-index: 90; overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(1100px 560px at 50% -10%, var(--v-login-glow), transparent 70%), var(--bg);
  color: var(--text); -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v-login--pantalla { --v-login-glow: rgb(173 168 255 / .11); } }
:root[data-theme="dark"] .v-login--pantalla { --v-login-glow: rgb(173 168 255 / .11); }

.v-login__marco {
  box-sizing: border-box; min-height: 100%; display: flex; flex-direction: column; align-items: center;
  padding: max(40px, env(safe-area-inset-top)) var(--gutter-r) max(24px, env(safe-area-inset-bottom)) var(--gutter-l);
}
.v-login__cab { display: grid; justify-items: center; gap: 30px; margin-top: clamp(8px, 7vh, 88px); text-align: center; }
@media (min-width: 600px) and (min-height: 640px) { .v-login__cab { margin-top: auto; padding-top: 24px; } }
.v-login__logo { height: 30px; width: auto; }
.v-login__titulo { margin: 0; font-size: clamp(2.125rem, 1.7rem + 1.5vw, 2.75rem); line-height: 1.08; letter-spacing: -.028em; color: var(--text-strong); }
.v-login__cuerpo { width: 100%; max-width: 900px; display: grid; justify-items: center; margin-top: 10px; animation: v-login-in .32s var(--ease-out) both; }
.v-login__cuerpo[data-paso="clave"] { margin-top: 28px; }
.v-login__sub { margin: 0 0 36px; font-size: 1.0625rem; line-height: 1.4; color: var(--text-2); }

/* personas: tarjetas en escritorio, lista tipo Ajustes en el celular */
.v-login__gente { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.v-login__gente > li { flex: 0 0 calc((100% - 64px) / 5); display: flex; }
.v-login__persona {
  all: unset; box-sizing: border-box; width: 100%; display: grid; justify-items: center; align-content: start; gap: 14px;
  padding: 26px 10px 22px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh-card);
  text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s var(--ease-out);
}
.v-login__persona:hover { transform: translateY(-3px); box-shadow: var(--sh-pop); }
.v-login__persona:active { transform: scale(.98); }
.v-login__persona:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.v-login__emb { display: block; line-height: 0; }
.v-login__emb--chica { display: none; }
.v-login__ptxt { display: grid; gap: 3px; min-width: 0; }
.v-login__nombre { font: 600 1.0625rem/1.25 var(--font-ui); letter-spacing: -.01em; color: var(--text-strong); }
.v-login__puesto { font-size: var(--fs-caption); line-height: 1.3; color: var(--text-3); }
.v-login__chev { display: none; color: var(--text-3); }

@media (max-width: 899.98px) { .v-login__gente > li { flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 599.98px) {
  .v-login__marco { padding-top: calc(max(16px, env(safe-area-inset-top)) + 60px); } /* el logo arranca debajo del botón Modo noche (fijo, 44 px) */
  .v-login__cab { gap: 22px; margin-top: 6px; }
  .v-login__sub { margin-bottom: 20px; }
  .v-login__gente { display: block; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh-card); overflow: hidden; }
  .v-login__gente > li { position: relative; }
  .v-login__gente > li + li::before { content: ""; position: absolute; top: 0; left: 74px; right: 0; border-top: 1px solid var(--line); }
  .v-login__persona { grid-template-columns: 44px minmax(0, 1fr) auto; justify-items: start; align-items: center; gap: 14px; min-height: 70px; padding: 12px 14px 12px 16px; border-radius: 0; background: transparent; box-shadow: none; text-align: left; }
  .v-login__persona:hover { transform: none; box-shadow: none; background: var(--hover); }
  .v-login__persona:active { transform: none; background: var(--press); }
  .v-login__persona:focus-visible { outline-offset: -3px; }
  .v-login__emb--grande { display: none; }
  .v-login__emb--chica { display: block; }
  .v-login__chev { display: block; }
}

/* contraseña */
.v-login__form { width: 100%; max-width: 380px; display: grid; gap: 24px; }
.v-login__elegido { display: grid; justify-items: center; gap: 10px; text-align: center; }
.v-login__hola { margin: 6px 0 0; font: 650 1.375rem/1.2 var(--font-ui); letter-spacing: -.016em; color: var(--text-strong); }
.v-login__volver { margin-top: -6px; }
.v-login__clave { position: relative; }
.v-login__clave .campo__input { padding-right: 92px; }
.v-login__clave--grande .campo__input { min-height: 52px; padding-left: 16px; font-size: 1.0625rem; border-radius: 12px; }
.v-login__mostrar {
  all: unset; box-sizing: border-box; position: absolute; top: 50%; right: 6px; translate: 0 -50%; display: grid; place-items: center;
  min-width: 44px; min-height: 36px; padding: 0 12px; border-radius: 8px; font: 600 var(--fs-small)/1 var(--font-ui); color: var(--accent); cursor: pointer;
}
.v-login__mostrar:hover { background: var(--hover); }
.v-login__mostrar:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.v-login__clave.is-error { animation: v-login-sacudir .42s var(--ease) both; }
.v-login__campo .campo__error { font-size: var(--fs-small); }
.v-login__entrar { min-height: 50px; font-size: 1.0625rem; }

/* pie */
.v-login__pie { max-width: 520px; margin-top: auto; padding-top: 48px; display: grid; justify-items: center; gap: 6px; text-align: center; }
.v-login__pie1 { margin: 0; display: inline-flex; align-items: center; gap: 6px; font: 600 var(--fs-small)/1.3 var(--font-ui); color: var(--text-2); }
.v-login__letra { margin: 0; font-size: var(--fs-caption); line-height: 1.45; color: var(--text-3); }

@keyframes v-login-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes v-login-sacudir { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) {
  .v-login__cuerpo, .v-login__clave.is-error { animation: none; }
  .v-login__persona { transition: none; }
  .v-login__persona:hover, .v-login__persona:active { transform: none; }
}

/* ---------------------------------------------------------------- monograma de Gonzalo (riel, masthead, hojas) */
.v-login__mono { color: #1E1870; --emb-tint: rgb(30 24 112 / .075); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v-login__mono { color: #C4C0FF; --emb-tint: rgb(173 168 255 / .14); } }
:root[data-theme="dark"] .v-login__mono { color: #C4C0FF; --emb-tint: rgb(173 168 255 / .14); }

/* ---------------------------------------------------------------- Mi cuenta, Cambiar contraseña, Usuarios (hojas) */
.v-login .v-login__yo { display: flex; align-items: center; gap: 16px; }
.v-login .v-login__yotxt { display: grid; gap: 2px; min-width: 0; }
.v-login .v-login__yonombre { margin: 0; font: 650 var(--fs-h2)/1.25 var(--font-ui); letter-spacing: -.012em; color: var(--text-strong); }
.v-login .v-login__yolinea { margin: 0; font-size: var(--fs-small); color: var(--text-2); }
.v-login .v-login__yochips { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-small); color: var(--text-3); }
.v-login .v-login__yochips b { color: var(--text-2); font-weight: 600; }
.v-login .v-login__actua { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--azul-bg, var(--info-bg)); }
.v-login .v-login__actua p { margin: 0; flex: 1 1 220px; font-size: var(--fs-small); color: var(--text); }
.v-login .v-login__nota { margin: 0; display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); background: var(--warn-bg); color: var(--warn); font-size: var(--fs-small); font-weight: 500; }
.v-login .v-login__nota[hidden] { display: none; }
.v-login .v-login__nota .ico { flex: none; margin-top: 1px; }
.v-login .lista__item[data-act="cuenta:salir"], .v-login .lista__item[data-act="cuenta:salir"] .ico { color: var(--danger); }
.v-login .v-login__campos { display: grid; gap: 18px; }
.v-login .v-login__usuarios { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.v-login .v-login__usu { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.v-login .v-login__usutxt { flex: 1 1 180px; min-width: 0; }
.v-login .v-login__usunom { margin: 0; font-weight: 600; color: var(--text-strong); }
.v-login .v-login__usud { margin: 2px 0 0; font-size: var(--fs-caption); color: var(--text-3); }
.v-login .v-login__usud [data-estado="fabrica"] { color: var(--warn); font-weight: 600; }
.v-login .v-login__usud [data-estado="propia"] { color: var(--ok); font-weight: 600; }
@media (max-width: 599.98px) { .v-login .v-login__rest { margin-left: 52px; } }

/* ---------------------------------------------------------------- upgrade 4 · ingreso sobre la banda índigo de IMC */
.v-login--pantalla { background: var(--band-solid) var(--hero-gradient); color: #FFFFFF;
  --text: #F1F2F8; --text-strong: #FFFFFF; --text-2: #E6E7F2; --text-3: #D3D5E7; --accent: #FFFFFF; --focus: #FFFFFF; --danger: #FF9A8F; --line: rgb(255 255 255 / .16); }
.v-login--pantalla .marca--clara { display: none; }
.v-login--pantalla .marca--oscura { display: block; }
.v-login--pantalla .v-login__titulo { font: 400 clamp(2.5rem, 2rem + 2vw, 3.5rem)/1.05 var(--font-display); letter-spacing: .006em; color: #FFFFFF; }
.v-login--pantalla .v-login__cab::after { content: ""; width: 48px; height: 3px; background: var(--imc-orange); }
/* Tarjetas e input: claros en modo día, índigo en modo noche (siempre letra con contraste AA sobre su fondo) */
.v-login--pantalla { --lgc-bg: #FFFFFF; --lgc-text: #293340; --lgc-strong: #0F0D3A; --lgc-2: #4C5465; --lgc-3: #5E6575; --lgc-accent: #1E1870;
  --lgc-danger: #C21A1A; --lgc-line: #E3E4E9; --lgc-ring: transparent; --lgc-borde: #84839C; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .v-login--pantalla { --lgc-bg: #181B40; --lgc-text: #E8E9F3; --lgc-strong: #FFFFFF; --lgc-2: #D2D4E6; --lgc-3: #BFC2DA; --lgc-accent: #D9D7FF;
    --lgc-danger: #FF9A8F; --lgc-line: rgb(255 255 255 / .14); --lgc-ring: rgb(255 255 255 / .16); --lgc-borde: rgb(255 255 255 / .45); }
}
:root[data-theme="dark"] .v-login--pantalla { --lgc-bg: #181B40; --lgc-text: #E8E9F3; --lgc-strong: #FFFFFF; --lgc-2: #D2D4E6; --lgc-3: #BFC2DA; --lgc-accent: #D9D7FF;
  --lgc-danger: #FF9A8F; --lgc-line: rgb(255 255 255 / .14); --lgc-ring: rgb(255 255 255 / .16); --lgc-borde: rgb(255 255 255 / .45); }
.v-login--pantalla .v-login__gente, .v-login--pantalla .v-login__clave {
  --surface: var(--lgc-bg); --text: var(--lgc-text); --text-strong: var(--lgc-strong); --text-2: var(--lgc-2); --text-3: var(--lgc-3);
  --accent: var(--lgc-accent); --focus: var(--lgc-accent); --danger: var(--lgc-danger); --line: var(--lgc-line); --control-border: var(--lgc-borde); color: var(--text); }
.v-login--pantalla .campo__input { color: var(--text); }
.v-login--pantalla .v-login__persona { border-radius: 4px; background: var(--lgc-bg); box-shadow: inset 0 3px 0 var(--imc-orange), 0 0 0 1px var(--lgc-ring); }
.v-login--pantalla .v-login__persona:hover { box-shadow: inset 0 3px 0 var(--imc-orange), 0 0 0 1px var(--lgc-ring), 0 14px 30px rgb(0 0 0 / .3); }
.v-login--pantalla .v-login__clave--grande .campo__input { border-radius: 4px; }
@media (max-width: 599.98px) { .v-login--pantalla .v-login__persona, .v-login--pantalla .v-login__persona:hover { box-shadow: none; } .v-login--pantalla .v-login__gente { border-radius: 4px; border-top: 3px solid var(--imc-orange); } }

/* Modo día / noche, arriba a la derecha del ingreso */
.v-login--pantalla .v-login__tema { position: fixed; z-index: 1; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }