:root {
            --color-principal: #0f172a;
            --color-secundario: #0ea5e9;
            --color-acento: #22c55e;
            --color-fondo: #f4f7fb;
            --color-card: #ffffff;
            --color-texto: #1e293b;
            --color-suave: #64748b;
            --radio: 20px;
        }

        body {
            background: linear-gradient(135deg, #eef6ff 0%, #f8fafc 50%, #ecfeff 100%);
            color: var(--color-texto);
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            min-height: 100vh;
        }

        .hero {
            background: linear-gradient(135deg, #0f172a, #075985);
            color: white;
            padding: 42px 24px;
            border-radius: 0 0 34px 34px;
            box-shadow: 0 20px 45px rgba(15, 23, 42, .25);
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,.14);
            border: 1px solid rgba(255,255,255,.2);
            padding: 8px 14px;
            border-radius: 999px;
            font-size: .9rem;
            margin-bottom: 14px;
        }

        .contenedor-principal {
            max-width: 1180px;
            margin: -36px auto 50px;
            padding: 0 16px;
        }

        .card-formulario {
            background: var(--color-card);
            border: 0;
            border-radius: var(--radio);
            box-shadow: 0 18px 48px rgba(15, 23, 42, .12);
            overflow: hidden;
        }

        .barra-progreso-wrapper {
            background: #e2e8f0;
            height: 10px;
            border-radius: 999px;
            overflow: hidden;
        }

        .barra-progreso {
            width: 0%;
            height: 100%;
            background: linear-gradient(90deg, var(--color-secundario), var(--color-acento));
            transition: width .35s ease;
        }

        .seccion-formulario {
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            padding: 24px;
            margin-bottom: 22px;
            background: #ffffff;
            transition: all .2s ease;
        }

        .seccion-formulario:hover {
            border-color: #bae6fd;
            box-shadow: 0 10px 24px rgba(14, 165, 233, .08);
        }

        .titulo-seccion {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
            color: var(--color-principal);
        }

        .titulo-seccion .icono {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            border-radius: 14px;
            background: #e0f2fe;
            color: #0284c7;
            font-size: 1.25rem;
            flex: none;
        }

        .titulo-seccion h2 {
            font-size: 1.25rem;
            margin: 0;
            font-weight: 800;
        }

        .titulo-seccion p {
            margin: 2px 0 0;
            color: var(--color-suave);
            font-size: .92rem;
        }

        label.form-label {
            font-weight: 650;
            color: #334155;
            font-size: .94rem;
        }

        .form-control,
        .form-select {
            border-radius: 12px;
            border-color: #cbd5e1;
            padding: 11px 13px;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--color-secundario);
            box-shadow: 0 0 0 .2rem rgba(14, 165, 233, .14);
        }

        textarea.form-control {
            min-height: 95px;
        }

        .grupo-opciones {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .opcion-chip {
            border: 1px solid #cbd5e1;
            border-radius: 999px;
            padding: 9px 14px;
            background: white;
            cursor: pointer;
            transition: all .2s ease;
            user-select: none;
        }

        .opcion-chip input {
            margin-right: 6px;
        }

        .opcion-chip:has(input:checked) {
            background: #e0f2fe;
            border-color: #38bdf8;
            color: #075985;
            font-weight: 700;
        }

        .nota-alerta {
            border-left: 5px solid #f59e0b;
            background: #fffbeb;
            padding: 14px 16px;
            border-radius: 12px;
            color: #92400e;
        }

        .resumen-box {
            display: none;
            border-radius: 18px;
            background: #f8fafc;
            border: 1px dashed #94a3b8;
            padding: 20px;
            white-space: pre-wrap;
            max-height: 480px;
            overflow: auto;
            font-family: Consolas, monospace;
            font-size: .9rem;
        }

        .boton-principal {
            background: linear-gradient(135deg, #0284c7, #0f766e);
            color: white;
            border: none;
            border-radius: 14px;
            padding: 12px 22px;
            font-weight: 800;
            box-shadow: 0 12px 24px rgba(14, 165, 233, .25);
        }

        .boton-principal:hover {
            color: white;
            transform: translateY(-1px);
        }

        .boton-secundario {
            border-radius: 14px;
            padding: 12px 22px;
            font-weight: 700;
        }

        .campo-requerido::after {
            content: " *";
            color: #ef4444;
        }

        .campo-invalido,
        .campo-invalido.form-check-input {
            border-color: #ef4444 !important;
            box-shadow: 0 0 0 0.15rem rgba(239, 68, 68, 0.2);
        }

        select.campo-invalido,
        textarea.campo-invalido {
            border-color: #ef4444 !important;
        }

        .contador-campos {
            font-size: .9rem;
            color: var(--color-suave);
        }

        @media print {
            body {
                background: white;
            }
            .hero,
            .acciones,
            .barra-progreso-wrapper,
            .contador-campos {
                display: none !important;
            }
            .contenedor-principal {
                margin: 0;
                max-width: 100%;
            }
            .card-formulario,
            .seccion-formulario {
                box-shadow: none;
                border: 1px solid #ddd;
            }
        }

        @media (max-width: 767.98px) {
            .hero {
                padding: 28px 16px;
                border-radius: 0 0 24px 24px;
            }

            .hero h1 {
                font-size: 1.45rem;
            }

            .contenedor-principal {
                margin-top: -24px;
                padding: 0 12px 32px;
            }

            .seccion-formulario {
                padding: 16px;
                border-radius: 14px;
            }

            .titulo-seccion {
                flex-direction: column;
                align-items: flex-start;
            }

            .grupo-opciones {
                gap: 8px;
            }

            .opcion-chip {
                font-size: .85rem;
                padding: 8px 12px;
            }

            .acciones {
                flex-direction: column;
            }

            .acciones .btn {
                width: 100%;
            }
        }

        @media (max-width: 575.98px) {
            .card-formulario .card-body {
                padding: 1rem !important;
            }

            label.form-label {
                font-size: .88rem;
            }
        }