/* =========================================================
   Story Map — Plantilla D
   Grid storyboard por secuencias (wrap 12, sin scroll interno)
   + Navegación rápida fija (Acto 1/2/3)
   + Labels extensibles esbeltos por Acto dentro del board

   Ajuste visual clave:
   - "Secuencias sin asignar" debe leerse como META/ZONA TÉCNICA,
     NO como un Acto. Se desatura, se vuelve neutra y baja jerarquía.
   ========================================================= */

/* ---------- Reset mínimo ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #0f1115;
    color: #e6e8eb;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Utilidades ---------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* ---------- Topbar ---------- */
.m2p-topbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #1c2027;
    background: #12151b;
}

.brand-title {
    font-weight: 600;
}

.brand-subtitle {
    opacity: 0.6;
    margin-left: 8px;
    font-size: 0.85em;
}

.m2p-select,
.m2p-search {
    background: #0f1115;
    color: #e6e8eb;
    border: 1px solid #242a35;
    border-radius: 6px;
    padding: 6px 8px;
}

.m2p-search {
    min-width: 220px;
    margin-left: 8px;
}

.m2p-btn {
    background: #1a2030;
    color: #e6e8eb;
    border: 1px solid #2a3140;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
}

.m2p-btn:hover {
    background: #202744;
}

/* ---------- Main ---------- */
.m2p-main {
    height: calc(100% - 54px);
    display: flex;
    flex-direction: column;
}

/* ---------- Statusbar ---------- */
.m2p-statusbar {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 14px;
    font-size: 0.85em;
    border-bottom: 1px solid #1c2027;
    background: #0f1115;
    opacity: 0.85;
}

/* ---------- Shell general ---------- */
.storymap-shell {
    flex: 1;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    gap: 0;
    min-height: 0;
}

.storymap-shell.is-left-collapsed {
    grid-template-columns: 42px minmax(0, 1fr) auto;
}

.storymap-center {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 0;
}

.episode-scenes-pool {
    background: #0c111b;
    border-right: 1px solid #1c2027;
    display: grid;
    grid-template-rows: 90% 10%;
    min-height: 0;
    padding: 10px;
    gap: 8px;
    position: relative;
}

.episode-scenes-pool-main {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.episode-scenes-pool-header {
    margin-bottom: 10px;
}

.episode-scenes-pool-headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.episode-scenes-pool-title {
    font-weight: 700;
}

.episode-scenes-pool-toggle {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(169, 176, 194, 0.18);
    background: rgba(13, 17, 24, 0.35);
    color: #cfd5e3;
    cursor: pointer;
    line-height: 1;
    font-size: 14px;
    flex: 0 0 auto;
}

.episode-scenes-pool-toggle:hover {
    background: rgba(26, 32, 48, 0.35);
    border-color: rgba(169, 176, 194, 0.28);
}

.episode-scenes-pool-subtitle {
    font-size: 0.8em;
    opacity: 0.7;
}

.episode-scenes-pool-list {
    min-height: 0;
    overflow-y: auto;
    align-content: start;
}

.episode-scenes-pool-tools {
    position: relative;
    min-height: 0;
    border-top: 1px solid #1c2027;
    padding-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.episode-scenes-pool-tools .notes-drawer {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    z-index: 30;
}

.episode-scenes-pool-tools .notes-drawer.is-collapsed {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.episode-scenes-pool-tools .notes-drawer.is-collapsed .notes-drawer-tabs {
    width: 100%;
    justify-content: center;
}

.episode-scenes-pool-tools .notes-drawer:not(.is-collapsed) {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: min(820px, calc(100vw - 280px));
    height: 50vh;
    min-width: 420px;
    min-height: 360px;
    max-width: 820px;
    max-height: 720px;
    z-index: 5000;
}

.episode-scenes-pool-tools .notes-drawer:not(.is-collapsed) .notes-drawer-tabs {
    display: none;
}

.episode-scenes-pool.is-collapsed {
    grid-template-rows: 1fr;
    padding: 8px 6px;
    gap: 0;
}

.episode-scenes-pool.is-collapsed .episode-scenes-pool-list,
.episode-scenes-pool.is-collapsed .episode-scenes-pool-tools,
.episode-scenes-pool.is-collapsed .episode-scenes-pool-subtitle {
    display: none;
}

.episode-scenes-pool.is-collapsed .episode-scenes-pool-header {
    margin: 0;
}

.episode-scenes-pool.is-collapsed .episode-scenes-pool-headline {
    justify-content: center;
}

.episode-scenes-pool.is-collapsed .episode-scenes-pool-title {
    display: none;
}

.episode-scenes-pool-collapsed-label {
    display: none;
}

.episode-scenes-pool.is-collapsed .episode-scenes-pool-collapsed-label {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    white-space: nowrap;
    pointer-events: none;
}

/* =========================================================
   Navegación rápida fija (Actos)
   ========================================================= */
.acts-nav {
    border-right: 1px solid #1c2027;
    background: #0f1115;
    position: relative;
}

.acts-nav-inner {
    position: sticky;
    top: 0;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.acts-nav-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #2a3140, transparent);
    margin: 2px 4px;
    opacity: 0.9;
}

.act-nav-btn {
    width: 48px;
    height: 80px;
    border-radius: 10px;
    background: #12151b;
    border: 1px solid #242a35;
    color: #e6e8eb;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.act-nav-btn--unassigned {
    height: 48px;
    border-radius: 12px;
    background: #1a2030;
    border-color: #3a4254;
}

.act-nav-btn--unassigned .act-nav-text {
    writing-mode: horizontal-tb;
    transform: none;
    letter-spacing: 0.12em;
    font-weight: 700;
    font-size: 0.85em;
    opacity: 0.95;
}

.act-nav-btn:hover {
    background: #162033;
}

.act-nav-btn.is-active {
    outline: 2px solid #6aa2ff;
    outline-offset: 2px;
}

.act-nav-btn .act-nav-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: 0.08em;
    font-size: 0.85em;
    opacity: 0.9;
}

/* =========================================================
   Board
   ========================================================= */
.board-area {
    overflow-y: auto;
    overflow-x: hidden;
    background: #0f1115;
    min-height: 0;
}

.board-viewport {
    padding: 14px 16px;
}

.board-root {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* =========================================================
   Secuencias sin asignar (bloque superior)
   - Debe leerse como "zona técnica/meta", no como Acto.
   - Baja jerarquía: neutro, desaturado, más delgado.
   ========================================================= */
.unassigned-block {
    background: transparent;
    /* sin caja competidora */
    border-radius: 0;
    border: none;
    overflow: hidden;
    padding: 0;
    margin-bottom: 4px;
}

/* Header: más neutro, más “meta”, menos prominente */
.unassigned-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    /* más delgado que antes */
    padding: 6px 10px;

    /* neutro (gris frío), NO morado/azul acto */
    background: #0d1118;

    /* “corte técnico” superior e inferior */
    border-top: 2px solid #2a2f3a;
    border-bottom: 1px solid rgba(42, 47, 58, 0.45);

    /* reduce presencia */
    border-radius: 8px;
}

.unassigned-title {
    font-weight: 700;
    color: #a9b0c2;
    /* gris azulado */
    opacity: 0.95;
    font-size: 0.82em;
    /* menor que secuencia/acto */
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Toggle: más discreto, no “botón principal” */
.unassigned-toggle {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(169, 176, 194, 0.18);
    background: rgba(13, 17, 24, 0.35);
    color: #cfd5e3;
    cursor: pointer;
    line-height: 1;
    font-size: 14px;
}

.unassigned-toggle:hover {
    background: rgba(26, 32, 48, 0.35);
    border-color: rgba(169, 176, 194, 0.28);
}

.unassigned-body {
    padding: 6px 10px 8px;
    gap: 8px;
}


/* Cuando está vacío: que NO se vea como “gran bloque” */
.unassigned-block.is-empty .unassigned-body {
    padding: 6px 12px;
}

/* Estado colapsado: sólo header visible, lo más compacto posible */
.unassigned-block.is-collapsed {
    height: 34px;
    overflow: hidden;
    border: none;
}

.unassigned-block.is-collapsed .unassigned-body {
    display: none;
}

.unassigned-hint {
    opacity: 0.6;
    font-size: 0.82em;
    padding: 2px 0;
    text-align: center;
}

/* =========================================================
   Placeholder
   ========================================================= */
.board-placeholder {
    opacity: 0.6;
    padding: 24px;
    border: 1px dashed #2a3140;
    border-radius: 10px;
}

/* =========================================================
   Acto group + Label extensible esbelto
   ========================================================= */
.act-group {
    display: grid;
    grid-template-columns: 12px 1fr;
    /* label esbelto / contenido */
    gap: 10px;
    align-items: stretch;
    position: relative;
}

.act-label {
    border-radius: 10px;
    background: #1a2030;
    border: 1px solid #242a35;
    opacity: 0.9;
    position: relative;
}

.act-label::after {
    content: attr(data-act-label);
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-size: 0.75em;
    letter-spacing: 0.08em;
    opacity: 0.75;
    pointer-events: none;
}

.act-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* =========================================================
   Huérfanos del Acto (Sin secuencia)
   ========================================================= */
.act-orphans {
    border: none;
    border-radius: 6px;
    background: transparent;
    overflow: hidden;
}

.act-orphans-header {
    padding: 4px 8px;
    font-size: 0.76em;
    opacity: 0.65;
    /* discreto */
    border-bottom: 1px dashed rgba(28, 32, 39, 0.25);
}

.act-orphans-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 8px 8px;
}

/* Si está vacío, el grid debe seguir existiendo como drop zone */
.act-orphans.is-empty .act-orphans-grid {
    display: flex;
}

.act-orphans.is-empty {
    border-top: 1px dashed rgba(42, 43, 48, 0.35);
    opacity: 0.85;
}

.act-orphans.is-empty .act-orphans-header {
    border-bottom: none;
    padding: 2px 8px;
    line-height: 16px;
    font-size: 0.74em;
    text-align: left;
}

/* Placeholder funcional para contenedores drop vacíos */
.drop-empty-hint {
    opacity: 0.55;
    font-size: 0.75em;
    border: 1px dashed rgba(106, 162, 255, 0.25);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    min-height: 34px;
    width: 100%;
}

/* Separador entre actos (muy delgado) */
.act-separator {
    height: 1px;
    background: linear-gradient(to right, transparent, #2a3140, transparent);
    margin: 8px 0 4px;
}

/* =========================================================
   Secuencia (fila)
   ========================================================= */
.sequence-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: flex-start;
}

.sequence-handle {
    width: 18px;
    height: 100%;
    border-radius: 6px;
    background: #1a2030;
    cursor: grab;
}

.sequence-handle:active {
    cursor: grabbing;
}

.sequence-body {
    border: 1px solid #242a35;
    border-radius: 10px;
    padding: 8px 10px 10px;
    background: #111b2a;
}

/* Header secuencia */
.sequence-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.sequence-title {
    font-size: 0.9em;
    font-weight: 600;
    opacity: 0.9;
    min-width: 0;
}

/* Grid de escenas: wrap fijo 12, sin scroll interno */
.scenes-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
}

/* Escena card */
.scene-item {
    width: 108px;
    min-width: 108px;
}

.scene-tile {
    border-radius: 8px;
    background: #121a29;
    border: 1px solid #2a3140;
    display: grid;
    grid-template-rows: 19px 1fr auto;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
}

.got-rail {
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 6px;
    border-bottom: 1px solid rgba(42, 49, 64, 0.55);
    background: rgba(17, 27, 42, 0.55);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.got-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    letter-spacing: 0.04em;
    font-weight: 600;
    font-size: 0.62em;
    line-height: 1;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.got-sep {
    opacity: 0.38;
    font-weight: 400;
}

.got-chip--scene {
    margin-left: auto;
}

.sequence-got {
    margin-left: auto;
    flex: 0 0 auto;
    opacity: 0.82;
}

.act-inline-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 2px;
    padding: 0 2px;
}

.act-inline-title {
    font-size: 0.72em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.7;
}

.act-got {
    font-size: 0.56em;
    opacity: 0.75;
}

.got-token {
    opacity: 0.35;
}

.got-token-up {
    margin-left: 2px;
}

.got-chip .got-token.is-active {
    opacity: 1;
}

.got-state-complete .got-token {
    color: rgba(255, 255, 255, 0.96);
    opacity: 1;
}

.got-state-partial .got-token {
    color: rgba(255, 255, 255, 0.78);
    opacity: 0.6;
}

.got-state-empty .got-token {
    color: rgba(165, 174, 193, 0.52);
    opacity: 0.7;
}

.scene-thumb {
    margin: 0;
    border-radius: 0;
    border: 0;
    background: #1b2233;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    min-height: 0;
}

.scene-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.scene-thumb.is-empty {
    background: rgba(24, 33, 49, 0.62);
}

.scene-title {
    font-size: 0.72em;
    color: #dce1ea;
    line-height: 1.2;
    padding: 5px 6px 6px;
    border-top: 1px solid #232c3c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scene-item--create {
    width: 108px;
    min-width: 108px;
}

.scene-tile--create {
    width: 100%;
    height: 122px;
    border-radius: 8px;
    border: 1px dashed rgba(148, 165, 196, 0.42);
    background: rgba(24, 33, 49, 0.62);
    color: rgba(220, 228, 242, 0.78);
    font-size: 0.74em;
    line-height: 1.25;
    text-align: center;
    padding: 8px;
    cursor: pointer;
}

.scene-tile--create:hover {
    border-color: rgba(172, 188, 216, 0.62);
    background: rgba(31, 42, 61, 0.78);
    color: rgba(232, 238, 248, 0.9);
}

.sequence-scenes-cta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0;
    margin-left: 8px;
    flex: 0 0 auto;
}

.sequence-scenes-row {
    display: flex;
    align-items: center;
    gap: 0;
}

.sequence-scenes-row .scenes-grid {
    flex: 1 1 auto;
    min-width: 0;
}

.scene-create-inline-btn {
    border: 1px dashed rgba(148, 165, 196, 0.34);
    background: rgba(20, 29, 44, 0.32);
    color: rgba(220, 228, 242, 0.72);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.72em;
    line-height: 1.2;
    cursor: pointer;
}

.scene-create-inline-btn:hover {
    border-color: rgba(172, 188, 216, 0.5);
    background: rgba(29, 40, 59, 0.45);
    color: rgba(232, 238, 248, 0.86);
}

.scene-item--create-mini {
    flex: 0 0 auto;
    min-width: 164px;
}

.scene-item--create-mini .scene-tile--create {
    height: 30px;
    border-radius: 6px;
    font-size: 0.68em;
    padding: 4px 8px;
}

.sequence-create-wrap {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}

.act-orphans-header .sequence-create-wrap {
    justify-content: flex-start;
    margin-top: 0;
}

.sequence-create-btn {
    min-height: 28px;
    border-radius: 8px;
    border: 1px dashed rgba(148, 165, 196, 0.3);
    background: rgba(20, 29, 44, 0.3);
    color: rgba(220, 228, 242, 0.72);
    font-size: 0.74em;
    text-align: center;
    cursor: pointer;
    padding: 4px 12px;
}

.sequence-create-btn:hover {
    border-color: rgba(172, 188, 216, 0.48);
    background: rgba(29, 40, 59, 0.44);
    color: rgba(232, 238, 248, 0.84);
}

.act-orphans-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.act-orphans-title {
    display: inline-block;
}

.act-orphans-create-btn {
    margin-left: auto;
    border: 1px dashed rgba(148, 165, 196, 0.28);
    background: rgba(20, 29, 44, 0.24);
    color: rgba(220, 228, 242, 0.68);
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 0.68em;
    line-height: 1.2;
    cursor: pointer;
}

.act-orphans-create-btn:hover {
    border-color: rgba(172, 188, 216, 0.42);
    background: rgba(29, 40, 59, 0.36);
    color: rgba(232, 238, 248, 0.8);
}

/* Mini tile (escenas sin secuencia dentro del Acto) */
.scene-tile--mini {
    height: 30px;
    /* <-- tu ajuste (secundario) */
    border-radius: 6px;
    background: #11151a;
    border-color: #232830;
    font-size: 0.7em;

    /* ancho angosto estable (evita que se “cuadren” por responsive raro) */
    flex: 0 0 64px;
    width: 64px;
    max-width: 80px;
    min-width: 44px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.scene-tile:hover {
    border-color: #3d4e73;
}

/* =========================================================
   Scrollbar discreto (board)
   ========================================================= */
.board-area::-webkit-scrollbar {
    width: 6px;
}

.board-area::-webkit-scrollbar-track {
    background: transparent;
}

.board-area::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
}

.board-area::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* Firefox scrollbar (thin) */
.board-area {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
}

/* =========================================================
   Huérfanos (rail derecho)
   ========================================================= */
.inspector-panel {
    background: #0c111b;
    border-left: 1px solid #1c2027;
    display: flex;
    flex-direction: column;
    padding: 10px;
    min-height: 0;
    width: 340px;
    min-width: 340px;
}

.inspector-header {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.inspector-title {
    font-weight: 700;
}

.inspector-toggle {
    background: #1a2030;
    border: 1px solid #2a3140;
    color: #e6e8eb;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
}

.inspector-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.inspector-panel.is-collapsed {
    width: 48px;
    min-width: 48px;
    padding: 10px 6px;
}

.inspector-panel.is-collapsed .inspector-title,
.inspector-panel.is-collapsed .inspector-body {
    display: none;
}

.inspector-panel.is-collapsed .inspector-header {
    margin-bottom: 0;
}

.inspector-panel.is-collapsed .inspector-toggle {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    width: 100%;
    padding: 10px 0;
}

.orphans-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    align-content: start;
}

/* En el panel derecho, el marker debe verse como un tile normal (ancho completo de su celda) */
.orphans-list .drop-marker {
    width: 100%;
}

/* ---------- Estados (reservados) ---------- */
.is-dragging {
    opacity: 0.6;
}

[data-item-type="act"],
[data-item-type="sequence"],
[data-item-type="scene"] {
    transition: box-shadow 120ms ease, border-color 120ms ease;
}

[data-item-type].is-selected {
    box-shadow: 0 0 0 2px rgba(106, 162, 255, 0.55);
    border-radius: 10px;
}

.drop-target {
    outline: 2px dashed #6aa2ff;
    outline-offset: 2px;
}

/* =========================================================
   Drop marker (insert preview)
   - Reserva espacio visible durante dragover
   - No debe interferir con hit-testing (pointer-events:none)
   ========================================================= */

.drop-marker {
    pointer-events: none;
    border: 2px dashed rgba(106, 162, 255, 0.7);
    background: rgba(106, 162, 255, 0.08);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(106, 162, 255, 0.22);
}

.drop-marker--scene {
    width: 108px;
    min-width: 108px;
    height: 122px;
}

.drop-marker--scene-mini {
    height: 30px;
    border-radius: 6px;

    /* coincide con .scene-tile--mini */
    flex: 0 0 64px;
    width: 64px;
    max-width: 80px;
    min-width: 44px;
}

.drop-marker--sequence {
    height: 64px;
    border-radius: 10px;
    width: 100%;
}

.drop-marker--sequence-unassigned {
    border-color: rgba(122, 150, 190, 0.42);
    background: rgba(122, 150, 190, 0.07);
    box-shadow: inset 0 0 0 1px rgba(122, 150, 190, 0.18);
}

/* =========================================================
   Secuencias SIN ACTO (dentro de .unassigned-block)
   Objetivo: que se vean como "pendientes/no ubicadas"
   - tono distinto (azul acero desaturado)
   - borde punteado
   - thumbnails iguales pero en modo "pendiente"
   ========================================================= */

.unassigned-block .sequence-row {
    padding: 2px 0;
}

.unassigned-block .sequence-handle {
    background: rgba(122, 150, 190, 0.18);
}

.unassigned-block .sequence-body {
    background: #12151b;
    border: 1px dashed rgba(122, 150, 190, 0.28);
    padding: 2px 10px 10px;
}

.unassigned-block .sequence-title {
    color: #a9b6c8;
    opacity: 0.9;
    font-weight: 600;
}

.unassigned-block .scene-tile {
    filter: grayscale(25%) brightness(0.92);
    opacity: 0.92;
}

.unassigned-block .scene-tile:hover {
    filter: none;
    opacity: 1;
}

.unassigned-block .scenes-grid:empty {
    min-height: 30px;
    border-radius: 8px;
    outline: 1px dashed rgba(122, 150, 190, 0.22);
    outline-offset: 2px;
    background: rgba(122, 150, 190, 0.03);
}

.scenes-grid--unassigned {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
}

/* Rail derecho: NUNCA usar layout mini */
.orphans-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
}

.orphans-list .scene-tile {
    width: 100%;
    justify-self: stretch;
    aspect-ratio: auto;
}

.got-tooltip {
    white-space: pre-line;
    font-size: 0.78em;
    line-height: 1.35;
}

.inspector-empty {
    opacity: 0.7;
    font-size: 0.9em;
    padding: 10px 2px;
}

.inspector-card {
    border: 1px solid #242a35;
    border-radius: 10px;
    background: #101722;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inspector-scope {
    font-size: 0.8em;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.inspector-scope-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.inspector-scope-id {
    font-size: 0.8em;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.inspector-scope-badge {
    margin-left: auto;
}

.inspector-thumb {
    height: 160px;
    border-radius: 8px;
    border: 1px solid #2a3140;
    background: #172133 center/cover no-repeat;
}

.inspector-thumb.is-empty {
    background-image: linear-gradient(135deg, #1a2334, #131a27);
}

.inspector-du {
    display: grid;
    gap: 8px;
}

.inspector-du-item {
    font-size: 0.86em;
}

.inspector-du-item b {
    opacity: 0.85;
}

.inspector-form {
    display: grid;
    gap: 8px;
}

.inspector-field-label {
    font-size: 0.82em;
    opacity: 0.88;
}

.inspector-input,
.inspector-textarea {
    width: 100%;
    background: #0f1115;
    color: #e6e8eb;
    border: 1px solid #2a3140;
    border-radius: 8px;
    padding: 8px;
    font-size: 0.86em;
    line-height: 1.35;
}

.inspector-textarea {
    min-height: 72px;
    resize: vertical;
}

.inspector-file-label {
    font-size: 0.82em;
    opacity: 0.85;
}

.inspector-file {
    padding: 6px;
}

.inspector-actions {
    display: flex;
    gap: 8px;
}

.inspector-error {
    border: 1px solid #7b2f3b;
    background: #2a1419;
    color: #ffb7c2;
    border-radius: 8px;
    padding: 8px;
    font-size: 0.82em;
}

.inspector-btn {
    background: #1a2030;
    color: #e6e8eb;
    border: 1px solid #2a3140;
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
}