/* Estilos de cada pantalla: Inicio, Proyecto (con Revisor), Ajustes, Biblioteca y Piezas. */

/* ---------- Barra de herramientas (buscador, filtros, orden) ---------- */
.barra-herramientas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.buscador {
  flex: 1 1 260px; max-width: 360px; height: 40px; padding: 0 12px; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--mp-color-border-field); border-radius: var(--mp-radius-md); background: var(--mp-color-surface); color: var(--mp-color-text-secondary);
}
.buscador:focus-within { border-color: var(--mp-color-primary); box-shadow: 0 0 0 3px var(--mp-color-focus-ring); }
.buscador__input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 15px; color: var(--mp-color-text); }
.buscador__input:focus-visible { box-shadow: none; }
.filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.filtro {
  height: 32px; padding: 0 12px; border-radius: var(--mp-radius-full); border: 1px solid var(--mp-color-border);
  background: var(--mp-color-surface); color: var(--mp-color-text-secondary); font-size: 13.5px; font-weight: var(--mp-font-weight-medium);
  display: inline-flex; align-items: center; gap: 6px;
}
@media (hover: hover) { .filtro:hover { border-color: var(--mp-color-border-strong); color: var(--mp-color-text); } }
.filtro[aria-pressed="true"] { background: var(--mp-color-primary-soft); border-color: var(--mp-color-primary); color: var(--mp-color-primary-text); font-weight: var(--mp-font-weight-semibold); }
.filtro__numero { font-size: 12px; opacity: .8; }
.barra-herramientas__orden { margin-left: auto; }
@media (max-width: 767px) {
  .buscador { max-width: none; flex-basis: 100%; height: 48px; }
  .buscador__input { font-size: 16px; }
  .filtros { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .filtro { height: 40px; flex: none; }
  .barra-herramientas__orden { margin-left: 0; }
}

/* ---------- Inicio: rejilla de proyectos ---------- */
.rejilla-proyectos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
@media (min-width: 1200px) { .rejilla-proyectos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tarjeta-proyecto { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.tarjeta-proyecto__portada { position: relative; height: 172px; display: flex; align-items: center; justify-content: center; background: var(--mp-color-surface-sunken); border-bottom: 1px solid var(--mp-color-border); }
.tarjeta-proyecto__mas { position: absolute; top: 8px; right: 8px; background: var(--mp-color-surface); width: 32px; height: 32px; }
.tarjeta-proyecto__cuerpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tarjeta-proyecto__fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.etiqueta-idioma { font-size: 11.5px; color: var(--mp-color-text-secondary); border: 1px solid var(--mp-color-border); border-radius: var(--mp-radius-xs); padding: 1px 6px; }
.etiqueta-ejemplo { font-size: 11.5px; font-weight: var(--mp-font-weight-semibold); color: var(--mp-color-accent-text); background: var(--mp-color-accent-soft); border-radius: var(--mp-radius-xs); padding: 1px 6px; }
.tarjeta-proyecto__titulo { font-size: 16.5px; line-height: 1.25; font-weight: var(--mp-font-weight-semibold); letter-spacing: -0.015em; text-wrap: pretty; }
.tarjeta-proyecto__nicho { font-size: 13px; color: var(--mp-color-text-secondary); }
.tarjeta-proyecto__etapas { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.puntos-etapa { display: flex; gap: 5px; }
.punto-etapa { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--mp-color-border-field); }
.punto-etapa.is-hecha { background: var(--mp-color-success); border-color: var(--mp-color-success); }
.punto-etapa.is-curso { border-color: var(--mp-color-primary); background: linear-gradient(90deg, var(--mp-color-primary) 50%, transparent 50%); }
.punto-etapa.is-aviso { border-color: var(--mp-color-warning); background: var(--mp-color-warning); border-radius: 2px; transform: rotate(45deg) scale(.85); }
.tarjeta-proyecto__siguiente { font-size: 12px; color: var(--mp-color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta-proyecto__cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid var(--mp-color-border); padding-top: 10px; }
.cifra__etiqueta { font-size: 11.5px; color: var(--mp-color-text-secondary); }
.cifra__valor { font-size: 16px; font-weight: var(--mp-font-weight-medium); white-space: nowrap; }
.cifra__valor.is-negativo { color: var(--mp-color-error-text); }
.tarjeta-nueva {
  min-height: 360px; border: 1.5px dashed var(--mp-color-border-strong); border-radius: var(--mp-radius-lg); background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--mp-color-text-secondary); font-size: 14.5px; font-weight: var(--mp-font-weight-semibold);
}
@media (hover: hover) { .tarjeta-nueva:hover { border-color: var(--mp-color-primary); color: var(--mp-color-primary-text); background: var(--mp-color-primary-soft); } }
.tarjeta-nueva__circulo { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; }
.sin-resultados { grid-column: 1 / -1; color: var(--mp-color-text-secondary); padding: 24px 0; }

/* Móvil: una columna con la miniatura al lado. */
@media (max-width: 767px) {
  .rejilla-proyectos { grid-template-columns: 1fr; gap: 12px; }
  .tarjeta-proyecto { flex-direction: row; }
  .tarjeta-proyecto__portada { width: 104px; height: auto; flex: none; border-bottom: none; border-right: 1px solid var(--mp-color-border); padding: 12px 0; }
  .tarjeta-proyecto__portada .portada-mini { width: 64px; height: 92px; }
  .tarjeta-proyecto__mas { top: 4px; right: auto; left: 4px; }
  .tarjeta-proyecto__cuerpo { padding: 12px; gap: 8px; }
  .tarjeta-nueva { min-height: 72px; flex-direction: row; }
}

/* Miniatura de portada dibujada con el estilo del proyecto. */
.portada-mini {
  width: 96px; height: 136px; border-radius: 4px; box-shadow: var(--mp-shadow-2); overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; padding: 10px 8px;
  background: linear-gradient(160deg, var(--c1) 0 55%, var(--c2) 55% 100%); color: var(--c3);
}
.portada-mini img { width: 100%; height: 100%; object-fit: cover; margin: -10px -8px; width: calc(100% + 16px); height: calc(100% + 20px); max-width: none; }
.portada-mini__titulo { font-size: 11px; line-height: 1.15; font-weight: var(--mp-font-weight-bold); letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.portada-mini__autora { font-size: 8px; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.portada-mini--vacia { background: repeating-linear-gradient(135deg, var(--mp-color-border-strong) 0 5px, var(--mp-color-surface) 5px 10px); justify-content: flex-end; align-items: center; font-size: 10px; color: var(--mp-color-text-secondary); }

/* Estado vacío. */
.vacio {
  background: var(--mp-color-surface); border: 1px dashed var(--mp-color-border-strong); border-radius: var(--mp-radius-xl);
  padding: 72px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
}
.vacio__dibujo { display: grid; grid-template-columns: repeat(2, 28px); gap: 6px; }
.vacio__dibujo span { width: 28px; height: 28px; border-radius: 6px; background: var(--mp-color-primary-soft); border: 1.5px solid var(--mp-color-primary); }
.vacio__dibujo .vacio__circulo { border-radius: 50%; background: transparent; border: 1.5px dashed var(--mp-color-accent); }
.vacio__icono { color: var(--mp-color-primary-text); }
.vacio__titulo { font-size: var(--mp-font-size-2xl); font-weight: var(--mp-font-weight-semibold); letter-spacing: -0.02em; }
.vacio__texto { max-width: 460px; color: var(--mp-color-text-secondary); line-height: 1.55; }
.vacio__acciones { display: flex; gap: 10px; padding-top: 6px; flex-wrap: wrap; justify-content: center; }
.vacio__nota { font-size: 13px; color: var(--mp-color-text-tertiary); }
@media (max-width: 767px) { .vacio { padding: 40px 16px; } .vacio__acciones { flex-direction: column; width: 100%; } }

/* ---------- Proyecto ---------- */
.proyecto { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: calc(100vh - var(--mp-topbar-height)); }
.proyecto__principal { min-width: 0; display: flex; flex-direction: column; }
.cabecera-proyecto {
  background: var(--mp-color-surface); border-bottom: 1px solid var(--mp-color-border);
  padding: 20px var(--mp-space-8) 0; display: flex; flex-direction: column; gap: 18px;
}
.cabecera-proyecto__fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cabecera-proyecto__editar { display: flex; align-items: center; gap: 8px; padding: 2px 6px; margin-left: -6px; border: none; border-radius: var(--mp-radius-sm); background: none; color: var(--mp-color-text); text-align: left; min-width: 0; }
.cabecera-proyecto__editar .icono { color: var(--mp-color-text-tertiary); }
@media (hover: hover) { .cabecera-proyecto__editar:hover { background: var(--mp-color-surface-hover); } }
.cabecera-proyecto__titulo { font-size: var(--mp-font-size-2xl); line-height: var(--mp-line-height-2xl); font-weight: var(--mp-font-weight-semibold); letter-spacing: -0.02em; }
.etiqueta-borde { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 1px solid var(--mp-color-border); border-radius: var(--mp-radius-sm); font-size: 12.5px; color: var(--mp-color-text-secondary); white-space: nowrap; }
.cabecera-proyecto__estado { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: none; background: none; color: var(--mp-color-text-secondary); border-radius: var(--mp-radius-full); }
.cabecera-proyecto__guardado { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mp-color-text-tertiary); white-space: nowrap; }
.cabecera-proyecto__hueco { flex: 1; }
.boton-revisor.is-activo { border-color: var(--mp-color-primary); background: var(--mp-color-primary-soft); color: var(--mp-color-primary-text); }
.contador-revisor { font-size: 11.5px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--mp-radius-full); background: var(--mp-color-warning-soft); color: var(--mp-color-warning-text); display: inline-flex; align-items: center; justify-content: center; }
.contador-revisor.is-cero { background: var(--mp-color-success-soft); color: var(--mp-color-success-text); }
.proyecto__contenido { padding: var(--mp-space-8); max-width: var(--mp-content-max); width: 100%; }
.proyecto__tareas { display: flex; flex-direction: column; gap: 8px; padding: 16px var(--mp-space-8) 0; max-width: var(--mp-content-max); }
.proyecto__tareas:empty { display: none; }
@media (max-width: 767px) { .proyecto__tareas { padding: 12px 16px 0; } }
.barra-acciones-movil { display: none; }

@media (max-width: 1199px) { .cabecera-proyecto { padding: 16px var(--mp-space-6) 0; } .proyecto__contenido { padding: var(--mp-space-6); } }
@media (max-width: 767px) {
  .proyecto { grid-template-columns: minmax(0, 1fr); }
  .cabecera-proyecto { padding: 12px 16px 0; gap: 10px; }
  .cabecera-proyecto__fila { gap: 8px; }
  .cabecera-proyecto__titulo { font-size: var(--mp-font-size-lg); line-height: var(--mp-line-height-lg); }
  .cabecera-proyecto__editar { flex-basis: 100%; }
  .cabecera-proyecto__guardado, .cabecera-proyecto__hueco, .boton-revisor { display: none; }
  .proyecto__contenido { padding: 16px 16px 96px; }
  .barra-acciones-movil {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--mp-z-sticky);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--mp-color-surface); border-top: 1px solid var(--mp-color-border);
  }
  .barra-acciones-movil .btn { flex: 1; }
  .barra-acciones-movil__extra { display: contents; }
  .barra-acciones-movil__extra .btn-icono { width: 44px; height: 44px; flex: none; }
  .barra-acciones-movil__extra .btn { flex: 1 1 0; min-width: 0; padding: 0 10px; }
  .barra-acciones-movil__extra .btn__texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Con botones de la pantalla, el Revisor se queda en icono y número. */
  .barra-acciones-movil.con-extras .barra-acciones-movil__revisor { flex: none; padding: 0 12px; }
  .barra-acciones-movil.con-extras .barra-acciones-movil__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .barra-acciones-movil__pos { align-self: center; font-size: 13px; color: var(--mp-color-text-secondary); min-width: 36px; text-align: center; }
}

/* Próximamente */
.proximamente { background: var(--mp-color-surface); border: 1px solid var(--mp-color-border); border-radius: var(--mp-radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 20px; max-width: 880px; }
.proximamente__cabecera { display: flex; gap: 14px; align-items: flex-start; }
.proximamente__icono { width: 40px; height: 40px; flex: none; border-radius: var(--mp-radius-md); background: var(--mp-color-primary-soft); color: var(--mp-color-primary-text); display: flex; align-items: center; justify-content: center; }
.proximamente__titulo { font-size: var(--mp-font-size-xl); line-height: var(--mp-line-height-xl); font-weight: var(--mp-font-weight-semibold); margin-bottom: 4px; }
.resumen-datos { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 10px 20px; margin: 0; padding-top: 16px; border-top: 1px solid var(--mp-color-border); font-size: 14px; }
.resumen-datos dt { color: var(--mp-color-text-secondary); font-weight: var(--mp-font-weight-medium); }
.resumen-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 767px) { .proximamente { padding: 16px; } .resumen-datos { grid-template-columns: 1fr; gap: 2px; } .resumen-datos dd { margin-bottom: 10px; } }

/* ---------- Revisor ---------- */
.revisor { background: var(--mp-color-surface); border-left: 1px solid var(--mp-color-border); }
.revisor--escritorio.is-abierto { width: var(--mp-reviewer-width); }
.revisor--escritorio.is-plegado { width: var(--mp-reviewer-rail); }
.revisor--escritorio { position: sticky; top: var(--mp-topbar-height); height: calc(100vh - var(--mp-topbar-height)); overflow: auto; }
.revisor--tableta { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; z-index: var(--mp-z-modal); overflow: auto; box-shadow: var(--mp-shadow-3); animation: entrarDerecha var(--mp-duration-slow) var(--mp-ease-standard); }
.revisor--tableta.is-plegado, .revisor--movil { display: none; }
@keyframes entrarDerecha { from { transform: translateX(100%); } }
.revisor__fondo { position: fixed; inset: 0; z-index: var(--mp-z-overlay); background: var(--mp-color-overlay); }
.revisor__franja { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 16px; border: none; background: none; color: var(--mp-color-text-secondary); }
@media (hover: hover) { .revisor__franja:hover { color: var(--mp-color-text); background: var(--mp-color-surface-hover); } }
.revisor__vertical { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12.5px; font-weight: var(--mp-font-weight-semibold); letter-spacing: .04em; }
.revisor__cabecera { display: flex; align-items: center; gap: 8px; padding: 18px 16px 14px 20px; border-bottom: 1px solid var(--mp-color-border); }
.revisor__titulo { font-size: 16px; font-weight: var(--mp-font-weight-semibold); }
.revisor__cabecera .btn-icono { margin-left: auto; }
.revisor__cuerpo { padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.revisor__resumen { display: flex; gap: 6px; flex-wrap: wrap; }
.etiqueta-nivel { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--mp-radius-sm); font-size: 12px; font-weight: var(--mp-font-weight-semibold); }
.etiqueta-nivel--error { background: var(--mp-color-error-soft); color: var(--mp-color-error-text); }
.etiqueta-nivel--aviso { background: var(--mp-color-warning-soft); color: var(--mp-color-warning-text); }
.etiqueta-nivel--exito { background: var(--mp-color-success-soft); color: var(--mp-color-success-text); }
.revisor__lista { display: flex; flex-direction: column; gap: 12px; }
.alerta { border: 1px solid var(--mp-color-border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--mp-color-surface); }
.alerta__cabecera { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: var(--mp-font-weight-semibold); }
.alerta--error .alerta__cabecera { color: var(--mp-color-error-text); }
.alerta--aviso .alerta__cabecera { color: var(--mp-color-warning-text); }
.alerta__frase { margin: 0; font-size: 13.5px; line-height: 1.55; }
.alerta__categoria { font-size: 11.5px; color: var(--mp-color-text-tertiary); text-transform: uppercase; letter-spacing: .06em; }
.alerta__motivo { font-size: 12.5px; line-height: 1.45; color: var(--mp-color-text-secondary); }
.alerta__motivo b { color: var(--mp-color-text); font-weight: var(--mp-font-weight-semibold); }
.alerta__sugerencia { font-size: 12.5px; line-height: 1.45; background: var(--mp-color-surface-sunken); border-radius: var(--mp-radius-sm); padding: 8px 10px; }
.alerta__sugerencia span { color: var(--mp-color-text-secondary); }
.alerta__acciones { display: flex; justify-content: flex-end; gap: 6px; }
.hoja .alerta__acciones .btn { flex: 1; min-height: 44px; }
.revisor__vacio { display: flex; align-items: center; gap: 10px; color: var(--mp-color-success-text); font-size: 14px; }
.revisor__nota { font-size: 12px; line-height: 1.45; color: var(--mp-color-text-tertiary); border-top: 1px solid var(--mp-color-border); padding-top: 12px; }

/* ---------- Ajustes ---------- */
.ajustes { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.ajustes__menu { position: sticky; top: calc(var(--mp-topbar-height) + 24px); display: flex; flex-direction: column; gap: 2px; }
.ajustes__opcion { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: var(--mp-radius-md); color: var(--mp-color-text-secondary); font-size: 14px; font-weight: var(--mp-font-weight-medium); }
@media (hover: hover) { .ajustes__opcion:hover { background: var(--mp-color-surface-hover); color: var(--mp-color-text); text-decoration: none; } }
.ajustes__opcion[aria-current="page"] { background: var(--mp-color-primary-soft); color: var(--mp-color-primary-text); font-weight: var(--mp-font-weight-semibold); }
.ajustes__panel { background: var(--mp-color-surface); border: 1px solid var(--mp-color-border); border-radius: var(--mp-radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.ajustes__titulo { font-size: var(--mp-font-size-2xl); line-height: var(--mp-line-height-2xl); font-weight: var(--mp-font-weight-semibold); letter-spacing: -0.02em; }
.ajustes__guardado { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mp-color-text-tertiary); min-height: 18px; }
.bloque-ajustes { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--mp-color-border); }
.bloque-ajustes:first-of-type { border-top: none; padding-top: 0; }
.bloque-ajustes__titulo { font-size: 15px; font-weight: var(--mp-font-weight-semibold); }
.bloque-ajustes .pila-campos { margin-top: 6px; }
.resultado-prueba { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.nota-info { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--mp-radius-md); background: var(--mp-color-info-soft); color: var(--mp-color-text); font-size: 13.5px; line-height: 1.5; }
.nota-info > .icono { color: var(--mp-color-info-text); margin-top: 1px; }
.colores { display: flex; gap: 12px; flex-wrap: wrap; }
.color { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid var(--mp-color-border); border-radius: var(--mp-radius-md); cursor: pointer; font-size: 12.5px; }
.color__input { width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--mp-radius-sm); background: none; cursor: pointer; }
@media (max-width: 1199px) { .ajustes { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; } }
@media (max-width: 767px) {
  .ajustes { grid-template-columns: 1fr; gap: 16px; }
  .ajustes__menu { position: static; flex-direction: row; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .ajustes__opcion { flex: none; height: 44px; border: 1px solid var(--mp-color-border); }
  .ajustes__panel { padding: 16px; }
  .campo--corto { max-width: none; }
}

/* ---------- Biblioteca ---------- */
.lista-biblioteca { display: flex; flex-direction: column; gap: 10px; }
.elemento-biblioteca { padding: 0; }
.elemento-biblioteca__cabecera { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: none; background: none; text-align: left; color: var(--mp-color-text); border-radius: var(--mp-radius-lg); min-height: 52px; }
@media (hover: hover) { .elemento-biblioteca__cabecera:hover { background: var(--mp-color-surface-hover); } }
.elemento-biblioteca__titulos { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.elemento-biblioteca__titulo { font-weight: var(--mp-font-weight-semibold); }
.elemento-biblioteca__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.elemento-biblioteca__flecha { display: flex; color: var(--mp-color-text-secondary); transition: transform var(--mp-duration-base); }
.elemento-biblioteca.is-abierto .elemento-biblioteca__flecha { transform: rotate(180deg); }
.elemento-biblioteca__cuerpo { padding: 0 16px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.elemento-biblioteca__contenido { margin: 0; white-space: pre-wrap; font-family: var(--mp-font-sans); font-size: 14px; line-height: 1.55; background: var(--mp-color-surface-sunken); padding: 12px 14px; border-radius: var(--mp-radius-md); max-height: 360px; overflow: auto; }

/* Etapa 8: lista y ficha (como en el diseño), huecos resaltados y asignación de prompts */
.biblio { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 768px) { .biblio { grid-template-columns: minmax(240px, 1fr) minmax(0, 1.5fr); } }
.biblio__lista { display: flex; flex-direction: column; background: var(--mp-color-surface); border: 1px solid var(--mp-color-border); border-radius: var(--mp-radius-lg); overflow: hidden; }
.biblio__fila { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: none; border-top: 1px solid var(--mp-color-border); background: none; text-align: left; color: var(--mp-color-text); min-height: 44px; min-width: 0; }
.biblio__fila:first-child { border-top: none; }
.biblio__fila[aria-current="true"] { background: var(--mp-color-primary-soft); box-shadow: inset 3px 0 0 var(--mp-color-primary); }
@media (hover: hover) { .biblio__fila:hover { background: var(--mp-color-surface-hover); } }
.biblio__fila:focus-visible { outline: none; box-shadow: var(--mp-shadow-focus); }
.biblio__extracto { font-size: 12.5px; color: var(--mp-color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biblio__detalle { position: sticky; top: calc(var(--mp-topbar-height) + 16px); min-width: 0; }
.biblio__ficha { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.biblio__bloque { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.biblio__cabecera { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.biblio__titulo { font-size: 17px; font-weight: var(--mp-font-weight-semibold); margin: 0; }
.biblio__subtitulo { font-size: 15px; font-weight: var(--mp-font-weight-semibold); margin: 0; }
.biblio__ficha .elemento-biblioteca__contenido { font-family: var(--mp-font-mono); font-size: 13.5px; line-height: 1.7; border: 1px solid var(--mp-color-border); }
.variable { font-family: var(--mp-font-mono); color: var(--mp-color-accent-text); background: var(--mp-color-accent-soft); border-radius: 4px; padding: 0 3px; margin-right: 6px; }
pre .variable { margin-right: 0; }
.texto-aviso { color: var(--mp-color-warning-text); font-size: var(--mp-font-size-sm); }

.asignaciones { display: flex; flex-direction: column; }
.asignacion { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 10px 0; border-top: 1px solid var(--mp-color-border); align-items: center; }
@media (min-width: 768px) { .asignacion { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 12px; } }
.asignacion__accion { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.asignacion__nombre { font-size: 14px; font-weight: var(--mp-font-weight-medium); }
.asignacion__nota { font-size: 12px; }
.asignacion__selector .campo__cabecera { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.asignacion__modo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.asignacion__modo .segmentado.is-inactivo { opacity: .5; pointer-events: none; }
.asignacion__modo .btn[hidden] { display: none; }

/* ---------- Piezas de diseño ---------- */
.piezas__seccion { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--mp-color-border); }
.piezas__titulo { font-size: 13px; font-weight: var(--mp-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--mp-letter-spacing-label); color: var(--mp-color-text-secondary); }
.piezas__fila { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.piezas__fila > .campo, .piezas__fila > .selector { width: 260px; }
.piezas__fila > .tarjeta { width: 220px; }
.piezas__ancho { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.piezas__zona:empty { display: none; }
.piezas__resultado { margin: 0; font-size: 12px; white-space: pre-wrap; color: var(--mp-color-text-secondary); max-height: 200px; overflow: auto; }
.piezas__resultado:empty { display: none; }
@media (max-width: 767px) { .piezas__fila > .campo, .piezas__fila > .selector, .piezas__fila > .tarjeta { width: 100%; } }