/* ============================================================
   custom.css — Estilos puntuales para LogicFaith.
   Tailwind cubre el 99% del estilado vía CDN. Aquí van sólo:
     - tipografías y refinamientos del interlineal griego
     - utilidades pequeñas no incluidas por Tailwind base
   ============================================================ */

/* =====================================================================
   Tipografía para texto griego politónico (interlineal)
   ---------------------------------------------------------------------
   El griego del NT usa diacríticos densos (spiritus, agudo/grave/
   circunflejo, iota suscrita, diéresis). Estas reglas optimizan el
   ensamblaje de marcas sobre la base y la legibilidad general.
   ===================================================================== */

/* =====================================================================
   Variable global: única fuente para TODO el griego bíblico del sistema
   (interlineal, sintáctica, capas analíticas, tooltips).
   
   Decisión tipográfica: usamos la MISMA stack sans-serif del sistema
   que utiliza el "Árbol de Relaciones" del Análisis Sintáctico (que
   no tiene font-family override y por lo tanto hereda la sans-serif
   default del body — Tailwind/system). Esto garantiza una identidad
   tipográfica COMPLETAMENTE UNIFORME entre el interlineal y el árbol
   sintáctico, eliminando la disonancia visual entre las dos vistas.
   
   En Windows resuelve a Segoe UI (excelente soporte de griego
   politónico con acentos crisp); en macOS a SF Pro / Helvetica Neue;
   en Linux a Cantarell / DejaVu Sans. Cambiar la fuente en un único
   lugar la propaga al sistema entero vía `var(--font-greek)`.
   ===================================================================== */
:root {
    --font-greek: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "Helvetica Neue", "Noto Sans", Arial, sans-serif;
    /* Interlineal / lectura continua — Literata (no tocar desde lectura del lienzo). */
    --font-biblia: Literata, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* Contenedor general que actúa de "lienzo" para los acentos.
   Cualquier elemento padre que envuelva tokens griegos heredará los
   ajustes finos del navegador. */
#contenedor-versiculo,
.palabra-griego {
    font-variant-numeric: lining-nums;
    text-rendering: optimizeLegibility;
    -webkit-font-feature-settings: "kern", "liga", "calt";
            font-feature-settings: "kern", "liga", "calt";
    -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
}

/* Clase específica para los tokens griegos del interlineal. */
.palabra-griego {
    font-family: var(--font-greek);
    font-size: 1.15rem;
    line-height: 1.55;          /* aire suficiente para los acentos altos */
    letter-spacing: 0.005em;
    font-style: normal;
    font-weight: 500;
}

/* Compatibilidad: la antigua utilidad .font-serif sigue disponible
   con los mismos ajustes politónicos por si algún template la usa. */
.font-serif {
    font-family: var(--font-greek);
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    text-rendering: optimizeLegibility;
}

/* Limita la cantidad de líneas mostradas (fallback si no hay
   plugin de line-clamp en Tailwind CDN). */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Scrollbar discreta en el lienzo. */
#lienzo::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
#lienzo::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.25);
    border-radius: 9999px;
}
#lienzo::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.45);
}

/* =====================================================================
   Lienzo infinito (viewport + mundo transformable)
   ===================================================================== */

/* Cursores explícitos */
.cursor-grab    { cursor: grab; }
.cursor-grabbing{ cursor: grabbing; }

/* El viewport recorta el mundo y permite paneo (no scroll del browser). */
#lienzo {
    overflow: hidden;
    position: relative;
    touch-action: none;          /* habilita pan/zoom propios sin scroll nativo */
}
#lienzo.is-panning { cursor: grabbing; }

/* El "mundo" es el plano infinito sobre el que se aplica la matriz de
   transformación (translate + scale). Las tarjetas y el SVG viven dentro. */
#lienzo-mundo {
    position: absolute;
    inset: 0;
    transform-origin: 0 0;
    will-change: transform;
    z-index: 1;
}

/* El SVG ocupa una superficie amplia y NUNCA roba eventos del drag. */
#lienzo-svg {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
#lienzo-svg, #lienzo-svg * {
    pointer-events: none;
}
/* EXCEPCIONES: los elementos interactivos del drag-to-reconnect SÍ
   reciben eventos del puntero. El resto del SVG sigue siendo
   "transparente" al drag/pan del lienzo. */
#lienzo-svg .flecha-hit,
#lienzo-svg .manejador-cable {
    pointer-events: stroke;
    cursor: grab;
}
#lienzo-svg .manejador-cable {
    pointer-events: all;
    fill: #6366f1;
    stroke: #ffffff;
    stroke-width: 2;
    opacity: 0;
    transition: opacity 120ms ease, r 120ms ease;
}
/* El manejador aparece cuando el puntero toca cualquier parte
   interactiva del grupo .conexion al que pertenece. */
#lienzo-svg .conexion:hover .manejador-cable,
#lienzo-svg .manejador-cable:hover {
    opacity: 1;
}
/* Resaltar sutilmente el visual cuando el grupo está hovered. */
#lienzo-svg .conexion:hover .flecha-parental {
    stroke: #475569;
    stroke-width: 2.5;
}
#lienzo-svg .manejador-cable:hover {
    cursor: grabbing;
}
/* Path fantasma punteado que sigue al puntero durante el gesto. */
#lienzo-svg .flecha-fantasma {
    opacity: 0.85;
    pointer-events: none;
}

/* Card en estado "desprendimiento" (origen del drag). */
.nodo-en-desprendimiento {
    transition: opacity 120ms ease;
}
/* Cards bajo el puntero mientras se arrastra el cable. */
[data-card-id].drop-valido {
    outline: 2px solid #10b981;     /* emerald-500 */
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18) !important;
}
[data-card-id].drop-invalido {
    outline: 2px dashed #ef4444;    /* red-500 */
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15) !important;
    cursor: not-allowed;
}
/* Flash rojo cuando se intenta drop sobre un destino inválido. */
@keyframes drop-rechazo-flash {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    100% { box-shadow: 0 0 0 16px rgba(239, 68, 68, 0); }
}
[data-card-id].drop-rechazo-flash {
    animation: drop-rechazo-flash 700ms ease-out;
}

/* =====================================================================
   Linaje estructural — Cadena Rota vs Reparación
   =====================================================================
   Cuando el linaje de un nodo deja de coincidir con el snapshot
   tomado durante su última auditoría, marcamos la card con un borde
   ámbar PERSISTENTE (no transitorio como .nodo-desactualizado) y un
   badge inferior "⚠ Cadena Rota". Se quita solo si el usuario revierte
   el movimiento o si re-audita el nodo.

   IMPORTANTE: ni esta clase ni el badge ni el banner del panel tocan
   el contenido textual de las auditorías. Son sólo capas visuales. */
@keyframes cadena-rota-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(220, 38, 38, 0.55),
                       0 0 0 3px rgba(217, 119, 6, 0.30); }
    50%  { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.00),
                       0 0 0 3px rgba(217, 119, 6, 0.60); }
    100% { box-shadow: 0 0 0 0   rgba(220, 38, 38, 0.55),
                       0 0 0 3px rgba(217, 119, 6, 0.30); }
}
.nodo-cadena-rota {
    border-color: #dc2626 !important;   /* red-600 — más urgente que ámbar */
    border-width: 3px !important;
    animation: cadena-rota-pulse 1.6s ease-in-out infinite;
}
.badge-cadena-rota {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 9999px;
    background: #d97706;
    color: #ffffff;
    border: 1px solid #b45309;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.18);
    pointer-events: none;
    white-space: nowrap;
}

/* Banner no-destructivo dentro de #auditoria-body cuando la
   auditoría visible corresponde a un nodo con linaje roto. Se
   PREPENDE al body; el dictamen permanece intacto debajo. */
.banner-advertencia-contexto {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px 0;
    padding: 10px 12px;
    background: #fffbeb;             /* amber-50 */
    border: 1px solid #fcd34d;       /* amber-300 */
    border-left: 4px solid #d97706;  /* amber-600 */
    border-radius: 8px;
    color: #78350f;                  /* amber-900 */
    font-size: 12.5px;
    line-height: 1.45;
}
.banner-advertencia-contexto__icono {
    font-size: 18px;
    line-height: 1;
    flex: 0 0 18px;
    color: #b45309;
}
.banner-advertencia-contexto__texto strong {
    color: #92400e;
    font-weight: 700;
}
.banner-advertencia-contexto__texto em {
    font-style: italic;
    color: #92400e;
}
.banner-advertencia-contexto__ruta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 4px 0 8px 0;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.3;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.banner-advertencia-contexto__ruta--orig {
    background: rgba(217, 119, 6, 0.10);
    border: 1px dashed #d97706;
    color: #78350f;
}
.banner-advertencia-contexto__ruta--actual {
    background: rgba(16, 185, 129, 0.10);
    border: 1px dashed #047857;
    color: #064e3b;
}
.banner-advertencia-contexto .linaje-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    background: #ffffff;
    border: 1px solid currentColor;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 11.5px;
}
.banner-advertencia-contexto .linaje-flecha {
    color: currentColor;
    font-size: 13px;
    opacity: 0.7;
    margin: 0 1px;
    user-select: none;
}

/* =====================================================================
   Camino de luces — iluminación del linaje hacia ancestros
   =====================================================================
   Al seleccionar un nodo (click sobre la card o sobre el botón de
   auditar), todas las flechas SVG del camino ascendente hasta la
   raíz cambian a índigo eléctrico para señalar el flujo argumental
   activo. La transición es corta (200ms) para que el cambio se
   perciba como respuesta inmediata sin parecer animación gratuita. */
#lienzo-svg .flecha-linaje-activa {
    stroke: #10b981 !important;       /* emerald-500 */
    stroke-width: 3 !important;
    transition: stroke 0.2s, stroke-width 0.2s;
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.6));
}
#lienzo-svg .conexion.conexion-linaje-activa .manejador-cable {
    fill: #10b981;
    opacity: 0.6;
}

/* Controles flotantes de zoom (esquina inferior derecha del viewport). */
.zoom-controles {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 20;
}
.zoom-controles button {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(15, 23, 42, 0.15);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 120ms ease;
}
.zoom-controles button:hover { background: #fff; }
.zoom-controles .zoom-label {
    width: 32px;
    text-align: center;
    font-size: 10px;
    color: #475569;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

/* =====================================================================
   Tarjetas de nodo (estilo XMind compacto)
   ===================================================================== */

/* Dimensiones compactas: sin reservar espacio para iconos inline. */
#lienzo [data-card-id] {
    min-width: 108px;
    max-width: 168px;
    width: 168px;
    transition: box-shadow 120ms ease, transform 120ms ease;
}
#lienzo [data-card-id]:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
#lienzo [data-card-id]:active {
    transform: scale(1.005);
}

/* Cuerpo del argumento: tipografía sans-serif del sistema (estilo
   "app moderna" tipo Cursor/Linear/Notion), compacta y legible.
   Resetea text-indent/margin para que NO haya sangría en la primera
   línea ni espacios fantasma arriba/abajo. */
.card-body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial,
                 "Noto Sans", sans-serif;
    font-size: 0.78rem;       /* ~text-xs+ */
    line-height: 1.35;
    letter-spacing: 0;
    text-indent: 0;           /* mata cualquier sangría heredada */
    text-align: left;
    margin: 0;
    padding: 4px 10px;        /* compacto: 4 px vertical, 10 px lateral */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
}
/* Cualquier descendiente (p, span, div) hereda el reset. */
.card-body, .card-body * {
    text-indent: 0;
    margin: 0;
}

/* =====================================================================
   Botones de acción (editar / borrar) — visibles SOLO en hover
   ===================================================================== */
.btn-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    line-height: 1;
    font-size: 11px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.22);
    opacity: 0;
    transition: opacity 0.2s ease, background-color 120ms ease,
                transform 80ms ease;
}
/* Aparecen cuando el mouse pasa por encima de la propia tarjeta,
   o cuando el botón gana foco (accesibilidad por teclado). */
#lienzo [data-card-id]:hover .btn-card,
#lienzo [data-card-id]:focus-within .btn-card,
.btn-card:focus {
    opacity: 1;
}
.btn-card:hover { background-color: rgba(255, 255, 255, 0.5); }
.btn-card:active { transform: scale(0.9); }

/* =====================================================================
   Botón flotante "Auditar Consistencia Lógica" (asoma debajo de la card)
   ===================================================================== */
.btn-auditar-flotante {
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translate(-50%, 6px);
    padding: 3px 10px;
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 9999px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 5;
}
#lienzo [data-card-id]:hover .btn-auditar-flotante,
#lienzo [data-card-id]:focus-within .btn-auditar-flotante {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}
.btn-auditar-flotante:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.35);
}
.btn-auditar-flotante:active { transform: translate(-50%, 1px) scale(0.98); }

/* =====================================================================
   Sidebar lateral derecho — Informe de Auditoría Lógica
   ===================================================================== */
.auditoria-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 92vw;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    z-index: 30;
}
.auditoria-sidebar.is-open { transform: translateX(0); }

/* Modo MAXIMIZADO: el panel ocupa TODA la pantalla (no solo el lienzo).
   Equivale a las clases Tailwind `fixed inset-0 z-50 w-full h-full`.
   Permite lecturas teológicas extensas sin distracción periférica.
   Anula el transform/right del is-open base reseteando explícitamente. */
.auditoria-sidebar.is-maximized {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    transform: none !important;
    z-index: 50;
    box-shadow: none;
    border-left: none;
    border-radius: 0;
}
/* Lock para evitar scroll del body cuando el panel está fullscreen. */
body.auditoria-maximizada-lock {
    overflow: hidden;
}
/* El body del panel maximizado ya no tiene max-width:900px global —
   eso impedía que el split usara toda la viewport. Ahora el wrapper
   `.dictamen` se autocentra en modo NO-split (980px máx), y en split
   los panes usan todo el ancho disponible. */
.auditoria-sidebar.is-maximized .auditoria-informe {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.auditoria-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
}
.auditoria-header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #1e293b;
    text-transform: uppercase;
    flex-shrink: 0;
}
/* Doble Espejo compacto en header (panel lateral, no maximizado) */
.auditoria-header-espejo {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-left: auto;
    margin-right: 2px;
    background: #eef2f7;
    border: 1px solid #d6dde7;
    border-radius: 999px;
    padding: 2px;
    flex-shrink: 0;
}
.auditoria-sidebar.is-maximized .auditoria-header-espejo {
    display: none;
}
.auditoria-header-espejo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 26px;
    padding: 3px 6px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    line-height: 1;
}
.auditoria-header-espejo-btn:hover {
    color: #1e293b;
}
.auditoria-header-espejo-btn.is-activo {
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08),
                0 0 0 1px rgba(15, 23, 42, 0.05);
}
#auditoria-espejo-academico-header.is-activo .auditoria-espejo-icon {
    filter: none;
}
#auditoria-espejo-pastoral-header.is-activo .auditoria-espejo-icon {
    filter: none;
}
.auditoria-header-espejo-btn .auditoria-espejo-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.auditoria-header-acciones {
    display: flex;
    align-items: center;
    gap: 4px;
}
.auditoria-btn-icon {
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 5px;
    line-height: 1;
    font-size: 18px;
    transition: background-color 120ms ease, color 120ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.auditoria-btn-icon:hover  { color: #1e293b; background: rgba(15, 23, 42, 0.05); }
.auditoria-btn-icon:active { background: rgba(15, 23, 42, 0.08); }
.auditoria-btn-icon.is-feedback {
    color: #15803d;             /* verde 700 al confirmar éxito */
    background: rgba(16, 185, 129, 0.12);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
}
.auditoria-btn-icon.is-feedback.is-error {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.12);
}

.auditoria-meta {
    padding: 8px 14px;
    font-size: 11.5px;
    color: #475569;
    border-bottom: 1px dashed #e2e8f0;
    background: #f8fafc;
}
.auditoria-meta code {
    background: #e2e8f0;
    padding: 1px 4px;
    border-radius: 3px;
    font-family: ui-monospace, "Cascadia Code", "Fira Code", Consolas, monospace;
    font-size: 10.5px;
}
.auditoria-meta-principal { font-size: 12px; color: #1e293b; }
.auditoria-meta-secundaria { margin-top: 4px; color: #475569; }
.auditoria-meta-terciaria  { margin-top: 2px; color: #94a3b8; font-size: 11px; }

/* ---- HISTORIAL de auditorías por nodo — versión compacta (<select>) ----
   Reemplaza la lista vertical anterior. Optimiza el espacio del panel
   y permite conmutar instantáneamente entre informes sin scroll. */
.auditoria-historial-compacta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.auditoria-historial-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
.auditoria-historial-conteo {
    font-size: 10px;
    font-weight: 600;
    color: #475569;
    background: #e2e8f0;
    padding: 1px 6px;
    border-radius: 8px;
}
.auditoria-historial-select {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: #1e293b;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.24 4.38a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 5px 26px 5px 8px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 100ms ease, box-shadow 100ms ease;
}
.auditoria-historial-select:hover {
    border-color: #94a3b8;
}
.auditoria-historial-select:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}

/* ====================================================================
   Botón papelera al lado de los selectores de historial
   (análisis exegéticos y auditorías). Aspecto neutro por defecto;
   hover en rojo para señalar acción destructiva.
   ==================================================================== */
.historial-btn-eliminar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    transition: color 100ms ease, background 100ms ease,
                border-color 100ms ease;
}
.historial-btn-eliminar:hover {
    color: #b91c1c;          /* red-700 */
    background: #fef2f2;     /* red-50 */
    border-color: #fca5a5;   /* red-300 */
}
.historial-btn-eliminar:active {
    background: #fee2e2;
}
.historial-btn-eliminar:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.20);
}

/* Wrapper del historial del panel exegético: convierte el <select>
   solo en una fila flex que también contiene el botón eliminar. */
.exegetico-historial-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 0 1 auto;
}
.exegetico-historial-wrap .exegetico-historial {
    flex: 1 1 auto;
    min-width: 160px;
}

/* ---- Bloque NUEVA AUDITORÍA (selector IA + botón) -------------------- */
.auditoria-nueva {
    padding: 8px 14px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.auditoria-nueva-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    background: #059669;          /* emerald-600 */
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, transform 60ms ease;
    align-self: stretch;
}
.auditoria-nueva-btn:hover:not(:disabled) {
    background: #047857;          /* emerald-700 */
}
.auditoria-nueva-btn:active:not(:disabled) {
    transform: scale(0.98);
}
.auditoria-nueva-btn:disabled {
    background: #cbd5e1;          /* slate-300 */
    cursor: not-allowed;
    opacity: 0.7;
}

/* ---- Selector de modelos en la cabecera (estilo Cursor) -------------- */
.auditoria-modelo-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fafafa;
    border-bottom: 1px solid #e2e8f0;
}
.auditoria-modelo-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    font-weight: 600;
    flex-shrink: 0;
}
.auditoria-modelo-select {
    flex: 1;
    min-width: 0;
    padding: 6px 28px 6px 10px;
    font-size: 12px;
    font-weight: 500;
    color: #1e293b;
    background-color: #fff;
    background-image:
        url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20' stroke='%2364748b' stroke-width='1.5'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.auditoria-modelo-select:hover  { border-color: #94a3b8; }
.auditoria-modelo-select:focus  {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.auditoria-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    font-size: 12.5px;
    color: #1e293b;
    line-height: 1.5;
}
.auditoria-vacio {
    color: #94a3b8;
    font-style: italic;
    text-align: center;
    margin-top: 24px;
}
.auditoria-informe {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: ui-monospace, "Cascadia Code", "Fira Code", Consolas, monospace;
    font-size: 11.5px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px;
    color: #0f172a;
}
.auditoria-error {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 10px;
    border-radius: 6px;
    font-size: 12px;
}
.auditoria-cargando {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #475569;
    font-size: 12px;
    padding: 16px 4px;
}
.spinner {
    width: 14px;
    height: 14px;
    border: 2px solid #cbd5e1;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ===================================================================
   Pestañas del lienzo (Mapa Conceptual / Análisis Exegético)
   =================================================================== */

.pestanas-barra {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0;
    padding: 4px 0 0;
}
.pestana {
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    margin-bottom: -1px;
    transition: color 120ms ease, background-color 120ms ease,
                border-color 120ms ease, opacity 120ms ease;
}
.pestana--imagen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    min-width: 0;
    background: #f8fafc;
    border: 2px solid transparent;
    position: relative;
    z-index: 0;
}
.pestana--imagen:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.pestana--imagen.is-activa {
    background: #fde047;
    border: 2px solid #ca8a04;
    border-bottom-color: #fde047;
    z-index: 2;
    box-shadow: 0 0 0 1px rgba(202, 138, 4, 0.2);
}
.pestana-img {
    display: block;
    height: 99px;
    width: auto;
    max-width: 378px;
    object-fit: contain;
    object-position: center bottom;
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
    /* El blanco del PNG se funde con el fondo de la pestaña */
    mix-blend-mode: multiply;
    opacity: 0.78;
    transition: opacity 120ms ease;
}
.pestana--imagen:hover .pestana-img {
    opacity: 0.94;
}
.pestana--imagen.is-activa .pestana-img {
    opacity: 1;
    mix-blend-mode: normal;
}
.pestana-fallback {
    font-size: 12px;
    line-height: 1.2;
    max-width: 9rem;
    text-align: center;
}
.pestana:hover {
    color: #1e293b;
    background: #f1f5f9;
}
.pestana.is-activa {
    color: #1e293b;
    font-weight: 600;
    cursor: default;
}
.pestana--imagen.is-activa {
    color: #1e293b;
    background: #fde047;
    cursor: default;
}
.pestana--imagen.pestana--ventana-aparte::after {
    content: "⧉";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    color: #475569;
    pointer-events: none;
    z-index: 4;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.9);
}
.pestana.flex {
    display: inline-flex;
    align-items: center;
}
.pestana:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}

/* El atributo HTML 'hidden' debe ocultar de verdad incluso si la clase
   .panel-pestana usa display:flex. */
.panel-pestana[hidden] { display: none !important; }

/* Barra única del panel mapa: leyenda | ayuda | acciones */
.lienzo-mapa-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.lienzo-mapa-toolbar-centro--oculto {
    display: none !important;
}
.lienzo-mapa-toolbar-der {
    justify-self: end;
    grid-column: 2;
}
.lienzo-mapa-toolbar-izq {
    justify-self: start;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    min-width: 0;
}
.lienzo-mapa-toolbar-centro {
    justify-self: center;
    margin: 0;
    text-align: center;
    white-space: nowrap;
}
.lienzo-mapa-toolbar-der {
    justify-self: end;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

/* Altura uniforme (referencia: botón Compañero de estudio, icono 23px + py-1) */
.lienzo-mapa-toolbar-der > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    width: auto;
    max-width: none;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    white-space: nowrap;
    box-sizing: border-box;
}

.lienzo-mapa-toolbar-der .lienzo-select-layout-wrap {
    display: inline-flex;
    align-items: stretch;
    min-height: 31px;
}

.lienzo-mapa-toolbar-der #select-layout {
    height: 31px;
    width: auto;
    min-width: 9.5rem;
    max-width: none;
    padding-right: 1.75rem;
    min-height: 31px;
    box-sizing: border-box;
    line-height: 1.2;
}

.lienzo-select-layout-wrap {
    position: relative;
}

.lienzo-select-layout-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 23px;
    height: 23px;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
}

.lienzo-toolbar-auditoria-icon {
    display: block;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}


/* ===================================================================
   Panel del Análisis Exegético e Interlineal
   =================================================================== */

.exegetico-controles {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;             /* el toggle puede saltar de línea */
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.exegetico-controles-analisis-extra {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}

.exegetico-pasaje-slot {
    flex: 1 1 12rem;
    min-width: 0;
    display: flex;
}

.exegetico-pasaje-slot .exegetico-input {
    width: 100%;
}

/* Barra ocre — Lectura interlineal (debajo de sub-pestañas negras) */
.exegetico-barra-lectura {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
    background: #d4b483;
    border-bottom: 1px solid #b8956a;
    padding: 8px 12px;
    margin: 0;
}

.exegetico-barra-lectura[hidden] {
    display: none !important;
}

.exegetico-barra-lectura .exegetico-input {
    background: #faf6ef;
    border-color: #a88858;
}

.exegetico-barra-lectura .exegetico-input:focus {
    border-color: #7a5f32;
    box-shadow: 0 0 0 3px rgba(122, 95, 50, 0.18);
}

.exegetico-barra-lectura .exegetico-lectura-nav-cap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 0;
    line-height: 0;
    color: #ffffff;
    background: #1a1a1a;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.exegetico-lectura-nav-icon {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    pointer-events: none;
}

.exegetico-barra-lectura .exegetico-lectura-nav-cap:hover:not(:disabled) {
    color: #ffffff;
    background: #000000;
}

.exegetico-barra-lectura .exegetico-lectura-nav-cap:disabled {
    opacity: 0.35;
    cursor: default;
    background: #1a1a1a;
}

.exegetico-barra-lectura .exegetico-lectura-nav-cap:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

.exegetico-lectura-ref-label {
    flex: 1 1 auto;
    min-width: 0;
    font-family: system-ui, sans-serif;
    font-size: 12px;
    color: #3d3020;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exegetico-barra-lectura .exegetico-eje-toggle {
    margin-left: auto;
}

.exegetico-controles .exegetico-eje-toggle {
    margin-left: auto;
}

.lienzo-subpanel.modo-lectura-interlineal .lienzo-subpanel-cuerpo {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    gap: 0;
    padding: 6px 10px 8px;
}
.exegetico-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.exegetico-input:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
.exegetico-btn-analizar {
    background: linear-gradient(135deg, #10b981, #0d9488);
    color: white;
    border: none;
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 120ms ease, transform 80ms ease;
}
.exegetico-btn-analizar:hover { filter: brightness(1.08); }
.exegetico-btn-analizar:active { transform: scale(0.98); }
.exegetico-btn-analizar:disabled {
    background: #94a3b8;
    cursor: wait;
}

/* Mientras el pipeline IA está en vuelo («Analizando…»). */
#panel-exegetico.is-analizando {
    cursor: wait;
}
#panel-exegetico.is-analizando * {
    cursor: wait;
}
.exegetico-meta {
    font-size: 11px;
    color: #64748b;
    margin-left: auto;
    white-space: nowrap;
}
.exegetico-btn-prompt {
    margin-left: 8px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #1e40af;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.exegetico-btn-prompt:hover {
    background: #dbeafe;
}
.exegetico-prompt-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(15, 23, 42, 0.55);
}
.exegetico-prompt-modal[hidden] {
    display: none !important;
}
.exegetico-prompt-dialog {
    width: min(960px, 100%);
    max-height: min(88vh, 900px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    border: 1px solid #cbd5e1;
}
.exegetico-prompt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
}
.exegetico-prompt-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}
.exegetico-prompt-acciones {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.exegetico-prompt-acciones button,
.exegetico-prompt-acciones a {
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    text-decoration: none;
    cursor: pointer;
}
.exegetico-prompt-acciones a:hover,
.exegetico-prompt-acciones button:hover {
    background: #f1f5f9;
}
.exegetico-prompt-cuerpo {
    margin: 0;
    padding: 14px 16px 18px;
    overflow: auto;
    font-family: Consolas, "Courier New", ui-monospace, monospace;
    font-size: 11px;
    line-height: 1.45;
    color: #0f172a;
    white-space: pre-wrap;
    word-break: break-word;
    background: #f8fafc;
}

/* Selector de modelo IA (dropdown nativo estilizado) — reemplaza al
   badge estático. El usuario puede conmutar de proveedor en caliente.
   Estilo sutil tipo "pill" con caret SVG embebido. */
.exegetico-motor-selector,
.exegetico-historial {
    appearance: none;
    -webkit-appearance: none;
    background-color: #f8fafc;       /* slate-50 */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px 10px;
    border: 1px solid #e2e8f0;       /* slate-200 */
    border-radius: 6px;
    padding: 5px 26px 5px 10px;
    font-size: 12px;
    font-weight: 500;
    color: #334155;                  /* slate-700 */
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 100ms ease, background-color 100ms ease,
                box-shadow 100ms ease;
    max-width: 220px;
}
.exegetico-motor-selector:hover,
.exegetico-historial:hover {
    border-color: #cbd5e1;           /* slate-300 */
    background-color: #ffffff;
}
.exegetico-motor-selector:focus,
.exegetico-historial:focus {
    outline: none;
    border-color: #10b981;           /* emerald-500 */
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.exegetico-historial {
    max-width: 240px;
    color: #475569;                  /* slate-600 — más tenue, es secundario */
}
.exegetico-historial option {
    color: #1e293b;
}
.exegetico-historial option:disabled {
    color: #94a3b8;
}


/* Celdas técnicas Strong / Louw-Nida (modo académico del motor relacional) */
.palabra-strong-codigo,
.palabra-ln-codigo {
    font-size: 10px;
    color: #64748b;
    line-height: 1.15;
    margin-top: 2px;
    white-space: nowrap;
    max-width: 8em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.palabra-ln-codigo {
    font-size: 9px;
    color: #94a3b8;
}

.palabra-sdbh-codigo {
    font-size: 9px;
    color: #94a3b8;
    line-height: 1.15;
    margin-top: 2px;
    white-space: nowrap;
    max-width: 8em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.palabra-celda-tecnica[hidden] {
    display: none !important;
}


/* ===================================================================
   Análisis semántico — prosa estructurada (no tabla).
   =================================================================== */

.semantica-prosa {
    font-size: 13px;
    line-height: 1.65;
    color: #1e293b;                   /* slate-800 */
    white-space: pre-wrap;
    padding: 10px 14px;
    background: #fffbeb;              /* amber-50 sutil para distinguirlo */
    border-left: 3px solid #fbbf24;   /* amber-400 */
    border-radius: 4px;
}
.semantica-vacio {
    font-style: italic;
    color: #94a3b8;
    padding: 8px 12px;
}


/* ===================================================================
   Análisis sintáctico — estructura_oracion + arbol_relaciones.
   Usamos sangrías jerárquicas (pl-0 → pl-4 → pl-8) para evidenciar
   la dependencia entre sujeto → verbo → objeto.
   =================================================================== */

.sintactica-bloque {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}
.sintactica-estructura {
    background: #eff6ff;              /* blue-50 */
    border-left: 3px solid #60a5fa;   /* blue-400 */
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #1e3a8a;                   /* blue-900 */
}
.sintactica-estructura-titulo {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1d4ed8;                   /* blue-700 */
    margin-bottom: 4px;
}
.sintactica-arbol-titulo {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;                   /* slate-600 */
    margin: 4px 0 6px 0;
}
.sintactica-relacion {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 12px;
    background: #f8fafc;              /* slate-50 */
    margin-bottom: 6px;
    font-size: 12.5px;
    line-height: 1.5;
}
.sintactica-relacion-nivel-0 {            /* sujeto */
    color: #1e293b;
    font-weight: 600;
}
.sintactica-relacion-nivel-1 {            /* verbo (pl-4 equivalente) */
    padding-left: 1rem;
    color: #7c3aed;                   /* violet-600 */
}
.sintactica-relacion-nivel-2 {            /* objeto (pl-8 equivalente) */
    padding-left: 2rem;
    color: #0891b2;                   /* cyan-600 */
}
.sintactica-relacion-tipo {
    padding-left: 2rem;
    margin-top: 4px;
    font-size: 11px;
    font-style: italic;
    color: #64748b;                   /* slate-500 */
}
.sintactica-relacion-etiqueta {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    background: #e2e8f0;
    border-radius: 3px;
    padding: 1px 5px;
    margin-right: 6px;
    vertical-align: 1px;
}

/* ===================================================================
   Sintaxis Macula Lowfat — port de treedown.css + boxwood.css
   Unidad = <sentence> (puede abarcar varios versículos).
   =================================================================== */

.macula-sintaxis {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0 10px;
    /* En el acordeón del lienzo: tope de altura. En ventana aparte se anula. */
    max-height: min(65vh, 640px);
    overflow: auto;
}
.macula-sintaxis-bloque {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.macula-sintaxis-titulo {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin: 0;
    flex: 0 0 auto;
}
.macula-sintaxis-ancla-hint {
    font-size: 11px;
    color: #475569;
    flex: 0 0 auto;
}
.macula-pasaje-scroll {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.15rem 0.35rem 0.35rem 0.15rem;
}

/* Ventana aparte: el cuerpo ya scrollea; el diagrama usa todo el alto útil. */
.analisis-ventana-cuerpo .macula-sintaxis {
    max-height: none;
    height: 100%;
    overflow: visible;
}
.analisis-ventana-cuerpo .macula-pasaje-scroll {
    overflow: visible;
}

/* sentence = bloque Lowfat / “párrafo” (milestones + prosa + árbol) */
.macula-sentence {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.55rem 0.35rem 0.85rem;
    margin-bottom: 0.65rem;
    border-bottom: 1px solid #cbd5e1;
}
.macula-sentence:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.macula-sintaxis-bloque--libro .macula-sentence {
    background: linear-gradient(180deg, #f8fafc 0%, #fff 2.5rem);
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    border-bottom-color: #cbd5e1;
    padding: 0.65rem 0.55rem 0.9rem;
}
.macula-sentence-cabecera {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.macula-milestones {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.65rem;
}
.macula-milestone {
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    display: block;
    margin-block: 0.15rem 0;
}
.macula-milestone--inline {
    display: inline;
}
.macula-milestone:hover {
    text-decoration: underline;
}
.macula-sentence-texto {
    font-family: "SBL Greek", "Gentium Plus", "Times New Roman", serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: #0f172a;
}
.macula-sentence-arbol {
    display: block;
    padding-inline-start: 0.25rem;
}

.macula-box {
    box-sizing: border-box;
    min-width: 0;
}

/*
 * treedown: etiquetas ::before con margin-inline-start negativo
 * → quedan FUERA del borde. Aquí: stack separado para cl+rol.
 */
.macula-cl-stack {
    display: block;
    margin-inline-start: 1rem;
    margin-block: 0.85rem 0.15rem;
}
.macula-cl-stack > .macula-rol {
    display: block;
    color: #5f9ea0;
    font-family: Consolas, "Segoe UI", monospace;
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    line-height: 1.2;
    user-select: none;
}
.macula-cl-stack > .macula-cl {
    margin-inline-start: 0;
    margin-block-start: 0;
}

/* boxwood: cláusula con borde inset — sin etiqueta dentro */
.macula-cl {
    display: block;
    border: 1px inset grey;
    border-inline-end: none;
    padding: 0.25rem 0.3rem;
    margin-block: 0.25rem 0.1rem;
    margin-inline-start: 1rem;
    background: #fafbfc;
}
.macula-cl .macula-cl {
    background: #fff;
}
.macula-cl-body {
    display: block;
}

/* Roles / aposiciones / groups: bloque indentado */
.macula-role,
.macula-apposition,
.macula-group,
.macula-block {
    display: block;
    margin-inline-start: 1rem;
    margin-block: 0.12rem 0.06rem;
    padding: 0;
    border: none;
    background: transparent;
}

/* Etiqueta a la izquierda, fuera del flujo del cuerpo (treedown -1rem) */
.macula-role > .macula-rol,
.macula-apposition > .macula-rol {
    display: inline-block;
    color: #5f9ea0;
    font-family: Consolas, "Segoe UI", monospace;
    font-size: 12px;
    font-weight: 600;
    margin-inline-start: -1rem;
    margin-inline-end: 0.4rem;
    min-width: 0.85rem;
    text-align: left;
    user-select: none;
    white-space: nowrap;
    vertical-align: top;
}
.macula-rol[title] {
    cursor: help;
}
.macula-role[data-rol=":"] > .macula-rol,
.macula-apposition > .macula-rol {
    color: #5f9ea0;
    font-size: 13px;
    font-weight: 700;
}

/* Cuerpo: palabras en línea; cajas/grupos hijos en bloque */
.macula-box-body {
    display: inline;
    min-width: 0;
}
.macula-role > .macula-box-body,
.macula-apposition > .macula-box-body,
.macula-group > .macula-box-body,
.macula-block > .macula-box-body {
    display: inline;
}

/* Boxwood: predicados/pp con rol — hijos-palabra en una sola línea horizontal */
.macula-sintaxis.boxwood-mode .macula-role > .macula-box-body > .macula-w,
.macula-sintaxis.boxwood-mode .macula-role > .macula-box-body > .macula-w--atom {
    display: inline-flex;
    vertical-align: top;
}
.macula-role > .macula-box-body > .macula-box,
.macula-apposition > .macula-box-body > .macula-box,
.macula-group > .macula-box-body > .macula-box,
.macula-block > .macula-box-body > .macula-box,
.macula-cl-body > .macula-box,
.macula-role > .macula-box-body > .macula-cl-stack,
.macula-apposition > .macula-box-body > .macula-cl-stack,
.macula-group > .macula-box-body > .macula-cl-stack,
.macula-block > .macula-box-body > .macula-cl-stack,
.macula-cl-body > .macula-cl-stack {
    display: block;
}

/* Aposición con indent extra (treedown) */
.macula-role > .macula-box-body > .macula-apposition,
.macula-cl-body > .macula-apposition,
.macula-cl-stack > .macula-cl.macula-apposition {
    margin-inline-start: 2rem;
}

.macula-disc {
    color: #5f9ea0;
    font-weight: 700;
    margin-left: 0.02em;
    cursor: help;
}

/* Palabra: griego + español alineados (sin inglés) */
.macula-w {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0.2rem 0 0;
    padding: 0;
    border: none;
    background: transparent;
    vertical-align: top;
}
.macula-griego {
    font-family: "SBL Greek", "Gentium Plus", "Times New Roman", serif;
    font-size: 1.05rem;
    line-height: 1.3;
    color: #0f172a;
    white-space: nowrap;
}
.macula-griego .macula-disc {
    font-family: Consolas, "Segoe UI", monospace;
    font-size: 0.95em;
}
.macula-glosa {
    font-size: 0.68rem;
    line-height: 1.15;
    color: #475569;
    text-align: left;
    max-width: 7.5rem;
    margin-top: 1px;
}

.macula-sintaxis-cargando,
.macula-sintaxis-vacio {
    margin: 0;
}
.sintactica-ia-root {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
}
.sintactica-ia-root[hidden] {
    display: none !important;
}

/* Compatibilidad con markup de sesiones anteriores */
.macula-fila {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.4rem;
}
.macula-fila-texto {
    display: flex;
    flex-wrap: wrap;
    gap: 0.12rem 0.35rem;
}
.macula-wg {
    display: contents;
}
.macula-wg-etiqueta {
    display: none !important;
}
.macula-wg-cuerpo {
    display: contents;
}

/* Summary del acordeón + botón ventana flotante */
.interlineal-capa-summary {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.interlineal-capa-titulo {
    flex: 0 1 auto;
    text-align: left;
    /* Empuja toolbar/⧉ a la derecha (el ::before ▶ no centra el título). */
    margin-right: auto;
}

/* Toolbar: resaltado opcional por caso Koiné */
.macula-casos-toolbar {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin-left: 0;
    opacity: 0.72;
    transition: opacity 0.15s ease;
}
.macula-casos-toolbar.is-activo {
    opacity: 1;
}
.macula-casos-toolbar--flotante {
    margin-left: 0;
    margin-top: 0.25rem;
}
.macula-casos-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 11px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    user-select: none;
}
.macula-casos-toggle input {
    margin: 0;
    cursor: pointer;
    accent-color: #0f766e;
}
.macula-casos-leyenda {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.22rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.macula-caso-chip {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    padding: 0.22rem 0.38rem;
    border-radius: 3px;
    border: 1px solid transparent;
    color: #1e293b;
}
.macula-caso-chip[data-caso="nominativo"] { background: #fde047; border-color: #eab308; }
.macula-caso-chip[data-caso="genitivo"]   { background: #93c5fd; border-color: #3b82f6; }
.macula-caso-chip[data-caso="dativo"]     { background: #86efac; border-color: #22c55e; }
.macula-caso-chip[data-caso="acusativo"]  { background: #fdba74; border-color: #f97316; }
.macula-caso-chip[data-caso="vocativo"]   { background: #f9a8d4; border-color: #ec4899; }

/* Toggle Cajas / Árbol (junto a Casos) */
.macula-vista-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.15rem;
    padding: 0.18rem 0.45rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #f8fafc;
    color: #334155;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;
    line-height: 1.2;
}
.macula-vista-toggle:hover {
    border-color: #94a3b8;
    background: #fff;
}
.macula-vista-toggle.is-activo,
.macula-vista-toggle[aria-pressed="true"] {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
}

.macula-arbol-orient {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: 0.1rem;
}
.macula-arbol-orient[hidden] {
    display: none !important;
}
.macula-orient-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #f8fafc;
    cursor: pointer;
    line-height: 0;
}
.macula-orient-btn:hover {
    border-color: #94a3b8;
    background: #fff;
}
.macula-orient-btn.is-activo,
.macula-orient-btn[aria-pressed="true"] {
    background: #eff6ff;
    border-color: #3b82f6;
}
.macula-orient-btn img {
    display: block;
    width: 16px;
    height: 16px;
    pointer-events: none;
}

/* ===================================================================
   Vista tree-mode (diagrama jerárquico tipo Treedown/Cascadia)
   Solo reorganiza layout/conectores. No altera tokens, glosas, casos
   ni tooltips (viven en el DOM interno de .macula-w / .macula-rol).
   Conectores: patrón first/middle/last por hermano (sin % del padre),
   para que las barras empiecen/terminen en el centro de cada hijo.
   boxwood-mode = estilos actuales (por defecto).
   =================================================================== */
.macula-sintaxis.tree-mode {
    --macula-tree-line: #94a3b8;
    /* px enteros: evita escalones por redondeo de rem/subpíxel */
    --macula-tree-stem: 9px;
    --macula-tree-pad: 8px;
    align-items: stretch;
}

/* Restos de SVG de intentos anteriores: no mostrar */
.macula-sintaxis.tree-mode svg.macula-tree-connectors {
    display: none !important;
}

/*
 * Importante: NO usar align-items:center aquí.
 * Si el árbol es más ancho que el contenedor, el centrado deja la mitad
 * izquierda fuera del scroll (inalcanzable). flex-start + margin auto
 * centra cuando cabe y permite recorrer todo el ancho cuando desborda.
 */
.macula-sintaxis.tree-mode .macula-sentence-arbol {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.5rem 0.5rem 0.75rem;
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    box-sizing: border-box;
    overscroll-behavior-x: contain;
}
.macula-sintaxis.tree-mode .macula-sentence-arbol > * {
    margin-inline: auto;
    flex: 0 0 auto;
    max-width: none;
}
.macula-sintaxis.tree-mode .macula-sentence,
.macula-sintaxis.tree-mode .macula-pasaje-scroll,
.macula-sintaxis.tree-mode .macula-sintaxis-bloque {
    min-width: 0;
    max-width: 100%;
}
.macula-sintaxis.tree-mode .macula-sentence {
    overflow: visible;
}

.macula-sintaxis.tree-mode .macula-cl-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Sin margin-top: si es hermano en una fila, desplaza la barra y crea escalones */
    margin: 0;
    position: relative;
}
.macula-sintaxis.tree-mode .macula-sentence-arbol > .macula-cl-stack {
    margin-block: 0.55rem 0.2rem;
}

.macula-sintaxis.tree-mode .macula-cl-stack > .macula-rol {
    color: #2563eb;
    font-family: Consolas, "Segoe UI", ui-monospace, monospace;
    font-size: 11.5px;
    font-weight: 700;
    margin: 0;
    text-align: center;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

/* Sin hueco entre etiqueta y cuerpo (el tallo del rol debe tocar la barra) */
.macula-sintaxis.tree-mode .macula-cl {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    position: relative;
}

.macula-sintaxis.tree-mode .macula-role,
.macula-sintaxis.tree-mode .macula-apposition,
.macula-sintaxis.tree-mode .macula-group,
.macula-sintaxis.tree-mode .macula-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    position: relative;
}

.macula-sintaxis.tree-mode .macula-role > .macula-rol,
.macula-sintaxis.tree-mode .macula-apposition > .macula-rol {
    display: block;
    order: -1;
    color: #2563eb;
    font-family: Consolas, "Segoe UI", ui-monospace, monospace;
    font-size: 11.5px;
    font-weight: 700;
    margin: 0;
    min-width: 0;
    text-align: center;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

/* Tallo del padre → nivel de la barra de hermanos */
.macula-sintaxis.tree-mode .macula-cl-stack > .macula-rol::after,
.macula-sintaxis.tree-mode .macula-role > .macula-rol::after,
.macula-sintaxis.tree-mode .macula-apposition > .macula-rol::after {
    content: "";
    display: block;
    width: 1px;
    height: var(--macula-tree-stem);
    margin: 0 auto;
    background: var(--macula-tree-line);
}

/* Fila de hijos: sin gap (el espacio va en padding del hijo) */
.macula-sintaxis.tree-mode .macula-cl-body,
.macula-sintaxis.tree-mode .macula-role > .macula-box-body,
.macula-sintaxis.tree-mode .macula-apposition > .macula-box-body,
.macula-sintaxis.tree-mode .macula-group > .macula-box-body,
.macula-sintaxis.tree-mode .macula-block > .macula-box-body {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    position: relative;
    padding-top: var(--macula-tree-stem);
}

/* Sin barra % del contenedor: cada hermano dibuja su tramo (misma Y si margin=0) */
.macula-sintaxis.tree-mode .macula-cl-body::before,
.macula-sintaxis.tree-mode .macula-role > .macula-box-body::before,
.macula-sintaxis.tree-mode .macula-apposition > .macula-box-body::before,
.macula-sintaxis.tree-mode .macula-group > .macula-box-body::before,
.macula-sintaxis.tree-mode .macula-block > .macula-box-body::before {
    content: none;
}

.macula-sintaxis.tree-mode .macula-cl-body > .macula-box,
.macula-sintaxis.tree-mode .macula-cl-body > .macula-cl-stack,
.macula-sintaxis.tree-mode .macula-cl-body > .macula-w,
.macula-sintaxis.tree-mode .macula-role > .macula-box-body > .macula-box,
.macula-sintaxis.tree-mode .macula-role > .macula-box-body > .macula-cl-stack,
.macula-sintaxis.tree-mode .macula-role > .macula-box-body > .macula-w,
.macula-sintaxis.tree-mode .macula-apposition > .macula-box-body > .macula-box,
.macula-sintaxis.tree-mode .macula-apposition > .macula-box-body > .macula-cl-stack,
.macula-sintaxis.tree-mode .macula-apposition > .macula-box-body > .macula-w,
.macula-sintaxis.tree-mode .macula-group > .macula-box-body > .macula-box,
.macula-sintaxis.tree-mode .macula-group > .macula-box-body > .macula-cl-stack,
.macula-sintaxis.tree-mode .macula-group > .macula-box-body > .macula-w,
.macula-sintaxis.tree-mode .macula-block > .macula-box-body > .macula-box,
.macula-sintaxis.tree-mode .macula-block > .macula-box-body > .macula-cl-stack,
.macula-sintaxis.tree-mode .macula-block > .macula-box-body > .macula-w {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: flex-start; /* misma cota superior → misma Y de barra */
    position: relative;
    padding: 0 var(--macula-tree-pad);
    box-sizing: border-box;
    /* Anula márgenes boxwood (indent/block) que desalinea hermanos */
    margin: 0 !important;
}

/* Tallo vertical: barra → centro del hijo (sin transform: evita subpíxel) */
.macula-sintaxis.tree-mode .macula-cl-body > .macula-box::before,
.macula-sintaxis.tree-mode .macula-cl-body > .macula-cl-stack::before,
.macula-sintaxis.tree-mode .macula-cl-body > .macula-w::before,
.macula-sintaxis.tree-mode .macula-role > .macula-box-body > .macula-box::before,
.macula-sintaxis.tree-mode .macula-role > .macula-box-body > .macula-cl-stack::before,
.macula-sintaxis.tree-mode .macula-role > .macula-box-body > .macula-w::before,
.macula-sintaxis.tree-mode .macula-apposition > .macula-box-body > .macula-box::before,
.macula-sintaxis.tree-mode .macula-apposition > .macula-box-body > .macula-cl-stack::before,
.macula-sintaxis.tree-mode .macula-apposition > .macula-box-body > .macula-w::before,
.macula-sintaxis.tree-mode .macula-group > .macula-box-body > .macula-box::before,
.macula-sintaxis.tree-mode .macula-group > .macula-box-body > .macula-cl-stack::before,
.macula-sintaxis.tree-mode .macula-group > .macula-box-body > .macula-w::before,
.macula-sintaxis.tree-mode .macula-block > .macula-box-body > .macula-box::before,
.macula-sintaxis.tree-mode .macula-block > .macula-box-body > .macula-cl-stack::before,
.macula-sintaxis.tree-mode .macula-block > .macula-box-body > .macula-w::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--macula-tree-stem));
    left: 50%;
    width: 1px;
    height: var(--macula-tree-stem);
    margin-left: -0.5px;
    background: var(--macula-tree-line);
    pointer-events: none;
    z-index: 1;
}

/* Tramo horizontal entre hermanos — mismo top en todos + solape 1px */
.macula-sintaxis.tree-mode .macula-cl-body > .macula-box::after,
.macula-sintaxis.tree-mode .macula-cl-body > .macula-cl-stack::after,
.macula-sintaxis.tree-mode .macula-cl-body > .macula-w::after,
.macula-sintaxis.tree-mode .macula-role > .macula-box-body > .macula-box::after,
.macula-sintaxis.tree-mode .macula-role > .macula-box-body > .macula-cl-stack::after,
.macula-sintaxis.tree-mode .macula-role > .macula-box-body > .macula-w::after,
.macula-sintaxis.tree-mode .macula-apposition > .macula-box-body > .macula-box::after,
.macula-sintaxis.tree-mode .macula-apposition > .macula-box-body > .macula-cl-stack::after,
.macula-sintaxis.tree-mode .macula-apposition > .macula-box-body > .macula-w::after,
.macula-sintaxis.tree-mode .macula-group > .macula-box-body > .macula-box::after,
.macula-sintaxis.tree-mode .macula-group > .macula-box-body > .macula-cl-stack::after,
.macula-sintaxis.tree-mode .macula-group > .macula-box-body > .macula-w::after,
.macula-sintaxis.tree-mode .macula-block > .macula-box-body > .macula-box::after,
.macula-sintaxis.tree-mode .macula-block > .macula-box-body > .macula-cl-stack::after,
.macula-sintaxis.tree-mode .macula-block > .macula-box-body > .macula-w::after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--macula-tree-stem));
    left: -1px;
    width: calc(100% + 2px);
    height: 1px;
    background: var(--macula-tree-line);
    pointer-events: none;
    z-index: 0;
}

.macula-sintaxis.tree-mode .macula-cl-body > .macula-box:first-child::after,
.macula-sintaxis.tree-mode .macula-cl-body > .macula-cl-stack:first-child::after,
.macula-sintaxis.tree-mode .macula-cl-body > .macula-w:first-child::after,
.macula-sintaxis.tree-mode .macula-role > .macula-box-body > .macula-box:first-child::after,
.macula-sintaxis.tree-mode .macula-role > .macula-box-body > .macula-cl-stack:first-child::after,
.macula-sintaxis.tree-mode .macula-role > .macula-box-body > .macula-w:first-child::after,
.macula-sintaxis.tree-mode .macula-apposition > .macula-box-body > .macula-box:first-child::after,
.macula-sintaxis.tree-mode .macula-apposition > .macula-box-body > .macula-cl-stack:first-child::after,
.macula-sintaxis.tree-mode .macula-apposition > .macula-box-body > .macula-w:first-child::after,
.macula-sintaxis.tree-mode .macula-group > .macula-box-body > .macula-box:first-child::after,
.macula-sintaxis.tree-mode .macula-group > .macula-box-body > .macula-cl-stack:first-child::after,
.macula-sintaxis.tree-mode .macula-group > .macula-box-body > .macula-w:first-child::after,
.macula-sintaxis.tree-mode .macula-block > .macula-box-body > .macula-box:first-child::after,
.macula-sintaxis.tree-mode .macula-block > .macula-box-body > .macula-cl-stack:first-child::after,
.macula-sintaxis.tree-mode .macula-block > .macula-box-body > .macula-w:first-child::after {
    left: calc(50% - 1px);
    width: calc(50% + 1px);
}

.macula-sintaxis.tree-mode .macula-cl-body > .macula-box:last-child::after,
.macula-sintaxis.tree-mode .macula-cl-body > .macula-cl-stack:last-child::after,
.macula-sintaxis.tree-mode .macula-cl-body > .macula-w:last-child::after,
.macula-sintaxis.tree-mode .macula-role > .macula-box-body > .macula-box:last-child::after,
.macula-sintaxis.tree-mode .macula-role > .macula-box-body > .macula-cl-stack:last-child::after,
.macula-sintaxis.tree-mode .macula-role > .macula-box-body > .macula-w:last-child::after,
.macula-sintaxis.tree-mode .macula-apposition > .macula-box-body > .macula-box:last-child::after,
.macula-sintaxis.tree-mode .macula-apposition > .macula-box-body > .macula-cl-stack:last-child::after,
.macula-sintaxis.tree-mode .macula-apposition > .macula-box-body > .macula-w:last-child::after,
.macula-sintaxis.tree-mode .macula-group > .macula-box-body > .macula-box:last-child::after,
.macula-sintaxis.tree-mode .macula-group > .macula-box-body > .macula-cl-stack:last-child::after,
.macula-sintaxis.tree-mode .macula-group > .macula-box-body > .macula-w:last-child::after,
.macula-sintaxis.tree-mode .macula-block > .macula-box-body > .macula-box:last-child::after,
.macula-sintaxis.tree-mode .macula-block > .macula-box-body > .macula-cl-stack:last-child::after,
.macula-sintaxis.tree-mode .macula-block > .macula-box-body > .macula-w:last-child::after {
    left: -1px;
    width: calc(50% + 1px);
}

/* Un solo hijo: solo tallo continuo, sin barra lateral */
.macula-sintaxis.tree-mode .macula-cl-body > .macula-box:only-child::after,
.macula-sintaxis.tree-mode .macula-cl-body > .macula-cl-stack:only-child::after,
.macula-sintaxis.tree-mode .macula-cl-body > .macula-w:only-child::after,
.macula-sintaxis.tree-mode .macula-role > .macula-box-body > .macula-box:only-child::after,
.macula-sintaxis.tree-mode .macula-role > .macula-box-body > .macula-cl-stack:only-child::after,
.macula-sintaxis.tree-mode .macula-role > .macula-box-body > .macula-w:only-child::after,
.macula-sintaxis.tree-mode .macula-apposition > .macula-box-body > .macula-box:only-child::after,
.macula-sintaxis.tree-mode .macula-apposition > .macula-box-body > .macula-cl-stack:only-child::after,
.macula-sintaxis.tree-mode .macula-apposition > .macula-box-body > .macula-w:only-child::after,
.macula-sintaxis.tree-mode .macula-group > .macula-box-body > .macula-box:only-child::after,
.macula-sintaxis.tree-mode .macula-group > .macula-box-body > .macula-cl-stack:only-child::after,
.macula-sintaxis.tree-mode .macula-group > .macula-box-body > .macula-w:only-child::after,
.macula-sintaxis.tree-mode .macula-block > .macula-box-body > .macula-box:only-child::after,
.macula-sintaxis.tree-mode .macula-block > .macula-box-body > .macula-cl-stack:only-child::after,
.macula-sintaxis.tree-mode .macula-block > .macula-box-body > .macula-w:only-child::after {
    content: none;
}

/* Hojas */
.macula-sintaxis.tree-mode .macula-w {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}
.macula-sintaxis.tree-mode .macula-griego {
    color: #15803d;
    font-size: 1.02rem;
}
.macula-sintaxis.tree-mode .macula-glosa {
    text-align: center;
    max-width: 6.5rem;
    color: #64748b;
}

/* --- Orientación: crecimiento hacia la derecha (LTR) --- */
.macula-sintaxis.tree-mode.tree-orient-right .macula-sentence-arbol {
    align-items: flex-start;
    padding: 0.45rem 0.5rem 0.75rem;
    overflow-x: auto;
    overflow-y: auto;
}
.macula-sintaxis.tree-mode.tree-orient-right .macula-sentence-arbol > * {
    margin-inline: 0; /* LTR: anclar a la izquierda; el scroll cubre hacia la derecha */
}

.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-stack,
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block {
    flex-direction: row;
    align-items: center;
    margin: 0.15rem 0;
    padding: 0;
}

.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-stack > .macula-rol,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-rol,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-rol {
    order: 0;
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

/* Tallo horizontal del padre → columna de hijos */
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-stack > .macula-rol::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-rol::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-rol::after {
    display: inline-block;
    width: var(--macula-tree-stem);
    height: 1px;
    margin: 0 0 0 0.1rem;
    vertical-align: middle;
}

/*
 * Como lowfat/cajas:
 * - .macula-w hermanos → misma línea
 * - cada .macula-role / cl-stack / group → línea propia (aunque sea una sola palabra)
 */
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    gap: 0.15rem 0.35rem;
    padding-top: 0;
    padding-inline-start: var(--macula-tree-stem);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-box,
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-cl-stack,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-box,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-cl-stack,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-box,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-cl-stack,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-box,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-cl-stack,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-box,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-cl-stack {
    flex-direction: row;
    align-items: center;
    padding: 0.1rem 0;
    margin: 0 !important;
}

/* Palabra: griego arriba, glosa ES debajo (como en cajas) */
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-w,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-w,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-w,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-w,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-w,
.macula-sintaxis.tree-mode.tree-orient-right .macula-w {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.1rem 0;
    margin: 0 !important;
}

/* Solo palabras sueltas comparten línea (p.ej. τοῖς δούλοις αὐτοῦ) */
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-w,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-w,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-w,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-w,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-w {
    flex: 0 0 auto;
    width: max-content;
    max-width: none;
}

/* Cada rol/caja/cláusula = línea propia (como lowfat: o / v / io / s) */
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-box,
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-cl-stack,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-box,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-cl-stack,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-box,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-cl-stack,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-box,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-cl-stack,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-box,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-cl-stack {
    flex: 1 1 100%;
    width: 100%;
}

/* Palabras en fila: sin espina por token (el tallo del padre basta) */
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-w::before,
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-w::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-w::before,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-w::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-w::before,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-w::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-w::before,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-w::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-w::before,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-w::after {
    content: none !important;
    display: none !important;
}

/* Rama horizontal → hijo estructural */
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-box::before,
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-cl-stack::before,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-box::before,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-cl-stack::before,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-box::before,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-cl-stack::before,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-box::before,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-cl-stack::before,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-box::before,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-cl-stack::before {
    top: 50%;
    left: calc(-1 * var(--macula-tree-stem));
    width: var(--macula-tree-stem);
    height: 1px;
    transform: translateY(-50%);
}

/* Espina vertical por hermano (top→bottom), recortada en extremos */
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-box::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-cl-stack::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-w::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-box::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-cl-stack::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-w::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-box::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-cl-stack::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-w::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-box::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-cl-stack::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-w::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-box::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-cl-stack::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-w::after {
    top: 0;
    bottom: 0;
    left: calc(-1 * var(--macula-tree-stem));
    width: 1px;
    height: auto;
    background: var(--macula-tree-line);
}

.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-box:first-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-cl-stack:first-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-w:first-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-box:first-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-cl-stack:first-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-w:first-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-box:first-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-cl-stack:first-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-w:first-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-box:first-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-cl-stack:first-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-w:first-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-box:first-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-cl-stack:first-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-w:first-child::after {
    top: 50%;
    bottom: 0;
    left: calc(-1 * var(--macula-tree-stem));
    width: 1px;
    height: auto;
}

.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-box:last-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-cl-stack:last-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-w:last-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-box:last-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-cl-stack:last-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-w:last-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-box:last-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-cl-stack:last-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-w:last-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-box:last-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-cl-stack:last-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-w:last-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-box:last-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-cl-stack:last-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-w:last-child::after {
    top: 0;
    bottom: auto;
    left: calc(-1 * var(--macula-tree-stem));
    width: 1px;
    height: 50%;
}

/* Primero y último a la vez (= único): sin espina; el tallo del padre basta */
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-box:only-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-cl-stack:only-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-cl-body > .macula-w:only-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-box:only-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-cl-stack:only-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-w:only-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-box:only-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-cl-stack:only-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-w:only-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-box:only-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-cl-stack:only-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-w:only-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-box:only-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-cl-stack:only-child::after,
.macula-sintaxis.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-w:only-child::after {
    content: none;
}

/* 2 hermanos: el :first-child:last-child no aplica; ambos extremos sí.
   Si hay exactamente 2, first tiene top:50%→bottom y last top→50%: se tocan. */

.macula-sintaxis.tree-mode.tree-orient-right .macula-griego {
    white-space: nowrap;
}

.macula-sintaxis.tree-mode.tree-orient-right .macula-glosa {
    display: block;
    text-align: center;
    white-space: normal;
    max-width: 6.5rem;
    line-height: 1.15;
}

/* Resaltador (solo con toggle activo) — SOLO token hebreo/griego, nunca glosa ES */
html.macula-casos-on .macula-w[data-caso] {
    background: transparent;
}
html.macula-casos-on .macula-w[data-caso] .macula-griego {
    border-radius: 2px;
    padding: 0 0.14em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
html.macula-casos-on .macula-w[data-caso="nominativo"] .macula-griego {
    background: rgba(253, 224, 71, 0.92);
}
html.macula-casos-on .macula-w[data-caso="genitivo"] .macula-griego {
    background: rgba(147, 197, 253, 0.92);
}
html.macula-casos-on .macula-w[data-caso="dativo"] .macula-griego {
    background: rgba(134, 239, 172, 0.92);
}
html.macula-casos-on .macula-w[data-caso="acusativo"] .macula-griego {
    background: rgba(253, 186, 116, 0.92);
}
html.macula-casos-on .macula-w[data-caso="vocativo"] .macula-griego {
    background: rgba(249, 168, 212, 0.92);
}
html.macula-casos-on .macula-glosa,
html.macula-casos-on .macula-glosas,
html.macula-casos-on .macula-w[data-caso] .macula-glosa,
html.macula-casos-on .macula-w[data-caso] .macula-glosas {
    background: transparent !important;
    box-shadow: none !important;
}

/* Bloque atómico hebreo (ה-אָרֶץ, עַל-פְּנֵי…): una sola celda hebrea */
.macula-w--atom .macula-griego {
    white-space: nowrap;
}
.macula-glosas {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    gap: 1px;
    margin-top: 1px;
    background: transparent;
}
.macula-glosas .macula-glosa {
    margin-top: 0;
}

/* ===================================================================
   Macula AT hebreo — espejo RTL (hebrew-treedown / hebrew-boxwood)
   El layout base ya usa propiedades lógicas; dir=rtl refleja el árbol.
   =================================================================== */
.macula-sintaxis.macula-hebreo {
    direction: rtl;
}
.macula-sintaxis.macula-hebreo .macula-sentence-texto,
.macula-sintaxis.macula-hebreo .macula-griego {
    font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", "David", serif;
}
.macula-sintaxis.macula-hebreo .macula-sentence-cabecera,
.macula-sintaxis.macula-hebreo .macula-milestones {
    text-align: start;
}
.macula-sintaxis.macula-hebreo .macula-role > .macula-rol,
.macula-sintaxis.macula-hebreo .macula-apposition > .macula-rol {
    text-align: start;
}
.macula-sintaxis.macula-hebreo .macula-w {
    align-items: flex-start;
}
.macula-sintaxis.macula-hebreo .macula-glosa,
.macula-sintaxis.macula-hebreo .macula-glosas {
    text-align: start;
    direction: ltr; /* glosa ES sigue LTR bajo la forma hebrea */
    unicode-bidi: isolate;
    background: transparent;
}

/*
 * Árbol hacia abajo + RTL: first-child queda a la DER visualmente.
 * Hay que invertir los recortes de la barra horizontal (terminaciones).
 */
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-cl-body > .macula-box:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-cl-body > .macula-cl-stack:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-cl-body > .macula-w:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-role > .macula-box-body > .macula-box:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-role > .macula-box-body > .macula-cl-stack:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-role > .macula-box-body > .macula-w:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-apposition > .macula-box-body > .macula-box:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-apposition > .macula-box-body > .macula-cl-stack:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-apposition > .macula-box-body > .macula-w:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-group > .macula-box-body > .macula-box:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-group > .macula-box-body > .macula-cl-stack:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-group > .macula-box-body > .macula-w:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-block > .macula-box-body > .macula-box:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-block > .macula-box-body > .macula-cl-stack:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-block > .macula-box-body > .macula-w:first-child::after {
    left: -1px;
    width: calc(50% + 1px);
}
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-cl-body > .macula-box:last-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-cl-body > .macula-cl-stack:last-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-cl-body > .macula-w:last-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-role > .macula-box-body > .macula-box:last-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-role > .macula-box-body > .macula-cl-stack:last-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-role > .macula-box-body > .macula-w:last-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-apposition > .macula-box-body > .macula-box:last-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-apposition > .macula-box-body > .macula-cl-stack:last-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-apposition > .macula-box-body > .macula-w:last-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-group > .macula-box-body > .macula-box:last-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-group > .macula-box-body > .macula-cl-stack:last-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-group > .macula-box-body > .macula-w:last-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-block > .macula-box-body > .macula-box:last-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-block > .macula-box-body > .macula-cl-stack:last-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-down .macula-block > .macula-box-body > .macula-w:last-child::after {
    left: calc(50% - 1px);
    width: calc(50% + 1px);
}

/* Árbol horizontal RTL: conectores físicos a la DER (hacia el padre / raíz) */
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-cl-body,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-role > .macula-box-body,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-apposition > .macula-box-body,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-group > .macula-box-body,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-block > .macula-box-body {
    padding-left: 0;
    padding-right: 0;
    padding-inline-start: var(--macula-tree-stem);
}

.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-cl-body > .macula-box::before,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-cl-body > .macula-cl-stack::before,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-box::before,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-cl-stack::before,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-box::before,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-cl-stack::before,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-box::before,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-cl-stack::before,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-box::before,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-cl-stack::before {
    left: auto;
    right: calc(-1 * var(--macula-tree-stem));
}

.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-cl-body > .macula-box::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-cl-body > .macula-cl-stack::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-cl-body > .macula-w::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-box::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-cl-stack::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-w::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-box::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-cl-stack::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-w::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-box::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-cl-stack::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-w::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-box::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-cl-stack::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-w::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-cl-body > .macula-box:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-cl-body > .macula-cl-stack:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-box:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-cl-stack:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-box:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-box:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-box:first-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-cl-body > .macula-box:last-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-cl-body > .macula-cl-stack:last-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-box:last-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-role > .macula-box-body > .macula-cl-stack:last-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-apposition > .macula-box-body > .macula-box:last-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-group > .macula-box-body > .macula-box:last-child::after,
.macula-sintaxis.macula-hebreo.tree-mode.tree-orient-right .macula-block > .macula-box-body > .macula-box:last-child::after {
    left: auto;
    right: calc(-1 * var(--macula-tree-stem));
}

.capa-abrir-flotante {
    flex: 0 0 auto;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    border-radius: 4px;
    width: 1.7rem;
    height: 1.55rem;
    line-height: 1;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
}
.capa-abrir-flotante:hover {
    background: #e2e8f0;
}
.capa-abrir-flotante.is-activo {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}

/* Ventana aparte de capas de análisis (popup OS / multi-monitor) */
.analisis-ventana-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    padding: 0.55rem 0.75rem;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    flex: 0 0 auto;
}
.analisis-ventana-titulos {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.analisis-ventana-titulo {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}
.analisis-ventana-pasaje {
    font-size: 11px;
    font-weight: 600;
    color: #0369a1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 28rem;
}
.analisis-ventana-btn {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    border-radius: 4px;
    width: 1.85rem;
    height: 1.7rem;
    line-height: 1;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
}
.analisis-ventana-btn:hover {
    background: #e2e8f0;
}
.analisis-ventana-btn.is-activa {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}
.analisis-ventana-cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.7rem 0.85rem;
    background: #fff;
    font-size: 12px;
}
.analisis-ventana-footer {
    flex: 0 0 auto;
    padding: 0.35rem 0.75rem;
    font-size: 10px;
    color: #64748b;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}
.analisis-flotante-titulos {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.analisis-flotante-titulo {
    font-size: 12.5px;
    font-weight: 700;
    color: #0f172a;
}
.analisis-flotante-pasaje {
    font-size: 11px;
    font-weight: 600;
    color: #0369a1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 26rem;
}
.analisis-flotante-vacio {
    margin: 0;
    font-size: 12px;
    color: #64748b;
}
/* Morfológico en ventana aparte: tipografía más compacta */
.analisis-ventana-cuerpo[data-capa="morfologica"] {
    font-size: 11px;
}
.analisis-ventana-cuerpo[data-capa="morfologica"] .tabla-morfologica {
    font-size: 11px;
}
.analisis-ventana-cuerpo[data-capa="morfologica"] .tabla-morfologica th,
.analisis-ventana-cuerpo[data-capa="morfologica"] .tabla-morfologica td {
    font-size: 11px;
    padding: 0.28rem 0.4rem;
}
.analisis-ventana-cuerpo[data-capa="morfologica"] .tabla-morfologica td.tabla-morf-morfologia {
    font-size: 10.5px;
}

/* Envoltorio análisis sintáctico */
.sintactica-capa-envoltorio {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.interlineal-capa--anidada {
    margin-top: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fafbfc;
}
.interlineal-capa--anidada > summary {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    padding: 8px 12px;
}

/* Diagramación sintáctica — Randy Leedy (capa propia + motor SVG) */
#capa-diagrama-leedy > summary {
    color: #0f766e;
    font-weight: 600;
}
.diagrama-leedy-container {
    font-size: 11px;
    line-height: 1.4;
    color: #334155;
    overflow: hidden;
    padding: 12px 8px 16px;
    min-height: 120px;
    max-height: 72vh;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
}
.diagrama-leedy-container .leedy-diagrama-viewport {
    overflow: hidden;
    width: 100%;
    min-height: 100px;
    max-height: calc(72vh - 40px);
    cursor: default;
    touch-action: none;
}
.diagrama-leedy-container .leedy-diagrama-viewport.leedy-panning {
    cursor: grabbing;
}
.diagrama-leedy-container .leedy-diagrama-stage {
    display: inline-block;
    transform-origin: 0 0;
    will-change: transform;
}
.diagrama-leedy-container .leedy-diagrama-svg {
    display: block;
    min-width: min(100%, 280px);
    max-width: none;
    height: auto;
}
.diagrama-leedy-container .leedy-svg-griego {
    font-family: "Consolas", "Courier New", ui-monospace, monospace;
    font-size: 9px;
}
.diagrama-leedy-container .leedy-svg-glosa {
    font-family: system-ui, sans-serif;
    font-size: 8px;
}
.diagrama-leedy-container .leedy-svg-etiqueta,
.diagrama-leedy-container .leedy-svg-titulo-oracion,
.diagrama-leedy-container .leedy-svg-titulo-pasaje {
    font-family: system-ui, sans-serif;
    font-size: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.diagrama-leedy-container .leedy-svg-uid {
    font-size: 5px;
    opacity: 0.65;
}
.diagrama-leedy-container .leedy-svg-linea-base {
    filter: drop-shadow(0 0 0.5px rgba(29, 78, 216, 0.35));
}
.diagrama-leedy-container .leedy-svg-conector-mod {
    fill: none;
}
.diagrama-leedy-container .leedy-svg-ancla {
    opacity: 0.85;
}
.diagrama-leedy-container .leedy-svg-conector-anclado {
    fill: none;
}
.diagrama-leedy-container .leedy-svg-hexagono {
    opacity: 0.92;
}
.diagrama-leedy-container .leedy-svg-simbolo-igualdad {
    font-family: system-ui, sans-serif;
    user-select: none;
}
.diagrama-leedy-container .leedy-svg-simbolo-doble-barra {
    pointer-events: none;
}
.diagrama-leedy-container .leedy-svg-elision,
.diagrama-leedy-container .leedy-svg-nodo-elision .leedy-svg-griego {
    font-style: italic;
}
.diagrama-leedy-container .leedy-svg-nodo-elision-ficticio .leedy-svg-griego {
    fill: #94a3b8;
}
.diagrama-leedy-container .leedy-svg-conector-elision {
    fill: none;
}
.diagrama-leedy-container .leedy-svg-aposicion-texto {
    font-size: 9px;
}
.leedy-vacio {
    margin: 0;
    padding: 10px 12px;
    color: #64748b;
    font-size: 12px;
    font-style: italic;
    background: #f8fafc;
    border-radius: 4px;
    border: 1px dashed #cbd5e1;
}
.leedy-vacio--inicial code {
    font-size: 10.5px;
    color: #047857;
    background: #ecfdf5;
    padding: 1px 4px;
    border-radius: 3px;
}

/* Leedy — imagen de fondo + hotspots Strong */
.leedy-hotspots-wrap {
    max-width: 100%;
    overflow: auto;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}
.leedy-hotspots-stage {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
}
.leedy-hotspots-img {
    display: block;
    max-width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}
.leedy-hotspots-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.leedy-hotspots-capa {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.leedy-hotspot {
    position: absolute;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    border-radius: 2px;
    box-sizing: border-box;
}
.leedy-hotspot--centro {
    transform: translate(-50%, -50%);
}
.leedy-hotspot--calibrar {
    cursor: move;
}
.leedy-hotspot--arrastrando {
    z-index: 20;
    background: rgba(37, 99, 235, 0.35) !important;
}
.leedy-hotspot-label {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    font-size: 8px;
    line-height: 1.1;
    color: #1e40af;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #93c5fd;
    border-radius: 2px;
    padding: 1px 3px;
    white-space: nowrap;
    pointer-events: none;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.leedy-hotspots-stage--calibrar .leedy-hotspot {
    background: rgba(37, 99, 235, 0.12);
    outline: 1px dashed rgba(37, 99, 235, 0.45);
}
.leedy-hotspot:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}
.leedy-hotspots-stage--debug .leedy-hotspot {
    background: rgba(37, 99, 235, 0.18);
    outline: 1px dashed rgba(37, 99, 235, 0.55);
}
.leedy-hotspots-stage--debug .leedy-hotspot--sin-strong {
    background: rgba(239, 68, 68, 0.12);
    outline-color: rgba(220, 38, 38, 0.5);
}
.leedy-hotspot--sin-strong {
    cursor: not-allowed;
}

.leedy-diagrama {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.leedy-diagrama-titulo {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
}
.leedy-diagrama-notas {
    margin: 0;
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.45;
}
.leedy-seccion {
    border-radius: 4px;
    overflow: hidden;
}
.leedy-seccion-titulo {
    margin: 0 0 8px 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #64748b;
}
.leedy-seccion--linea-base .leedy-seccion-titulo {
    color: #1d4ed8;
}
.leedy-seccion--modificador .leedy-seccion-titulo {
    color: #7c3aed;
}
.leedy-seccion--zanco .leedy-seccion-titulo {
    color: #0f766e;
}
.leedy-seccion-arbol {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.leedy-nodo {
    padding-left: calc(12px + var(--leedy-nivel, 0) * 18px);
    border-left: 2px solid #e2e8f0;
    margin-left: 2px;
}
.leedy-nodo--linea-base {
    border-left-color: #93c5fd;
    background: linear-gradient(90deg, #eff6ff 0%, transparent 100%);
}
.leedy-nodo--modificador {
    border-left-color: #c4b5fd;
    background: linear-gradient(90deg, #f5f3ff 0%, transparent 100%);
}
.leedy-nodo--zanco {
    border-left-color: #5eead4;
    background: linear-gradient(90deg, #f0fdfa 0%, transparent 100%);
}
.leedy-nodo-cuerpo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    padding: 6px 8px 6px 0;
}
.leedy-nodo-etiqueta {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 3px;
    padding: 1px 5px;
}
.leedy-nodo-griego {
    font-family: "Consolas", "Courier New", ui-monospace, monospace;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: 0.02em;
}
.leedy-nodo-glosa {
    font-size: 11.5px;
    color: #475569;
}
.leedy-nodo-uid {
    font-size: 9px;
    font-weight: 600;
    color: #047857;
    background: #ecfdf5;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: "Consolas", "Courier New", ui-monospace, monospace;
}
.leedy-oracion {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}
.leedy-oracion:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.leedy-oracion-titulo {
    margin: 0 0 10px 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #334155;
}
.leedy-nodo-nota {
    font-size: 10.5px;
    color: #64748b;
    font-style: italic;
    padding: 0 0 4px 0;
}
.leedy-hijos {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Cuerpo del análisis: scroll vertical si excede el viewport. */
.exegetico-body {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px 20px;
    overflow-y: auto;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.exegetico-titulo-seccion {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
    margin-bottom: 6px;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 3px;
}

/* Secciones principales del exegeta (pasaje + interlineal) — mismo patrón que capas IA */
.exegetico-seccion-principal {
    margin-bottom: 10px;
}
.exegetico-seccion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.exegetico-seccion-titulo {
    flex: 1 1 auto;
    min-width: 0;
}
.exegetico-pasaje-filtros {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}
.exegetico-filtro-version {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}
.exegetico-pasaje-cuerpo .exegetico-linea {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}
.exegetico-pasaje-cuerpo .exegetico-linea:last-child {
    margin-bottom: 0;
}
.exegetico-pasaje-cuerpo .exegetico-linea-cuerpo {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

@keyframes cosecha-resaltado-atenuacion {
    0%   { background-color: #fef08a; box-shadow: 0 0 0 3px #facc15; }
    35%  { background-color: #fef9c3; box-shadow: 0 0 0 2px #fde047; }
    100% { background-color: transparent; box-shadow: none; }
}
.parrafo-resaltado-cosecha {
    animation: cosecha-resaltado-atenuacion 6.5s ease-out forwards;
    border-radius: 6px;
}
/* Pasaje completo: griego, RV60 y TU VERSIÓN al mismo tamaño (tarjetas
   interlineales conservan .palabra-original / .palabra-griego más grandes). */
#exegetico-pasaje-completo .exegetico-linea-cuerpo,
.exegetico-pasaje-completo .exegetico-linea-cuerpo {
    font-size: 0.95rem;
    line-height: 1.55;
    white-space: pre-wrap;
}
#exegetico-pasaje-completo .exegetico-texto-original.palabra-griego,
.exegetico-pasaje-completo .exegetico-texto-original.palabra-griego,
#exegetico-pasaje-completo .exegetico-texto-original,
.exegetico-pasaje-completo .exegetico-texto-original {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #0f172a;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 0;
}
#exegetico-pasaje-completo .exegetico-traduccion-estandar,
.exegetico-pasaje-completo .exegetico-traduccion-estandar {
    color: #475569;
    font-style: italic;
}

.exegetico-vacio {
    color: #94a3b8;
    font-size: 13px;
    font-style: italic;
    text-align: center;
    padding: 20px 0;
}

/* ===================================================================
   Bloques verticales por palabra (interlineal)
   =================================================================== */

.exegetico-bloques-wrap { margin-bottom: 18px; }

/* ===================================================================
   Tarjetas interlineales (CARDS) — FLUJO FLEX CONTINUO (no Excel)
   
   El contenedor es flex-wrap puro: cada card fluye de izquierda a
   derecha como si fuera una palabra en un párrafo. Cards cortas
   (artículos: ὁ, οἱ, καί) ocupan el ancho mínimo del texto;
   cards largas se acomodan solas sin forzar columnas uniformes.
   
   CLAVES contra el "efecto Excel":
     - SIN  grid-template-columns       (no usamos display: grid)
     - SIN  align-items: stretch        (no estiramos al alto común)
     - SIN  min-width   en .palabra-card
     - CON  width: max-content          (la card se mide al contenido)
     - CON  flex: 0 1 auto              (puede shrink en última instancia)
   =================================================================== */

.exegetico-grid,
.interlineal-contenedor {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 6px;                /* spec del producto: y=8, x=6 */
    align-items: flex-start;     /* sin stretch — alto natural */
    /* SIN grid-template-columns. SIN columns. SIN min-width. */
}

/* ---- Lectura interlineal continua (mismas tarjetas, flujo por versículo) ---- */
#exegetico-subpanel-interlineal.modo-lectura-interlineal #exegetico-pasaje-completo,
#exegetico-subpanel-interlineal.modo-lectura-interlineal #exegetico-seccion-interlineal,
#exegetico-subpanel-interlineal.modo-lectura-interlineal #capa-morfologica,
#exegetico-subpanel-interlineal.modo-lectura-interlineal #capa-semantica,
#exegetico-subpanel-interlineal.modo-lectura-interlineal #capa-sintactica,
#exegetico-subpanel-interlineal.modo-lectura-interlineal #capa-diagrama-leedy {
    display: none !important;
}

#exegetico-subpanel-interlineal:not(.modo-lectura-interlineal) .interlineal-lectura-seccion {
    display: none !important;
}

/* Lectura interlineal: scroll solo en TOC y texto, no en exegetico-body */
#exegetico-subpanel-interlineal.modo-lectura-interlineal {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    gap: 0;
}

#exegetico-subpanel-interlineal.modo-lectura-interlineal .exegetico-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    padding: 4px 6px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

#exegetico-subpanel-interlineal.modo-lectura-interlineal #exegetico-seccion-interlineal-lectura {
    flex: 1 1 0;
    min-height: 0;
    margin-bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.interlineal-lectura-seccion[hidden] {
    display: none !important;
}

.interlineal-lectura-seccion {
    overflow: hidden;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Tabla de contenido — Lectura interlineal */
.interlineal-lectura-layout {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.interlineal-lectura-layout--sin-toc .lectura-interlineal-toc {
    display: none;
}

.lectura-interlineal-toc {
    flex: 0 0 220px;
    width: 220px;
    min-width: 220px;
    align-self: stretch;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-right: 1px solid #e0e0e0;
    overflow: hidden;
}

.lectura-interlineal-toc-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 8px 8px 10px;
    border-bottom: 1px solid #ececec;
    flex-shrink: 0;
}

.lectura-interlineal-toc-tabs {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f5f5;
}

.lectura-interlineal-toc-tab {
    flex: 1 1 50%;
    margin: 0;
    padding: 5px 10px;
    font-family: system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #555;
    background: transparent;
    border: none;
    cursor: pointer;
}

.lectura-interlineal-toc-tab + .lectura-interlineal-toc-tab {
    border-left: 1px solid #d4d4d4;
}

.lectura-interlineal-toc-tab:hover:not(.is-activa) {
    background: #ebebeb;
    color: #333;
}

.lectura-interlineal-toc-tab.is-activa {
    color: #1a1a1a;
    background: #ffffff;
}

.lectura-interlineal-toc-cerrar {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    font-size: 1.15rem;
    line-height: 1;
    color: #666;
    background: transparent;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.lectura-interlineal-toc-cerrar:hover {
    color: #1a1a1a;
    background: #f0f0f0;
}

.lectura-interlineal-toc-lista {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    padding: 4px 0 12px;
}

.lectura-toc-libro {
    margin: 0;
}

.lectura-interlineal-toc-lista[data-toc-filtro="AT"] .lectura-toc-libro[data-testamento="NT"],
.lectura-interlineal-toc-lista[data-toc-filtro="NT"] .lectura-toc-libro[data-testamento="AT"],
#lectura-biblia-toc-lista[data-toc-filtro="AT"] .lectura-toc-libro[data-testamento="NT"],
#lectura-biblia-toc-lista[data-toc-filtro="NT"] .lectura-toc-libro[data-testamento="AT"] {
    display: none;
}

.lectura-toc-libro-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 5px 10px 5px 8px;
    font-family: system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    text-align: left;
    color: #333;
    background: transparent;
    border: none;
    cursor: pointer;
}

.lectura-toc-libro-btn:hover {
    background: #f5f5f5;
}

.lectura-toc-libro-btn.is-activo {
    background: #ececec;
    font-weight: 600;
}

.lectura-toc-caret {
    flex: 0 0 auto;
    display: inline-block;
    width: 1em;
    font-size: 11px;
    color: #888;
    transition: transform 0.15s ease;
}

.lectura-toc-libro-btn[aria-expanded="true"] .lectura-toc-caret {
    transform: rotate(90deg);
}

.lectura-toc-libro-nombre {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lectura-toc-caps {
    list-style: none;
    margin: 0;
    padding: 0 0 4px 0;
}

.lectura-toc-caps[hidden] {
    display: none;
}

.lectura-toc-cap-btn {
    display: block;
    width: 100%;
    padding: 4px 10px 4px 28px;
    font-family: system-ui, sans-serif;
    font-size: 12px;
    text-align: left;
    color: #444;
    background: transparent;
    border: none;
    cursor: pointer;
}

.lectura-toc-cap-btn:hover {
    background: #f5f5f5;
}

.lectura-toc-cap-btn.is-activo {
    background: #e8e8e8;
    font-weight: 600;
    color: #1a1a1a;
}

.lectura-toc-vacio {
    margin: 12px 10px;
    font-family: system-ui, sans-serif;
    font-size: 12px;
    color: #888;
}

.interlineal-lectura-main {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.exegetico-lectura-toc-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 0;
    line-height: 0;
    color: #1a1a1a;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.exegetico-lectura-toc-toggle:hover {
    background: rgba(0, 0, 0, 0.08);
}

.exegetico-lectura-toc-toggle[aria-pressed="false"] {
    opacity: 0.65;
}

.interlineal-lectura-cuerpo {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    padding: 1rem 1.15rem 1.5rem;
    font-family: var(--font-biblia);
    font-size: 15px;
    line-height: 1.45;
    color: #2c2825;
    background: #faf7f0;
    border: 1px solid #e4ddd0;
    border-radius: 8px;
}

.interlineal-lectura-versiculo {
    display: block;
    margin: 0 0 0.9rem 0;
    width: 100%;
    text-align: left;
}

/* Lectura interlineal: misma fila rail + tarjetas que Exégesis interlineal */
.interlineal-lectura-cuerpo .interlineal-lectura-versiculo.exegetico-grid-versiculo {
    margin: 0 0 0.9rem 0;
    width: 100%;
}

.interlineal-lectura-cuerpo .interlineal-lectura-versiculo .exegetico-grid-versiculo-tarjetas {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 8px 6px;
    width: 100%;
}

.interlineal-lectura-cuerpo .interlineal-lectura-versiculo .versiculo-rail {
    align-self: flex-start;
    flex: 0 0 auto;
}

.interlineal-lectura-cuerpo .interlineal-lectura-versiculo .palabra-card {
    display: inline-flex;
    flex: 0 0 auto;
    vertical-align: top;
    margin: 0 3px 6px 0;
    max-width: none;
}

.interlineal-lectura-versiculo-cabecera {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0 0.2rem 0;
    width: 100%;
}

/* ---- Columna lateral: número + iconos por tipo de referencia ---- */
.versiculo-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    flex: 0 0 auto;
    align-self: flex-start;
    min-width: 1.55rem;
    padding: 2px 4px 0 2px;
    margin: 0 2px 0 0;
}

.exegetico-grid[data-idioma-original="hebreo"] .versiculo-rail,
.interlineal-lectura-cuerpo[data-idioma-original="hebreo"] .versiculo-rail {
    margin: 0 0 0 2px;
    padding: 2px 2px 0 4px;
}

.versiculo-rail-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35em;
    padding: 0;
    margin: 0 0 1px 0;
    border: none;
    background: transparent;
    font-size: 0.72em;
    font-weight: 700;
    font-family: system-ui, sans-serif;
    color: #2563eb;
    line-height: 1.1;
    cursor: pointer;
}

.versiculo-rail-num:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.versiculo-rail-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    line-height: 0;
    opacity: 0.92;
}

.versiculo-rail-btn--visible {
    display: inline-flex;
}

.versiculo-rail-btn:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
}

.versiculo-rail-btn--propias {
    color: #2563eb;
}

.versiculo-rail-btn--comentarios {
    color: #7c3aed;
}

.versiculo-rail-btn--gramatica {
    color: #059669;
}

.versiculo-rail-btn__icon {
    display: block;
}

.versiculo-rail-num.notas-ancla-versiculo--activa,
.versiculo-rail-btn--activa {
    background: rgba(37, 99, 235, 0.12);
}

.interlineal-lectura-flujo {
    display: block;
}

/* Legacy: ya no se usa en lectura con rail; conservado por si queda HTML antiguo en caché */
.interlineal-lectura-flujo.interlineal-lectura-flujo--con-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 8px 6px;
}

/* ---- Versículos en grilla interlineal (NT multi-verso) ---- */
.exegetico-grid:has(.exegetico-grid-versiculo--ltr),
.interlineal-contenedor:has(.exegetico-grid-versiculo--ltr) {
    flex-direction: column;
    align-items: stretch;
}

.exegetico-grid-versiculo--ltr {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    flex-basis: 100%;
}

.exegetico-grid-versiculo-cabecera {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.35rem 0;
    flex-shrink: 0;
}

.exegetico-grid-versiculo-tarjetas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 6px;
    align-items: flex-start;
    width: 100%;
}

.exegetico-grid-versiculo--ltr + .exegetico-grid-versiculo--ltr,
.interlineal-contenedor .exegetico-grid-versiculo--ltr + .exegetico-grid-versiculo--ltr {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #e2e8f0;
}

button.exegetico-num-versiculo--cabecera,
button.interlineal-lectura-versiculo-num.notas-ancla-versiculo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    padding: 0 0.2em;
    margin: 0;
    border: none;
    background: transparent;
    font-size: 0.72em;
    font-weight: 700;
    font-family: system-ui, sans-serif;
    color: #2563eb;
    vertical-align: super;
    line-height: 1;
    cursor: pointer;
}

button.exegetico-num-versiculo--cabecera:hover,
button.interlineal-lectura-versiculo-num.notas-ancla-versiculo:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.notas-ancla-versiculo.notas-ancla-versiculo--activa,
.exegetico-num-versiculo--cabecera.notas-ancla-versiculo--activa,
.interlineal-lectura-versiculo-num.notas-ancla-versiculo--activa {
    background: rgba(37, 99, 235, 0.12);
    border-radius: 3px;
}

.notas-versiculo-indicador {
    display: none;
    align-items: center;
    color: #b45309;
    line-height: 0;
}

.notas-versiculo-indicador.notas-versiculo-indicador--visible {
    display: inline-flex;
}

.notas-versiculo-indicador[hidden] {
    display: none !important;
}

.notas-versiculo-indicador__icon {
    display: block;
}

.interlineal-lectura-versiculo-num {
    display: inline-block;
    min-width: 1.4em;
    margin-right: 0.25em;
    font-size: 0.72em;
    font-weight: 700;
    font-family: system-ui, sans-serif;
    color: #9a8f7e;
    vertical-align: super;
    line-height: 0;
}

.notas-hint-color { font-weight: 700; }
.notas-hint-color--propias { color: #2563eb; }
.notas-hint-color--comentarios { color: #7c3aed; }
.notas-hint-color--gramatica { color: #059669; }

.interlineal-lectura-flujo {
    display: block;
}

/* LTR continuo (eje español / NT): tarjetas en línea como prosa */
.interlineal-lectura-cuerpo .interlineal-lectura-flujo .palabra-card {
    display: inline-block;
    vertical-align: top;
    margin: 0 3px 6px 0;
    max-width: calc(100% - 4px);
}

.interlineal-lectura-cuerpo .palabra-card--7filas {
    width: max-content;
}

/* AT eje hebreo: mismas tarjetas flex que la grilla interlineal clásica */
.interlineal-lectura-cuerpo .exegetico-grid-versiculo .palabra-card {
    display: inline-flex;
    vertical-align: initial;
    margin: 0;
    max-width: none;
}

.lectura-toc-sin-caps {
    padding: 4px 12px 6px 28px;
    font-family: system-ui, sans-serif;
    font-size: 11px;
    color: #888;
    list-style: none;
}

.interlineal-lectura-cuerpo .strong-link,
.interlineal-lectura-cuerpo .louw-nida-link,
.interlineal-lectura-cuerpo .sdbh-link {
    cursor: pointer;
}

/* Clic en palabra → resaltar familia léxica (mismo lema / raíz)
   Lectura interlineal y Exégesis interlineal (#exegetico-grid). */
.interlineal-lectura-cuerpo .palabra-card,
#exegetico-grid .palabra-card {
    cursor: pointer;
}
.interlineal-lectura-cuerpo .palabra-card--familia-origen,
#exegetico-grid .palabra-card--familia-origen {
    background: rgba(251, 191, 36, 0.22) !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.65);
    border-radius: 4px;
}
.interlineal-lectura-cuerpo .palabra-card--familia-pariente,
#exegetico-grid .palabra-card--familia-pariente {
    background: rgba(52, 211, 153, 0.16) !important;
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.45);
    border-radius: 4px;
}
.interlineal-lectura-cuerpo .palabra-card.active-cell,
#exegetico-grid .palabra-card.active-cell {
    background-color: #fffbeb !important;
    box-shadow: 0 0 0 2px #fbbf24 !important;
    border-radius: 4px;
}

.interlineal-lectura-versiculo--ancla {
    scroll-margin-top: 12px;
    background: rgba(92, 122, 106, 0.06);
    border-radius: 4px;
}

.interlineal-lectura-vacio {
    font-family: system-ui, sans-serif;
    font-size: 13px;
}

.interlineal-lectura-cabecera {
    flex-shrink: 0;
    padding: 0.35rem 0.15rem 0.5rem;
    font-family: system-ui, sans-serif;
    font-size: 12px;
    color: #6b6560;
    border-bottom: 1px solid #e4ddd0;
    margin-bottom: 0.5rem;
}

.interlineal-lectura-barra {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.35rem 0.15rem 0.25rem;
    border-bottom: 1px solid #e4ddd0;
    margin-bottom: 0.35rem;
}

.interlineal-lectura-cabecera-ref {
    margin: 0;
    padding: 0;
    border: none;
}

.interlineal-lectura-eje-toggle {
    margin-left: auto;
}

/* Reorden tipográfico en lectura interlineal (tarjetas relacionales) */
.interlineal-lectura-cuerpo[data-vista="griego"] .palabra-original       { order: 1; }
.interlineal-lectura-cuerpo[data-vista="griego"] .palabra-rva-secundaria { order: 2; }
.interlineal-lectura-cuerpo[data-vista="traduccion"] .palabra-rva-secundaria { order: 1; }
.interlineal-lectura-cuerpo[data-vista="traduccion"] .palabra-original       { order: 2; }
.interlineal-lectura-cuerpo[data-vista="traduccion"] .palabra-rva-secundaria {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}
.interlineal-lectura-cuerpo[data-vista="traduccion"] .palabra-original {
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
}

/* Tarjetas palabras_interlineal — jerarquía según eje */
.interlineal-lectura-cuerpo[data-vista="traduccion"] .palabra-card--7filas .pi-fila-griego {
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
}
.interlineal-lectura-cuerpo[data-vista="traduccion"] .palabra-card--7filas .pi-fila-es {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}
.interlineal-lectura-cuerpo[data-vista="griego"] .palabra-card--7filas .pi-fila-griego {
    font-size: 1.05rem;
    font-weight: 600;
    color: #0f172a;
}
.interlineal-lectura-cuerpo[data-vista="griego"] .palabra-card--7filas .pi-fila-es {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
}

/* Mismo criterio tipográfico en grid Interlineal clásico */
.exegetico-grid[data-vista="traduccion"] .palabra-card--7filas .pi-fila-griego {
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
}
.exegetico-grid[data-vista="traduccion"] .palabra-card--7filas .pi-fila-es {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}
.exegetico-grid[data-vista="griego"] .palabra-card--7filas .pi-fila-griego {
    font-size: 1.05rem;
    font-weight: 600;
    color: #0f172a;
}
.exegetico-grid[data-vista="griego"] .palabra-card--7filas .pi-fila-es {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
}

/* Separadores de versículo en grid: obsoletos (número en superíndice en 1.ª palabra) */
.exegetico-separador-versiculo {
    display: none !important;
}

.palabra-card {
    flex: 0 1 auto;              /* no grow; puede shrink si hace falta */
    width: max-content;          /* ancho = exactamente lo necesario */
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;     /* CRÍTICO: NO centrar → no parece columna */
    text-align: left;            /* CRÍTICO: NO centrar → no parece columna */
    padding: 4px;                /* spec del producto */
    border: 1px solid #e2e8f0;   /* slate-200 — borde sutil */
    border-radius: 0.375rem;     /* spec del producto */
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
    transition: border-color 100ms ease, box-shadow 100ms ease,
                background 100ms ease;
    position: relative;
}
.palabra-card:hover {
    border-color: #cbd5e1;       /* slate-300 */
    box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.10);
    background: #fafbfc;
    z-index: 2;                  /* el tooltip flota sobre vecinos */
}

/* Línea 1 — Griego principal (por default; reordenable por toggle) */
.palabra-original {
    font-family: var(--font-greek);
    font-size: 1.1rem;
    color: #0f172a;
    font-weight: 600;
    line-height: 1.2;
    cursor: help;                /* avisa que hay tooltip (glosa + Strong) */
    white-space: nowrap;
}

/* Línea 2 — RVA contextual por palabra (tapiz secundario por default) */
.palabra-rva-secundaria {
    font-size: 11px;
    color: #64748b;              /* slate-500 — gris tenue */
    font-weight: 500;
    line-height: 1.2;
    margin-top: 1px;
    white-space: nowrap;
    max-width: 10em;             /* cap suave; glosas largas se elipsan */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Línea 3 — Transliteración (sutil itálica) */
.palabra-translit {
    font-family: var(--font-greek);
    font-size: 10px;
    font-style: italic;
    color: #94a3b8;              /* slate-400 */
    line-height: 1.1;
    letter-spacing: 0.02em;
    margin-top: 2px;
    white-space: nowrap;
}

/* Línea 4 — Chip morfológico corto (VPAI1S, NNMS, ...) */
.palabra-codigo-morfo {
    background: #f1f5f9;             /* slate-100 */
    border: 1px solid #e2e8f0;       /* slate-200 */
    color: #475569;                  /* slate-600 */
    font-family: ui-monospace, "SF Mono", Menlo, "Cascadia Code", monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    margin: 3px 0 4px;
    border-radius: 3px;
    cursor: help;
    line-height: 1.3;
    white-space: nowrap;
    transition: background 80ms ease, color 80ms ease,
                border-color 80ms ease;
}
.palabra-codigo-morfo:hover,
.palabra-codigo-morfo:focus-visible {
    background: #e0e7ff;             /* indigo-100 */
    color: #3730a3;                  /* indigo-800 */
    border-color: #a5b4fc;
    outline: none;
}

/* Línea 5 — INPUT EDITABLE en verde esmeralda (traducción personal) */
.palabra-personal {
    width: 100%;                 /* respeta el ancho natural de la card */
    min-width: 0;                /* CRÍTICO: el placeholder NO infla la card */
    padding: 2px 3px;
    box-sizing: border-box;
    border: none;
    background: transparent;
    color: #059669;              /* emerald-600 — texto escrito por usuario */
    font-size: 12px;
    font-weight: 600;
    text-align: left;            /* coherente con la card (no centrado) */
    outline: none;
    line-height: 1.25;
    font-family: inherit;
    border-top: 1px dashed #d4d4d8;
    margin-top: 2px;
    transition: background 100ms ease, border-color 100ms ease,
                color 100ms ease;
}
.palabra-personal::placeholder {
    color: #6ee7b7;                  /* emerald-300 — invitación sutil */
    font-style: italic;
    font-weight: 500;
    opacity: 1;
}
.palabra-personal:focus {
    background: rgba(16, 185, 129, 0.08);
    border-top-color: #34d399;       /* emerald-400 */
    color: #064e3b;                  /* emerald-900 al escribir */
}

/* Dos modos de lectura dentro de la capa RV60 (relacional vs base RVA) */
.palabra-rva-secundaria .palabra-rva-modo-relacional,
.palabra-rva-secundaria .palabra-rva-modo-base {
    display: block;
    white-space: nowrap;
    max-width: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.exegetico-grid[data-vista="griego"] .palabra-rva-modo-base {
    display: none;
}
.exegetico-grid[data-vista="traduccion"] .palabra-rva-modo-relacional {
    display: none;
}

/* Morfología como capa técnica (mismo estilo chip, clase unificada) */
.palabra-celda-tecnica.palabra-codigo-morfo {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-family: ui-monospace, "SF Mono", Menlo, "Cascadia Code", monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    margin: 3px 0 2px;
    border-radius: 3px;
    cursor: help;
    line-height: 1.3;
    white-space: nowrap;
}
.palabra-celda-tecnica.palabra-codigo-morfo:empty {
    display: none;
}

/* ===================================================================
   Reorder de capas según vista activa (toggle Griego / RVA Primero)
   
   Solo capas 1 y 2 (eje griego ↔ eje RV60). Capas 3–6 fijas en orden DOM.
   =================================================================== */

/* --- Modo "Griego Primero" (default): griego → glosa → Strong → morph --- */
.exegetico-grid[data-vista="griego"] .palabra-original       { order: 1; }
.exegetico-grid[data-vista="griego"] .palabra-rva-secundaria { order: 2; }
.exegetico-grid[data-vista="griego"] .palabra-strong-codigo  { order: 3; }
.exegetico-grid[data-vista="griego"] .palabra-codigo-morfo   { order: 4; }
.exegetico-grid[data-vista="griego"] .palabra-ln-codigo      { order: 5; }
.exegetico-grid[data-vista="griego"] .palabra-personal       { order: 6; }

/* --- Modo "RVA Primero" --- */
.exegetico-grid[data-vista="traduccion"] .palabra-rva-secundaria { order: 1; }
.exegetico-grid[data-vista="traduccion"] .palabra-original       { order: 2; }
.exegetico-grid[data-vista="traduccion"] .palabra-strong-codigo  { order: 3; }
.exegetico-grid[data-vista="traduccion"] .palabra-codigo-morfo   { order: 4; }
.exegetico-grid[data-vista="traduccion"] .palabra-ln-codigo      { order: 5; }
.exegetico-grid[data-vista="traduccion"] .palabra-personal       { order: 6; }

/* Inversión de jerarquía tipográfica cuando RVA va arriba: */
.exegetico-grid[data-vista="traduccion"] .palabra-rva-secundaria {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}
.exegetico-grid[data-vista="traduccion"] .palabra-original {
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;                  /* griego pasa a rol secundario */
}


/* ===================================================================
   Línea 3 del PASAJE COMPLETO — "TU VERSIÓN" (tapiz superior)
   
   Arranca como una SUCESIÓN DE SPANS, uno por cada token del array
   `texto_rva_real`. Cada span lleva `data-rva-index` para reemplazo
   por índice O(1). El JS aplica clases sobre los spans:
     - .rva-token              → estado base (igual a la RVA original)
     - .rva-token--mod         → palabra reemplazada por el usuario (verde)
     - .rva-token--tachada     → omisión consciente (input "-" o "—")
     - .rva-token--multi-cont  → token continuación de una fusión
                                 multipalabra (vaciado/oculto)
   =================================================================== */

.exegetico-linea-check {
    width: 14px;
    height: 14px;
    margin: 0;
    flex-shrink: 0;
    accent-color: #2563eb;
    cursor: pointer;
}
#exegetico-pasaje-completo .exegetico-linea--oculta {
    display: none !important;
}
.exegetico-linea-cuerpo {
    margin: 0;
}
/* Superíndice de versículo en pasaje completo e interlineal */
.palabra-card .exegetico-num-versiculo,
.palabra-card--7filas .exegetico-num-versiculo {
    margin-right: 0.15em;
}
.exegetico-num-versiculo {
    font-size: 0.72em;
    font-weight: 700;
    color: #2563eb;
    vertical-align: super;
    line-height: 0;
    margin-right: 0.2em;
    user-select: none;
}
.exegetico-linea-label {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #94a3b8;                  /* slate-400 */
    background: #f1f5f9;             /* slate-100 */
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    padding: 1px 6px;
    min-width: 52px;
    text-align: center;
}
.exegetico-linea-label--remendada {
    color: #047857;                  /* emerald-700 */
    background: #ecfdf5;             /* emerald-50 */
    border-color: #a7f3d0;           /* emerald-200 */
}

#exegetico-pasaje-completo .exegetico-rva-remendada,
.exegetico-pasaje-completo .exegetico-rva-remendada {
    white-space: pre-wrap;
}
.exegetico-pasaje-completo .exegetico-rva-remendada .exegetico-num-versiculo {
    font-style: normal;
}
.exegetico-rva-remendada {
    font-size: 13px;
    line-height: 1.6;
    color: #475569;                  /* slate-600 — tejido neutro RVA base */
    margin: 0;
    flex: 1;
    min-width: 0;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    overflow: visible;
    /* La línea se construye como sucesión de spans `.rva-token` con
       índice; el JS modifica `class` y `textContent` de cada span sin
       tocar el tejido vecino. */
}

/* Token RVA base — idéntico visualmente a la prosa neutra. */
.rva-token {
    transition: background 120ms ease, color 120ms ease;
}

/* Token REEMPLAZADO por el usuario (emerald-600 + bold) — equivale
   al spec del producto: text-emerald-600 font-bold. */
.rva-token--mod {
    color: #059669;                  /* emerald-600 */
    font-weight: 700;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 60%,
        rgba(16, 185, 129, 0.18) 60%,
        rgba(16, 185, 129, 0.18) 95%,
        transparent 95%
    );
    padding: 0 2px;
    border-radius: 2px;
    cursor: help;
}
.rva-token--mod:hover {
    background: rgba(16, 185, 129, 0.28);
}

/* Token TACHADO — omisión consciente del usuario (input "-" o "—"). */
.rva-token--tachada {
    color: #94a3b8;                  /* slate-400 — apagado */
    font-weight: 500;
    text-decoration: line-through;
    text-decoration-color: rgba(239, 68, 68, 0.6); /* red-500 tenue */
    text-decoration-thickness: 1.5px;
    cursor: help;
    opacity: 0.7;
}

/* Token continuación de una fusión multipalabra — su contenido ya
   fue absorbido por el primer token del grupo; lo ocultamos por
   completo (incluyendo el espacio previo) para no romper la prosa. */
.rva-token--multi-cont {
    display: none;
}

/* Placeholder editable de «TU VERSIÓN» sin remiendos guardados. */
.exegetico-tu-version-vacio {
    color: #94a3b8;
    font-style: italic;
    cursor: text;
    min-height: 1.6em;
    border: 1px dashed #cbd5e1;
    border-radius: 4px;
    padding: 4px 8px;
    background: #f8fafc;
}
.exegetico-tu-version-vacio:focus {
    outline: 2px solid rgba(16, 185, 129, 0.35);
    outline-offset: 1px;
    color: #64748b;
    background: #fff;
}


/* ===================================================================
   Interruptor de vista principal (Griego primero / Traducción primero)
   Segmented control sutil en la cabecera del panel exegético.
   =================================================================== */

.exegetico-vista-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px;
    background: #f1f5f9;             /* slate-100 */
    border: 1px solid #cbd5e1;       /* slate-300 */
    border-radius: 6px;
    flex-shrink: 0;
}
.exegetico-vista-label {
    font-size: 10.5px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    padding: 0 6px 0 4px;
}
.exegetico-vista-btn {
    background: transparent;
    border: none;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 500;
    color: #475569;                  /* slate-600 */
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    white-space: nowrap;
}
.exegetico-vista-btn:hover {
    background: rgba(255, 255, 255, 0.7);
    color: #1e293b;
}
.exegetico-vista-btn.is-activa {
    background: #ffffff;
    color: #0f172a;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10);
}
.exegetico-vista-btn:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 1px;
}

/* Botón Centro de Referencia Gramatical (entre Eje y Notas) */
.piramide-prep-abrir-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 1.85rem;
    margin-left: 0.35rem;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.piramide-prep-abrir-btn:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
}
.piramide-prep-abrir-btn:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 1px;
}
.piramide-prep-abrir-btn__icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
}

/* Ventana aparte — Centro de Referencia Gramatical */
.piramide-ventana-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    flex: 0 0 auto;
}

/* Selector idioma NT / AT */
.refgram-idioma {
    display: flex;
    flex: 0 0 auto;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    background: #eef2f7;
    border-bottom: 1px solid #e2e8f0;
}
.refgram-idioma-btn {
    appearance: none;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.38rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.refgram-idioma-btn:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
}
.refgram-idioma-btn.is-activa {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}
.refgram-idioma-btn:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 1px;
}

/* Paneles del centro gramatical */
.refgram-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}
.refgram-panel.hidden {
    display: none !important;
}
.refgram-subtabs {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 auto;
    gap: 0;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 0.5rem;
}
.refgram-subtab {
    appearance: none;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #475569;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.25;
    padding: 0.45rem 0.7rem;
    margin-bottom: -1px;
    cursor: pointer;
    text-align: left;
}
.refgram-subtab:hover {
    color: #0f172a;
    background: #f1f5f9;
}
.refgram-subtab.is-activa {
    color: #1d4ed8;
    border-bottom-color: #2563eb;
    background: #fff;
}
.refgram-subtab:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: -2px;
}
.refgram-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 1rem 1.25rem 1.75rem;
    max-width: 54rem;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.refgram-intro {
    margin: 0 0 1rem;
    font-size: 13.5px;
    line-height: 1.55;
    color: #1e293b;
}
.refgram-h3 {
    margin: 1.25rem 0 0.55rem;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}
.refgram-lista {
    margin: 0.35rem 0 0;
    padding-left: 1.2rem;
    font-size: 13px;
    line-height: 1.55;
    color: #1e293b;
}
.refgram-lista li { margin-bottom: 0.35rem; }
.refgram-lista [lang="el"] {
    font-family: var(--font-greek);
    font-weight: 600;
}
.refgram-nota,
.refgram-nota-final {
    margin: 0.75rem 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #475569;
}
.refgram-he,
.refgram-tabla--he .refgram-he {
    font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", "David", serif;
    font-size: 1.15em;
    font-weight: 600;
    direction: rtl;
    unicode-bidi: plaintext;
}
.refgram-tabla-wrap {
    overflow-x: auto;
    margin-top: 0.35rem;
}
.refgram-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #111827;
    border: 1px solid #cbd5e1;
}
.refgram-tabla th,
.refgram-tabla td {
    border: 1px solid #e2e8f0;
    padding: 0.5rem 0.55rem;
    text-align: left;
    vertical-align: top;
    background: #fff;
}
.refgram-tabla thead th {
    background: #f1f5f9;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}
.refgram-tabla tbody tr:nth-child(even) td {
    background: #f8fafc;
}
.refgram-strong {
    appearance: none;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 700;
    font-family: Consolas, "Segoe UI", monospace;
    padding: 0.12rem 0.35rem;
    border-radius: 4px;
    cursor: pointer;
}
.refgram-strong:hover {
    background: #dbeafe;
}
.refgram-strong:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 1px;
}
.refgram-strong-muted {
    font-size: 11px;
    color: #64748b;
}
.refgram-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 0.75rem;
}
.refgram-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.refgram-card__cab {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.6rem;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.refgram-card__caso {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
}
.refgram-card__preg {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
}
.refgram-card__preg[lang="el"] {
    font-family: var(--font-greek);
}
.refgram-card__preg-es {
    margin: 0;
    padding: 0.35rem 0.7rem 0;
    font-size: 11.5px;
    font-weight: 600;
    color: #475569;
}
.refgram-card__body {
    margin: 0;
    padding: 0.4rem 0.7rem 0.75rem;
    font-size: 12.5px;
    line-height: 1.5;
    color: #1e293b;
}
.refgram-card__body code {
    font-size: 0.92em;
    background: #f1f5f9;
    padding: 0.05rem 0.28rem;
    border-radius: 3px;
}
.refgram-card[data-caso="nominativo"] .refgram-card__cab { background: #fde047; }
.refgram-card[data-caso="genitivo"] .refgram-card__cab { background: #93c5fd; }
.refgram-card[data-caso="dativo"] .refgram-card__cab { background: #86efac; }
.refgram-card[data-caso="acusativo"] .refgram-card__cab { background: #fdba74; }
.refgram-card[data-caso="vocativo"] .refgram-card__cab { background: #f9a8d4; }

@media (max-width: 640px) {
    .refgram-idioma { flex-wrap: wrap; }
    .refgram-scroll { padding: 0.85rem 0.85rem 1.4rem; }
    .piramide-ventana-cuerpo { flex-direction: column; }
    .piramide-prep-panel {
        flex: 0 0 auto;
        max-width: none;
        max-height: 40%;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
}
.piramide-ventana-titulos {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.piramide-ventana-titulo {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}
.piramide-ventana-sub {
    font-size: 11px;
    color: #64748b;
}
.piramide-ventana-btn {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    border-radius: 4px;
    width: 1.85rem;
    height: 1.7rem;
    line-height: 1;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
}
.piramide-ventana-btn:hover { background: #e2e8f0; }
.piramide-ventana-btn.is-activa {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}
.piramide-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    flex: 0 0 auto;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 0.5rem;
}
.piramide-tab {
    appearance: none;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    padding: 0.55rem 0.75rem;
    margin-bottom: -1px;
    cursor: pointer;
    max-width: 100%;
    text-align: left;
}
.piramide-tab:hover {
    color: #0f172a;
    background: #f1f5f9;
}
.piramide-tab.is-activa {
    color: #1d4ed8;
    border-bottom-color: #2563eb;
    background: #fff;
}
.piramide-tab:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: -2px;
}
.piramide-ventana-cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    background: #fff;
}
.piramide-ventana-cuerpo.hidden,
.piramide-casos-panel.hidden,
.refgram-panel .piramide-ventana-cuerpo.hidden,
.refgram-panel .piramide-casos-panel.hidden {
    display: none !important;
}
.refgram-panel > .piramide-ventana-cuerpo,
.refgram-panel > .piramide-casos-panel {
    flex: 1 1 auto;
    min-height: 0;
}
.piramide-casos-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: #fff;
}
.piramide-casos-scroll {
    max-width: 52rem;
    margin: 0 auto;
    padding: 1.1rem 1.25rem 1.75rem;
}
.piramide-casos-intro {
    margin: 0 0 1.15rem;
    font-size: 13.5px;
    line-height: 1.55;
    color: #1e293b;
    text-align: justify;
}
.piramide-casos-intro [lang="el"] {
    font-family: var(--font-greek);
    font-weight: 600;
}
.piramide-casos-tabla-wrap {
    overflow-x: auto;
}
.piramide-casos-tabla {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
    color: #111827;
    border: 1px solid #1f2937;
}
.piramide-casos-tabla th,
.piramide-casos-tabla td {
    border: 1px solid #1f2937;
    padding: 0.65rem 0.55rem;
    text-align: center;
    vertical-align: middle;
    background: #fde8d8;
}
.piramide-casos-tabla thead th {
    font-weight: 700;
    color: #111827;
}
.piramide-casos-tabla .piramide-casos-esquina {
    background: #f1f5f9;
    width: 22%;
}
.piramide-casos-tabla .piramide-casos-th-caso[data-caso="acusativo"] {
    background: #fdba74;
}
.piramide-casos-tabla .piramide-casos-th-caso[data-caso="genitivo"] {
    background: #93c5fd;
}
.piramide-casos-tabla .piramide-casos-th-caso[data-caso="dativo"] {
    background: #86efac;
}
.piramide-casos-tabla tbody th {
    background: #fde8d8;
    font-weight: 600;
    text-align: left;
    padding-left: 0.75rem;
    white-space: nowrap;
}
.piramide-casos-tabla tbody th [lang="el"] {
    font-family: var(--font-greek);
    font-weight: 700;
}
.piramide-casos-tabla td.piramide-casos-lleno {
    background: #fff;
    font-family: var(--font-greek);
    font-weight: 600;
    line-height: 1.45;
}
.piramide-casos-prep {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0.05rem 0.12rem;
    margin: 0;
    font: inherit;
    font-family: var(--font-greek);
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    border-radius: 3px;
    text-decoration: underline;
    text-decoration-color: rgba(15, 23, 42, 0.28);
    text-underline-offset: 2px;
}
.piramide-casos-prep:hover {
    background: #e2e8f0;
    color: #1d4ed8;
    text-decoration-color: #1d4ed8;
}
.piramide-casos-prep:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 1px;
}
.piramide-casos-sep {
    color: #334155;
    font-weight: 600;
    margin-right: 0.15rem;
    user-select: none;
}
.piramide-prep-panel {
    flex: 0 0 15.5rem;
    min-width: 13rem;
    max-width: 18rem;
    border-right: 1px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.piramide-prep-acciones {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.55rem 0.55rem 0.35rem;
    flex: 0 0 auto;
}
.piramide-prep-accion {
    font-size: 11px;
    font-weight: 600;
    color: #334155;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 0.28rem 0.4rem;
    cursor: pointer;
}
.piramide-prep-accion:hover {
    background: #e2e8f0;
}
.piramide-prep-lista {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.15rem 0.45rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.piramide-prep-seccion {
    margin-top: 0.35rem;
    padding: 0.35rem 0.2rem 0.1rem;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    border-top: 1px solid #e2e8f0;
}
.piramide-prep-seccion:first-child {
    margin-top: 0;
    border-top: none;
}
.piramide-prep-grupo {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.2rem 0.15rem 0.35rem;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #e2e8f0;
}
.piramide-prep-grupo-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.4rem;
    cursor: pointer;
    padding: 0.15rem 0.2rem;
    border-radius: 3px;
    user-select: none;
}
.piramide-prep-grupo-cab:hover {
    background: #f1f5f9;
}
.piramide-prep-grupo-cab input {
    margin: 0;
    cursor: pointer;
}
.piramide-prep-grupo-titulo {
    font-size: 11.5px;
    font-weight: 700;
    color: #0f172a;
}
.piramide-prep-grupo-sub {
    flex: 1 1 100%;
    margin-left: 1.35rem;
    font-size: 10px;
    color: #64748b;
    font-weight: 500;
}
.piramide-prep-grupo-items {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding-left: 0.15rem;
}
.piramide-prep-fila {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding-right: 0.1rem;
}
.piramide-prep-item {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 14px;
    color: #0f172a;
    cursor: pointer;
    padding: 0.16rem 0.2rem;
    border-radius: 3px;
    user-select: none;
}
.piramide-prep-item:hover {
    background: #e2e8f0;
}
.piramide-prep-item input {
    margin: 0;
    cursor: pointer;
}
.piramide-prep-griego {
    font-family: var(--font-greek);
    font-weight: 600;
    line-height: 1.25;
}
.piramide-prep-lupa {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}
.piramide-prep-lupa:hover {
    background: #e2e8f0;
    color: #0369a1;
}
.piramide-prep-lupa:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 1px;
}
.piramide-svg-wrap {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 0.5rem;
    background: #fff;
}
.piramide-svg-host {
    width: 100%;
    height: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.piramide-svg-host > svg,
.piramide-svg-root {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
.piramide-prep-oculta {
    display: none !important;
}
/* Pareja πρό / πρός: la no seleccionada se ve atenuada. */
.piramide-prep-tenue {
    opacity: 0.30 !important;
    pointer-events: none;
}
.piramide-prep-error {
    margin: 1rem;
    font-size: 13px;
    color: #b91c1c;
}
.piramide-ventana-footer {
    flex: 0 0 auto;
    padding: 0.35rem 0.75rem;
    font-size: 10px;
    color: #64748b;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

/* Toggle Académico/Coloquial en barra de análisis (pill con iconos) */
.exegetico-espejo {
    display: inline-flex;
    align-items: center;
    background: #eef2f7;
    border: 1px solid #d6dde7;
    border-radius: 999px;
    padding: 2px;
    gap: 0;
    flex-shrink: 0;
    margin-left: 4px;
}
#btn-interlineal-academico.is-activo .auditoria-espejo-label { color: #3730a3; }
#btn-interlineal-coloquial.is-activo  .auditoria-espejo-label { color: #166534; }

/* Mini barra de consumo IA en controles exegéticos */
.exegetico-consumo-ia {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-width: 7.5rem;
    max-width: 10rem;
    flex-shrink: 0;
}
.exegetico-consumo-ia-etiqueta {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.2;
    white-space: nowrap;
}
.exegetico-consumo-ia-barra {
    height: 4px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.35);
    overflow: hidden;
}
.exegetico-consumo-ia-relleno {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    transition: width 0.35s ease;
}
.exegetico-consumo-ia-relleno.consumo-ia-relleno--aviso,
.consumo-ia-relleno--aviso.exegetico-consumo-ia-relleno {
    background: linear-gradient(90deg, #eab308, #ca8a04);
}
.exegetico-consumo-ia-relleno.consumo-ia-relleno--alerta,
.consumo-ia-relleno--alerta.exegetico-consumo-ia-relleno {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}


/* ===================================================================
   Capas analíticas detalladas (<details> colapsables)
   =================================================================== */

.interlineal-capa {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    margin-bottom: 8px;
    overflow: hidden;
}
.interlineal-capa[hidden] { display: none; }
.interlineal-capa summary {
    cursor: pointer;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    background: #f8fafc;
    border-bottom: 1px solid transparent;
    list-style: none;
    user-select: none;
}
.interlineal-capa summary::-webkit-details-marker { display: none; }
.interlineal-capa summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 8px;
    font-size: 10px;
    color: #64748b;
    transition: transform 120ms ease;
}
.interlineal-capa[open] summary::before { transform: rotate(90deg); }
.interlineal-capa[open] summary { border-bottom-color: #e2e8f0; }
.interlineal-capa summary:hover { background: #f1f5f9; }

.interlineal-capa-cuerpo {
    padding: 8px 14px 12px;
    overflow-x: auto;
}
.interlineal-capa-cuerpo table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.interlineal-capa-cuerpo th,
.interlineal-capa-cuerpo td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}
.interlineal-capa-cuerpo th {
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.interlineal-capa-cuerpo td:first-child {
    font-family: var(--font-greek);
    font-size: 14px;
    color: #0f172a;
    font-weight: 600;
    white-space: nowrap;
}

/* Tooltips gramaticales — tabla Análisis Morfológico */
.tabla-morfologica td.tabla-morf-morfologia {
    overflow: visible;
}

.grammar-tooltip {
    border-bottom: 1px dotted #ccc;
    cursor: pointer;
    position: relative;
}

.grammar-tooltip:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    min-width: 160px;
    max-width: 280px;
    padding: 8px 10px;
    background: #1e293b;
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    white-space: normal;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.35);
    z-index: 2500;
    pointer-events: none;
}

.grammar-tooltip:hover::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 1px);
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1e293b;
    z-index: 2501;
    pointer-events: none;
}

.grammar-modal-entrada__titulo {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.grammar-modal-entrada {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.grammar-modal-entrada__lectura,
.grammar-modal-entrada__edicion {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.grammar-modal-entrada__edicion {
    padding: 10px 12px 12px;
}

.grammar-modal-entrada__aviso-enmienda {
    margin: 0;
    padding: 8px 12px 0;
}

.grammar-modal-entrada__cuerpo p {
    margin: 0 0 0.65rem;
    line-height: 1.55;
    font-size: 12.5px;
    color: #334155;
}

.grammar-modal-entrada__ejemplo {
    margin-top: 0.75rem;
    padding: 8px 10px;
    background: #f8fafc;
    border-left: 3px solid #5c7a6a;
    border-radius: 0 6px 6px 0;
    font-size: 12px;
    color: #475569;
}

.grammar-modal-entrada__acciones {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
}

.grammar-modal-entrada__aviso-edicion {
    margin: 0 0 0.85rem;
    font-size: 11.5px;
    color: #64748b;
    font-style: italic;
    line-height: 1.45;
}

.grammar-modal-entrada__label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    width: 100%;
    max-width: 100%;
    margin: 0 0 0.85rem;
    font-size: 11.5px;
    font-weight: 600;
    color: #334155;
}

.grammar-modal-entrada__label-text {
    display: block;
    line-height: 1.3;
}

.grammar-modal-entrada__input,
.grammar-modal-entrada__label .form-control {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    font-weight: 400;
    font-size: 12.5px;
}

.grammar-modal-entrada__input[type="text"],
.grammar-modal-entrada__label input.form-control {
    height: auto;
}

.grammar-modal-entrada__label textarea.form-control {
    min-height: 4.5rem;
    resize: vertical;
    line-height: 1.45;
}

.grammar-modal-entrada__label textarea[data-grammar-field="explicacion"] {
    min-height: 7rem;
}

.grammar-modal-entrada__estado {
    font-size: 11.5px;
    color: #64748b;
    flex: 1 1 100%;
}

/* Diagramación Leedy — toggle imagen BibleWorks (opcional) */
.leedy-toolbar-imagen {
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #e2e8f0;
}
.leedy-toolbar-imagen[hidden] {
    display: none;
}
.leedy-toolbar-imagen-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #475569;
    cursor: pointer;
    user-select: none;
}
.leedy-chk-imagen-ref {
    margin: 0;
    cursor: pointer;
}

/* Diagramación Leedy — imagen de referencia BibleWorks (sin hotspots) */
.leedy-imagen-referencia {
    overflow: auto;
    max-height: min(72vh, 900px);
    padding: 4px 0;
}
.leedy-imagen-referencia-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #fff;
}
.leedy-imagen-referencia-pie {
    margin: 8px 2px 0;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}


/* ===================================================================
   Navbar — pseudo-buscador del proyecto activo
   (preparado para convertirse en buscador real de proyectos)
   =================================================================== */

.navbar-buscador {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    min-width: 280px;
    max-width: 520px;
    min-height: var(--navbar-control-h, 34px);
    flex: 0 1 auto;
    transition: background 120ms ease, border-color 120ms ease;
    overflow: hidden;
    font-size: 13px;
    color: #cbd5e1;
}
.navbar-buscador:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.20);
}
.navbar-buscador__principal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 5px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
}
.navbar-buscador__principal:hover,
.navbar-buscador__principal:focus-visible {
    outline: none;
}
.navbar-buscador-desligar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--navbar-control-h, 34px);
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: #94a3b8;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.navbar-buscador-desligar:hover,
.navbar-buscador-desligar:focus-visible {
    background: rgba(248, 113, 113, 0.18);
    color: #fecaca;
    outline: none;
}
.navbar-buscador-desligar.hidden {
    display: none !important;
}
.navbar-buscador-icono {
    color: #94a3b8;
    flex-shrink: 0;
    width: var(--navbar-icon-size, 18px);
    height: var(--navbar-icon-size, 18px);
}
.navbar-buscador-texto {
    color: #f1f5f9;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}
.navbar-buscador-badge {
    background: rgba(99, 102, 241, 0.25);     /* indigo translúcido */
    color: #c7d2fe;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Variante para proyectos globales (sin pasaje asociado): tono slate
   sutil que no compite visualmente con los proyectos exegéticos. */
.navbar-buscador-badge--global {
    background: rgba(148, 163, 184, 0.20);    /* slate translúcido */
    color: #cbd5e1;
    font-style: italic;
}
.navbar-buscador-atajo {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10.5px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    color: #cbd5e1;
    flex-shrink: 0;
}


/* ===================================================================
   Pestaña "Mapa Conceptual" — ícono ℹ️ con tooltip de estadísticas
   =================================================================== */

.pestana-grupo {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.pestana-info-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.pestana-info-btn {
    background: transparent;
    border: none;
    cursor: help;
    padding: 4px 5px;
    color: #94a3b8;
    border-radius: 4px;
    line-height: 0;
    transition: color 120ms ease, background 120ms ease;
}
.pestana-info-btn:hover,
.pestana-info-btn:focus-visible {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.06);
    outline: none;
}

.pestana-info-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    width: 380px;
    max-width: 92vw;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.20),
                0 4px 8px -2px rgba(15, 23, 42, 0.10);
    padding: 12px 14px;
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease;
}
/* Pequeña flecha apuntando al ícono. */
.pestana-info-tooltip::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: white;
    filter: drop-shadow(0 -1px 0 #e2e8f0);
}
/* Activación por hover y por focus (incluye click sostenido). */
.pestana-info-wrap:hover .pestana-info-tooltip,
.pestana-info-wrap:focus-within .pestana-info-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Mini-KPIs dentro del tooltip. */
.kpi-fila {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}
.kpi-mini {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.kpi-mini-label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    font-weight: 500;
}
.kpi-mini-valor {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
}

.kpi-interlineal {
    border-top: 1px dashed #e2e8f0;
    padding-top: 8px;
}
.kpi-interlineal-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.kpi-interlineal-titulo {
    font-size: 11px;
    font-weight: 600;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kpi-interlineal-leyenda {
    font-size: 9.5px;
    color: #94a3b8;
}
.kpi-interlineal-cuerpo {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 12px;
    line-height: 1.45;
    max-height: 110px;
    overflow-y: auto;
    color: #475569;
}


/* ===================================================================
   Navbar — Dropdowns oscuros estilo Cursor
   =================================================================== */

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    color: #e2e8f0;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.dropdown-trigger:hover,
.dropdown.is-abierto > .dropdown-trigger {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}
.dropdown-trigger:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 1px;
}
.dropdown-trigger--pill {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
.dropdown-chevron {
    transition: transform 150ms ease;
    color: #94a3b8;
}
.dropdown.is-abierto .dropdown-chevron {
    transform: rotate(180deg);
}

/* Indicador IA en navbar (Siembra / Guardián) */
.navbar-ia-indicador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--navbar-control-h);
    height: var(--navbar-control-h);
    min-width: var(--navbar-control-h);
    min-height: var(--navbar-control-h);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: help;
}

.navbar-ia-indicador--ok {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(52, 211, 153, 0.35);
}

.navbar-ia-indicador--off {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(248, 113, 113, 0.35);
}

/* Escudos de reglas personales (formato local + directivas IA) */
.navbar-regla-escudo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--navbar-control-h);
    height: var(--navbar-control-h);
    min-width: var(--navbar-control-h);
    min-height: var(--navbar-control-h);
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.navbar-reglas-grupo {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}
.navbar-regla-escudo:not(:disabled) {
    cursor: pointer;
}
.navbar-regla-escudo:not(:disabled):hover {
    filter: brightness(1.08);
}
.navbar-regla-escudo:disabled {
    cursor: default;
    opacity: 0.92;
}
.navbar-regla-escudo--ok {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(52, 211, 153, 0.35);
}
.navbar-regla-escudo--pausado {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(248, 113, 113, 0.35);
}
.navbar-regla-escudo--limitado {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(251, 191, 36, 0.35);
}
.navbar-regla-escudo--off {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.25);
}
.perfil-regla-escudo {
    width: 22px;
    height: 22px;
}

/* Compatibilidad — indicador antiguo (si queda en alguna vista) */
.navbar-formato-indicador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: help;
}
.navbar-formato-indicador--ok {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(52, 211, 153, 0.35);
}
.navbar-formato-indicador--limitado {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(251, 191, 36, 0.35);
}
.navbar-formato-indicador--off {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.25);
}
.navbar-formato-indicador--pausado {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(248, 113, 113, 0.35);
}

.formato-kw,
.formato-regla {
    font-family: var(--font-biblia);
}

.formato-negrita,
.formato-regla.formato-negrita { font-weight: 700; }
.formato-cursiva,
.formato-regla.formato-cursiva { font-style: italic; }
.formato-subrayado,
.formato-regla.formato-subrayado { text-decoration: underline; }
.formato-versalita,
.formato-regla.formato-versalita {
    font-variant: small-caps;
    letter-spacing: 0.03em;
    font-family: inherit;
}
.formato-tachado,
.formato-regla.formato-tachado { text-decoration: line-through; }

.formato-color-rojo { color: #dc2626; }
.formato-color-azul { color: #2563eb; }
.formato-color-verde { color: #059669; }
.formato-color-violeta { color: #7c3aed; }
.formato-color-ambar { color: #d97706; }
.formato-color-negro { color: #0f172a; }

.formato-kw {
    color: #dc2626;
    font-weight: 600;
}

/* Navbar compacto — herramientas alineadas a la derecha */
.navbar-app-inner {
    --navbar-control-h: 34px;
    --navbar-icon-size: 18px;
    padding-right: 0.25rem;
}

.navbar-app-nav {
    gap: 0.25rem;
    align-items: center;
}

.navbar-app-nav svg,
.navbar-app-nav .navbar-fiesta__icono {
    width: var(--navbar-icon-size);
    height: var(--navbar-icon-size);
    flex-shrink: 0;
}

.navbar-fiesta-grupo {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-right: 0.15rem;
}

.navbar-fiesta-calendario {
    border: 1px solid rgba(251, 191, 36, 0.28);
    background: rgba(245, 158, 11, 0.1);
    color: #fde68a;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.navbar-fiesta-calendario:hover,
.navbar-fiesta-calendario:focus-visible {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(251, 191, 36, 0.45);
    color: #fef3c7;
    outline: none;
}

.navbar-fiesta-proxima {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: var(--navbar-control-h);
    max-width: min(16rem, 30vw);
    padding: 0 0.65rem;
    border-radius: 8px;
    border: 1px solid rgba(251, 191, 36, 0.28);
    background: rgba(245, 158, 11, 0.1);
    color: #fde68a;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.navbar-fiesta-proxima:hover,
.navbar-fiesta-proxima:focus-visible {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(251, 191, 36, 0.45);
    color: #fef3c7;
    outline: none;
}

/* Legacy: enlace único (por si queda referenciado en otro template) */
.navbar-fiesta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: var(--navbar-control-h);
    max-width: min(18rem, 34vw);
    margin-right: 0.15rem;
    padding: 0 0.65rem;
    border-radius: 8px;
    border: 1px solid rgba(251, 191, 36, 0.28);
    background: rgba(245, 158, 11, 0.1);
    color: #fde68a;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.navbar-fiesta:hover,
.navbar-fiesta:focus-visible {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(251, 191, 36, 0.45);
    color: #fef3c7;
    outline: none;
}

.navbar-fiesta__icono {
    object-fit: contain;
    filter: brightness(1.15) saturate(1.1);
}

.navbar-fiesta__nombre {
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-fiesta__dias {
    flex-shrink: 0;
    color: rgba(253, 230, 138, 0.88);
    font-variant-numeric: tabular-nums;
}

.navbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--navbar-control-h);
    height: var(--navbar-control-h);
    min-width: var(--navbar-control-h);
    min-height: var(--navbar-control-h);
    flex-shrink: 0;
}
.navbar-usuario-final {
    margin-left: 0.0625rem;
    padding-left: 0.375rem;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.navbar-nav-final {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: var(--navbar-control-h, 34px);
    margin-left: 0.375rem;
    padding-left: 0.375rem;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.navbar-config-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--navbar-control-h);
    height: var(--navbar-control-h);
    min-width: var(--navbar-control-h);
    min-height: var(--navbar-control-h);
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(203, 213, 225, 0.35);
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.navbar-config-trigger:hover,
.dropdown.navbar-config.is-abierto > .navbar-config-trigger {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(226, 232, 240, 0.55);
    color: #ffffff;
}

.navbar-config-trigger:focus-visible {
    outline: 2px solid #94a3b8;
    outline-offset: 1px;
}

.navbar-ayuda {
    flex-shrink: 0;
}

.navbar-ayuda-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--navbar-control-h);
    height: var(--navbar-control-h);
    min-width: var(--navbar-control-h);
    min-height: var(--navbar-control-h);
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(125, 211, 252, 0.5);
    background: rgba(14, 165, 233, 0.2);
    color: #e0f2fe;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.navbar-ayuda-trigger:hover,
.dropdown.navbar-ayuda.is-abierto > .navbar-ayuda-trigger {
    background: rgba(14, 165, 233, 0.32);
    border-color: rgba(56, 189, 248, 0.75);
    color: #ffffff;
}

.navbar-ayuda-trigger:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 1px;
}

.navbar-ayuda-glyph {
    font-family: "Arial Nova", Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
}

/* ---- Variante perfil: pill con avatar + rol + chevron ---- */
.dropdown-trigger--perfil {
    gap: 6px;
    padding: 2px 8px 2px 2px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.45);
    border-color: rgba(255, 255, 255, 0.16);
    min-height: var(--navbar-control-h, 34px);
    height: var(--navbar-control-h, 34px);
}
.dropdown-trigger--perfil:hover,
.dropdown.is-abierto > .dropdown-trigger--perfil {
    background: rgba(15, 23, 42, 0.62);
    border-color: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}
.perfil-trigger-avatar {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
}
.perfil-trigger-avatar-img,
.perfil-trigger-avatar-fallback {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.perfil-trigger-avatar-fallback {
    font-size: 11px;
}
.perfil-trigger-etiqueta {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    max-width: 9.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
}
.perfil-trigger-chevron {
    margin-left: 2px;
    color: rgba(255, 255, 255, 0.42);
    flex-shrink: 0;
}
.dropdown.is-abierto > .dropdown-trigger--perfil .perfil-trigger-chevron {
    color: rgba(255, 255, 255, 0.62);
}

/* ---- Variante avatar (legacy / dropdown interno) ---- */
.dropdown-trigger--avatar {
    padding: 2px;
    border-radius: 999px;
    gap: 0;
}
.dropdown-trigger--avatar:hover,
.dropdown.is-abierto > .dropdown-trigger--avatar {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.20);
}

/* ---- Fallback de avatar con iniciales ---- */
.avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;        /* w-8 */
    height: 2rem;       /* h-8 */
    border-radius: 9999px;
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.15);
    user-select: none;
    text-transform: uppercase;
}
.avatar-fallback--lg {
    width: 2.5rem;      /* w-10 */
    height: 2.5rem;     /* h-10 */
    font-size: 14px;
}


/* ===================================================================
   Paneles flotantes de los dropdowns
   =================================================================== */

.dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: #1e293b;                       /* slate-800 */
    border: 1px solid #334155;                 /* slate-700 */
    border-radius: 10px;
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.55),
                0 4px 8px -2px rgba(0, 0, 0, 0.30);
    padding: 6px;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}
.dropdown.is-abierto > .dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 140ms ease, transform 140ms ease, visibility 0s;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #e2e8f0;
    text-decoration: none;
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease;
}
.dropdown-item:hover,
.dropdown-item:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    outline: none;
}
.dropdown-item svg {
    color: #94a3b8;
    flex-shrink: 0;
    transition: color 100ms ease;
}
.dropdown-item:hover svg,
.dropdown-item:focus-visible svg {
    color: #ffffff;
}
.dropdown-item--alerta { color: #fcd34d; }
.dropdown-item--alerta svg { color: #fbbf24; }
.dropdown-item--alerta:hover,
.dropdown-item--alerta:focus-visible {
    background: rgba(251, 191, 36, 0.10);
    color: #fde68a;
}
.dropdown-item--peligro { color: #fca5a5; }
.dropdown-item--peligro svg { color: #f87171; }
.dropdown-item--peligro:hover,
.dropdown-item--peligro:focus-visible {
    background: rgba(248, 113, 113, 0.12);
    color: #fecaca;
}

.dropdown-separador {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 4px 2px;
}


/* ===================================================================
   Cabecera dentro del dropdown de perfil
   =================================================================== */

.dropdown-panel--perfil {
    min-width: 260px;
}
.perfil-cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 6px;
}
.perfil-cabecera-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.perfil-cabecera-nombre {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.perfil-cabecera-rol {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
    margin-top: 2px;
}

.perfil-consumo-ia {
    padding: 4px 10px 8px;
}
.perfil-consumo-ia-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.perfil-formato-indicador,
.perfil-regla-escudo {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.perfil-consumo-ia-etiqueta {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.35;
    margin-bottom: 0;
}
.perfil-consumo-ia-barra {
    height: 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.25);
    overflow: hidden;
    margin-top: 2px;
}
.perfil-consumo-ia-relleno {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    transition: width 0.35s ease;
}
.perfil-consumo-ia-relleno--aviso {
    background: linear-gradient(90deg, #eab308, #ca8a04);
}
.perfil-consumo-ia-relleno--alerta {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

/* ====================================================================
   AUDITORÍA — ESTÉTICA ENRIQUECIDA DEL DICTAMEN
   ------------------------------------------------------------------
   Tipografía editorial para los informes generados por la IA.
   - Títulos serif con borde inferior sutil.
   - Bloques con borde-izquierdo coloreado por semántica (indigo
     para premisas, violeta para conclusiones, ámbar para alertas).
   - Términos griegos/hebreos en fuente serif unificada.
   ==================================================================== */

.dictamen {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #1e293b;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.dictamen-titulo {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;            /* slate-800 */
    letter-spacing: -0.01em;
    margin: 6px 0 2px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e2e8f0;  /* slate-200 — tenue */
}
.dictamen-titulo + .dictamen-bloque,
.dictamen-titulo + .dictamen-parrafo {
    margin-top: 2px;
}

/* ----- Bloques de premisas / conclusiones / alertas ----- */
.dictamen-bloque {
    background: #f8fafc;                /* slate-50 */
    padding: 10px 12px 10px 14px;
    border-radius: 6px;
    border-left: 4px solid #cbd5e1;     /* default slate-300 */
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.dictamen-bloque__etiqueta {
    display: block;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    color: #334155;                     /* slate-700 */
}
.dictamen-bloque__cuerpo {
    color: #334155;
    font-size: 13px;
    line-height: 1.55;
}
.dictamen-bloque__sublista {
    margin: 6px 0 0 4px;
    padding-left: 16px;
    list-style: disc;
    color: #475569;
    font-size: 12.5px;
}
.dictamen-bloque__sublista li { margin: 2px 0; }

/* --- Tono PREMISA / PASO / HIPÓTESIS (índigo) --- */
.dictamen-bloque--premisa {
    border-left-color: #6366f1;         /* indigo-500 */
    background: #eef2ff;                /* indigo-50 */
}
.dictamen-bloque--premisa .dictamen-bloque__etiqueta { color: #4338ca; }

/* --- Tono CONCLUSIÓN / DICTAMEN / VEREDICTO (violeta) --- */
.dictamen-bloque--conclusion {
    border-left-color: #8b5cf6;         /* violet-500 */
    background: #f5f3ff;                /* violet-50 */
}
.dictamen-bloque--conclusion .dictamen-bloque__etiqueta { color: #6d28d9; }

/* --- Tono ALERTA / FALACIA / RIESGO (ámbar) --- */
.dictamen-bloque--alerta {
    border-left-color: #f59e0b;         /* amber-500 */
    background: #fffbeb;                /* amber-50 */
}
.dictamen-bloque--alerta .dictamen-bloque__etiqueta { color: #b45309; }

/* --- Tono neutro (sin keyword identificable) --- */
.dictamen-bloque--neutro {
    border-left-color: #94a3b8;         /* slate-400 */
}

/* ----- Listas planas (sin tono) ----- */
.dictamen-lista {
    margin: 0;
    padding-left: 22px;
    list-style: disc;
    color: #334155;
    font-size: 13px;
}
.dictamen-lista li { margin: 2px 0; }

/* ----- Párrafos libres ----- */
.dictamen-parrafo {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.6;
}

/* ----- Inline ----- */
.dictamen strong { color: #0f172a; font-weight: 700; }
.dictamen em { color: #475569; font-style: italic; }
.dictamen-code {
    font-family: ui-monospace, "Cascadia Code", "Fira Code", Consolas, monospace;
    font-size: 12px;
    background: rgba(15, 23, 42, 0.05);
    color: #0f172a;
    padding: 1px 5px;
    border-radius: 4px;
}

/* ----- Términos en idiomas originales (griego/hebreo) ----- */
.dictamen-original {
    font-family: "Times New Roman", "EB Garamond", "Cardo", "SBL Greek",
                 "SBL Hebrew", "Linux Libertine", Georgia, serif;
    font-size: 1.05em;
    color: #1e3a8a;                     /* azul profundo, editorial */
    background: rgba(99, 102, 241, 0.06);
    padding: 0 3px;
    border-radius: 3px;
}

.dictamen-vacio {
    color: #94a3b8;
    font-style: italic;
    text-align: center;
    padding: 24px 0;
}

/* ====================================================================
   AUDITORÍA — MODO MAXIMIZADO: toolbar compacta horizontal (CSS puro)
   ------------------------------------------------------------------
   APPROACH: NO movemos nodos del DOM. El wrapper estático
   .auditoria-toolbar contiene historial + nueva, y según
   .is-maximized cambia su flex-direction y compacta sus hijos.
   Esto elimina toda fragilidad de listeners y anclas.
   ==================================================================== */

/* Toolbar — modo normal: dos bloques apilados verticalmente
   (cada uno conserva su padding y background original). */
.auditoria-toolbar {
    display: flex;
    flex-direction: column;
}

/* Toolbar — modo maximizado: una sola línea horizontal compacta. */
.auditoria-sidebar.is-maximized .auditoria-toolbar {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 6px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

/* En maximizado, los bloques internos pierden su padding/background
   propio (ya lo tiene el toolbar) y se vuelven horizontales. */
.auditoria-sidebar.is-maximized .auditoria-toolbar .auditoria-historial-compacta,
.auditoria-sidebar.is-maximized .auditoria-toolbar .auditoria-nueva {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Historial — select más compacto en maximize. */
.auditoria-sidebar.is-maximized .auditoria-historial-select {
    font-size: 11.5px !important;
    padding: 4px 22px 4px 8px !important;
    min-width: 220px !important;
    max-width: 320px !important;
    width: auto !important;
}
.auditoria-sidebar.is-maximized .auditoria-historial-label {
    font-size: 10px !important;
    margin: 0 4px 0 0 !important;
    white-space: nowrap !important;
}

/* Modelo IA — la fila interna deja de ser un bloque con padding. */
.auditoria-sidebar.is-maximized .auditoria-modelo-fila {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    gap: 6px !important;
}
.auditoria-sidebar.is-maximized .auditoria-modelo-label {
    font-size: 10px !important;
    margin: 0 !important;
    white-space: nowrap !important;
}
.auditoria-sidebar.is-maximized .auditoria-modelo-select {
    font-size: 11.5px !important;
    padding: 4px 22px 4px 8px !important;
    min-width: 200px !important;
    max-width: 280px !important;
    flex: 0 0 auto !important;
    width: auto !important;
}

/* Botón Nueva Auditoría — anular align-self:stretch del modo vertical. */
.auditoria-sidebar.is-maximized .auditoria-nueva-btn {
    padding: 4px 12px !important;
    font-size: 11.5px !important;
    width: auto !important;
    margin: 0 !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* En maximizado el header conserva su tamaño compacto. */
.auditoria-sidebar.is-maximized .auditoria-header {
    padding: 8px 16px;
    border-bottom: none;
}
.auditoria-sidebar.is-maximized .auditoria-header h3 {
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* El body recupera el alto vertical liberado. */
.auditoria-sidebar.is-maximized .auditoria-body {
    padding: 18px 24px;
    font-size: 14px;
}
.auditoria-sidebar.is-maximized .dictamen {
    font-size: 14.5px;
    max-width: 980px;
    margin: 0 auto;
}
.auditoria-sidebar.is-maximized .dictamen-titulo { font-size: 19px; }

/* ====================================================================
   AUDITORÍA — VISTA DIVIDIDA (SPLIT SCREEN, 50/50)
   ------------------------------------------------------------------
   Activada por el botón "Dividir pantalla" (visible solo en
   maximizado). Cada pane tiene su propio <select> de historial y
   renderiza un informe independiente para comparación visual.
   ==================================================================== */

.auditoria-btn-dividir.is-activo {
    color: #4338ca;                     /* indigo-700 */
    background: rgba(99, 102, 241, 0.14);
}
.auditoria-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    /* min-height en lugar de 100% para evitar colapso intrínseco
       cuando el padre tiene overflow:auto. Calc cubre toda la altura
       útil descontando el header del sidebar (≈ 42px). */
    min-height: calc(100vh - 60px);
    align-items: stretch;
}
.auditoria-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;          /* CRÍTICO: permite a hijos flex shrinkear */
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    /* overflow: hidden a nivel del pane recorta solo los bordes, NO
       el contenido interno (el body interior tiene su propio scroll). */
    overflow: hidden;
}
.auditoria-pane-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
    border-bottom: 1px solid #e2e8f0;
}
.auditoria-pane-etiqueta {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #4338ca;
    color: #ffffff;
    font-weight: 700;
    font-size: 12px;
    border-radius: 50%;
}
.auditoria-pane[data-pane="B"] .auditoria-pane-etiqueta { background: #6d28d9; }
.auditoria-pane-select {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: #1e293b;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.24 4.38a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 4px 24px 4px 8px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.auditoria-pane-select:focus {
    outline: none;
    border-color: #4338ca;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
}
.auditoria-pane-body {
    flex: 1 1 auto;
    min-height: 0;             /* permite que el flex parent lo limite */
    height: 100%;              /* llena el espacio disponible del pane */
    overflow-y: auto;          /* scroll vertical INDEPENDIENTE por pane */
    overflow-x: hidden;
    padding: 14px 18px;
    background: #ffffff;
    /* Scrollbar discreta, no quita ancho visible. */
    scrollbar-gutter: stable;
}
.auditoria-pane[data-pane="B"] .auditoria-pane-body { background: #fdfbff; }

/* En modo split, los dictámenes dentro de cada pane DEBEN ocupar el
   ancho completo del pane. Sin esto, la regla genérica
   `.auditoria-sidebar.is-maximized .dictamen { max-width: 980px }`
   gana por especificidad y deja franjas vacías horribles a los lados. */
.auditoria-sidebar.is-split .auditoria-pane .dictamen,
.auditoria-sidebar.is-maximized .auditoria-pane .dictamen {
    max-width: none !important;
    margin: 0 !important;
    font-size: 13.5px;
}

/* En split, el body del sidebar usa todo el ancho de la viewport
   (sin max-width). Padding lateral mínimo para que el grid respire.
   Flex column para que el grid hijo crezca a toda la altura libre. */
.auditoria-sidebar.is-split .auditoria-body {
    padding: 8px 10px !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.auditoria-sidebar.is-split .auditoria-split-grid {
    flex: 1 1 auto;
    min-height: 0;       /* permite shrink en flex column */
    height: 100%;
    width: 100%;
}
.auditoria-sidebar.is-split .auditoria-pane {
    min-height: 0;
    height: 100%;        /* explícito para el grid item */
    width: 100%;
    overflow: hidden;    /* el body interior maneja el scroll */
}
/* El body de cada pane SIEMPRE scrollea cuando el contenido supera
   su alto. Sin este !important, una regla previa con max-height:none
   o height:auto podía dejar el contenido salir del pane. */
.auditoria-sidebar.is-split .auditoria-pane-body {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 14px 18px;
}

/* ====================================================================
   DOBLE ESPEJO — Switch Académico ↔ Pastoral
   --------------------------------------------------------------------
   - Oculto por defecto en modo normal (sólo visible en maximizado,
     igual que el botón "Dividir pantalla").
   - Pill horizontal con dos opciones, look toggle (estilo segmented
     control). El activo se eleva con sombra y color sólido.
   ==================================================================== */
.auditoria-espejo {
    display: none;
}
.auditoria-sidebar.is-maximized .auditoria-toolbar .auditoria-espejo {
    display: inline-flex !important;
    align-items: center;
    background: #eef2f7;
    border: 1px solid #d6dde7;
    border-radius: 999px;
    padding: 2px;
    gap: 0;
    flex: 0 0 auto;
}
.auditoria-espejo-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #475569;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease,
                box-shadow 0.15s ease, transform 0.05s ease;
    white-space: nowrap;
    line-height: 1;
}
.auditoria-espejo-btn:hover {
    color: #1e293b;
}
.auditoria-espejo-btn:active {
    transform: translateY(0.5px);
}
.auditoria-espejo-btn.is-activo {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08),
                0 0 0 1px rgba(15, 23, 42, 0.05);
}
/* Tono identitario sutil por modo (verde para pastoral, índigo para
   académico). Aplica sólo cuando el botón está activo, para que la
   etiqueta nunca compita con el contenido. */
#auditoria-espejo-academico.is-activo .auditoria-espejo-label { color: #3730a3; }
#auditoria-espejo-pastoral.is-activo  .auditoria-espejo-label { color: #166534; }
.auditoria-espejo-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    line-height: 1;
    vertical-align: middle;
}
.auditoria-header-espejo-btn .auditoria-espejo-icon {
    width: 20px;
    height: 20px;
}
.auditoria-espejo-btn:not(.is-activo) .auditoria-espejo-icon,
.auditoria-header-espejo-btn:not(.is-activo) .auditoria-espejo-icon {
    opacity: 0.72;
}
.auditoria-espejo-btn.is-activo .auditoria-espejo-icon,
.auditoria-header-espejo-btn.is-activo .auditoria-espejo-icon {
    opacity: 1;
}
.auditoria-espejo-label { letter-spacing: 0.01em; }

/* ====================================================================
   DOBLE ESPEJO — Tarjetas Pastorales (icono + título + cuerpo)
   --------------------------------------------------------------------
   Versión "llana" del dictamen. Tres tarjetas con borde lateral de
   color identitario (azul=libro, ámbar=alerta, verde=lámpara) e
   icono sutil heredando el color del padre.
   ==================================================================== */
.dictamen.dictamen--pastoral {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 880px;
}
.dictamen-pastoral {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left-width: 4px;
    border-radius: 10px;
    padding: 14px 16px 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.dictamen-pastoral__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px 0;
}
.dictamen-pastoral__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.04);
    flex: 0 0 28px;
}
.dictamen-pastoral__titulo {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.005em;
    color: #0f172a;
}
.dictamen-pastoral__cuerpo {
    color: #1e293b;
    font-size: 14px;
    line-height: 1.65;
}
.dictamen-pastoral__cuerpo p {
    margin: 0 0 8px 0;
}
.dictamen-pastoral__cuerpo p:last-child {
    margin-bottom: 0;
}
.dictamen-pastoral-vacio {
    color: #94a3b8;
    font-style: italic;
}

/* Acentos por sección */
.dictamen-pastoral--libro {
    border-left-color: #3b82f6;
}
.dictamen-pastoral--libro .dictamen-pastoral__icono {
    color: #1d4ed8;
    background: #dbeafe;
}
.dictamen-pastoral--alerta {
    border-left-color: #f59e0b;
}
.dictamen-pastoral--alerta .dictamen-pastoral__icono {
    color: #b45309;
    background: #fef3c7;
}
.dictamen-pastoral--lampara {
    border-left-color: #22c55e;
}
.dictamen-pastoral--lampara .dictamen-pastoral__icono {
    color: #15803d;
    background: #dcfce7;
}

/* Banner cuando el modelo no devolvió la versión pastoral (legacy) */
.dictamen-aviso {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #78350f;
    border-radius: 8px;
    padding: 9px 12px;
    margin-bottom: 14px;
    font-size: 12.5px;
    line-height: 1.5;
}
.dictamen-aviso strong { color: #6b3a07; }

.dictamen-pastoral__nota-adaptacion {
    margin: 12px 0 0;
    padding: 8px 10px;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    font-size: 11.5px;
    line-height: 1.45;
}

/* ====================================================================
   DEPÓSITO DE FE — Biblioteca de estudio teológico
   --------------------------------------------------------------------
   Tokens de color: app/static/css/tablero-theme.css (var(--tablero-*))
   Encabezados metálicos · cuerpo blanco tiza (#FDFDFD)
   ==================================================================== */

.tablero-biblioteca {
    background: var(--tablero-fondo);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    font-family: var(--tablero-serif);
}

.tablero-biblioteca__header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

.tablero-biblioteca__header-izq {
    align-items: center;
}

.tablero-resumen--inline {
    margin: 0;
    min-width: 0;
}

.tablero-biblioteca__titulo {
    font-family: var(--tablero-serif);
    font-weight: 700;
    letter-spacing: 0;
    color: #000000;
}

.tablero-biblioteca__sub {
    color: var(--tablero-texto-suave);
}

.tablero-biblioteca__btn-recargar {
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #000000 !important;
    background: #ffffff !important;
}

.tablero-biblioteca__btn-recargar:hover {
    background: #f5f5f5 !important;
    border-color: rgba(0, 0, 0, 0.25) !important;
}

/* Resumen de conteos — fondos planos, texto de alto contraste */
.tablero-resumen-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    line-height: 1.2;
}
.tablero-resumen-pill .font-semibold {
    font-weight: 800;
}
.tablero-resumen-pill--total {
    background: var(--tablero-pill-total-fondo);
    color: var(--tablero-pill-total-texto);
}
.tablero-resumen-pill--axioma {
    background: var(--tablero-pill-axioma-fondo);
    color: var(--tablero-pill-axioma-texto);
}
.tablero-resumen-pill--cuasi {
    background: var(--tablero-pill-cuasi-fondo);
    color: var(--tablero-pill-cuasi-texto);
}
.tablero-resumen-pill--pendiente {
    background: var(--tablero-pill-pend-fondo);
    color: var(--tablero-pill-pend-texto);
}

.tablero-cargando-spin {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(197, 160, 89, 0.25);
    border-top-color: var(--tablero-axioma-accent);
    border-radius: 50%;
    animation: tablero-spin 0.7s linear infinite;
}
@keyframes tablero-spin {
    to { transform: rotate(360deg); }
}

#tablero-estado {
    color: var(--tablero-texto-suave) !important;
}

.tablero-col {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    padding: 0 12px 14px;
    min-height: 240px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(62, 39, 35, 0.04);
}

.tablero-col__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 -12px 0;
    padding: 0 10px 0 0;
    min-height: var(--tablero-bar-altura);
    border-bottom: none;
    box-shadow: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    position: relative;
    z-index: 1;
}

.tablero-col__bar-izq {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 18px;
}

.tablero-col__bar-titulo {
    margin: 0;
    font-family: var(--tablero-serif);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: none;
    background: transparent;
}

.tablero-col__bar-conteo {
    display: none;
    font-family: var(--tablero-serif);
    font-size: 11px;
    font-weight: 700;
    padding: 0;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    line-height: 1;
}

.tablero-col__bar-crear {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 6px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    transition: transform 0.12s ease, opacity 0.12s ease;
}

.tablero-col__bar-crear:hover {
    transform: scale(1.06);
    opacity: 0.92;
}

.tablero-col__bar-crear:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.35);
    outline-offset: 2px;
}

.tablero-col__bar-crear svg {
    display: block;
    pointer-events: none;
}

/* Cincelado · oro (Axiomas) */
.tablero-col--axioma .tablero-col__bar-titulo,
.tablero-col--axioma .tablero-col__bar-conteo {
    color: var(--tablero-cincel-metal-color);
    text-shadow: var(--tablero-cincel-metal-sombra);
}

.tablero-col--axioma .tablero-col__bar-crear {
    color: var(--tablero-cincel-metal-color);
}

.tablero-col--axioma .tablero-col__bar-crear svg {
    filter: var(--tablero-cincel-metal-filtro);
}

/* Cuasi-Axiomas — gris oscuro + cincel */
.tablero-col--cuasi .tablero-col__bar-titulo,
.tablero-col--cuasi .tablero-col__bar-conteo {
    color: var(--tablero-col-titulo-cuasi);
    text-shadow: var(--tablero-col-titulo-cincel-sombra);
}

.tablero-col--cuasi .tablero-col__bar-crear {
    color: var(--tablero-col-titulo-cuasi);
}

.tablero-col--cuasi .tablero-col__bar-crear svg {
    filter: var(--tablero-col-titulo-cincel-filtro);
}

/* Pendientes — ocre claro + mismo cincel */
.tablero-col--pendiente .tablero-col__bar-titulo,
.tablero-col--pendiente .tablero-col__bar-conteo {
    color: var(--tablero-col-titulo-pendiente);
    text-shadow: var(--tablero-col-titulo-cincel-sombra);
}

.tablero-col--pendiente .tablero-col__bar-crear {
    color: var(--tablero-col-titulo-pendiente);
}

.tablero-col--pendiente .tablero-col__bar-crear svg {
    filter: var(--tablero-col-titulo-cincel-filtro);
}

.tablero-col__bar-crear:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.tablero-col__bar-crear:disabled,
.tablero-col__bar-crear.is-oculto {
    display: none;
}

.tablero-col__bar-tools {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    margin-right: 2px;
}

.tablero-col__bar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    color: inherit;
    opacity: 0.82;
    transition: transform 0.12s ease, opacity 0.12s ease, background 0.12s ease;
}

.tablero-col__bar-btn:hover:not(:disabled) {
    transform: scale(1.05);
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
}

.tablero-col__bar-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.tablero-col__bar-btn:disabled,
.tablero-col__bar-btn.is-sin-arbol {
    opacity: 0.28;
    cursor: default;
    pointer-events: none;
}

.tablero-col__bar-btn svg {
    display: block;
    pointer-events: none;
}

.tablero-col__bar-btn--restaurar {
    display: none;
}

.tablero-col__bar-btn--restaurar:not([hidden]) {
    display: inline-flex;
}

.tablero-col__bar-btn--maximizar[hidden] {
    display: none;
}

.tablero-col__bar-btn-ico--expandir {
    display: none;
}

.tablero-col__bar-btn.is-expandido .tablero-col__bar-btn-ico--colapsar {
    display: block;
}

.tablero-col__bar-btn.is-expandido .tablero-col__bar-btn-ico--expandir {
    display: none;
}

.tablero-col__bar-btn:not(.is-expandido):not(.is-sin-arbol) .tablero-col__bar-btn-ico--colapsar {
    display: none;
}

.tablero-col__bar-btn:not(.is-expandido):not(.is-sin-arbol) .tablero-col__bar-btn-ico--expandir {
    display: block;
}

.tablero-col--axioma .tablero-col__bar-btn {
    color: var(--tablero-cincel-metal-color);
}

.tablero-col--axioma .tablero-col__bar-btn svg {
    filter: var(--tablero-cincel-metal-filtro);
}

.tablero-col--cuasi .tablero-col__bar-btn {
    color: var(--tablero-col-titulo-cuasi);
}

.tablero-col--cuasi .tablero-col__bar-btn svg {
    filter: var(--tablero-col-titulo-cincel-filtro);
}

.tablero-col--pendiente .tablero-col__bar-btn {
    color: var(--tablero-col-titulo-pendiente);
}

.tablero-col--pendiente .tablero-col__bar-btn svg {
    filter: var(--tablero-col-titulo-cincel-filtro);
}

/* Vista maximizada: una columna ocupa todo el ancho */
#tablero-kanban.tablero-kanban--maximizado {
    grid-template-columns: 1fr;
}

#tablero-kanban.tablero-kanban--maximizado .tablero-col--oculta-max {
    display: none !important;
}

#tablero-kanban.tablero-kanban--maximizado .tablero-col--maximizada {
    display: flex;
    min-height: min(70vh, 720px);
}

#tablero-kanban.tablero-kanban--maximizado .tablero-col--maximizada .tablero-col__body {
    max-height: none;
}

.tablero-col__head,
.tablero-col__conteo {
    display: none;
}

.tablero-col__sub {
    margin: 0 -12px;
    padding: 8px 16px 6px;
    font-size: 10.5px;
    font-style: italic;
    opacity: 0.88;
    background: var(--tablero-col-cuerpo);
}

.tablero-col__body {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 2px;
    scrollbar-gutter: stable;
    background: var(--tablero-col-cuerpo);
    margin: 0 -12px -14px;
    padding: 8px 14px 14px 12px;
}

.tablero-col__vacio {
    margin: 14px 0;
    text-align: center;
    font-size: 12px;
    font-style: italic;
    opacity: 0.7;
}

/* ---- Columnas por repositorio ---- */
.tablero-col--axioma {
    background: var(--tablero-col-cuerpo);
    border: 1px solid var(--tablero-axioma-borde);
}
.tablero-col--axioma .tablero-col__bar {
    background-image: var(--tablero-placa-oro);
}
.tablero-col--axioma .tablero-col__sub {
    color: var(--tablero-axioma-titulo);
    background: var(--tablero-col-cuerpo);
}
.tablero-col--axioma .tablero-col__vacio {
    color: var(--tablero-axioma-titulo);
}

.tablero-col--cuasi {
    background: var(--tablero-col-cuerpo);
    border: 1px solid var(--tablero-cuasi-borde);
}
.tablero-col--cuasi .tablero-col__bar {
    background-image: var(--tablero-placa-plata);
}
.tablero-col--cuasi .tablero-col__sub {
    color: var(--tablero-cuasi-titulo);
    background: var(--tablero-col-cuerpo);
}
.tablero-col--cuasi .tablero-col__vacio {
    color: var(--tablero-cuasi-titulo);
}

.tablero-col--pendiente {
    background: var(--tablero-col-cuerpo);
    border: 1px solid var(--tablero-pend-borde);
}
.tablero-col--pendiente .tablero-col__bar {
    background-image: var(--tablero-placa-arcilla);
}
.tablero-col--pendiente .tablero-col__sub {
    color: var(--tablero-pend-titulo);
    background: var(--tablero-col-cuerpo);
}
.tablero-col--pendiente .tablero-col__vacio {
    color: var(--tablero-pend-titulo);
}

/* ====================================================================
   LISTA PLANA + JERARQUÍA VISUAL (SortableJS — una lista por columna)
   ==================================================================== */

.tablero-col__lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 48px;
    flex: 1;
}

.tablero-col__lista--vacia {
    justify-content: center;
    min-height: 72px;
}

.tablero-col__lista--vacia .tablero-col__vacio {
    margin: 0;
}

.tablero-tree-node {
    padding-left: calc(var(--tablero-depth, 0) * 22px);
    position: relative;
}

.tablero-tree-node--ghost {
    opacity: 0.45;
    pointer-events: none !important;
}

.tablero-tree-node--ghost .tablero-card {
    box-shadow: 0 4px 14px rgba(62, 39, 35, 0.12);
}

.tablero-tree-node--chosen .tablero-card {
    box-shadow: 0 4px 16px rgba(62, 39, 35, 0.14);
}

.tablero-tree-node--drag .tablero-card {
    opacity: 0.92;
}

.tablero-tree-node--en-bloque .tablero-card {
    outline: 1px dashed rgba(62, 39, 35, 0.18);
    outline-offset: 2px;
}

.tablero-card--hijo {
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: rgba(62, 39, 35, 0.1);
}

.tablero-col--axioma .tablero-card--hijo {
    border-left-color: rgba(184, 134, 11, 0.35);
}

.tablero-col--cuasi .tablero-card--hijo {
    border-left-color: rgba(120, 144, 156, 0.38);
}

.tablero-col--pendiente .tablero-card--hijo {
    border-left-color: rgba(141, 110, 99, 0.34);
}

.tablero-tree-node--nest-target > .tablero-card {
    outline: 2px solid rgba(184, 134, 11, 0.75);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(184, 134, 11, 0.2);
    background: rgba(255, 248, 225, 0.65);
}

.tablero-tree-node--nest-target > .tablero-card::after {
    content: "Soltar como hijo";
    display: block;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(120, 85, 10, 0.9);
    background: rgba(184, 134, 11, 0.15);
}

.tablero-col--cuasi .tablero-tree-node--nest-target > .tablero-card {
    outline-color: rgba(120, 144, 156, 0.75);
    box-shadow: 0 0 0 5px rgba(120, 144, 156, 0.18);
    background: rgba(245, 248, 250, 0.85);
}

.tablero-col--cuasi .tablero-tree-node--nest-target > .tablero-card::after {
    color: rgba(70, 90, 105, 0.95);
    background: rgba(120, 144, 156, 0.15);
}

.tablero-col--pendiente .tablero-tree-node--nest-target > .tablero-card {
    outline-color: rgba(141, 110, 99, 0.75);
    box-shadow: 0 0 0 5px rgba(141, 110, 99, 0.18);
    background: rgba(250, 245, 240, 0.85);
}

.tablero-col--pendiente .tablero-tree-node--nest-target > .tablero-card::after {
    color: rgba(100, 75, 65, 0.95);
    background: rgba(141, 110, 99, 0.15);
}

.tablero-card__toggle-hijos {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: rgba(62, 39, 35, 0.48);
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    transition: color 0.12s ease, background 0.12s ease;
}

.tablero-card__toggle-hijos--hueco {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    pointer-events: none;
}

.tablero-card__toggle-hijos:hover {
    color: rgba(62, 39, 35, 0.82);
    background: rgba(62, 39, 35, 0.07);
}

.tablero-card__toggle-hijos svg {
    transition: transform 0.15s ease;
}

.tablero-card__toggle-hijos.is-colapsado svg {
    transform: rotate(-90deg);
}

.tablero-card__toggle-conteo {
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    min-width: 10px;
    text-align: center;
}

.tablero-card__toggle-hijos:not(.is-colapsado) .tablero-card__toggle-conteo {
    display: none;
}

.tablero-card__hijos-ocultos {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: 4px;
    color: rgba(62, 39, 35, 0.62);
    background: rgba(62, 39, 35, 0.08);
}

.tablero-col--axioma .tablero-card__toggle-hijos { color: rgba(184, 134, 11, 0.62); }
.tablero-col--cuasi .tablero-card__toggle-hijos  { color: rgba(120, 144, 156, 0.62); }
.tablero-col--pendiente .tablero-card__toggle-hijos { color: rgba(141, 110, 99, 0.62); }

.tablero-col--axioma .tablero-card__hijos-ocultos {
    color: rgba(120, 85, 10, 0.85);
    background: rgba(184, 134, 11, 0.14);
}

/* ====================================================================
   TABLERO COMPACTO — tarjetas ~50 % más bajas para listas largas
   ==================================================================== */

.tablero-kanban--compacto .tablero-col__lista {
    gap: 4px;
}

.tablero-kanban--compacto .tablero-tree-node {
    padding-left: calc(var(--tablero-depth, 0) * 16px);
}

.tablero-kanban--compacto .tablero-col__body {
    gap: 4px;
    padding: 6px 12px 10px 10px;
}

.tablero-kanban--compacto .tablero-col__sub {
    padding: 4px 14px 4px;
    font-size: 10px;
    line-height: 1.25;
}

.tablero-kanban--compacto .tablero-card {
    padding: 4px 8px 5px;
    border-radius: 6px;
}

.tablero-kanban--compacto .tablero-card__head {
    align-items: center;
    gap: 4px;
}

.tablero-kanban--compacto .tablero-card__titulo {
    font-size: 12px;
    line-height: 1.25;
    font-weight: 400;
}

.tablero-kanban--compacto .tablero-card__toggle-hijos,
.tablero-kanban--compacto .tablero-card__toggle-hijos--hueco {
    width: 20px;
    height: 20px;
}

.tablero-kanban--compacto .tablero-card__toggle-hijos svg {
    width: 10px;
    height: 10px;
}

.tablero-kanban--compacto .tablero-card__toggle-conteo {
    font-size: 8px;
}

.tablero-kanban--compacto .tablero-card__arrastrar {
    width: 20px;
    height: 20px;
    margin-right: 2px;
}

.tablero-kanban--compacto .tablero-card__arrastrar svg {
    width: 12px;
    height: 12px;
}

.tablero-kanban--compacto .tablero-card__grip-zone {
    padding: 1px 2px 1px 1px;
    gap: 1px;
}

.tablero-kanban--compacto .tablero-card__info,
.tablero-kanban--compacto .tablero-card__editar,
.tablero-kanban--compacto .tablero-card__eliminar,
.tablero-kanban--compacto .tablero-card__enviar,
.tablero-kanban--compacto .tablero-card__aprobar {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.tablero-kanban--compacto .tablero-card__info svg,
.tablero-kanban--compacto .tablero-card__editar svg,
.tablero-kanban--compacto .tablero-card__eliminar svg,
.tablero-kanban--compacto .tablero-card__aprobar svg {
    width: 11px;
    height: 11px;
}

.tablero-kanban--compacto .tablero-card__enviar-ico {
    width: 11px;
    height: 11px;
}

.tablero-kanban--compacto .tablero-card__hijos-ocultos {
    font-size: 9px;
    padding: 1px 5px;
    margin-left: 2px;
}

.tablero-kanban--compacto .tablero-card__origen {
    margin-top: 4px;
    padding: 3px 6px;
    font-size: 9.5px;
    line-height: 1.25;
    border-radius: 4px;
}

.tablero-kanban--compacto .tablero-card__enviar-ico {
    width: 11px;
    height: 11px;
}

.tablero-kanban--compacto .tablero-card__tools .tablero-card__aprobar {
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
}

.tablero-kanban--compacto .tablero-tree-node--nest-target > .tablero-card::after {
    font-size: 9px;
    padding: 2px 6px;
}

.tablero-kanban--compacto .tablero-col__bar-crear {
    width: 28px;
    height: 28px;
}

.tablero-kanban--compacto .tablero-col__bar-crear svg {
    width: 14px;
    height: 14px;
}

.tablero-kanban--compacto .tablero-col__bar-btn {
    width: 26px;
    height: 26px;
}

.tablero-kanban--compacto .tablero-col {
    padding: 0 10px 10px;
    min-height: 200px;
}

.tablero-card__arrastrar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 4px;
    margin-top: 0;
    border-radius: 5px;
    color: rgba(62, 39, 35, 0.52);
    cursor: inherit;
    touch-action: none;
    user-select: none;
    transition: color 0.12s ease, background 0.12s ease;
}

.tablero-card__jerarquia {
    display: grid;
    grid-template-columns: 14px 14px;
    grid-template-rows: 12px 12px 12px;
    gap: 0;
    flex: 0 0 auto;
    margin-right: 2px;
    align-self: center;
}

.tablero-card__jerarquia-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 12px;
    padding: 0;
    border: none;
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
    opacity: 0.72;
    color: inherit;
    transition: background 0.12s ease, opacity 0.12s ease;
}

.tablero-card__jerarquia-btn--arriba {
    grid-column: 1 / -1;
    justify-self: center;
}

.tablero-card__jerarquia-btn--izq {
    grid-column: 1;
    justify-self: end;
}

.tablero-card__jerarquia-btn--der {
    grid-column: 2;
    justify-self: start;
}

.tablero-card__jerarquia-btn--abajo {
    grid-column: 1 / -1;
    justify-self: center;
}

.tablero-card__jerarquia-btn:hover:not(:disabled) {
    opacity: 1;
    background: rgba(62, 39, 35, 0.08);
}

.tablero-card__jerarquia-btn:disabled {
    opacity: 0.22;
    cursor: default;
}

.tablero-col--axioma .tablero-card__jerarquia-btn:not(:disabled) {
    color: var(--tablero-axioma-titulo);
}

.tablero-col--cuasi .tablero-card__jerarquia-btn:not(:disabled) {
    color: var(--tablero-cuasi-titulo);
}

.tablero-col--pendiente .tablero-card__jerarquia-btn:not(:disabled) {
    color: var(--tablero-pend-titulo);
}

.tablero-kanban--compacto .tablero-card__jerarquia {
    grid-template-columns: 12px 12px;
    grid-template-rows: 11px 11px 11px;
}

.tablero-kanban--compacto .tablero-card__jerarquia-btn {
    width: 12px;
    height: 11px;
}

.tablero-kanban--compacto .tablero-card__jerarquia-btn svg {
    width: 8px;
    height: 8px;
}

.tablero-card__grip-zone {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 4px 2px 2px;
    margin: -2px 0 -2px -2px;
    border-radius: 6px;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.tablero-card__grip-zone:active {
    cursor: grabbing;
}

.tablero-card__grip-zone .tablero-card__titulo {
    cursor: inherit;
    user-select: none;
    -webkit-user-select: none;
}

.tablero-card:hover .tablero-card__grip-zone {
    background: rgba(62, 39, 35, 0.04);
}

.tablero-col--axioma .tablero-card:hover .tablero-card__grip-zone {
    background: rgba(184, 134, 11, 0.07);
}

.tablero-col--cuasi .tablero-card:hover .tablero-card__grip-zone {
    background: rgba(120, 144, 156, 0.08);
}

.tablero-col--pendiente .tablero-card:hover .tablero-card__grip-zone {
    background: rgba(141, 110, 99, 0.07);
}

.tablero-card__arrastrar:active {
    cursor: inherit;
}

.tablero-card:hover .tablero-card__arrastrar,
.tablero-card__grip-zone:hover .tablero-card__arrastrar {
    color: rgba(62, 39, 35, 0.78);
    background: rgba(62, 39, 35, 0.08);
}

.tablero-col--axioma .tablero-card__arrastrar { color: rgba(184, 134, 11, 0.55); }
.tablero-col--cuasi .tablero-card__arrastrar  { color: rgba(120, 144, 156, 0.55); }
.tablero-col--pendiente .tablero-card__arrastrar { color: rgba(141, 110, 99, 0.55); }

/* ====================================================================
   TARJETAS — postulados sobre fondo pergamino por columna
   ==================================================================== */

.tablero-card {
    border-radius: 8px;
    padding: 10px 12px 11px;
    box-shadow: 0 1px 2px rgba(62, 39, 35, 0.05);
    transition: box-shadow 0.15s ease, transform 0.05s ease;
    border: 1px solid transparent;
    user-select: none;
    -webkit-user-select: none;
}

.tablero-card:hover {
    box-shadow: 0 3px 8px rgba(62, 39, 35, 0.08);
}

.tablero-card--dragging {
    opacity: 0.45;
    transform: scale(0.98);
    box-shadow: 0 8px 20px rgba(62, 39, 35, 0.12);
}

.tablero-card--entrando {
    animation: tablero-card-entra 320ms ease-out;
}

.tablero-card--optimista {
    opacity: 0.75;
    border-style: dashed;
}

@keyframes tablero-card-entra {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tablero-card--axioma {
    background: #FFFFFF;
    border-color: var(--tablero-axioma-accent);
}
.tablero-card--cuasi {
    background: #FFFFFF;
    border-color: var(--tablero-cuasi-accent);
}
.tablero-card--pendiente {
    background: #FFFFFF;
    border-color: var(--tablero-pend-accent);
}

/* Compatibilidad con clases legacy */
.tablero-card--indigo  { background: #FFFFFF; border-color: var(--tablero-axioma-accent); }
.tablero-card--emerald { background: #FFFFFF; border-color: var(--tablero-cuasi-accent); }
.tablero-card--amber   { background: #FFFFFF; border-color: var(--tablero-pend-accent); }

.tablero-col__body--drop-active {
    outline: 2px dashed var(--tablero-axioma-accent);
    outline-offset: -4px;
    border-radius: 6px;
    transition: background 150ms ease, outline-color 150ms ease;
}

.columna-axiomas.tablero-col__body--drop-active {
    outline-color: var(--tablero-axioma-accent);
    background: rgba(197, 160, 89, 0.08);
}

.columna-cuasi.tablero-col__body--drop-active {
    outline-color: var(--tablero-cuasi-accent);
    background: rgba(149, 165, 166, 0.1);
}

.columna-pendientes.tablero-col__body--drop-active {
    outline-color: var(--tablero-pend-accent);
    background: rgba(179, 102, 48, 0.06);
}

.pestana--drag-hover {
    background: var(--tablero-cuasi-fondo) !important;
    color: var(--tablero-cuasi-titulo) !important;
    box-shadow: inset 0 -2px 0 var(--tablero-cuasi-accent);
}

.panel-epistemico .tablero-col__body {
    min-height: 120px;
}

.tablero-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.tablero-card__tools {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.tablero-card__titulo {
    font-family: var(--tablero-serif);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.4;
    word-break: break-word;
    color: #000000;
}

.tablero-col--axioma .tablero-card__titulo,
.tablero-col--cuasi .tablero-card__titulo,
.tablero-col--pendiente .tablero-card__titulo {
    color: #000000;
}

.tablero-card.focus-mode .tablero-card__titulo,
.tablero-kanban--compacto .tablero-card.focus-mode .tablero-card__titulo {
    font-weight: 600;
}

.tablero-card__info,
.tablero-card__editar,
.tablero-card__eliminar,
.tablero-card__enviar,
.tablero-card__aprobar,
.tablero-card__crear-hijo,
.tablero-card__crear-hermano {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    flex: 0 0 22px;
    opacity: 0.72;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.tablero-card__crear-hijo {
    border-radius: 5px;
    opacity: 0.78;
}

.tablero-card__crear-hermano {
    border-radius: 5px;
    opacity: 0.78;
}

.tablero-card__hermano-glyph {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    user-select: none;
}

.tablero-card__enviar-ico {
    display: block;
    transform: scaleX(-1);
    opacity: 0.82;
}

.tablero-card__enviar:hover .tablero-card__enviar-ico {
    opacity: 1;
}

.tablero-ctx-menu {
    position: fixed;
    z-index: 10050;
}

.tablero-enviar-mapa__radio input {
    accent-color: #4338ca;
}

.tablero-col--axioma .tablero-card__crear-hijo,
.tablero-col--axioma .tablero-card__crear-hermano {
    color: var(--tablero-axioma-titulo);
}
.tablero-col--cuasi .tablero-card__crear-hijo,
.tablero-col--cuasi .tablero-card__crear-hermano {
    color: var(--tablero-cuasi-titulo);
}
.tablero-col--pendiente .tablero-card__crear-hijo,
.tablero-col--pendiente .tablero-card__crear-hermano {
    color: var(--tablero-pend-titulo);
}

.tablero-col--axioma .tablero-card__crear-hijo:hover,
.tablero-col--axioma .tablero-card__crear-hermano:hover {
    opacity: 1;
    background: rgba(197, 160, 89, 0.16);
}
.tablero-col--cuasi .tablero-card__crear-hijo:hover,
.tablero-col--cuasi .tablero-card__crear-hermano:hover {
    opacity: 1;
    background: rgba(149, 165, 166, 0.2);
}
.tablero-col--pendiente .tablero-card__crear-hijo:hover,
.tablero-col--pendiente .tablero-card__crear-hermano:hover {
    opacity: 1;
    background: rgba(179, 102, 48, 0.14);
}

.tablero-kanban--compacto .tablero-card__crear-hijo,
.tablero-kanban--compacto .tablero-card__crear-hermano {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.tablero-kanban--compacto .tablero-card__crear-hijo svg {
    width: 11px;
    height: 11px;
}

.tablero-kanban--compacto .tablero-card__hermano-glyph {
    font-size: 11px;
}

.tablero-col--axioma .tablero-card__info,
.tablero-col--axioma .tablero-card__editar,
.tablero-col--axioma .tablero-card__eliminar {
    color: var(--tablero-axioma-titulo);
}
.tablero-col--cuasi .tablero-card__info,
.tablero-col--cuasi .tablero-card__editar,
.tablero-col--cuasi .tablero-card__eliminar {
    color: var(--tablero-cuasi-titulo);
}
.tablero-col--pendiente .tablero-card__info,
.tablero-col--pendiente .tablero-card__editar,
.tablero-col--pendiente .tablero-card__eliminar {
    color: var(--tablero-pend-titulo);
}

.tablero-col--axioma .tablero-card__info:hover,
.tablero-col--axioma .tablero-card__editar:hover {
    opacity: 1;
    background: rgba(197, 160, 89, 0.16);
    color: var(--tablero-axioma-titulo);
}
.tablero-col--cuasi .tablero-card__info:hover,
.tablero-col--cuasi .tablero-card__editar:hover {
    opacity: 1;
    background: rgba(149, 165, 166, 0.2);
    color: var(--tablero-cuasi-titulo);
}
.tablero-col--pendiente .tablero-card__info:hover,
.tablero-col--pendiente .tablero-card__editar:hover {
    opacity: 1;
    background: rgba(179, 102, 48, 0.14);
    color: var(--tablero-pend-titulo);
}

.tablero-col--axioma .tablero-card__eliminar:hover {
    opacity: 1;
    background: rgba(109, 76, 65, 0.12);
    color: #4E342E;
}
.tablero-col--cuasi .tablero-card__eliminar:hover {
    opacity: 1;
    background: rgba(69, 90, 100, 0.12);
    color: #37474F;
}
.tablero-col--pendiente .tablero-card__eliminar:hover {
    opacity: 1;
    background: rgba(109, 76, 65, 0.12);
    color: #4E342E;
}

.tablero-card__info.is-vacia {
    opacity: 0.38;
    cursor: help;
}

.tablero-card__origen {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-top: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    line-height: 1.35;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease;
}

.tablero-col--axioma .tablero-card__origen {
    background: rgba(197, 160, 89, 0.08);
    border: 1px solid rgba(197, 160, 89, 0.25);
    color: var(--tablero-axioma-titulo);
}
.tablero-col--axioma .tablero-card__origen:hover {
    background: rgba(197, 160, 89, 0.16);
    border-color: var(--tablero-axioma-accent);
}

.tablero-col--cuasi .tablero-card__origen {
    background: rgba(149, 165, 166, 0.1);
    border: 1px solid rgba(149, 165, 166, 0.3);
    color: var(--tablero-cuasi-titulo);
}
.tablero-col--cuasi .tablero-card__origen:hover {
    background: rgba(149, 165, 166, 0.18);
    border-color: var(--tablero-cuasi-accent);
}

.tablero-col--pendiente .tablero-card__origen {
    background: rgba(179, 102, 48, 0.07);
    border: 1px solid rgba(179, 102, 48, 0.28);
    color: var(--tablero-pend-titulo);
}
.tablero-col--pendiente .tablero-card__origen:hover {
    background: rgba(179, 102, 48, 0.12);
    border-color: var(--tablero-pend-accent);
}

.tablero-card__origen-icono {
    flex: 0 0 auto;
    line-height: 1.2;
}

.tablero-card__origen-texto {
    word-break: break-word;
}

.tablero-card__acciones {
    display: none;
}

.tablero-card__tools .tablero-card__aprobar {
    margin-left: 0;
    padding: 0;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    border: none;
    background: transparent;
}

.tablero-card__tools .tablero-card__aprobar svg {
    width: 13px;
    height: 13px;
}

.tablero-card__aprobar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.78;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
    line-height: 1;
}

.tablero-col--pendiente .tablero-card__aprobar {
    color: var(--tablero-cuasi-titulo);
}

.tablero-col--pendiente .tablero-card__aprobar:hover {
    opacity: 1;
    background: rgba(149, 165, 166, 0.2);
    color: var(--tablero-cuasi-titulo);
}

.tablero-card__aprobar:active {
    transform: translateY(0.5px);
}

/* Modales del tablero — pergamino */
.tablero-modal-bib__backdrop {
    background: rgba(62, 39, 35, 0.35) !important;
}

.tablero-modal-bib__panel {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

.tablero-modal-bib__head {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.tablero-modal-bib__titulo {
    font-family: var(--tablero-serif);
    font-weight: 600;
    color: #000000 !important;
}

.tablero-modal-bib__sub {
    color: var(--tablero-texto-suave) !important;
}

.tablero-modal-bib__foot {
    background: #fafafa !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.tablero-modal-bib__foot--promocion {
    gap: 0.5rem !important;
}

.tablero-modal-bib__btn-promover--axioma {
    background: var(--tablero-pill-axioma-fondo) !important;
    color: var(--tablero-pill-axioma-texto) !important;
}

.tablero-modal-bib__btn-promover--axioma:hover {
    filter: brightness(0.92);
}

.tablero-modal-bib__btn-promover--cuasi {
    background: var(--tablero-pill-cuasi-fondo) !important;
    color: var(--tablero-pill-cuasi-texto) !important;
}

.tablero-modal-bib__btn-promover--cuasi:hover {
    filter: brightness(0.92);
}

.tablero-modal-bib__btn-prim {
    background: var(--tablero-axioma-titulo) !important;
    color: var(--tablero-axioma-fondo) !important;
}

.tablero-modal-bib__btn-prim:hover {
    background: #4E342E !important;
}

.tablero-modal-bib__btn-sec {
    color: var(--tablero-axioma-titulo) !important;
}

.tablero-modal-bib__btn-sec:hover {
    background: rgba(197, 160, 89, 0.12) !important;
}

.tablero-modal-bib__btn-confirm {
    background: var(--tablero-cuasi-titulo) !important;
    color: var(--tablero-cuasi-fondo) !important;
}

.tablero-modal-bib__btn-confirm:hover {
    background: #37474F !important;
}

.tablero-modal-bib__input {
    border-color: rgba(197, 160, 89, 0.35) !important;
    background: #FFFCF8 !important;
}

.tablero-modal-bib__input:focus {
    outline: 2px solid rgba(197, 160, 89, 0.45);
    outline-offset: 0;
}

.tablero-modal-bib__label {
    color: var(--tablero-axioma-titulo) !important;
}

.tablero-modal-bib__cuerpo {
    color: var(--tablero-texto-cuerpo) !important;
}

.tablero-siembra-bar__btn {
    color: var(--tablero-axioma-titulo);
    background: rgba(197, 160, 89, 0.12);
    border: 1px solid rgba(197, 160, 89, 0.35);
}

.tablero-siembra-bar__btn:hover {
    background: rgba(197, 160, 89, 0.22);
}

.tablero-btn-siembra-header {
    background: #000 !important;
    color: #fff !important;
    border: none;
}

.tablero-btn-siembra-header:hover {
    background: #1a1a1a !important;
}

.tablero-btn-siembra-header:hover {
    background: #1a1a1a !important;
}

.tablero-siembra-guardian-alerta {
    background: #fef2f2;
    border: 1px solid #f87171;
    color: #991b1b;
    font-weight: 500;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.tablero-siembra-guardian-alerta--error {
    border-color: #dc2626;
    box-shadow: 0 0 0 1px #fecaca;
}

.tablero-siembra-guardian-alerta--error strong {
    color: #7f1d1d;
}

.tablero-siembra-guardian-alerta-logica-wrap {
    border-left: 3px solid #dc2626;
    padding-left: 0.5rem;
}

.tablero-siembra-guardian-alerta-logica {
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #9a3412;
    font-weight: 600;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.tablero-siembra-guardian-riesgo-label:hover {
    color: #0f172a;
}

.tablero-siembra-guardian-alerta strong {
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.tablero-siembra-preview__dep--rechazada {
    color: #b91c1c;
    text-decoration: line-through;
}

.tablero-siembra-preview {
    border-color: rgba(148, 163, 184, 0.35) !important;
    background: #fff !important;
}

.tablero-modal-siembra__panel {
    max-width: min(48rem, calc(100vw - 2rem)) !important;
    width: 100%;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    background: #fff !important;
}

.tablero-modal-siembra__cuerpo {
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

#tablero-modal-siembra.tablero-modal-siembra--pensando {
    cursor: wait;
}

#tablero-modal-siembra.tablero-modal-siembra--pensando .tablero-modal-siembra__panel,
#tablero-modal-siembra.tablero-modal-siembra--pensando .tablero-modal-siembra__panel * {
    cursor: wait !important;
}

#tablero-modal-siembra .tablero-modal-bib__btn-prim {
    background: #000 !important;
    color: #fff !important;
}

#tablero-modal-siembra .tablero-modal-bib__btn-prim:hover {
    background: #1a1a1a !important;
}

#tablero-modal-siembra.tablero-modal-bib__backdrop.flex {
    display: flex !important;
}

.tablero-card__enlace-logico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    border: none;
    background: transparent;
    color: rgba(197, 160, 89, 0.95);
    cursor: pointer;
    border-radius: 4px;
    opacity: 0.92;
}

.tablero-card__enlace-logico:hover {
    opacity: 1;
    background: rgba(197, 160, 89, 0.14);
}

.tablero-card--enlace-destino {
    outline: 2px solid rgba(197, 160, 89, 0.75);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.18);
    transition: outline-color 0.2s ease, box-shadow 0.2s ease;
}

/* Familia lógica — foco en rama jerárquica (Axioma / Cuasi-Axioma) */
.tablero-kanban--familia-logica .tablero-card {
    transition:
        opacity 0.35s ease,
        filter 0.35s ease,
        box-shadow 0.35s ease,
        outline-color 0.35s ease;
}

.tablero-kanban--familia-logica .tablero-card.blur-mode {
    opacity: 0.26;
    filter: grayscale(0.4) saturate(0.65);
    pointer-events: none;
}

.tablero-kanban--familia-logica .tablero-card.focus-mode {
    opacity: 1;
    filter: none;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
    outline: 2px solid rgba(0, 0, 0, 0.42);
    outline-offset: 2px;
    position: relative;
    z-index: 2;
}

.tablero-kanban--familia-logica .tablero-col__head,
.tablero-kanban--familia-logica #tablero-resumen {
    opacity: 0.42;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.tablero-kanban--familia-logica .tablero-col__body {
    transition: opacity 0.35s ease;
}

#tablero-modal.tablero-modal-bib__backdrop.flex {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#tablero-kanban.tablero-kanban--bloqueado {
    pointer-events: none;
    opacity: 0.88;
}

.tablero-col__body--drop-target {
    outline: 2px dashed rgba(184, 134, 11, 0.65);
    outline-offset: -3px;
    background: rgba(197, 160, 89, 0.06);
}

#tablero-modal .tablero-modal-bib__panel {
    max-height: min(90vh, 520px);
    display: flex;
    flex-direction: column;
}

#tablero-modal .tablero-modal-bib__cuerpo {
    flex: 0 1 auto;
    overflow-y: auto;
}

/* ====================================================================
   POPOVER DE ARGUMENTO (singleton flotante)
   ==================================================================== */
.tablero-popover {
    position: fixed;
    z-index: 60;
    width: 320px;
    max-width: 90vw;
    background: var(--tablero-axioma-fondo);
    border: 1px solid rgba(197, 160, 89, 0.35);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(62, 39, 35, 0.16);
    padding: 0;
    overflow: hidden;
}
.tablero-popover.hidden { display: none; }
.tablero-popover__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(197, 160, 89, 0.08);
    border-bottom: 1px solid rgba(197, 160, 89, 0.22);
}
.tablero-popover__head strong {
    font-family: var(--tablero-serif);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--tablero-axioma-titulo);
    line-height: 1.3;
    word-break: break-word;
}
.tablero-popover__cerrar {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--tablero-axioma-titulo);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    flex: 0 0 22px;
    opacity: 0.7;
}
.tablero-popover__cerrar:hover {
    background: rgba(197, 160, 89, 0.16);
    opacity: 1;
}
.tablero-popover__cuerpo {
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--tablero-texto-cuerpo);
    line-height: 1.55;
    max-height: 280px;
    overflow-y: auto;
}
.tablero-popover__meta {
    padding: 6px 12px;
    background: rgba(242, 240, 233, 0.6);
    border-top: 1px solid rgba(197, 160, 89, 0.18);
    font-size: 10.5px;
    color: var(--tablero-texto-suave);
    display: flex;
    justify-content: flex-end;
}
.tablero-popover__estatus--axioma,
.tablero-popover__estatus--indigo {
    background: rgba(197, 160, 89, 0.16);
    color: var(--tablero-axioma-titulo);
}
.tablero-popover__estatus--cuasi,
.tablero-popover__estatus--emerald {
    background: rgba(149, 165, 166, 0.2);
    color: var(--tablero-cuasi-titulo);
}
.tablero-popover__estatus--pendiente,
.tablero-popover__estatus--amber {
    background: rgba(179, 102, 48, 0.16);
    color: var(--tablero-pend-titulo);
}
.tablero-popover__estatus--slate {
    background: rgba(149, 165, 166, 0.12);
    color: var(--tablero-cuasi-titulo);
}

.tablero-popover__origen {
    margin-top: 10px;
    padding: 8px 10px;
    background: #f1f5f9;
    border-radius: 6px;
    font-size: 11px;
    color: #475569;
    line-height: 1.4;
}
.tablero-popover__origen--vacio {
    background: #fffbeb;
    color: #92400e;
    border: 1px dashed #fcd34d;
}
.tablero-popover__origen--alerta {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fdba74;
}
.tablero-popover__origen--alerta .tablero-popover__origen-etq {
    color: #c2410c;
}
.tablero-card__alerta-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    margin-left: 0.25rem;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
}
.tablero-card--con-alerta {
    box-shadow: inset 3px 0 0 #f97316;
}
.tablero-popover__origen-etq {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 4px;
}
.tablero-popover__origen-detalle {
    font-size: 11.5px;
    color: #334155;
    line-height: 1.45;
}
.tablero-popover__btn-mapa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 12px;
    background: #1e293b;
    color: #f8fafc;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background 120ms ease;
}
.tablero-popover__btn-mapa:hover {
    background: #0f172a;
    color: #ffffff;
}

.nodo-select-pulse {
    animation: nodo-select-pulse 1s ease-in-out 3;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.55);
}
@keyframes nodo-select-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.55); }
    50%       { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.25); }
}

/* =====================================================================
   Mind-map jerárquico: cards compactas + plegado/desplegado
   =====================================================================
   La card vieja tenía un body extenso. La nueva sólo muestra header
   (chip + título + acciones); el contenido extenso se ve en el popover.
   Mantiene compatibilidad con .nodo-card[data-card-id]. */

/* Truncado del argumento en hasta dos líneas continuas. */
.nodo-card__texto {
    min-width: 0;
}
.nodo-card.border-yellow-400 .nodo-card__argumento,
.nodo-card.border-yellow-400 .nodo-card__id,
.nodo-card.border-green-500 .nodo-card__argumento,
.nodo-card.border-green-500 .nodo-card__id,
.nodo-card.border-amber-500 .nodo-card__argumento,
.nodo-card.border-amber-500 .nodo-card__id {
    color: #000;
    opacity: 1;
}

.nodo-card__argumento {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.nodo-card__origen {
    margin: 2px 0 0;
    font-size: 9px;
    line-height: 1.25;
    opacity: 0.85;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.nodo-card__origen-ref {
    font-style: italic;
}
.nodo-card__titulo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.25;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.nodo-card__preview {
    margin: 2px 0 0 0;
    font-size: 10px;
    line-height: 1.3;
    opacity: 0.88;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-word;
}
.nodo-card__id {
    flex: 0 0 auto;
    font-size: 9px;
    opacity: 0.72;
    line-height: 1.2;
    padding-top: 1px;
    user-select: none;
}
/* Inicial del tipo (P / C / Q / O) en un círculo pequeño. */
.nodo-card__inicial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
    font-size: 10px;
    font-weight: 700;
    flex: 0 0 18px;
    user-select: none;
}
/* Botón de info: idéntico look a btn-card pero el ícono es sutil. */
.btn-info {
    font-size: 12px;
    line-height: 1;
    padding: 0;
}

/* ----- Plegado / desplegado de ramas ----- */
.btn-plegado {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
    z-index: 6;
    transition: background 120ms ease, transform 120ms ease;
    user-select: none;
}
.btn-plegado:hover {
    background: #f1f5f9;
    transform: translateX(-50%) scale(1.08);
}

/* Badge "+N" — pegado al borde inferior derecho, indicador de hijos ocultos. */
.badge-hijos-ocultos {
    position: absolute;
    bottom: -10px;
    right: 6px;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9999px;
    background: #475569;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    z-index: 2;
    pointer-events: none;
    letter-spacing: 0.2px;
}
.nodo-padre-plegado {
    box-shadow: 0 0 0 2px rgba(71, 85, 105, 0.18),
                0 2px 6px rgba(15, 23, 42, 0.12) !important;
}

/* Clase global de ocultamiento: usada por cascade de plegado.
   Usamos display:none para que el nodo SALGA del flow (las flechas
   ya filtran por estaOcultoPorPlegado(), pero esto evita cualquier
   ghost por offsetLeft fantasma). */
.nodo-oculto {
    display: none !important;
}

/* ----- Popover lateral del contenido extenso de un nodo ----- */
.nodo-popover {
    position: absolute;
    z-index: 9999;
    min-width: 260px;
    max-width: 380px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #0f172a;
    overflow: hidden;
}
.nodo-popover.hidden { display: none; }

.nodo-popover__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.nodo-popover__head strong {
    flex: 1;
    font-size: 12.5px;
    line-height: 1.3;
    color: #0f172a;
    word-break: break-word;
}
.nodo-popover__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 22px;
}
.nodo-popover__cerrar {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    flex: 0 0 22px;
}
.nodo-popover__cerrar:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.nodo-popover__cuerpo {
    padding: 10px 12px;
    font-size: 12.5px;
    color: #334155;
    line-height: 1.5;
    max-height: 320px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.nodo-popover__meta {
    padding: 6px 12px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    font-size: 10.5px;
    color: #64748b;
    display: flex;
    gap: 8px;
}

/* =====================================================================
   Micro-barra contextual flotante (hover sobre la card)
   ===================================================================== */
/* Puente invisible para mantener hover al mover el mouse hacia las barras. */
.nodo-card {
    z-index: 2;
}
.nodo-card.companero-anclada {
    box-shadow:
        0 0 0 3px rgba(220, 38, 38, 0.58),
        0 0 16px rgba(239, 68, 68, 0.32);
    z-index: 31;
}

/* Tooltip retardado: argumento completo al hover prolongado (2 s) */
.nodo-card-tooltip {
    position: absolute;
    z-index: 36;
    max-width: min(360px, calc(100% - 16px));
    padding: 9px 11px;
    background: #1e293b;
    color: #f1f5f9;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.45;
    border-radius: 8px;
    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(148, 163, 184, 0.18);
    pointer-events: none;
    word-break: break-word;
    white-space: pre-wrap;
}

.nodo-card-tooltip[hidden] {
    display: none !important;
}
.nodo-card:hover,
.nodo-card:focus-within,
.nodo-card.is-menu-activo {
    z-index: 30;
}
.nodo-card::before,
.nodo-card::after {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    pointer-events: none;
    z-index: 0;
}
.nodo-card:hover::before,
.nodo-card:hover::after,
.nodo-card:focus-within::before,
.nodo-card:focus-within::after,
.nodo-card.is-menu-activo::before,
.nodo-card.is-menu-activo::after,
.nodo-card:has(.card-barra-flotante:hover)::before,
.nodo-card:has(.card-barra-flotante:hover)::after {
    pointer-events: auto;
}
.nodo-card::before {
    bottom: 100%;
    height: 38px;
}
.nodo-card::after {
    top: 100%;
    height: 44px;
}
.card-barra-flotante {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
    z-index: 25;
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
    white-space: nowrap;
}
/* Barra superior: crear hijos (+P +C +Q +H) */
.card-barra-flotante--arriba {
    top: -34px;
    transform: translateX(-50%) translateY(4px);
}
/* Barra inferior: ver, auditar, editar, eliminar */
.card-barra-flotante--abajo {
    bottom: -38px;
    transform: translateX(-50%) translateY(-4px);
}
.nodo-card:hover .card-barra-flotante,
.nodo-card:focus-within .card-barra-flotante,
.nodo-card.is-menu-activo .card-barra-flotante,
.nodo-card:has(.card-barra-flotante:hover) .card-barra-flotante,
.card-barra-flotante:hover {
    opacity: 1;
    pointer-events: auto;
}
.nodo-card:hover .card-barra-flotante--arriba,
.card-barra-flotante--arriba:hover {
    transform: translateX(-50%) translateY(0);
}
.nodo-card:hover .card-barra-flotante--abajo,
.card-barra-flotante--abajo:hover {
    transform: translateX(-50%) translateY(0);
}
/* Mientras se arrastra la card no queremos las barras (estorban). */
.nodo-card.is-dragging .card-barra-flotante,
.cursor-grabbing .card-barra-flotante {
    opacity: 0 !important;
    pointer-events: none !important;
}

.btn-flotante {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #334155;
    cursor: pointer;
    line-height: 1;
    transition: background 100ms ease, color 100ms ease,
                transform 100ms ease;
    user-select: none;
}
.btn-flotante:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12);
}
.btn-flotante:active {
    transform: translateY(0);
}
/* Variantes cromáticas: alineadas con ESTILOS_TIPO del JS. */
/* Panel modal de nodo: arrastrable por la cabecera. */
.modal-nodo-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(32rem, calc(100vw - 2rem));
    z-index: 51;
}
.modal-nodo-header {
    touch-action: none;
}

.btn-flot-a { background: #fef9c3; color: #854d0e; }
.btn-flot-a:hover { background: #fef08a; }
.btn-flot-companero { background: #e0f2fe; color: #0369a1; font-size: 13px; padding: 0; }
.btn-flot-companero:hover { background: #bae6fd; }
.btn-flot-companero__icon {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
    pointer-events: none;
}
.btn-flot-p { background: #dcfce7; color: #166534; }
.btn-flot-p:hover { background: #bbf7d0; }
.btn-flot-c { background: #fee2e2; color: #991b1b; }
.btn-flot-c:hover { background: #fecaca; }
.btn-flot-q { background: #fef3c7; color: #92400e; }
.btn-flot-q:hover { background: #fde68a; }
.btn-flot-h { background: #fae8ff; color: #86198f; }
.btn-flot-h:hover { background: #f5d0fe; }
.btn-flot-i { background: #eceff1; color: #4a5568; }
.btn-flot-i:hover { background: #dfe4ea; }
.btn-flot-v { background: #d1fae5; color: #065f46; }
.btn-flot-v:hover { background: #a7f3d0; }
.btn-flot-gramatica-sugerida {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.45);
    font-weight: 700;
}
.btn-flot-edit, .btn-flot-del,
.btn-flot-info, .btn-flot-audit, .btn-flot-mapa, .btn-flot-mapa-desvincular {
    background: #ffffff;
    border-color: #e2e8f0;
    font-size: 12px;
    padding: 0 6px;
}
.btn-flot-info:hover { background: #f0fdf4; }
.btn-flot-audit:hover { background: #f5f3ff; }
.btn-flot-mapa { background: #fff7ed; cursor: pointer; }
.btn-flot-mapa:hover { background: #ffedd5; }
.btn-flot-mapa--vinculado {
    box-shadow: inset 0 0 0 1px rgba(234, 88, 12, 0.35);
}
.btn-flot-mapa__icon {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
    pointer-events: none;
}
.btn-flot-mapa-desvincular {
    background: #fef2f2;
    cursor: pointer;
    padding: 0 5px;
}
.btn-flot-mapa-desvincular:hover { background: #fee2e2; }
.btn-flot-mapa-desvincular__wrap {
    position: relative;
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
}
.btn-flot-mapa-desvincular .btn-flot-mapa__icon {
    opacity: 0.45;
}
.btn-flot-mapa-desvincular__x {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    color: #0f172a;
    text-shadow:
        0 0 2px #fff,
        0 0 2px #fff,
        1px 1px 0 #fff,
        -1px -1px 0 #fff;
    pointer-events: none;
}
.btn-flot-info:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
.btn-flot-edit:hover { background: #eff6ff; }
.btn-flot-del:hover  { background: #fef2f2; }

/* =====================================================================
   Invalidación visual de auditorías por reconexión (pulso ámbar)
   ===================================================================== */
@keyframes nodo-desactualizado-pulse {
    0%   { box-shadow: 0 0 0 0     rgba(217, 119, 6, 0.55); }
    70%  { box-shadow: 0 0 0 12px  rgba(217, 119, 6, 0.00); }
    100% { box-shadow: 0 0 0 0     rgba(217, 119, 6, 0.00); }
}
.nodo-desactualizado {
    border-color: #d97706 !important;       /* amber-600 */
    border-width: 2px !important;
    animation: nodo-desactualizado-pulse 1.2s ease-in-out infinite;
}

/* Badge "⚠ obsoleta" que se inyecta en cabeceras de dictamen del panel
   lateral cuando la auditoría es posterior a un cambio de rama. */
.badge-auditoria-obsoleta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 9999px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    letter-spacing: 0.2px;
    vertical-align: middle;
}

/* =====================================================================
   Glosario contextual (clic derecho sobre prosa analítica)
   =====================================================================
   Dos elementos singletons viven en <body> y se posicionan en
   coordenadas de viewport+scroll:
     * .glosario-menu       → micro-menú con la opción única.
     * .glosario-popover    → tarjeta con definición / spinner / error.
   Lenguaje visual coherente con .tablero-popover y .nodo-popover. */

.glosario-menu {
    position: absolute;
    z-index: 10000;
    min-width: 200px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.glosario-menu__separador {
    height: 1px;
    margin: 0.2rem 0.35rem;
    background: rgba(148, 163, 184, 0.35);
}
.glosario-menu__item--interlineal .glosario-menu__termino {
    color: #0f766e;
}
.glosario-menu__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 12.5px;
    color: #0f172a;
    transition: background 100ms ease;
}
.glosario-menu__item:hover {
    background: #f1f5f9;
}
.glosario-menu__icono {
    font-size: 14px;
    flex: 0 0 18px;
    text-align: center;
}
.glosario-menu__icono-img {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}
.glosario-menu__texto {
    flex: 1;
    font-weight: 500;
}
.glosario-menu__termino {
    color: #64748b;
    font-size: 11px;
    font-style: italic;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----- Popover de definición ----- */
.glosario-popover {
    position: absolute;
    z-index: 10001;
    min-width: 280px;
    max-width: 380px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
    overflow: hidden;
    color: #0f172a;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.glosario-popover__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.glosario-popover__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 12px;
    flex: 0 0 22px;
}
.glosario-popover__termino {
    flex: 1;
    font-size: 13px;
    color: #0f172a;
    word-break: break-word;
}
.glosario-popover__cerrar {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    flex: 0 0 22px;
}
.glosario-popover__cerrar:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.glosario-popover__cuerpo {
    padding: 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #334155;
    max-height: 320px;
    overflow-y: auto;
}
.glosario-popover__explicacion {
    margin: 0 0 10px 0;
    color: #0f172a;
}
.glosario-popover__vacio {
    margin: 0;
    color: #94a3b8;
    font-style: italic;
}
.glosario-popover__academico {
    margin: 8px 0;
    padding: 6px 10px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}
.glosario-popover__academico summary {
    cursor: pointer;
    font-weight: 600;
    color: #475569;
    font-size: 11.5px;
}
.glosario-popover__academico p {
    margin: 6px 0 0 0;
    color: #334155;
    font-size: 12px;
}
.glosario-popover__ejemplo {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
}
.glosario-popover__ejemplo-titulo {
    margin: 0 0 4px 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
}
.glosario-popover__ejemplo p {
    margin: 0;
    color: #334155;
}
.glosario-popover__meta {
    padding: 6px 12px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    font-size: 10.5px;
    color: #94a3b8;
    display: flex;
    justify-content: flex-end;
    font-style: italic;
}
.glosario-popover__error {
    margin: 0 0 10px 0;
    padding: 8px 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #991b1b;
    font-size: 12px;
}
.glosario-popover__reintentar {
    display: inline-block;
    padding: 4px 10px;
    background: #1e293b;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 100ms ease;
}
.glosario-popover__reintentar:hover {
    background: #0f172a;
}
.glosario-popover__cargando {
    margin: 6px 0 0 0;
    color: #64748b;
    font-size: 12px;
    text-align: center;
}

/* Spinner discreto que se anima mientras el LLM responde. */
@keyframes glosario-spin {
    to { transform: rotate(360deg); }
}
.glosario-spinner {
    width: 22px;
    height: 22px;
    margin: 4px auto;
    border-radius: 50%;
    border: 2.5px solid #e2e8f0;
    border-top-color: #6366f1;
    animation: glosario-spin 700ms linear infinite;
}

/* ----- Cosecha Activa (menú extendido + popover tipo + toast) ----- */
.cosecha-menu {
    min-width: 240px;
}
.cosecha-menu__item + .cosecha-menu__item {
    border-top: 1px solid #e2e8f0;
}
.cosecha-menu__preview {
    margin: 0;
    padding: 6px 12px 8px;
    font-size: 10.5px;
    color: #94a3b8;
    font-style: italic;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cosecha-menu__submenu-wrap {
    position: relative;
    border-top: 1px solid #e2e8f0;
}
.cosecha-menu__item--submenu {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: flex-start;
}
.cosecha-menu__flecha {
    margin-left: auto;
    font-size: 11px;
    color: #64748b;
}
.cosecha-menu__submenu {
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 4px 0;
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.04);
}
.cosecha-menu__submenu.hidden {
    display: none;
}

.cosecha-menu__padre-label {
    display: block;
    padding: 6px 12px 2px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.cosecha-menu__padre-select {
    display: block;
    width: calc(100% - 24px);
    margin: 0 12px 8px;
    padding: 5px 8px;
    font-size: 11px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #334155;
}

.cosecha-menu__padre-select:focus {
    outline: 2px solid rgba(99, 102, 241, 0.35);
    outline-offset: 1px;
}

.cosecha-menu__seccion {
    margin: 0.45rem 0.35rem 0.2rem;
    padding: 0.35rem 0.5rem 0.1rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    border-top: 1px solid #e2e8f0;
}
.cosecha-menu__seccion:first-of-type {
    border-top: none;
    margin-top: 0.2rem;
}

.cosecha-menu__subitem {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 16px 8px 28px;
    font-size: 12px;
    font-weight: 500;
    color: #334155;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.cosecha-menu__subitem:hover {
    background: #eef2ff;
    color: #3730a3;
}
.cosecha-menu__item--busqueda {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 2px;
    padding-top: 6px;
}
.cosecha-menu__item--busqueda .glosario-menu__termino {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.85em;
    opacity: 0.85;
}
.cosecha-menu__subitem + .cosecha-menu__subitem {
    border-top: 1px solid #f1f5f9;
}

.cosecha-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    z-index: 10002;
    padding: 10px 18px;
    background: #064e3b;
    color: #ecfdf5;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(6, 78, 59, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
}
.cosecha-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.cosecha-toast--error {
    background: #7f1d1d;
    color: #fef2f2;
    box-shadow: 0 8px 24px rgba(127, 29, 29, 0.35);
}

.cosecha-popover {
    position: absolute;
    z-index: 10001;
    min-width: 240px;
    max-width: 320px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
    overflow: hidden;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.cosecha-popover__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #ecfdf5;
    border-bottom: 1px solid #a7f3d0;
}
.cosecha-popover__titulo {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: #065f46;
}
.cosecha-popover__cerrar {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    flex: 0 0 22px;
}
.cosecha-popover__cerrar:hover {
    background: #d1fae5;
    color: #065f46;
}
.cosecha-popover__preview {
    margin: 0;
    padding: 8px 12px;
    font-size: 11px;
    color: #64748b;
    font-style: italic;
    border-bottom: 1px solid #f1f5f9;
    word-break: break-word;
}
.cosecha-popover__opciones {
    display: flex;
    flex-direction: column;
    padding: 4px;
    gap: 2px;
}
.cosecha-popover__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: #0f172a;
    cursor: pointer;
    text-align: left;
    transition: background 100ms ease;
}
.cosecha-popover__btn:hover {
    background: #f0fdf4;
}
.cosecha-popover__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    flex: 0 0 20px;
}
.cosecha-popover__chip--a { background: #facc15; color: #713f12; }
.cosecha-popover__chip--p { background: #22c55e; }
.cosecha-popover__chip--q { background: #f59e0b; font-size: 12px; }
.cosecha-popover__chip--h { background: #d946ef; }
.cosecha-popover__chip--i { background: #7f8c8d; }
.cosecha-popover__chip--v { background: #27ae60; }
.cosecha-popover__chip--c { background: #dc2626; }

/* Gramática lógica Doxos — Investigación / Verificación */
.lienzo-leyenda-investigacion,
.lienzo-leyenda-indagacion { background: #7f8c8d; }
.lienzo-leyenda-verificacion { background: #27ae60; }

.nodo-card--investigacion,
.nodo-card--indagacion {
    border-color: #7f8c8d !important;
    background: #f4f6f6;
    color: #1e293b;
}
.nodo-card__chip--investigacion,
.nodo-card__chip--indagacion {
    background: #7f8c8d;
    color: #ffffff;
}
.nodo-card--verificacion {
    border-color: #27ae60 !important;
    background: #ecfdf5;
    color: #1e293b;
}
.nodo-card__chip--verificacion {
    background: #27ae60;
    color: #ffffff;
}
.nodo-card__vinculo-mapa {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    margin-top: 0.1rem;
    pointer-events: none;
}
.nodo-card__vinculo-mapa-icon {
    width: 16px;
    height: 16px;
    display: block;
    opacity: 0.92;
}

.nodo-mapa-ctx-menu {
    position: fixed;
    z-index: 12050;
    min-width: 11rem;
    padding: 0.25rem 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}
.nodo-mapa-ctx-menu.hidden { display: none !important; }
.nodo-mapa-ctx-menu__item {
    display: block;
    width: 100%;
    padding: 0.45rem 0.75rem;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 0.82rem;
    color: #1e293b;
    cursor: pointer;
}
.nodo-mapa-ctx-menu__item:hover {
    background: #f1f5f9;
}
.nodo-mapa-ctx-menu__sep {
    height: 1px;
    margin: 0.25rem 0;
    background: #e2e8f0;
}

.btn-flot-adjuntos {
    background: #f8fafc;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
}
.btn-flot-adjuntos:hover { background: #e2e8f0; }
.btn-flot-adjuntos--vinculado {
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px #93c5fd;
}

.nodo-card__adjuntos-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-top: 0.1rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.68rem;
    font-weight: 600;
    pointer-events: none;
}
.nodo-card__adjuntos-icon { font-size: 0.72rem; line-height: 1; }

.modal-adjuntos-nodo {
    position: fixed;
    inset: 0;
    z-index: 12045;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-adjuntos-nodo.hidden { display: none !important; }
.modal-adjuntos-nodo__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}
.modal-adjuntos-nodo__panel {
    position: relative;
    z-index: 1;
    width: min(34rem, calc(100vw - 2rem));
    max-height: min(85vh, 620px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}
.modal-adjuntos-nodo__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}
.modal-adjuntos-nodo__titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
}
.modal-adjuntos-nodo__cerrar {
    border: none;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
}
.modal-adjuntos-nodo__hint {
    margin: 0;
    padding: 0.5rem 1rem 0;
    font-size: 0.78rem;
    color: #64748b;
}
.modal-adjuntos-nodo__seccion {
    padding: 0.65rem 1rem 0;
    min-height: 0;
}
.modal-adjuntos-nodo__seccion--agregar {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: 1px solid #f1f5f9;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
}
.modal-adjuntos-nodo__subtitulo {
    margin: 0 0 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.modal-adjuntos-nodo__vinculados {
    max-height: 9rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.modal-adjuntos-nodo__crear-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}
.modal-adjuntos-nodo__crear-bar.hidden { display: none !important; }
.modal-adjuntos-nodo__btn-crear {
    border: 1px dashed #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 6px;
    padding: 0.28rem 0.55rem;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
}
.modal-adjuntos-nodo__btn-crear:hover:not(:disabled) { background: #dbeafe; }
.modal-adjuntos-nodo__btn-crear:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.modal-adjuntos-nodo__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}
.modal-adjuntos-nodo__tab {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    cursor: pointer;
    color: #475569;
}
.modal-adjuntos-nodo__tab.is-activo {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}
.modal-adjuntos-nodo__buscar {
    width: 100%;
    margin-bottom: 0.45rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.82rem;
}
.modal-adjuntos-nodo__candidatos {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 6rem;
}
.modal-adjuntos-nodo__vacio {
    margin: 0.5rem 0;
    font-size: 0.82rem;
    color: #94a3b8;
}
.modal-adjuntos-nodo__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
}
.modal-adjuntos-nodo__item:hover:not(:disabled) { background: #f8fafc; }
.modal-adjuntos-nodo__item.is-vinculado,
.modal-adjuntos-nodo__item:disabled {
    opacity: 0.55;
    cursor: default;
}
.modal-adjuntos-nodo__item--vinculado { cursor: default; }
.modal-adjuntos-nodo__item-main {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    min-width: 0;
    flex: 1;
}
.modal-adjuntos-nodo__item-icon { flex-shrink: 0; }
.modal-adjuntos-nodo__item-texto {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.modal-adjuntos-nodo__item-titulo {
    font-size: 0.82rem;
    font-weight: 600;
    color: #0f172a;
}
.modal-adjuntos-nodo__item-meta,
.modal-adjuntos-nodo__preview,
.modal-adjuntos-nodo__ref {
    font-size: 0.72rem;
    color: #64748b;
}
.modal-adjuntos-nodo__ref { color: #0369a1; }
.modal-adjuntos-nodo__item-acciones {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}
.modal-adjuntos-nodo__btn-abrir,
.modal-adjuntos-nodo__btn-quitar {
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 6px;
    padding: 0.2rem 0.45rem;
    font-size: 0.72rem;
    cursor: pointer;
}
.modal-adjuntos-nodo__btn-quitar {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fef2f2;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
}
.modal-adjuntos-nodo__pie {
    padding: 0.65rem 1rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
}
.modal-adjuntos-nodo__btn-cancelar {
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
}

.modal-vincular-mapa {
    position: fixed;
    inset: 0;
    z-index: 12040;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-vincular-mapa.hidden { display: none !important; }
.modal-vincular-mapa__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}
.modal-vincular-mapa__panel {
    position: relative;
    z-index: 1;
    width: min(28rem, calc(100vw - 2rem));
    max-height: min(80vh, 520px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}
.modal-vincular-mapa__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}
.modal-vincular-mapa__titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}
.modal-vincular-mapa__cerrar {
    border: none;
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
}
.modal-vincular-mapa__hint {
    margin: 0;
    padding: 0.65rem 1rem 0;
    font-size: 0.78rem;
    color: #64748b;
}
.modal-vincular-mapa__toolbar {
    display: flex;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
}
.modal-vincular-mapa__buscar {
    flex: 1;
    min-width: 0;
    padding: 0.45rem 0.65rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.82rem;
}
.modal-vincular-mapa__btn-nuevo {
    flex-shrink: 0;
    padding: 0.45rem 0.65rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    font-size: 0.78rem;
    cursor: pointer;
}
.modal-vincular-mapa__lista {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 0.5rem 0.5rem;
}
.modal-vincular-mapa__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    margin: 0.25rem 0;
    padding: 0.55rem 0.65rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
}
.modal-vincular-mapa__item.is-activo {
    border-color: #6366f1;
    background: #eef2ff;
}
.modal-vincular-mapa__item-titulo {
    font-size: 0.84rem;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.modal-vincular-mapa__item-id {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: #64748b;
}
.modal-vincular-mapa__item-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.modal-vincular-mapa__item-badge {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
}
.modal-vincular-mapa__item-badge--global {
    background: #f1f5f9;
    color: #64748b;
}
.modal-vincular-mapa__vacio {
    padding: 1rem;
    font-size: 0.82rem;
    color: #64748b;
    text-align: center;
}
.modal-vincular-mapa__pie {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-top: 1px solid #e2e8f0;
}
.modal-vincular-mapa__btn-quitar,
.modal-vincular-mapa__btn-cancelar {
    padding: 0.45rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
}
.modal-vincular-mapa__btn-quitar {
    margin-right: auto;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}
.modal-vincular-mapa__btn-cancelar {
    border: 1px solid #cbd5e1;
    background: #ffffff;
}

/* Feedback visual al arrastrar prosa sobre el lienzo */
@keyframes lienzo-drag-pulse {
    0%, 100% { outline-color: #10b981; }
    50%       { outline-color: #34d399; }
}
#lienzo.lienzo-drag-over {
    outline: 2px dashed #10b981;
    outline-offset: -3px;
    animation: lienzo-drag-pulse 1.2s ease-in-out infinite;
    background-color: #ecfdf5;
}

/* =====================================================================
   Dashboard de proyectos — acceso rápido + acordeón por categoría
   ===================================================================== */
.dash-card-rapida {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 9rem;
    max-width: 11rem;
    padding: 0.5rem 0.65rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: border-color 120ms ease, box-shadow 120ms ease;
    position: relative;
}
.dash-card-rapida:hover {
    border-color: #818cf8;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.12);
}
.dash-card-rapida__barra {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    min-width: 0;
}
.dash-card-rapida__link {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}
.dash-card-rapida__link:hover {
    color: #4338ca;
}
.dash-card-rapida__meta {
    font-size: 10px;
    color: #94a3b8;
}

/* Estrella favorito: vacía ☆ / rellena ★ */
.dash-btn-fav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #cbd5e1;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 120ms ease, transform 80ms ease;
}
.dash-btn-fav:hover {
    color: #f59e0b;
    transform: scale(1.1);
}
.dash-btn-fav.is-favorito,
.dash-btn-fav[data-favorito="1"] {
    color: #f59e0b;
}
.dash-btn-fav--solo-lectura {
    cursor: default;
}
.dash-btn-fav--solo-lectura:hover {
    transform: none;
}
.dash-btn-fav:disabled {
    opacity: 0.5;
    cursor: wait;
}

.dash-col-acciones {
    vertical-align: middle;
}
.dash-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 22px;
    margin-left: 2px;
    color: #94a3b8;
    cursor: grab;
    font-size: 14px;
    user-select: none;
    vertical-align: middle;
}
.dash-drag-handle:active {
    cursor: grabbing;
}
.dash-fila-proyecto.is-dragging {
    opacity: 0.45;
    background: #eef2ff !important;
}
.dash-acordeon.is-drop-target {
    outline: 2px dashed #818cf8;
    outline-offset: 2px;
    background: #f5f3ff;
}
.dash-acordeon__dropzone.is-drop-target,
.dash-acordeon.is-drop-target .dash-acordeon__cuerpo {
    background: #faf5ff;
}

.dash-select-categoria:focus {
    outline: none;
    border-color: #818cf8;
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.35);
}

.dash-acordeon {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.dash-acordeon__head {
    display: flex;
    align-items: stretch;
    background: #f8fafc;
    border-bottom: 1px solid transparent;
}
.dash-acordeon__head:has(.dash-acordeon__cuerpo.is-open),
.dash-acordeon:has(.dash-acordeon__cuerpo.is-open) .dash-acordeon__head {
    border-bottom-color: #e2e8f0;
}
.dash-acordeon__cabecera {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    transition: background 120ms ease;
}
.dash-acordeon__acciones-cat {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 0.5rem 0 0;
    flex-shrink: 0;
}
.dash-btn-cat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    opacity: 0.55;
    transition: opacity 120ms ease, background 120ms ease;
}
.dash-btn-cat:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.85);
}
.dash-btn-cat-del:hover {
    background: #fee2e2;
}
.dash-btn-cat:disabled {
    opacity: 0.35;
    cursor: wait;
}
.dash-acordeon__cabecera:hover {
    background: #f1f5f9;
}
.dash-acordeon__chevron {
    display: inline-block;
    font-size: 12px;
    color: #64748b;
    transition: transform 160ms ease;
}
.dash-acordeon__cabecera[aria-expanded="true"] .dash-acordeon__chevron {
    transform: rotate(90deg);
}
.dash-acordeon__titulo {
    flex: 1;
}
.dash-acordeon__conteo {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    background: #e2e8f0;
    border-radius: 9999px;
    padding: 1px 8px;
    min-width: 1.5rem;
    text-align: center;
}
.dash-acordeon__cuerpo {
    display: none;
    border-top: 1px solid #e2e8f0;
}
.dash-acordeon__cuerpo.is-open {
    display: block;
}

.dash-tabla-proyectos thead th {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    padding: 0.5rem 1rem;
    background: #fafafa;
    border-bottom: 1px solid #e2e8f0;
}
.dash-tabla-proyectos tbody td {
    padding: 0.55rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.dash-tabla-proyectos tbody tr:last-child td {
    border-bottom: none;
}

/* --- Dashboard compacto + navbar toolbar (2026-05-27s) --- */
.bg-app-page {
    background-color: #e9edf2;
}
.navbar-dash-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 720px;
    margin-left: 8px;
}
.navbar-dash-buscar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 180px;
    min-width: 140px;
    max-width: 320px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 0 8px;
    height: 30px;
}
.navbar-dash-buscar:focus-within {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
}
.navbar-dash-buscar__icono { color: #94a3b8; flex-shrink: 0; }
.navbar-dash-buscar__input {
    flex: 1; min-width: 0; border: none; background: transparent;
    color: #f1f5f9; font-size: 12px; outline: none;
}
.navbar-dash-buscar__input::placeholder { color: #94a3b8; }
.navbar-dash-buscar__limpiar {
    border: none; background: transparent; color: #94a3b8;
    font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.navbar-dash-buscar__limpiar:hover { color: #f1f5f9; }
.navbar-dash-select {
    height: 30px; padding: 0 8px; font-size: 11px; border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08); color: #e2e8f0;
    cursor: pointer; max-width: 96px;
}
.navbar-dash-select option { color: #1e293b; background: #fff; }
.navbar-dash-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--navbar-control-h, 34px);
    height: var(--navbar-control-h, 34px);
    min-width: var(--navbar-control-h, 34px);
    min-height: var(--navbar-control-h, 34px);
    padding: 0; border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08); color: #e2e8f0;
    cursor: pointer; flex-shrink: 0;
}
.navbar-dash-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.24);
}
.navbar-dash-btn--accent {
    background: rgba(99, 102, 241, 0.35);
    border-color: rgba(129, 140, 248, 0.45); color: #eef2ff;
}
.navbar-dash-toolbar svg {
    width: var(--navbar-icon-size, 18px);
    height: var(--navbar-icon-size, 18px);
}
.navbar-centro-chip {
    display: inline-block; max-width: 160px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
    font-size: 11px; color: #94a3b8;
    padding: 0 8px 0 0;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    margin-right: 4px;
}
.dash-page { display: flex; flex-direction: column; gap: 6px; }
.dash-acceso-compacto {
    display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
}
.dash-acceso-compacto__label {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: #64748b; flex-shrink: 0;
}
.dash-acceso-compacto__lista {
    display: flex; flex-wrap: wrap; gap: 4px; min-width: 0;
}
.dash-acordeon-lista { display: flex; flex-direction: column; gap: 4px; }
.is-busqueda-oculto { display: none !important; }
.dash-card-rapida {
    flex-direction: row; align-items: center;
    min-width: 0; max-width: 11rem;
    padding: 2px 6px; min-height: 22px;
    border-radius: 4px; border-color: #d8dee8;
    box-shadow: none;
}
.dash-card-rapida__link {
    font-size: 11px; font-weight: 500; line-height: 1.2;
    white-space: nowrap; display: block;
    -webkit-line-clamp: unset; -webkit-box-orient: unset;
}
.dash-btn-fav--compact { width: 16px; height: 16px; font-size: 12px; }
.dash-acordeon { border-radius: 6px; border-color: #d8dee8; box-shadow: none; }
.dash-acordeon__head { background: #f3f5f8; min-height: 28px; }
.dash-acordeon__cabecera {
    gap: 4px; padding: 0 8px; font-size: 12px; min-height: 28px;
}
.dash-acordeon__acciones-cat { padding-right: 4px; }
.dash-btn-cat { width: 24px; height: 24px; font-size: 11px; border-radius: 4px; }
.dash-acordeon__chevron { font-size: 10px; }
.dash-acordeon__conteo {
    font-size: 10px; padding: 0 6px; line-height: 16px; min-width: 1.25rem;
}
.dash-acordeon__cuerpo { border-top: none; }
.dash-acordeon__vacio-texto {
    margin: 0; padding: 6px 10px; font-size: 11px;
    color: #94a3b8; font-style: italic;
}
.dash-tabla-proyectos { font-size: 11px; line-height: 1.2; }
.dash-tabla-proyectos thead { display: none; }
.dash-tabla-proyectos tbody td {
    padding: 2px 8px; height: 24px; border-bottom-color: #eef1f5;
}
.dash-tabla-proyectos tbody tr:hover { background: #f5f7ff; }
.dash-col-acciones { width: 36px; padding: 0 4px !important; }
.dash-drag-handle { width: 14px; height: 16px; font-size: 11px; margin-left: 0; }
.dash-fila-titulo { font-weight: 500; color: #1e293b; }
.dash-fila-id { font-size: 9px; color: #94a3b8; margin-left: 4px; }
.dash-fila-rango { color: #4f46e5; font-size: 10px; }
.dash-fila-rango--global { color: #94a3b8; font-style: italic; }
.dash-col-fecha, .dash-col-autor { color: #64748b; font-size: 10px; }
.dash-col-cat { padding: 0 6px !important; }
.dash-cat-field {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
}
.dash-cat-field__label {
    font-size: 9px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.dash-col-proy-acciones {
    width: 52px;
    padding: 0 4px !important;
    white-space: nowrap;
}
.dash-btn-proy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    opacity: 0.72;
    transition: opacity 120ms ease, background 120ms ease;
}
.dash-btn-proy:hover {
    opacity: 1;
    background: rgba(148, 163, 184, 0.18);
}
.dash-btn-proy-del:hover {
    background: rgba(239, 68, 68, 0.12);
}
.dash-select-categoria {
    font-size: 10px; height: 20px; padding: 0 4px;
    border-radius: 4px; max-width: 8rem;
}
.navbar-dash-btn--buscar { width: auto; padding: 0 10px; gap: 4px; }

/* --- Login (misma atmósfera que portada del dashboard) --- */
.login-page {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 52px);
    padding: 2rem 1.5rem 2.5rem;
}
.login-page__inner {
    display: grid;
    grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    width: 100%;
    max-width: 1080px;
    align-items: center;
}
.login-page__logo {
    display: block;
    width: clamp(11rem, 28vw, 20rem);
    height: auto;
    filter: brightness(0) invert(1);
}
.login-page__titulo {
    margin: 0;
    font-family: "Arial Nova", "Arial Nova Cond", Arial, sans-serif;
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #ffffff;
    line-height: 1.05;
}
.login-page__cita {
    margin: 1.5rem 0 0;
    padding: 0;
    border: none;
    font-size: clamp(0.95rem, 2.2vw, 1.12rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
    font-family: "Literata", Georgia, "Times New Roman", serif;
}
.login-page__resalte {
    color: #ffffff;
    font-weight: 700;
}
.login-page__referencia {
    margin: 1rem 0 0;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.95);
}
.login-page__panel {
    position: relative;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 14px;
    padding: 2rem;
    box-shadow:
        0 24px 48px rgba(2, 8, 23, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.login-page__panel-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.login-page__panel-titulo {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #0f172a;
}
.login-page__ayuda {
    flex-shrink: 0;
    margin: -0.15rem -0.15rem 0 0;
}
.login-page__ayuda-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.login-page__ayuda-trigger:hover,
.dropdown.login-page__ayuda.is-abierto > .login-page__ayuda-trigger {
    background: #e0f2fe;
    border-color: #38bdf8;
    color: #0c4a6e;
}
.login-page__ayuda-trigger:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 1px;
}
.login-page__ayuda-glyph {
    font-family: "Arial Nova", Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
}
.login-page__columna-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.login-page__autor {
    margin: 0.65rem 0 0;
    text-align: right;
    font-size: 0.78rem;
    line-height: 1.35;
    color: rgba(148, 163, 184, 0.92);
    font-family: "Arial Nova", Arial, sans-serif;
    white-space: pre;
}
.login-footer {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.login-footer > div {
    color: rgba(148, 163, 184, 0.85);
}
.login-footer [data-marca-sistema] {
    color: rgba(226, 232, 240, 0.9);
}
body:has(.login-page) main > .mb-4 {
    position: relative;
    z-index: 2;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.5rem;
}
@media (max-width: 900px) {
    .login-page__inner {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
    .login-page__marca {
        text-align: center;
    }
    .login-page__cita {
        text-align: left;
    }
}

/* --- Portada dashboard: vistas del lienzo --- */
.dash-page--portada {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 52px);
    padding: 0.19rem 1.5rem 1rem;
    overflow: hidden;
    background:
        radial-gradient(ellipse 90% 70% at 100% 100%, rgba(72, 130, 220, 0.55) 0%, transparent 58%),
        radial-gradient(ellipse 50% 45% at 92% 88%, rgba(130, 185, 255, 0.35) 0%, transparent 52%),
        linear-gradient(155deg, #071525 0%, #0c1e3a 45%, #081a32 100%);
}
.dash-page--portada .dash-vistas-portada {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    max-width: none;
    width: 100%;
    margin: 0;
    margin-top: 0.04rem;
    padding: 0.25rem 0.5rem;
}
.dash-vistas-portada__viewport {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.dash-vistas-portada__escala {
    transform-origin: center center;
    will-change: transform;
    display: inline-block;
    width: max-content;
    max-width: none;
    vertical-align: top;
}
.dash-vistas-portada {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 0.5rem;
}
.dash-vistas-portada__grid {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.5rem;
    row-gap: 0.5rem;
    align-items: start;
}
/* Portada: bloque compacto (~980px) con textos 25% más estrechos; el zoom JS escala el conjunto. */
.dash-page--portada .dash-vistas-portada__grid {
    width: max-content;
    max-width: none;
    /* ~730px columna texto original → 75% ≈ 34.2rem */
    grid-template-columns: auto 34.2rem;
}
.dash-vista-fila {
    display: contents;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    padding: 0;
    text-decoration: none;
}
a.dash-vista-fila--enlace {
    display: contents;
    color: inherit;
}
a.dash-vista-fila--enlace:hover,
a.dash-vista-fila--enlace:focus-visible {
    color: inherit;
    text-decoration: none;
}
.dash-vista-fila__img-wrap {
    grid-column: 1;
    justify-self: start;
    align-self: start;
    display: block;
    width: max-content;
    height: max-content;
    line-height: 0;
    font-size: 0;
    margin: 0;
    padding: 0;
}
/* Separación uniforme entre imágenes sin pegarlas ni dejar huecos enormes. */
.dash-vistas-portada__grid > .dash-vista-fila__img-wrap {
    margin-bottom: 0.15rem;
}
.dash-vista-fila__img {
    display: block;
    max-height: 149px;
    width: auto;
    height: auto;
    max-width: 210px;
    border: 2px solid transparent;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}
.dash-vista-fila:hover .dash-vista-fila__img,
.dash-vista-fila:focus-visible .dash-vista-fila__img {
    border-color: #ffffff;
}
.dash-vista-fila__fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    max-height: 149px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    border: 2px solid transparent;
    box-sizing: border-box;
}
.dash-vista-fila:hover .dash-vista-fila__fallback,
.dash-vista-fila:focus-visible .dash-vista-fila__fallback {
    border-color: #ffffff;
}
.dash-vista-fila__texto {
    grid-column: 2;
    align-self: start;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-align: left;
    padding: 0.1rem 0 0.25rem;
}
.dash-page--portada .dash-vista-fila__texto {
    width: 100%;
    max-width: 34.2rem;
    overflow-wrap: break-word;
}
.dash-vista-fila__titulo {
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.15;
}
.dash-vista-fila__cita {
    font-size: 0.88rem;
    line-height: 1.28;
    color: rgba(255, 255, 255, 0.88);
    text-align: left;
    text-align-last: left;
    hyphens: none;
}
.dash-vista-fila__resalte {
    color: #fde68a;
    font-weight: 600;
    background: transparent;
}
.dash-vista-fila__ref {
    display: inline-block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.95);
}
.dash-vista-fila__ref--inline {
    display: inline;
    margin-top: 0;
    margin-left: 0.2em;
}
.modal-listado-proyectos__rapido {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}
.modal-listado-proyectos__btn-icono--accent {
    background: #eef2ff;
    border-color: #a5b4fc;
    color: #4338ca;
}
.modal-listado-proyectos__btn-icono--accent:hover {
    background: #e0e7ff;
    border-color: #818cf8;
}
.modal-listado-proyectos__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 10px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
.modal-listado-proyectos__acciones.hidden {
    display: none !important;
}
.modal-listado-proyectos__btn-sin-proyecto {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%);
    color: #fff;
    cursor: pointer;
}
.modal-listado-proyectos__btn-sin-proyecto:hover {
    background: linear-gradient(135deg, #254770 0%, #163458 100%);
}
.modal-listado-proyectos__acciones-hint {
    margin: 0;
    flex: 1 1 180px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.35;
}
.navbar-buscador-texto--sin-proyecto {
    font-style: italic;
    color: #94a3b8;
}

/* --- Modal listado de proyectos --- */
.modal-listado-proyectos {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-listado-proyectos.hidden { display: none !important; }
body.modal-proyectos-abierto { overflow: hidden; }
.modal-listado-proyectos__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}
.modal-listado-proyectos__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(960px, 100%);
    max-height: min(88vh, 900px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}
.modal-listado-proyectos__cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
.modal-listado-proyectos__titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}
.modal-listado-proyectos__hint {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: #4f46e5;
    font-style: italic;
}
.modal-listado-proyectos__cerrar {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 0 4px;
}
.modal-listado-proyectos__cerrar:hover { color: #1e293b; }
.modal-listado-proyectos__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    flex-wrap: wrap;
}
.modal-listado-proyectos__buscar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 200px;
    min-width: 160px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 10px;
    height: 34px;
    background: #fff;
}
.modal-listado-proyectos__buscar:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}
.modal-listado-proyectos__buscar-icono { color: #94a3b8; flex-shrink: 0; }
.modal-listado-proyectos__buscar-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #1e293b;
    outline: none;
}
.modal-listado-proyectos__buscar-limpiar {
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
}
.modal-listado-proyectos__ordenar {
    height: 34px;
    padding: 0 8px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    cursor: pointer;
}
.modal-listado-proyectos__btn-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    cursor: pointer;
}
.modal-listado-proyectos__btn-icono:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}
.modal-listado-proyectos__cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 16px 16px;
}
.modal-listado-proyectos__cuerpo .dash-acordeon-lista {
    gap: 6px;
}

/* ===================================================================
   Tarjetas palabras_interlineal — 7 filas fijas (orden DOM, sin mezclar capas legacy)
   =================================================================== */
.exegetico-grid[data-motor-tarjetas="palabras_interlineal"] .palabra-card--7filas > * {
    order: unset !important;
}

/* Hereda flujo “tira” de .palabra-card: ancho = contenido, no cuadrícula uniforme */
.palabra-card.palabra-card--7filas {
    display: inline-flex;
    flex: 0 1 auto;
    width: max-content;
    max-width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 4px;
}

.palabra-card--7filas .pi-fila {
    display: block;
    width: auto;
    max-width: none;
    min-height: 1.15em;
    line-height: 1.25;
    white-space: nowrap;
    text-align: left;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
}

.palabra-card--7filas .pi-fila-griego {
    font-family: var(--font-greek);
    font-size: 1.05rem;
    font-weight: 600;
    color: #0f172a;
}

/* AT — hebreo: derecha a izquierda en pasaje y grilla interlineal */
.exegetico-idioma-original--rtl,
.pi-fila-idioma-original--rtl {
    direction: rtl;
    unicode-bidi: embed;
    text-align: right;
    font-family: var(--font-greek), "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
}

/* Pasaje completo AT: un versículo por línea */
.exegetico-versiculo-linea {
    display: block;
    width: 100%;
}

.exegetico-versiculo-linea + .exegetico-versiculo-linea {
    margin-top: 0.35rem;
}

/* Grilla interlineal AT: un versículo por fila; palabras RTL solo con eje hebreo principal */
.exegetico-grid[data-idioma-original="hebreo"][data-vista="griego"],
.interlineal-contenedor[data-idioma-original="hebreo"][data-vista="griego"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    direction: ltr;
}

.interlineal-lectura-cuerpo[data-idioma-original="hebreo"][data-vista="griego"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    direction: ltr;
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.exegetico-grid[data-idioma-original="hebreo"][data-vista="griego"] .exegetico-grid-versiculo,
.interlineal-contenedor[data-idioma-original="hebreo"][data-vista="griego"] .exegetico-grid-versiculo,
.interlineal-lectura-cuerpo[data-idioma-original="hebreo"][data-vista="griego"] .exegetico-grid-versiculo {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    direction: rtl;
    justify-content: flex-start;
    width: 100%;
    gap: 8px 6px;
}

.exegetico-grid[data-idioma-original="hebreo"][data-vista="griego"]:not(:has(.exegetico-grid-versiculo)),
.interlineal-contenedor[data-idioma-original="hebreo"][data-vista="griego"]:not(:has(.exegetico-grid-versiculo)),
.interlineal-lectura-cuerpo[data-idioma-original="hebreo"][data-vista="griego"]:not(:has(.exegetico-grid-versiculo)) {
    flex-direction: row;
    flex-wrap: wrap;
    direction: rtl;
}

/* AT con eje español: flujo LTR como cualquier texto occidental */
.exegetico-grid[data-idioma-original="hebreo"][data-vista="traduccion"],
.interlineal-contenedor[data-idioma-original="hebreo"][data-vista="traduccion"],
.interlineal-lectura-cuerpo[data-idioma-original="hebreo"][data-vista="traduccion"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    direction: ltr;
}

.exegetico-grid[data-idioma-original="hebreo"][data-vista="traduccion"] .exegetico-grid-versiculo,
.interlineal-contenedor[data-idioma-original="hebreo"][data-vista="traduccion"] .exegetico-grid-versiculo,
.interlineal-lectura-cuerpo[data-idioma-original="hebreo"][data-vista="traduccion"] .exegetico-grid-versiculo {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    direction: ltr;
    justify-content: flex-start;
    width: 100%;
    gap: 8px 6px;
}

.exegetico-grid[data-idioma-original="hebreo"][data-vista="traduccion"]:not(:has(.exegetico-grid-versiculo)),
.interlineal-contenedor[data-idioma-original="hebreo"][data-vista="traduccion"]:not(:has(.exegetico-grid-versiculo)),
.interlineal-lectura-cuerpo[data-idioma-original="hebreo"][data-vista="traduccion"]:not(:has(.exegetico-grid-versiculo)) {
    flex-direction: row;
    flex-wrap: wrap;
    direction: ltr;
}

.exegetico-grid[data-idioma-original="hebreo"] .exegetico-grid-versiculo + .exegetico-grid-versiculo,
.interlineal-contenedor[data-idioma-original="hebreo"] .exegetico-grid-versiculo + .exegetico-grid-versiculo,
.interlineal-lectura-cuerpo[data-idioma-original="hebreo"] .exegetico-grid-versiculo + .exegetico-grid-versiculo {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #e2e8f0;
}

/* Dentro de cada tarjeta el español y metadatos siguen LTR; solo la fila hebrea es RTL. */
.exegetico-grid[data-idioma-original="hebreo"] .palabra-card--7filas,
.interlineal-contenedor[data-idioma-original="hebreo"] .palabra-card--7filas,
.interlineal-lectura-cuerpo[data-idioma-original="hebreo"] .palabra-card--7filas {
    direction: ltr;
    text-align: left;
}

#exegetico-pasaje-completo[data-idioma-original="hebreo"]
    [data-version="griego"] .exegetico-linea-cuerpo {
    direction: rtl;
    text-align: right;
}

.palabra-card--7filas .pi-fila-es {
    font-size: 11px;
    font-weight: 500;
    color: #334155;
    min-height: 1.15em;
}

.palabra-card--7filas .pi-fila-es.pi-fila-es--vacio {
    color: #94a3b8;
}

.palabra-card--7filas .pi-fila-lemma {
    font-size: 10px;
    font-style: italic;
    color: #64748b;
}

.palabra-card--7filas .pi-fila-morfologia {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 9.5px;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.03em;
}

.palabra-card--7filas .pi-fila-morfologia[title],
.palabra-celda-tecnica.palabra-codigo-morfo[title] {
    cursor: help;
}

.palabra-card--7filas .pi-fila-strong {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 9.5px;
    font-weight: 700;
    color: #4f46e5;
}

.palabra-card--7filas .pi-fila-ln {
    font-size: 9px;
    color: #64748b;
    min-height: 1.1em;
}

.palabra-card--7filas .pi-fila-sdbh {
    font-size: 9px;
    color: #64748b;
    min-height: 1.1em;
    line-height: 1.15;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.palabra-card--7filas .pi-fila-sdbh .sdbh-link {
    font-size: 9px;
    color: #0d9488;
    font-weight: 400;
    display: inline;
    max-width: none;
}

/* size="1" en el HTML + min-width:0 — evita que el input fije ancho uniforme (efecto Excel) */
.exegetico-grid[data-motor-tarjetas="palabras_interlineal"] .palabra-card--7filas .pi-fila-traduccion.palabra-personal {
    width: auto;
    min-width: 0;
    max-width: 14em;
    min-height: 1.25em;
    margin-top: 2px;
    padding: 2px 3px;
    border: none;
    border-top: 1px dashed #e2e8f0;
    background: transparent;
    font-size: 11px;
    color: #059669;
    font-weight: 600;
    outline: none;
    box-sizing: border-box;
    flex: 0 0 auto;
    field-sizing: content;
}

.palabra-card--7filas .pi-fila-traduccion:focus {
    background: rgba(16, 185, 129, 0.06);
    border-top-color: #34d399;
}

/* ===================================================================
   Modal Strong — flotante, arrastrable (lienzo interlineal)
   =================================================================== */
.modal-strong-diccionario {
    position: fixed;
    inset: 0;
    z-index: 1200;
    pointer-events: none;
}

.modal-strong-panel {
    position: fixed;
    left: 120px;
    top: 120px;
    width: min(420px, calc(100vw - 24px));
    max-height: min(70vh, 520px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 40px -8px rgba(15, 23, 42, 0.18),
                0 4px 12px -4px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    pointer-events: auto;
}

.modal-strong-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    cursor: move;
    user-select: none;
}

.modal-strong-header-izq {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.modal-strong-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.modal-strong-nav-btn {
    width: 28px;
    height: 26px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #ffffff;
    color: #475569;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.modal-strong-nav-btn:hover:not(:disabled) {
    background: #f1f5f9;
    color: #0f172a;
}

.modal-strong-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.modal-strong-fuente-label {
    flex-shrink: 0;
    margin: 0;
}

.modal-strong-diccionario-fuente {
    max-width: 7.5rem;
    padding: 2px 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
}

.modal-strong-diccionario-fuente:hover,
.modal-strong-diccionario-fuente:focus {
    border-color: #cbd5e1;
    outline: none;
}

.modal-strong-titulo {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #4f46e5;
    direction: ltr;
    unicode-bidi: isolate;
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(40vw, 280px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-strong-titulo__codigo {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    flex: 0 0 auto;
}

.modal-strong-titulo__sep {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 400;
    color: #94a3b8;
    padding: 0 0.15em;
}

.modal-strong-titulo__lemma {
    font-family: var(--font-greek);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-strong-titulo__lemma--hebreo {
    direction: rtl;
    unicode-bidi: embed;
    font-family: var(--font-greek), "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
}

.modal-strong-titulo__lemma--griego {
    font-family: var(--font-greek);
    direction: ltr;
}

.modal-strong-cerrar {
    border: none;
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 0 4px;
}

.modal-strong-cerrar:hover {
    color: #0f172a;
}

.modal-strong-body {
    padding: 12px 14px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.45;
    color: #334155;
}

/* Orden fijo: meta → origen → definición ES (sin bloque EN) */
.modal-strong-contenido {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.modal-strong-meta-wrap {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #e2e8f0;
}

.modal-strong-meta {
    margin: 0 0 6px;
    font-size: 12px;
    color: #475569;
}

.modal-strong-meta:last-child {
    margin-bottom: 0;
}

.modal-strong-seccion--definicion {
    margin-top: 4px;
}

.modal-strong-subtitulo {
    margin: 10px 0 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.modal-strong-texto {
    margin: 0;
    white-space: pre-wrap;
}

.modal-strong-texto--html {
    line-height: 1.5;
    color: #1e293b;
}

.modal-strong-seccion--origen {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 10px;
}

.modal-strong-origen-texto {
    margin: 0;
    font-size: 12px;
    color: #475569;
    font-style: italic;
}

.modal-strong-texto--html .strong-link {
    cursor: pointer;
    text-decoration: underline;
    color: #4f46e5;
    font-weight: 600;
}

.modal-strong-vine-topic-wrap {
    margin-bottom: 0.65rem;
}

.modal-strong-vine-topic {
    width: 100%;
    max-width: 100%;
    margin-top: 0.25rem;
    padding: 4px 8px;
    font-size: 0.8rem;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #fff;
}

.modal-strong-vine-cabecera {
    margin-bottom: 0.35rem !important;
}

.modal-strong-texto--html .vine-ref-link {
    color: #15803d;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 500;
}

.modal-strong-texto--html .vine-ref-link:hover,
.biblioteca-texto-html .vine-ref-link:hover {
    color: #166534;
    background: rgba(21, 128, 61, 0.08);
    border-radius: 3px;
}

.biblioteca-texto-html .vine-ref-link {
    color: #15803d;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 500;
}

.biblioteca-texto-html .strong-link {
    color: #4338ca;
    cursor: pointer;
    text-decoration: underline;
    font-weight: 600;
}

.biblioteca-texto-html .strong-link:hover {
    color: #3730a3;
}

.vine-ref-preview {
    max-width: min(28rem, calc(100vw - 1.5rem));
    pointer-events: none;
}

.vine-ref-preview__titulo {
    display: block;
    font-weight: 700;
    font-size: 0.72rem;
    color: #4338ca;
    margin-bottom: 0.25rem;
}

.vine-ref-preview__texto {
    display: block;
    font-size: 0.74rem;
    line-height: 1.45;
    color: #1e293b;
}

.modal-strong-texto--html .strong-link:hover {
    color: #3730a3;
}

/* Celda del lienzo activa al abrir diccionario Strong */
.exegetico-grid .palabra-card.active-cell {
    background-color: #fffbeb !important;
    border: 2px solid #fbbf24 !important;
}

.modal-strong-cargando,
.modal-strong-vacio,
.modal-strong-error {
    margin: 0;
    color: #64748b;
}

.modal-strong-error {
    color: #b91c1c;
}

.exegetico-grid .strong-link {
    cursor: pointer;
    text-decoration: underline;
    color: inherit;
}

.exegetico-grid .strong-link:hover {
    color: #4338ca;
}

/* ===================================================================
   Modal historial tapiz — flotante (misma familia que Strong)
   =================================================================== */
.modal-historial-tapiz {
    position: fixed;
    inset: 0;
    z-index: 1195;
    pointer-events: none;
}

.modal-historial-panel {
    position: fixed;
    left: 140px;
    top: 140px;
    width: min(480px, calc(100vw - 24px));
    max-height: min(72vh, 540px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 40px -8px rgba(15, 23, 42, 0.18),
                0 4px 12px -4px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    pointer-events: auto;
}

.modal-historial-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    background: #f0fdf4;
    cursor: move;
    user-select: none;
}

.modal-historial-titulo {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.82rem;
    font-weight: 700;
    color: #047857;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-historial-cerrar {
    border: none;
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 0 4px;
    flex-shrink: 0;
}

.modal-historial-cerrar:hover {
    color: #0f172a;
}

.modal-historial-body {
    padding: 10px 12px 12px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.4;
    color: #334155;
}

.modal-historial-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.modal-historial-tabla th {
    text-align: left;
    font-weight: 600;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
    padding: 6px 8px;
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 1;
}

.modal-historial-tabla td {
    padding: 8px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}

.modal-historial-col-fecha {
    white-space: nowrap;
    color: #64748b;
    font-size: 11px;
}

.modal-historial-col-valor {
    font-weight: 500;
    color: #0f172a;
    max-width: 160px;
    word-break: break-word;
}

.modal-historial-valor-vacio {
    color: #94a3b8;
    font-style: italic;
}

.modal-historial-col-proyecto {
    color: #475569;
    max-width: 120px;
    word-break: break-word;
}

.modal-historial-proyecto-link {
    padding: 0;
    border: none;
    background: transparent;
    color: #0369a1;
    font-size: inherit;
    font-weight: 500;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    max-width: 100%;
    word-break: break-word;
}

.modal-historial-proyecto-link:hover {
    color: #0c4a6e;
}

.modal-historial-col-accion {
    text-align: right;
    white-space: nowrap;
}

.modal-historial-btn-restaurar {
    padding: 3px 10px;
    font-size: 11px;
    border: 1px solid #6ee7b7;
    border-radius: 4px;
    background: #ecfdf5;
    color: #047857;
    cursor: pointer;
}

.modal-historial-btn-restaurar:hover {
    background: #d1fae5;
    border-color: #34d399;
}

.modal-historial-cargando,
.modal-historial-vacio,
.modal-historial-error {
    margin: 0;
    color: #64748b;
}

.modal-historial-error {
    color: #b91c1c;
}

.modal-historial-contenido code {
    font-size: 11px;
    color: #047857;
}

/* Menú contextual tapiz — reutiliza .glosario-menu */
.tapiz-context-menu .glosario-menu__texto {
    color: #047857;
}

/* ===================================================================
   Notas y comentarios (lienzo)
   =================================================================== */
/* ===================================================================
   Sub-pestañas internas (Biblioteca, Exégesis, …)
   =================================================================== */
.lienzo-subpanel,
.biblioteca-panel {
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.lienzo-subtabs-bar,
.biblioteca-tabs-bar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    background: #0f172a;
    border-bottom: 1px solid #1e293b;
}

.lienzo-subtabs-bar-der {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding: 0 0.45rem 0 0.75rem;
    flex-shrink: 0;
}

.lienzo-subtabs-bar .concordancia-historial-wrap {
    min-height: 0;
}

.lienzo-subtabs-bar .concordancia-historial-trigger {
    min-height: 1.55rem;
    max-width: 12rem;
    min-width: 7rem;
    padding: 0.15rem 0.4rem 0.15rem 0.3rem;
    font-size: 0.68rem;
    border-color: #334155;
    background: #1e293b;
}

.lienzo-subtabs-bar .concordancia-historial-trigger:hover {
    background: #334155;
    border-color: #475569;
}

.lienzo-subtabs-bar .concordancia-historial-menu {
    z-index: 12050;
}

.lienzo-subtab-btn,
.biblioteca-tab-btn {
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    padding: 8px 18px 6px;
    border-radius: 0;
    cursor: pointer;
    border-bottom: 4px solid transparent;
    letter-spacing: 0.03em;
    margin-bottom: -1px;
}

.lienzo-subtab-btn:hover,
.biblioteca-tab-btn:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
}

.lienzo-subtab-btn--activa,
.biblioteca-tab-btn--activa {
    color: #ffffff;
    background: transparent;
    border-bottom-color: #facc15;
    box-shadow: none;
}

.lienzo-subpanel-cuerpo,
.biblioteca-panel-cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 10px;
    padding: 12px 14px;
}

.lienzo-subseccion,
.biblioteca-seccion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.lienzo-subseccion[hidden],
.biblioteca-seccion[hidden] {
    display: none !important;
}

/* ===================================================================
   Concordancia (sub-pestaña Exégesis)
   =================================================================== */
#exegetico-subpanel-concordancia {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    gap: 0;
}

.concordancia-panel {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.concordancia-panel--buscando,
.concordancia-panel--buscando * {
    cursor: wait !important;
}

body.concordancia-global-buscando,
body.concordancia-global-buscando * {
    cursor: wait !important;
}

.concordancia-panel--buscando .concordancia-btn-buscar:disabled {
    cursor: wait !important;
}

.concordancia-toolbar,
.concordancia-ayuda,
.concordancia-strong-info,
.concordancia-pie {
    flex-shrink: 0;
}

.concordancia-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.concordancia-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: flex-end;
}

.concordancia-fila--filtros .concordancia-campo--alcance {
    flex: 1 1 200px;
    max-width: 320px;
}

.concordancia-alcance-par {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.concordancia-select--alcance-nivel,
.concordancia-select--alcance-detalle {
    width: 100%;
}

.concordancia-palabras-jesus {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 1 auto;
    font-size: 11px;
    color: #475569;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    margin-bottom: 2px;
}

.concordancia-palabras-jesus input {
    margin: 0;
    accent-color: #6366f1;
    cursor: pointer;
}

.concordancia-fila--filtros .concordancia-campo {
    flex: 1 1 140px;
    max-width: 220px;
}

.concordancia-fila--filtros .concordancia-select {
    min-width: 0;
    width: 100%;
    flex: none;
    height: auto;
    min-height: unset;
}

.concordancia-fila--consulta {
    align-items: flex-end;
}

.concordancia-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.concordancia-campo--buscar {
    flex: 1 1 220px;
}

.concordancia-campo--idioma {
    flex: 0 0 auto;
    min-width: 9.5rem;
}

.concordancia-select--idioma {
    min-width: 9.5rem;
}

.concordancia-toolbar-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6366f1;
}

.concordancia-buscar,
.concordancia-select {
    width: 100%;
    font-size: 13px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 8px;
    background: #fff;
    color: #1e293b;
    line-height: 1.25;
    box-sizing: border-box;
}

.concordancia-buscar:focus,
.concordancia-select:focus {
    outline: 2px solid rgba(99, 102, 241, 0.35);
    border-color: #6366f1;
}

.concordancia-btn-buscar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #86efac;
    border-radius: 6px;
    background: #dcfce7;
    color: #166534;
    cursor: pointer;
    margin-bottom: 1px;
}

.concordancia-btn-buscar:hover:not(:disabled) {
    background: #bbf7d0;
}

.concordancia-btn-buscar:disabled {
    opacity: 0.55;
    cursor: wait;
}

.concordancia-ayuda {
    margin: 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
}

.concordancia-strong-info {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    padding: 8px 10px;
    border-radius: 6px;
    background: #fef9c3;
    border: 1px solid #fde047;
    font-size: 12px;
    line-height: 1.4;
}

.concordancia-strong-codigo {
    font-weight: 800;
    color: #854d0e;
}

.concordancia-strong-trans {
    font-style: italic;
    color: #713f12;
}

.concordancia-strong-def {
    color: #57534e;
    flex: 1 1 200px;
}

.concordancia-interlineal-inline {
    margin: 4px 0 10px 0;
    padding: 8px 8px 10px;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    background: #f8fafc;
}

.concordancia-interlineal-inline-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2e8f0;
}

.concordancia-interlineal-inline-ref {
    font-size: 12px;
    font-weight: 700;
    color: #3730a3;
}

.concordancia-interlineal-inline-etiq {
    font-size: 11px;
    color: #64748b;
    flex: 1 1 140px;
    min-width: 0;
}

.concordancia-interlineal-eje-toggle {
    flex-shrink: 0;
}

.concordancia-interlineal-eje-toggle .exegetico-vista-btn {
    font-size: 11px;
    padding: 2px 8px;
}

.concordancia-interlineal-cerrar {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.concordancia-interlineal-cerrar:hover {
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
}

.concordancia-interlineal-cuerpo {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px;
}

/* AT en concordancia inline: RTL con eje hebreo, LTR con eje español */
.concordancia-interlineal-cuerpo[data-idioma-original="hebreo"][data-vista="griego"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    direction: ltr;
}

.concordancia-interlineal-cuerpo[data-idioma-original="hebreo"][data-vista="griego"] .exegetico-grid-versiculo {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    direction: rtl;
    justify-content: flex-start;
    width: 100%;
    gap: 8px 6px;
}

.concordancia-interlineal-cuerpo[data-idioma-original="hebreo"][data-vista="griego"]:not(:has(.exegetico-grid-versiculo)) {
    flex-direction: row;
    flex-wrap: wrap;
    direction: rtl;
}

.concordancia-interlineal-cuerpo[data-idioma-original="hebreo"][data-vista="traduccion"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    direction: ltr;
}

.concordancia-interlineal-cuerpo[data-idioma-original="hebreo"][data-vista="traduccion"] .exegetico-grid-versiculo {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    direction: ltr;
    justify-content: flex-start;
    width: 100%;
    gap: 8px 6px;
}

.concordancia-interlineal-cuerpo[data-idioma-original="hebreo"][data-vista="traduccion"]:not(:has(.exegetico-grid-versiculo)) {
    flex-direction: row;
    flex-wrap: wrap;
    direction: ltr;
}

.concordancia-interlineal-cuerpo .palabra-card {
    font-size: 12px;
}

/* Eje español/hebreo en vista concordancia (igual que exegetico-grid) */
.concordancia-interlineal-cuerpo[data-vista="traduccion"] .palabra-card--7filas .pi-fila-griego,
.concordancia-interlineal-cuerpo[data-vista="traduccion"] .palabra-card--7filas .pi-fila-idioma-original {
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
}
.concordancia-interlineal-cuerpo[data-vista="traduccion"] .palabra-card--7filas .pi-fila-es {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}
.concordancia-interlineal-cuerpo[data-vista="griego"] .palabra-card--7filas .pi-fila-griego,
.concordancia-interlineal-cuerpo[data-vista="griego"] .palabra-card--7filas .pi-fila-idioma-original {
    font-size: 1.05rem;
    font-weight: 600;
    color: #0f172a;
}
.concordancia-interlineal-cuerpo[data-vista="griego"] .palabra-card--7filas .pi-fila-es {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
}

.concordancia-interlineal-cuerpo .strong-link,
.concordancia-interlineal-cuerpo .louw-nida-link,
.concordancia-interlineal-cuerpo .sdbh-link {
    cursor: pointer;
    text-decoration: underline;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
}
.concordancia-interlineal-cuerpo .strong-link:hover,
.concordancia-interlineal-cuerpo .louw-nida-link:hover,
.concordancia-interlineal-cuerpo .sdbh-link:hover {
    color: #4338ca;
}

.concordancia-interlineal-cuerpo .palabra-card.active-cell {
    background-color: #fffbeb !important;
    border: 2px solid #fbbf24 !important;
}

.concordancia-interlineal-coincidencia {
    background: rgba(254, 240, 138, 0.85) !important;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.45);
}

.concordancia-interlineal-cuerpo[data-vista="traduccion"] .pi-fila-griego.concordancia-interlineal-coincidencia,
.concordancia-interlineal-cuerpo[data-vista="traduccion"] .pi-fila-idioma-original.concordancia-interlineal-coincidencia {
    background: transparent !important;
    box-shadow: none;
}

.concordancia-item--interlineal-abierto {
    background: rgba(199, 210, 254, 0.35);
}

.concordancia-resultados {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px 6px;
    background: #fff;
}

.concordancia-resultados .modal-biblia-busqueda__texto .formato-regla,
.concordancia-resultados .modal-biblia-busqueda__texto .formato-kw {
    font-family: inherit;
}

.concordancia-resultados .doxos-palabras-jesus {
    color: #cc0000;
}

.concordancia-resultados mark.modal-biblia-busqueda__mark {
    background: #fef08a;
    color: #1e293b;
    padding: 0 2px;
    border-radius: 2px;
    box-decoration-break: clone;
}

.concordancia-resultados .doxos-palabras-jesus mark.modal-biblia-busqueda__mark {
    color: #1e293b;
    font-weight: 600;
}

.concordancia-vacio {
    margin: 8px;
    font-size: 12px;
    color: #94a3b8;
}

.concordancia-item--activo {
    background: rgba(254, 240, 138, 0.45);
}

.concordancia-palabra-orig {
    font-weight: 700;
    color: #4338ca;
}

.concordancia-ocurrencias {
    font-size: 11px;
    color: #64748b;
}

.concordancia-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.concordancia-pie .concordancia-estado {
    flex: 1 1 160px;
    min-width: 0;
}

.concordancia-estado {
    margin: 0;
    font-size: 12px;
    color: #64748b;
}

.concordancia-estado--error {
    color: #b91c1c;
}

.concordancia-btn-copiar {
    flex-shrink: 0;
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    cursor: pointer;
}

.concordancia-btn-copiar:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.concordancia-pie-izq {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    flex-shrink: 0;
}

.concordancia-filtro-marcados {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #475569;
    cursor: pointer;
    user-select: none;
}

.concordancia-btn-guardar {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 6px;
    border: 1px solid #a5b4fc;
    background: #eef2ff;
    color: #3730a3;
    cursor: pointer;
    white-space: nowrap;
}

.concordancia-btn-guardar:hover:not(:disabled) {
    background: #e0e7ff;
}

.concordancia-btn-guardar:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.concordancia-resultados .concordancia-item.modal-biblia-busqueda__item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    width: 100%;
    text-align: left;
}

.concordancia-item-marca {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1.35;
    color: #94a3b8;
    cursor: pointer;
    user-select: none;
    padding: 0;
    margin: 0;
}

.concordancia-item--marcado .concordancia-item-marca {
    color: #ca8a04;
}

.concordancia-resultados .concordancia-item .modal-biblia-busqueda__ref {
    flex: 0 0 auto;
    margin-right: 0;
}

.concordancia-resultados .concordancia-item .modal-biblia-busqueda__texto {
    flex: 1 1 12rem;
    min-width: 0;
}

.concordancia-item--marcado {
    background: rgba(254, 243, 199, 0.35);
    border-color: #fcd34d;
}

.concordancia-historial-wrap {
    display: inline-flex;
    align-items: stretch;
    position: relative;
    min-height: 31px;
}

.concordancia-historial-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 14rem;
    min-width: 8.5rem;
    min-height: 31px;
    padding: 0.2rem 0.45rem 0.2rem 0.35rem;
    border: 1px solid #555;
    border-radius: 4px;
    background: #2a2a2a;
    color: #f5f5f5;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    cursor: pointer;
    line-height: 1.2;
}

.concordancia-historial-trigger:hover {
    background: #3a3a3a;
    border-color: #777;
}

.concordancia-historial-trigger-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.concordancia-historial-trigger-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.concordancia-historial-trigger-caret {
    flex-shrink: 0;
    font-size: 0.65rem;
    opacity: 0.75;
}

.concordancia-historial-menu {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    z-index: 12000;
    min-width: 16rem;
    max-width: 22rem;
    max-height: 16rem;
    overflow: auto;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.concordancia-historial-menu.hidden {
    display: none;
}

.concordancia-historial-menu-vacio {
    margin: 0;
    padding: 0.55rem 0.75rem;
    font-size: 0.72rem;
    color: #aaa;
    font-style: italic;
}

.concordancia-historial-menu-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.concordancia-historial-item {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid #2e2e2e;
}

.concordancia-historial-item:last-child {
    border-bottom: none;
}

.concordancia-historial-item.is-activo {
    background: rgba(59, 130, 246, 0.15);
}

.concordancia-historial-item-abrir {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 0;
    padding: 0.45rem 0.55rem;
    border: none;
    background: transparent;
    color: #f0f0f0;
    text-align: left;
    cursor: pointer;
    font-size: 0.72rem;
}

.concordancia-historial-item-abrir:hover {
    background: rgba(255, 255, 255, 0.06);
}

.concordancia-historial-item-titulo {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.concordancia-historial-item-fecha {
    font-size: 0.62rem;
    color: #999;
    font-weight: 500;
}

.concordancia-historial-item-borrar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    padding: 0;
    border: none;
    border-left: 1px solid #333;
    background: transparent;
    color: #bbb;
    cursor: pointer;
}

.concordancia-historial-item-borrar:hover {
    color: #fca5a5;
    background: rgba(220, 38, 38, 0.12);
}

.exegetico-concordancia-historial-wrap {
    flex-shrink: 0;
}

.lienzo-concordancia-historial-wrap {
    flex-shrink: 0;
}

.lectura-concordancia-historial-wrap {
    flex: 0 1 auto;
    min-width: 0;
}

.lectura-barra-contexto .concordancia-historial-trigger {
    max-width: 10rem;
    min-width: 6.5rem;
    min-height: 1.45rem;
    padding-top: 0.12rem;
    padding-bottom: 0.12rem;
    font-size: 0.62rem;
}

.lectura-barra-contexto .concordancia-historial-trigger-icon {
    width: 16px;
    height: 16px;
}

.lectura-barra-contexto .concordancia-historial-menu {
    right: auto;
    left: 0;
}

.concordancia-modal-guardar {
    position: fixed;
    inset: 0;
    z-index: 13000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.45);
}

.concordancia-modal-guardar[hidden] {
    display: none !important;
}

.concordancia-modal-dialog {
    width: min(420px, 100%);
    background: #fff;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}

.concordancia-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0;
}

.concordancia-modal-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.concordancia-modal-cerrar {
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
}

.concordancia-modal-cuerpo {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.concordancia-modal-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #475569;
}

.concordancia-modal-campo input {
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
}

.concordancia-modal-opciones {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
}

.concordancia-modal-opciones legend {
    font-weight: 600;
    color: #334155;
    margin-bottom: 4px;
}

.concordancia-modal-pie {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px 14px;
}

.concordancia-modal-pie button {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
}

.concordancia-modal-cancelar {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
}

.concordancia-modal-confirmar {
    border: 1px solid #4338ca;
    background: #4f46e5;
    color: #fff;
}

.lienzo-pie-ayuda {
    font-style: italic;
}

.app-footer-centro:empty {
    display: none;
}

#exegetico-analizar[title] {
    cursor: help;
}

/* ===================================================================
   Louw-Nida (sub-pestaña Exégesis)
   =================================================================== */
#exegetico-subpanel-louw-nida {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    gap: 0;
}

#exegetico-subpanel-sdbh {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    gap: 0;
}

.louw-nida-panel {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.louw-nida-layout {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.louw-nida-arbol-wrap {
    flex: 0 0 38%;
    max-width: 420px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    border-right: 1px solid #e2e8f0;
    background: #f8fafc;
}

.louw-nida-arbol-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
    background: #f1f5f9;
}

.louw-nida-arbol-titulo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #475569;
}

.louw-nida-arbol-estado {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 10px;
    color: #64748b;
    text-align: right;
}

.louw-nida-buscar-wrap {
    padding: 6px 8px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.louw-nida-buscar-input {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
}

.louw-nida-buscar-input:focus {
    outline: 2px solid #6366f1;
    outline-offset: 1px;
    border-color: #6366f1;
}

.louw-nida-buscar-resultados {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 6px 8px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.louw-nida-buscar-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.louw-nida-buscar-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    margin: 0 0 4px;
    padding: 6px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    text-align: left;
    cursor: pointer;
    font-size: 11px;
    line-height: 1.35;
}

.louw-nida-buscar-item:hover {
    border-color: #6366f1;
    background: #eef2ff;
}

.louw-nida-buscar-cod {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 700;
    color: #4338ca;
}

.louw-nida-buscar-lemma {
    font-weight: 600;
    color: #1e293b;
}

.louw-nida-buscar-lemma--he {
    direction: rtl;
    unicode-bidi: isolate;
}

.louw-nida-buscar-dom {
    color: #64748b;
    font-size: 10px;
}

.louw-nida-buscar-res {
    color: #475569;
    font-size: 10px;
}

.louw-nida-arbol {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px 8px 10px;
    font-size: 12px;
    line-height: 1.35;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.ln-arbol-nodo {
    margin: 2px 0 2px 4px;
}

.ln-arbol-nodo--destacado > .ln-arbol-summary {
    background: #fef9c3;
    border-radius: 4px;
}

.ln-arbol-summary {
    cursor: pointer;
    padding: 3px 4px;
    color: #1e293b;
    font-weight: 600;
    list-style-position: outside;
}

.ln-arbol-hijos {
    margin-left: 8px;
    border-left: 1px dashed #cbd5e1;
    padding-left: 6px;
}

.ln-arbol-entradas {
    list-style: none;
    margin: 4px 0 6px 12px;
    padding: 0;
}

.ln-arbol-entrada-btn {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    color: #334155;
}

.ln-arbol-entrada-btn:hover,
.ln-arbol-entrada-btn:focus-visible {
    background: rgba(99, 102, 241, 0.1);
    outline: none;
}

.ln-arbol-entrada-btn--activo {
    background: #fef9c3;
    box-shadow: inset 0 0 0 1px #ca8a04;
}

.ln-arbol-lemma {
    font-weight: 700;
    color: #4338ca;
    margin-right: 6px;
}

.ln-arbol-codigo {
    font-size: 10px;
    color: #64748b;
    margin-right: 4px;
}

.ln-arbol-glosa {
    display: block;
    color: #64748b;
    font-size: 10px;
    margin-top: 2px;
}

.louw-nida-detalle-wrap {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.louw-nida-detalle {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 14px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.louw-nida-vacio {
    margin: 0;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.45;
}

.louw-nida-error {
    margin: 0;
    font-size: 12px;
    color: #b91c1c;
}

.louw-nida-detalle-cabecera {
    margin-bottom: 10px;
}

.louw-nida-detalle-titulo {
    margin: 0 0 4px;
    font-size: 18px;
    color: #0f172a;
}

.louw-nida-detalle-resumen {
    margin: 0;
    font-size: 11px;
    color: #64748b;
}

.louw-nida-jerarquia ol {
    margin: 0 0 12px;
    padding: 8px 10px 8px 22px;
    background: #f1f5f9;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.45;
    color: #475569;
}

.louw-nida-miga-codigo {
    font-family: ui-monospace, monospace;
    font-size: 10px;
    color: #6366f1;
    margin-right: 4px;
}

.louw-nida-contexto-sub,
.louw-nida-contexto-dom,
.louw-nida-contexto-com {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.45;
    color: #334155;
}

.louw-nida-ctx-etiq {
    font-weight: 700;
    color: #64748b;
}

.louw-nida-entradas-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.louw-nida-entrada-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fafafa;
}

.louw-nida-entrada-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.louw-nida-entrada-lemma {
    font-size: 16px;
    font-weight: 700;
    color: #4338ca;
}

.louw-nida-entrada-codigo {
    font-size: 11px;
    font-weight: 600;
    color: #6366f1;
}

.louw-nida-entrada-pos {
    margin: 0 0 4px;
    font-size: 11px;
    font-style: italic;
    color: #64748b;
}

.louw-nida-entrada-strong {
    margin: 0 0 6px;
    font-size: 11px;
}

.louw-nida-entrada-etiq {
    font-weight: 700;
    color: #64748b;
}

.louw-nida-entrada-glosa {
    margin: 0 0 6px;
    font-size: 12px;
    color: #1e293b;
}

.louw-nida-entrada-def {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #334155;
}

.louw-nida-link,
.pi-fila-ln .louw-nida-link {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: #6366f1;
    text-decoration: underline;
    cursor: pointer;
}

.louw-nida-link:hover,
.pi-fila-ln .louw-nida-link:hover {
    color: #4338ca;
}

.palabra-ln-codigo .louw-nida-link {
    font-size: inherit;
}

.sdbh-link,
.pi-fila-sdbh .sdbh-link,
.palabra-sdbh-codigo .sdbh-link {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: inherit;
    line-height: inherit;
    color: #0d9488;
    text-decoration: underline;
    cursor: pointer;
}

.sdbh-link:hover,
.pi-fila-sdbh .sdbh-link:hover {
    color: #0f766e;
}

.sdbh-detalle-titulo-he {
    direction: rtl;
    unicode-bidi: embed;
    font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
    font-size: 1.35rem;
}

/* Guías de ayuda Louw-Nida / SDBH */
.lexico-btn-ayuda {
    flex-shrink: 0;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    color: #475569;
    cursor: pointer;
}

.lexico-btn-ayuda:hover {
    background: #f8fafc;
}

.lexico-btn-ayuda--ln {
    border-color: #93c5fd;
    color: #1d4ed8;
}

.lexico-btn-ayuda--ln:hover {
    background: #eff6ff;
}

.lexico-btn-ayuda--sdbh {
    border-color: #fdba74;
    color: #c2410c;
}

.lexico-btn-ayuda--sdbh:hover {
    background: #fff7ed;
}

.louw-nida-detalle .lexico-ayuda {
    max-width: none;
    padding: 0;
}

.lexico-ayuda {
    font-size: 13px;
    line-height: 1.6;
    color: #334155;
}

.lexico-ayuda-titulo {
    margin: 0 0 12px;
    padding-bottom: 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    border-bottom: 2px solid #cbd5e1;
}

.lexico-ayuda--ln .lexico-ayuda-titulo {
    border-bottom-color: #3498db;
}

.lexico-ayuda--sdbh .lexico-ayuda-titulo {
    border-bottom-color: #e67e22;
}

.lexico-ayuda-subtitulo {
    margin: 16px 0 8px;
    font-size: 0.95rem;
    font-weight: 700;
}

.lexico-ayuda--ln .lexico-ayuda-subtitulo {
    color: #2980b9;
}

.lexico-ayuda--sdbh .lexico-ayuda-subtitulo {
    color: #d35400;
}

.lexico-ayuda p {
    margin: 0 0 10px;
}

.lexico-ayuda-lista {
    margin: 0 0 12px;
    padding-left: 1.25rem;
}

.lexico-ayuda-lista--destacada {
    padding: 12px 12px 12px 28px;
    border-radius: 5px;
    border-left: 4px solid #cbd5e1;
    background: #f8fafc;
}

.lexico-ayuda--ln .lexico-ayuda-lista--destacada {
    border-left-color: #3498db;
    background: #f8f9fa;
}

.lexico-ayuda--sdbh .lexico-ayuda-lista--destacada {
    border-left-color: #e67e22;
    background: #fdf5e6;
}

.lexico-ayuda-tip,
.lexico-ayuda-nota {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 5px;
    font-size: 12px;
}

.lexico-ayuda-tip--ln {
    background: #e8f4f8;
    color: #334155;
}

.lexico-ayuda-nota--sdbh {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    color: #334155;
}

.lexico-ayuda-nota ul {
    margin: 8px 0 0;
    padding-left: 1.2rem;
}

/* Búsqueda semántica (pestaña Strong → LN + SDBH) */
#exegetico-subpanel-busqueda-semantica {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.lexico-semantica-panel {
    flex: 1 1 0;
    min-height: 0;
    padding: 10px 12px;
    background: #fafbfc;
}

.lexico-strong-buscar {
    gap: 0;
}

.lexico-strong-buscar-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lexico-strong-buscar-etiq {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.lexico-strong-input {
    flex: 1 1 12rem;
    min-width: 8rem;
    max-width: 16rem;
    padding: 5px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.lexico-strong-btn {
    padding: 5px 12px;
    border: 1px solid #6366f1;
    border-radius: 6px;
    background: #6366f1;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.lexico-strong-btn:hover {
    background: #4f46e5;
}

.lexico-strong-ayuda {
    margin: 6px 0 8px;
    font-size: 11px;
    line-height: 1.4;
    color: #64748b;
}

.lexico-strong-estado {
    margin: 0 0 6px;
    font-size: 11px;
    color: #64748b;
}

.lexico-strong-estado--error {
    color: #b91c1c;
}

.lexico-strong-resultados {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    margin-top: 8px;
    margin-bottom: 0;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.lexico-strong-resumen {
    margin: 0 0 8px;
    font-size: 11px;
    color: #475569;
}

.lexico-strong-seccion {
    margin-bottom: 10px;
}

.lexico-strong-seccion:last-child {
    margin-bottom: 0;
}

.lexico-strong-seccion-titulo {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
}

.lexico-strong-lista {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lexico-strong-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.lexico-strong-item:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
}

.lexico-strong-item--sdbh:hover {
    background: #ecfdf5;
    border-color: #99f6e4;
}

.lexico-strong-item--strong:hover {
    background: #f0f9ff;
    border-color: #7dd3fc;
}

.lexico-strong-item-cod {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
    color: #4f46e5;
}

.lexico-strong-item-lemma {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
}

.lexico-strong-item-lemma--he {
    direction: rtl;
    unicode-bidi: embed;
    font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
}

.lexico-strong-item-lemma--griego {
    font-family: var(--font-greek);
    direction: ltr;
}

.lexico-strong-item-dom {
    font-size: 11px;
    color: #0d9488;
}

.lexico-strong-item--ln .lexico-strong-item-dom {
    color: #6366f1;
}

.lexico-strong-item-res {
    flex: 1 1 100%;
    font-size: 11px;
    color: #64748b;
    line-height: 1.35;
}

.lexico-strong-vacio {
    margin: 0;
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
}

/* ===================================================================
   Biblioteca — diccionarios y comentarios
   =================================================================== */

.biblioteca-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: flex-end;
}

.biblioteca-selector-wrap,
.biblioteca-buscar-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.biblioteca-selector-wrap {
    flex: 1 1 220px;
    max-width: 420px;
}

.biblioteca-buscar-wrap {
    flex: 2 1 280px;
}

.biblioteca-selector-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.biblioteca-selector {
    width: 100%;
    font-size: 12px;
    color: #334155;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
}

.biblioteca-buscar {
    width: 100%;
    font-size: 13px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 7px 10px;
}

.biblioteca-dicc-layout {
    display: grid;
    grid-template-columns: minmax(180px, 34%) 1fr;
    gap: 12px;
    min-height: 0;
}

@media (max-width: 900px) {
    .biblioteca-dicc-layout {
        grid-template-columns: 1fr;
    }
}

.biblioteca-dicc-resultados {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    overflow-y: auto;
    max-height: min(52vh, 480px);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.biblioteca-resultado-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #fff;
    padding: 8px 10px;
    cursor: pointer;
}

.biblioteca-resultado-item:hover,
.biblioteca-resultado-item--activo {
    border-color: #c7d2fe;
    background: #eef2ff;
}

.biblioteca-resultado-item__titulo {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}

.biblioteca-resultado-item__sub {
    font-size: 11px;
    color: #64748b;
    line-height: 1.35;
}

.biblioteca-dicc-detalle {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    overflow-y: auto;
    max-height: min(52vh, 480px);
    padding: 12px 14px;
}

.biblioteca-dicc-detalle__titulo {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #312e81;
}

.biblioteca-dicc-detalle__meta {
    margin: 4px 0 10px;
    font-size: 12px;
    color: #64748b;
}

.biblioteca-dicc-detalle__cuerpo {
    font-size: 13px;
    line-height: 1.55;
    color: #1e293b;
}

.biblioteca-texto-html p {
    margin: 0 0 0.65em;
}

.biblioteca-comentario-meta {
    margin: 0;
    font-size: 11px;
    color: #64748b;
}

.biblioteca-comentario-contenido {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    max-height: min(52vh, 480px);
}

.biblioteca-ayuda,
.biblioteca-vacio,
.biblioteca-cargando {
    margin: 0;
    padding: 10px;
    font-size: 12px;
    color: #64748b;
}

.biblioteca-aviso {
    margin: 0;
    padding: 10px;
    font-size: 12px;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
}

.biblioteca-error {
    margin: 0;
    padding: 10px;
    font-size: 12px;
    color: #b91c1c;
}

.biblioteca-dicc-layout--strong {
    grid-template-columns: 1fr !important;
}

.biblioteca-dicc-layout--strong .biblioteca-dicc-resultados {
    display: none !important;
}

.biblioteca-dicc-layout--strong .biblioteca-dicc-detalle {
    min-width: 0;
}

.biblioteca-strong-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0 4px;
}

.biblioteca-strong-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
}

.biblioteca-strong-chip:hover,
.biblioteca-strong-chip--activo {
    border-color: #6366f1;
    background: #eef2ff;
}

.biblioteca-strong-chip__cod {
    font-weight: 700;
    color: #4338ca;
}

.biblioteca-strong-chip__sub {
    color: #64748b;
    font-size: 10px;
}

.biblioteca-dicc-detalle__titulo-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.biblioteca-strong-historial {
    flex-shrink: 0;
}

.biblioteca-dicc-detalle__titulo--strong {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
    font-size: 15px;
    line-height: 1.35;
}

.biblioteca-dicc-detalle__cuerpo .modal-strong-contenido {
    font-size: 13px;
    line-height: 1.5;
}

.biblioteca-dicc-detalle__cuerpo .strong-link {
    cursor: pointer;
    text-decoration: underline;
    color: #4338ca;
}

.biblioteca-strong-origen {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
}

.biblioteca-strong-origen h4 {
    margin: 0 0 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.notas-personales-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.notas-comentarios-selector-wrap {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    max-width: min(58vw, 520px);
    margin-left: auto;
}
.notas-comentarios-selector {
    width: 100%;
    max-width: 520px;
    font-size: 11.5px;
    font-weight: 500;
    color: #334155;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 5px 28px 5px 10px;
    cursor: pointer;
    line-height: 1.3;
}
.notas-comentarios-selector:focus {
    outline: 2px solid #6366f1;
    outline-offset: 1px;
}
.notas-comentarios-selector option[disabled] {
    color: #94a3b8;
    font-size: 10px;
    text-align: center;
}
.notas-seccion-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}
.comentarios-nt-panel {
    flex: 1 1 0;
    min-height: 0;
}
.comentarios-meta {
    margin: 0;
    font-size: 11px;
    color: #64748b;
    line-height: 1.4;
    flex-shrink: 0;
}
.comentarios-contenido {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2px 4px 8px 0;
    -webkit-overflow-scrolling: touch;
}
.comentarios-cargando,
.comentarios-vacio,
.comentarios-aviso {
    margin: 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
}
.comentarios-aviso {
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 8px 10px;
}
.comentario-entrada {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fafafa;
    flex-shrink: 0;
}
.comentario-entrada__vers {
    margin: 0;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4338ca;
    background: #eef2ff;
    border-bottom: 1px solid #e0e7ff;
}
.comentario-entrada__html {
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.55;
    color: #1e293b;
    overflow: visible;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}
.comentario-entrada__html p {
    margin: 0 0 0.65em;
    overflow: visible;
}
.comentario-entrada__html div,
.comentario-entrada__html span,
.comentario-entrada__html font {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}
.comentario-entrada__html p:last-child {
    margin-bottom: 0;
}

.comentario-entrada__html .doxos-comentario-subtitulo {
    margin: 1.25em 0 0.65em;
    padding: 0;
    font-size: 0.92em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4338ca;
    line-height: 1.35;
    border: none;
    background: transparent;
}

.comentario-entrada__html .doxos-comentario-subtitulo:first-child {
    margin-top: 0;
}

.comentario-entrada__html .doxos-texto-centrado {
    text-align: center;
}

.comentario-entrada__html .doxos-ref-biblica {
    color: #2563eb;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px dotted transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.comentario-entrada__html .doxos-ref-biblica:hover,
.comentario-entrada__html .doxos-ref-biblica:focus-visible {
    color: #1d4ed8;
    border-bottom-color: #60a5fa;
    outline: none;
}

.comentario-entrada__html .hanna-ref-externa {
    color: #800000;
    font-weight: 700;
    cursor: help;
    border-bottom: 1px dotted rgba(128, 0, 0, 0.4);
    border-radius: 2px;
}
.comentario-entrada__html .hanna-ref-externa:hover,
.comentario-entrada__html .hanna-ref-externa:focus-visible {
    background: rgba(128, 0, 0, 0.07);
    outline: none;
}

.notas-personales-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    background: #f1f5f9;
    border-radius: 6px;
    width: fit-content;
}
.notas-tab-btn {
    border: none;
    background: transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
}
.notas-tab-btn:hover {
    background: #e2e8f0;
}
.notas-tab-btn--activa {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.notas-tab-btn--activa[data-notas-tab="estudio"] {
    color: #047857;
}
.notas-personales-meta {
    margin: 0;
    font-size: 11px;
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.notas-meta-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.notas-uid-codigo {
    font-size: 11px;
    color: #047857;
    background: #ecfdf5;
    padding: 1px 6px;
    border-radius: 3px;
}
.notas-meta-hint {
    margin: 0;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
.notas-meta-hint strong {
    color: #047857;
    font-weight: 600;
}
.notas-coordenada-tipo {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #059669;
}
.notas-panel-proyecto .notas-proyecto-titulo {
    font-weight: 600;
    color: #047857;
}
.notas-uid-codigo.notas-uid-cambio {
    animation: notas-uid-pulso 0.45s ease-out;
}
@keyframes notas-uid-pulso {
    0%   { background: #a7f3d0; box-shadow: 0 0 0 2px #6ee7b7; }
    100% { background: #ecfdf5; box-shadow: none; }
}
.notas-aviso-sin-proyecto {
    margin: 0;
    font-size: 12px;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 6px 10px;
}
.notas-textarea {
    width: 100%;
    min-height: 6.5em;
    resize: vertical;
    font-size: 13px;
    line-height: 1.5;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 10px;
    font-family: inherit;
}
.notas-textarea:focus {
    outline: none;
    border-color: #34d399;
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.25);
}
.notas-textarea[readonly] {
    background: #f8fafc;
    color: #64748b;
}

/* Editor enriquecido de notas */
.notas-rich-editor {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.notas-seccion-panel .notas-rich-editor {
    flex: 1 1 0;
    min-height: 0;
}
.notas-seccion-panel .notas-rich-surface {
    flex: 1 1 0;
    min-height: 6.5em;
}
.notas-rich-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    padding: 0.25rem 0.35rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}
.notas-rich-toolbar--disabled {
    opacity: 0.55;
    pointer-events: none;
}
.notas-rich-btn {
    min-width: 1.65rem;
    height: 1.65rem;
    padding: 0 0.35rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    color: #0f172a;
    font-size: 0.78rem;
    line-height: 1;
    cursor: pointer;
}
.notas-rich-btn:hover { background: #f1f5f9; }
.notas-rich-select {
    max-width: 7.5rem;
    font-size: 0.72rem;
    padding: 0.15rem 0.25rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    color: #334155;
}
.notas-rich-sep {
    width: 1px;
    height: 1.25rem;
    background: #cbd5e1;
    margin: 0 0.15rem;
}
.notas-rich-color-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    cursor: pointer;
}
.notas-rich-color-label {
    font-weight: 700;
    font-size: 0.85rem;
    color: #0f172a;
}
.notas-rich-color {
    width: 1.5rem;
    height: 1.35rem;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    cursor: pointer;
}
.notas-rich-surface {
    width: 100%;
    min-height: 8em;
    max-height: 40vh;
    overflow: auto;
    font-size: 14px;
    line-height: 1.55;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 10px;
    background: #fff;
}
.notas-rich-surface:focus {
    outline: none;
    border-color: #34d399;
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.25);
}
.notas-rich-surface--readonly,
.notas-rich-surface[contenteditable="false"] {
    background: #f8fafc;
    color: #64748b;
}
.notas-rich-surface:empty::before {
    content: attr(data-placeholder);
    color: #94a3b8;
    pointer-events: none;
}
.notas-rich-surface ul,
.notas-rich-surface ol {
    margin: 0.35em 0 0.35em 1.25em;
    padding-left: 1.5em;
    list-style-position: outside;
}
.notas-rich-surface ul {
    list-style-type: disc;
}
.notas-rich-surface ol {
    list-style-type: decimal;
}
.notas-rich-surface ul ul {
    list-style-type: circle;
}
.notas-rich-surface ul ul ul {
    list-style-type: square;
}
.notas-rich-surface ol ol {
    list-style-type: lower-alpha;
}
.notas-rich-surface li {
    display: list-item;
    margin: 0.15em 0;
}
.notas-rich-surface p {
    margin: 0 0 0.45em;
}
.notas-rich-surface p:last-child {
    margin-bottom: 0;
}

.notas-autosave-estado {
    font-size: 11px;
    color: #64748b;
    min-height: 1em;
}
.notas-autosave-estado--error {
    color: #b91c1c;
}
.palabra-card.notas-card-activa {
    outline: 2px solid #6ee7b7;
    outline-offset: 1px;
}

/* Indicador ✱ — celda TU VERSIÓN con nota personal guardada */
.nota-indicador-celda {
    display: inline-block;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    color: #047857;
    margin-left: 1px;
    vertical-align: super;
    pointer-events: none;
    user-select: none;
    opacity: 0.92;
}
.palabra-personal.palabra-personal--tiene-nota {
    padding-right: 2px;
}
.exegetico-grid[data-motor-tarjetas="palabras_interlineal"]
.palabra-card--7filas
.pi-fila-traduccion.palabra-personal--tiene-nota {
    padding-right: 4px;
}
.palabra-card--tiene-nota .palabra-personal.palabra-personal--tiene-nota:focus
    + .nota-indicador-celda {
    color: #065f46;
}

.palabra-card--7filas.palabra-card--tiene-nota::after {
    content: "✱";
    position: absolute;
    right: 3px;
    bottom: 2px;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    color: #047857;
    pointer-events: none;
    user-select: none;
    z-index: 2;
}

/* ===================================================================
   Panel global Notas y comentarios (dock)
   =================================================================== */
:root {
    --mapas-notas-dock-size: min(380px, 42vw);
    --mapas-notas-dock-inferior: min(280px, 38vh);
}

.mapas-notas-abrir-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}
.mapas-notas-abrir-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #1e293b;
}
.mapas-notas-abrir-btn.is-activa {
    background: #eef2ff;
    border-color: #818cf8;
    color: #3730a3;
}
.mapas-notas-abrir-btn--ventana-aparte {
    box-shadow: inset 0 0 0 1px #fca5a5;
    background: #fff7ed;
    border-color: #fb923c;
    color: #c2410c;
}
.exegetico-barra-lectura .mapas-notas-abrir-btn {
    margin-left: auto;
}
.exegetico-controles .mapas-notas-abrir-btn {
    margin-left: 8px;
    flex-shrink: 0;
}
.mapas-notas-panel-home {
    display: none !important;
}
.mapas-notas-dock-selector {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(220px, 38vw);
}
.mapas-notas-dock-selector .notas-comentarios-selector {
    width: 100%;
    max-width: 220px;
    font-size: 11px;
}
.concordancia-notas-abrir-btn {
    align-self: flex-end;
}
.concordancia-fila--consulta {
    align-items: flex-end;
}

.concordancia-fila--consulta .concordancia-rtf-toggle {
    align-self: center;
    flex-shrink: 0;
    white-space: nowrap;
}

.mapas-notas-dock {
    z-index: 8500;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}
.mapas-notas-dock--cerrado {
    display: none !important;
}
.mapas-notas-dock-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    cursor: default;
    flex-shrink: 0;
}
.mapas-notas-dock--flotante .mapas-notas-dock-bar {
    cursor: move;
}
.mapas-notas-dock-titulo {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    flex: 1 1 auto;
    min-width: 0;
}
.mapas-notas-dock-modos {
    display: inline-flex;
    gap: 2px;
}
.mapas-notas-dock-modo-btn {
    width: 28px;
    height: 26px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.mapas-notas-dock-modo-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
}
.mapas-notas-dock-modo-btn.is-activa {
    background: #fff;
    border-color: #c7d2fe;
    color: #3730a3;
}
/* Glifo compartido — ventana aparte (⧉, dos rectángulos) */
.mapashb-ventana-aparte-glyph {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    color: inherit;
    pointer-events: none;
    user-select: none;
}
.mapas-notas-dock-modo-btn--ventana-aparte {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mapas-notas-dock-modo-btn--ventana-aparte.is-activa {
    background: #fff;
    border-color: #c7d2fe;
    color: #3730a3;
}
.mapas-notas-dock-cerrar {
    width: 28px;
    height: 26px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #64748b;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.mapas-notas-dock-cerrar:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}
.mapas-notas-dock-accion-btn {
    width: 28px;
    height: 26px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}
.mapas-notas-dock-accion-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
}
.mapas-notas-dock-accion-btn.is-activa {
    background: #fff;
    border-color: #c7d2fe;
    color: #3730a3;
}
.mapas-notas-dock-accion-btn--ventana img {
    display: block;
    width: 16px;
    height: 16px;
}
.mapas-notas-dock-slot {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mapas-notas-dock--derecha {
    position: fixed;
    top: 52px;
    right: 0;
    bottom: 0;
    width: var(--mapas-notas-dock-size);
}
.mapas-notas-dock--inferior {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--mapas-notas-dock-inferior);
}
.mapas-notas-dock--flotante {
    position: fixed;
    left: 12vw;
    top: 14vh;
    width: min(480px, 92vw);
    height: min(560px, 78vh);
    border-radius: 10px;
    resize: both;
}
.mapas-notas-dock--maximizado {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: 52px !important;
    bottom: 8px !important;
    width: auto !important;
    height: auto !important;
    max-width: none;
    max-height: none;
    border-radius: 10px;
    z-index: 9100;
    resize: none;
}
html.mapas-notas-dock-maximizado .panel-pestana:not([hidden]) {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

/* Ventana aparte — página standalone */
.notas-ventana-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.notas-ventana-titulo {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notas-ventana-selector {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(240px, 42vw);
}
.notas-ventana-selector .notas-comentarios-selector {
    width: 100%;
    font-size: 11px;
}
.notas-ventana-modos {
    display: inline-flex;
    gap: 2px;
    flex-shrink: 0;
}
.notas-ventana-modo-btn {
    width: 28px;
    height: 26px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.notas-ventana-modo-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
}
.notas-ventana-btn {
    width: 30px;
    height: 28px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    flex-shrink: 0;
}
.notas-ventana-btn:hover {
    background: #eef2ff;
    border-color: #818cf8;
    color: #3730a3;
}
.notas-ventana-btn--max.is-activa {
    background: #eef2ff;
    border-color: #818cf8;
    color: #3730a3;
}
.notas-ventana-cuerpo {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 8px 10px 10px;
}
.notas-personales-panel--ventana-aparte {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.notas-personales-panel--ventana-aparte .notas-personales-cuerpo {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.notas-personales-panel--ventana-aparte .notas-rich-surface {
    max-height: none;
    flex: 1 1 0;
    min-height: 12em;
}

html.mapas-notas-dock-activo.mapas-notas-dock-modo-derecha .panel-pestana:not([hidden]) {
    margin-right: var(--mapas-notas-dock-size);
    transition: margin-right 0.15s ease;
}
html.mapas-notas-dock-activo.mapas-notas-dock-modo-inferior .panel-pestana:not([hidden]) {
    margin-bottom: var(--mapas-notas-dock-inferior);
    transition: margin-bottom 0.15s ease;
}

#exegetico-notas-personales.mapas-notas-dock-embed {
    border: none;
    box-shadow: none;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#exegetico-notas-personales.mapas-notas-dock-embed .notas-personales-cuerpo {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    padding: 8px 10px 10px;
    overflow: hidden;
}
#exegetico-notas-personales.mapas-notas-dock-embed #panel-notas-propias,
#exegetico-notas-personales.mapas-notas-dock-embed #panel-comentario-nt {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}
#exegetico-notas-personales.mapas-notas-dock-embed .notas-textarea,
#exegetico-notas-personales.mapas-notas-dock-embed .notas-rich-editor {
    flex: 1 1 0;
    min-height: 120px;
    resize: vertical;
}
#exegetico-notas-personales.mapas-notas-dock-embed .notas-rich-surface {
    flex: 1 1 0;
    min-height: 120px;
    max-height: none;
    resize: none;
}
#exegetico-notas-personales.mapas-notas-dock-embed .comentarios-contenido {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    :root {
        --mapas-notas-dock-size: min(100vw, 360px);
    }
    html.mapas-notas-dock-activo.mapas-notas-dock-modo-derecha .panel-pestana:not([hidden]) {
        margin-right: 0;
    }
    .mapas-notas-dock--derecha {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: min(55vh, 420px);
        border-radius: 12px 12px 0 0;
    }
}

/* --- RTF bíblico (Doxos): títulos de pericopa y palabras de Jesús --- */
.doxos-titulo-pericopa {
    display: block;
    margin: 0.85em 0 0.45em;
    font-weight: 700;
    font-size: 0.95em;
    line-height: 1.35;
    text-align: center;
}

.doxos-palabras-jesus {
    color: #cc0000;
    font-variant: normal;
}

.ocultar-titulos .doxos-titulo-pericopa {
    display: none;
}

.ocultar-rojo-jesus .doxos-palabras-jesus {
    color: inherit;
    font-variant: normal;
}

.exegetico-rtf-toggles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    margin-left: auto;
    font-size: 0.78rem;
    line-height: 1.2;
}

.exegetico-rtf-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.exegetico-rtf-toggle input {
    margin: 0;
    accent-color: #b45309;
}

.lectura-toolbar__rtf-toggles {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0.35rem 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 0.25rem;
}

.lectura-rtf-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    color: inherit;
}

.lectura-rtf-toggle input {
    margin: 0;
    flex-shrink: 0;
}

.lectura-rtf-toggle__txt {
    opacity: 0.92;
}

/* --- Ayuda navbar (?) + modal informativo --- */
.dropdown-item--boton {
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    font-family: inherit;
}

.dropdown-panel--ayuda {
    min-width: 240px;
}

body.ayuda-modal-abierto {
    overflow: hidden;
}

.ayuda-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.ayuda-modal.hidden,
.ayuda-modal[hidden] {
    display: none;
}

.ayuda-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(2px);
}

.ayuda-modal__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 42rem);
    max-height: min(88vh, 720px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow:
        0 24px 48px -12px rgba(15, 23, 42, 0.35),
        0 8px 16px -6px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.ayuda-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem 0.9rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.ayuda-modal__kicker {
    margin: 0 0 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

.ayuda-modal__titulo {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
}

.ayuda-modal__cerrar {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.ayuda-modal__cerrar:hover,
.ayuda-modal__cerrar:focus-visible {
    background: #f1f5f9;
    color: #0f172a;
    outline: none;
}

.ayuda-modal__cuerpo {
    padding: 1.15rem 1.25rem 1.35rem;
    overflow-y: auto;
    font-size: 0.94rem;
    line-height: 1.62;
    color: #334155;
}

.ayuda-modal__lead {
    margin: 0 0 1rem;
    font-size: 1.02rem;
    line-height: 1.55;
    color: #1e293b;
}

.ayuda-modal__griego {
    color: #0f172a;
}

.ayuda-modal__translit {
    font-family: var(--font-biblia, "Palatino Linotype", "Book Antiqua", Palatino, serif);
    font-style: italic;
    color: #475569;
}

.ayuda-modal__seccion {
    margin: 1.15rem 0 0;
    padding-top: 0.15rem;
}

.ayuda-modal__seccion--destacada {
    margin-top: 1.35rem;
    padding: 1rem 1rem 0.15rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 55%, #ffffff 100%);
    border: 1px solid #e0f2fe;
}

.ayuda-modal__seccion-titulo {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0 0 0.65rem;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.4;
    color: #0f172a;
}

.ayuda-modal__seccion-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: #0ea5e9;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.ayuda-modal__lista {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
}

.ayuda-modal__lista li + li {
    margin-top: 0.45rem;
}

.ayuda-modal__lista--numerada {
    padding-left: 1.35rem;
}

.ayuda-modal__cierre {
    margin: 1.25rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px dashed #cbd5e1;
    font-size: 0.98rem;
    color: #475569;
    text-align: center;
}

.ayuda-modal__cierre em {
    font-style: italic;
    color: #0f172a;
}

.ayuda-modal__panel--ancho {
    width: min(100%, 48rem);
    max-height: min(90vh, 820px);
}

.ayuda-modal__lista--testigos {
    list-style: disc;
    margin: 0.85rem 0 1rem;
}

.ayuda-modal__lista--testigos > li + li {
    margin-top: 0.85rem;
}

.ayuda-modal__firma {
    margin: 1.35rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px dashed #cbd5e1;
    text-align: right;
    font-size: 0.98rem;
    color: #1e293b;
    line-height: 1.55;
}

.ayuda-doxos-sintesis__intro {
    margin: 1.15rem 0 0.55rem;
    font-weight: 600;
    color: #1e293b;
}

/* Bloque «+ a + b + c } = Doxos» (estilo llave de agrupación). */
.ayuda-doxos-sintesis {
    display: flex;
    align-items: center;
    gap: 0.2rem 0.35rem;
    margin: 0.35rem 0 1.15rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 55%, #ffffff 100%);
    border: 1px solid #dbeafe;
}

.ayuda-doxos-sintesis__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 0 1 auto;
    min-width: 0;
    max-width: max-content;
}

.ayuda-doxos-sintesis__lista li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    color: #1e293b;
    line-height: 1.45;
}

.ayuda-doxos-sintesis__lista li + li {
    margin-top: 0.28rem;
}

.ayuda-doxos-sintesis__mas {
    flex-shrink: 0;
    width: 1rem;
    font-weight: 700;
    color: #1e3a8a;
    text-align: center;
    line-height: 1.45;
}

.ayuda-doxos-sintesis__item-con-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.ayuda-doxos-sintesis__link-video {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #1d4ed8;
    cursor: pointer;
    transition: color 120ms ease, opacity 120ms ease;
}

.ayuda-doxos-sintesis__link-video:hover,
.ayuda-doxos-sintesis__link-video:focus-visible {
    background: transparent;
    color: #1e3a8a;
    outline: none;
}

/* Ventana video Método Científico */
.metodo-cientifico-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid #1e293b;
    background: #0f172a;
    color: #e2e8f0;
}

.metodo-cientifico-titulos {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.metodo-cientifico-titulo {
    font-size: 1rem;
    font-weight: 700;
    color: #f8fafc;
}

.metodo-cientifico-sub {
    font-size: 0.75rem;
    color: #94a3b8;
}

.metodo-cientifico-cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    background: #020617;
}

.metodo-cientifico-video {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 8px;
    background: #000;
    outline: none;
}

.ayuda-doxos-sintesis__llave {
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    margin-left: 0.1rem;
    padding: 0;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    font-size: clamp(3.6rem, 12vw, 5.6rem);
    font-weight: 400;
    line-height: 0.85;
    color: #1d4ed8;
    user-select: none;
}

.ayuda-doxos-sintesis__resultado {
    flex: 0 0 auto;
    margin: 0 0 0 0.15rem;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
    color: #0f172a;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .ayuda-doxos-sintesis {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .ayuda-doxos-sintesis__lista {
        flex: 1 1 100%;
    }

    .ayuda-doxos-sintesis__llave {
        font-size: 3.4rem;
        min-height: 3.2rem;
    }

    .ayuda-doxos-sintesis__resultado {
        flex: 1 1 auto;
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .ayuda-modal {
        padding: 0.65rem;
    }

    .ayuda-modal__panel {
        max-height: 92vh;
        border-radius: 12px;
    }

    .ayuda-modal__header,
    .ayuda-modal__cuerpo {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}