/*
 * UiMetadata.Elements — Tabs (tira de pestañas + paneles)
 *
 * Self-contained, mismo criterio que elements.css: cada regla cae a un
 * literal si el token --grid-*/--color-* no está definido.
 */

.tabs-strip {
    display      : flex;
    gap          : 2px;
    border-bottom: 2px solid var(--grid-border, #e5e7eb);
    margin-bottom: var(--grid-gap-md, 1rem);
    overflow-x   : auto;
}

.tab-button {
    display        : inline-flex;
    align-items    : center;
    gap            : 6px;
    padding        : 0.6rem 1.1rem;
    border         : none;
    background     : transparent;
    color          : var(--grid-text-muted, #6b7280);
    font-size      : var(--grid-font-size-md, 0.92rem);
    font-weight    : 600;
    white-space    : nowrap;
    cursor         : pointer;
    border-radius  : var(--grid-radius-sm, 6px) var(--grid-radius-sm, 6px) 0 0;
    border-bottom  : 2px solid transparent;
    margin-bottom  : -2px;
    transition     : color .15s ease, border-color .15s ease, background-color .15s ease;
}

.tab-button:hover {
    color     : var(--grid-text-main, #111827);
    background: var(--grid-tab-hover-bg, rgba(0, 0, 0, .04));
}

.tab-button.active {
    color            : var(--color-primary, #2563eb);
    border-bottom-color: var(--color-primary, #2563eb);
}

/* SVG (ver UiIcons), no el emoji de antes — display:flex evita el hueco de
   line-height que deja un <svg> inline por defecto. */
.tab-icon { display: flex; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }