/* ==========================================================================
   POKESTATS ULTRA — DEX v4 (Pokédex + Ficha)
   Capa de diseño nueva. Se carga DESPUÉS de main.css y sólo afecta a:
   .dx (secciones Pokédex y Ficha), diálogos .dx-sheet / .dx-palette.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   Se declaran sobre <body> (no :root) porque los temas de main.css
   (theme-dark / forest / fire / light) redefinen --bg y --accent en <body>.
   -------------------------------------------------------------------------- */
body {
    /* Superficies: derivadas del fondo del tema activo */
    --dx-bg: var(--bg);
    --dx-surface-1: color-mix(in srgb, var(--bg) 93%, #fff);
    --dx-surface-2: color-mix(in srgb, var(--bg) 88%, #fff);
    --dx-surface-3: color-mix(in srgb, var(--bg) 82%, #fff);
    --dx-border: color-mix(in srgb, var(--bg) 80%, #fff);
    --dx-border-strong: color-mix(in srgb, var(--bg) 66%, #fff);

    /* Texto (AA sobre surface-1 en todos los temas oscuros) */
    --dx-text: #eef1f8;
    --dx-text-2: #b4bdd1;
    --dx-text-3: #8691aa;

    /* Acento */
    --dx-accent: var(--accent);
    --dx-accent-ink: #00161a;
    --dx-accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
    --dx-focus: var(--accent);

    /* Semánticos */
    --dx-good: #4ade80;
    --dx-bad: #f87171;
    --dx-warn: #fbbf24;
    --dx-info: #60a5fa;
    --dx-male: #60a5fa;
    --dx-female: #f472b6;

    /* Escala de stats por valor (rojo → cian) */
    --st-1: #ef4444;   /*   1–29  */
    --st-2: #f97316;   /*  30–59  */
    --st-3: #eab308;   /*  60–89  */
    --st-4: #84cc16;   /*  90–119 */
    --st-5: #22c55e;   /* 120–149 */
    --st-6: #06b6d4;   /* 150+    */

    /* Multiplicadores de daño */
    --eff-x4: #ef4444;
    --eff-x2: #f97316;
    --eff-x05: #22c55e;
    --eff-x025: #06b6d4;
    --eff-x0: #94a3b8;

    /* Categorías de movimiento */
    --cat-phys: #e8573f;
    --cat-spec: #5b7cfa;
    --cat-status: #98a2b6;

    /* Tipografía */
    --dx-font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --dx-font-mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, Consolas, monospace;
    --fs-xs: 0.75rem;   /* 12 */
    --fs-sm: 0.8125rem; /* 13 */
    --fs-md: 0.875rem;  /* 14 */
    --fs-base: 1rem;    /* 16 */
    --fs-lg: 1.125rem;  /* 18 */
    --fs-xl: 1.375rem;  /* 22 */
    --fs-2xl: 1.75rem;  /* 28 */
    --fs-3xl: 2.25rem;  /* 36 */

    /* Espaciado (base 4px) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* Radios, sombras, movimiento */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-pill: 999px;
    --sh-1: 0 1px 2px rgb(0 0 0 / .25);
    --sh-2: 0 6px 20px rgb(0 0 0 / .28);
    --sh-3: 0 18px 48px rgb(0 0 0 / .45);
    --dur-1: 120ms;
    --dur-2: 200ms;
    --dur-3: 320ms;
    --ease: cubic-bezier(.2, .8, .2, 1);

    /* Alturas de elementos fijos (para sticky encadenado) */
    --dx-topbar-h: 60px;
    --dx-tabs-h: 50px;

    /* Colores de tipo (oficiales) */
    --type-NORMAL: #A8A77A;
    --type-FIRE: #EE8130;
    --type-WATER: #6390F0;
    --type-ELECTRIC: #F7D02C;
    --type-GRASS: #7AC74C;
    --type-ICE: #96D9D6;
    --type-FIGHTING: #C22E28;
    --type-POISON: #A33EA1;
    --type-GROUND: #E2BF65;
    --type-FLYING: #A98FF3;
    --type-PSYCHIC: #F95587;
    --type-BUG: #A6B91A;
    --type-ROCK: #B6A136;
    --type-GHOST: #735797;
    --type-DRAGON: #6F35FC;
    --type-STEEL: #B7B7CE;
    --type-FAIRY: #D685AD;
    --type-DARK: #705746;
}

/* --------------------------------------------------------------------------
   2. BASE DEL ÁMBITO .dx
   -------------------------------------------------------------------------- */
.dx,
.dx-sheet,
.dx-palette {
    font-family: var(--dx-font);
    color: var(--dx-text);
    font-size: var(--fs-md);
    line-height: 1.5;
}

.dx :where(h1, h2, h3, h4, p, dl, dd, ul, ol, figure, fieldset) {
    margin: 0;
}

.dx :where(ul, ol) {
    padding: 0;
    list-style: none;
}

.dx fieldset {
    border: 0;
    padding: 0;
    min-width: 0;
}

.dx-num,
.dx :where(.num, td.num, th.num) {
    font-variant-numeric: tabular-nums;
}

.dx a {
    color: inherit;
}

/* Foco visible coherente en todo el ámbito */
.dx :focus-visible,
.dx-sheet :focus-visible,
.dx-palette :focus-visible {
    outline: 2px solid var(--dx-focus);
    outline-offset: 2px;
}

.dx-stack {
    display: grid;
    gap: var(--sp-4);
    min-width: 0;
}

.dx-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.dx-muted {
    color: var(--dx-text-3);
}

kbd.dx-kbd {
    font-family: var(--dx-font-mono);
    font-size: 0.6875rem;
    padding: 1px 6px;
    border-radius: var(--r-sm);
    border: 1px solid var(--dx-border-strong);
    border-bottom-width: 2px;
    color: var(--dx-text-2);
    background: var(--dx-surface-2);
    white-space: nowrap;
}

/* Sprites e iconos pixel art: nunca suavizados */
.dx-px,
.dx-pxicon,
.dx-sprite {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* --------------------------------------------------------------------------
   3. CONTROLES
   -------------------------------------------------------------------------- */
.dx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 40px;
    padding: 0 var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid var(--dx-border);
    background: var(--dx-surface-2);
    color: var(--dx-text);
    font: 600 var(--fs-sm)/1 var(--dx-font);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--dur-1), border-color var(--dur-1), transform var(--dur-1);
}

.dx-btn:hover {
    background: var(--dx-surface-3);
    border-color: var(--dx-border-strong);
}

.dx-btn:active {
    transform: translateY(1px);
}

.dx-btn--primary {
    background: var(--dx-accent);
    border-color: var(--dx-accent);
    color: var(--dx-accent-ink);
}

.dx-btn--primary:hover {
    background: color-mix(in srgb, var(--dx-accent) 88%, #fff);
    border-color: transparent;
}

.dx-btn--ghost {
    background: transparent;
    border-color: transparent;
}

.dx-btn--sm {
    min-height: 32px;
    padding: 0 var(--sp-3);
    font-size: var(--fs-xs);
}

.dx-btn svg,
.dx-iconbtn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.dx-iconbtn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--dx-text);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--dur-1);
}

.dx-iconbtn:hover {
    background: var(--dx-surface-3);
}

.dx-iconbtn[disabled] {
    opacity: .35;
    cursor: default;
    background: transparent;
}

.dx-field {
    display: grid;
    gap: var(--sp-1);
}

.dx-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--dx-text-2);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dx-input,
.dx-select {
    width: 100%;
    min-height: 40px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-md);
    border: 1px solid var(--dx-border);
    background: var(--dx-surface-2);
    color: var(--dx-text);
    font: 500 var(--fs-md) var(--dx-font);
    transition: border-color var(--dur-1), box-shadow var(--dur-1);
}

.dx-input:focus,
.dx-select:focus {
    outline: none;
    border-color: var(--dx-accent);
    box-shadow: 0 0 0 3px var(--dx-accent-soft);
}

.dx-input::placeholder {
    color: var(--dx-text-3);
}

.dx-select option {
    background: var(--dx-surface-2);
    color: var(--dx-text);
}

.dx-check {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--dx-text-2);
    cursor: pointer;
}

.dx-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--dx-accent);
}

/* Chips toggle (generación, categoría…) */
.dx-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-pill);
    border: 1px solid var(--dx-border);
    background: var(--dx-surface-2);
    color: var(--dx-text-2);
    font: 600 var(--fs-xs)/1 var(--dx-font);
    cursor: pointer;
    transition: all var(--dur-1);
}

.dx-chip:hover {
    border-color: var(--dx-border-strong);
    color: var(--dx-text);
}

.dx-chip[aria-pressed="true"] {
    background: var(--dx-accent-soft);
    border-color: var(--dx-accent);
    color: var(--dx-text);
}

.dx-chip--remove::after {
    content: "×";
    font-size: 1rem;
    line-height: 1;
    opacity: .7;
}

.dx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Control segmentado */
.dx-seg {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border-radius: var(--r-md);
    background: var(--dx-surface-2);
    border: 1px solid var(--dx-border);
}

.dx-seg button {
    border: 0;
    background: transparent;
    color: var(--dx-text-2);
    font: 600 var(--fs-xs)/1 var(--dx-font);
    padding: 7px 12px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
}

.dx-seg button[aria-pressed="true"],
.dx-seg button[aria-selected="true"] {
    background: var(--dx-surface-1);
    color: var(--dx-text);
    box-shadow: var(--sh-1);
}

.dx-seg .dx-count {
    opacity: .6;
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   4. BADGES DE TIPO Y CATEGORÍA
   Texto oscuro en 13 tipos claros y blanco en 5 oscuros: todos ≥ 5,5:1.
   -------------------------------------------------------------------------- */
.tb {
    --tc: var(--type-NORMAL);
    --ti: #111827;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px 0 3px;
    border-radius: var(--r-pill);
    background: var(--tc);
    color: var(--ti);
    font: 800 0.6875rem/1 var(--dx-font);
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border: 0;
    vertical-align: middle;
}

.tb img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px rgb(255 255 255 / .85);
}

.tb--sm {
    height: 20px;
    padding: 0 7px 0 2px;
    font-size: 0.625rem;
    gap: 4px;
}

.tb--sm img {
    width: 16px;
    height: 16px;
}

.tb--lg {
    height: 30px;
    padding: 0 12px 0 4px;
    font-size: var(--fs-xs);
}

.tb--lg img {
    width: 22px;
    height: 22px;
}

.tb--icon {
    padding: 2px;
}

button.tb,
a.tb {
    cursor: pointer;
    transition: filter var(--dur-1), transform var(--dur-1);
}

button.tb:hover,
a.tb:hover {
    filter: brightness(1.08) saturate(1.1);
    transform: translateY(-1px);
}

.tb[data-t="NORMAL"]   { --tc: var(--type-NORMAL); }
.tb[data-t="FIRE"]     { --tc: var(--type-FIRE); }
.tb[data-t="WATER"]    { --tc: var(--type-WATER); }
.tb[data-t="ELECTRIC"] { --tc: var(--type-ELECTRIC); }
.tb[data-t="GRASS"]    { --tc: var(--type-GRASS); }
.tb[data-t="ICE"]      { --tc: var(--type-ICE); }
.tb[data-t="FIGHTING"] { --tc: var(--type-FIGHTING); --ti: #fff; }
.tb[data-t="POISON"]   { --tc: var(--type-POISON);   --ti: #fff; }
.tb[data-t="GROUND"]   { --tc: var(--type-GROUND); }
.tb[data-t="FLYING"]   { --tc: var(--type-FLYING); }
.tb[data-t="PSYCHIC"]  { --tc: var(--type-PSYCHIC); }
.tb[data-t="BUG"]      { --tc: var(--type-BUG); }
.tb[data-t="ROCK"]     { --tc: var(--type-ROCK); }
.tb[data-t="GHOST"]    { --tc: var(--type-GHOST);    --ti: #fff; }
.tb[data-t="DRAGON"]   { --tc: var(--type-DRAGON);   --ti: #fff; }
.tb[data-t="STEEL"]    { --tc: var(--type-STEEL); }
.tb[data-t="FAIRY"]    { --tc: var(--type-FAIRY); }
.tb[data-t="DARK"]     { --tc: var(--type-DARK);     --ti: #fff; }

/* Categoría de movimiento */
.cb {
    --cc: var(--cat-status);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px 0 5px;
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--cc) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--cc) 55%, transparent);
    color: var(--dx-text);
    font: 700 0.6875rem/1 var(--dx-font);
    white-space: nowrap;
}

.cb svg {
    width: 13px;
    height: 13px;
    fill: var(--cc);
}

.cb[data-c="Physical"] { --cc: var(--cat-phys); }
.cb[data-c="Special"]  { --cc: var(--cat-spec); }
.cb[data-c="Status"]   { --cc: var(--cat-status); }

.dx-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--r-sm);
    font: 800 0.625rem/1 var(--dx-font);
    letter-spacing: .05em;
    text-transform: uppercase;
    background: var(--dx-surface-3);
    color: var(--dx-text-2);
}

.dx-tag--accent {
    background: var(--dx-accent-soft);
    color: var(--dx-text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dx-accent) 50%, transparent);
}

/* --------------------------------------------------------------------------
   5. TOPBAR (sticky) + MIGAS DE PAN
   -------------------------------------------------------------------------- */
.dx-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--dx-topbar-h);
    padding: var(--sp-2) var(--sp-4);
    background: color-mix(in srgb, var(--dx-bg) 86%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--dx-border);
}

.dx-topbar__title {
    font-size: var(--fs-lg);
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.dx-topbar__end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.dx-search {
    position: relative;
    flex: 1;
    max-width: 520px;
    margin-left: var(--sp-2);
}

.dx-search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: var(--dx-text-3);
    pointer-events: none;
}

.dx-search .dx-input {
    padding-left: 38px;
}

.dx-palbtn .dx-kbd {
    margin-left: var(--sp-1);
}

.dx-crumbs {
    min-width: 0;
    overflow: hidden;
}

.dx-crumbs ol {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    white-space: nowrap;
}

.dx-crumbs li {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.dx-crumbs li + li::before {
    content: "/";
    color: var(--dx-text-3);
}

.dx-crumbs a {
    color: var(--dx-text-2);
    text-decoration: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dx-crumbs li:last-child {
    flex-shrink: 1;
}

.dx-crumbs li:not(:last-child) {
    flex-shrink: 2;
}

@media (max-width: 640px) {
    /* En móvil: «Pokédex / Nombre»; el botón ← cubre los niveles intermedios */
    .dx-crumbs li:not(:first-child):not(:last-child) {
        display: none;
    }
}

.dx-crumbs a:hover {
    color: var(--dx-text);
    text-decoration: underline;
}

.dx-crumbs [aria-current="page"] {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   6. LISTADO POKÉDEX
   -------------------------------------------------------------------------- */
.dx-dex {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 1440px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .dx-dex {
        grid-template-columns: 290px 1fr;
        gap: var(--sp-6);
        padding: 0 var(--sp-6);
    }
}

/* Panel de filtros: sidebar en escritorio, bottom sheet en móvil */
.dx-filters {
    display: flex;
    flex-direction: column;
    background: var(--dx-surface-1);
    border: 1px solid var(--dx-border);
}

.dx-filters__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    border-bottom: 1px solid var(--dx-border);
}

.dx-filters__head h2 {
    font-size: var(--fs-base);
    font-weight: 800;
    margin-right: auto;
}

.dx-filters__body {
    display: grid;
    gap: var(--sp-5);
    padding: var(--sp-4);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dx-filters__body legend {
    margin-bottom: var(--sp-2);
}

.dx-filters__hint {
    display: block;
    font-size: var(--fs-xs);
    color: var(--dx-text-3);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    margin-top: 2px;
}

.dx-filters__foot {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--dx-border);
}

.dx-filters__foot .dx-btn {
    width: 100%;
}

.dx-typegrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 6px;
    margin-bottom: var(--sp-3);
}

.dx-typegrid .tb {
    justify-content: flex-start;
    height: 30px;
    width: 100%;
    opacity: .55;
    filter: saturate(.55);
    box-shadow: inset 0 0 0 0 transparent;
}

.dx-typegrid .tb[aria-pressed="true"] {
    opacity: 1;
    filter: none;
    box-shadow: 0 0 0 2px var(--dx-bg), 0 0 0 4px var(--tc);
}

.dx-typegrid .tb[aria-disabled="true"] {
    opacity: .25;
    cursor: not-allowed;
}

.dx-typegrid .tb:hover {
    opacity: 1;
    filter: none;
}

.dx-statmins {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
}

.dx-statmins label {
    display: grid;
    gap: 2px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--dx-text-2);
}

.dx-statmins .dx-input {
    min-height: 34px;
    padding: 0 8px;
    font-variant-numeric: tabular-nums;
}

.dx-statmins label:last-child {
    grid-column: 1 / -1;
}

@media (min-width: 1024px) {
    .dx-filters {
        position: sticky;
        top: calc(var(--dx-topbar-h) + var(--sp-4));
        max-height: calc(100dvh - var(--dx-topbar-h) - var(--sp-8));
        margin-top: var(--sp-4);
        border-radius: var(--r-lg);
    }

    .dx-filters__close,
    .dx-filters__foot,
    .dx-filters-toggle,
    .dx-scrim {
        display: none !important;
    }
}

@media (max-width: 1023.98px) {
    .dx-filters {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 120;
        max-height: 86dvh;
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        box-shadow: var(--sh-3);
        transform: translateY(102%);
        visibility: hidden;
        transition: transform var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
    }

    .dx-filters.is-open {
        transform: none;
        visibility: visible;
        transition: transform var(--dur-3) var(--ease);
    }

    .dx-filters__head::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 50%;
        width: 40px;
        height: 4px;
        margin-left: -20px;
        border-radius: var(--r-pill);
        background: var(--dx-border-strong);
    }

    .dx-scrim {
        position: fixed;
        inset: 0;
        z-index: 110;
        background: rgb(0 0 0 / .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--dur-2);
    }

    .dx-scrim.is-open {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Barra de resultados */
.dx-results {
    min-width: 0;
    padding: var(--sp-4);
}

@media (min-width: 1024px) {
    .dx-results {
        padding: var(--sp-4) 0 var(--sp-8);
    }
}

.dx-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
}

.dx-toolbar__count {
    font-size: var(--fs-sm);
    color: var(--dx-text-2);
    font-variant-numeric: tabular-nums;
}

.dx-toolbar__count strong {
    color: var(--dx-text);
}

.dx-sort {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-left: auto;
}

.dx-sort .dx-select {
    width: auto;
    min-height: 36px;
}

.dx-filters-toggle .dx-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--dx-accent);
    color: var(--dx-accent-ink);
    font-size: 0.6875rem;
    line-height: 20px;
}

.dx-activechips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--sp-3);
}

.dx-activechips:empty {
    display: none;
}

/* Grid de tarjetas */
.dx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: var(--sp-3);
}

@media (max-width: 420px) {
    .dx-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-2);
    }
}

.dx-card-pk {
    --tc: var(--dx-border-strong);
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: var(--sp-3) var(--sp-2) var(--sp-3);
    border-radius: var(--r-lg);
    background:
        radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%),
        var(--dx-surface-1);
    border: 1px solid var(--dx-border);
    text-decoration: none;
    color: var(--dx-text);
    content-visibility: auto;
    contain-intrinsic-size: auto 176px;
    transition: transform var(--dur-2) var(--ease), border-color var(--dur-2), box-shadow var(--dur-2);
}

.dx-card-pk:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tc) 70%, var(--dx-border));
    box-shadow: var(--sh-2);
}

.dx-card-pk:active {
    transform: translateY(-1px) scale(.99);
}

.dx-card-pk:focus-visible {
    outline: 2px solid var(--dx-focus);
    outline-offset: 2px;
}

.dx-card-pk__num {
    position: absolute;
    top: 8px;
    left: 10px;
    font: 700 var(--fs-xs) var(--dx-font-mono);
    color: var(--dx-text-3);
    font-variant-numeric: tabular-nums;
}

.dx-card-pk__metric {
    position: absolute;
    top: 7px;
    right: 8px;
    padding: 1px 6px;
    border-radius: var(--r-sm);
    background: var(--dx-surface-2);
    font: 700 0.6875rem var(--dx-font);
    color: var(--dx-text-2);
    font-variant-numeric: tabular-nums;
}

.dx-card-pk__metric b {
    color: var(--dx-text);
}

.dx-card-pk__name {
    font-weight: 700;
    font-size: var(--fs-md);
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dx-card-pk__types {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

/* Icono 128×64 (2 frames) → se muestra el frame izquierdo a 1:1 */
.dx-pxicon {
    width: 64px;
    height: 64px;
    object-fit: cover;
    object-position: 0 50%;
    margin-top: 10px;
    border-radius: var(--r-md);
}

.dx-pxicon:not(.is-loaded) {
    background: linear-gradient(100deg, var(--dx-surface-2) 30%, var(--dx-surface-3) 50%, var(--dx-surface-2) 70%) 0 0 / 300% 100%;
    animation: dx-shimmer 1.2s linear infinite;
}

/* "Bote" de 2 frames estilo menú de equipo al pasar el ratón */
.dx-card-pk:hover .dx-pxicon,
.dx-card-pk:focus-visible .dx-pxicon,
.dx-evo__mon:hover .dx-pxicon,
.dx-monchip:hover .dx-pxicon {
    animation: dx-bob .36s steps(1, end) infinite;
}

@keyframes dx-bob {
    0%   { object-position: 0 50%; }
    50%  { object-position: 100% 50%; }
}

@keyframes dx-shimmer {
    to { background-position: -150% 0; }
}

/* Estado vacío */
.dx-empty {
    display: grid;
    justify-items: center;
    gap: var(--sp-3);
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
    border: 1px dashed var(--dx-border-strong);
    border-radius: var(--r-lg);
    color: var(--dx-text-2);
}

.dx-empty h3 {
    color: var(--dx-text);
    font-size: var(--fs-lg);
}

/* --------------------------------------------------------------------------
   7. FICHA DE POKÉMON
   -------------------------------------------------------------------------- */
.dx-detail {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--sp-4);
}

/* Hero teñido por tipo: la mezcla ≤ 26 % mantiene el contraste del texto */
.dx-hero {
    --t1: var(--dx-border);
    --t2: var(--t1);
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding: var(--sp-5);
    border-radius: var(--r-xl);
    border: 1px solid color-mix(in srgb, var(--t1) 40%, var(--dx-border));
    background:
        radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--t1) 26%, transparent), transparent 60%),
        radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--t2) 20%, transparent), transparent 60%),
        var(--dx-surface-1);
    overflow: hidden;
}

@media (min-width: 760px) {
    .dx-hero {
        grid-template-columns: minmax(220px, 300px) 1fr;
        align-items: center;
        gap: var(--sp-6);
        padding: var(--sp-6);
    }
}

.dx-hero__art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 220px;
    border-radius: var(--r-lg);
    background:
        radial-gradient(closest-side, color-mix(in srgb, var(--t1) 30%, transparent), transparent),
        repeating-linear-gradient(0deg, transparent 0 7px, rgb(255 255 255 / .025) 7px 8px);
}

.dx-sprite {
    background-repeat: no-repeat;
    background-position: 0 0;
}

/* Sin espalda propia: se usa el frente volteado */
.dx-sprite.is-flipped {
    transform: scaleX(-1);
}

.dx-hero__art {
    flex-direction: column;
    gap: var(--sp-3);
    padding-bottom: var(--sp-3);
}

.dx-hero__art {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.dx-hero__art .dx-sprite:not(.is-loading) {
    margin-top: auto;
}

.dx-hero__view {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2);
}

.dx-hero__view .dx-seg button {
    padding: 5px 10px;
}

.dx-sprite.is-loading {
    width: 160px;
    height: 160px;
    border-radius: var(--r-lg);
    background: linear-gradient(100deg, var(--dx-surface-2) 30%, var(--dx-surface-3) 50%, var(--dx-surface-2) 70%) 0 0 / 300% 100%;
    animation: dx-shimmer 1.2s linear infinite;
}

.dx-hero__kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--dx-text-2);
}

.dx-hero__kicker .dx-num {
    font-family: var(--dx-font-mono);
    font-weight: 700;
    color: var(--dx-text);
}

.dx-hero h1 {
    font-size: clamp(var(--fs-2xl), 5vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.05;
    margin: var(--sp-1) 0 var(--sp-3);
}

.dx-hero__types {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.dx-forms {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.dx-form {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-width: 76px;
    padding: 6px 8px;
    border-radius: var(--r-md);
    border: 1px solid var(--dx-border);
    background: var(--dx-surface-2);
    text-decoration: none;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--dx-text-2);
    text-align: center;
    line-height: 1.2;
}

.dx-form .dx-pxicon {
    width: 48px;
    height: 48px;
    margin: 0;
}

.dx-form:hover {
    border-color: var(--dx-border-strong);
    color: var(--dx-text);
}

.dx-form[aria-current="true"] {
    border-color: var(--dx-accent);
    background: var(--dx-accent-soft);
    color: var(--dx-text);
}

/* Datos rápidos */
.dx-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

.dx-fact {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--dx-surface-2) 85%, transparent);
    border: 1px solid var(--dx-border);
    min-width: 0;
}

.dx-fact dt {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--dx-text-3);
}

.dx-fact dd {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.dx-fact dd small {
    display: block;
    font-weight: 500;
    font-size: var(--fs-xs);
    color: var(--dx-text-3);
}

.dx-gender {
    display: flex;
    height: 6px;
    margin-top: 5px;
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--dx-surface-3);
}

.dx-gender span:first-child { background: var(--dx-male); }
.dx-gender span:last-child  { background: var(--dx-female); }

/* Pestañas sticky */
.dx-tabs {
    position: sticky;
    top: var(--dx-topbar-h);
    z-index: 40;
    display: flex;
    gap: var(--sp-1);
    margin: var(--sp-4) calc(var(--sp-4) * -1) var(--sp-4);
    padding: var(--sp-2) var(--sp-4);
    min-height: var(--dx-tabs-h);
    overflow-x: auto;
    scrollbar-width: none;
    background: color-mix(in srgb, var(--dx-bg) 90%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--dx-border);
}

.dx-tabs::-webkit-scrollbar {
    display: none;
}

.dx-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--sp-4);
    min-height: 34px;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--dx-text-2);
    font: 700 var(--fs-sm)/1 var(--dx-font);
    cursor: pointer;
    white-space: nowrap;
}

.dx-tab:hover {
    color: var(--dx-text);
    background: var(--dx-surface-2);
}

.dx-tab[aria-selected="true"] {
    color: var(--dx-text);
    background: var(--dx-surface-2);
}

.dx-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -9px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--dx-accent);
}

.dx-tab .dx-count {
    font-size: var(--fs-xs);
    color: var(--dx-text-3);
    font-variant-numeric: tabular-nums;
}

.dx-panel[hidden] {
    display: none;
}

.dx-panel {
    animation: dx-fade var(--dur-2) var(--ease);
}

@keyframes dx-fade {
    from { opacity: 0; transform: translateY(4px); }
}

/* Rejilla de tarjetas de la ficha */
.dx-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}

@media (min-width: 960px) {
    .dx-cols {
        grid-template-columns: 1.15fr 1fr;
        align-items: start;
    }

    .dx-span {
        grid-column: 1 / -1;
    }
}

.dx-box {
    background: var(--dx-surface-1);
    border: 1px solid var(--dx-border);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-4) var(--sp-5);
    min-width: 0;
}

.dx-box__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.dx-box__head h2 {
    font-size: var(--fs-base);
    font-weight: 800;
    letter-spacing: -.005em;
}

.dx-note {
    margin-top: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--dx-text-3);
}

/* Stats */
.dx-stats {
    width: 100%;
    border-collapse: collapse;
}

.dx-stats th,
.dx-stats td {
    padding: 5px 0;
    vertical-align: middle;
}

.dx-stats th {
    width: 72px;
    text-align: left;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--dx-text-2);
    white-space: nowrap;
}

.dx-stats td.num {
    width: 44px;
    padding-right: var(--sp-3);
    text-align: right;
    font-weight: 800;
    font-size: var(--fs-md);
}

.dx-stats td.range {
    width: 1%;
    padding-left: var(--sp-3);
    text-align: right;
    font-size: var(--fs-xs);
    color: var(--dx-text-2);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dx-stats thead th {
    font-size: 0.625rem;
    color: var(--dx-text-3);
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: right;
    padding-bottom: 2px;
}

.dx-stats tfoot th,
.dx-stats tfoot td {
    border-top: 1px solid var(--dx-border);
    padding-top: 9px;
}

.dx-bar {
    height: 10px;
    border-radius: var(--r-pill);
    background: var(--dx-surface-3);
    overflow: hidden;
}

.dx-bar > span {
    display: block;
    height: 100%;
    width: var(--v);
    border-radius: inherit;
    background: var(--c);
    transform-origin: left;
    animation: dx-grow .6s var(--ease) both;
}

@keyframes dx-grow {
    from { transform: scaleX(0); }
}

.st-1 { --c: var(--st-1); }
.st-2 { --c: var(--st-2); }
.st-3 { --c: var(--st-3); }
.st-4 { --c: var(--st-4); }
.st-5 { --c: var(--st-5); }
.st-6 { --c: var(--st-6); }

/* Habilidades */
.dx-abilities {
    display: grid;
    gap: var(--sp-2);
}

.dx-ability {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: var(--sp-3);
    border-radius: var(--r-md);
    border: 1px solid var(--dx-border);
    background: var(--dx-surface-2);
    color: var(--dx-text);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color var(--dur-1), background var(--dur-1);
}

.dx-ability:hover {
    border-color: var(--dx-border-strong);
    background: var(--dx-surface-3);
}

.dx-ability__name {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 700;
}

.dx-ability__desc {
    font-size: var(--fs-sm);
    color: var(--dx-text-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Defensa de tipos */
.dx-def {
    display: grid;
    gap: var(--sp-2);
}

.dx-def__row {
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: start;
    gap: var(--sp-2);
}

.dx-def__mult {
    display: grid;
    place-items: center;
    height: 24px;
    border-radius: var(--r-sm);
    font: 900 var(--fs-xs) var(--dx-font);
    font-variant-numeric: tabular-nums;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}

.dx-def__types {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Cadena evolutiva (container queries: se adapta al ancho de la tarjeta) */
.dx-evo {
    container-type: inline-size;
    overflow-x: auto;
}

.dx-evo__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
}

.dx-evo__kids {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: var(--sp-3);
    width: 100%;
}

.dx-evo__branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
}

.dx-evo__how {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--dx-text-2);
    text-align: center;
    max-width: 150px;
}

.dx-evo__how::after {
    content: "↓";
    font-size: var(--fs-base);
    color: var(--dx-text-3);
    line-height: 1;
}

.dx-evo__how img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.dx-evo__mon {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 110px;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    border: 1px solid var(--dx-border);
    background: var(--dx-surface-2);
    text-decoration: none;
    transition: border-color var(--dur-1), transform var(--dur-2) var(--ease);
}

.dx-evo__mon:hover {
    border-color: var(--dx-border-strong);
    transform: translateY(-2px);
}

.dx-evo__mon[aria-current="page"] {
    border-color: var(--dx-accent);
    background: var(--dx-accent-soft);
}

.dx-evo__mon .dx-pxicon {
    margin: 0;
}

.dx-evo__mon b {
    font-size: var(--fs-sm);
}

.dx-evo__mon .dx-card-pk__types {
    gap: 3px;
}

@container (min-width: 620px) {
    .dx-evo__node {
        flex-direction: row;
        gap: var(--sp-3);
    }

    .dx-evo__kids {
        display: flex;
        flex-direction: column;
        width: auto;
        gap: var(--sp-3);
    }

    .dx-evo__kids.is-many {
        display: grid;
        grid-template-columns: repeat(2, auto);
    }

    .dx-evo__branch {
        flex-direction: row;
        gap: var(--sp-3);
    }

    .dx-evo__how::after {
        content: "→";
    }

    .dx-evo > .dx-evo__node {
        justify-content: center;
        min-width: max-content;
        margin: 0 auto;
    }
}

/* Movimientos */
.dx-moves {
    container-type: inline-size;
}

.dx-moves__bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
    margin-bottom: var(--sp-3);
}

.dx-moves__bar .dx-search {
    margin: 0;
    min-width: 180px;
}

.dx-moves__bar .dx-select {
    width: auto;
    min-height: 36px;
}

.dx-mvtable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm);
}

.dx-mvtable thead th {
    position: sticky;
    top: calc(var(--dx-topbar-h) + var(--dx-tabs-h));
    z-index: 2;
    background: var(--dx-surface-1);
    border-bottom: 1px solid var(--dx-border-strong);
    padding: 0;
    text-align: left;
}

.dx-mvtable thead button {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 10px 8px;
    border: 0;
    background: transparent;
    color: var(--dx-text-3);
    font: 800 0.6875rem/1 var(--dx-font);
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
}

.dx-mvtable thead button:hover {
    color: var(--dx-text);
}

.dx-mvtable thead th[aria-sort] button {
    color: var(--dx-accent);
}

.dx-mvtable thead th[aria-sort="ascending"] button::after { content: "▲"; font-size: 8px; }
.dx-mvtable thead th[aria-sort="descending"] button::after { content: "▼"; font-size: 8px; }

.dx-mvtable thead th.num button {
    justify-content: flex-end;
}

.dx-mvtable td {
    padding: 8px;
    border-bottom: 1px solid var(--dx-border);
    vertical-align: middle;
}

.dx-mvtable td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dx-mvtable tbody tr {
    cursor: pointer;
    transition: background var(--dur-1);
}

.dx-mvtable tbody tr:hover {
    background: var(--dx-surface-2);
}

.dx-mvtable tbody tr.is-stab td.dx-mv__pow {
    color: var(--dx-text);
    font-weight: 800;
}

.dx-mv__name {
    border: 0;
    padding: 0;
    background: none;
    color: var(--dx-text);
    font: 700 var(--fs-sm) var(--dx-font);
    text-align: left;
    cursor: pointer;
}

.dx-mv__name:hover {
    text-decoration: underline;
}

.dx-mv__lvl {
    width: 48px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--dx-text-2);
}

.dx-mv__pow,
.dx-mv__acc,
.dx-mv__pp {
    color: var(--dx-text-2);
}

/* Tabla → filas-tarjeta cuando el contenedor es estrecho (móvil) */
@container (max-width: 580px) {
    .dx-mvtable thead {
        display: none;
    }

    .dx-mvtable,
    .dx-mvtable tbody {
        display: block;
    }

    .dx-mvtable tbody tr {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-areas:
            "lvl name pow"
            "lvl meta stats";
        align-items: center;
        gap: 4px var(--sp-2);
        padding: 10px 4px;
        border-bottom: 1px solid var(--dx-border);
    }

    .dx-mvtable td {
        padding: 0;
        border: 0;
    }

    .dx-mvtable .dx-mv__lvl  { grid-area: lvl; width: auto; font-size: var(--fs-base); text-align: center; }
    .dx-mvtable .dx-mv__nm   { grid-area: name; min-width: 0; }
    .dx-mvtable .dx-mv__pow  { grid-area: pow; font-size: var(--fs-base); }
    .dx-mvtable .dx-mv__meta { grid-area: meta; display: flex; gap: 6px; flex-wrap: wrap; }
    .dx-mvtable .dx-mv__stats { grid-area: stats; font-size: var(--fs-xs); color: var(--dx-text-3); text-align: right; }
    .dx-mvtable .dx-mv__type,
    .dx-mvtable .dx-mv__cat,
    .dx-mvtable .dx-mv__acc,
    .dx-mvtable .dx-mv__pp { display: none; }

    .dx-mvtable.no-lvl tbody tr {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name pow"
            "meta stats";
    }
}

@container (min-width: 581px) {
    .dx-mvtable .dx-mv__meta,
    .dx-mvtable .dx-mv__stats {
        display: none;
    }
}

.dx-pow-label {
    font-size: 0.625rem;
    color: var(--dx-text-3);
    font-weight: 700;
    margin-right: 2px;
}

@container (min-width: 581px) {
    .dx-pow-label { display: none; }
}

/* Ubicaciones */
.dx-locs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: var(--sp-3);
}

.dx-loc {
    border: 1px solid var(--dx-border);
    border-radius: var(--r-md);
    background: var(--dx-surface-2);
    padding: var(--sp-3);
}

.dx-loc header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.dx-loc h3 {
    font-size: var(--fs-md);
    font-weight: 800;
}

.dx-loc__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px auto;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 0;
    border-top: 1px solid var(--dx-border);
    font-size: var(--fs-sm);
}

.dx-loc__method {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.dx-loc__method i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mc, var(--dx-text-3));
    flex-shrink: 0;
}

.dx-loc__pct {
    display: grid;
    gap: 3px;
    font-weight: 800;
    font-size: var(--fs-xs);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dx-loc__pct .dx-bar {
    height: 5px;
}

.dx-loc__pct .dx-bar > span {
    background: var(--mc, var(--dx-accent));
}

.dx-loc__lvl {
    font-size: var(--fs-xs);
    color: var(--dx-text-2);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.m-land  { --mc: #4ade80; }
.m-water { --mc: #60a5fa; }
.m-rod   { --mc: #22d3ee; }
.m-cave  { --mc: #c08457; }
.m-rock  { --mc: #a8a29e; }
.m-tree  { --mc: #a3e635; }
.m-other { --mc: #c084fc; }

/* Listas de Pokémon (vista rápida, entrenadores) */
.dx-mongrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 4px;
}

.dx-monchip {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 4px 2px;
    border-radius: var(--r-md);
    text-decoration: none;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--dx-text-2);
    text-align: center;
    line-height: 1.15;
    overflow: hidden;
}

.dx-monchip:hover {
    background: var(--dx-surface-3);
    color: var(--dx-text);
}

.dx-monchip .dx-pxicon {
    width: 48px;
    height: 48px;
    margin: 0;
}

.dx-monchip span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dx-trainers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: var(--sp-2);
}

.dx-trainer {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    border: 1px solid var(--dx-border);
    background: var(--dx-surface-2);
    color: var(--dx-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dx-trainer:hover {
    border-color: var(--dx-border-strong);
}

.dx-trainer img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.dx-trainer small {
    display: block;
    color: var(--dx-text-3);
    font-size: var(--fs-xs);
}

.dx-dex-entry {
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--dx-text-2);
    border-left: 3px solid var(--dx-accent);
    padding-left: var(--sp-3);
}

/* --------------------------------------------------------------------------
   8. VISTA RÁPIDA (bottom sheet en móvil, modal centrado en escritorio)
   -------------------------------------------------------------------------- */
.dx-sheet,
.dx-palette {
    padding: 0;
    border: 1px solid var(--dx-border-strong);
    background: var(--dx-surface-1);
    color: var(--dx-text);
    box-shadow: var(--sh-3);
}

.dx-sheet::backdrop,
.dx-palette::backdrop {
    background: rgb(2 6 23 / .6);
    backdrop-filter: blur(2px);
}

.dx-sheet {
    width: min(560px, 100vw);
    max-width: 100vw;
    max-height: 86dvh;
    border-radius: var(--r-xl);
    overflow: hidden;
}

.dx-sheet[open] {
    display: flex;
    flex-direction: column;
    animation: dx-pop var(--dur-2) var(--ease);
}

.dx-sheet__grip {
    display: none;
    width: 100%;
    height: 22px;
    border: 0;
    background: transparent;
    cursor: grab;
    touch-action: none;
}

.dx-sheet__grip::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: var(--r-pill);
    background: var(--dx-border-strong);
}

.dx-sheet__head {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    border-bottom: 1px solid var(--dx-border);
}

.dx-sheet__head h2 {
    font-size: var(--fs-xl);
    font-weight: 900;
    letter-spacing: -.01em;
    line-height: 1.15;
}

.dx-sheet__head .dx-iconbtn {
    margin-left: auto;
    margin-top: -4px;
}

.dx-sheet__sub {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.dx-sheet__body {
    padding: var(--sp-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    gap: var(--sp-4);
}

.dx-sheet__body h3 {
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--dx-text-3);
    margin-bottom: var(--sp-2);
}

.dx-kv {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--sp-2);
}

.dx-kv div {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    background: var(--dx-surface-2);
}

.dx-kv dt {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--dx-text-3);
}

.dx-kv dd {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
    .dx-sheet {
        width: 100vw;
        margin: auto 0 0 0;
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        border-bottom: 0;
    }

    .dx-sheet[open] {
        animation: dx-sheet-up var(--dur-3) var(--ease);
    }

    .dx-sheet__grip {
        display: block;
    }

    .dx-sheet__head {
        padding-top: var(--sp-1);
    }
}

@keyframes dx-pop {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
}

@keyframes dx-sheet-up {
    from { transform: translateY(100%); }
}

/* --------------------------------------------------------------------------
   9. COMMAND PALETTE (Ctrl+K)
   -------------------------------------------------------------------------- */
.dx-palette {
    width: min(640px, calc(100vw - 24px));
    max-height: min(560px, 80dvh);
    margin: 10vh auto auto;
    border-radius: var(--r-lg);
    overflow: hidden;
}

.dx-palette[open] {
    display: flex;
    flex-direction: column;
    animation: dx-pop var(--dur-2) var(--ease);
}

.dx-palette__input {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
    border-bottom: 1px solid var(--dx-border);
}

.dx-palette__input svg {
    width: 20px;
    height: 20px;
    color: var(--dx-text-3);
    flex-shrink: 0;
}

.dx-palette__input input {
    flex: 1;
    min-width: 0;
    height: 56px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--dx-text);
    font: 500 var(--fs-base) var(--dx-font);
    padding: 0;
}

.dx-palette__list {
    margin: 0;
    padding: var(--sp-2);
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dx-palette__group {
    padding: var(--sp-2) var(--sp-2) var(--sp-1);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dx-text-3);
}

.dx-palette__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 44px;
    padding: 4px var(--sp-2);
    border-radius: var(--r-md);
    cursor: pointer;
}

.dx-palette__item[aria-selected="true"] {
    background: var(--dx-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dx-accent) 45%, transparent);
}

.dx-palette__ico {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--r-sm);
    background: var(--dx-surface-2);
    overflow: hidden;
    font-size: var(--fs-base);
}

.dx-palette__ico img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    object-position: 0 50%;
}

.dx-palette__ico img.is-item {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.dx-palette__txt {
    min-width: 0;
    display: grid;
}

.dx-palette__txt b {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dx-palette__txt small {
    color: var(--dx-text-3);
    font-size: var(--fs-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dx-palette__item mark {
    background: none;
    color: var(--dx-accent);
    font-weight: 800;
}

.dx-palette__foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    border-top: 1px solid var(--dx-border);
    font-size: var(--fs-xs);
    color: var(--dx-text-3);
}

.dx-palette__empty {
    padding: var(--sp-6);
    text-align: center;
    color: var(--dx-text-3);
}

/* --------------------------------------------------------------------------
   10. RESPONSIVE GENERAL
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .dx-topbar {
        padding: var(--sp-2) var(--sp-3);
    }

    .dx-topbar:has(.dx-search) .dx-topbar__title {
        display: none;
    }

    .dx-palbtn .dx-palbtn__label,
    .dx-palbtn .dx-kbd {
        display: none;
    }

    .dx-palbtn {
        width: 40px;
        padding: 0;
    }

    .dx-search {
        margin-left: 0;
    }

    .dx-detail {
        padding: var(--sp-3);
    }

    .dx-tabs {
        margin-left: calc(var(--sp-3) * -1);
        margin-right: calc(var(--sp-3) * -1);
    }

    .dx-hero {
        padding: var(--sp-4);
    }

    .dx-hero__art {
        min-height: 180px;
    }

    .dx-sort {
        margin-left: 0;
        width: 100%;
    }

    .dx-sort .dx-select {
        flex: 1;
    }

    .dx-box {
        padding: var(--sp-3) var(--sp-3) var(--sp-4);
    }
}

/* --------------------------------------------------------------------------
   11. MOVIMIENTO REDUCIDO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .dx *,
    .dx-sheet,
    .dx-palette,
    .dx-filters {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }

    .dx-card-pk:hover {
        transform: none;
    }
}