/* ============================================================================
   visores.css — Sistema visual de los Visores de referentes oficiales
   ----------------------------------------------------------------------------
   Se apoya en los tokens de marca de default.css (--ink, --violet, --magenta,
   --orange, superficies, sombras) para que los cuatro visores se lean como una
   sola familia y como parte del sitio, no como herramientas pegadas.

   Idea rectora: el dato manda. Tipografía tabular, superficies tranquilas y un
   único acento por visor (el color de su familia) para orientarse sin ruido.
   ============================================================================ */

/* ── Acento por visor ────────────────────────────────────────────────────── */
.vs[data-color="naranja"] { --vs-acento:var(--orange);    --vs-acento-2:var(--orange-2); }
.vs[data-color="violeta"] { --vs-acento:var(--violet);    --vs-acento-2:var(--violet-2); }
.vs[data-color="magenta"] { --vs-acento:var(--magenta);   --vs-acento-2:#E0559B; }
.vs[data-color="azul"]    { --vs-acento:#2563EB;          --vs-acento-2:#60A5FA; }
.vs { --vs-acento:var(--violet); --vs-acento-2:var(--violet-2); }

/* ── Cabecera del visor ──────────────────────────────────────────────────── */
.vs-head{ padding:44px 0 0 }
.vs-head .fuente{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Manrope',system-ui,sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-mute);
}
.vs-head .fuente::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--vs-acento)}
.vs-head h1{ margin:12px 0 10px;font-size:clamp(28px,4vw,42px);line-height:1.08;letter-spacing:-.02em }
.vs-head h1 b{ color:var(--vs-acento) }
.vs-head .lead{ max-width:70ch }

/* ── Conmutador entre visores ────────────────────────────────────────────── */
.vs-tabs{ display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding-bottom:2px }
.vs-tab{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--rule);background:var(--surface);color:var(--text-2);
  font-family:'Manrope',system-ui,sans-serif;font-size:13.5px;font-weight:700;
  text-decoration:none;transition:.18s;
}
.vs-tab:hover{ border-color:var(--vs-acento);color:var(--vs-acento);transform:translateY(-1px) }
.vs-tab[aria-current="page"]{ background:var(--ink);border-color:var(--ink);color:#fff }
[data-theme="dark"] .vs-tab[aria-current="page"]{ background:var(--violet);border-color:var(--violet) }

/* ── Barra de filtros (formulario GET: cada estado es un enlace compartible) ─ */
.vs-filtros{
  background:var(--surface);border:1px solid var(--rule);border-radius:16px;
  padding:18px;margin:26px 0 0;box-shadow:var(--shadow-sm);
}
.vs-filtros .fila{ display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;align-items:end }
.vs-campo{ display:flex;flex-direction:column;gap:6px;min-width:0 }
.vs-campo label{
  font-family:'Manrope',system-ui,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);
}
.vs-campo input,.vs-campo select{
  width:100%;padding:10px 12px;border:1px solid var(--rule-2);border-radius:10px;
  background:var(--bg-2);color:var(--text);font-family:inherit;font-size:14.5px;
}
.vs-campo input:focus,.vs-campo select:focus{
  outline:2px solid var(--vs-acento);outline-offset:1px;border-color:transparent;
}
.vs-acciones{ display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center }
.vs-btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:0;border-radius:10px;
  background:var(--ink);color:#fff;font-family:'Manrope',system-ui,sans-serif;
  font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;transition:.18s;
}
.vs-btn:hover{ background:var(--vs-acento) }
.vs-btn.ghost{ background:transparent;color:var(--text-mute);border:1px solid var(--rule) }
.vs-btn.ghost:hover{ color:var(--vs-acento);border-color:var(--vs-acento);background:transparent }

/* ── Píldoras de selección (área, grado, ciclo, eje…) ────────────────────── */
.vs-pills{ display:flex;flex-wrap:wrap;gap:7px;margin:0 0 4px }
.vs-pill{
  padding:7px 14px;border-radius:999px;border:1px solid var(--rule);background:var(--surface);
  color:var(--text-2);font-family:'Manrope',system-ui,sans-serif;font-size:13px;font-weight:600;
  text-decoration:none;transition:.16s;white-space:nowrap;
}
.vs-pill:hover{ border-color:var(--vs-acento);color:var(--vs-acento) }
.vs-pill.on{ background:var(--vs-acento);border-color:var(--vs-acento);color:#fff }
.vs-pill-grupo{ margin:18px 0 0 }
.vs-pill-grupo > span{
  display:block;margin-bottom:8px;font-family:'Manrope',system-ui,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);
}

/* ── Resumen de resultados ───────────────────────────────────────────────── */
.vs-resumen{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:28px 0 16px;
  padding-bottom:12px;border-bottom:1px solid var(--rule);
}
.vs-resumen strong{ font-size:22px;font-variant-numeric:tabular-nums;color:var(--text) }
.vs-resumen span{ color:var(--text-mute);font-size:14.5px }

/* ── Tarjeta de resultado ────────────────────────────────────────────────── */
.vs-lista{ display:grid;gap:14px;margin:0 0 32px }
.vs-item{
  display:block;background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  padding:20px 22px;text-decoration:none;color:inherit;transition:.18s;box-shadow:var(--shadow-sm);
}
a.vs-item:hover{ border-color:var(--vs-acento);transform:translateY(-2px);box-shadow:var(--shadow-md) }
.vs-item h3{ margin:0 0 8px;font-size:17.5px;line-height:1.3;color:var(--text) }
.vs-item .meta{ display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:var(--text-mute) }
.vs-item .meta b{ color:var(--text-2);font-weight:600;font-variant-numeric:tabular-nums }
.vs-num{ font-variant-numeric:tabular-nums }

/* ── Etiquetas de estado ─────────────────────────────────────────────────── */
.vs-tag{
  display:inline-block;padding:3px 10px;border-radius:999px;font-family:'Manrope',system-ui,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1px solid;
}
.vs-tag.abierta{ color:#0F7B4F;border-color:#0F7B4F;background:rgba(15,123,79,.08) }
.vs-tag.espera{  color:#9A5B12;border-color:#9A5B12;background:rgba(154,91,18,.08) }
.vs-tag.cerrada{ color:#8A2018;border-color:#8A2018;background:rgba(138,32,24,.08) }
.vs-tag.neutra{  color:var(--text-mute);border-color:var(--rule-2);background:var(--bg-3) }
[data-theme="dark"] .vs-tag.abierta{ color:#6FC69B;border-color:#2F6B50;background:rgba(111,198,155,.10) }
[data-theme="dark"] .vs-tag.espera{  color:#DFAA63;border-color:#6B5228;background:rgba(223,170,99,.10) }
[data-theme="dark"] .vs-tag.cerrada{ color:#E8867A;border-color:#6B322B;background:rgba(232,134,122,.10) }

/* ── Bloques de contenido (DBA, estándares, referentes) ──────────────────── */
.vs-bloque{
  background:var(--surface);border:1px solid var(--rule);border-radius:16px;
  padding:24px 26px;margin:0 0 16px;box-shadow:var(--shadow-sm);
}
.vs-bloque > header{ display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px }
.vs-codigo{
  font-family:'Manrope',system-ui,sans-serif;font-size:12px;font-weight:800;letter-spacing:.06em;
  color:#fff;background:var(--vs-acento);padding:4px 10px;border-radius:7px;white-space:nowrap;
}
.vs-bloque h3{ margin:0;font-size:18px;line-height:1.35;flex:1 1 240px;min-width:0 }
.vs-enunciado{ font-size:16.5px;line-height:1.6;color:var(--text-2);margin:0 0 18px }

.vs-sub{
  font-family:'Manrope',system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-mute);margin:20px 0 8px;
  display:flex;align-items:center;gap:8px;
}
.vs-sub::after{ content:"";flex:1;height:1px;background:var(--rule) }
.vs-listado{ margin:0;padding-left:20px }
.vs-listado li{ margin-bottom:7px;line-height:1.55 }
.vs-chips{ display:flex;flex-wrap:wrap;gap:6px }
.vs-chip{
  padding:5px 11px;border-radius:8px;background:var(--bg-3);border:1px solid var(--rule);
  font-size:13px;color:var(--text-2);
}

/* ── Rejilla de niveles de desempeño ─────────────────────────────────────── */
.vs-niveles{ display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px }
.vs-nivel{ border:1px solid var(--rule);border-radius:12px;padding:14px;background:var(--bg-2) }
.vs-nivel b{
  display:block;margin-bottom:6px;font-family:'Manrope',system-ui,sans-serif;font-size:11px;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.vs-nivel.bajo b{ color:#8A2018 } .vs-nivel.basico b{ color:#9A5B12 }
.vs-nivel.alto b{ color:#1F6B4A } .vs-nivel.superior b{ color:var(--violet) }
.vs-nivel p{ margin:0;font-size:14px;line-height:1.5;color:var(--text-mute) }

/* ── Ficha de detalle (OPEC) ─────────────────────────────────────────────── */
.vs-datos{ display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:14px;overflow:hidden;margin:0 0 24px }
.vs-dato{ background:var(--surface);padding:16px 18px }
.vs-dato .k{
  display:block;font-family:'Manrope',system-ui,sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-mute);margin-bottom:5px;
}
.vs-dato .v{ font-size:17px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums }

.vs-tabla-caja{ overflow-x:auto;border:1px solid var(--rule);border-radius:14px;background:var(--surface);margin:0 0 20px }
.vs-tabla{ width:100%;border-collapse:collapse;font-size:14.5px }
.vs-tabla th{
  text-align:left;padding:12px 16px;border-bottom:1px solid var(--rule);white-space:nowrap;
  font-family:'Manrope',system-ui,sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-mute);
}
.vs-tabla td{ padding:12px 16px;border-bottom:1px solid var(--rule);vertical-align:top }
.vs-tabla tr:last-child td{ border-bottom:0 }
.vs-tabla td.num{ font-variant-numeric:tabular-nums;white-space:nowrap }

/* ── Paginación ──────────────────────────────────────────────────────────── */
.vs-pag{ display:flex;gap:8px;align-items:center;justify-content:center;margin:0 0 44px;flex-wrap:wrap }
.vs-pag a,.vs-pag span{
  min-width:40px;padding:9px 13px;border-radius:10px;border:1px solid var(--rule);
  background:var(--surface);color:var(--text-2);text-decoration:none;text-align:center;
  font-family:'Manrope',system-ui,sans-serif;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;
}
.vs-pag a:hover{ border-color:var(--vs-acento);color:var(--vs-acento) }
.vs-pag .actual{ background:var(--ink);border-color:var(--ink);color:#fff }
.vs-pag .inerte{ opacity:.45 }

/* ── Estado vacío ────────────────────────────────────────────────────────── */
.vs-vacio{
  text-align:center;padding:56px 24px;border:1px dashed var(--rule-2);border-radius:16px;
  color:var(--text-mute);background:var(--surface-2);
}
.vs-vacio h3{ margin:0 0 8px;color:var(--text) }
.vs-vacio p{ margin:0 auto;max-width:46ch }

/* ── Tarjetas del índice ─────────────────────────────────────────────────── */
.vs-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:34px 0 56px }
.vs-card{
  display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:18px;
  background:var(--surface);border:1px solid var(--rule);text-decoration:none;color:inherit;
  box-shadow:var(--shadow-sm);transition:.2s;position:relative;overflow:hidden;
}
.vs-card::before{ content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--vs-acento) }
.vs-card:hover{ transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--vs-acento) }
.vs-card .lema{
  font-family:'Manrope',system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--vs-acento);
}
.vs-card h2{ margin:0;font-size:21px;line-height:1.25 }
.vs-card p{ margin:0;color:var(--text-mute);font-size:15px;line-height:1.55 }
.vs-card .pie{
  margin-top:auto;padding-top:14px;font-size:12.5px;color:var(--text-mute);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.vs-card .pie b{ color:var(--vs-acento);font-family:'Manrope',system-ui,sans-serif;font-weight:700 }

@media (max-width:640px){
  .vs-head{ padding-top:30px }
  .vs-bloque{ padding:20px 18px }
  .vs-filtros{ padding:14px }
}

/* ── Segunda altura de navegación (referentes dentro de un grupo) ─────────── */
.vs-subtabs{ display:flex;flex-wrap:wrap;gap:18px;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--rule) }
.vs-subtab{
  font-family:'Manrope',system-ui,sans-serif;font-size:13.5px;font-weight:700;
  color:var(--text-mute);text-decoration:none;padding-bottom:4px;border-bottom:2px solid transparent;transition:.16s;
}
.vs-subtab:hover{ color:var(--vs-acento) }
.vs-subtab[aria-current="page"]{ color:var(--vs-acento);border-bottom-color:var(--vs-acento) }

/* Acento del grupo DIAN: el dorado del documento maestro */
.vs[data-color="dorado"]{ --vs-acento:#a8790c; --vs-acento-2:#c99a2e; }

/* ============================================================================
   BUSCADOR OPEC — maestro-detalle
   ----------------------------------------------------------------------------
   Dos columnas que conviven en una pantalla: la búsqueda a la izquierda con su
   propio desplazamiento, la ficha a la derecha. Consultar un empleo no puede
   costar perder la lista de resultados.
   ============================================================================ */
.op-marco{
  display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);
  gap:22px;max-width:1240px;margin:0 auto;padding:26px 28px 60px;align-items:start;
}

/* ── Columna de búsqueda ─────────────────────────────────────────────────── */
.op-lista-col{ position:sticky;top:16px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 40px) }
.op-filtros{ background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:14px;box-shadow:var(--shadow-sm) }
.op-buscar{ display:flex;gap:8px }
.op-buscar input{
  flex:1;min-width:0;padding:10px 12px;border:1px solid var(--rule-2);border-radius:10px;
  background:var(--bg-2);color:var(--text);font-family:inherit;font-size:14.5px;
}
.op-buscar input:focus{ outline:2px solid var(--vs-acento);outline-offset:1px;border-color:transparent }
.op-buscar button,.op-acciones button{
  padding:10px 16px;border:0;border-radius:10px;background:var(--ink);color:#fff;cursor:pointer;
  font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:13.5px;white-space:nowrap;
}
.op-buscar button:hover,.op-acciones button:hover{ background:var(--vs-acento) }

.op-mas{ margin-top:10px }
.op-mas summary{
  cursor:pointer;font-family:'Manrope',system-ui,sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute);padding:5px 0;
}
.op-mas summary:hover{ color:var(--vs-acento) }
.op-campos{ display:grid;gap:9px;margin-top:9px }
.op-campos label{
  display:flex;flex-direction:column;gap:4px;font-family:'Manrope',system-ui,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute);
}
.op-campos select,.op-campos input{
  padding:8px 10px;border:1px solid var(--rule-2);border-radius:9px;background:var(--bg-2);
  color:var(--text);font-family:'Source Serif 4',serif;font-size:14px;font-weight:400;text-transform:none;letter-spacing:0;
}
.op-acciones{ display:flex;gap:10px;align-items:center;margin-top:11px }
.op-acciones a{ font-size:13px;color:var(--text-mute);text-decoration:none }
.op-acciones a:hover{ color:var(--vs-acento) }

.op-conteo{ font-size:13.5px;color:var(--text-mute);padding:0 2px }
.op-conteo strong{ font-size:19px;color:var(--text);font-variant-numeric:tabular-nums }

/* ── Lista de resultados ─────────────────────────────────────────────────── */
.op-lista{ list-style:none;margin:0;padding:0 4px 4px 0;overflow-y:auto;display:grid;gap:7px;flex:1 }
.op-item{
  display:grid;gap:5px;padding:12px 14px;border:1px solid var(--rule);border-left:3px solid transparent;
  border-radius:11px;background:var(--surface);text-decoration:none;color:inherit;transition:.15s;
}
.op-item:hover{ border-color:var(--rule-2);border-left-color:var(--vs-acento);transform:translateX(2px) }
.op-item.activo{ border-color:var(--vs-acento);border-left-color:var(--vs-acento);background:var(--surface-2);box-shadow:var(--shadow-sm) }
.op-item-cab{ display:flex;align-items:center;gap:8px;justify-content:space-between }
.op-item-cod{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;font-weight:600;
  color:var(--text-mute);letter-spacing:.02em;
}
.op-item-tit{ font-size:14.5px;font-weight:600;line-height:1.32;color:var(--text) }
.op-item-meta{ display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--text-mute) }
.op-item-meta .num{ font-variant-numeric:tabular-nums }

.op-pag{ display:flex;gap:8px;align-items:center;justify-content:center;padding:4px 0 2px }
.op-pag a,.op-pag span{
  padding:6px 12px;border-radius:9px;border:1px solid var(--rule);background:var(--surface);
  color:var(--text-2);text-decoration:none;font-size:13px;font-variant-numeric:tabular-nums;
}
.op-pag a:hover{ border-color:var(--vs-acento);color:var(--vs-acento) }
.op-pag .actual{ border:0;background:none;color:var(--text-mute) }

/* ── Ficha ───────────────────────────────────────────────────────────────── */
.op-ficha-col{ min-width:0 }
.op-ficha{ background:var(--surface);border:1px solid var(--rule);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm) }
.op-ficha-cab{ padding:24px 26px 18px;border-bottom:1px solid var(--rule);background:var(--surface-2) }
.op-badges{ display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px }
.op-badge{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:6px;border:1px solid var(--rule-2);color:var(--text-2);background:var(--bg-2);
}
.op-badge.codigo{ background:var(--ink);border-color:var(--ink);color:#fff }
.op-badge.nivel{ border-color:var(--vs-acento);color:var(--vs-acento) }
.op-ficha-cab h2{ margin:0 0 6px;font-size:22px;line-height:1.25;letter-spacing:-.01em }
.op-entidad{ margin:0 0 16px;font-size:14px;color:var(--text-mute) }

.op-cifras{ display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:11px;overflow:hidden }
.op-cifras > div{ background:var(--surface);padding:11px 13px }
.op-cifras .k{
  display:block;font-family:'Manrope',system-ui,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);margin-bottom:3px;
}
.op-cifras .v{ font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text) }
.op-cifras .v.peq{ font-size:13px;font-weight:600 }
.op-pdf{ display:inline-block;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--vs-acento);text-decoration:none }
.op-pdf:hover{ text-decoration:underline }

/* ── Pestañas ────────────────────────────────────────────────────────────── */
.op-tabs{ display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--rule);background:var(--surface);padding:0 14px }
.op-tab{
  padding:13px 15px;font-family:'Manrope',system-ui,sans-serif;font-size:13px;font-weight:700;
  color:var(--text-mute);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;transition:.15s;
}
.op-tab:hover{ color:var(--vs-acento) }
.op-tab[aria-selected="true"]{ color:var(--vs-acento);border-bottom-color:var(--vs-acento) }

.op-paneles{ padding:22px 26px 26px }
.op-h3{ font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-mute);margin:22px 0 10px;display:flex;align-items:center;gap:10px }
.op-h3:first-child{ margin-top:0 }
.op-h3::after{ content:"";flex:1;height:1px;background:var(--rule) }
.op-texto{ font-size:15.5px;line-height:1.65;color:var(--text-2);margin:0 0 8px }
.op-intro{ font-size:14.5px;line-height:1.6;color:var(--text-mute);margin:0 0 6px }
.op-nada{ font-size:14.5px;color:var(--text-mute);font-style:italic;margin:0 }
.op-crudo{ font-size:12.5px;color:var(--text-mute);font-family:'IBM Plex Mono',monospace }
.op-funciones,.op-lista-num,.op-etapas{ margin:0;padding-left:20px }
.op-funciones li,.op-etapas li{ margin-bottom:8px;line-height:1.55;font-size:15px;color:var(--text-2) }
.op-lista{ }
.op-paneles ul.op-lista{ list-style:disc;padding-left:20px;display:block }
.op-paneles ul.op-lista li{ margin-bottom:7px;line-height:1.55;font-size:15px;color:var(--text-2) }

/* Ubicaciones agrupadas por departamento */
.op-depto{ border:1px solid var(--rule);border-radius:11px;margin-bottom:9px;overflow:hidden }
.op-depto-cab{ display:flex;justify-content:space-between;gap:10px;padding:9px 13px;background:var(--surface-2);font-size:13.5px }
.op-depto-cab span{ color:var(--text-mute);font-variant-numeric:tabular-nums }
.op-mun{ list-style:none;margin:0;padding:0 }
.op-mun li{ display:flex;align-items:baseline;gap:10px;padding:8px 13px;border-top:1px solid var(--rule);font-size:14px }
.op-mun li em{ flex:1;color:var(--text-mute);font-style:normal;font-size:13px }
.op-mun li b{ font-variant-numeric:tabular-nums }

/* Ponderación de pruebas */
.op-prueba{ padding:12px 0;border-bottom:1px solid var(--rule) }
.op-prueba:last-child{ border-bottom:0 }
.op-prueba-cab{ display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:7px }
.op-prueba-cab b{ font-size:15px;flex:1 1 200px }
.op-caracter{ font-size:11.5px;padding:2px 8px;border-radius:5px;background:var(--bg-3);color:var(--text-mute);border:1px solid var(--rule) }
.op-peso{ font-size:17px;font-weight:800;color:var(--vs-acento);font-variant-numeric:tabular-nums }
.op-barra{ height:6px;border-radius:3px;background:var(--bg-3);overflow:hidden }
.op-barra i{ display:block;height:100%;background:linear-gradient(90deg,var(--vs-acento),var(--vs-acento-2)) }
.op-minimo{ display:inline-block;margin-top:6px;font-size:12.5px;color:var(--text-mute) }
.op-topes{ display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px }
.op-topes > div{ border:1px solid var(--rule);border-radius:10px;padding:11px 13px;background:var(--bg-2) }
.op-topes .k{ display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-mute);margin-bottom:4px }
.op-topes .v{ font-size:19px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums }

.op-tabla-caja{ overflow-x:auto;border:1px solid var(--rule);border-radius:11px;margin-bottom:6px }
.op-tabla{ width:100%;border-collapse:collapse;font-size:13.5px }
.op-tabla th{
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule);white-space:nowrap;background:var(--surface-2);
  font-family:'Manrope',system-ui,sans-serif;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);
}
.op-tabla td{ padding:9px 12px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.45 }
.op-tabla tr:last-child td{ border-bottom:0 }
.op-tabla td.num{ font-variant-numeric:tabular-nums;white-space:nowrap }

.op-vacio{ text-align:center;padding:60px 24px;border:1px dashed var(--rule-2);border-radius:16px;color:var(--text-mute);background:var(--surface) }
.op-vacio h3{ margin:0 0 8px;color:var(--text) }

@media (max-width:980px){
  .op-marco{ grid-template-columns:1fr;padding:20px 18px 50px }
  .op-lista-col{ position:static;max-height:none }
  .op-lista{ max-height:420px }
}

/* ============================================================================
   DBA — herramienta de planeación docente
   ----------------------------------------------------------------------------
   Tres vistas del mismo material: panorama (tabla del grado), ruta (secuencia
   didáctica) y plan (documento imprimible). Lo que manda es la lectura rápida:
   un docente escanea, no lee.
   ============================================================================ */
.pl{ padding-top:34px;padding-bottom:112px }   /* 112 = navbar fijo (72) + aire */
.pl-selectores{ padding-right:clamp(0px,18vw,250px) }   /* aire para el logo flotante */
.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.pl-rotulo{
  display:block;font-family:'Manrope',system-ui,sans-serif;font-size:10.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-mute);margin-bottom:4px;
}
.pl-h2{ font-size:19px;margin:0 0 6px;letter-spacing:-.01em }
.pl-ayuda{ font-size:13.5px;color:var(--text-mute);line-height:1.55;margin:6px 0 0 }
.pl-nada,.pl-vacio{ color:var(--text-mute);font-style:italic;font-size:14px }
.pl-nada-caja{ text-align:center;padding:48px 24px;border:1px dashed var(--rule-2);border-radius:14px;background:var(--surface);color:var(--text-mute) }
.pl-nada-caja h3{ margin:0 0 8px;color:var(--text) }
.pl-btn{
  padding:9px 18px;border:0;border-radius:10px;background:var(--ink);color:#fff;cursor:pointer;
  font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:13.5px;text-decoration:none;white-space:nowrap;
}
.pl-btn:hover{ background:var(--vs-acento) }

/* ── Selectores y buscador ───────────────────────────────────────────────── */
.pl-selectores{ display:grid;gap:16px;margin:26px 0 0 }
.pl-buscar{ display:flex;gap:8px;max-width:560px }
.pl-buscar input{
  flex:1;min-width:0;padding:10px 13px;border:1px solid var(--rule-2);border-radius:10px;
  background:var(--bg-2);color:var(--text);font-family:inherit;font-size:14.5px;
}
.pl-buscar input:focus{ outline:2px solid var(--vs-acento);outline-offset:1px;border-color:transparent }
.pl-buscar button{
  padding:10px 18px;border:0;border-radius:10px;background:var(--ink);color:#fff;cursor:pointer;
  font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:13.5px;
}
.pl-buscar button:hover{ background:var(--vs-acento) }

/* ── Resultados de búsqueda por tema ─────────────────────────────────────── */
.pl-hallazgos{ margin:28px 0 0 }
.pl-hall-lista{ display:grid;gap:8px;margin-top:14px }
.pl-hall{
  display:flex;gap:14px;align-items:baseline;padding:13px 16px;border:1px solid var(--rule);
  border-radius:11px;background:var(--surface);text-decoration:none;color:inherit;transition:.15s;
}
.pl-hall:hover{ border-color:var(--vs-acento);transform:translateX(2px) }
.pl-hall-grado{
  flex:none;font-family:'Manrope',system-ui,sans-serif;font-size:11px;font-weight:800;
  color:#fff;background:var(--vs-acento);padding:3px 9px;border-radius:6px;
}
.pl-hall-txt{ font-size:14.5px;line-height:1.5;color:var(--text-2) }

/* ── Contexto del grado ──────────────────────────────────────────────────── */
.pl-contexto{
  margin:24px 0 0;padding:18px 22px;border-left:3px solid var(--vs-acento);
  background:var(--surface-2);border-radius:0 12px 12px 0;
}
.pl-contexto p{ margin:0;font-size:15.5px;line-height:1.6;color:var(--text-2) }

/* ── Conmutador de vista: el eje de la herramienta ───────────────────────── */
.pl-modos{ display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:26px 0 22px }
.pl-modo{
  display:flex;flex-direction:column;gap:3px;padding:15px 18px;border:1px solid var(--rule);
  border-radius:13px;background:var(--surface);text-decoration:none;color:inherit;transition:.16s;
}
.pl-modo:hover{ border-color:var(--vs-acento);transform:translateY(-1px) }
.pl-modo b{ font-family:'Manrope',system-ui,sans-serif;font-size:15px;color:var(--text) }
.pl-modo span{ font-size:12.5px;color:var(--text-mute);line-height:1.4 }
.pl-modo.on{ background:var(--ink);border-color:var(--ink) }
.pl-modo.on b{ color:#fff } .pl-modo.on span{ color:rgba(255,255,255,.7) }
[data-theme="dark"] .pl-modo.on{ background:var(--violet);border-color:var(--violet) }

/* ── Panorama: la tabla del grado ────────────────────────────────────────── */
.pl-barra,.pl-plan-barra{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 16px;background:var(--surface);border:1px solid var(--rule);border-radius:12px;margin-bottom:12px;
}
.pl-barra strong,.pl-plan-barra strong{ font-size:19px;color:var(--text);font-variant-numeric:tabular-nums }
.pl-tiempo{ color:var(--text-mute) }
.pl-plan-acciones{ display:flex;gap:14px;align-items:center;flex-wrap:wrap }
.pl-plan-acciones a{ font-size:13.5px;color:var(--text-mute);text-decoration:none }
.pl-plan-acciones a:hover{ color:var(--vs-acento) }

.pl-tabla-caja{ overflow-x:auto;border:1px solid var(--rule);border-radius:13px;background:var(--surface) }
.pl-tabla{ width:100%;border-collapse:collapse;font-size:14px }
.pl-tabla th{
  text-align:left;padding:11px 13px;border-bottom:1px solid var(--rule);background:var(--surface-2);
  font-family:'Manrope',system-ui,sans-serif;font-size:10px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-mute);white-space:nowrap;
}
.pl-tabla td{ padding:12px 13px;border-bottom:1px solid var(--rule);vertical-align:top }
.pl-tabla tr:last-child td{ border-bottom:0 }
.pl-tabla tr.elegida{ background:var(--acento-suave, var(--surface-2)) }
.pl-tabla tr:hover{ background:var(--surface-2) }
.pl-tabla .c-sel{ width:34px }
.pl-tabla .c-num{ width:64px;text-align:center;font-variant-numeric:tabular-nums;color:var(--text-mute);white-space:nowrap }
.pl-tabla .c-temas{ width:32% }
.pl-tabla input[type=checkbox]{ width:17px;height:17px;accent-color:var(--vs-acento);cursor:pointer }
.pl-codigo{
  display:inline-block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;font-weight:700;
  color:#fff;background:var(--vs-acento);padding:2px 8px;border-radius:5px;
}
.pl-codigo.grande{ font-size:12.5px;padding:4px 10px }
.pl-enunciado{ display:block;color:var(--text);text-decoration:none;line-height:1.5 }
.pl-enunciado:hover{ color:var(--vs-acento) }
.pl-actividad{ display:block;margin-top:5px;font-size:12.5px;color:var(--text-mute) }
.pl-mas{ font-size:12px;color:var(--text-mute);align-self:center }

/* ── Ruta didáctica: la secuencia ────────────────────────────────────────── */
.pl-rutas{ display:grid;gap:18px }
.pl-ruta{ border:1px solid var(--rule);border-radius:16px;background:var(--surface);overflow:hidden;scroll-margin-top:20px }
.pl-ruta-cab{ display:flex;gap:14px;align-items:flex-start;padding:20px 24px;background:var(--surface-2);border-bottom:1px solid var(--rule);flex-wrap:wrap }
.pl-ruta-tit{ flex:1;min-width:220px }
.pl-ruta-tit p{ margin:0;font-size:16.5px;line-height:1.55;color:var(--text) }
.pl-anadir{
  flex:none;padding:7px 14px;border:1px solid var(--rule-2);border-radius:9px;background:var(--bg-2);
  font-family:'Manrope',system-ui,sans-serif;font-size:12.5px;font-weight:700;color:var(--text-2);text-decoration:none;
}
.pl-anadir:hover{ border-color:var(--vs-acento);color:var(--vs-acento) }
.pl-anadir.puesto{ background:var(--vs-acento);border-color:var(--vs-acento);color:#fff }

.pl-pasos{ padding:6px 24px 22px }
.pl-paso{ display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--rule) }
.pl-paso:last-child{ border-bottom:0 }
.pl-paso-n{
  flex:none;width:24px;height:24px;border-radius:50%;background:var(--bg-3);color:var(--text-mute);
  font-family:'Manrope',system-ui,sans-serif;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.pl-paso.destacado .pl-paso-n{ background:var(--vs-acento);color:#fff }
.pl-paso > div{ flex:1;min-width:0 }
.pl-paso h4{
  margin:0 0 8px;font-family:'Manrope',system-ui,sans-serif;font-size:13px;font-weight:800;
  color:var(--text);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.pl-min{ font-size:11.5px;font-weight:700;color:var(--vs-acento);background:var(--bg-3);padding:2px 8px;border-radius:5px }
.pl-paso p{ margin:0 0 8px;font-size:15px;line-height:1.6;color:var(--text-2) }
.pl-paso .pl-rotulo{ margin-bottom:2px }
.pl-evidencias,.pl-preguntas,.pl-estrategias{ margin:0;padding-left:19px }
.pl-evidencias li,.pl-preguntas li,.pl-estrategias li{ margin-bottom:7px;font-size:15px;line-height:1.55;color:var(--text-2) }
.pl-ejemplo{ padding:12px 14px;background:var(--bg-3);border-radius:9px;font-size:14.5px }
.pl-act-tit{ font-weight:700;color:var(--text);font-size:16px }
.pl-producto{ padding:11px 14px;background:var(--surface-2);border-left:3px solid var(--vs-acento);border-radius:0 9px 9px 0 }
.pl-pregunta{ font-style:italic;color:var(--text-mute);font-size:15.5px }

.pl-niveles{ display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px }
.pl-nivel{ border:1px solid var(--rule);border-radius:11px;padding:13px;background:var(--bg-2) }
.pl-nivel b{ display:block;margin-bottom:5px;font-family:'Manrope',system-ui,sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase }
.pl-nivel p{ margin:0;font-size:13.5px;line-height:1.5;color:var(--text-mute) }
.pl-nivel.bajo b{ color:#8A2018 } .pl-nivel.basico b{ color:#9A5B12 }
.pl-nivel.alto b{ color:#1F6B4A } .pl-nivel.superior b{ color:var(--violet) }

/* ── Referentes que sostienen el plan ────────────────────────────────────── */
.pl-referentes{ margin:34px 0 0;padding-top:26px;border-top:1px solid var(--rule) }
.pl-ref-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:16px 0 0 }
.pl-ref{ border:1px solid var(--rule);border-radius:13px;padding:20px;background:var(--surface) }
.pl-ref h3{ margin:0 0 10px;font-size:15px }
.pl-ref p{ margin:0 0 10px;font-size:14.5px;line-height:1.6;color:var(--text-2) }
.pl-ref p.peq{ font-size:13px;color:var(--text-mute) }
.pl-saber{ list-style:none;margin:0;padding:0;display:grid;gap:6px }
.pl-saber li{ display:flex;flex-direction:column;padding:8px 11px;background:var(--bg-3);border-radius:8px }
.pl-saber b{ font-size:13.5px } .pl-saber span{ font-size:12.5px;color:var(--text-mute) }
.pl-estandares{ margin-top:16px;border:1px solid var(--rule);border-radius:13px;background:var(--surface);padding:16px 20px }
.pl-estandares summary{ cursor:pointer;font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:14px }
.pl-proceso{ margin-top:14px }
.pl-proceso h4{ margin:0 0 6px;font-size:13px;color:var(--vs-acento) }
.pl-proceso ul{ margin:0;padding-left:19px }
.pl-proceso li{ margin-bottom:6px;font-size:14px;line-height:1.5;color:var(--text-2) }

/* ── Mi plan: el documento ───────────────────────────────────────────────── */
.pl-doc{ border:1px solid var(--rule);border-radius:16px;background:var(--surface);padding:32px 36px }
.pl-doc-cab{ padding-bottom:20px;border-bottom:2px solid var(--ink);margin-bottom:22px }
.pl-doc-cab h2{ margin:4px 0 6px;font-size:23px;letter-spacing:-.01em }
.pl-doc-meta{ margin:0;font-size:13px;color:var(--text-mute) }
.pl-doc-bloque{ margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--rule) }
.pl-doc-bloque h3{ margin:0 0 8px;font-size:15px }
.pl-doc-bloque p{ margin:0 0 6px;font-size:14.5px;line-height:1.6;color:var(--text-2) }
.pl-doc-grado{ font-size:17px;margin:26px 0 12px;color:var(--vs-acento) }
.pl-doc-dba{ margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--rule);break-inside:avoid }
.pl-doc-dba:last-of-type{ border-bottom:0 }
.pl-doc-dba h4{ margin:0 0 12px;font-size:15.5px;line-height:1.5;font-weight:600;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap }
.pl-doc-fila{ display:grid;grid-template-columns:120px 1fr;gap:14px;margin-bottom:12px;font-size:14px;line-height:1.6 }
.pl-doc-fila .pl-rotulo{ margin:0 }
.pl-doc-rubrica{ width:100%;border-collapse:collapse;font-size:13.5px }
.pl-doc-rubrica th{ text-align:left;padding:6px 10px;width:96px;color:var(--text-mute);font-size:11px;text-transform:uppercase;letter-spacing:.06em;vertical-align:top }
.pl-doc-rubrica td{ padding:6px 10px;border-bottom:1px solid var(--rule);line-height:1.5 }
.pl-doc-pie{ margin-top:24px;padding-top:16px;border-top:1px solid var(--rule);font-size:12px;color:var(--text-mute) }

/* ── Impresión: el plan se entrega en papel ──────────────────────────────── */
@media print{
  .vs-head,.pl-selectores,.pl-modos,.pl-plan-barra,.pl-referentes,.nav,footer,
  .form-salir,.vs-tabs,.vs-subtabs{ display:none !important }
  body{ background:#fff;color:#000 }
  .pl-doc{ border:0;padding:0;background:#fff }
  .pl-doc-dba{ page-break-inside:avoid }
  a[href]::after{ content:"" }
}

@media (max-width:640px){
  .pl-doc{ padding:22px 18px }
  .pl-doc-fila{ grid-template-columns:1fr;gap:4px }
  .pl-pasos{ padding:6px 16px 18px }
  .pl-ruta-cab{ padding:16px }
}