:root {
    --bg-a: #fff7ed;
    --bg-b: #fef2f2;
    --bg-c: #f0fdf4;
    --surface: rgba(255,255,255,0.92);
    --text: #2b2b2b;
    --muted: #6b7280;
    --border: rgba(0,0,0,0.07);

    --green: #16794a;
    --green-dark: #0f5e39;

    --red: #c62828;
    --red-dark: #9b1c1c;

    --gold: #d69e2e;

    --shadow:
        0 14px 40px rgba(0,0,0,0.08);

    --radius: 22px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at top left,
            #fff3cd 0,
            transparent 30%
        ),
        radial-gradient(
            circle at top right,
            #fee2e2 0,
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--bg-a),
            var(--bg-b),
            var(--bg-c)
        );

    min-height: 100vh;
}

a {
    color: inherit;
}

.container {
    width: min(
        1100px,
        calc(100% - 30px)
    );

    margin: 0 auto;
}

.site-header {
    background:
        linear-gradient(
            90deg,
            rgba(22,121,74,0.95),
            rgba(198,40,40,0.95)
        );

    color: white;

    box-shadow:
        0 4px 18px rgba(0,0,0,0.12);
}

.header-content {
    min-height: 78px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;

    text-decoration: none;
}

.brand-icon {
    font-size: 2.3rem;
}

.brand strong {
    display: block;
    font-size: 1.15rem;
}

.brand small {
    display: block;
    opacity: 0.85;
}

.veldrik {
    font-size: 0.9rem;
    opacity: 0.8;
}

.page-content {
    padding-top: 28px;
    padding-bottom: 60px;
}

.hero {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.96),
            rgba(255,250,240,0.96)
        );

    border:
        1px solid rgba(214,158,46,0.18);

    border-radius:
        28px;

    padding:
        30px;

    box-shadow:
        var(--shadow);

    margin-bottom:
        28px;
}

.hero::after {
    content: "🎄 ✨ 🎁";

    position: absolute;
    right: 24px;
    top: 18px;

    font-size:
        2rem;

    opacity:
        0.18;
}

.hero h1 {
    margin:
        0 0 22px;

    font-size:
        clamp(
            2rem,
            5vw,
            3rem
        );
}

.meta-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(170px,1fr)
        );

    gap:
        14px;
}

.meta-item {
    background:
        rgba(255,255,255,0.88);

    border:
        1px solid var(--border);

    border-radius:
        16px;

    padding:
        15px;
}

.meta-label {
    display: block;

    color:
        var(--muted);

    font-size:
        0.78rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.06em;

    margin-bottom:
        5px;
}

.meta-value {
    font-weight:
        800;
}

.section {
    margin-top:
        34px;
}

.section-title {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        18px;

    font-size:
        1.6rem;
}

.card-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px,1fr)
        );

    gap:
        18px;
}

.card {
    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    padding:
        22px;

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(8px);
}

.card h3 {
    margin-top:
        0;

    font-size:
        1.25rem;
}

.people-list {
    list-style:
        none;

    padding:
        0;

    margin:
        0;
}

.person {
    padding:
        13px 0;

    border-bottom:
        1px dashed rgba(0,0,0,0.09);
}

.person:last-child {
    border-bottom:
        none;
}

.person-name {
    font-weight:
        800;
}

.badge {
    display:
        inline-block;

    padding:
        4px 9px;

    border-radius:
        999px;

    font-size:
        0.72rem;

    font-weight:
        800;

    margin-left:
        6px;
}

.badge-minor {
    background:
        #e0f2fe;

    color:
        #075985;
}

.badge-success {
    background:
        #dcfce7;

    color:
        #166534;
}

.badge-warning {
    background:
        #fff7ed;

    color:
        #9a3412;
}

.guardian {
    color:
        var(--muted);

    font-size:
        0.9rem;

    margin-top:
        5px;
}

.status-box {
    padding:
        18px 20px;

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            #ecfdf5,
            #f0fdf4
        );

    border:
        1px solid #bbf7d0;

    color:
        #166534;

    font-weight:
        800;

    box-shadow:
        0 8px 20px rgba(22,101,52,0.06);
}

.access-list {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px,1fr)
        );

    gap:
        16px;
}

.access-card {
    position:
        relative;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf2
        );

    border:
        1px solid rgba(214,158,46,0.2);

    border-radius:
        20px;

    padding:
        20px;

    box-shadow:
        var(--shadow);

    overflow:
        hidden;
}

.access-card::before {
    content:
        "✉️";

    position:
        absolute;

    right:
        16px;

    top:
        14px;

    font-size:
        1.7rem;

    opacity:
        0.22;
}

.access-name {
    font-size:
        1.1rem;

    font-weight:
        900;

    margin-bottom:
        14px;
}

.actions {
    display:
        flex;

    gap:
        10px;

    flex-wrap:
        wrap;
}

.btn {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        44px;

    padding:
        11px 16px;

    border-radius:
        12px;

    border:
        none;

    text-decoration:
        none;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.btn:hover {
    transform:
        translateY(-1px);
}

.btn-primary {
    background:
        linear-gradient(
            135deg,
            var(--green),
            var(--green-dark)
        );

    color:
        white;

    box-shadow:
        0 6px 18px rgba(22,121,74,0.18);
}

.btn-secondary {
    background:
        #fff;

    color:
        var(--text);

    border:
        1px solid var(--border);
}

input,
select {
    width:
        100%;

    min-height:
        44px;

    padding:
        10px 12px;

    border-radius:
        10px;

    border:
        1px solid var(--border);

    background:
        white;

    font:
        inherit;
}

.site-footer {
    padding:
        28px 0;

    text-align:
        center;

    color:
        var(--muted);

    font-size:
        0.85rem;
}

@media (max-width: 600px) {
    .container {
        width:
            min(
                100% - 20px,
                1100px
            );
    }

    .hero {
        padding:
            20px;
    }

    .hero::after {
        display:
            none;
    }

    .card {
        padding:
            17px;
    }

    .veldrik {
        display:
            none;
    }

    .actions {
        flex-direction:
            column;
    }

    .btn {
        width:
            100%;
    }
}


/* =========================================================
   Administración de participantes
   ========================================================= */

textarea {
    width: 100%;
    padding: 12px;

    border:
        1px solid var(--border);

    border-radius:
        12px;

    background:
        white;

    font:
        inherit;

    resize:
        vertical;
}

.helper-text {
    color:
        var(--muted);

    font-size:
        0.9rem;

    line-height:
        1.45;
}

.group-count {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        28px;

    height:
        28px;

    padding:
        0 8px;

    margin-left:
        6px;

    border-radius:
        999px;

    background:
        #f3f4f6;

    color:
        var(--muted);

    font-size:
        0.8rem;
}

.participant-actions {
    display:
        flex;

    gap:
        7px;

    margin-top:
        9px;
}

.participant-actions form {
    margin:
        0;
}

.btn-small {
    min-height:
        36px;

    padding:
        7px 11px;

    font-size:
        0.82rem;
}


/* =========================================================
   Crear intercambio
   ========================================================= */

.create-hero {
    display: flex;
    align-items: center;
    gap: 22px;
}

.create-hero-icon {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 82px;
    height: 82px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #fff7ed,
            #fee2e2
        );

    font-size: 3.2rem;

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.04);
}

.create-hero h1 {
    margin-bottom: 8px;
}

.hero-description {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}


.form-card {
    max-width: 850px;
    margin: 0 auto;
    padding: 28px;
}


.form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}


.field-full {
    grid-column: 1 / -1;
}


.field label {
    font-weight: 800;
    font-size: 0.95rem;
}


.field small {
    color: var(--muted);
    line-height: 1.4;
}


.field input,
.field select {
    min-height: 50px;

    padding:
        11px 13px;

    border:
        1px solid #d1d5db;

    border-radius:
        13px;

    background:
        rgba(255,255,255,0.95);

    font-size:
        1rem;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


.field input:focus,
.field select:focus {
    outline: none;

    border-color:
        var(--green);

    box-shadow:
        0 0 0 3px rgba(22,121,74,0.12);
}


.form-note {
    display: flex;
    gap: 12px;

    margin-top: 26px;

    padding: 17px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #fffbeb,
            #fff7ed
        );

    border:
        1px solid #fde68a;
}


.form-note > span {
    font-size: 1.5rem;
}


.form-note p {
    margin:
        5px 0 0;

    color:
        var(--muted);

    line-height:
        1.45;
}


.form-actions {
    display: flex;
    gap: 12px;

    margin-top: 26px;
}


.btn-large {
    min-height: 50px;
    padding: 12px 20px;
    font-size: 1rem;
}


.form-error {
    margin-bottom: 20px;

    padding: 14px 16px;

    border-radius: 14px;

    background: #fef2f2;
    border: 1px solid #fecaca;

    color: #991b1b;

    font-weight: 700;
}


input[type="checkbox"] {
    width: auto;
    min-height: auto;
}


@media (max-width: 650px) {

    .create-hero {
        align-items: flex-start;
    }

    .create-hero-icon {
        width: 60px;
        height: 60px;

        border-radius: 18px;

        font-size: 2.3rem;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .field-full {
        grid-column: auto;
    }

    .form-card {
        padding: 19px;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }

}


/* =========================================================
   Tutores de menores
   ========================================================= */

.form-space {
    margin-top: 20px;
}

.minor-toggle {
    margin-top: 24px;

    padding: 16px;

    background:
        rgba(224,242,254,0.55);

    border:
        1px solid #bae6fd;

    border-radius:
        15px;
}

.toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;

    font-weight: 800;
    cursor: pointer;
}

.toggle-row input {
    width: 20px;
    height: 20px;
}

.guardian-selector {
    margin-top: 20px;

    padding: 20px;

    background:
        linear-gradient(
            135deg,
            #f8fafc,
            #ffffff
        );

    border:
        1px solid var(--border);

    border-radius:
        18px;
}

.guardian-selector[hidden] {
    display: none;
}

.guardian-heading h3 {
    margin:
        0 0 5px;
}

.guardian-heading p {
    margin:
        0;

    color:
        var(--muted);

    line-height:
        1.45;
}

.guardian-options {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );

    gap: 10px;

    margin-top: 17px;
}

.guardian-option {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 12px;

    background: white;

    border:
        1px solid var(--border);

    border-radius:
        13px;

    cursor: pointer;

    transition:
        border-color .15s ease,
        transform .15s ease;
}

.guardian-option:hover {
    border-color:
        var(--green);

    transform:
        translateY(-1px);
}

.guardian-option input {
    width: 18px;
    height: 18px;
}

.guardian-avatar {
    font-size: 1.2rem;
}


/* =========================================================
   Configuración inicial del intercambio
   ========================================================= */

.setup-section {
    margin-top: 24px;
}

.setup-card {
    display: flex;
    align-items: center;
    gap: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.96),
            rgba(240,253,244,0.94)
        );
}

.setup-card-icon {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 68px;
    height: 68px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #dcfce7,
            #fef3c7
        );

    font-size: 2rem;
}

.setup-card-content {
    flex: 1;
}

.setup-card-content h2 {
    margin:
        0 0 5px;
}

.inline-create-form {
    display: flex;
    gap: 10px;

    margin-top: 15px;
}

.inline-create-form input {
    flex: 1;
}


@media (max-width: 650px) {

    .setup-card {
        align-items: flex-start;
    }

    .setup-card-icon {
        width: 54px;
        height: 54px;

        font-size: 1.6rem;
    }

    .inline-create-form {
        flex-direction: column;
    }

    .inline-create-form .btn {
        width: 100%;
    }

}