:root{
    /* Colores base del tema */
    --bg: #2b2b2b;           /* fondo oscuro estilo IntelliJ */
    --paper: #2b2b2b;        /* página */
    --ink: #a9b7c6;          /* texto principal */
    --muted: #808080;
    --brand: #89f5a2;        /* acentos verdes */
    --accent: #6ad0ff;       /* vínculos */

    /* Niveles de experiencia */
    --lvl-na: #1d1d1d;       /* negro */
    --lvl-jr: #0d3d2a;       /* verde oscuro */
    --lvl-ss: #3a3200;       /* amarillo oscuro */
    --lvl-sr: #3d0d0d;       /* rojo oscuro */

    --lvl-na-text: #eee;
    --lvl-jr-text: #59ffa1;
    --lvl-ss-text: #ffd95e;
    --lvl-sr-text: #ff8080;

    /* Colores de sintaxis IntelliJ */
    --kw: #cc7832;           /* keywords: public, class, if... */
    --type: #a9b7c6;         /* tipos: String, List, int... */
    --str: #6a8759;          /* strings */
    --num: #6897bb;          /* números */
    --cmt: #808080;          /* comentarios */
    --ann: #bbb529;          /* anotaciones: @Override */
    --op: #a9b7c6;           /* operadores/símbolos */
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family: Inter,system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;line-height:1.55;counter-reset: pregunta;}
  a{color:var(--accent);text-decoration:none}
  a:hover{text-decoration:underline}
  header{
    background:linear-gradient(135deg,#1b2030, #12243a 60%, #0d1c2b);
    border-bottom:1px solid #263146;
  }
  .wrap{max-width:1100px;margin:0 auto;padding:28px 18px}
  h1{font-size:clamp(26px,4vw,40px);margin:0 0 10px 0;letter-spacing:0.2px}
  h2{font-size:clamp(20px,3vw,28px);margin:24px 0 8px}
  h3{font-size:clamp(18px,2.4vw,22px);margin:20px 0 10px;color:var(--brand)}
  h4{margin:16px 0 8px}
  p{margin:10px 0}
  .subtitle{color:var(--muted)}

  .book{background:var(--paper);border:1px solid #1c2230;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.3);padding:22px}
  .legend{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 0}
  .pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid rgba(255,255,255,.08)}
  .na{background:var(--lvl-na);color:var(--lvl-na-text)}
  .jr{background:var(--lvl-jr);color:var(--lvl-jr-text)}
  .ss{background:var(--lvl-ss);color:var(--lvl-ss-text)}
  .sr{background:var(--lvl-sr);color:var(--lvl-sr-text)}

  .toc{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:14px 0 4px}
  .toc a{display:block;padding:10px 12px;border:1px solid #262f42;border-radius:12px;background:#121724}
  .toc a:hover{background:#141b2d}

  .section{margin:34px 0 28px}
  .card{background:#0f1422;border:1px solid #232c41;border-radius:16px;padding:16px;margin:16px 0}
  .chapter{font-weight:600;color:#bfe7ff;margin-bottom:6px}
  .q-list {margin: 6px 0 0;padding: 0;list-style: none;}
  .q-list li {padding: 8px 10px;border-bottom: 1px dashed #22314a;counter-increment: pregunta; /* incrementamos en cada li */position: relative;}
  .q-list li:last-child {border-bottom: none;}
  .q-list li::before {content: counter(pregunta) " ";font-weight: bold;color: #00ff99; /* puedes cambiar color del número */margin-right: 6px;}

  /* Detalle de preguntas con explicación */
  details.qa{background:#0e1320;border:1px solid #23314d;border-radius:14px;margin:14px 0}
  details.qa summary{cursor:pointer;padding:12px 14px;font-weight:600}
  details.qa[open]{box-shadow:0 8px 30px rgba(0,0,0,.2)}
  .answer{padding:2px 16px 16px}
  .example{background:#0b111b;border:1px solid #22314a;border-radius:12px;padding:12px;margin-top:10px}
  code, pre{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}
  pre{overflow:auto;background:#0a0f18;padding:12px;border-radius:12px;border:1px solid #213049}

  .small{font-size:13px;color:var(--muted)}
  .note{border-left:4px solid var(--brand);padding:8px 12px;background:#0f1522;border-radius:8px}

  footer{color:#9aa3b6;border-top:1px solid #1e2636;margin-top:36px}

  .badge{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.09);margin-left:6px}

  .grid-2{display:grid;grid-template-columns:1fr;gap:12px}
  pre, code { 
    font-family: "JetBrains Mono", Consolas, "Fira Code", Menlo, monospace;
    font-size: 14px;
    line-height: 1.4;
  }
  
  pre {
    background: var(--bg);
    color: var(--ink);
    padding: 1rem;
    border-radius: .75rem;
    overflow: auto;
    margin: 1rem 0;
  }

  /* Estilos de sintaxis IntelliJ */
  .tok-kw   { color: var(--kw); font-weight: bold; }
  .tok-type { color: var(--type); font-style: italic; }
  .tok-str  { color: var(--str); }
  .tok-num  { color: var(--num); }
  .tok-cmt  { color: var(--cmt); font-style: italic; }
  .tok-ann  { color: var(--ann); }
  .tok-op   { color: var(--op); }

  

  /* Popup estilo papiro */
  .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .popup-overlay.visible {
    opacity: 1;
  }

  .popup-content {
    background: #f4e4bc;
    max-width: 800px;
    width: 90%;
    padding: 30px;
    border-radius: 12px;
    position: relative;
    font-family: "Crimson Text", Georgia, serif;
    color: #2c1810;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transform: translateY(-20px);
    transition: transform 0.3s;
    background-image: 
      linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
  }

  .popup-overlay.visible .popup-content {
    transform: translateY(0);
  }

  .popup-content p {
    margin: 15px 0;
    line-height: 1.6;
    text-align: justify;
  }

  .popup-button {
    background: var(--paper);
    color: var(--brand);
    border: 2px solid var(--brand);
    padding: 10px 25px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    display: block;
    margin: 20px auto 0;
    transition: all 0.3s;
  }

  .popup-button:hover {
    background: var(--brand);
    color: var(--paper);
  }

  /* Botón flotante para ir arriba */
  .back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--paper);
    color: var(--brand);
    width: 45px;
    height: 45px;
    border-radius: 8px;
    border: 2px solid var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    transform: translateY(100px);
    z-index: 1000;
    font-size: 20px;
  }

  .back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .back-to-top:hover {
    background: var(--brand);
    color: var(--paper);
    text-decoration: none;
  }

  @media(min-width:960px){.grid-2{grid-template-columns:1fr 1fr}}