/* ==================================================================== */
.toc button{background:transparent;border:1px solid rgba(0,0,0,0.06);padding:0.4rem 0.6rem;border-radius:8px;cursor:pointer}
.card{background:var(--card);padding:1rem;border-radius:10px;box-shadow:0 6px 18px rgba(16,24,40,0.06);margin-bottom:1rem}
.card h2{margin-top:0}
pre{background:#0f1724;color:#e6eef8;padding:0.75rem;border-radius:6px;overflow:auto}
.example{display:flex;gap:1rem}
.example ul, .example ol{margin:0;padding-left:1.1rem}
.flex-demo{display:flex;gap:1rem;margin-top:0.5rem}
.box{flex:1;padding:1rem;border-radius:8px;background:linear-gradient(180deg,#fff,#f0f7ff);text-align:center;border:1px dashed rgba(37,99,235,0.12)}
figure{margin:0}
figure img{max-width:100%;height:auto;border-radius:8px}
form label{display:block;margin-bottom:0.6rem}
input,textarea{width:100%;padding:0.5rem;border-radius:6px;border:1px solid #d1d5db}
.form-actions{display:flex;gap:0.5rem;margin-top:0.5rem}
button{background:var(--accent);color:#fff;border:none;padding:0.5rem 0.75rem;border-radius:8px;cursor:pointer}
button[disabled]{opacity:0.6}
.controls{display:flex;gap:0.5rem;margin-bottom:0.75rem}
.demo-area{padding:1rem;border-radius:8px;border:1px solid #e6eef8;background:linear-gradient(180deg,#ffffff,#fbfdff)}
.demo-area h3{margin:0 0 0.5rem}
.site-footer{padding:1rem 0;text-align:center;color:var(--muted)}


/* Animaciones (clases que JS activará) */
.pulse{
animation: pulse 600ms ease-in-out 2;
}
@keyframes pulse{
0%{transform:scale(1)}
50%{transform:scale(1.04)}
100%{transform:scale(1)}
}
.slide-in{
transform:translateX(-30px);
opacity:0;
animation: slideIn 450ms ease forwards;
}
@keyframes slideIn{
to{transform:none;opacity:1}
}


/* Tema oscuro (toggle) */
.dark{
--bg:#0b1220;
--card:#071026;
--text:#e6eef8;
--muted:#9aa4b2;
--accent:#7c3aed;
--accent-2:#06b6d4;
}


/* Responsivo */
@media (max-width:600px){
.toc{gap:0.4rem}
.flex-demo{flex-direction:column}
}