:root {
            --tierra-oscura: #1b2e1f;
            --campo-hondo: #234d2c;
            --campo: #2f6e3c;
            --brote: #6ba84f;
            --brote-claro: #a8d28a;
            --crema: #f7f5ec;
            --blanco: #ffffff;
            --linea: #d8dfca;
            --sombra: rgba(27, 46, 31, 0.10);
            --rojo: #b3462c;
            --rojo-claro: #f5e3de;

            --font-display: 'Fraunces', serif;
            --font-body: 'Space Grotesk', sans-serif;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        html, body {
            min-height: 100vh;
            font-family: var(--font-body);
            background: var(--crema);
            color: var(--tierra-oscura);
        }

        /* ---------- Layout de dos paneles ---------- */
        .auth-shell {
            display: grid;
            grid-template-columns: 0.85fr 1.15fr;
            min-height: 100vh;
        }

        /* ---------- Panel visual (izquierda) ---------- */
        .auth-visual {
            position: relative;
            overflow: hidden;
            background: linear-gradient(160deg, var(--campo) 0%, var(--campo-hondo) 100%);
            color: var(--blanco);
            padding: clamp(28px, 4vw, 52px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .auth-visual::before {
            content: "";
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                100deg,
                rgba(255, 255, 255, 0.035) 0px,
                rgba(255, 255, 255, 0.035) 2px,
                transparent 2px,
                transparent 60px
            );
            pointer-events: none;
        }

        .auth-visual-marca {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .auth-visual-marca .marca-icono {
            width: 38px; height: 38px; border-radius: 10px;
            background: rgba(255, 255, 255, 0.15);
            display: flex; align-items: center; justify-content: center;
        }
        .auth-visual-marca .marca-icono svg { width: 20px; height: 20px; }
        .auth-visual-marca span {
            font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
        }

        .auth-visual-texto { position: relative; z-index: 2; max-width: 400px; }
        .auth-visual-texto .eyebrow {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
            text-transform: uppercase; color: var(--brote-claro);
        }
        .auth-visual-texto .eyebrow::before {
            content: ""; width: 7px; height: 7px; border-radius: 50%;
            background: var(--brote-claro);
        }
        .auth-visual-texto h1 {
            margin-top: 14px;
            font-family: var(--font-display); font-weight: 500;
            font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.12;
            letter-spacing: -0.02em;
        }
        .auth-visual-texto h1 em { font-style: italic; color: var(--brote-claro); }
        .auth-visual-texto p {
            margin-top: 14px; font-size: 0.95rem; line-height: 1.6;
            color: rgba(255, 255, 255, 0.82);
        }

        .auth-visual-svg {
            position: absolute;
            right: -40px;
            bottom: -20px;
            width: 320px;
            height: 320px;
            z-index: 1;
            opacity: 0.9;
        }

        .franja-cultivo {
            position: relative; z-index: 2;
            height: 10px; border-radius: 100px;
            background: repeating-linear-gradient(
                90deg,
                rgba(255,255,255,0.9) 0px, rgba(255,255,255,0.9) 18px,
                var(--brote-claro) 18px, var(--brote-claro) 36px,
                rgba(255,255,255,0.55) 36px, rgba(255,255,255,0.55) 54px
            );
            max-width: 220px;
        }

        /* ---------- Panel de formulario (derecha) ---------- */
        .auth-form-panel {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: clamp(28px, 5vw, 60px) clamp(20px, 4vw, 60px);
        }

        .auth-form-card { width: 100%; max-width: 400px; }
        .auth-form-card-ancha { max-width: 560px; }

        .auth-form-card h2 {
            font-family: var(--font-display);
            font-size: clamp(1.7rem, 3vw, 2.1rem);
            font-weight: 600;
            letter-spacing: -0.02em;
        }

        .auth-subtitulo {
            margin-top: 8px;
            color: #6b7565;
            font-size: 0.92rem;
        }

        .auth-form { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; }

        .fila-doble {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .campo-form { display: flex; flex-direction: column; gap: 8px; }
        .campo-form label {
            font-size: 0.8rem; font-weight: 600; color: var(--campo-hondo);
        }

        .campo-form-cabeza {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        .olvide-link {
            font-size: 0.76rem;
            font-weight: 600;
            color: var(--campo);
            text-decoration: none;
        }
        .olvide-link:hover { text-decoration: underline; }

        .campo-input {
            display: flex; align-items: center; gap: 10px;
            background: var(--blanco);
            border: 1px solid var(--linea);
            border-radius: 12px;
            padding: 0 14px;
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .campo-input:focus-within {
            border-color: var(--brote);
            box-shadow: 0 0 0 3px rgba(107, 168, 79, 0.18);
        }
        .campo-input svg {
            width: 17px; height: 17px; stroke: #8a9482; flex-shrink: 0;
        }
        .campo-input input,
        .campo-input select {
            border: none; outline: none; background: transparent;
            width: 100%; padding: 13px 0;
            font-family: var(--font-body); font-size: 0.9rem;
            color: var(--tierra-oscura);
        }
        .campo-input select { cursor: pointer; }
        .campo-input input::placeholder { color: #a3ab99; }

        .btn-primario {
            display: inline-flex; align-items: center; justify-content: center; gap: 10px;
            text-decoration: none; border: none; cursor: pointer;
            color: var(--blanco);
            background: linear-gradient(135deg, var(--campo) 0%, var(--campo-hondo) 100%);
            border-radius: 100px; padding: 15px 26px;
            font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
            box-shadow: 0 10px 22px var(--sombra);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .btn-primario svg { width: 16px; height: 16px; }
        .btn-primario:hover { transform: translateY(-3px); box-shadow: 0 16px 30px var(--sombra); }
        .btn-ancho { width: 100%; margin-top: 6px; }

        .auth-enlaces {
            margin-top: 26px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            font-size: 0.85rem;
        }
        .auth-enlaces a {
            color: var(--campo-hondo);
            text-decoration: none;
        }
        .auth-enlaces a strong { color: var(--campo); }
        .auth-enlaces a:hover { text-decoration: underline; }
        .auth-enlaces .auth-volver { color: #8a9482; }

        /* ---------- Alertas (recuperar contraseña) ---------- */
        .alerta {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-top: 24px;
            padding: 14px 16px;
            border-radius: 14px;
            font-size: 0.85rem;
            line-height: 1.5;
        }
        .alerta svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

        .alerta-exito {
            background: rgba(107, 168, 79, 0.12);
            color: var(--campo-hondo);
            border: 1px solid rgba(107, 168, 79, 0.3);
        }
        .alerta-error {
            background: var(--rojo-claro);
            color: var(--rojo);
            border: 1px solid rgba(179, 70, 44, 0.25);
        }

        /* ---------- Validación por campo ---------- */
        .campo-error {
            display: block;
            margin-top: 6px;
            font-size: 0.76rem;
            font-weight: 600;
            color: var(--rojo);
            min-height: 1em;
        }

        .campo-form.tiene-error .campo-input {
            border-color: var(--rojo);
            background: var(--rojo-claro);
        }

        .campo-form.tiene-exito .campo-input {
            border-color: var(--brote);
        }

        .campo-estado {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            font-size: 0.8rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .campo-form.tiene-error .campo-estado::after { content: "!"; color: var(--rojo); }
        .campo-form.tiene-exito .campo-estado::after { content: "✓"; color: var(--campo); }
        .campo-form.verificando .campo-estado::after {
            content: "";
            width: 12px;
            height: 12px;
            border: 2px solid var(--linea);
            border-top-color: var(--campo);
            border-radius: 50%;
            animation: girar 0.6s linear infinite;
        }

        @keyframes girar { to { transform: rotate(360deg); } }

        /* ---------- Confirmación de correo ---------- */
        .entrada-codigo {
            font-size: 1.5rem !important;
            font-weight: 700;
            letter-spacing: 0.5em;
            text-align: center;
            text-indent: 0.5em; /* compensa el espacio que letter-spacing deja a la derecha */
        }

        .nota-codigo {
            margin-top: 18px;
            font-size: 0.82rem;
            color: #6c7a64;
            line-height: 1.5;
        }

        .acciones-codigo {
            display: flex;
            flex-wrap: wrap;
            gap: 18px;
            margin-top: 10px;
        }

        .btn-texto {
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            font-family: var(--font-body);
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--campo);
        }
        .btn-texto:hover { text-decoration: underline; }

        /* ---------- Responsive ---------- */
        @media (max-width: 900px) {
            .auth-shell { grid-template-columns: 1fr; }
            .auth-visual { min-height: 260px; }
            .auth-visual-svg { display: none; }
        }

        @media (max-width: 560px) {
            .fila-doble { grid-template-columns: 1fr; }
            .campo-form-cabeza { flex-direction: column; align-items: flex-start; gap: 4px; }
            .entrada-codigo { letter-spacing: 0.3em; text-indent: 0.3em; }
        }