/* FOCO · prioridad de cada artículo según los exámenes reales (09/10/2026) */
:root { --fo5: #C62828; --fo4: #E8892B; --fo3: #C9A227; --fo2: #3B82C4; --fo1: #9AA3A0; --fox: #B8BFBC; }

/* sobre la página: marca de prioridad junto al artículo (margen izquierdo) */
.fo-marca { position: absolute; left: 0.6%; z-index: 7; transform: translateY(-2px); display: flex; align-items: baseline; gap: 1px;
  padding: 3px 6px; border: 0; border-radius: 8px; cursor: pointer; color: #fff; font: 800 12px/1 var(--f-body, Inter, sans-serif);
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.4); transition: transform .15s; }
.fo-marca span { font-size: 9px; font-weight: 700; opacity: .85; }
.fo-marca:hover { transform: translateY(-2px) scale(1.08); }
.fo-marca:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.fo-marca.p5, .fo-chip.p5, .fo-art.p5, .fo-mapa .p5, .fo-ley .p5::before, .fo-nivel.p5 b { background: var(--fo5); }
.fo-marca.p4, .fo-chip.p4, .fo-art.p4, .fo-mapa .p4, .fo-ley .p4::before, .fo-nivel.p4 b { background: var(--fo4); }
.fo-marca.p3, .fo-chip.p3, .fo-art.p3, .fo-mapa .p3, .fo-ley .p3::before, .fo-nivel.p3 b { background: var(--fo3); }
.fo-marca.p2, .fo-chip.p2, .fo-art.p2, .fo-mapa .p2, .fo-ley .p2::before, .fo-nivel.p2 b { background: var(--fo2); }
.fo-marca.p1, .fo-chip.p1, .fo-art.p1, .fo-mapa .p1, .fo-ley .p1::before, .fo-nivel.p1 b { background: var(--fo1); }
.fo-marca.px, .fo-chip.px, .fo-art.px, .fo-mapa .px, .fo-ley .px::before, .fo-nivel.px b { background: var(--fox); }
.ob-simple #rd.sm-con-herr .fo-marca, .ob-simple #rd.sm-con-herr .fo-pag { pointer-events: none; opacity: .35; }

.fo-pag { position: absolute; left: 1%; top: 6.2%; z-index: 7; display: flex; flex-wrap: wrap; gap: 4px; max-width: 70%; }
.fo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border: 0; border-radius: 999px; cursor: pointer; color: #fff;
  font: 600 11px var(--f-body, Inter, sans-serif); box-shadow: 0 4px 10px -4px rgba(0,0,0,.4); }
.fo-chip b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.25); font-size: 11px; }

.fo-boton { font-weight: 700 !important; }

/* capa */
.fo-capa { position: fixed; inset: 0; z-index: 1001; display: flex; justify-content: center; align-items: flex-end; background: rgba(12,22,18,.42);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s; }
.fo-capa.on { opacity: 1; }
.fo-hoja { width: min(720px, 100%); max-height: 92dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg, #F6F7F5);
  border-radius: 22px 22px 0 0; box-shadow: 0 -20px 60px -20px rgba(0,0,0,.45); }
@media (min-width: 760px) { .fo-capa { align-items: center; } .fo-hoja { border-radius: 22px; } }
.fo-cab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--vidrio-fuerte, #fff); border-bottom: 1px solid var(--borde, rgba(0,0,0,.07)); }
.fo-cab > div { flex: 1; min-width: 0; }
.fo-cab small { display: block; font: 700 11px var(--f-body, Inter, sans-serif); letter-spacing: .05em; text-transform: uppercase; color: var(--gold, #12805C); }
.fo-cab b { display: block; font: 700 16px/1.25 var(--f-body, Inter, sans-serif); color: var(--text, #17201C); }
.fo-c { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; font: 14.5px/1.5 var(--f-body, Inter, sans-serif); color: var(--text, #17201C); }
.fo-c section h3 { margin: 0 0 6px; font: 700 14px var(--f-body, Inter, sans-serif); }
.fo-c section p { margin: 0 0 8px; color: var(--muted, #5b6560); font-size: 13.5px; }
.fo-c ul { margin: 0; padding-left: 18px; }
.fo-c li { margin: 3px 0; }

.fo-nivel { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; background: var(--vidrio, rgba(255,255,255,.8)); border: 1px solid var(--borde, rgba(0,0,0,.06)); }
.fo-nivel b { flex: none; width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center; color: #fff; font: 400 34px/1 "Anton", var(--f-disp, sans-serif); }
.fo-nivel b small { font-size: 14px; }
.fo-nivel span { display: block; font-weight: 800; font-size: 16px; }
.fo-nivel div small { color: var(--muted, #5b6560); font-size: 13px; }
.fo-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fo-datos div { padding: 10px 12px; border-radius: 12px; background: rgba(23,32,28,.04); }
.fo-datos span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #5b6560); }
.fo-datos b { font-size: 15px; }
.fo-datos .c-muy-alta, .fo-datos .c-alta { color: #1f7a3a; } .fo-datos .c-media { color: #8B6C0E; } .fo-datos .c-baja { color: #B4601A; }
.fo-nov { padding: 10px 12px; border-radius: 12px; background: #FFF4E5; color: #6b4a12; font-size: 13.5px; }
.fo-nov.aviso { background: #EEF3F8; color: #284a6b; }
.fo-por summary { cursor: pointer; font-weight: 700; color: var(--gold, #12805C); }
.fo-por ul { margin-top: 6px; }
.fo-ojo li b { color: #B42323; }
.fo-ap { list-style: none; padding: 0 !important; }
.fo-ap li { padding: 8px 10px; border-radius: 10px; background: rgba(23,32,28,.035); margin: 6px 0; }
.fo-ap li span { display: block; color: var(--muted, #5b6560); font-size: 13px; margin-top: 2px; }
.fo-nota { margin: 0; font-size: 12.5px; color: var(--muted, #5b6560); }

.fo-mapa { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: rgba(23,32,28,.06); }
.fo-mapa i { display: block; height: 100%; }
.fo-ley { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12.5px; color: var(--muted, #5b6560); }
.fo-ley span { display: inline-flex; align-items: center; gap: 6px; }
.fo-ley span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.fo-ley b { color: var(--text, #17201C); }
.fo-arts { display: flex; flex-wrap: wrap; gap: 6px; }
.fo-art { border: 0; cursor: pointer; padding: 5px 10px; border-radius: 999px; color: #fff; font: 600 12.5px var(--f-body, Inter, sans-serif); }
.fo-art:hover { filter: brightness(1.08); }
.fo-mas { font-size: 12.5px; color: var(--muted, #5b6560); align-self: center; }
.fo-bq { display: grid; grid-template-columns: minmax(0, 1fr) 90px 34px; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.fo-bq span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-bq > i { height: 7px; border-radius: 7px; background: rgba(23,32,28,.08); overflow: hidden; }
.fo-bq > i > i { display: block; height: 100%; border-radius: 7px; background: var(--gold, #12805C); }
.fo-bq b { text-align: right; }
.fo-bq small { grid-column: 1 / -1; margin-top: -4px; color: var(--muted, #5b6560); font-size: 11.5px; }
@media (max-width: 560px) { .fo-datos { grid-template-columns: 1fr 1fr; } .fo-marca { padding: 2px 4px; font-size: 10px; } .fo-marca span { display: none; } }