/* ---------- Temario · índice de bloques y temas ---------- */
/* caja estrecha a propósito: 54 filas de texto necesitan una línea legible */
.opr-ix-i-caja{max-width:880px !important}
.opr-ix-i-cabeza{margin-bottom:26px !important}

/* --- barra de búsqueda, pegada al borde superior --- */
.opr-ix-barra{position:sticky !important; top:0 !important; z-index:20 !important; display:flex !important; align-items:center !important; gap:12px !important;
  flex-wrap:wrap !important; padding:14px 0 13px !important; margin-bottom:14px !important;
  background:var(--superficie) !important; border-bottom:1px solid var(--borde) !important}

.opr-ix-buscador{position:relative !important; flex:1 1 260px !important; display:flex !important; align-items:center !important}
.opr-ix-lupa{position:absolute !important; left:15px !important; width:17px !important; height:17px !important; color:var(--tenue) !important; pointer-events:none !important}
.opr-ix-campo{width:100% !important; padding:13px 44px 13px 42px !important; border-radius:999px !important;
  background:var(--p50) !important; box-shadow:inset 0 0 0 1.5px var(--borde) !important;
  font-size:.9375rem !important; font-weight:500 !important; color:var(--tinta) !important; letter-spacing:-.006em !important;
  transition:box-shadow .16s ease, background .16s ease !important}
.opr-ix-campo::placeholder{color:var(--tenue) !important; font-weight:400 !important}
.opr-ix-campo:focus{background:var(--superficie) !important; box-shadow:inset 0 0 0 1.5px var(--p500) !important}
.opr-ix-campo::-webkit-search-cancel-button{display:none !important}
.opr-ix-limpiar{position:absolute !important; right:9px !important; width:30px !important; height:30px !important; border-radius:999px !important;
  display:grid !important; place-items:center !important; color:var(--tenue) !important; transition:color .16s ease, background .16s ease !important}
.opr-ix-limpiar:hover{color:var(--tinta) !important; background:var(--p100) !important}
.opr-ix-limpiar svg{width:15px !important; height:15px !important}

.opr-ix-estado{display:flex !important; align-items:center !important; gap:14px !important; flex:none !important}
.opr-ix-cuenta{font-size:.84375rem !important; font-weight:700 !important; color:var(--tenue) !important; white-space:nowrap !important}
.opr-ix-todo{font-size:.84375rem !important; font-weight:700 !important; color:var(--suave) !important; letter-spacing:-.01em !important;
  padding:8px 14px !important; border-radius:999px !important; box-shadow:inset 0 0 0 1.5px var(--borde) !important;
  white-space:nowrap !important; transition:color .16s ease, box-shadow .16s ease, background .16s ease !important}
.opr-ix-todo:hover{color:var(--tinta) !important; background:var(--p50) !important; box-shadow:inset 0 0 0 1.5px var(--borde2) !important}

/* --- un bloque --- */
.opr-ix-bloques{display:flex !important; flex-direction:column !important; gap:9px !important}
.opr-ix-b{position:relative !important; border-radius:var(--radio) !important; background:var(--superficie) !important;
  box-shadow:inset 0 0 0 1px var(--borde), var(--sombra-s) !important; overflow:hidden !important;
  scroll-margin-top:86px !important; transition:box-shadow .2s ease !important}
.opr-ix-b.es-abierto{box-shadow:inset 0 0 0 1px var(--borde2), var(--sombra) !important}
/* la barra lateral es el código de color del bloque, no decoración */
.opr-ix-b::before{content:'' !important; position:absolute !important; left:0 !important; top:0 !important; bottom:0 !important; width:4px !important; background:var(--acento) !important}

.opr-ix-cab{width:100% !important; display:flex !important; align-items:center !important; gap:14px !important; text-align:left !important;
  padding:16px 18px 16px 22px !important; transition:background .16s ease !important}
.opr-ix-cab:hover{background:var(--p50) !important}
.opr-ix-galon{flex:none !important; min-width:46px !important; height:44px !important; padding:0 9px !important; border-radius:12px !important;
  display:grid !important; place-items:center !important; background:var(--galon) !important; color:var(--galon-tinta) !important;
  font-size:1rem !important; font-weight:800 !important; letter-spacing:.01em !important}
.opr-ix-cab-meta{flex:1 1 auto !important; min-width:0 !important; display:flex !important; flex-direction:column !important; gap:2px !important}
.opr-ix-cab-meta b{font-size:1.0625rem !important; font-weight:700 !important; letter-spacing:-.018em !important; line-height:1.25 !important; text-wrap:balance !important}
.opr-ix-cab-meta i{font-size:.78125rem !important; font-weight:500 !important; color:var(--tenue) !important; font-variant-numeric:tabular-nums !important}
.opr-ix-chevron{flex:none !important; width:20px !important; height:20px !important; color:var(--tenue) !important;
  transition:transform .28s cubic-bezier(.32,.72,.16,1), color .16s ease !important}
.opr-ix-cab:hover .opr-ix-chevron{color:var(--tinta) !important}
.opr-ix-b.es-abierto .opr-ix-chevron{transform:rotate(180deg) !important; color:var(--tinta) !important}

/* --- despliegue: 0fr → 1fr, sin medir alturas a mano --- */
.opr-ix-caja{display:grid !important; grid-template-rows:0fr !important; transition:grid-template-rows .32s cubic-bezier(.32,.72,.16,1) !important}
.opr-ix-b.es-abierto .opr-ix-caja{grid-template-rows:1fr !important}
.opr-ix-lista{overflow:hidden !important; min-height:0 !important}
.opr-ix-b.es-abierto .opr-ix-lista{padding:0 18px 12px 22px !important}

/* --- una fila de tema --- */
.opr-ix-tema{display:flex !important; align-items:center !important; gap:13px !important; padding:11px 12px !important;
  border-radius:var(--radio-s) !important; border-top:1px solid var(--borde) !important;
  transition:background .14s ease, padding-left .14s ease !important}
.opr-ix-tema:first-child{border-top:0 !important}
.opr-ix-tema:hover{background:var(--p50) !important; padding-left:17px !important}
/* el número va en gris a propósito: 54 cifras de colores serían ruido, y el
   rojo del bloque X se confundiría con el rojo de «fallo». La identidad del
   bloque la llevan el galón y la barra lateral. */
.opr-ix-num{flex:none !important; min-width:26px !important; font-size:.8125rem !important; font-weight:800 !important; color:var(--tenue) !important;
  font-variant-numeric:tabular-nums !important}
.opr-ix-tit{flex:1 1 auto !important; font-size:.9375rem !important; font-weight:500 !important; line-height:1.4 !important;
  letter-spacing:-.008em !important; color:var(--tinta) !important; text-wrap:pretty !important}
.opr-ix-flecha{flex:none !important; width:16px !important; height:16px !important; color:var(--tinta) !important;
  opacity:0 !important; transform:translateX(-4px) !important; transition:opacity .14s ease, transform .14s ease !important}
.opr-ix-tema:hover .opr-ix-flecha{opacity:1 !important; transform:none !important}

/* --- aviso de acceso y candados --- */
.opr-ix-aviso{display:flex !important; align-items:center !important; gap:11px !important; padding:13px 16px !important; margin-bottom:14px !important;
  border-radius:var(--radio-s) !important; background:var(--av100) !important; box-shadow:inset 0 0 0 1px var(--av500) !important;
  font-size:.875rem !important; line-height:1.5 !important; color:var(--av900) !important; text-wrap:pretty !important}
.opr-ix-aviso a{font-weight:700 !important; color:var(--av900) !important; text-decoration:underline !important; text-underline-offset:3px !important}
.opr-ix-candado{flex:none !important; width:15px !important; height:15px !important; color:var(--tenue) !important}
.opr-ix-candado.es-bloque{width:17px !important; height:17px !important; margin-right:2px !important}
.opr-ix-b.es-bloqueado .opr-ix-galon{opacity:.62 !important}
.opr-ix-tema.es-cerrado .opr-ix-tit{color:var(--suave) !important}
.opr-ix-tema.es-cerrado:hover{background:var(--p50) !important; padding-left:12px !important}
.opr-ix-pronto{flex:none !important; font-size:.6875rem !important; font-weight:700 !important; letter-spacing:.01em !important;
  padding:3px 8px !important; border-radius:999px !important; background:var(--p100) !important; color:var(--tenue) !important}
.opr-ix-tema.es-pronto{cursor:default !important}
.opr-ix-tema.es-pronto:hover{background:none !important; padding-left:12px !important}
.opr-ix-tema.es-pronto .opr-ix-tit{color:var(--tenue) !important}
.opr-ix-libre{flex:none !important; font-size:.6875rem !important; font-weight:800 !important; letter-spacing:.01em !important;
  padding:3px 8px !important; border-radius:999px !important; background:var(--ok100) !important; color:var(--ok900) !important}

.opr-ix-marca{background:var(--av100) !important; color:var(--av900) !important; border-radius:3px !important; padding:0 2px !important; font-weight:700 !important}

.opr-ix-b.es-oculto{display:none !important}
.opr-ix-tema.es-oculto{display:none !important}
.opr-ix-vacio{margin-top:24px !important; text-align:center !important; font-size:.9375rem !important; color:var(--suave) !important}
.opr-ix-vacio b{font-weight:700 !important; color:var(--tinta) !important}

@media (max-width:560px){
  .opr-ix-barra{gap:9px !important; padding:12px 0 11px !important}
  .opr-ix-estado{flex:1 1 100% !important; justify-content:space-between !important; gap:10px !important}
  .opr-ix-cab{gap:12px !important; padding:14px 15px 14px 19px !important}
  .opr-ix-galon{min-width:40px !important; height:40px !important; font-size:.9375rem !important}
  .opr-ix-cab-meta b{font-size:.96875rem !important}
  .opr-ix-b.es-abierto .opr-ix-lista{padding:0 14px 11px 19px !important}
  .opr-ix-tema{gap:11px !important; padding:11px 9px !important}
  .opr-ix-tema:hover{padding-left:9px !important}
  .opr-ix-tit{font-size:.90625rem !important}
}