/* Fuentes autoalojadas (subsets latin + latin-ext) — sin llamada a Google, sin fuga de IP (DATA-02) */
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/jetbrains-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/jetbrains-mono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/jetbrains-mono-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/jetbrains-mono-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:800; font-display:swap;
  src:url('fonts/jetbrains-mono-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:800; font-display:swap;
  src:url('fonts/jetbrains-mono-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Serif 4'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/source-serif-4-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Serif 4'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/source-serif-4-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Serif 4'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/source-serif-4-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Serif 4'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/source-serif-4-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Serif 4'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/source-serif-4-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Serif 4'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/source-serif-4-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  :root{
    --navy: #0e1a2b;
    --navy-2: #122238;
    --blueprint: rgba(112,168,208,0.16);
    --blueprint-strong: rgba(112,168,208,0.32);
    --cyan: #6fb3d9;
    --paper: #f4efe3;
    --paper-2: #ece4d2;
    --ink: #1c2330;
    --ink-soft: #4a5261;
    --amber: #e0a53d;
    --rust: #c1443c;
    --green: #6a9b6e;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --serif: 'Source Serif 4', Georgia, serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      linear-gradient(var(--blueprint) 1px, transparent 1px) 0 0/40px 40px,
      linear-gradient(90deg, var(--blueprint) 1px, transparent 1px) 0 0/40px 40px,
      var(--navy);
    color: var(--paper);
    font-family: var(--serif);
    min-height:100vh;
    padding: 28px 20px 80px;
  }
  .wrap{max-width:1180px;margin:0 auto;}

  header.top{
    display:flex; flex-direction:column; gap:6px; margin-bottom:26px;
    border-bottom: 1px solid var(--blueprint-strong);
    padding-bottom:22px;
  }
  .eyebrow{
    font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
    color: var(--cyan); display:flex; align-items:center; gap:10px;
  }
  .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--amber); box-shadow:0 0 8px var(--amber);}
  h1{
    font-family: var(--mono); font-weight:800; font-size: clamp(28px,4.4vw,44px);
    margin: 4px 0 2px; letter-spacing:-0.01em; color:var(--paper);
  }
  .sub{color:#9db2c6; font-size:15px; max-width:620px; line-height:1.5;}

  .controls{
    display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin: 20px 0 8px;
  }
  .search-box{
    flex:1 1 320px; position:relative; display:flex; align-items:center;
    background: var(--navy-2); border:1px solid var(--blueprint-strong); border-radius:2px;
    padding: 0 14px; font-family:var(--mono);
  }
  .search-box::before{content:'>'; color:var(--amber); margin-right:8px; font-weight:700;}
  .search-box input{
    flex:1; background:transparent; border:none; outline:none; color:var(--paper);
    font-family:var(--mono); font-size:14px; padding:12px 0;
  }
  .search-box input::placeholder{color:#5c6b7e;}
  .cursor{width:8px;height:16px;background:var(--cyan); opacity:.85; animation:blink 1.1s steps(1) infinite;}
  @keyframes blink{50%{opacity:0;}}

  .count-tag{
    font-family:var(--mono); font-size:12px; color:#8fa4ba; border:1px solid var(--blueprint-strong);
    padding:9px 12px; border-radius:2px; white-space:nowrap;
  }

  .filters{display:flex; flex-wrap:wrap; gap:8px; margin: 14px 0 30px;}
  .chip{
    font-family:var(--mono); font-size:12px; letter-spacing:.03em;
    padding:6px 11px; border-radius:2px; border:1px solid var(--blueprint-strong);
    background:transparent; color:#a9bbcd; cursor:pointer; transition:.15s;
  }
  .chip:hover{border-color:var(--cyan); color:var(--paper);}
  .chip.active{background:var(--cyan); border-color:var(--cyan); color:var(--navy); font-weight:700;}

  .grid{
    display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap:16px;
  }

  .cat-header{
    grid-column: 1 / -1;
    display:flex; align-items:center; gap:16px;
    font-family:var(--mono); font-weight:700; font-size:13px;
    letter-spacing:.22em; text-transform:uppercase; color:var(--amber);
    margin: 30px 0 4px;
  }
  .cat-header:first-child{ margin-top: 0; }
  .cat-header::after{
    content:''; flex:1; height:1px;
    background: linear-gradient(90deg, var(--blueprint-strong), transparent);
  }

  .card{
    background: var(--paper); color: var(--ink); border-radius:2px; cursor:pointer;
    padding: 18px 18px 16px; position:relative; overflow:hidden;
    border: 1px solid var(--paper-2);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .card:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
  .card::after{
    content:''; position:absolute; top:0; left:0; right:0; height:4px;
    background: var(--sev-color, var(--cyan));
  }
  .card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px;}
  .card-id{font-family:var(--mono); font-size:11px; color:var(--ink-soft); letter-spacing:.06em;}
  .sev-badge{
    font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em;
    padding:3px 7px; border-radius:2px; color:#fff; background: var(--sev-color, var(--cyan));
  }
  .card h3{
    font-family: var(--serif); font-size:19px; font-weight:700; margin:0 0 8px; line-height:1.25;
  }
  .card p.summary{font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin:0 0 12px;}
  .card .tags{display:flex; flex-wrap:wrap; gap:6px;}
  .tag{
    font-family:var(--mono); font-size:10.5px; background:var(--paper-2); color:var(--ink-soft);
    padding:3px 7px; border-radius:2px;
  }
  .card .cat-label{
    font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); text-transform:uppercase;
    letter-spacing:.05em; margin-top:10px; opacity:.75;
  }

  .empty{
    grid-column:1/-1; text-align:center; padding:60px 20px; color:#7d90a5; font-family:var(--mono); font-size:14px;
  }

  /* Modal */
  .overlay{
    position:fixed; inset:0; background:rgba(6,12,20,.72); backdrop-filter: blur(2px);
    display:none; align-items:flex-start; justify-content:center; padding: 40px 16px; z-index:50; overflow-y:auto;
  }
  .overlay.open{display:flex;}
  .modal{
    background:var(--paper); color:var(--ink); max-width:720px; width:100%; border-radius:2px;
    position:relative; margin-bottom:40px;
  }
  .modal-head{
    padding:26px 28px 18px; border-bottom:1px solid var(--paper-2); position:relative;
  }
  .modal-head::before{
    content:''; position:absolute; top:0; left:0; right:0; height:5px; background: var(--sev-color, var(--cyan));
  }
  .modal-close{
    position:absolute; top:16px; right:16px; z-index:5; background:none; border:none; font-family:var(--mono);
    font-size:20px; color:var(--ink-soft); cursor:pointer; line-height:1; padding:6px;
  }
  .modal-close:hover{color:var(--rust);}
  .modal-meta{font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:10px;}
  .modal-meta .revised{border-bottom:1px dotted currentColor; cursor:help;}
  .modal h2{font-family:var(--serif); font-size:26px; margin:0 0 4px; line-height:1.2;}
  .modal-body{padding:22px 28px 30px;}
  .modal-body .lead{font-size:15px; line-height:1.6; color:var(--ink); margin-bottom:22px;}
  .section-label{
    font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em;
    color:var(--ink-soft); margin: 22px 0 10px; display:flex; align-items:center; gap:8px;
  }
  .section-label::after{content:''; flex:1; height:1px; background:var(--paper-2);}
  .modal-body ul{margin:0; padding-left:0; list-style:none;}
  .modal-body ul li{
    font-size:14.5px; line-height:1.55; padding:7px 0 7px 20px; position:relative; border-bottom:1px dashed var(--paper-2);
  }
  .modal-body ul li:last-child{border-bottom:none;}
  .modal-body ul.points li::before{content:'✓'; position:absolute; left:0; color:var(--green); font-weight:700;}
  .modal-body ul.pitfalls li::before{content:'✕'; position:absolute; left:0; color:var(--rust); font-weight:700;}
  .modal-body ul.sources li::before{content:'→'; position:absolute; left:0; color:var(--cyan); font-weight:700;}
  .modal-body ul.sources a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--cyan); text-underline-offset:3px;}
  .modal-body ul.sources a:hover{color:var(--rust);}
  .modal-body ul.sources .src-note{color:var(--ink-soft);}
  pre{
    background: var(--navy); color:#d9e6f2; padding:16px; border-radius:2px; overflow-x:auto;
    font-family: var(--mono); font-size:12.5px; line-height:1.55; margin:0;
  }
  .modal-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;}

  footer{
    max-width:1180px; margin:50px auto 0; text-align:center; color:#5c6b7e; font-family:var(--mono); font-size:11.5px;
  }

  /* --- Bloqueo de scroll del fondo con el modal abierto --- */
  body.modal-open{ overflow:hidden; }

  /* --- Cuerpo markdown renderizado desde la ficha .md --- */
  .markdown{ font-size:14.5px; line-height:1.62; color:var(--ink); }
  .markdown > p:first-child{ font-size:15.5px; color:var(--ink); }
  .markdown p{ margin:0 0 14px; }
  .markdown strong{ font-weight:700; color:var(--ink); }
  .markdown a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--cyan); text-underline-offset:2px; }
  .markdown a:hover{ color:var(--rust); }
  .markdown a.xref{ font-family:var(--mono); font-size:12.5px; text-decoration-color:var(--amber); cursor:pointer; }
  .markdown h2{
    font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.09em;
    color:var(--ink-soft); margin:26px 0 12px; padding-top:14px; border-top:1px solid var(--paper-2);
  }
  .markdown h3{ font-family:var(--serif); font-size:16.5px; font-weight:700; color:var(--ink); margin:20px 0 8px; }
  .markdown ul{ margin:0 0 14px; padding-left:0; list-style:none; }
  .markdown ul.md-list li{
    position:relative; padding:5px 0 5px 18px; border-bottom:1px dashed var(--paper-2); font-size:14px; line-height:1.5;
  }
  .markdown ul.md-list li:last-child{ border-bottom:none; }
  .markdown ul.md-list li::before{ content:'▸'; position:absolute; left:0; color:var(--cyan); }
  .markdown ul.md-tasklist li{ position:relative; padding:5px 0 5px 26px; font-size:14px; line-height:1.5; }
  .markdown ul.md-tasklist li .box{
    position:absolute; left:0; top:4px; width:15px; height:15px; border:1.5px solid var(--ink-soft);
    border-radius:2px; display:inline-flex; align-items:center; justify-content:center;
    font-size:11px; color:var(--green); font-weight:800;
  }
  .markdown ul.md-tasklist li.done .box{ border-color:var(--green); }
  .markdown blockquote{
    margin:0 0 16px; padding:10px 14px; border-left:3px solid var(--amber);
    background:var(--paper-2); font-size:13.5px; color:var(--ink-soft);
  }
  .markdown blockquote p{ margin:0; }
  .markdown code{
    font-family:var(--mono); font-size:12px; background:var(--paper-2); color:var(--ink); padding:1px 5px; border-radius:2px;
  }
  .markdown pre{ margin:0 0 16px; }
  .markdown pre code{ background:none; color:inherit; padding:0; font-size:12.5px; }
  .md-tablewrap{ overflow-x:auto; margin:0 0 16px; }
  .markdown table{ border-collapse:collapse; width:100%; font-size:13px; }
  .markdown th, .markdown td{ border:1px solid var(--paper-2); padding:7px 10px; text-align:left; vertical-align:top; }
  .markdown thead th{ background:var(--navy); color:var(--paper); font-family:var(--mono); font-size:11.5px; font-weight:700; }
  .markdown tbody tr:nth-child(even){ background:var(--paper-2); }

  @media (max-width:600px){
    .modal-body{padding:18px 18px 24px;} .modal-head{padding:22px 18px 16px;}
    .markdown table{ font-size:12px; }
  }

  /* ---- Severidad por atributo data-sev (evita estilos inline → CSP estricta sin 'unsafe-inline') ---- */
  .card[data-sev="crítico"]{ --sev-color: var(--rust); }
  .card[data-sev="alto"]{ --sev-color: var(--amber); }
  .card[data-sev="medio"]{ --sev-color: var(--cyan); }

  /* ---- Accesibilidad (FE-01): foco siempre visible por teclado ---- */
  .card{ }
  .card:focus-visible,
  .chip:focus-visible,
  .modal-close:focus-visible,
  .markdown a.xref:focus-visible,
  .modal-body ul.sources a:focus-visible{
    outline: 2px solid var(--cyan); outline-offset: 3px; border-radius:2px;
  }
  .search-box:focus-within{ border-color: var(--cyan); }
  main{ display:block; }

  /* ---- Respeta prefers-reduced-motion (FE-01) ---- */
  @media (prefers-reduced-motion: reduce){
    *, ::before, ::after{
      animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
  }