/* Extraído de pages/sign-in.html (bloque 1) por tools/csp_styles.py — editar AQUÍ, no en la página */
        :root {
            --porsche-accent: #C7252B;
            --porsche-accent-hover: #E53E3E;
            --glass-bg: rgba(255, 255, 255, 0.45);
            --glass-border: rgba(255, 255, 255, 0.3);
            --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
        }

        body {
            font-family: 'Inter', sans-serif;
            background: #f1f5f9;
            margin: 0;
            overflow-x: hidden;
            display: flex;
            min-height: 100vh;
        }

        /* Split Screen Layout */
        .split-container {
            width: 100%;
            display: flex;
            min-height: 100vh;
        }

        /* Left Panel - Glassmorphism.
           overflow-y:auto + min-height (no height fija) evita que en
           pantallas bajas (laptops ~800px, zoom, formulario largo) el
           badge de LUMIA quede cortado por el overflow:hidden que tenía
           el body — ahora el panel scrollea internamente si no cabe. */
        .left-panel {
            width: 40%;
            min-height: 100vh;
            background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            position: relative;
            z-index: 10;
            overflow-y: auto;
        }

        .glass-card {
            width: 100%;
            max-width: 440px;
            background: var(--glass-bg);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 1px solid var(--glass-border);
            border-radius: 32px;
            padding: 3rem;
            box-shadow: var(--glass-shadow);
        }

        /* Right Panel - Banner System */
        .right-panel {
            width: 60%;
            background: #f8fafc;
            position: relative;
            overflow: hidden;
        }

        /* ── Carrusel de banners (22-oct-2026) ─────────────────────────────
           Los banners del admin son piezas YA diseñadas (con su propio texto),
           de cualquier tamaño y proporción. Por eso:
           1. La imagen se muestra COMPLETA (object-fit: contain), con aire
              alrededor — nunca recortada ni pegada a los bordes.
           2. Detrás, la misma imagen ampliada y desenfocada rellena el panel
              (sin franjas vacías, combina con cualquier banner).
           3. El título/descripción va en una barra de vidrio DEBAJO de la
              imagen, nunca encima; si el banner no trae título, la barra solo
              lleva los puntos de navegación (o no aparece si hay uno solo).
           La imagen reserva el alto de la barra con --cap-h (lo mide el JS). */
        .carousel-slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 1.2s ease;
            z-index: 1;
        }
        .carousel-slide.active { opacity: 1; z-index: 2; }
        .carousel-blur {
            position: absolute;
            inset: -60px;
            background-size: cover;
            background-position: center;
            filter: blur(42px) saturate(1.25) brightness(0.92);
            transform: scale(1.08);
        }
        .carousel-blur::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(248, 250, 252, 0.10), rgba(15, 23, 42, 0.18));
        }
        .carousel-figure {
            --pad: clamp(28px, 4vw, 64px);
            position: absolute;
            top: var(--pad);
            left: var(--pad);
            right: var(--pad);
            bottom: calc(var(--pad) + var(--cap-h, 0px));
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
        }
        .carousel-img {
            display: block;
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 20px;
            box-shadow: 0 30px 70px -20px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.35);
            transform: scale(0.985);
            transition: transform 6s ease-out;
        }
        .carousel-slide.active .carousel-img { transform: scale(1); }

        /* Barra de vidrio: título + descripción + puntos */
        .carousel-caption {
            --pad: clamp(28px, 4vw, 64px);
            position: absolute;
            left: var(--pad);
            right: var(--pad);
            bottom: calc(var(--pad) * 0.55);
            z-index: 5;
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 16px 22px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.62);
            backdrop-filter: blur(18px) saturate(1.4);
            -webkit-backdrop-filter: blur(18px) saturate(1.4);
            box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
            color: #0f172a;
            transition: opacity .4s ease;
        }
        .carousel-caption[hidden] { display: none; }
        .carousel-caption.is-dots-only { left: 50%; right: auto; transform: translateX(-50%); padding: 12px 16px; }
        .carousel-caption-text { flex: 1; min-width: 0; transition: opacity .35s ease; }
        .carousel-caption-text.is-fading { opacity: 0; }
        .carousel-caption-title {
            margin: 0;
            font-size: clamp(1rem, 1.25vw, 1.25rem);
            font-weight: 800;
            letter-spacing: -0.01em;
            line-height: 1.25;
            color: #0f172a;
            overflow-wrap: anywhere;
        }
        .carousel-caption-desc {
            margin: 4px 0 0;
            font-size: 0.875rem;
            line-height: 1.45;
            color: #475569;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .carousel-dots { display: flex; gap: 8px; flex: none; }
        .carousel-dot {
            width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
            background: rgba(15, 23, 42, 0.22);
            transition: width .3s ease, background .3s ease;
        }
        .carousel-dot:hover { background: rgba(15, 23, 42, 0.4); }
        .carousel-dot.active { width: 26px; background: var(--porsche-accent, #C7252B); }
        .carousel-dot:focus-visible { outline: 2px solid var(--porsche-accent, #C7252B); outline-offset: 3px; }
        @media (max-height: 760px) {
            .carousel-figure, .carousel-caption { --pad: 24px; }
            .carousel-caption { padding: 12px 18px; }
            .carousel-caption-desc { -webkit-line-clamp: 1; }
        }
        @media (prefers-reduced-motion: reduce) {
            .carousel-slide, .carousel-img, .carousel-caption-text { transition: none; }
        }

        /* Form Controls */
        .porsche-input {
            width: 100%;
            background: rgba(255, 255, 255, 0.7);
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 0.875rem 1rem 0.875rem 3rem;
            font-size: 0.875rem;
            transition: all 0.3s ease;
            outline: none;
            box-sizing: border-box;
        }

        .porsche-input:focus {
            background: white;
            border-color: #3b82f6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--porsche-accent) 0%, #a51d22 100%);
            color: white;
            font-weight: 700;
            padding: 1rem;
            border-radius: 14px;
            width: 100%;
            transition: all 0.4s ease;
            box-shadow: 0 10px 15px -3px rgba(199, 37, 43, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            border: none;
            cursor: pointer;
            font-size: 0.95rem;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            filter: brightness(1.1);
            box-shadow: 0 20px 25px -5px rgba(199, 37, 43, 0.4);
        }

        .btn-visitor {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #1e293b;
            font-weight: 700;
            padding: 0.875rem;
            border-radius: 14px;
            width: 100%;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
        }

        .btn-visitor:hover {
            background: rgba(199, 37, 43, 0.1);
            border-color: var(--porsche-accent);
            color: var(--porsche-accent);
        }

        .reveal-up {
            opacity: 0;
            transform: translateY(20px);
        }

        /* Loading Spinner */
        #bannerLoading {
            position: absolute;
            inset: 0;
            background: #f8fafc;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 50;
        }

        /* ═══════════════════════════════════════════════
           MODAL — RECUPERACIÓN DE CONTRASEÑA
           ═══════════════════════════════════════════════ */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.65);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .modal-overlay.active {
            opacity: 1;
            pointer-events: all;
        }

        .modal-card {
            background: white;
            border-radius: 24px;
            padding: 2.5rem;
            width: 100%;
            max-width: 420px;
            margin: 1rem;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
            transform: translateY(20px) scale(0.97);
            transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .modal-overlay.active .modal-card {
            transform: translateY(0) scale(1);
        }

        /* Strength bar */
        .strength-bar-container {
            height: 4px;
            background: #e2e8f0;
            border-radius: 99px;
            overflow: hidden;
            margin-top: 6px;
        }

        .strength-bar-fill {
            height: 100%;
            border-radius: 99px;
            width: 0%;
            transition: width 0.4s ease, background-color 0.4s ease;
        }

        /* Link "¿Olvidaste?" */
        .forgot-link {
            font-size: 9px;
            font-weight: 800;
            color: #C7252B;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            text-decoration: none;
            transition: opacity 0.2s;
        }
        .forgot-link:hover { opacity: 0.7; }

        /* Verificación URL params */
        .verify-banner {
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            color: #15803d;
            border-radius: 12px;
            padding: 10px 14px;
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 12px;
            display: none;
        }

        @media (max-width: 1024px) {
            .right-panel { display: none; }
            .left-panel  { width: 100%; }
        }

        /* Antes solo existía el breakpoint de 1024px (ocultar el carrusel):
           en teléfonos el padding/tamaños quedaban pensados para escritorio
           — la tarjeta se veía apretada contra los bordes y el badge de
           LUMIA competía por espacio sin margen de respiro. */
        @media (max-width: 640px) {
            .left-panel { padding: 1.25rem; }
            .glass-card { padding: 2rem 1.5rem; border-radius: 24px; }
        }
        @media (max-width: 380px) {
            .left-panel { padding: 1rem 0.85rem; }
            .glass-card { padding: 1.5rem 1.15rem; }
        }

        /* En pantallas bajas (laptops ~800px de alto, o zoom del navegador)
           el formulario completo (logo + título + email + password + botón
           + visitante + registro + badge LUMIA) no cabía sin scroll. El
           overflow-y:auto ya permite scrollear, pero se compacta el
           espaciado vertical para que quepa completo sin scroll en la
           mayoría de las pantallas reales, dejando el scroll solo como
           red de seguridad en viewports genuinamente pequeños. */
        /* El umbral anterior (760px) casi nunca se activaba: una laptop
           normal con la barra del navegador ya tiene ~850-950px de alto
           de viewport, así que en la práctica el formulario SIEMPRE se
           veía a tamaño completo y SIEMPRE requería scroll para ver el
           badge de LUMIA. Subido a 1050px para que cubra prácticamente
           cualquier laptop real, no solo pantallas genuinamente chicas. */
        /* Todavía faltaba un poco (el badge quedaba justo cortado en el
           borde) — se sube el umbral a 1300px (cubre prácticamente toda
           pantalla real) y se recorta más el padding vertical de la
           tarjeta, que antes solo se tocaba por debajo de 760px. */
        @media (max-height: 1300px) {
            .glass-card { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
            .glass-card img.w-44 { margin-bottom: 0.85rem !important; width: 8rem !important; }
            .glass-card .mb-10 { margin-bottom: 1rem !important; }
            .back-to-site { margin-bottom: 0.35rem; }
            .glass-card form.space-y-6 > * + * { margin-top: 0.85rem !important; }
            .mt-8.pt-8 { margin-top: 1rem !important; padding-top: 1rem !important; }
            .left-panel { padding-top: 0.75rem; padding-bottom: 0.75rem; }
            div[style*="margin-top: 1.75rem"] { margin-top: 0.65rem !important; }
        }
        @media (max-height: 760px) {
            .glass-card { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
            .glass-card img.w-44 { width: 6rem !important; margin-bottom: 0.6rem !important; }
        }

        /* Botón "Volver al sitio" */
        .back-to-site {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1rem;
            padding: 0.45rem 0.8rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.7);
            color: #475569;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            text-decoration: none;
            transition: all 0.25s ease;
        }
        .back-to-site:hover {
            color: var(--porsche-accent);
            border-color: rgba(199, 37, 43, 0.35);
            background: rgba(255, 255, 255, 0.85);
        }
        .back-to-site i {
            font-size: 9px;
            transition: transform 0.25s ease;
        }
        .back-to-site:hover i { transform: translateX(-3px); }

        /* Espaciado base reducido (no depende de ningún breakpoint): el
           formulario completo era más alto de lo necesario incluso en
           laptops normales — logo de 176px + mb-10 (40px) + mb-6 (24px)
           sumaban peso vertical que el login no necesita para verse bien. */
        .glass-card img.w-44 { width: 10rem !important; margin-bottom: 1.25rem !important; }
        .glass-card .mb-10 { margin-bottom: 1.75rem !important; }