.vsdTituloPasaporte{
    text-align:center;
    margin-bottom:8px;
}

.vsdTituloPasaporte img{
    display:block;
    width:100%;
    max-width:150px;
    height:auto;
    margin:0 auto;
}

/* ==========================================
   POPUP SELLO
========================================== */

html.vsd-popup-sello-abierto,
body.vsd-popup-sello-abierto{
    overflow:hidden !important;
    overscroll-behavior:none;
}

#vsdPopupSello{

    position:fixed !important;
    inset:0 !important;

    width:auto !important;
    height:auto !important;
    max-width:none !important;
    max-height:none !important;

    margin:0 !important;
    transform:none !important;

    display:none !important;

    align-items:center !important;
    justify-content:center !important;

    padding:max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom)) !important;
    box-sizing:border-box !important;

    z-index:2147483646 !important;

    background:rgba(0,0,0,.78) !important;

    overflow:hidden !important;

}

#vsdPopupSello.is-open{
    display:flex !important;
}

.vsdPopupSelloContenido{

    position:relative !important;

    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;

    flex:0 1 auto;

    width:min(92vw,540px) !important;
    max-width:540px !important;
    max-height:min(88dvh, 88vh) !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;
    scrollbar-width:none; /* Firefox: sin barra fea */
    -ms-overflow-style:none;

    -webkit-overflow-scrolling:touch;

    background:
        linear-gradient(
            rgba(255,248,235,.22),
            rgba(70,45,20,.08)
        ),
        url("https://programavivesindolor.com/wp-content/uploads/2026/06/textura-papel.jpg");

    background-size:cover;
    background-position:center;

    border-radius:22px;
    border:1px solid rgba(74,53,35,.18);

    padding:22px 22px 20px;

    text-align:center;

    box-shadow:
        0 20px 60px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.35);

    margin:0 auto !important;

    animation:popupSello .28s ease both;

}

.vsdPopupSelloContenido::-webkit-scrollbar{
    display:none;
    width:0;
    height:0;
}

@keyframes popupSello{

    from{

        opacity:0;
        transform:translateY(15px) scale(.95);

    }

    to{

        opacity:1;
        transform:none;

    }

}

#cerrarPopupSello{

    position:absolute;

    top:12px;
    right:12px;

    width:36px;
    height:36px;

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

    padding:0;

    border:1px solid rgba(36,24,15,.2);
    border-radius:50%;

    background:rgba(255,255,255,.55);

    cursor:pointer;

    font-size:18px;
    line-height:1;
    font-weight:700;

    color:#24180f;

    transition:.2s;

    z-index:2;

}
#cerrarPopupSello:hover{

    background:rgba(255,255,255,.85);
    color:#111;

}

#popupSelloImg{

    width:150px;
    height:150px;

    object-fit:contain;

    margin:4px auto 12px;

    display:block;

    filter:drop-shadow(0 6px 14px rgba(0,0,0,.18));

}

#popupSelloTitulo{

    color:#24180f !important;

    margin:0 0 8px;

    font-size:26px;

    font-weight:800;

    letter-spacing:.01em;

    line-height:1.2;

    text-shadow:0 1px 0 rgba(255,255,255,.35);

}


#btnSolicitarSello{

    background:#2d5a37;

    color:white;

    border:none;

    border-radius:12px;

    padding:12px 24px;

    font-size:15px;
    font-weight:700;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 6px 16px rgba(45,90,55,.28);

}

#btnSolicitarSello:hover{

    transform:translateY(-2px);

    background:#356844;

}
/* ==========================================
   PASE RAMBO
========================================== */

#vsdPasaporteWrapper{

    max-width:980px;
    width:100%;
    margin:20px auto 28px;

}

.vsdPasaportePanel:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 24px 60px rgba(0,0,0,.45);

}
/* ===============================
   TÍTULO
=============================== */

.vsdPasaportePanel h2{

    color:#4a3523 !important;

    font-size:28px;

    font-weight:600;

    margin:0 0 8px;

}

/* ===============================
   TEXTO
=============================== */

.vsdPasaportePanel p,
.vsdPasaportePanel .texto-panel{

    color:#3d2e1f !important;

    font-size:18px !important;

    line-height:1.45 !important;

    margin:0 auto 14px;

    max-width:640px;

    font-weight:700 !important;

}

/* ===============================
   FILA DE SELLOS
=============================== */

#vsdPasaporteGrid{

    display:grid;

    grid-template-columns:repeat(6,minmax(68px,1fr));

    gap:16px;

    max-width:640px;

    justify-content:center;

    justify-items:center;

    align-items:center;

    margin:20px auto 0;

}


#vsdPasaporteGrid::-webkit-scrollbar{

    display:none;

}

/* ===============================
   SELLOS (PC: entre 64 y 82 → 74px)
=============================== */

.vsdSello{

    width:100%;

    max-width:74px;

    aspect-ratio:1;

    height:auto;

    object-fit:contain;

    opacity:.18;

    filter:grayscale(100%);

    cursor:pointer;

    transition:
        transform .25s,
        opacity .25s,
        filter .25s;

}

.vsdSelloWrap:hover{

    transform:translateY(-4px);

}

.vsdSelloWrap:hover .vsdSello{

    transform:scale(1.05);

    opacity:.40;

}

/* Conseguido: hover NO debe volver a gris/opaco */
.vsdSelloWrap.conseguido:hover .vsdSello,
.vsdSelloWrap.aprobado:hover .vsdSello,
#vsdPasaporteWrapper.vsd-pasaporte-solo-lectura .vsdSelloWrap.conseguido:hover .vsdSello,
#vsdPasaporteWrapper[data-vsd-staff-sellos="1"] .vsdSelloWrap.conseguido:hover .vsdSello{

    opacity:1 !important;

    filter:none !important;

    -webkit-filter:none !important;

}

.vsdSelloWrap:hover .vsdEstadoSello{

    transform:translate(-50%,-50%) scale(1.05);

}



/* ===============================
   CONSEGUIDO
=============================== */

/* Conseguido = misma pintura admin/equipo/brújula/alumno (especificidad > gris base) */
.vsdSelloWrap.conseguido .vsdSello,
.vsdSelloWrap.aprobado .vsdSello,
.vsdSelloWrap.conseguido img.vsdSello,
.vsdSelloWrap.aprobado img.vsdSello,
#vsdPasaporteWrapper .vsdSelloWrap.conseguido .vsdSello,
#vsdPasaporteWrapper .vsdSelloWrap.aprobado .vsdSello,
#vsdPasaporteWrapper .vsdSelloWrap.conseguido img,
#vsdPasaporteWrapper .vsdSelloWrap.aprobado img,
#vsdPasaporteWrapper.vsd-pasaporte-solo-lectura .vsdSelloWrap.conseguido .vsdSello,
#vsdPasaporteWrapper.vsd-pasaporte-solo-lectura .vsdSelloWrap.aprobado .vsdSello,
#vsdPasaporteWrapper.vsd-pasaporte-solo-lectura .vsdSelloWrap.conseguido img,
#vsdPasaporteWrapper.vsd-pasaporte-solo-lectura .vsdSelloWrap.aprobado img,
#vsdPasaporteWrapper[data-vsd-staff-sellos="1"] .vsdSelloWrap.conseguido .vsdSello,
#vsdPasaporteWrapper[data-vsd-staff-sellos="1"] .vsdSelloWrap.aprobado .vsdSello,
#vsdPasaporteWrapper[data-vsd-staff-sellos="1"] .vsdSelloWrap.conseguido img,
#vsdPasaporteWrapper[data-vsd-staff-sellos="1"] .vsdSelloWrap.aprobado img,
#vsdPasaporteWrapper .vsdSelloWrap[data-estado="aprobado"] .vsdSello,
#vsdPasaporteWrapper .vsdSelloWrap[data-estado="aprobado"] img{

    opacity:1 !important;

    filter:none !important;

    -webkit-filter:none !important;

}

/* ===============================
   EN REVISIÓN
=============================== */

.vsdSelloWrap.revision .vsdSello{

    opacity:.45;

    filter:grayscale(50%);

}

#popupSelloDescripcion{

    color:#24180f !important;

    font-size:15.5px;

    font-weight:600;

    line-height:1.5;

    text-align:left;

    margin:10px 0 12px;

    text-shadow:0 1px 0 rgba(255,255,255,.28);

}

#popupSelloDescripcion hr{

    border:none;

    border-top:1px solid rgba(36,24,15,.18);

    margin:12px 0;

}

#popupSelloDescripcion b{

    display:block;

    font-size:15px;

    font-weight:800;

    color:#1a120c;

    margin-bottom:6px;

}

#popupSelloDescripcion ul{

    margin:0;

    padding-left:18px;

}

#popupSelloDescripcion li{

    margin-bottom:6px;

    color:#24180f;

}

#popupMotivo{

    width:100%;

    height:72px;

    min-height:72px;

    max-height:72px;

    resize:none;

    border-radius:12px;

    border:1px solid rgba(36,24,15,.28);

    padding:10px 12px;

    box-sizing:border-box;

    font-family:inherit;

    font-size:14px;

    font-weight:600;

    color:#24180f;

    background:rgba(255,255,255,.82);

    margin:10px 0 12px;

}

#popupMotivo::placeholder{
    color:rgba(36,24,15,.45);
    font-weight:500;
}

#popupMensaje{
    color:#24180f !important;
    font-size:14px;
    font-weight:600;
    margin:8px 0 0;
}

#btnSolicitarSello{

    width:100%;

    margin-top:14px;

    background:#2d5a37;

    color:#fff;

    border:none;

    border-radius:12px;

    padding:14px 28px;

    font-size:16px;

    cursor:pointer;

    transition:.25s;

}
.vsdSelloWrap{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

}

.vsdEstadoSello{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    display:none;

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

    width:100%;
    height:100%;

    font-size:30px;

    background:transparent;

    text-shadow:0 2px 8px rgba(0,0,0,.35);

    pointer-events:none;

    z-index:2;
    transition:transform .25s;

}

.vsdSelloWrap.revision .vsdEstadoSello{

    display:flex;

}

.vsdSelloWrap.conseguido .vsdEstadoSello{
    display:none;
}

.vsdSelloWrap.conseguido .vsdEstadoSello::before{

    content:"✓";

    color:#fff;

    font-weight:bold;

}
.vsdPasaportePanel{

    position:relative;

    padding:18px 28px 16px;

    text-align:center;

    background:
        linear-gradient(
            rgba(70,45,20,.12),
            rgba(70,45,20,.12)
        ),
        url("https://programavivesindolor.com/wp-content/uploads/2026/06/textura-papel.jpg");

    background-size:cover;
    background-position:center;

    border:none;

    box-shadow:0 18px 45px rgba(0,0,0,.38);

    transition:.25s;

    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 6 C4 2 8 8 12 4 C16 0 20 8 24 5 C28 2 32 9 36 4 C40 1 44 8 48 3 C52 8 56 1 60 5 C64 9 68 2 72 6 C76 10 80 2 84 6 C88 10 92 2 96 5 L100 8 L100 92 C96 96 92 90 88 95 C84 98 80 90 76 95 C72 98 68 90 64 94 C60 98 56 90 52 95 C48 90 44 98 40 94 C36 90 32 98 28 94 C24 90 20 98 16 94 C12 90 8 98 4 94 L0 92 Z'/%3E%3C/svg%3E");

    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 6 C4 2 8 8 12 4 C16 0 20 8 24 5 C28 2 32 9 36 4 C40 1 44 8 48 3 C52 8 56 1 60 5 C64 9 68 2 72 6 C76 10 80 2 84 6 C88 10 92 2 96 5 L100 8 L100 92 C96 96 92 90 88 95 C84 98 80 90 76 95 C72 98 68 90 64 94 C60 98 56 90 52 95 C48 90 44 98 40 94 C36 90 32 98 28 94 C24 90 20 98 16 94 C12 90 8 98 4 94 L0 92 Z'/%3E%3C/svg%3E");

    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
}
@media (max-width:768px){

    #vsdPasaporteWrapper{
        margin:16px 10px 24px;
        max-width:none;
        width:auto;
        box-sizing:border-box;
    }

  .vsdPasaportePanel{
    /* Más padding para que el borde rasgado no corte sellos/texto */
    padding:36px 22px 34px;
    border-radius:0;
    overflow:visible;
}

    .vsdTituloPasaporte img,
    #vsdPasaporteWrapper .vsdTituloPasaporte img{
        width:auto;
        max-width:100px;
        height:auto;
    }

    .texto-panel,
    .vsdPasaportePanel p{
        font-size:16px !important;
        font-weight:700 !important;
        margin-bottom:12px;
        line-height:1.4 !important;
        max-width:100%;
        color:#3d2e1f !important;
    }

#vsdPasaporteGrid{

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

    column-gap:12px;

    row-gap:14px;

    padding-bottom:4px;

    margin-top:10px;

    width:100%;

}

 .vsdSello{

    max-width:104px;

    width:100%;

}
 .vsdEstadoSello{
    font-size:28px;
}

    .vsdPopupSelloContenido{
    width:min(100%,440px) !important;
    max-width:440px !important;
    max-height:min(90dvh,90vh) !important;
    overflow-y:auto;
    padding:18px 16px 16px;
    box-sizing:border-box;
    scrollbar-width:none;
}

.vsdPopupSelloContenido::-webkit-scrollbar{
    display:none;
}

    #popupSelloImg{
        width:128px;
        height:128px;
        margin-bottom:8px;
    }

    #popupSelloTitulo{
        font-size:22px;
        margin-bottom:6px;
    }

    #popupSelloDescripcion{
        font-size:14.5px;
        margin:8px 0 10px;
    }

    #popupMotivo{
        height:64px;
        min-height:64px;
        max-height:64px;
        margin:8px 0 10px;
    }

    #btnSolicitarSello{
        padding:11px 20px;
        font-size:14px;
        width:100%;
    }

}
@media (max-width:480px){

    .vsdPasaportePanel{
        padding:40px 20px 38px;
    }

    #vsdPasaporteGrid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        column-gap:10px;
        row-gap:12px;
    }

    .vsdSello{
        max-width:98px;
    }

    .vsdEstadoSello{
        font-size:26px;
    }

}

/* Staff: sin CTA; los no conseguidos los oculta el JS (no el CSS genérico) */
#vsdPasaporteWrapper.vsd-pasaporte-solo-lectura .texto-panel,
#vsdPasaporteWrapper.vsd-pasaporte-solo-lectura #vsdRamboSolicitud,
#vsdPasaporteWrapper[data-vsd-staff-sellos="1"] .texto-panel,
#vsdPasaporteWrapper[data-vsd-staff-sellos="1"] #vsdRamboSolicitud{
    display:none !important;
}
/* Solo ocultar no-conseguidos cuando YA hay al menos un sello pintado (evita pasaporte vacío) */
#vsdPasaporteWrapper.vsd-pasaporte-solo-lectura:has(.vsdSelloWrap.conseguido) .vsdSelloWrap:not(.conseguido):not(.aprobado),
#vsdPasaporteWrapper[data-vsd-staff-sellos="1"]:has(.vsdSelloWrap.conseguido) .vsdSelloWrap:not(.conseguido):not(.aprobado){
    display:none !important;
}
#vsdPasaporteWrapper{
    display:none;
}