/*
 * UiMetadata.Elements — Selector de tema (_ThemePicker.cshtml)
 *
 * Las miniaturas se pintan con --tp-* (bg, bg-color, surface, sidebar, text, muted, accent,
 * accent-soft, positive, negative, border), que theme-picker.js copia de las variables REALES
 * del CSS de cada tema sobre la tarjeta. Cada regla lleva un fallback neutro: mientras el CSS
 * del tema se descarga (o si falla), la miniatura es un esqueleto gris, no una caja rota.
 * El resto del componente usa los tokens --grid-* de la página actual, con fallback literal.
 */

.theme-picker { display: grid; gap: 1rem; }

.theme-picker-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap                  : 1rem;
}

/* ── Tarjeta ───────────────────────────────────────────────────────────── */
.theme-card {
    position      : relative;
    display       : grid;
    gap           : .85rem;
    padding       : .7rem .7rem .9rem;
    text-align    : left;
    font          : inherit;
    color         : var(--grid-text-main, #111827);
    background    : var(--grid-input-bg, #ffffff);
    border        : 1.5px solid var(--grid-border-input, #d1d5db);
    border-radius : var(--grid-radius-lg, 14px);
    cursor        : pointer;
    transition    : transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.theme-card:hover {
    transform   : translateY(-3px);
    border-color: var(--tp-accent, var(--grid-input-border-focus, #2563eb));
    box-shadow  : 0 10px 24px rgba(0, 0, 0, .18);
}

.theme-card:focus-visible {
    outline       : 2px solid var(--tp-accent, var(--grid-input-border-focus, #2563eb));
    outline-offset: 3px;
}

.theme-card.is-selected {
    border-color: var(--tp-accent, var(--grid-input-border-focus, #2563eb));
    box-shadow  : 0 0 0 3px color-mix(in srgb, var(--tp-accent, #2563eb) 32%, transparent),
                  0 10px 24px rgba(0, 0, 0, .16);
}

/* ── Miniatura de la app ───────────────────────────────────────────────── */
.theme-preview {
    display              : grid;
    grid-template-columns: 22% 1fr;
    aspect-ratio         : 16 / 10;
    overflow             : hidden;
    border-radius        : 9px;
    border               : 1px solid var(--tp-border, rgba(127, 127, 127, .25));
    background           : var(--tp-bg-color, #e5e7eb);
    background           : var(--tp-bg, var(--tp-bg-color, #e5e7eb));
}

.theme-preview i { display: block; border-radius: 999px; }

.tp-sidebar {
    display       : flex;
    flex-direction: column;
    gap           : 6px;
    padding       : 8px 6px;
    background    : var(--tp-sidebar, rgba(127, 127, 127, .18));
    border-right  : 1px solid var(--tp-border, rgba(127, 127, 127, .25));
}

.tp-logo        { width: 14px; height: 14px; margin-bottom: 4px; border-radius: 5px !important;
                  background: var(--tp-accent, #9ca3af); }
.tp-nav         { height: 5px; background: var(--tp-muted, #9ca3af); opacity: .55; }
.tp-nav-active  { background: var(--tp-accent, #6b7280); opacity: 1; }

.tp-main {
    display       : flex;
    flex-direction: column;
    gap           : 7px;
    padding       : 8px;
    min-width     : 0;
}

.tp-topbar { display: flex; align-items: center; justify-content: space-between; }
.tp-title  { width: 38%; height: 6px; background: var(--tp-text, #6b7280); }
.tp-pill   { width: 16%; height: 8px; background: var(--tp-accent-soft, var(--tp-accent, #9ca3af)); }

.tp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.tp-card {
    display       : flex;
    flex-direction: column;
    gap           : 4px;
    padding       : 6px;
    background    : var(--tp-surface, rgba(127, 127, 127, .16));
    border        : 1px solid var(--tp-border, rgba(127, 127, 127, .25));
    border-radius : 6px;
}

.tp-line  { width: 45%; height: 3px; background: var(--tp-muted, #9ca3af); }
.tp-value { width: 70%; height: 6px; background: var(--tp-text, #6b7280); }
.tp-chip  { width: 32%; height: 4px; }
.tp-chip-pos { background: var(--tp-positive, #9ca3af); }
.tp-chip-neg { background: var(--tp-negative, #9ca3af); }

.tp-chart {
    flex       : 1;
    display    : flex;
    align-items: flex-end;
    gap        : 4px;
    padding    : 6px;
    min-height : 0;
    background : var(--tp-surface, rgba(127, 127, 127, .16));
    border     : 1px solid var(--tp-border, rgba(127, 127, 127, .25));
    border-radius: 6px;
}

.tp-chart i {
    flex      : 1;
    height    : var(--h, 50%);
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--tp-accent-soft, var(--tp-accent, #9ca3af)), var(--tp-accent, #6b7280));
}

/* Esqueleto mientras se descarga el CSS del tema. */
.theme-card:not(.is-painted) .theme-preview {
    animation: theme-preview-pulse 1.4s ease-in-out infinite;
}

@keyframes theme-preview-pulse { 50% { opacity: .55; } }

/* ── Textos ────────────────────────────────────────────────────────────── */
.theme-card-meta {
    display              : grid;
    grid-template-columns: 1fr auto;
    align-items          : center;
    gap                  : .15rem .5rem;
    padding              : 0 .3rem;
}

.theme-card-name { font-weight: 600; font-size: 1rem; }

.theme-card-tag {
    padding      : .1rem .55rem;
    border       : 1px solid var(--grid-border-input, #d1d5db);
    border-radius: 999px;
    font-size    : .7rem;
    color        : var(--grid-text-muted, #6b7280);
}

.theme-card-desc {
    grid-column: 1 / -1;
    font-size  : .8rem;
    color      : var(--grid-text-muted, #6b7280);
}

/* Marca de selección */
.theme-card-check {
    position       : absolute;
    top            : 1.1rem;
    right          : 1.1rem;
    display        : grid;
    place-items    : center;
    width          : 26px;
    height         : 26px;
    border-radius  : 50%;
    color          : #ffffff;
    background     : var(--tp-accent, #2563eb);
    box-shadow     : 0 2px 8px rgba(0, 0, 0, .35);
    transform      : scale(.4);
    opacity        : 0;
    transition     : transform .2s ease, opacity .2s ease;
}

.theme-card-check svg { width: 16px; height: 16px; }

.theme-card.is-selected .theme-card-check { transform: scale(1); opacity: 1; }

/* ── Aviso de vista previa ─────────────────────────────────────────────── */
.theme-picker-hint {
    display      : flex;
    flex-wrap    : wrap;
    align-items  : center;
    gap          : .75rem;
    margin       : 0;
    padding      : .6rem .9rem;
    border       : 1px dashed var(--grid-border-input, #d1d5db);
    border-radius: var(--grid-radius-md, 8px);
    font-size    : .85rem;
    color        : var(--grid-text-muted, #6b7280);
}

.theme-picker-hint[hidden] { display: none; }

.theme-picker-undo {
    padding      : .25rem .8rem;
    font         : inherit;
    font-size    : .8rem;
    color        : var(--grid-text-main, #111827);
    background   : transparent;
    border       : 1px solid var(--grid-border-input, #d1d5db);
    border-radius: 999px;
    cursor       : pointer;
}

.theme-picker-undo:hover { border-color: var(--grid-input-border-focus, #2563eb); }

@media (prefers-reduced-motion: reduce) {
    .theme-card, .theme-card-check { transition: none; }
    .theme-card:hover { transform: none; }
    .theme-card:not(.is-painted) .theme-preview { animation: none; }
}

@media (max-width: 599px) {
    .theme-picker-grid { grid-template-columns: 1fr; }
}