/* ===========================================================================
   Trámites en Línea — pantalla de inicio de sesión
   Maqueta: general/pop/design_handoff_login_2a/
   Esta página NO usa Bootstrap: sólo lo empleaba para navbar/card/form-control
   y el diseño nuevo los sustituye por completo.
   =========================================================================== */

:root {
  --azul-oscuro: #0a2a5e;
  --azul-primario: #1560b4;
  --azul-hover: #123c7d;
  --fondo: #f2f7fc;
  --texto: #42546c;
  --texto-suave: #6b7c93;
  --texto-fuerte: #33445c;
  --texto-tenue: #8b9bb0;
  --placeholder: #98a6b8;
  --borde-tarjeta: #dbe4ef;
  --borde-campo: #cfd9e6;
  --borde-fila: #e5ecf4;
  --divisor: #eaeff6;
  --verde-punto: #2f8f5b;
  --verde-texto: #2b5340;
  --verde-fondo: #f0f7f3;
  --rojo: #cc0000;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

/* En monitor de PC la pantalla entra entera y NO hay scroll: alto fijo de
   viewport y las medidas interiores se ajustan con clamp() en unidades vh.
   Por debajo de 900px (móvil/tablet) se deja el scroll normal del documento,
   ver el bloque responsive del final. */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #eceff3;
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul-primario); text-decoration: none; }
a:hover, a:focus { color: var(--azul-oscuro); }

:focus-visible { outline: 2px solid var(--azul-primario); outline-offset: 2px; }

/* ---------- Cabecera ---------- */
.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: clamp(52px, 7.7vh, 68px);
  padding: 0 clamp(18px, 2.4vw, 32px);
  background: var(--azul-oscuro);
  flex: none;
}
.cabecera__logo { height: clamp(34px, 5.4vh, 48px); width: auto; display: block; }

.cabecera__inicio {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 12.5px/1 'Archivo', sans-serif;
  color: #fff;
  letter-spacing: .1em;
  white-space: nowrap;
}
.cabecera__inicio:hover, .cabecera__inicio:focus { color: #cfe1f7; }
.cabecera__inicio svg { flex: none; }

/* ---------- Cuerpo ---------- */
.cuerpo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(430px, clamp(460px, 32vw, 550px));
  align-items: stretch;
  background: var(--fondo);
  padding: 0 clamp(18px, 2.5vw, 40px) 0 0;
  flex: 1 1 auto;
  min-height: 0;
}

/* Detalles decorativos de fondo (ver README del handoff) */
.deco { position: absolute; z-index: -1; pointer-events: none; }
.deco--circulo   { left: -260px; top: -160px; width: 660px; height: 660px; border-radius: 50%; background: #e3edf8; }
.deco--onda1     { left: -8%; bottom: -330px; width: 116%; height: 430px; border-radius: 50% 50% 0 0 / 58% 58% 0 0; background: #dce9f6; }
.deco--onda2     { left: -6%; bottom: -352px; width: 112%; height: 430px; border-radius: 50% 50% 0 0 / 58% 58% 0 0; background: #cfe0f2; }
.deco--puntos    { right: 474px; top: 34px; width: 172px; height: 118px;
                   background-image: radial-gradient(#c2d4e9 1.1px, transparent 1.1px); background-size: 11px 11px; }
.deco--anillo1   { right: 392px; top: -118px; width: 330px; height: 330px; border-radius: 50%; border: 1px solid #d7e4f2; }
.deco--anillo2   { right: 452px; top: -58px; width: 210px; height: 210px; border-radius: 50%; border: 1px solid #dfe9f5; }
.deco--trama     { left: 470px; top: 34px; width: 112px; height: 112px;
                   background-image: repeating-linear-gradient(45deg, #d3e1f1 0 1px, transparent 1px 9px); }
.deco--rombo1    { left: 425px; top: 176px; width: 11px; height: 11px; background: #9dc0e8; transform: rotate(45deg); }
.deco--rombo2    { left: 456px; top: 198px; width: 7px;  height: 7px;  background: #c2d4e9; transform: rotate(45deg); }
.deco--linea1    { left: 470px; top: 126px; width: 64px; height: 1px; background: #c9d9ec; }
.deco--linea2    { left: 470px; top: 134px; width: 36px; height: 1px; background: #d8e4f2; }

/* ---------- Columna izquierda: hero ---------- */
.hero {
  padding: clamp(20px, 4.8vh, 44px) 0 0 clamp(24px, 3.8vw, 56px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.hero__texto-grupo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hero__eyebrow {
  font: 600 12px/1 'Archivo', sans-serif;
  color: var(--azul-primario);
  letter-spacing: .18em;
  margin-bottom: clamp(6px, 1.5vh, 14px);
}
.hero__titulo {
  margin: 0;
  font: 800 clamp(32px, 6.4vh, 58px)/.96 'Archivo', sans-serif;
  color: var(--azul-oscuro);
  letter-spacing: -.025em;
}
.hero__acento {
  width: 60px; height: 4px;
  background: var(--azul-primario);
  border-radius: 2px;
  margin: clamp(8px, 2vh, 18px) 0 clamp(8px, 1.6vh, 14px);
  flex: none;
}
.hero__texto {
  margin: 0;
  max-width: 360px;
  font: 400 clamp(14px, 1.85vh, 16.5px)/1.55 'Source Sans 3', sans-serif;
  color: var(--texto);
}

/* La ilustración absorbe el espacio que sobra: se encoge o crece con la altura
   de la ventana en vez de forzar scroll. object-fit la mantiene sin deformar.
   El margen inferior negativo la deja crecer por debajo del borde del cuerpo,
   donde `overflow:hidden` la recorta — es el mismo recurso de la maqueta, y es
   lo que le da tamaño: la imagen va limitada por el ALTO, así que cada píxel
   de alto que gana son 1,37 de ancho. */
.hero picture,
.hero__grafico {
  display: block;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  margin-top: clamp(2px, .8vh, 10px);
}
.hero__imagen {
  width: 106%;
  max-width: none;
  /* Se pide MÁS alto del que hay: el sobrante cae por debajo del pie y lo
     recorta `overflow:hidden` del cuerpo, que es lo que hacía la maqueta.
     Al ir en porcentaje, la fracción recortada es la misma en cualquier
     resolución (a diferencia de un margen negativo en vh, que recorta mucho
     más en pantallas bajas). --sangrado: 112% => se recorta el 11% de abajo. */
  height: var(--sangrado, 112%);
  display: block;
  object-fit: contain;
  /* Anclada ARRIBA: el sobrante tiene que caer por abajo, no desplazar el
     dibujo fuera de la pantalla. */
  object-position: left top;
  margin: 0 -46px 0 0;
}

/* ---------- Columna derecha: tarjeta de acceso ---------- */
.tarjeta {
  align-self: center;
  width: 100%;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--borde-tarjeta);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(10, 42, 94, .13);
  padding: clamp(18px, 3.2vh, 32px) clamp(20px, 2.2vw, 34px) clamp(16px, 3vh, 30px);
  margin: clamp(8px, 2vh, 30px) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.9vh, 18px);
  /* Válvula de seguridad: en ventanas absurdamente bajas se desplaza la
     tarjeta por dentro antes que la página entera. */
  max-height: calc(100% - clamp(14px, 3.6vh, 48px));
  overflow-y: auto;
}
.tarjeta__titulo {
  margin: 0;
  font: 700 clamp(18px, 2.5vh, 23px)/1.15 'Archivo', sans-serif;
  color: var(--azul-oscuro);
}
.tarjeta__subtitulo {
  margin: 5px 0 0;
  font: 400 clamp(13px, 1.6vh, 14px)/1.4 'Source Sans 3', sans-serif;
  color: var(--texto-suave);
}

/* ---------- Campos ---------- */
.campos { display: flex; flex-direction: column; gap: clamp(8px, 1.5vh, 14px); }

.campo { display: flex; flex-direction: column; gap: 5px; }
.campo__etiqueta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font: 600 clamp(12px, 1.5vh, 13px)/1 'Source Sans 3', sans-serif;
  color: var(--texto-fuerte);
}

.campo__caja {
  display: flex;
  align-items: center;
  gap: 10px;
  height: clamp(38px, 5.1vh, 48px);
  padding: 0 clamp(12px, 1.2vw, 16px);
  border: 1px solid var(--borde-campo);
  border-radius: 8px;
  background: #f8fafd;
  transition: border-color .15s, box-shadow .15s;
}
.campo__caja:focus-within {
  border-color: var(--azul-primario);
  box-shadow: 0 0 0 3px rgba(21, 96, 180, .12);
  background: #fff;
}

.campo__caja input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  font: 400 15px/1 'Source Sans 3', sans-serif;
  color: var(--texto-fuerte);
}
.campo__caja input:focus { outline: none; }
.campo__caja input::placeholder { color: var(--placeholder); opacity: 1; }

/* Botón "Mostrar": revela mientras se mantiene pulsado */
.mostrar {
  flex: none;
  border: 0;
  padding: 4px 2px;
  background: none;
  cursor: pointer;
  font: 600 12px/1 'Source Sans 3', sans-serif;
  color: var(--azul-primario);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.mostrar:hover { color: var(--azul-oscuro); }
.mostrar.esta-visible { color: var(--azul-oscuro); }

/* ---------- Mensaje de error (lo rellena el JS del login) ---------- */
.error {
  padding: 10px 12px;
  border: 1px solid #f3d0d0;
  border-radius: 8px;
  background: #fdf3f3;
  font: 400 13px/1.4 'Source Sans 3', sans-serif;
  color: var(--rojo);
  text-align: center;
}

/* ---------- Botón Ingresar ---------- */
.boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: clamp(40px, 5.6vh, 50px);
  flex: none;
  border: 0;
  border-radius: 8px;
  background: var(--azul-oscuro);
  color: #fff;
  font: 700 clamp(14.5px, 1.9vh, 16px)/1 'Source Sans 3', sans-serif;
  cursor: pointer;
  transition: background .15s;
}
.boton:hover { background: var(--azul-hover); }
.boton:disabled { cursor: default; opacity: .85; }

/* El JS hace $("#result").addClass('loader2').show() al enviar y .hide() al
   fallar: se conserva ese contrato, sólo cambia el aspecto (spinner dentro
   del botón en lugar del disco gigante centrado en la pantalla). */
#result { display: none; }
.loader2 {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .loader2 { animation-duration: 2.4s; }
}

/* ---------- Enlaces de la tarjeta ---------- */
.enlaces {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font: 600 13px/1.3 'Source Sans 3', sans-serif;
}

.divisor { height: 1px; background: var(--divisor); }

/* ---------- Aviso ---------- */
.aviso {
  display: flex;
  gap: 11px;
  padding: clamp(8px, 1.5vh, 13px) 14px;
  background: var(--verde-fondo);
  border-radius: 8px;
}
.aviso__punto {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--verde-punto);
  margin-top: 5px;
}
.aviso p {
  margin: 0;
  font: 400 12.5px/1.5 'Source Sans 3', sans-serif;
  color: var(--verde-texto);
}

/* ---------- Documentos ---------- */
.documentos__titulo {
  font: 600 11px/1 'Archivo', sans-serif;
  color: var(--texto-tenue);
  letter-spacing: .14em;
  margin-bottom: clamp(6px, 1vh, 9px);
}
.documentos__lista { display: flex; flex-direction: column; gap: clamp(5px, .8vh, 7px); }

.documento {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(7px, 1.4vh, 12px) 14px;
  background: #f6f9fc;
  border: 1px solid var(--borde-fila);
  border-radius: 8px;
  transition: border-color .15s;
}
.documento:hover, .documento:focus { border-color: var(--azul-primario); }
.documento span {
  font: 600 12.5px/1.3 'Source Sans 3', sans-serif;
  color: var(--texto-fuerte);
}
.documento__chevron { flex: none; color: var(--texto-tenue); }

/* ---------- Pie ---------- */
.pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: clamp(34px, 5.2vh, 46px);
  padding: 6px clamp(18px, 2.4vw, 32px);
  background: var(--azul-oscuro);
  background-image:
    linear-gradient(100deg, rgba(35, 120, 210, .55) 0 12%, rgba(35, 120, 210, 0) 12.1%),
    linear-gradient(260deg, rgba(35, 120, 210, .45) 0 9%, rgba(35, 120, 210, 0) 9.1%);
  font: 400 12px/1.4 'Source Sans 3', sans-serif;
  color: rgba(255, 255, 255, .78);
  flex: none;
}

/* ===========================================================================
   Responsive
   Prioridad: monitor de PC. A partir de 901px la pantalla entra entera sin
   scroll a cualquier resolución. Por debajo se apila en una columna y se
   recupera el scroll normal del documento.
   =========================================================================== */

/* --- Monitor de PC: nunca hay scroll de página --- */
@media (min-width: 901px) {
  html, body { height: 100%; overflow: hidden; }
  body { min-height: 0; }
}

/* Ventanas bajas (1366x768, 1280x720, portátiles). El hero no es el problema:
   su ilustración se encoge sola. Quien no cabe es la tarjeta, así que aquí se
   aprieta su espaciado y su tipografía hasta que entra con las TRES filas de
   documentos de la maqueta. */
@media (min-width: 901px) and (max-height: 810px) {
  .tarjeta {
    gap: clamp(6px, 1.4vh, 19px);
    padding: clamp(14px, 2.6vh, 32px) clamp(18px, 2.2vw, 32px) clamp(12px, 2.4vh, 30px);
    margin: clamp(6px, 1.6vh, 34px) 0;
  }
  .campos { gap: clamp(6px, 1.2vh, 14px); }
  .campo__caja { height: clamp(36px, 4.8vh, 46px); }
  .campo__caja input { font-size: 14px; }
  .boton { height: clamp(38px, 5.2vh, 50px); }
  .aviso { padding: clamp(6px, 1.1vh, 13px) 12px; gap: 9px; }
  .aviso p { font-size: 11.5px; line-height: 1.45; }
  .documento { padding: clamp(5px, 1vh, 12px) 12px; }
  .documento span { font-size: 11.5px; }
  .documentos__lista { gap: clamp(4px, .6vh, 7px); }
  .enlaces { font-size: 12px; }
  .tarjeta__subtitulo { font-size: 12.5px; }
}

/* Ya en el extremo: el subtítulo de la tarjeta repite lo que dice el
   placeholder del campo Usuario, así que es lo primero que sobra. */
@media (min-width: 901px) and (max-height: 700px) {
  .tarjeta__subtitulo { display: none; }
  .tarjeta__titulo { font-size: 18px; }
}

/* Monitores anchos. La maqueta se dibujó a 1365px: si se deja crecer la columna
   del hero sin límite, la ilustración —que va limitada por el alto— se queda
   pegada a la izquierda y abre una franja muerta contra la tarjeta.
   Se acota el CONTENIDO con relleno, no el contenedor con `max-width`: así el
   fondo y los adornos siguen sangrando fuera de la pantalla en vez de quedar
   cortados en seco contra el borde de la caja. A 1600px exactos el relleno vale
   cero, de modo que el salto no se nota al redimensionar. */
/* Monitores anchos y resoluciones altas (1080p, 1440p, 4K) o menor zoom.
   Se acota el CONTENIDO con relleno elástico sin truncar los fondos decorativos.
   max(): entre 1600 y 1700px el calc() da negativo y el navegador lo deja en
   0, con lo que la tarjeta quedaba pegada al borde derecho de la ventana. */
@media (min-width: 1600px) {
  .cuerpo {
    grid-template-columns: minmax(0, 1.25fr) minmax(460px, clamp(500px, 30vw, 580px));
    padding-left: max(0px, calc((100% - 1700px) / 2));
    padding-right: max(40px, calc((100% - 1700px) / 2 + 40px));
  }
  .cabecera,
  .pie {
    padding-left: max(32px, calc((100% - 1700px) / 2 + 36px));
    padding-right: max(32px, calc((100% - 1700px) / 2 + 36px));
  }
}

/* La tarjeta sólo crece si además hay ALTO. Un monitor ancho pero bajo
   (1600x900 con la barra del navegador, o 1920x1080 al 125%) cae también en el
   bloque de ventanas bajas; si este bloque lo pisara, la tarjeta no cabría y
   mostraría su propia barra de desplazamiento. */
@media (min-width: 1600px) and (min-height: 811px) {
  .tarjeta {
    padding: clamp(24px, 3.6vh, 36px) clamp(26px, 2.4vw, 38px) clamp(22px, 3.2vh, 32px);
    gap: clamp(12px, 2.2vh, 20px);
  }
  .tarjeta__titulo { font-size: 24px; }
  .campo__caja { height: 48px; }
  .campo__caja input { font-size: 15.5px; }
  .boton { height: 50px; font-size: 16.5px; }
}

@media (min-width: 1920px) {
  .cuerpo {
    grid-template-columns: minmax(0, 1.25fr) minmax(480px, clamp(520px, 28vw, 620px));
    padding-left: max(0px, calc((100% - 1800px) / 2));
    padding-right: max(44px, calc((100% - 1800px) / 2 + 44px));
  }
  .cabecera,
  .pie {
    padding-left: max(36px, calc((100% - 1800px) / 2 + 40px));
    padding-right: max(36px, calc((100% - 1800px) / 2 + 40px));
  }
}

/* Pantallas muy grandes sin escalado del sistema (TV o monitor 4K al 100%):
   todo lo anterior está en px y se quedaría como una isla de 1800px con letra
   diminuta. Se amplía la página entera en escalones con `zoom`, y el escalón
   pide ancho Y alto para que, ya ampliada, siga cabiendo sin scroll (el área
   útil equivale a ancho/zoom x alto/zoom: nunca menos de 1920x1000). */
@media (min-width: 2400px) and (min-height: 1250px) { html { zoom: 1.25; } }
@media (min-width: 2880px) and (min-height: 1500px) { html { zoom: 1.5; } }
@media (min-width: 3360px) and (min-height: 1750px) { html { zoom: 1.75; } }
@media (min-width: 3840px) and (min-height: 2000px) { html { zoom: 2; } }
@media (min-width: 4800px) and (min-height: 2500px) { html { zoom: 2.5; } }

@media (max-width: 1180px) {
  .hero__titulo { font-size: clamp(30px, 5.4vh, 48px); }
  .cuerpo {
    grid-template-columns: minmax(0, 1.15fr) minmax(390px, clamp(420px, 35vw, 470px));
    padding-right: 20px;
  }
  .deco--puntos, .deco--anillo1, .deco--anillo2,
  .deco--trama, .deco--rombo1, .deco--rombo2,
  .deco--linea1, .deco--linea2 { display: none; }
}

/* ===========================================================================
   MÓVIL Y TABLET VERTICAL (<= 900px)
   Orden visual estructurado para máxima usabilidad:
   1. Título e introducción institucional (hero__texto-grupo) ARRIBA.
   2. Formulario de acceso (tarjeta) en el CENTRO.
   3. Ilustración hero / gráficos complementarios ABAJO.
   =========================================================================== */
@media (max-width: 900px) {
  html, body { height: auto; overflow: visible; }
  body { min-height: 100vh; }
  .cuerpo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 clamp(16px, 4vw, 24px) 28px;
    min-height: calc(100vh - 110px);
  }

  /* Desacopla los hijos de .hero para que participen directamente en el orden del contenedor flex */
  .hero {
    display: contents;
  }

  /* 1. TÍTULO E INTRODUCCIÓN INSTITUCIONAL: ARRIBA */
  .hero__texto-grupo {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(20px, 4.5vh, 32px) 0 4px;
    width: 100%;
    max-width: 520px;
  }

  .hero__eyebrow {
    font-size: 12px;
    margin-bottom: 8px;
    letter-spacing: .16em;
  }

  .hero__titulo {
    font-size: clamp(28px, 6.5vw, 40px);
    line-height: 1.04;
  }

  .hero__acento {
    align-self: center;
    margin: 10px 0 8px;
  }

  .hero__texto {
    font-size: clamp(14px, 3.5vw, 15.5px);
    max-width: 440px;
    line-height: 1.45;
  }

  /* 2. FORMULARIO DE ACCESO: EN EL CENTRO */
  .tarjeta {
    order: 2;
    width: 100%;
    max-width: 480px;
    max-height: none;
    overflow-y: visible;
    margin: 14px auto 0;
    box-shadow: 0 10px 30px rgba(10, 42, 94, .1);
  }

  /* 3. ILUSTRACIÓN HERO / GRÁFICOS: ABAJO */
  .hero picture,
  .hero__grafico {
    order: 3;
    display: block;
    width: 100%;
    max-width: 460px;
    flex: none;
    margin: 24px auto 0;
  }

  .hero__imagen {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
  }

  .insignia {
    order: 3;
    margin: 20px auto 0;
    width: fit-content;
  }

  .deco--circulo { left: -320px; top: -260px; }
}

@media (max-width: 620px) {
  .cabecera { height: 56px; padding: 0 16px; }
  .cabecera__logo { height: 36px; }
  .cabecera__inicio span { display: none; }
  .hero__texto-grupo { padding-top: 18px; }
  .hero__titulo { font-size: clamp(26px, 7.5vw, 34px); }
  .tarjeta { padding: clamp(20px, 5vw, 24px) clamp(16px, 4vw, 20px) 20px; margin-top: 12px; }
  .enlaces { flex-direction: column; gap: 8px; text-align: center; }
  .pie {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    padding: 12px 16px;
  }
}