/* ============
   FONTES
============== */
body {
    font-family: "Roboto", sans-serif;
    background: radial-gradient(circle at top, #0b1b3a, #050a18 60%);
    color: #e8f0ff;
    margin: 0;
    padding: 0;
}

/* ============
   CABECEIRA
============== */
.top-header {
    text-align: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #0b1b3a, #143b74);
    border-bottom: 2px solid #00d4ff;
}
.top-header h1 {
    font-family: "Edu SA Hand", cursive;
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0;
}

/* ============
   TOC
============== */
#toc {
    background: rgba(10, 20, 40, 0.5);
    margin: 1.5rem auto;
    width: 85%;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    backdrop-filter: blur(4px);
    border-left: 3px solid #00d4ff;
}
#toc h2 {
    font-family: "Edu SA Hand";
}
#toc ul {
    list-style: none;
    padding: 0;
}
#toc a {
    color: #00d4ff;
    text-decoration: none;
}

/* ============
   SECCIÓNS
============== */
.section-block {
    width: 85%;
    margin: 2rem auto;
}
.section-block h2 {
    background: linear-gradient(90deg, #0b1b3a, #143b74);
    padding: .8rem 1rem;
    border-left: 4px solid #00d4ff;
    font-family: "Edu SA Hand";
}

/* ============
   CARDS
============== */
.card {
    background: rgba(255, 255, 255, 0.07);
    padding: 1.2rem;
    margin-top: 1.2rem;
    border-radius: 12px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.05);
}
.subcard {
    padding: .8rem 1rem;
    margin-top: .8rem;
    border-left: 3px solid #00d4ff;
    background: rgba(255, 255, 255, 0.04);
}

/* ============
   CÓDIGO
============== */
.code-block {
    position: relative;
    background: #0b1020;
    padding: 1rem;
    border-radius: 10px;
    margin-top: 1rem;
    border: 1px solid #143b74;
}
.code-block pre {
    white-space: pre-wrap;
    color: #00ff66;
}
.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #00d4ff;
    border: none;
    color: #04121f;
    padding: .3rem .6rem;
    border-radius: 5px;
    cursor: pointer;
}

/* ============
   IMPRESIÓN A4
============== */
@media print {
    body {
        background: white;
        color: black;
    }
    .card, .subcard, #toc {
        background: white !important;
        border: 1px solid #aaa !important;
        backdrop-filter: none !important;
    }
    h2 {
        background: #eee !important;
        color: black !important;
        border-left: 3px solid black !important;
    }
    .copy-btn {
        display: none;
    }
}