/* Página de entrada de Prestadin.
   Las posiciones del fondo se midieron sobre la imagen de referencia (1586 px de ancho)
   y están en vw para que escalen con la pantalla. */

:root {
    --green-ink: #0b2e24;
    --green-dark: #073d32;
    --green-main: #17694e;
    --green-dot: #7fbf9f;
    --text-muted: #68737c;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--green-ink);
}

.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
    background: #f9fbf9;
}

/* ---------- Fondo ---------- */

.background-art {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .85) 44%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(62deg, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .7) 62%, rgba(255, 255, 255, 0) 72%),
        radial-gradient(ellipse at 50% 42%, #ffffff 0%, rgba(255, 255, 255, 0) 50%),
        linear-gradient(160deg, #f3f7f4 0%, #e9f1ec 55%, #e0ebe5 100%);
}

/* Formas circulares verdes. Cada una tiene dos capas de fondo:
   1) el borde de luz blanca, centrado y ajustado al círculo (closest-side);
   2) el color, con el núcleo oscuro desplazado hacia la esquina. */
.orb {
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(2.5px);
    --borde-luz: radial-gradient(circle closest-side, rgba(255, 255, 255, 0) 94%, rgba(255, 255, 255, .85) 98%, rgba(255, 255, 255, .25) 100%);
}

/* Inferior izquierda: una forma clara y otra más oscura encima */
.orb-left {
    width: 61.2vw;
    left: -33.3vw;
    bottom: -27.5vw;
    background: var(--borde-luz), radial-gradient(circle at 30% 70%, #4f9578 0%, #7db89d 35%, #a8d2be 60%, #cfe8dc 82%);
    opacity: .8;
}

.orb-left-inner {
    width: 48.7vw;
    left: -23.5vw;
    bottom: -25.2vw;
    background: var(--borde-luz), radial-gradient(circle at 30% 80%, #113f31 0%, #1f5f47 28%, #448c6c 52%, #82bca2 76%, #a7d3be 90%);
    opacity: .92;
}

/* Superior derecha */
.orb-right {
    width: 58.9vw;
    right: -27.6vw;
    top: -37vw;
    background: var(--borde-luz), radial-gradient(circle at 45% 58%, #22624b 0%, #3f8b6c 25%, #7cbaa0 45%, #b5dac9 62%, #dcefe6 78%);
    opacity: .85;
}

/* Arcos finos, cada uno con un puntito */
.orbit {
    position: absolute;
    aspect-ratio: 1;
    border: 1.5px solid rgba(23, 105, 78, .32);
    border-radius: 50%;
}

.orbit::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--green-dot);
}

.orbit-left {
    width: 89.5vw;
    left: -60.5vw;
    bottom: -45.3vw;
}
.orbit-left::after { left: 81.7%; top: 9%; }

.orbit-right {
    width: 104vw;
    right: -64vw;
    top: -75.5vw;
}
.orbit-right::after { left: 22.5%; top: 91.8%; }

/* ---------- Tarjeta ---------- */

.login-container {
    width: 100%;
    padding: 32px 20px;
    display: flex;
    justify-content: center;
}

.login-card {
    width: 100%;
    max-width: 493px;
    padding: 61px 52px 58px;
    text-align: center;
    background: linear-gradient(150deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .38) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(255, 255, 255, .9);
    border-radius: 21px;
    box-shadow:
        0 30px 80px rgba(17, 69, 50, .10),
        0 4px 14px rgba(17, 69, 50, .04),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* El SVG trae margen propio (lienzo de 128 y dibujo de ~79x96);
   los márgenes negativos lo compensan para acercarlo al título. */
.brand-logo {
    display: block;
    width: 99px;
    height: 99px;
    margin: -14px auto 2px;
}

.brand h1 {
    margin: 0;
    font-size: 50px;
    font-weight: 700;
    letter-spacing: -1.3px;
    line-height: 1.1;
    color: var(--green-ink);
}

.brand-subtitle {
    margin: 10px 0 0;
    font-size: 17px;
    line-height: 1.4;
    color: var(--text-muted);
}

.login-error {
    margin: 20px 0 0;
    color: #b3261e;
}

.login-actions { margin-top: 40px; }

.google-button {
    width: 100%;
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border: 1px solid #e1e6e3;
    border-radius: 13px;
    background: #fff;
    color: #17201e;
    font: inherit;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.google-button:hover {
    transform: translateY(-2px);
    border-color: #aad5bf;
    box-shadow: 0 10px 24px rgba(11, 71, 48, .10);
}

.google-button:active { transform: translateY(0); }

.google-button:focus-visible {
    outline: 3px solid #218961;
    outline-offset: 4px;
}

.google-button svg { flex-shrink: 0; }

.legal-text {
    margin: 26px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
}

.legal-text a {
    color: var(--green-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-text a:hover { color: var(--green-main); }

.legal-text a:focus-visible {
    outline: 2px solid var(--green-main);
    outline-offset: 3px;
}

/* ---------- Teléfono ---------- */

@media (max-width: 600px) {
    .login-container { padding: 22px 16px; }
    .login-card { padding: 44px 22px 40px; border-radius: 18px; }
    .brand-logo { width: 80px; height: 80px; margin: -11px auto 0; }
    .brand h1 { font-size: 38px; letter-spacing: -1px; }
    .brand-subtitle { font-size: 15px; }
    .login-actions { margin-top: 30px; }
    .google-button { min-height: 50px; font-size: 16px; gap: 11px; }
    .legal-text { font-size: 12px; }

    /* En pantallas angostas las formas se agrandan para que se sigan viendo */
    .orb-left { width: 120vw; left: -70vw; bottom: -55vw; }
    .orb-left-inner { width: 95vw; left: -50vw; bottom: -50vw; }
    .orb-right { width: 115vw; right: -60vw; top: -75vw; }
    .orbit-left { width: 170vw; left: -120vw; bottom: -90vw; }
    .orbit-right { width: 190vw; right: -125vw; top: -140vw; }
}

@media (prefers-reduced-motion: reduce) {
    .google-button { transition: none; }
    .google-button:hover { transform: none; }
}