.pef-root {
    /* ---- Tokens de diseño ---- */
    --pef-noche: #1D1B31;       /* fondo base, tinta nocturna */
    --pef-noche-2: #262340;     /* paneles sobre el fondo */
    --pef-pergamino: #F3ECE0;   /* acentos claros tipo pergamino */
    --pef-purpura: #6C4AB6;     /* primario arcano */
    --pef-oro: #D4AF37;         /* exclusivo premium/legendario */
    --pef-esmeralda: #2FA37B;   /* free / éxito */
    --pef-carmesi: #B2495A;     /* alertas */
    --pef-texto: #F3ECE0;
    --pef-muted: #A79FC9;

    /* Pila de fuentes del sistema: sin peticiones a Google Fonts (RGPD) */
    --pef-font-display: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
    --pef-font-body: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
    --pef-font-mono: 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;

    font-family: var(--pef-font-body);
    color: var(--pef-texto);
    max-width: 880px;
    margin: 0 auto;
}

.pef-wrap {
    position: relative;
    background: radial-gradient(120% 140% at 10% 0%, var(--pef-noche-2), var(--pef-noche) 65%);
    border: 1px solid rgba(212,175,55,.18);
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
}

/* ---------- Barra superior ---------- */
.pef-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(212,175,55,.2);
}

.pef-topbar-title {
    font-family: var(--pef-font-display);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .3px;
}

.pef-topbar-acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.pef-link-btn {
    background: none;
    border: 1px solid rgba(243,236,224,.25);
    color: var(--pef-esmeralda);
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
}

.pef-link-btn-oro {
    border-color: rgba(212,175,55,.5);
    color: var(--pef-oro);
}

.pef-premium-badge {
    background: linear-gradient(90deg, #b8860b, var(--pef-oro), #b8860b);
    color: #1D1B31;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .85rem;
}

/* ---------- Navegación de pasos ---------- */
.pef-stepnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.pef-step-pill {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(243,236,224,.06);
    color: var(--pef-muted);
    font-size: .8rem;
    font-weight: 600;
    font-family: var(--pef-font-mono);
}

.pef-step-pill.pef-active {
    background: var(--pef-purpura);
    color: #fff;
}

.pef-step-pill.pef-done {
    background: rgba(47,163,123,.18);
    color: var(--pef-esmeralda);
}

.pef-step h2 {
    font-family: var(--pef-font-display);
    margin: 0 0 6px;
    font-size: 1.5rem;
    letter-spacing: .2px;
}

.pef-step h3 {
    font-family: var(--pef-font-display);
    font-size: 1.05rem;
}

.pef-hint {
    color: var(--pef-muted);
    margin: 0 0 18px;
    font-size: .92rem;
}

/* ---------- Grids de selección ---------- */
.pef-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.pef-grid-3 { grid-template-columns: repeat(3, 1fr); }

.pef-card {
    background: var(--pef-noche-2);
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 18px 12px;
    color: var(--pef-texto);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: .95rem;
    font-weight: 600;
    transition: transform .15s ease, border-color .15s ease;
}

.pef-card:hover { transform: translateY(-2px); }

.pef-card.pef-selected {
    border-color: var(--pef-oro);
    background: linear-gradient(145deg, rgba(108,74,182,.35), rgba(212,175,55,.12));
}

.pef-card-small { padding: 12px 8px; font-size: .85rem; }
.pef-icon { font-size: 1.8rem; }

.pef-label {
    display: block;
    margin: 18px 0 8px;
    font-weight: 600;
    color: var(--pef-muted);
    font-family: var(--pef-font-mono);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.pef-range { width: 100%; margin-bottom: 10px; accent-color: var(--pef-oro); }

/* ---------- Navegación de botones ---------- */
.pef-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.pef-btn {
    background: var(--pef-purpura);
    color: #fff;
    border: none;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    font-size: .95rem;
    font-family: var(--pef-font-body);
}

.pef-btn.pef-disabled, .pef-btn:disabled { opacity: .5; cursor: not-allowed; }
.pef-btn-secondary { background: rgba(243,236,224,.08); color: var(--pef-texto); }

.pef-btn-ai {
    background: linear-gradient(90deg, var(--pef-purpura), var(--pef-oro));
    margin-top: 10px;
}

.pef-btn-locked {
    background: rgba(212,175,55,.12);
    color: var(--pef-oro);
    border: 1px dashed rgba(212,175,55,.5);
    margin-top: 10px;
}

.pef-ai-output {
    margin-top: 12px;
    padding: 14px;
    background: rgba(243,236,224,.05);
    border-radius: 12px;
    white-space: pre-wrap;
    font-size: .9rem;
    color: var(--pef-muted);
    min-height: 20px;
    border-left: 3px solid var(--pef-oro);
}

/* ---------- Bloqueo de funciones premium ---------- */
.pef-lock-overlay {
    background: rgba(212,175,55,.06);
    border: 1px dashed rgba(212,175,55,.4);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.pef-lock-overlay p { color: var(--pef-oro); margin: 0 0 12px; font-weight: 600; }

/* ---------- Insignia de rareza (elemento firma) ---------- */
.pef-rareza-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--pef-font-mono);
    font-weight: 600;
    font-size: .82rem;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
    letter-spacing: .03em;
}

.pef-rareza-estrella { font-size: .9em; }

.pef-rareza-comun { background: rgba(167,159,201,.15); color: var(--pef-muted); }
.pef-rareza-raro { background: rgba(47,163,123,.18); color: var(--pef-esmeralda); }
.pef-rareza-epico { background: rgba(108,74,182,.25); color: #c9b6ff; }

.pef-rareza-legendario {
    background: linear-gradient(90deg, #b8860b, var(--pef-oro), #fff3c4, var(--pef-oro), #b8860b);
    background-size: 300% 100%;
    color: #1D1B31;
    animation: pef-holo 3.5s linear infinite;
}

@keyframes pef-holo {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.pef-rareza-hint { color: var(--pef-muted); font-weight: 500; font-size: .78rem; }

/* ---------- Paleta y bloques del plan ---------- */
.pef-paleta { display: flex; gap: 8px; margin-bottom: 20px; }
.pef-swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(243,236,224,.3); }

.pef-bloque {
    background: var(--pef-noche-2);
    border: 1px solid rgba(212,175,55,.1);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 14px;
}

.pef-bloque h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
    color: var(--pef-oro);
}

.pef-bloque ul { margin: 0; padding-left: 20px; }
.pef-bloque li { margin-bottom: 6px; line-height: 1.4; }

.pef-checklist li {
    list-style: none;
    margin-left: -20px;
    padding-left: 26px;
    position: relative;
    font-family: var(--pef-font-mono);
    font-size: .9rem;
    cursor: pointer;
    user-select: none;
    transition: opacity .15s ease;
}

.pef-checklist li::before {
    content: "☐";
    position: absolute;
    left: 0;
    color: var(--pef-esmeralda);
}

.pef-checklist li.pef-check-hecho {
    opacity: .55;
    text-decoration: line-through;
}

.pef-checklist li.pef-check-hecho::before {
    content: "☑";
    color: var(--pef-oro);
}

/* ---------- Editor de invitación ---------- */
.pef-inv-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

@media (max-width: 500px) {
    .pef-inv-campos { grid-template-columns: 1fr; }
}

.pef-input-inv { margin-bottom: 0; }

.pef-textarea {
    min-height: 110px;
    resize: vertical;
    font-family: var(--pef-font-body);
    line-height: 1.45;
}

.pef-inv-acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* ---------- Prompt de vídeo IA (Flow) ---------- */
.pef-flow-wrap {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed rgba(243,236,224,.18);
}

.pef-flow-titulo {
    margin: 0 0 4px;
    font-family: var(--pef-font-display);
    color: var(--pef-texto);
}

.pef-flow-nota {
    margin-top: 8px;
}

.pef-btn-flow {
    background: linear-gradient(90deg, #1a73e8, #8ab4f8);
    color: #0b1220;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* ---------- Ajuste manual de presupuesto ---------- */
.pef-presupuesto-ajuste {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.pef-input-ajuste {
    max-width: 220px;
    margin-bottom: 0;
}

/* ---------- Modal de licencia ---------- */
.pef-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10,9,20,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.pef-modal {
    background: var(--pef-noche-2);
    border: 1px solid rgba(212,175,55,.35);
    border-radius: 16px;
    padding: 26px;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.pef-modal h3 {
    font-family: var(--pef-font-display);
    margin: 0 0 8px;
    color: var(--pef-oro);
}

.pef-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(243,236,224,.2);
    background: rgba(243,236,224,.05);
    color: var(--pef-texto);
    font-family: var(--pef-font-mono);
    margin-bottom: 10px;
    box-sizing: border-box;
}

/* ---------- Eventos guardados ---------- */
.pef-btn-carnet {
    background: linear-gradient(90deg, #8a6b12, var(--pef-oro));
    color: #1D1B31;
    margin-bottom: 18px;
}

.pef-presupuesto-desglose {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.pef-presupuesto-fila {
    display: grid;
    grid-template-columns: 140px 1fr 100px;
    align-items: center;
    gap: 10px;
    font-size: .85rem;
}

.pef-presupuesto-etiqueta {
    color: var(--pef-muted);
    font-family: var(--pef-font-mono);
}

.pef-presupuesto-barra-wrap {
    background: rgba(243,236,224,.08);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.pef-presupuesto-barra {
    height: 100%;
    background: linear-gradient(90deg, var(--pef-purpura), var(--pef-oro));
    border-radius: 999px;
}

.pef-presupuesto-cifra {
    font-family: var(--pef-font-mono);
    text-align: right;
    color: var(--pef-texto);
}

@media (max-width: 500px) {
    .pef-presupuesto-fila {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .pef-presupuesto-cifra { text-align: left; }
}

/* ---------- Preview en vivo ---------- */
.pef-preview {
    background: rgba(108,74,182,.08);
    border: 1px solid rgba(108,74,182,.25);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.pef-preview-titulo {
    display: block;
    font-family: var(--pef-font-mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pef-muted);
    margin-bottom: 8px;
}

.pef-preview-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pef-preview-chip {
    background: var(--pef-noche-2);
    border: 1px solid rgba(243,236,224,.15);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: .8rem;
    font-weight: 600;
}

.pef-preview-chip-fusion {
    border-color: rgba(212,175,55,.5);
    color: var(--pef-oro);
}

/* ---------- Enlaces de tiendas ---------- */
.pef-tiendas-seccion { margin-bottom: 12px; }

.pef-tiendas-titulo {
    display: block;
    margin-bottom: 4px;
    color: var(--pef-texto);
    font-size: .92rem;
}

.pef-tienda-link {
    color: var(--pef-esmeralda);
    text-decoration: none;
    font-size: .88rem;
}

.pef-tienda-link:hover { text-decoration: underline; color: var(--pef-oro); }

.pef-evento-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.pef-evento-guardado h3 { margin: 0; color: var(--pef-texto); font-family: var(--pef-font-display); }

.pef-loading { text-align: center; padding: 40px; color: var(--pef-muted); }

@media (max-width: 600px) {
    .pef-wrap { padding: 18px; border-radius: 12px; }
    .pef-grid-3 { grid-template-columns: 1fr; }
}

/* ---------- Impresión / exportación PDF ---------- */
@media print {
    .pef-stepnav, .pef-nav, .pef-btn-ai, .pef-btn-locked, .pef-btn-carnet, .pef-topbar-acciones { display: none !important; }
    .pef-root { color: #000; }
    .pef-wrap { box-shadow: none; background: #fff; border: none; }
    .pef-bloque { background: #f5f5f5; color: #000; border: none; break-inside: avoid; }
    .pef-bloque h3 { color: #333; }
    .pef-rareza-legendario, .pef-rareza-epico, .pef-rareza-raro, .pef-rareza-comun {
        background: #eee; color: #333; animation: none;
    }
}

body.pef-marca-agua .pef-wrap::after {
    content: "PLANIFICADOR DE EVENTOS FRIKIS — VERSIÓN FREE";
    position: fixed;
    top: 45%;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--pef-font-mono);
    font-size: 1.4rem;
    color: rgba(0,0,0,.15);
    transform: rotate(-20deg);
    pointer-events: none;
    z-index: 1;
}

@media screen {
    body.pef-marca-agua .pef-wrap::after { display: none; }
}