/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/style.less to edit this template
*/
/*
    Created on : 08/17/2022, 9:47:20 p. m.
    Author     : lflince
*/
/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/style.less to edit this template
*/
/*
    Created on : 08/09/2023, 12:28:07 p. m.
    Author     : lflince
*/
/* CRITERIO "VISTA MÓVIL vs GRILLA" de las libretas/ausencias (2026-08-18):
   móvil = ancho < 768px  O  (poca ALTURA y puntero táctil) — un teléfono
   girado en horizontal (p. ej. 915x412) es un teléfono, no una tableta: usa
   el formulario de captura móvil, no la grilla + pad con ~100px de hoja.
   La coma es OR (soportado en todos los navegadores). El JS replica la
   MISMA cadena en esMovil() (libretas.js / asistencia.js): mantener iguales. */
html,
body {
  height: 100%;
  overflow: hidden;
}
/* El gradiente de la portada, en UNA variable LESS para pintarlo dos veces
   idéntico (html + ion-content). Shorthand multi-capa: el color base va con la
   ÚLTIMA capa (sintaxis CSS). Radios RELATIVOS al viewport (no px fijos): con
   900px/1100px fijos, en LANDSCAPE móvil (~900x400) el círculo se salía y la
   mancha se veía recortada/desplazada al rotar. `farthest-corner`-like con
   vmax mantiene la proporción en portrait, landscape y escritorio. */
/* LIENZO (2026-08-17, MEDIDO en local): el `body { background: hsl(...) }` que
   había aquí NO valía — ionic.bundle.css se carga DESPUÉS y trae
   `body { background: var(--ion-background-color) }` (variable sin definir ⇒
   transparente) ⇒ el lienzo del navegador quedaba BLANCO. Ese blanco es lo que
   asomaba en Android como "degradado recortado" abajo (tras teclado o al
   rotar) y como "halo blanco" bajo ACCEDER en landscape: toda zona que la capa
   de fondo del ion-content no alcance (padding fantasma --keyboard-offset,
   scroll extra, barra del navegador) enseña el lienzo.
   FIX: el MISMO gradiente en `html` (Ionic no toca `html`; el fondo del root
   se propaga al lienzo ENTERO, incluso más allá del 100% de alto), así lo que
   asome es la continuación del degradado y no blanco. Se conserva además en el
   ion-content (ver abajo): ambos se posicionan sobre la misma caja (viewport),
   así que coinciden sin costura. */
html {
  background: radial-gradient(75vmax circle at 5% 10%, hsl(230, 75%, 38%) 10%, hsl(230, 70%, 30%) 30%, hsl(230, 65%, 22%) 65%, transparent 100%), radial-gradient(90vmax circle at 95% 90%, hsl(265, 65%, 42%) 5%, hsl(265, 60%, 32%) 30%, hsl(265, 55%, 22%) 65%, transparent 100%) hsl(225, 70%, 14%);
  /* Más allá de la caja del html (p. ej. al ocultarse la barra del navegador
       en Android) el lienzo NO debe repetir las capas radiales (saldría otra
       mancha azul): solo se extiende el color base oscuro. */
  background-repeat: no-repeat;
}
/* Fondo de la portada: EL MISMO de Syntitax (Syntitax/web/css/login.css) —
   azul profundo con gradientes radiales azul/púrpura y formas difuminadas.
   ADAPTADO A IONIC (2026-08-17): el gradiente es el --background del PROPIO
   ion-content, no de un div hijo. Motivo, medido con chrome://inspect en
   Android: al abrir el teclado Ionic añade a su contenido el padding
   `--keyboard-offset` (p. ej. 374px) para que el campo enfocado no quede tapado
   — comportamiento correcto que NO se toca. Con el gradiente en un div hijo
   (.bodyDIV height:100%), ese div encogía con el contenido y los 374px
   restantes se veían con el fondo blanco por defecto del ion-content. Como
   --background lo pinta la capa de fondo del componente (que cubre TODO el
   ion-content, independiente del padding), el gradiente ya no desaparece.
   Sin background-attachment: fixed (no aplica a la variable y en Android no
   está soportado). */
ion-content.login-content {
  --background: radial-gradient(75vmax circle at 5% 10%, hsl(230, 75%, 38%) 10%, hsl(230, 70%, 30%) 30%, hsl(230, 65%, 22%) 65%, transparent 100%), radial-gradient(90vmax circle at 95% 90%, hsl(265, 65%, 42%) 5%, hsl(265, 60%, 32%) 30%, hsl(265, 55%, 22%) 65%, transparent 100%) hsl(225, 70%, 14%);
}
#radius-shape-1 {
  width: 280px;
  height: 280px;
  top: -80px;
  left: -100px;
  background: radial-gradient(hsl(230, 80%, 50%) 0%, hsl(230, 70%, 65%) 60%, transparent 100%);
  border-radius: 50%;
  opacity: 0.45;
  filter: blur(40px);
  overflow: hidden;
}
#radius-shape-2 {
  width: 360px;
  height: 360px;
  bottom: -100px;
  right: -120px;
  background: radial-gradient(hsl(265, 70%, 50%) 0%, hsl(270, 60%, 60%) 50%, transparent 100%);
  border-radius: 35% 65% 60% 40% / 55% 40% 60% 45%;
  opacity: 0.4;
  filter: blur(45px);
  transform: rotate(-15deg);
  overflow: hidden;
}
#radius-shape-3 {
  width: 200px;
  height: 200px;
  top: 40%;
  right: 10%;
  background: radial-gradient(hsl(200, 80%, 55%) 0%, hsl(210, 70%, 45%) 60%, transparent 100%);
  border-radius: 60% 40% 50% 50% / 45% 55% 45% 55%;
  opacity: 0.3;
  filter: blur(50px);
  transform: rotate(20deg);
  overflow: hidden;
}
.bodyDIV {
  position: static;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.fontMainPortada {
  color: black;
  text-align: left;
}
.footerMainPortada {
  font-size: 0.875rem;
  color: black;
  text-align: left;
  margin-bottom: 0px;
}
.loginMainDiv {
  background: transparent;
  background-color: transparent;
  position: relative;
  overflow: auto;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}
.loginDiv {
  background: transparent;
  background-color: transparent;
  position: absolute;
  left: 50%;
  width: 340px;
  /* modo UN panel: solo el formulario */
  margin-left: -170px;
  /* centrado */
  margin-top: 0;
  line-height: 1.5;
}
/* ===== MAQUETACIÓN DE LA PORTADA (2026-08-18) =====
   El JS (login.js) solo decide el MODO poniendo .login-dos o .login-uno en
   <body>; el layout vive aquí. DOS paneles = flex centrado y FLEXIBLE: el
   hueco entre paneles va de 50px (escritorio) a 20px, y la bienvenida puede
   encogerse de 400px hasta 300px; el formulario es fijo (340px: Turnstile
   exige >=300px de widget). Así en una tableta vertical (~800px) los dos
   paneles CABEN centrados (antes: 808px fijos ⇒ bienvenida pegada al borde).
   Por debajo de 700px (o en teléfono) el JS pasa a UN panel. */
.login-dos .loginDiv {
  left: 0;
  right: 0;
  width: auto;
  margin-left: 0;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(20px, 6vw, 50px);
}
.login-dos #titleWhenReduced {
  display: none;
}
#loginBienvenidoDIV {
  flex: 0 1 400px;
  min-width: 300px;
  max-width: 400px;
  margin-top: 6rem;
  padding-top: 0px;
  visibility: hidden;
}
.login-uno #loginBienvenidoDIV {
  display: none;
}
#loginUserAndPasswordDIV {
  width: 340px;
  /* Turnstile flexible exige >=300px de widget + padding del panel */
  flex: 0 0 340px;
  margin-top: 6rem;
  padding-top: 0px;
  visibility: hidden;
}
.login-uno #titleWhenReduced {
  display: block;
}
.colorFontWelcome {
  color: black;
}
a:link.LinkEdualianza {
  text-decoration: none;
  font-weight: normal;
  color: black;
}
a:visited.LinkEdualianza {
  text-decoration: none;
  font-weight: normal;
  color: black;
}
a:hover.LinkEdualianza {
  color: black;
  font-weight: normal;
  text-decoration: underline;
}
#titleWhenReduced {
  display: none;
}
.d-none {
  display: none !important;
}
/* Capa de las manchas difuminadas: FIJA al viewport (2026-08-17, MEDIDO en
   local). Antes era absolute con height:100% de .loginMainDiv, que en móvil
   es height:auto (= alto del contenido); su overflow:hidden recortaba la
   mancha #radius-shape-2 con una COSTURA horizontal justo al pie del contenido
   — el "degradado cortado a la altura del contenido" que se veía tras el
   teclado o al rotar. Fija (inset:0) cubre siempre la pantalla completa; ion-app
   (contain: layout) es su bloque contenedor = viewport. pointer-events:none
   por si acaso: es decoración. */
.login-shapes-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.login-shape {
  position: absolute;
}
.login-panel-light {
  background-color: #f8f9fa;
  border-radius: 0.375rem;
}
.login-brand-row {
  display: flex;
  margin-left: 0;
  margin-right: 0;
}
/* La fila de marca (logo + texto) es un <a> a la landing (www.sgeprof.com):
   sin subrayado ni color de enlace, hereda el blanco de los textos. */
.login-brand-link,
.login-brand-link:link,
.login-brand-link:visited,
.login-brand-link:hover {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
/* Panel de bienvenida (SOLO escritorio): el logo (55px) es más bajo que las
   dos líneas de texto; se centra verticalmente respecto a ellas y se quita
   el margen inferior sobrante del subtítulo (16px muertos). El panel móvil
   (#titleWhenReduced) no se toca. */
#loginBienvenidoDIV .login-brand-row {
  align-items: center;
}
#loginBienvenidoDIV .login-brand-col p {
  margin: 0.5rem 0 0 0;
}
.login-brand-row-center {
  justify-content: center;
  align-items: center;
}
.login-brand-col {
  padding-left: 0;
  padding-right: 0;
}
.login-brand-logo {
  margin-right: 0.5rem;
}
.login-heading {
  margin-top: 0;
  margin-bottom: 0;
}
.login-heading-sup {
  font-size: 0.875rem;
}
.login-title-reduced {
  text-align: center;
  margin-bottom: 1rem;
}
.login-error {
  background-color: #fff3cd;
  color: #664d03;
  border: 1px solid #ffecb5;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.login-error-close {
  border: 0;
  background: transparent;
  color: #664d03;
  padding: 0;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
/* MÓVIL / UN SOLO PANEL (mismo umbral que login.js: < 700px): con el teclado abierto Ionic
   encoge el área de contenido (--keyboard-offset) y el .loginDiv, que es
   position:absolute con ALTO FIJO (403px) dentro de contenedores height:100% +
   overflow:hidden, quedaba AMPUTADO (el botón ACCEDER fuera del área visible).
   Adaptación a Ionic: en móvil el contenido FLUYE (alto automático) y el
   ion-content puede scrollear hasta el botón, como en cualquier página Ionic.
   El escritorio conserva su maquetación absoluta intacta. */
@media screen and (max-width: 699.98px) {
  /* El centrado horizontal (left:50% + margin-left inline de login.js) se
       conserva; solo se libera el ALTO y el recorte para que el ion-content
       scrollee hasta el botón. */
  /* MEDIDO en Android (chrome://inspect): quien recortaba era .loginMainDiv
       (height:100% => 327px con overflow:auto — un scroller intermedio que ni
       Ionic ni Chrome desplazan solos), y ese 327 PERSISTÍA tras cerrar el
       teclado porque Ionic no siempre limpia su --keyboard-offset en web. En
       móvil no debe haber scroller intermedio: el único que scrollea es el
       inner-scroll del ion-content. */
  .bodyDIV,
  .loginMainDiv {
    height: auto;
    overflow: visible;
  }
  /* relative (no absolute) para que el panel dé ALTURA a sus contenedores y
       el inner-scroll de Ionic tenga qué scrollear. El centrado: login.js pone
       INLINE margin-left:-156px (pensado para absolute+left:50%); en relative
       eso descentra 7px, así que aquí se anula (!important: es la única forma
       de ganar al inline) y se centra con left:50% + translateX(-50%), que el
       JS no toca y vale para cualquier ancho. */
  .loginDiv {
    position: relative;
    left: 50%;
    margin-left: 0 !important;
    transform: translateX(-50%);
    height: auto;
    padding-bottom: 1rem;
  }
}
/* Small devices (landscape phones, 544px and down) */
@media screen and (orientation: landscape) and (max-width: 767px) {
  #loginUserAndPasswordDIV {
    margin-top: 1rem;
  }
}
/* Medium devices (tablets, 768px and up) */
@media screen and (orientation: landscape) and (min-width: 768px) {
  #loginUserAndPasswordDIV {
    margin-top: 6rem;
  }
}
/* ===================================================================
   CONTROLES CON EL ESQUEMA DE SYNTITAX (glassmorphism): paneles de
   cristal translúcido con blur sobre el gradiente, texto blanco, inputs
   de cristal y botón azul intenso (Syntitax/web/css/login.css).
   =================================================================== */
.content_semiop_gray.login-panel-light {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
/* Textos del panel de bienvenida y del formulario: blanco sobre el cristal */
.colorFontWelcome,
.login-heading,
#titleWhenReduced .login-heading {
  color: #fff;
}
.footerMainPortada,
a:link.LinkEdualianza,
a:visited.LinkEdualianza {
  color: rgba(255, 255, 255, 0.6);
}
a:hover.LinkEdualianza {
  color: rgba(255, 255, 255, 0.85);
}
/* Campos: cristal, texto blanco, foco azul Syntitax */
#formLogin ion-item,
#formCambiarPwd ion-item {
  --background: rgba(255, 255, 255, 0.08);
  --color: #fff;
  --border-color: rgba(255, 255, 255, 0.2);
  --highlight-color-focused: hsl(220, 90%, 65%);
  --border-radius: 8px;
  margin-bottom: 10px;
}
#formLogin ion-input,
#formCambiarPwd ion-input {
  --color: #fff;
  --placeholder-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
/* El label stacked y el ojito de la contraseña, en blanco suave */
#formLogin ion-input .label-text,
#formLogin ion-input::part(label),
#formCambiarPwd ion-input .label-text,
#formCambiarPwd ion-input::part(label) {
  color: rgba(255, 255, 255, 0.8);
}
#formLogin ion-input ion-input-password-toggle ion-icon,
#formCambiarPwd ion-input ion-input-password-toggle ion-icon {
  color: rgba(255, 255, 255, 0.6);
}
/* Botón ACCEDER: azul Syntitax */
#formLogin_startsession,
#cpwd_aceptar {
  --background: hsl(220, 85%, 55%);
  --background-hover: hsl(220, 85%, 48%);
  --background-activated: hsl(220, 85%, 48%);
  --border-radius: 8px;
  --box-shadow: none;
  font-weight: 600;
  letter-spacing: 0.2px;
}
/* Mensaje de error: cristal rojo de Syntitax (antes amarillo Bootstrap) */
.login-error {
  background-color: rgba(231, 76, 60, 0.2);
  color: #ff8a80;
  border: 1px solid rgba(231, 76, 60, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.login-error-close {
  color: #ff8a80;
}
/* Cloudflare Turnstile (modo Gestionado, appearance interaction-only): normalmente
   no se ve; si Cloudflare escala a desafío, el widget (size flexible = 100% del
   contenedor) ocupa el MISMO ancho que los campos del formulario, con el mismo
   margen que los separa (10px, ver #formLogin ion-item). */
.login-turnstile {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  min-height: 0;
}
.login-turnstile:empty {
  display: none;
}
/* El input NATIVO dentro de ion-input (scoped): texto y caret blancos */
#formLogin input.native-input,
#formCambiarPwd input.native-input {
  color: #fff;
  caret-color: #fff;
}
/* Autollenado de Chrome: sin su fondo blanco (truco de la transición eterna)
   y con el texto en blanco, para no romper el cristal */
#formLogin input.native-input:-webkit-autofill,
#formLogin input.native-input:-webkit-autofill:hover,
#formLogin input.native-input:-webkit-autofill:focus,
#formCambiarPwd input.native-input:-webkit-autofill,
#formCambiarPwd input.native-input:-webkit-autofill:hover,
#formCambiarPwd input.native-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  transition: background-color 9999999s ease-in-out 0s;
}
/* ===================================================================
   PANTALLA DE CAMBIO OBLIGADO DE CONTRASEÑA (cambiarpwd.jsp) — paridad
   con CDlgCreateStrongPassword del escritorio. Reutiliza la carrocería
   del login; estas reglas sustituyen lo que en el login hace login.js
   (un solo panel de 340px centrado, sin panel de bienvenida).
   =================================================================== */
.loginDiv.cpwd-marco {
  width: 340px;
  margin-left: -170px;
  height: auto;
  padding-bottom: 1rem;
}
#loginUserAndPasswordDIV.cpwd-panel {
  margin-left: 0;
  visibility: visible;
}
/* IDS_PASSWORD_WEAK */
.cpwd-aviso {
  color: #fff;
  text-align: center;
  margin: 0 0 1rem 0;
}
/* Barra de fortaleza (IDC_PROGRESS_ISPWD_OK), pegada al campo de arriba */
.cpwd-progreso {
  margin: -6px 0 10px 0;
  height: 4px;
  border-radius: 2px;
  --background: rgba(255, 255, 255, 0.15);
}
/* IDC_STATIC_WARN: las reglas */
.cpwd-reglas {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem;
  white-space: pre-line;
  /* respeta los \n del texto del escritorio */
  margin: 0.25rem 0 0.5rem 0;
}
.cpwd-botones ion-button + ion-button {
  margin-top: 0.5rem;
}
/* Alerta de CANCELAR del cambio de contraseña (lpsmNoIngreso, texto con \n):
   Ionic 8 no interpreta HTML en el message; los saltos se respetan por CSS. */
.cpwd-alerta .alert-message {
  white-space: pre-line;
}
/*# sourceMappingURL=login20.css.map */