/*layout*/
.snip-main { 
    border-bottom:1px solid var(--line);
    background:var(--bg); 
}

.snip-grid {
    display:grid; 
    grid-template-columns:repeat(2,1fr);
    gap: 0.5rem; 
    padding:0.5rem;
    background:var(--line);
    border:1px solid var(--line); 
    border-top:none;
}

/*card*/
.snip-card {
    background:var(--bg); 
    display:flex; 
    flex-direction:column;
    min-width:0; 
    overflow:hidden;
}

/*parte 1: encabezado*/
.snip-hdr {
    padding:1.4rem 1.6rem;
    border-bottom:1px solid var(--line);
    display:flex; flex-direction:column; gap:.6rem;
}
.snip-name {
    font-family:var(--fd); font-size:.92rem; font-weight:700; letter-spacing:-.01em;
}
.snip-tags { display:flex; flex-wrap:wrap; gap:.35rem; }
.snip-tag {
    font-family:var(--mono); font-size:.5rem; letter-spacing:.12em; text-transform:uppercase;
    padding:.22rem .7rem; border:1px solid var(--line); border-radius:100px; color:var(--gray);
}

/*parte 2: preview*/
.snip-preview {
    border-bottom:1px solid var(--line);
    display:flex; 
    align-items:center; 
    justify-content:center;
    height:350px; 
    background:var(--bg); 
    position:relative; 
    overflow:hidden;
    padding:1.6rem;
}

/*parte 3: bloque de codigo*/
.snip-block { display:flex; flex-direction:column; }

.snip-bar {
    display:flex; align-items:center; justify-content:space-between;
    background:#1a1a1a; padding:.4rem .9rem;
    border-bottom:1px solid #2a2a2a;
    gap:.8rem;
}

.snip-tabs { display:flex; gap:.3rem; }

.stab {
    padding:.28rem .72rem;
    background:transparent; border:1px solid #333;
    font-family:var(--mono); font-size:.5rem; font-weight:500;
    letter-spacing:.12em; text-transform:uppercase;
    cursor:none; transition:all .18s; color:#555;
}
.stab-html { border-color:transparent; }
.stab-html.active { color:#e8985e; border-color:#e8985e; }
.stab-css  { border-color:transparent; }
.stab-css.active  { color:#61afef; border-color:#61afef; }
.stab-js   { border-color:transparent; }
.stab-js.active   { color:#e5c07b; border-color:#e5c07b; }
.stab:hover:not(.active) { border-color:#444; color:#888; }

.snip-copy {
    display:flex; align-items:center; gap:.35rem; padding:.3rem .8rem;
    background:transparent; border:1px solid #333; font-family:var(--fd);
    font-size:.5rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    color:#888; cursor:none; transition:all .2s; flex-shrink:0;
}
.snip-copy:hover { background:var(--orange); border-color:var(--orange); color:white; }
.snip-copy.copied { background:var(--orange); border-color:var(--orange); color:white; }
.snip-copy i { font-size:.82rem; }

/*codigo: altura fija de 10 renglones con scrollbar*/
.snip-code {
    font-family:var(--mono); font-size:.76rem; line-height:1.8;
    background:var(--code-bg); color:var(--code-fg);
    padding:.9rem 1.2rem;
    height:250px;
    overflow-y:auto; overflow-x:auto;
    white-space:pre;
    tab-size:2;
    display:none;
    scrollbar-width:thin;
    scrollbar-color:var(--orange) #1a1a1a;
    margin:0;
}
.snip-code.active { display:block; }
.snip-code::-webkit-scrollbar { width:4px; height:4px; }
.snip-code::-webkit-scrollbar-track { background:#1a1a1a; }
.snip-code::-webkit-scrollbar-thumb { background:var(--orange); border-radius:2px; }

/*paginacion*/
.snip-pag {
    display:flex; align-items:center; justify-content:center; gap:1rem;
    padding:2.5rem; border-bottom:1px solid var(--line);
}
.pag-btn {
    width:38px; height:38px; background:transparent; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; cursor:none;
    color:var(--black); transition:all .2s; font-size:1.1rem;
}
.pag-btn:hover:not(:disabled) { background:var(--black); border-color:var(--black); color:white; }
.pag-btn:disabled { opacity:.3; cursor:default; }
.pag-dots { display:flex; gap:.5rem; align-items:center; }
.pag-num {
    width:38px; height:38px; background:transparent; border:1px solid var(--line);
    font-family:var(--mono); font-size:.65rem; font-weight:500; cursor:none;
    color:var(--gray); transition:all .2s;
}
.pag-num:hover { border-color:var(--black); color:var(--black); }
.pag-num.active { background:var(--black); border-color:var(--black); color:white; }
.snip-card[data-hidden] { display:none; }

/*============ PREVIEWS ============*/

/*pv1 skeleton*/
.pv1{
    background:var(--light);
}

.pv1-card{
    width:100%;
    max-width:320px;
    padding:16px;
    background:var(--bg);
    border:1px solid #ece7df;
}

@keyframes pv1shimmer{
    from{
        background-position:-300px 0;
    }
    to{
        background-position:300px 0;
    }
}

.pv1-sk{
    background:linear-gradient(
        90deg,
        #ece8e2 0%,
        #f8f6f2 50%,
        #ece8e2 100%
    );
    background-size:600px 100%;
    animation:pv1shimmer 1.5s linear infinite;
}

.pv1-top{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}

.pv1-avatar{
    width:44px;
    height:44px;
    border-radius:50%;
}

.pv1-info{
    flex:1;
}

.pv1-name{
    height:12px;
    width:55%;
    margin-bottom:8px;
}

.pv1-role{
    height:10px;
    width:35%;
}

.pv1-banner{
    height:120px;
    border-radius:8px;
    margin-bottom:14px;
}

.pv1-line{
    height:10px;
    border-radius:99px;
    margin-bottom:8px;
}

.pv1-l1{width:100%;}
.pv1-l2{width:90%;}
.pv1-l3{width:65%;}

.pv1-actions{
    display:flex;
    gap:10px;
    margin-top:14px;
}

.pv1-btn{
    width:80px;
    height:32px;
    border-radius:999px;
}

/*pv2 toast*/
.pv2{
    background:var(--light);
    align-items:flex-end;
    padding:1rem;
}

.pv2-stack{
    display:flex;
    flex-direction:column;
    gap:.7rem;
    width:100%;
    max-width:320px;
}

.pv2-toast{
    position:relative;
    display:flex;
    align-items:center;
    gap:.8rem;
    padding:.9rem 1rem;
    background:#fff;
    border-left:4px solid;
    box-shadow:0 4px 14px rgba(0,0,0,.08);
    overflow:hidden;
}

.pv2-toast::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:3px;
    background:currentColor;
    opacity:.25;
}

.pv2-toast i{
    font-size:1rem;
}

.pv2-toast span{
    font-size:.75rem;
    font-weight:600;
}

.pv2-ok{
    color:#1a7a40;
    border-color:#1a7a40;
}

.pv2-err{
    color:#c0392b;
    border-color:#c0392b;
}

.pv2-info{
    color:#2563eb;
    border-color:#2563eb;
}

/*pv3 flip card*/
.pv3{
    background:var(--light);
}

.pv3-scene{
    perspective:1000px;
}

.pv3-card{
    width:210px;
    height:130px;
    position:relative;
    transform-style:preserve-3d;
    transition:transform .7s cubic-bezier(.2,.8,.2,1);
}

.pv3-scene:hover .pv3-card{
    transform:rotateY(180deg);
}

.pv3-front,
.pv3-back{
    position:absolute;
    inset:0;
    padding:1rem;
    backface-visibility:hidden;
    border-radius:12px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    color:#fff;
}

.pv3-front{
    background:linear-gradient(
        135deg,
        #111,
        #2d2d2d
    );
}

.pv3-back{
    background:linear-gradient(
        135deg,
        var(--orange),
        #ff8c00
    );
    transform:rotateY(180deg);
}

.pv3-label{
    font-size:.6rem;
    text-transform:uppercase;
    opacity:.7;
    margin-bottom:.4rem;
}

.pv3-front h4,
.pv3-back h4{
    margin:0 0 .3rem;
    font-size:1rem;
}

.pv3-front p,
.pv3-back p{
    margin:0;
    font-size:.72rem;
}

/*pv4 expandable sidebar*/
.pv4{
    background:var(--light);
    display:flex;
    justify-content:center;
    align-items:center;
}

.pv4-sidebar{
    width:58px;
    height:280px;

    display:flex;
    flex-direction:column;

    padding:10px;

    background:#111;
    border-radius:18px;

    overflow:hidden;

    transition:.35s ease;
}

.pv4-sidebar:hover{
    width:220px;
}

.pv4-logo{
    height:36px;

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

    color:#fff;

    margin-bottom:10px;
}

.pv4-menu{
    flex:1;

    display:flex;
    flex-direction:column;
    gap:6px;
}

.pv4-item{
    height:34px;

    display:flex;
    align-items:center;
    gap:10px;

    padding:0 10px;

    color:#fff;

    border-radius:8px;

    white-space:nowrap;
}

.pv4-item.active{
    background:var(--orange);
}

.pv4-item span,
.pv4-user span{
    opacity:0;
    transition:.25s;
}

.pv4-sidebar:hover .pv4-item span,
.pv4-sidebar:hover .pv4-user span{
    opacity:1;
}

.pv4-avatar{
    width:26px;
    height:26px;

    border-radius:50%;

    background:#444;
}

.pv4-user{
    display:flex;
    align-items:center;
    gap:10px;

    color:#fff;

    padding:6px;

    white-space:nowrap;
}

/*pv5 typewriter*/
.pv5 { background:#111; }
@keyframes pv5t { from{width:0} to{width:100%} }
@keyframes pv5b { 0%,100%{opacity:1} 50%{opacity:0} }
.pv5-wrap { text-align:center; overflow:hidden; max-width:100%; }
.pv5-text {
    font-family:var(--fd); font-weight:700;
    font-size:clamp(.85rem,2.5vw,1rem); color:white;
    overflow:hidden; white-space:nowrap; width:0;
    animation:pv5t 2.8s steps(22,end) forwards;
    display:inline-flex; align-items:center;
}
.pv5-cursor {
    display:inline-block; width:2px; height:1.1em;
    background:var(--orange); margin-left:3px; flex-shrink:0;
    animation:pv5b 1s step-end infinite;
}

/*pv6 glassmorphism*/
.pv6 { padding:0; overflow:hidden; }
.pv6-scene {
    width:100%; height:100%; min-height:190px;
    background:linear-gradient(135deg,#667eea,#764ba2);
    display:flex; align-items:center; justify-content:center; position:relative;
}
.pv6-blob { position:absolute; border-radius:50%; filter:blur(26px); opacity:.6; }
.pv6-b1 { width:100px; height:100px; background:#ff6b6b; top:5%; left:5%; }
.pv6-b2 { width:85px; height:85px; background:#4ecdc4; bottom:5%; right:10%; }
.pv6-glass {
    background:rgba(255,255,255,.15); backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.25); border-radius:10px;
    padding:16px 22px; color:#fff; position:relative; z-index:1;
}
.pv6-glass strong { display:block; font-size:.85rem; font-weight:700; margin-bottom:4px; }
.pv6-glass span { font-size:.66rem; font-family:var(--mono); opacity:.75; }

/*pv7 mosaic*/
.pv7 { background:var(--light); padding:1rem 1.4rem; }
.pv7-mosaic {
    width:100%; display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(2,55px); gap:3px;
}
.pv7-mosaic > div {
    display:flex; align-items:center; justify-content:center;
    font-family:var(--fd); font-size:.78rem; font-weight:700; color:white;
}
.pv7-a { grid-column:span 2; background:#111; }
.pv7-b { background:var(--orange); }
.pv7-c { background:var(--gray); }
.pv7-d { grid-column:span 3; background:var(--line); color:var(--black); }

/*pv8 contador*/
.pv8 { background:var(--bg); }
.pv8-counts { display:flex; gap:2rem; }
.pv8-stat { display:flex; flex-direction:column; align-items:center; gap:.3rem; }
.pv8-num {
    font-family:var(--fd); font-size:1.7rem; font-weight:800;
    color:var(--orange); letter-spacing:-.02em;
}
.pv8-lbl {
    font-family:var(--mono); font-size:.48rem; letter-spacing:.14em;
    text-transform:uppercase; color:#555;
}

/*pv9 gradient text*/
.pv9 { 
    background:#111; 
}
.pv9-wrap { 
    overflow:hidden; 
    text-align:center; 
}
.pv9-text{
    background:linear-gradient(
        270deg,
        #ff5200,
        #ff8c00,
        #ffd700,
        #b3ff00,
        #4ecdc4,
        #667eea,
        #764ba2
    );
    background-size:300% 300%;
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;

    animation:gradientShift 8s ease infinite;

    font-family:var(--fd);
    font-size:clamp(0.95rem,3vw,1.25rem);
    font-weight:800;
    display:inline-block;
}
@keyframes gradientShift{
    0%{
        background-position:0% 50%;
    }
    50%{
        background-position:100% 50%;
    }
    100%{
        background-position:0% 50%;
    }
}

/*pv10 acordeon*/
.pv10 { background:var(--bg); align-items:flex-start; padding:0; }
.pv10-acc { width:100%; border-top:1px solid var(--line); }
.pv10-item { border-bottom:1px solid var(--line); }
.pv10-q {
    list-style:none; padding:10px 13px; cursor:pointer;
    font-size:.72rem; font-weight:600;
    display:flex; justify-content:space-between; align-items:center;
}
.pv10-q::-webkit-details-marker { display:none; }
.pv10-q::after { content:'+'; color:var(--orange); font-size:.95rem; }
details[open] .pv10-q::after { content:'-'; }
.pv10-a { padding:0 13px 10px; font-size:.68rem; color:var(--gray); line-height:1.6; }

/*pv11 scrollbar*/
.pv11 { padding:0; align-items:stretch; }
.pv11-scroll {
    width:100%; height:100%; overflow-y:auto; padding:13px;
    display:flex; flex-direction:column; gap:8px;
    scrollbar-width:thin; scrollbar-color:var(--orange) var(--light);
}
.pv11-scroll::-webkit-scrollbar { width:5px; }
.pv11-scroll::-webkit-scrollbar-track { background:var(--light); }
.pv11-scroll::-webkit-scrollbar-thumb { background:var(--orange); border-radius:3px; }
.pv11-scroll p { font-size:.7rem; font-weight:300; color:var(--gray); line-height:1.6; }

/*pv12 dark mode*/
.pv12 { 
    padding:0; 
}
.pv12-scene {
    width:100%; 
    height:100%; 
    min-height:190px;
    display:flex; 
    align-items:center; 
    justify-content:center;
    background:var(--light); 
    transition:background .3s;
}
.pv12[data-dm="dark"] 
.pv12-scene { 
    background: #171717; 
}
.pv12-card { 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    gap:.75rem; 
    padding:1.4rem; 
}
.pv12-title { 
    font-family:var(--fd); 
    font-size:.95rem; 
    font-weight:800; 
    color:var(--black); 
    transition:color .3s; 
}
.pv12[data-dm="dark"] 
.pv12-title { 
    color:var(--bg); 
}
.pv12-sub { 
    font-size:.67rem; 
    color:var(--gray); 
    font-weight:500; 
    transition:color .3s; 
}
.pv12[data-dm="dark"] 
.pv12-sub { 
    color:#c7c7c7; 
}
.pv12-toggle {
    padding:.45rem 1rem; 
    background:#111; 
    color:#fff; 
    width: 150px;
    border:none;
    font-family:var(--fd); 
    font-size:.55rem; 
    font-weight:600;
    letter-spacing:.12em; 
    text-transform:uppercase; 
    cursor:pointer; 
    transition:background .3s;
}
.pv12[data-dm="dark"] 
.pv12-toggle { 
    background:var(--bg); 
    color:#111; 
}

/*pv13 tabs*/
.pv13 { padding:0; align-items:flex-start; }
.pv13-wrap { width:100%; }
.pv13-tabs { display:flex; border-bottom:1px solid var(--line); }
.pv13-btn {
    padding:9px 14px; border:none; background:transparent;
    font-family:var(--fd); font-size:.68rem; font-weight:600;
    color:var(--gray); cursor:pointer;
    border-bottom:2px solid transparent; transition:all .2s;
}
.pv13-act { color:var(--orange); border-bottom-color:var(--orange); }
.pv13-panel { padding:13px 14px; font-size:.7rem; color:var(--gray); line-height:1.65; }
.pv13-hidden { display:none; }

/*pv14 spinner*/
.pv14{
    background:#111;
    display:flex;
    justify-content:center;
    align-items:center;
}

.pv14-dna{
    display:flex;
    gap:10px;
}

.pv14-dna span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#f1f1f1;
    animation:pv14dna .9s infinite ease-in-out;
}

.pv14-dna span:nth-child(even){
    background:#a8a8a8;
}

.pv14-dna span:nth-child(2){animation-delay:.1s;}
.pv14-dna span:nth-child(3){animation-delay:.2s;}
.pv14-dna span:nth-child(4){animation-delay:.3s;}
.pv14-dna span:nth-child(5){animation-delay:.4s;}
.pv14-dna span:nth-child(6){animation-delay:.5s;}
.pv14-dna span:nth-child(7){animation-delay:.6s;}
.pv14-dna span:nth-child(8){animation-delay:.7s;}

@keyframes pv14dna{
    0%,100%{
        transform:translateY(-12px) scale(.7);
    }
    50%{
        transform:translateY(12px) scale(1.2);
    }
}

/*pv15 ripple*/
.pv15 { background:var(--light); }
.pv15-btn {
    position:relative; overflow:hidden;
    padding:12px 26px; border:none;
    background:var(--black); color:#fff;
    font-family:var(--fd); font-weight:600; font-size:.7rem;
    letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
}
.pv15-ripple {
    position:absolute; border-radius:50%;
    transform:scale(0); pointer-events:none;
    background:rgba(255,255,255,.3);
    animation:pv15ra .55s linear;
}
@keyframes pv15ra { to { transform:scale(4); opacity:0; } }

/*pv16 card tilt*/
.pv16 { background:var(--light); }
.pv16-scene {
    perspective:600px;
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%;
}
.pv16-card {
    background:#111; color:#fff;
    padding:20px 28px;
    border:1px solid #222;
    transition:transform .12s ease;
    transform-style:preserve-3d;
    display:flex; flex-direction:column; gap:.4rem;
}
.pv16-card strong { font-size:.85rem; font-weight:700; display:block; }
.pv16-card span { font-family:var(--mono); font-size:.6rem; color:#666; }

/*pv17 lazy load*/
.pv17 { background:var(--light); gap:1rem; }
.pv17-wrap { display:flex; gap:10px; }
.pv17-img {
    width:90px; height:65px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.pv17-loaded { background:var(--gray); }
.pv17-pending { background:var(--line); }
.pv17-img i { font-size:1.1rem; color:white; }
.pv17-pending i { color:var(--gray); }
.pv17-img span {
    font-family:var(--mono); font-size:.44rem; letter-spacing:.1em;
    text-transform:uppercase; color:white;
}
.pv17-pending span { color:var(--gray); }

/*pv18 sticky header*/
.pv18 { padding:0; overflow:hidden; }
.pv18-wrap { width:100%; height:100%; display:flex; flex-direction:column; }
.pv18-nav {
    background:var(--bg); padding:8px 13px;
    border-bottom:1px solid var(--line);
    font-family:var(--fd); font-size:.7rem; font-weight:700;
    flex-shrink:0; transition:box-shadow .25s, background .25s;
}
.pv18-nav.scrolled {
    background:rgba(248,246,242,.9);
    backdrop-filter:blur(6px);
    box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.pv18-body {
    flex:1; overflow-y:auto; padding:10px 13px;
    scrollbar-width:none;
}
.pv18-body::-webkit-scrollbar { display:none; }
.pv18-lines { display:flex; flex-direction:column; gap:6px; padding-top:2px; }
.pv18-lines span { display:block; height:8px; background:var(--line); border-radius:2px; }
.pv18-lines span:nth-child(1){width:80%} .pv18-lines span:nth-child(2){width:100%}
.pv18-lines span:nth-child(3){width:60%} .pv18-lines span:nth-child(4){width:90%}
.pv18-lines span:nth-child(5){width:75%} .pv18-lines span:nth-child(6){width:45%}
.pv18-lines span:nth-child(7){width:85%} .pv18-lines span:nth-child(8){width:55%}


@media (max-width: 768px){

    .filter-bar{
        padding:0 1rem;
        overflow-x:auto;
        gap:.5rem;
        justify-content:flex-start;

        scrollbar-width:none;
    }

    .filter-bar::-webkit-scrollbar{
        display:none;
    }

    .filter-btn{
        flex-shrink:0;
        white-space:nowrap;
    }

    .snip-main{
        padding:0 1rem;
    }

    .snip-grid{
        grid-template-columns:1fr;
        gap:1.5rem;
    }

    .snip-card{
        width:100%;
    }

    .snip-preview{
        min-height:220px;
        overflow:hidden;
    }

    .snip-bar{
        flex-direction:column;
        align-items:stretch;
        gap:.75rem;
    }

    .snip-tabs{
        width:100%;
        overflow-x:auto;
        scrollbar-width:none;
    }

    .snip-tabs::-webkit-scrollbar{
        display:none;
    }

    .stab{
        flex-shrink:0;
    }

    .snip-copy{
        width:100%;
        justify-content:center;
    }

    /* codigo */
    .snip-code{
        font-size:.78rem;
        overflow-x:auto;
        white-space:pre;
    }

    /* sidebar preview */
    .pv4-sidebar{
        transform:scale(.85);
    }

    /* tabs preview */
    .pv13-tabs{
        flex-wrap:wrap;
    }

    /* contador */
    .pv8-counts{
        flex-direction:column;
        gap:1rem;
    }

    /* paginacion */
    .snip-pag{
        padding:2rem 1rem;
        flex-wrap:wrap;
    }

    /* footer */
    footer{
        padding:2rem 1rem;
        text-align:center;
    }

    .fc{
        display:block;
        margin-bottom:1rem;
    }

    /* navbar */
    nav{
        padding:1rem;
    }

    .nav-links{
        display:none;
    }
}