/* ============================================================================
   components.css — Biblioteca de componentes del Design System (Gundambay)
   ----------------------------------------------------------------------------
   Componentes reusables construidos SOLO sobre los alias semánticos de
   tokens.css (--brand/--surface/--text/--border…), nunca hex ni --surface-900
   crudo. Las páginas componen con estos; no escriben CSS nuevo salvo lo único
   e irreductible. Ver documents/designs/Design-System.md §5/§6.

   Se carga DESPUÉS de style.css para que el DS gane sobre lo legacy, pero estos
   componentes usan nombres que NO colisionan con clases legacy (.btn--*, .badge,
   .empty, .carousel, .section-head). Los componentes que sí colisionan y están
   enredados con el cascade dark-mode legacy (.card, .deck-card) se canonizan al
   migrar las páginas de cartas (Public Decks / Explore Cards), por la regla de
   convergencia del DS. Mientras tanto NO se redefinen acá.
============================================================================ */

/* HTML spec: [hidden] must always be display:none regardless of author CSS.
   Author display rules (flex/grid/block) beat the user-agent [hidden] rule,
   so we protect it here with !important. */
[hidden] { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════
   BOTONES — DS §5.1. 6 variantes + modificadores de tamaño.
   Base agrupada en los modificadores (no se redefine el .btn legacy, para no
   clobberear los ~81 botones viejos durante la migración). Uso: class="btn--primary".
══════════════════════════════════════════════════════════════════════════ */
.btn--primary,
.btn--secondary,
.btn--ghost,
.btn--danger,
.btn--buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast),
                background var(--transition-fast), border-color var(--transition-fast);
}
.btn--primary:focus-visible,
.btn--secondary:focus-visible,
.btn--ghost:focus-visible,
.btn--danger:focus-visible,
.btn--buy:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.btn--primary:disabled,
.btn--secondary:disabled,
.btn--ghost:disabled,
.btn--danger:disabled,
.btn--buy:disabled,
.btn--primary[aria-disabled="true"],
.btn--secondary[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
/* Íconos Material dentro de botones */
.btn--primary .material-symbols-outlined,
.btn--secondary .material-symbols-outlined,
.btn--ghost .material-symbols-outlined,
.btn--danger .material-symbols-outlined,
.btn--buy .material-symbols-outlined {
    font-size: 1.25em;
    line-height: 1;
}

/* Primario — gradiente púrpura de marca */
.btn--primary {
    background: var(--brand-gradient);
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Secundario — superficie + borde */
.btn--secondary {
    background: var(--surface-elevated);
    color: var(--text);
    border-color: var(--border);
}
.btn--secondary:hover {
    background: var(--surface);
    border-color: var(--border-strong);
}

/* Ghost — terciario, transparente */
.btn--ghost {
    background: transparent;
    color: var(--text-muted);
}
.btn--ghost:hover {
    background: var(--brand-soft);
    color: var(--text);
}

/* Danger — destructivas */
.btn--danger {
    background: var(--color-danger);
    color: var(--color-white);
}
.btn--danger:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Buy — TCGPlayer (DS §6). Púrpura + carrito. Acción primaria de compra. */
.btn--buy {
    background: var(--brand-gradient);
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
}
.btn--buy:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Modificadores de tamaño */
.btn--sm    { padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); }
.btn--lg    { padding: var(--space-4) var(--space-8); font-size: var(--font-size-lg); }
.btn--block { width: 100%; }
.btn--icon  { padding: var(--space-3); aspect-ratio: 1; }
.btn--icon.btn--sm { padding: var(--space-2); }

/* ════════════════════════════════════════════════════════════════════════
   BADGE / TAG / PILL — DS §5.5
══════════════════════════════════════════════════════════════════════════ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.15em 0.6em;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--brand-soft);
    color: var(--text);
}
.badge--brand   { background: var(--brand-soft);          color: #b9c4f5; }
.badge--success { background: var(--color-success-soft);  color: var(--green-300); }
.badge--danger  { background: var(--color-danger-soft);   color: var(--red-300); }
.badge--warning { background: var(--color-warning-soft);  color: var(--amber-300); }
.badge--info    { background: var(--color-info-soft);     color: var(--blue-300); }
.badge--lock    { background: var(--brand-soft);          color: #b9c4f5; }

/* Tag neutro (tipos/sets de carta) */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 0.1em 0.55em;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    background: var(--surface-elevated);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* ════════════════════════════════════════════════════════════════════════
   SECTION HEAD — encabezado de sección con CTA "ver todo".
   (Nombre .section-head para no colisionar con .section-header legacy.)
══════════════════════════════════════════════════════════════════════════ */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.section-head__title {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text);
    line-height: var(--line-tight);
}
.section-head__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    white-space: nowrap;
}
.section-head__link:hover { text-decoration: underline; }
.section-head__link .material-symbols-outlined { font-size: 1.1em; }

/* ════════════════════════════════════════════════════════════════════════
   PAGE HEADER — DS §5.12 Tier 1. El "primer bloque" de TODA página
   funcional/listado: título + count + sub + acciones. Los filtros NO viven
   acá (van en una barra aparte debajo). Reemplaza explore-cards__head,
   explore-decks__head, decks-header, admin-home-header, home-welcome.
══════════════════════════════════════════════════════════════════════════ */
.page-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
}
@media (min-width: 768px) {
    .page-header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--space-4);
    }
}
.page-header__main { min-width: 0; }
.page-header__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    font-weight: 700;
    line-height: var(--line-tight);
    color: var(--text);
}
.page-header__count,
.page-header__sub {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin: var(--space-1) 0 0;
}
.page-header__count {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Fila contextual de regreso (entrada scopeada, ej. Meta → Public Decks). Va ANTES del header. */
.page-header__scope {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}
.page-header__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-muted);
    text-decoration: none;
}
.page-header__back:hover { color: var(--text); }
.page-header__back:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.page-header__scope-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--brand-soft);
    color: var(--text);
    font-weight: 600;
}
.page-header__scope-chip a {
    display: inline-flex;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-full);
}
.page-header__scope-chip a:hover { color: var(--text); }
.page-header__scope-chip a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ════════════════════════════════════════════════════════════════════════
   PAGE HERO — DS §5.12 Tier 2. SOLO superficies de marketing/editorial
   (home anónimo, News list). Gradiente de marca + glow. NINGUNA página
   funcional lo usa — esas van con .page-header.
══════════════════════════════════════════════════════════════════════════ */
.page-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    background: var(--brand-gradient);
    color: var(--color-white);
    border: 1px solid var(--brand-ring);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    box-shadow: var(--shadow-xl);
    margin-bottom: var(--space-6);
}
@media (min-width: 768px) {
    .page-hero {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-12) var(--space-10);
    }
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 80% 50%, var(--brand-soft) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 10% 20%, var(--brand-soft) 0%, transparent 60%);
    pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: var(--line-tight);
}
@media (min-width: 768px) {
    .page-hero__title { font-size: var(--font-size-4xl); }
}
.page-hero__sub {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.8);
    margin: var(--space-1) 0 0;
}
.page-hero__actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}
/* Botones ghost sobre fondo de marca (oscuro): legibles sin perder la jerarquía. */
.page-hero__actions .btn--ghost {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.page-hero__actions .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
}

/* ════════════════════════════════════════════════════════════════════════
   EMPTY STATE — DS §5.8. Cada vacío propone el siguiente paso.
══════════════════════════════════════════════════════════════════════════ */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-10) var(--space-6);
    color: var(--text-muted);
}
.empty__icon {
    font-size: 3rem;
    color: var(--text-faint);
}
.empty__title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text);
}
.empty__text { max-width: 40ch; }

/* ════════════════════════════════════════════════════════════════════════
   DECK CARD — DS §10. Jerarquía clara, 1 acción primaria. Reemplaza a la
   legacy .deck-card/.dc-* (dc-cards.css) a medida que las páginas migran;
   se introduce con nombre .deckcard para no romper Public Decks (aún legacy).
══════════════════════════════════════════════════════════════════════════ */
.deckcard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--dc-accent, var(--brand));
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    gap: var(--space-3);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast),
                border-color var(--transition-fast);
}
.deckcard:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
/* Primario: nombre del mazo */
.deckcard__name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text);
    line-height: var(--line-tight);
}
/* Secundario: autor + colores + arquetipo */
.deckcard__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}
.deckcard__author { color: var(--text-muted); text-decoration: none; }
.deckcard__author:hover { color: var(--text); text-decoration: underline; }
.deckcard__dots { display: inline-flex; gap: 3px; }
.deckcard__dot {
    width: 9px; height: 9px;
    border-radius: var(--radius-full);
    display: inline-block;
}
.deckcard__arch {
    padding: 0.05em 0.5em;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    background: var(--dc-accent, var(--brand));
    color: var(--color-white);
    opacity: 0.92;
}
/* Footer: chips terciarios + 1 acción primaria */
.deckcard__footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2); margin-top: auto;
}
.deckcard__chips { display: inline-flex; gap: var(--space-3); }
.deckcard__chip {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: var(--font-size-xs); color: var(--text-muted);
}
.deckcard__chip .material-symbols-outlined { font-size: 1.1em; }
/* Validity chip (esquina) */
.deckcard__validity {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: var(--font-size-xs); font-weight: 600;
    padding: 0.1em 0.5em; border-radius: var(--radius-full);
}
.deckcard__validity .material-symbols-outlined { font-size: 1.1em; }
.deckcard__validity.is-valid   { background: var(--color-success-soft); color: var(--green-300); }
.deckcard__validity.is-invalid { background: var(--color-warning-soft); color: var(--amber-300); }

/* ════════════════════════════════════════════════════════════════════════
   ADS — colapsar el slot cuando AdSense NO llena, para no dejar un hueco
   reservado vacío (visible en dev y en prod sin fill). !important justificado:
   AdSense inyecta `display:block` inline y solo se vence con !important.
══════════════════════════════════════════════════════════════════════════ */
ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   ARCHETYPE CARD — tarjeta de arquetipo del meta (home + página Meta #02).
   Construida desde cero sobre tokens (reemplaza la legacy .meta-snap-*).
══════════════════════════════════════════════════════════════════════════ */
.archetype-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--arch-accent, var(--brand));
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast),
                border-color var(--transition-fast);
}
.archetype-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.archetype-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.archetype-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.archetype-card__rank {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--arch-accent, var(--brand));
}
.archetype-card__fan {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 96px;
    margin: var(--space-1) 0;
}
.archetype-card__fan img {
    width: 64px;
    height: 90px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.archetype-card__fan img:nth-child(1) { transform: rotate(-7deg) translateX(14px); z-index: 1; }
.archetype-card__fan img:nth-child(2) { transform: translateY(-6px); z-index: 3; }
.archetype-card__fan img:nth-child(3) { transform: rotate(7deg) translateX(-14px); z-index: 2; }
.archetype-card__name {
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: var(--line-tight);
    text-align: center;
}
.archetype-card__share { display: flex; flex-direction: column; gap: var(--space-1); margin-top: auto; }
.archetype-card__share-meta {
    display: flex; justify-content: space-between;
    font-size: var(--font-size-xs); color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.archetype-card__bar {
    height: 6px; border-radius: var(--radius-full);
    background: var(--surface-sunken); overflow: hidden;
}
.archetype-card__bar-fill {
    height: 100%; width: 0; border-radius: var(--radius-full);
    background: var(--arch-accent, var(--brand));
    transition: width var(--transition-slow);
}
/* ════════════════════════════════════════════════════════════════════════
   CARD TILE — celda de carta (imagen + nombre + rareza). Home What's New y
   grids de cartas. Token-based, reemplaza la legacy .card-item/.card-overlay.
══════════════════════════════════════════════════════════════════════════ */
.card-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--text);
}
.card-tile__img {
    position: relative;
    aspect-ratio: var(--card-aspect);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-elevated);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.card-tile:hover .card-tile__img {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.card-tile:focus-visible .card-tile__img { outline: none; box-shadow: var(--focus-ring); }
.card-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-tile__badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 1;
}
.card-tile__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    color: var(--color-white);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.card-tile:hover .card-tile__overlay { opacity: 1; }
.card-tile__overlay .material-symbols-outlined { font-size: 2rem; }
.card-tile__name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: var(--line-tight);
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (min-width: 768px)  { .card-tile-grid { grid-template-columns: repeat(6, 1fr); } }

.archetype-grid { display: grid; gap: var(--space-4); }
@media (min-width: 768px)  { .archetype-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .archetype-grid { grid-template-columns: repeat(4, 1fr); } }

/* ════════════════════════════════════════════════════════════════════════
   FILTER CHIP — DS §5.6. Toggle de filtro (color/cost/tipo). Activo = brand.
══════════════════════════════════════════════════════════════════════════ */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast);
    flex-shrink: 0;
    min-height: 44px;
    text-decoration: none;
}
.filter-chip:hover,
.filter-chip.is-active,
.filter-chip:has(input:checked) {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand);
}
.filter-chip:focus-visible,
.filter-chip:focus-within {
    outline: none;
    box-shadow: var(--focus-ring);
}
/* Variante <label> que envuelve un radio/checkbox nativo (filtros en formulario). */
.filter-chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.filter-chip__dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* ════════════════════════════════════════════════════════════════════════
   PROGRESS — DS §5.11. Barra de progreso: track + fill + label %.
   Usado en Binder (set completion) y Meta (% de inclusión de carta).
══════════════════════════════════════════════════════════════════════════ */
.progress {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.progress__track {
    flex: 1;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    overflow: hidden;
}
.progress__fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--brand);
    transition: width var(--transition-slow);
}
.progress__label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 3ch;
    text-align: right;
}

/* ════════════════════════════════════════════════════════════════════════
   COLOR GROUP HEADER — cabecera de sección por color combination (Meta #02).
══════════════════════════════════════════════════════════════════════════ */
.color-group-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-5);
}
.color-group-header__dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}
.color-group-header__name {
    font-size: var(--font-size-base);
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text);
    text-transform: uppercase;
}
.color-group-header__meta {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-left: auto;
}

/* ════════════════════════════════════════════════════════════════════════
   SIGNAL / TREND — DS §5.10. Colorblind-safe: flecha + texto, no solo color.
══════════════════════════════════════════════════════════════════════════ */
.signal {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--font-size-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.signal .material-symbols-outlined { font-size: 1.1em; }
.signal--up   { color: var(--chart-up); }
.signal--down { color: var(--chart-down); }
.signal--flat { color: var(--chart-flat); }

/* ════════════════════════════════════════════════════════════════════════
   CAROUSEL — patrón mobile scroll-snap horizontal (DS §6 / wireframes).
   Reusable: en ≥768px se comporta como fila normal; en mobile, scroll-snap.
══════════════════════════════════════════════════════════════════════════ */
.carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(78%, 1fr);
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-2);
    scrollbar-width: thin;
}
.carousel > * { scroll-snap-align: start; }

@media (min-width: 768px) {
    .carousel {
        grid-auto-flow: row;
        grid-template-columns: repeat(var(--carousel-cols, 3), 1fr);
        grid-auto-columns: auto;
        overflow: visible;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   STAT CARD — DS §5.11. número + label. Usado en Simulator, Community,
   Profiles. NO clickeable salvo .card--interactive explícito.
══════════════════════════════════════════════════════════════════════════ */
.stat-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.stat-card__label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.stat-card__value {
    font-size: var(--font-size-3xl);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.stat-card__detail {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}
/* Row variant: stats inline en carta (AP/HP/Level — §5.11) */
.stat-card--row {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}
.stat-card--row .stat-card__value { font-size: var(--font-size-xl); }

/* ════════════════════════════════════════════════════════════════════════
   PANEL — DS §5.3. card especializada para análisis / acordeón / gating.
══════════════════════════════════════════════════════════════════════════ */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* summary actúa como .panel__header cuando .panel es un <details> */
.panel > summary,
.panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary:focus-visible,
.panel__header:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.panel__chevron {
    font-size: 1.25em;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}
details.panel[open] .panel__chevron { transform: rotate(180deg); }

.panel__body {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
}

/* Locked panel — gating Patreon (§5.3) */
.panel--locked {
    position: relative;
}
.panel--locked .panel__body {
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
    opacity: 0.55;
}
.panel__lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-6);
    text-align: center;
    background: rgba(15,23,42,0.72);
    backdrop-filter: blur(2px);
}
.panel__lock-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.2em 0.7em;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--brand-soft);
    color: var(--brand);
}
.panel__lock-badge .material-symbols-outlined { font-size: 1em; }
.panel__lock-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text);
    line-height: var(--line-tight);
}
.panel__lock-text {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    max-width: 36ch;
}

/* ════════════════════════════════════════════════════════════════════════
   INPUT / SELECT — DS §5.6. Base de inputs y selects del sistema.
══════════════════════════════════════════════════════════════════════════ */
.field {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: 1.4;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    min-height: 44px;
}
.field::placeholder { color: var(--text-faint); }
.field:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}
.field:disabled { opacity: 0.5; cursor: not-allowed; }

/* Label de campo (filtros, formularios) */
.field-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

/* Search — field + ícono lupa (DS §5.6). Unifica buscadores cards/decks/binder. */
.search { position: relative; display: flex; align-items: center; }
.search .material-symbols-outlined {
    position: absolute;
    left: var(--space-3);
    color: var(--text-faint);
    font-size: 1.25rem;
    pointer-events: none;
}
.search .field { padding-left: calc(var(--space-3) * 2 + 1.25rem); }

/* ════════════════════════════════════════════════════════════════════════
   PAGINATION — DS §5.11. Una sola implementación (reemplaza las 6 ad-hoc).
══════════════════════════════════════════════════════════════════════════ */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-8);
}
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    border: 1px solid var(--border);
    background: var(--surface);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.pagination a:hover {
    background: var(--surface-elevated);
    color: var(--text);
    border-color: var(--brand);
}
.pagination a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pagination .current {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--text);
}
.pagination .ellipsis {
    border: none;
    background: none;
    min-width: auto;
    color: var(--text-faint);
}

/* ════════════════════════════════════════════════════════════════════════
   SKELETON — DS §5.9. Shimmer placeholder para async ops.
══════════════════════════════════════════════════════════════════════════ */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--surface) 0%,
        var(--surface-elevated) 50%,
        var(--surface) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease infinite;
    border-radius: var(--radius-md);
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}
.skeleton--text  { height: 1em; }
.skeleton--title { height: 1.5em; border-radius: var(--radius-sm); }
.skeleton--card  { height: 96px; border-radius: var(--radius-lg); }

/* ════════════════════════════════════════════════════════════════════════
   SPINNER — DS §5.9. Indicador circular para operaciones async puntuales.
══════════════════════════════════════════════════════════════════════════ */
.spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border);
    border-top-color: var(--brand);
    border-radius: var(--radius-full);
    animation: spin 0.9s linear infinite;
    flex-shrink: 0;
    user-select: none;
}
.spinner--sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}
.spinner--md {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 3px;
}

/* ════════════════════════════════════════════════════════════════════════
   TABS — DS §5.4. Borde inferior, activo = púrpura. Touch ≥44px.
   Usado en deck view (mobile), sub-tabs de Battle Lab, etc.
══════════════════════════════════════════════════════════════════════════ */
.tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--border);
}
.tab {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: var(--space-3) var(--space-4);
    min-height: 44px;
    flex: 1 1 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tab:hover { color: var(--text); }
.tab.is-active {
    color: var(--brand);
    border-bottom-color: var(--brand);
}
.tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ════════════════════════════════════════════════════════════════════════
   GAME CARD — DS §5 / wireframe #06. EL componente de carta de juego que
   consolida unified-cards + unified-card-styles + dc-cards. Es la grilla de
   Explore Cards (que lo estresa más) y se reusa en binder/picker al migrar.
══════════════════════════════════════════════════════════════════════════ */
.game-card {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.game-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brand);
}
.game-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Media: arte de la carta en aspecto retrato Gundam (63×88mm). */
.game-card__media {
    position: relative;
    aspect-ratio: 63 / 88;
    background: var(--surface-sunken);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
}
.game-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Overlay inferior: nombre + meta + acciones (siempre visible, gradiente). */
.game-card__overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: var(--space-5) var(--space-3) var(--space-3);
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 55%, transparent 100%);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.game-card__name {
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-white);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.game-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}
.game-card__set {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.75);
}
.game-card__actions { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
.game-card__actions .btn--primary,
.game-card__actions .btn--secondary { flex: 1; padding: var(--space-2); font-size: var(--font-size-xs); }

/* Botones de variante (top-right, generados por JS). */
.game-card__variants {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    z-index: 2;
}
.variant-button {
    min-width: 26px;
    min-height: 26px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.6);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.variant-button:hover { background: rgba(0, 0, 0, 0.85); }
.variant-button.active { background: var(--brand); border-color: var(--brand); }
.variant-button.plus-variant { border-color: var(--amber-400); }
.variant-button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Badge de cantidad poseída (top-left). owned = verde, mismatch = ámbar. */
.game-card__qty {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 2;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-white);
    background: var(--neutral-600);
}
.game-card__qty.owned    { background: var(--color-success); }
.game-card__qty.mismatch { background: var(--color-warning); color: var(--surface-950); }

/* Grilla de game-cards: auto-fill responsive. */
.game-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}
@media (min-width: 480px) { .game-card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .game-card-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .game-card-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1280px) { .game-card-grid { grid-template-columns: repeat(6, 1fr); } }

/* ════════════════════════════════════════════════════════════════════════
   MODAL + CARD PICKER — DS §5.7 / wireframes #15 (Deck Picker) + #16 (Modals).
   Componente compartido: el modal genérico y el picker de deck/binder que vive
   en templates/components/_card_picker.html (JS en static/js/card-picker.js).
   Reemplaza los modales inline duplicados en cards/scanner/card_detail/binders.
══════════════════════════════════════════════════════════════════════════ */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 2100);
    background: rgba(0, 0, 0, 0.6);
    padding: var(--space-4);
    overflow-y: auto;
}
.modal.is-open { display: block; }
.modal-content {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: min(560px, 100%);
    margin: var(--space-10) auto;
    padding: var(--space-5);
}
/* Modal anclado a un botón (usado por el JS legacy de add-to-collection). */
.modal--anchored .modal-content {
    margin: 0;
    position: absolute;
    top: var(--anchor-top, 20%);
    left: var(--anchor-left, 50%);
    transform: translate(-50%, -100%);
    width: min(420px, calc(100vw - var(--space-8)));
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}
.modal-title { margin: 0; font-size: var(--font-size-lg); font-weight: 700; color: var(--text); }
.modal .close {
    appearance: none;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
}
.modal .close:hover { color: var(--text); }
.modal .close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.modal-body { display: flex; flex-direction: column; gap: var(--space-4); }
.modal-body > label,
.binder-selection > label,
.quantity-selection > label,
.variety-filter-selection > label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* Toggle Deck / Binder del picker. */
.picker-tabs {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.picker-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.picker-tab.is-active { background: var(--brand); color: var(--color-white); }
.picker-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.picker-tab .material-symbols-outlined { font-size: 1.2em; }
.variety-filter-selection[hidden] { display: none; }

/* Lista de binders/decks dentro del modal. */
.binder-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 260px;
    overflow-y: auto;
}
.binder-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    text-align: left;
    font: inherit;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--text);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.binder-option:hover { border-color: var(--brand); }
.binder-option.selected { border-color: var(--brand); background: var(--brand-soft); }
.binder-option:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.binder-color { width: 18px; height: 18px; border-radius: var(--radius-full); flex-shrink: 0; }
.binder-info { display: flex; flex-direction: column; min-width: 0; }
.binder-name { font-weight: 600; color: var(--text); }
.binder-collection { font-size: var(--font-size-xs); color: var(--text-muted); }

.quantity-input { width: 100%; }

/* Variety filter (base / + / ++). */
.variety-filter-buttons { display: flex; gap: var(--space-2); }
.variety-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: var(--font-size-sm);
    cursor: pointer;
    min-height: 44px;
}
.variety-filter-btn.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.variety-filter-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.variety-circle { width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--neutral-500); }
.variety-circle.plus { background: var(--amber-400); }
.variety-circle.plus-plus { background: var(--color-warning); }

/* Estados dentro del modal. */
.loading, .no-binders-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6);
    text-align: center;
    color: var(--text-muted);
}
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

body.modal-open { overflow: hidden; }

/* ════════════════════════════════════════════════════════════════════════
   PROSE — DS §5.12. Cuerpo de lectura de artículos (News, FAQ, Terms…).
   Máx. 70ch para legibilidad óptima. Reusable con class="prose".
══════════════════════════════════════════════════════════════════════════ */
.prose {
    max-width: 70ch;
    margin-inline: auto;
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--text);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Paragraph rhythm */
.prose p { margin: 0 0 var(--space-6); }
.prose p:last-child { margin-bottom: 0; }

/* Lists */
.prose ul,
.prose ol { margin: 0 0 var(--space-6); padding-left: var(--space-8); }
.prose li { margin-bottom: var(--space-2); }
.prose li:last-child { margin-bottom: 0; }

/* Headings */
.prose h2,
.prose h3,
.prose h4 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text);
    line-height: var(--line-tight);
    margin: var(--space-10) 0 var(--space-4);
}
.prose h2 { font-size: var(--font-size-2xl); }
.prose h3 { font-size: var(--font-size-xl); }
.prose h4 { font-size: var(--font-size-lg); }

/* Blockquote */
.prose blockquote {
    border-left: 4px solid var(--brand);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-6) 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--brand-soft);
    font-style: italic;
    color: var(--text-muted);
}
.prose blockquote p { margin-bottom: 0; }

/* Inline code */
.prose code {
    background: var(--surface-elevated);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm);
    font-size: 0.88em;
    color: var(--brand);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

/* Code blocks */
.prose pre {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin: var(--space-6) 0;
    overflow-x: auto;
}
.prose pre code {
    background: none;
    padding: 0;
    color: var(--text);
    font-size: var(--font-size-sm);
}

/* Images */
.prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--space-6) 0;
    display: block;
    border: 1px solid var(--border);
}

/* Links */
.prose a {
    color: var(--brand);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-fast);
}
.prose a:hover { border-bottom-color: var(--brand); }

/* Horizontal rule */
.prose hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--space-10) 0;
}

/* Strong / em */
.prose strong { color: var(--text); font-weight: 700; }
.prose em { font-style: italic; }

/* ════════════════════════════════════════════════════════════════════════
   MENU — DS §5.11. Popover posicionable: dropdown nav, ⋯ binder/deck,
   context-menu de carta. Un solo componente. Se ancla vía .menu-wrap.
════════════════════════════════════════════════════════════════════════ */
.menu-wrap {
    position: relative;
    display: inline-flex;
}
.menu {
    position: absolute;
    z-index: var(--z-dropdown);
    top: calc(100% + var(--space-1));
    right: 0;
    min-width: 180px;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-1) 0;
    display: none;
}
.menu.is-open { display: block; }
.menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-4);
    background: none;
    border: none;
    font: inherit;
    font-size: var(--font-size-sm);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    min-height: 44px;
    transition: background var(--transition-fast);
}
.menu__item:hover { background: var(--brand-soft); }
.menu__item:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.menu__item--danger { color: var(--color-danger); }
.menu__item--danger:hover { background: rgba(239,68,68,0.12); }
.menu__item[disabled],
.menu__item[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.menu__sep { height: 1px; background: var(--border); margin: var(--space-1) 0; }
.menu__item .material-symbols-outlined { font-size: 1.1em; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════════
   FAB — DS §5.11. Botón flotante de acción primaria, solo en mobile.
════════════════════════════════════════════════════════════════════════ */
.fab {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-5);
    z-index: var(--z-sticky);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--brand-gradient);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-full);
    font: inherit;
    font-weight: 600;
    font-size: var(--font-size-sm);
    box-shadow: 0 4px 16px var(--brand-ring);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    text-decoration: none;
}
.fab:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--brand-ring); }
.fab:focus-visible { outline: none; box-shadow: 0 4px 16px var(--brand-ring), var(--focus-ring); }
.fab .material-symbols-outlined { font-size: 1.2em; }
@media (min-width: 768px) { .fab { display: none; } }

/* ════════════════════════════════════════════════════════════════════════
   MODAL--CONFIRM — DS §5.7. Diálogo de confirmación destructivo.
   Extiende .modal; content más estrecho.
════════════════════════════════════════════════════════════════════════ */
.modal--confirm .modal-content {
    width: min(420px, 95vw);
}
.modal--confirm .modal-body p {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin: 0;
}