.catalog-panel { display: flex; flex-direction: column; height: 100%; }
.catalog-panel [role="tabpanel"][hidden] { display: none; }
.catalog-panel__tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); flex: 0 0 auto; border-bottom: 1px solid var(--color-border); }
.catalog-panel__tabs button { min-width: 0; min-height: 52px; padding: 12px 4px; border: 0; background: var(--color-heading); color: var(--color-surface); font-size: 12px; font-weight: 700; cursor: pointer; }
.catalog-panel__tabs button[aria-selected="true"] { background: var(--color-accent); color: var(--color-heading); }
.catalog-panel__tabs button:hover { background: var(--color-accent-hover); color: var(--color-heading); }
.catalog-panel__panels { flex: 1; min-height: 0; min-width: 0; }
.catalog-panel__panels > [role="tabpanel"] { height: 100%; }
.catalog-panel__scroll { min-width: 0; min-height: 0; height: 100%; overflow-y: auto; padding: 16px 12px 32px; container-type: inline-size; }
.catalog-panel__interior { display: flex; flex-direction: column; }
.catalog-panel__subpanels { flex: 1; min-width: 0; min-height: 0; }
.catalog-panel__nav { display: flex; flex: 0 0 auto; overflow-x: auto; padding: 8px 12px; }
.catalog-panel__nav button { display: flex; align-items: center; flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: var(--color-heading); color: var(--color-surface); cursor: pointer; }
.catalog-panel__nav button[aria-selected="true"] { background: var(--color-accent); color: var(--color-heading); }
.catalog-panel__nav button:hover { background: var(--color-accent-hover); color: var(--color-heading); }
.catalog-panel__tabs button:focus-visible, .catalog-panel__nav button:focus-visible { outline-offset: -3px; }
.catalog-panel__heading { margin: 24px 0 12px; font-size: 14px; color: var(--color-heading); }
.catalog-panel__scroll > section:first-child > .catalog-panel__heading { margin-top: 4px; }
.catalog-panel__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
.catalog-card { display: flex; flex-direction: column; width: 100%; min-width: 0; padding: 0; text-align: left; background: var(--color-surface); border: 1px solid var(--color-border); cursor: grab; touch-action: pan-y; user-select: none; -webkit-touch-callout: none; }
.catalog-card[data-catalog-ref="PARTITION"] { cursor: pointer; }
.catalog-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; pointer-events: none; }
.catalog-card__name { display: block; width: 100%; padding: 10px; border-top: 2px solid var(--color-accent); font-size: 12px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.catalog-card__note { display: block; padding: 0 10px 10px; font-size: 11px; line-height: 1.4; color: var(--color-text); }
.catalog-card:hover:enabled { border-color: var(--color-heading); }
.catalog-card:disabled { cursor: default; }
.catalog-card:disabled:not([data-informational-ref]) { opacity: .5; }
.catalog-card[data-informational-ref] .catalog-card__name { border-top-color: var(--color-border); }
.catalog-card.is-dragging { cursor: grabbing; }
.catalog-drag-image { position: fixed; z-index: 10; width: 100px; height: 65px; object-fit: contain; pointer-events: none; opacity: .8; border: 1px solid var(--color-border); background: var(--color-surface); }
@container (min-width: 260px) { .catalog-panel__grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }

@media (max-width: 800px) { .catalog-panel__tabs button { font-size: 11px; padding-inline: 2px; } }

.catalog-panel__nav button > .ui-icon { flex: 0 0 20px; margin-inline: 12px; }
.catalog-panel__tab-name { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font-size: 12px; font-weight: 700; transition: max-width 220ms ease, opacity 160ms ease, padding-right 220ms ease; }
.catalog-panel__nav button[aria-selected="true"] .catalog-panel__tab-name { max-width: 110px; padding-right: 12px; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .catalog-panel__tab-name { transition: none; } }

/* Indicador cenital: la misma pieza se puede colocar en cualquiera de los dos ejes. */
.catalog-card[data-orientation] { position: relative; }
.catalog-card[data-orientation]::after { content: ''; position: absolute; top: 12px; right: 12px; width: 4px; height: 24px; background: var(--color-heading); border: 1px solid var(--color-surface); pointer-events: none; }
.catalog-card[data-orientation="longitudinal"]::after { width: 24px; height: 4px; top: 22px; }