/* ==========================================================================
   SCORT — Pantallas de cuenta
   Acceso, registro, recuperacion y avisos.

   Lienzo propio y centrado: en un formulario de acceso, una barra de navegacion
   llena de enlaces solo ofrece formas de abandonarlo. El layout lo activa con
   ViewData["Layout:Bare"].
   ========================================================================== */

.scort-auth {
    min-height: 100vh;
    /* dvh evita el salto de la barra de direcciones en moviles. La declaracion
       anterior en vh queda como reserva para navegadores sin soporte. */
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--scort-bg);
}

/* Panel lateral con la identidad. Se oculta por debajo de 900px: en movil, la
   pantalla completa es para el formulario. */
.scort-auth__aside {
    display: none;
    position: relative;
    overflow: hidden;
    padding: var(--space-8) var(--space-7);
    background:
        radial-gradient(120% 90% at 15% 10%, rgba(var(--scort-accent-rgb), 0.28), transparent 60%),
        radial-gradient(90% 70% at 90% 100%, rgba(var(--scort-accent-rgb), 0.14), transparent 55%),
        var(--scort-surface);
    border-right: 1px solid var(--scort-border);
}

.scort-auth__aside-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    max-width: 34rem;
}

.scort-auth__claim {
    font-size: var(--font-size-2xl);
    font-weight: var(--weight-bold);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: var(--space-7) 0 var(--space-4);
}

.scort-auth__claim em {
    font-style: normal;
    color: var(--scort-accent);
}

.scort-auth__lead {
    color: var(--scort-text-muted);
    font-size: var(--font-size-md);
    line-height: 1.6;
    max-width: 30rem;
}

.scort-auth__points {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.scort-auth__points li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--font-size-base);
    color: var(--scort-text-muted);
}

.scort-auth__points svg {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--scort-accent);
}

/* --- Columna del formulario ------------------------------------------- */

.scort-auth__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-4) var(--space-7);
}

.scort-auth__card {
    width: 100%;
    max-width: 27rem;
}

.scort-auth__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    font-weight: var(--weight-bold);
    font-size: var(--font-size-md);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--scort-text);
    text-decoration: none;
}

.scort-auth__brand svg { color: var(--scort-accent); }

.scort-auth__title {
    font-size: var(--font-size-xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
    margin-bottom: var(--space-2);
}

.scort-auth__subtitle {
    color: var(--scort-text-muted);
    font-size: var(--font-size-base);
    line-height: 1.55;
    margin-bottom: var(--space-6);
}

.scort-auth__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

/* El «o» entre entrar y crear cuenta: una línea a cada lado y la palabra en medio.

   Se hace con dos líneas de verdad y no con un `hr` de fondo, para que la palabra tenga
   el fondo de la tarjeta detrás y la línea no la cruce. Y `aria-hidden` no hace falta:
   «o» separando dos acciones se lee bien también en voz. */
.scort-auth__sep {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block: var(--space-5);

    color: var(--scort-text-dim);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.scort-auth__sep::before,
.scort-auth__sep::after {
    content: "";
    flex: 1 1 auto;
    block-size: 1px;
    background: var(--scort-border-strong);
}

.scort-auth__link {
    color: var(--scort-accent);
    font-size: var(--font-size-sm);
    text-decoration: none;
}

.scort-auth__link:hover { text-decoration: underline; }

.scort-auth__foot {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--scort-border);
    color: var(--scort-text-muted);
    font-size: var(--font-size-sm);
    text-align: center;
}

/* Pista de politica de contrasena. Visible ANTES de enviar: descubrir los
   requisitos a base de errores es la forma mas segura de que la gente elija la
   contrasena mas corta que el validador acepte. */
.scort-auth__hint {
    margin-top: var(--space-2);
    color: var(--scort-text-dim);
    font-size: var(--font-size-xs);
    line-height: 1.5;
}

.scort-auth__legal {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-5) 0;
}

.scort-auth__legal .scort-checkbox {
    align-items: flex-start;
    line-height: 1.5;
}

.scort-auth__legal .scort-checkbox input { margin-top: 2px; }

.scort-auth__legal a { color: var(--scort-accent); }

/* Aviso: misma caja, sin formulario. */
.scort-auth__notice-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--space-5);
    border-radius: var(--radius-pill);
    background: rgba(var(--scort-accent-rgb), 0.12);
    color: var(--scort-accent);
}

@media (min-width: 900px) {
    .scort-auth { grid-template-columns: 1.05fr 1fr; }
    .scort-auth__aside { display: block; }
    .scort-auth__main { padding: var(--space-7) var(--space-6); }
}

@media (min-width: 1280px) {
    .scort-auth { grid-template-columns: 1.15fr 1fr; }
    .scort-auth__main { padding: var(--space-7); }
}

/* Teléfono: país y número, en una fila.

   El desplegable NO crece: los nombres de país van de «Perú» a «Territorio Británico del
   Océano Índico», y dejar que el ancho lo decida el contenido movería el campo del número
   cada vez que alguien cambia de país. Ancho fijo, texto recortado, y el número se queda
   donde está. */
.scort-telefono {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.scort-telefono__pais {
  flex: 0 0 9.5rem;
  min-width: 0;
  text-overflow: ellipsis;
}

.scort-telefono__numero {
  flex: 1 1 auto;
  min-width: 0;
}

/* En móvil no caben los dos: el nombre del país queda en dos caracteres útiles y el número
   sin sitio para escribir. Se apilan, que es lo que hace legible el formulario en 360 px. */
@media (max-width: 26rem) {
  .scort-telefono {
    flex-direction: column;
  }

  .scort-telefono__pais {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   LA PANTALLA DE ACCESO, según la referencia del propietario

   Es la primera pantalla que ve alguien que todavía no tiene cuenta, así que es
   la única del sitio donde la marca ocupa más sitio que el formulario. Todo lo
   de aquí está acotado a `.scort-auth--acceso` y a `.scort-acceso`: el registro,
   la recuperación y los avisos comparten `scort-auth.css` y no cambian.

   EL COLOR NO SE DECLARA AQUÍ. La vista pone `data-scort-theme="all"` en el
   contenedor y de ahí bajan el acento violeta, su hover, su suave y el par de
   degradado de los botones, todos desde `scort-tokens.css`. Este archivo solo
   los USA — si mañana el violeta del sitio cambia, esta pantalla cambia con él.
   ========================================================================== */

/* --- El lienzo: las cintas de seda ------------------------------------------

   La referencia tiene cintas violetas y azules cruzando un fondo casi negro. Se
   construyen con degradados y no con una imagen por dos motivos concretos: una
   imagen sería otra petición justo en la pantalla que más rápido debe pintar, y
   además tendría un tamaño fijo — a 1440 px se vería pixelada o recortada.

   Son cuatro manchas radiales para el ambiente. Las cintas propiamente dichas
   van en el `::before`, para poder desenfocarlas sin desenfocar el contenido. */
.scort-auth--acceso {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(125% 75% at 50% -8%, rgba(var(--scort-accent-rgb), 0.26), transparent 62%),
        radial-gradient(85% 55% at 102% 16%, rgba(59, 130, 246, 0.22), transparent 64%),
        radial-gradient(75% 50% at -4% 34%, rgba(var(--scort-accent-rgb), 0.20), transparent 62%),
        radial-gradient(115% 62% at 50% 106%, rgba(76, 29, 149, 0.30), transparent 64%),
        var(--scort-bg);
}

/* `fixed` y no `absolute`: la página es más alta que la ventana en un teléfono, y
   con `absolute` las cintas se estirarían a lo largo de todo el documento hasta
   deshacerse. Fijas al hueco visible conservan su forma mientras se desplaza. */
.scort-auth--acceso::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    /* SEIS CINTAS Y NO CUATRO, repartidas por los dos lados y por abajo.

       Con cuatro, todas caían arriba a la derecha y abajo a la izquierda: en un monitor
       ancho quedaba media pantalla de seda y media de negro liso, con el corte a la vista.
       En un teléfono no se notaba porque no hay sitio para que se note.

       Las dos nuevas cierran el lado derecho-bajo y el izquierdo-alto, que eran justo los
       cuadrantes vacíos. */
    background:
        conic-gradient(from 205deg at 88% 20%,
            transparent 0 36%, rgba(var(--scort-accent-rgb), 0.30) 43%, transparent 50%),
        conic-gradient(from 195deg at 96% 30%,
            transparent 0 38%, rgba(96, 165, 250, 0.22) 44%, transparent 51%),
        conic-gradient(from 25deg at 6% 58%,
            transparent 0 39%, rgba(var(--scort-accent-rgb), 0.24) 45%, transparent 53%),
        conic-gradient(from 15deg at -2% 70%,
            transparent 0 40%, rgba(59, 130, 246, 0.18) 46%, transparent 54%),
        conic-gradient(from 320deg at 104% 76%,
            transparent 0 37%, rgba(var(--scort-accent-rgb), 0.26) 44%, transparent 52%),
        conic-gradient(from 140deg at -4% 12%,
            transparent 0 38%, rgba(124, 58, 237, 0.22) 45%, transparent 53%);

    /* El desenfoque es lo que convierte cuatro cuñas duras en seda. Sin él se ven
       los bordes rectos del cónico y parece un error de renderizado. */
    filter: blur(26px);
}

.scort-auth--acceso .scort-auth__main {
    position: relative;
    padding: var(--space-6) var(--space-4) var(--space-7);
}

/* Una sola columna en TODOS los anchos, y por eso esta pantalla no usa
   `_AuthShell`: lo que aquel panel contaba —marca y garantías— está aquí, y
   tenerlo dos veces en un portátil sería repetirse a izquierda y derecha. */
.scort-auth--acceso.scort-auth { grid-template-columns: 1fr; }

/* LA COLUMNA SE QUEDA EN ANCHO DE TELÉFONO EN TODAS LAS PANTALLAS.

   Estuvo en 30rem y el propietario lo vio en un portátil: a 760 px la columna medía 480 y
   entre la frase manuscrita y los tres sellos quedaban 202 px de hueco — dos islas de
   texto con un agujero en medio. En un teléfono son 120 y se leen como un cintillo.

   Es la MISMA composición, estirada; y esta composición no aguanta el estirón, porque sus
   dos extremos están anclados a los bordes. Capándola a 26rem, lo que se ve en un monitor
   es exactamente lo que se ve en un móvil, que es lo que se pidió.

   No es pereza de no hacer una versión de escritorio: un formulario de acceso con campos
   de 40rem obliga a recorrer media pantalla para ver dónde acaba el correo. Estrecho es
   mejor aquí aunque sobre sitio. */
.scort-acceso {
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
}

/* --- 1. El cintillo --------------------------------------------------------- */

.scort-acceso__cintillo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

/* MANUSCRITA, con la letra que haya en el equipo.

   No se carga una tipografía de un servidor de fuentes: sería una petición a un
   tercero desde la pantalla de acceso —con lo que eso le cuenta a ese tercero de
   quién entra y cuándo— y además obligaría a abrir `font-src` en la CSP.

   Así que se pide la manuscrita del sistema y se acepta que no sea idéntica en
   todos: en Windows sale Segoe Script, en macOS y iOS la cursiva del sistema, y
   donde no haya ninguna cae en la genérica `cursive`. Lo que NO puede pasar es
   que caiga en la de la página y quede como texto normal, de ahí la genérica al
   final. */
.scort-acceso__claim {
    position: relative;
    margin: 0;
    max-width: 11rem;
    font-family: "Segoe Script", "Bradley Hand", "Snell Roundhand", "Brush Script MT", cursive;
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: var(--scort-text);
}

/* El subrayado a mano de la referencia: una raya corta, algo torcida y con las
   puntas redondas. Es adorno puro, así que va en un pseudoelemento. */
.scort-acceso__claim::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: -0.55rem;
    inline-size: 5.5rem;
    block-size: 2px;
    border-radius: var(--radius-pill);
    background: var(--scort-accent);
    transform: rotate(-1.6deg);
}

.scort-acceso__sellos {
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--space-3);
    display: grid;
    gap: 0.35rem;
    text-align: end;

    border-inline-start: 2px solid var(--scort-accent);

    font-size: var(--font-size-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--scort-text-muted);
}

/* --- 2. La marca ------------------------------------------------------------ */

.scort-acceso__marca {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    text-decoration: none;
    color: var(--scort-text);
}

.scort-acceso__marca:hover { color: var(--scort-text); }

/* El escudo, encendido. Dos sombras y no una, igual que la corona de la cabecera:
   la cerrada define el filo y la abierta es el resplandor que se derrama. */
.scort-acceso__escudo {
    display: grid;
    place-items: center;
    color: var(--scort-accent);
    filter:
        drop-shadow(0 0 4px rgba(var(--scort-accent-rgb), 0.9))
        drop-shadow(0 0 20px rgba(var(--scort-accent-rgb), 0.5));
}

.scort-acceso__nombre {
    font-size: clamp(1.9rem, 9vw, 2.6rem);
    font-weight: var(--weight-black);
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

/* La segunda letra, en acento. La vista parte el nombre configurado en tres
   trozos; aquí solo se pinta el del medio. */
.scort-acceso__nombre em {
    font-style: normal;
    color: var(--scort-accent);
}

.scort-acceso__lema {
    font-size: var(--font-size-xs);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--scort-text-muted);
}

/* --- 3. La tarjeta ---------------------------------------------------------- */

/* CRISTAL, no superficie opaca: debajo pasan las cintas, y una caja sólida las
   cortaría en seco justo en el centro de la pantalla. El desenfoque de fondo es
   lo que hace que se vean a través sin que el texto pierda contraste. */
.scort-acceso__tarjeta {
    max-width: none;
    padding: var(--space-6) var(--space-5);
    border: 1px solid var(--marco-destacado);
    border-radius: var(--radius-lg);

    background: var(--scort-glass-strong);
    backdrop-filter: blur(var(--scort-glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--scort-glass-blur)) saturate(140%);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 24px 60px -30px rgba(0, 0, 0, 0.9),
        var(--marco-destacado-halo);
}

.scort-acceso__titulo {
    font-size: clamp(1.6rem, 7.5vw, 2.1rem);
    text-align: center;
}

.scort-acceso__titulo em {
    font-style: normal;
    color: var(--scort-accent);
}

.scort-acceso__tarjeta .scort-auth__subtitle { text-align: center; }

/* El icono y el rótulo, en una línea. El `<label>` sigue siendo el del modelo:
   aquí solo se le pone un hermano delante. */
.scort-acceso__etiqueta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--space-2);
}

.scort-acceso__etiqueta .scort-label { margin: 0; }

.scort-acceso__etiqueta-ico {
    flex: 0 0 auto;
    color: var(--scort-accent);
}

.scort-acceso__fila { justify-content: flex-end; }

/* Los dos botones grandes llevan icono, así que dejan de ser solo texto
   centrado. `inline-flex` y no `flex` para no pisar el `display` que traen de
   `--block`, que ya los estira. */
.scort-acceso__entrar,
.scort-acceso__crear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

/* --- 4. Las tres ventajas --------------------------------------------------- */

.scort-acceso__ventajas {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scort-acceso__ventajas li {
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    padding-inline: var(--space-2);

    font-size: var(--font-size-xs);
    line-height: 1.35;
    text-align: center;
    color: var(--scort-text-muted);
}

/* La raya separa, el hueco no: tres columnas sueltas se leen como tres cosas sin
   relación, y son tres caras de lo mismo. Igual que en la caja de datos de la
   ficha, la línea va en la casilla y no en el contenedor, para que la primera no
   la lleve. */
.scort-acceso__ventajas li + li {
    border-inline-start: 1px solid var(--scort-border);
}

.scort-acceso__ventajas svg { color: var(--scort-accent); }

/* --- 5. El pie -------------------------------------------------------------- */

.scort-acceso__pie {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;

    margin: var(--space-6) 0 0;
    font-size: var(--font-size-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--scort-text-muted);
}

.scort-acceso__pie-marca {
    font-weight: var(--weight-bold);
    color: var(--scort-text);
}

.scort-acceso__pie-sep { color: var(--scort-text-dim); }

.scort-acceso__pie-lema {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-xs);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-align: center;
    color: var(--scort-text-dim);
}

/* Quien pidió menos movimiento no necesita que el fondo se mueva, y aquí no se
   mueve nada — pero el desenfoque de 26px sobre cuatro cónicos es trabajo real
   de pintura en un teléfono modesto. Se rebaja, no se quita: sin desenfoque las
   cuñas se ven con bordes rectos y queda peor que sin cintas. */
@media (prefers-reduced-motion: reduce) {
    .scort-auth--acceso::before { filter: blur(18px); }
}

/* EL CINTILLO NO SALE EN EL TELÉFONO.

   La frase manuscrita y los tres sellos son lo mejor prescindible de esta pantalla: no
   piden nada, no explican nada y no hacen falta para entrar. En un monitor sobra alto y
   son la voz de la marca; en un teléfono se comen unos 110 px de los primeros que se ven,
   y con ellos las tres ventajas de abajo se salían de la pantalla — el propietario lo vio
   en su móvil con los botones cortados contra el borde.

   `display: none` y no `visibility` ni un alto en cero: lo que se quiere es que NO OCUPE.
   Y se va del árbol de accesibilidad con ello, que es correcto — los tres sellos ya eran
   `aria-hidden` por adorno, y la frase es marca, no información.

   El corte va en 767, que es el mismo que usa el resto del proyecto para «esto es un
   teléfono». Con un número más bajo reaparecería en una tableta de 600 px, que para esta
   pantalla es un teléfono grande. */
@media (max-width: 767px) {
    .scort-acceso__cintillo {
        display: none;
    }

    /* Sin el cintillo, la marca queda pegada al borde de arriba: el aire que tenía se lo
       daba el margen inferior de aquél. Se le devuelve aquí y no subiendo el relleno del
       contenedor, que también separaría los lados. */
    .scort-acceso__marca {
        margin-block-start: var(--space-4);
    }
}

/* En pantallas anchas la columna respira, pero NO se ensancha: un formulario de
   acceso de 40rem tiene los campos tan largos que cuesta ver dónde acaba uno. */
@media (min-width: 900px) {
    .scort-auth--acceso .scort-auth__main {
        padding-block: var(--space-7);
    }
}