/* Home Mercado — rediseño mobile (handoff Claude design 2026-05-10).
 *
 * Scope: SOLO mobile (≤600px) y SOLO dentro de .home-mercado-wrap.
 * Desktop/tablet siguen con el .home-wrap clásico, sin tocar.
 *
 * Tokens locales en :root del wrap para no contaminar globales. La mayoría
 * mappea a vars netza ya existentes.
 *
 * Tipografía Roboto + Roboto Mono cargadas via @import — no afecta otras
 * pantallas porque el font-family solo se aplica dentro de .home-mercado-wrap.
 */

/* Roboto + Roboto Mono se cargan en base.html via <link> para evitar el
   round-trip extra del @import bloqueante. */

@media (max-width: 600px) {
    /* ──────────────────────────────────────────────────────────── */
    /* Container raíz                                                */
    /* ──────────────────────────────────────────────────────────── */
    .home-mercado-wrap {
        --hm-paper:      #f4f0e8;
        --hm-paper-warm: #fbf8f2;
        --hm-ink:        #2d2520;
        --hm-ink-2:      #4a3f35;
        --hm-ink-3:      #6b6157;
        --hm-rule:       #e1d8c4;
        --hm-rule-soft:  #ede4d2;
        --hm-accent:     #a84a2a;
        --hm-accent-deep:#7d3318;
        /* v2.10.9 rev3 — split por mode: light=oscuros (contraste paper),
           dark=claros (override más abajo en body.dark-mode .home-mercado-wrap). */
        --hm-positivo:   #3a7d5a;
        --hm-negativo:   #c45a3f;
        --hm-ink-dark:   #141311;
        --hm-card-bg:    var(--hm-paper);
        /* Quick actions: mismo tono neutro que las cards I/E para uniformidad
           (en lugar del durazno claro del JSX original que se ve fuera de tono). */
        --hm-action-bg:    var(--hm-card-bg);
        --hm-action-border:var(--hm-rule-soft);
        --hm-font-sans:    'Roboto', system-ui, -apple-system, sans-serif;
        --hm-font-mono:    'Roboto Mono', ui-monospace, monospace;

        /* v2.10.26 — Mirror de --dm-* vars necesarias para componentes
           compartidos del dashboard mobile reusados acá (.dm-curr-toggle
           del header). Mappean a los --hm-* equivalentes. */
        --dm-card-bg:    var(--hm-card-bg);
        --dm-ink:        var(--hm-ink);
        --dm-ink-3:      var(--hm-ink-3);
        --dm-rule:       var(--hm-rule);
        --dm-font-mono:  var(--hm-font-mono);

        background: var(--hm-paper-warm);
        color: var(--hm-ink);
        font-family: var(--hm-font-sans);
        min-height: 100vh;
        padding-bottom: 16px; /* el bottom tab bar tapa con `body.has-bottom-tabs padding-bottom:64px`, no hace falta dejar aire extra acá */
    }

    /* Ocultar el .home-wrap legacy (y secciones extra como cotizaciones
       legacy) en mobile. .home-mercado-wrap los reemplaza. */
    .home-wrap { display: none !important; }
    .home-legacy-extras { display: none !important; }
    .home-mercado-wrap { display: block; }

    /* Quitar marco/padding del main wrapper en mobile para que el wrap
       toque los bordes de la pantalla.
       v2.10.7 — `.container` global tiene en mobile margin/padding/bg/border/
       radius que crean un "marco" visible alrededor del home-mercado-wrap. Lo
       reseteamos cuando el wrap está adentro (CSS :has).
       v2.10.118 — `:has(> .home-mercado-wrap)` (hijo directo) — ver comentario
       del bloque DT (línea ~1245). */
    .container, main, body { padding-left: 0 !important; padding-right: 0 !important; }
    .container:has(> .home-mercado-wrap) {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        max-width: none !important;
    }
    .home-mercado-wrap { margin: 0; }

    /* ──────────────────────────────────────────────────────────── */
    /* Header — fecha + saludo + íconos                              */
    /* ──────────────────────────────────────────────────────────── */
    .hm-header { padding: 13px 18px 10px; }
    .hm-header-top {
        display: flex; justify-content: space-between; align-items: flex-end;
    }
    .hm-fecha {
        font-family: var(--hm-font-mono);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--hm-ink-3);
    }
    .hm-header-icons {
        display: flex; align-items: center; gap: 10px;
        color: var(--hm-ink-3);
    }
    /* v2.10.85 (Facu 2026-05-14) — Toggle moneda del home igualado al
       .db-currency-toggle del dashboard (mismo wrap stone con border,
       mismos botones padding/font/min-width). Antes era variante propia
       del home con paper card-bg.
       v2.10.107 (Facu 2026-05-14) — Bg paper #f4f0e8 (matchea la card
       de Ingresos/Egresos). Border del mismo color (look sin contraste). */
    .hm-curr-toggle-header.dm-curr-toggle {
        background: #f4f0e8;
        border: 1px solid #f4f0e8;
        border-radius: 8px;
        padding: 3px;
    }
    .hm-curr-toggle-header.dm-curr-toggle button {
        padding: 5px 12px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.04em;
        line-height: 1;
        min-width: 36px;
        border-radius: 6px;
        font-family: var(--hm-font-mono);
        color: var(--hm-ink-3);
        background: transparent;
        border: 0;
        cursor: pointer;
        text-align: center;
        transition: background 0.15s, color 0.15s;
    }
    .hm-curr-toggle-header.dm-curr-toggle button.active {
        background: var(--hm-ink, #2d2520) !important;
        color: #fff !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.18);
    }
    .hm-icon-btn {
        background: transparent; border: 0; padding: 0;
        color: var(--hm-ink-3); cursor: pointer;
        position: relative;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .hm-icon-btn i { font-size: 15px; }
    /* v2.10.96 (Facu 2026-05-14) — Lamparita encendida unificada en
       netza-base.css (regla `body.home-tutorial-activo .hm-btn-tutorial`
       con look amarillo Netza). Override terracota removido. */
    .hm-icon-btn .hm-bell-dot {
        position: absolute; top: -2px; right: -2px;
        width: 7px; height: 7px;
        background: var(--hm-accent);
        border-radius: 99px;
    }
    .hm-saludo {
        /* v2.10.x (Facu 2026-05-13) — Tipografía unificada con los headers
           de la app (Roboto Mono uppercase) pero manteniendo el size grande
           del saludo (22px) para que se vea destacado en el home. */
        font-family: var(--hm-font-mono);
        font-size: 22px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin: 4px 0 0;
        color: var(--hm-ink);
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 6px;
    }
    .hm-saludo-nombre {
        color: var(--hm-ink);
        outline: none;
        border-radius: 4px;
        padding: 0 2px;
        transition: background .15s, box-shadow .15s;
    }
    .hm-saludo-nombre--edit {
        background: rgba(168, 74, 42, 0.08);
        box-shadow: inset 0 -2px 0 var(--hm-accent);
    }
    body.dark-mode .hm-saludo-nombre--edit {
        background: rgba(168, 74, 42, 0.18);
    }
    .hm-saludo-edit {
        background: transparent;
        border: 0;
        font-size: 12px;
        font-weight: 400;
        color: var(--hm-ink-3);
        opacity: 0.55;
        text-decoration: none;
        padding: 2px 6px;
        border-radius: 6px;
        line-height: 1;
        transition: opacity .15s, background .15s;
        display: inline-flex;
        align-items: center;
        cursor: pointer;
    }
    .hm-saludo-edit:hover, .hm-saludo-edit:active {
        opacity: 1;
        background: rgba(0, 0, 0, 0.04);
    }
    body.dark-mode .hm-saludo-edit:hover { background: rgba(255, 255, 255, 0.06); }

    /* ──────────────────────────────────────────────────────────── */
    /* Hero PN                                                       */
    /* ──────────────────────────────────────────────────────────── */
    .hm-hero-wrap { padding: 8px 18px 0; }
    .hm-hero-pn {
        background: linear-gradient(140deg, var(--hm-ink-dark) 0%, var(--hm-ink) 70%);
        color: #fff;
        border-radius: 20px;
        padding: 16px 18px 18px;
        position: relative;
        overflow: hidden;
    }
    .hm-hero-eyebrow {
        font-family: var(--hm-font-mono);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(244, 240, 232, 0.55);
    }
    .hm-hero-monto {
        font-size: 34px;
        font-weight: 700;
        letter-spacing: -0.03em;
        margin-top: 4px;
        line-height: 1.05;
        font-variant-numeric: tabular-nums;
        /* v2.10.9 rev4 — Hero PN con verde/rojo OSCUROS en ambos modes
           (decisión Facu 2026-05-12). Antes usaba los claros del hero;
           ahora unifica con los del resto de la app en light. */
        color: #3a7d5a;
    }
    .hm-hero-monto.neg { color: #c45a3f; }
    .hm-hero-delta {
        display: flex; gap: 8px; align-items: center; margin-top: 7px;
    }
    /* v2.10.9 rev11 — Chip "saldo del mes" SIN background (decision Facu).
       Antes era un chip con bg translúcido + padding. Ahora solo el valor
       con formato condicional (color verde/rojo, sin bg). */
    .hm-hero-chip {
        background: transparent;
        color: #3a7d5a;
        padding: 0;
        border-radius: 0;
        font-family: var(--hm-font-mono);
        font-size: 11px;
        font-weight: 600;
    }
    .hm-hero-chip.neg {
        background: transparent;
        color: #c45a3f;
    }
    .hm-hero-chip-sub {
        font-family: var(--hm-font-mono);
        font-size: 11px;
        color: rgba(244, 240, 232, 0.6);
    }
    .hm-hero-spark {
        width: calc(100% + 36px);
        height: 90px;
        margin: 14px -18px 0;
        display: block;
    }
    .hm-hero-spark path {
        stroke: var(--hm-accent);
        stroke-width: 1.8;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* ──────────────────────────────────────────────────────────── */
    /* Toggle ARS/USD (chip dentro del hero)                         */
    /* ──────────────────────────────────────────────────────────── */
    /* v2.10.9 rev6 — Toggle moneda del hero PN con bg igual al de las
       cards de acciones rápidas (--hm-card-bg). Light: #f4f0e8, dark:
       #231f1a. Sin border para look limpio (mismo patrón que dm-curr-toggle). */
    .hm-curr-toggle {
        position: absolute; top: 14px; right: 14px;
        display: inline-flex; gap: 0;
        background: var(--hm-card-bg);
        border: 0;
        border-radius: 9px;
        padding: 3px;
        z-index: 2;
    }
    .hm-curr-toggle button {
        background: transparent; border: 0;
        color: var(--hm-ink-3);
        font-family: var(--hm-font-mono);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.04em;
        padding: 5px 12px;
        border-radius: 6px;
        cursor: pointer;
        min-width: 38px;
    }
    /* v2.10.9 fix #4 — Toggle moneda active: en light usa el color del
       bottom tab bar (ink dark #2d2520, coherente con navbar/FAB/active
       tabs en light), terracota (#a84a2a) en dark. Antes era terracota
       en ambos modos (regla general v2.10.9 item 8). */
    .hm-curr-toggle button.active {
        background: #2d2520;
        color: #fff;
        box-shadow: 0 1px 2px rgba(0,0,0,0.18);
    }

    /* Logo Netza en la esquina inferior derecha del hero PN. v2.10.8 — Logo
       +20% (42→50px), opacity -20% (0.85→0.68), y centrado horizontalmente
       respecto al toggle ARS/USD. Toggle: right 14 + width ~84 → center 56px;
       logo 50px → right 56 - 25 = 31px para alinear centros. */
    /* v2.10.26 rev2 — Logo del PN del home igualado al del dashboard
       mobile (94px, centrado verticalmente). Antes era 50px bottom-right
       (estaba dimensionado considerando que el toggle vivía adentro del
       hero — desde v2.10.26 el toggle se movió al header, así que el
       logo puede ocupar más espacio centrado). */
    .hm-hero-logo {
        position: absolute;
        top: 50%;
        right: 26px;
        bottom: auto;
        width: 94px;
        height: 94px;
        transform: translateY(-50%);
        opacity: 0.68;
        pointer-events: none;
        z-index: 1;
    }

    /* ──────────────────────────────────────────────────────────── */
    /* Resumen del mes — grid 2 cols                                 */
    /* ──────────────────────────────────────────────────────────── */
    .hm-resumen-grid {
        padding: 14px 18px 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .hm-resumen-card {
        background: var(--hm-card-bg);
        border: 1px solid var(--hm-rule-soft);
        border-radius: 16px;
        padding: 12px 14px;
        position: relative;
        overflow: hidden;
        min-height: 76px;
    }
    .hm-resumen-eyebrow,
    .hm-resumen-monto,
    .hm-resumen-fc { position: relative; z-index: 1; }
    .hm-resumen-eyebrow {
        font-family: var(--hm-font-mono);
        font-size: 9.5px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--hm-ink-3);
    }
    .hm-resumen-monto {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -0.02em;
        margin-top: 3px;
        font-variant-numeric: tabular-nums;
    }
    .hm-resumen-monto.pos { color: var(--hm-positivo); }
    .hm-resumen-monto.neg { color: var(--hm-negativo); }
    /* Spark wash de fondo — sombrea el área debajo de la curva, sutil.
       Path incluye Z close → genera área llenable. */
    .hm-resumen-spark {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        width: 100%;
        height: 60px;
        opacity: 0.16;
        pointer-events: none;
    }
    .hm-resumen-spark path {
        stroke: none;
        fill: var(--hm-ink-3);
    }
    .hm-resumen-spark.pos path { fill: var(--hm-positivo); }
    .hm-resumen-spark.neg path { fill: var(--hm-negativo); }

    /* Subtexto del forecast pegado al monto principal (preserva info actual). */
    .hm-resumen-fc {
        font-family: var(--hm-font-mono);
        font-size: 9.5px;
        color: var(--hm-ink-3);
        margin-top: 2px;
    }

    /* ──────────────────────────────────────────────────────────── */
    /* Quick actions — 4 botones                                     */
    /* ──────────────────────────────────────────────────────────── */
    .hm-section-eyebrow {
        font-family: var(--hm-font-mono);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--hm-ink-3);
        padding: 20px 18px 8px;
    }
    .hm-actions-grid {
        padding: 0 18px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    .hm-action-btn {
        background: var(--hm-action-bg);
        border: 1px solid var(--hm-action-border);
        border-radius: 14px;
        padding: 12px 6px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        color: var(--hm-ink);
        cursor: pointer;
        text-decoration: none;
        font-family: var(--hm-font-sans);
        /* Altura mínima fija para que las 4 tarjetas queden uniformes aunque
           Forecast Ingreso/Egreso ocupen 2 líneas y los otros 1 sola. */
        min-height: 78px;
    }
    .hm-action-btn i { font-size: 15px; }
    .hm-action-btn .hm-action-label {
        font-size: 11.5px;
        font-weight: 500;
        letter-spacing: -0.005em;
        text-align: center;
        line-height: 1.15;
        white-space: normal;
        word-break: break-word;
    }
    .hm-action-btn[data-action="ingreso"]      i { color: var(--hm-positivo); }
    .hm-action-btn[data-action="egreso"]       i { color: var(--hm-negativo); }
    .hm-action-btn[data-action="forecast-ing"] i { color: var(--hm-positivo); }
    .hm-action-btn[data-action="forecast-egr"] i { color: var(--hm-negativo); }

    /* ──────────────────────────────────────────────────────────── */
    /* Mis canales — header + lista                                  */
    /* ──────────────────────────────────────────────────────────── */
    .hm-section-header {
        padding: 22px 18px 8px;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    .hm-section-header .hm-section-eyebrow { padding: 0; }
    .hm-section-link {
        font-family: var(--hm-font-mono);
        font-size: 10.5px;
        color: var(--hm-ink-3);
        text-decoration: none;
        letter-spacing: 0.08em;
    }
    .hm-canales-wrap { padding: 0 18px; }

    /* Total canales: 1 card con suma agregada + botón reset que abre modal selector. */
    .hm-total-canales-card {
        background: var(--hm-card-bg);
        border: 1px solid var(--hm-rule-soft);
        border-radius: 16px;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .hm-total-canales-info { flex: 1; min-width: 0; }
    .hm-total-canales-label {
        font-family: var(--hm-font-mono);
        font-size: 9.5px;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--hm-ink-3);
    }
    .hm-total-canales-monto {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.025em;
        margin-top: 4px;
        font-variant-numeric: tabular-nums;
        /* v2.10.118 — Color #55514a (ink-3) para unificar con DT. En dark
           mode el override de abajo restaura el paper claro. */
        color: #55514a;
    }
    body.dark-mode .hm-total-canales-monto { color: var(--hm-ink); }
    /* v2.10.118 — formato condicional: positivo verde, negativo rojo,
       cero queda verde (binario >=0). */
    .hm-total-canales-monto.pos { color: var(--hm-positivo); }
    .hm-total-canales-monto.neg { color: var(--hm-negativo); }
    /* v2.10.124 — overrides para dark: `body.dark-mode .hm-total-canales-monto`
       (3 classes + 1 element) le gana a `.hm-total-canales-monto.pos/.neg`
       (2 classes) por specificity. Forzamos los hexes condicionales en dark. */
    body.dark-mode .hm-total-canales-monto.pos { color: var(--hm-positivo); }
    body.dark-mode .hm-total-canales-monto.neg { color: var(--hm-negativo); }
    .hm-total-canales-reset {
        width: 38px; height: 38px;
        border-radius: 11px;
        background: var(--hm-paper-warm);
        border: 1px solid var(--hm-rule-soft);
        color: var(--hm-ink-3);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        flex-shrink: 0;
    }
    .hm-total-canales-reset:active {
        background: var(--hm-ink);
        color: var(--hm-paper-warm);
    }
    .hm-canales-card {
        background: var(--hm-card-bg);
        border: 1px solid var(--hm-rule-soft);
        border-radius: 16px;
        overflow: hidden;
    }
    .hm-canal-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 16px;
        border-bottom: 1px solid var(--hm-rule);
    }
    .hm-canal-row:last-child { border-bottom: 0; }
    .hm-canal-logo {
        width: 38px; height: 38px;
        border-radius: 11px;
        color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-family: var(--hm-font-mono);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.02em;
        flex-shrink: 0;
    }
    .hm-canal-info { flex: 1; min-width: 0; }
    .hm-canal-nombre {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.005em;
        color: var(--hm-ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .hm-canal-sub {
        font-size: 11px;
        font-family: var(--hm-font-mono);
        color: var(--hm-ink-3);
        margin-top: 1px;
    }
    .hm-canal-monto {
        font-family: var(--hm-font-mono);
        font-size: 14px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.005em;
        color: var(--hm-ink);
        text-align: right;
        flex-shrink: 0;
    }
    .hm-canal-monto.neg { color: var(--hm-negativo); }

    /* ──────────────────────────────────────────────────────────── */
    /* Cotizaciones — al final del scroll                            */
    /* ──────────────────────────────────────────────────────────── */
    .hm-cotiz-section {
        padding: 22px 18px 8px;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
    }
    .hm-cotiz-fecha-header {
        font-family: var(--hm-font-mono);
        font-size: 9.5px;
        color: var(--hm-ink-3);
        letter-spacing: 0.06em;
        opacity: 0.85;
    }
    .hm-cotiz-grid {
        padding: 0 18px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .hm-cotiz-card {
        background: var(--hm-card-bg);
        border: 1px solid var(--hm-rule-soft);
        border-radius: 16px;
        padding: 12px 14px;
    }
    .hm-cotiz-nombre {
        font-family: var(--hm-font-mono);
        font-size: 9.5px;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--hm-ink-3);
    }
    .hm-cotiz-vals {
        display: flex; gap: 8px; align-items: baseline; margin-top: 4px;
    }
    .hm-cotiz-val {
        font-family: var(--hm-font-mono);
        font-size: 14px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.005em;
        color: var(--hm-ink);
    }
    .hm-cotiz-val.compra { color: var(--hm-positivo); }
    .hm-cotiz-val.venta  { color: var(--hm-negativo); }
    .hm-cotiz-sublabel {
        font-family: var(--hm-font-mono);
        font-size: 9px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--hm-ink-3);
    }
    .hm-cotiz-fecha {
        font-family: var(--hm-font-mono);
        font-size: 8.5px;
        color: var(--hm-ink-3);
        margin-top: 6px;
        letter-spacing: 0.04em;
        opacity: 0.85;
    }

    /* ──────────────────────────────────────────────────────────── */
    /* Tutorial panel — visible cuando body.home-tutorial-activo    */
    /* ──────────────────────────────────────────────────────────── */
    .hm-tutorial-panel {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 450;
        align-items: center;
        justify-content: center;
        padding: 24px;
        pointer-events: none;
    }
    body.home-tutorial-activo .hm-tutorial-panel {
        display: flex;
        pointer-events: auto;
    }
    .hm-tutorial-card {
        background: var(--hm-card-bg);
        border: 1px solid var(--hm-rule-soft);
        border-radius: 18px;
        padding: 22px 20px 18px;
        width: 360px;
        max-width: 100%;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 16px 48px rgba(20, 19, 17, 0.45);
        color: var(--hm-ink);
    }
    .hm-tutorial-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--hm-font-mono);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--hm-ink-3);
        padding-bottom: 14px;
        margin-bottom: 14px;
        border-bottom: 1px solid var(--hm-rule-soft);
    }
    .hm-tutorial-title i { color: var(--hm-accent); font-size: 13px; }
    .hm-tutorial-title span { letter-spacing: 0.04em; }
    .hm-tutorial-list {
        margin: 0 0 18px;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .hm-tutorial-list li {
        font-size: 12.5px;
        line-height: 1.45;
        color: var(--hm-ink-2);
    }
    .hm-tutorial-list strong {
        color: var(--hm-ink);
        font-weight: 600;
    }
    /* v2.10.9 rev11 — Dark mode: strong con terracota vibrante (regla
       general "palabras resaltadas en dark = #c0593c"). */
    body.dark-mode .hm-tutorial-list strong {
        color: #c0593c;
    }
    .hm-tutorial-close {
        width: 100%;
        background: transparent;
        border: 1px solid var(--hm-rule);
        border-radius: 10px;
        padding: 10px;
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--hm-ink-2);
        cursor: pointer;
    }
    .hm-tutorial-close:hover, .hm-tutorial-close:active {
        background: var(--hm-paper-warm);
    }
}

/* v2.10.75 (Facu 2026-05-13) — Refactor profundo: habilitar
   .home-mercado-wrap en DT (≥601px) replicando el look mobile adaptado
   (max-width 1200px, multi-cols, fonts más grandes). El .home-wrap
   legacy queda oculto en DT.
   IMPORTANTE: mobile NO se toca — todas las reglas mobile siguen scoped
   a @media (max-width: 600px). Este bloque DT es una réplica adaptada
   que coexiste sin pisar nada del mobile.
   Ver bloque @media (min-width: 601px) abajo (line ~1210). */

/* ────────────────────────────────────────────────────────────────
   Dark mode (body.dark-mode). Solo afecta al wrap home-mercado y
   las cards/modales asociadas. El resto de la app sigue en claro.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    body.dark-mode .home-mercado-wrap {
        --hm-paper:      #231f1a;
        --hm-paper-warm: #141311;
        --hm-ink:        #f4f0e8;
        --hm-ink-2:      #b8aea0;
        --hm-ink-3:      rgba(244, 240, 232, 0.55);
        --hm-rule:       rgba(255, 255, 255, 0.10);
        --hm-rule-soft:  rgba(255, 255, 255, 0.07);
        --hm-card-bg:    #231f1a;
        /* v2.11.7 (Facu 2026-05-16) — Quick actions dark: matchear el bg de
           las cards (#231f1a) en lugar del tono "neutro" white-04 anterior.
           Mas consistente con el resto del home en dark mode. */
        --hm-action-bg:    #231f1a;
        --hm-action-border:rgba(255, 255, 255, 0.08);
        /* v2.10.9 rev5 — Verde/rojo OSCUROS también en dark (decision Facu).
           Antes redefinía a los claros del hero PN; ahora se mantienen los
           oscuros que vienen del :root del wrap en light. */
    }
    body.dark-mode .home-mercado-wrap .hm-hero-pn {
        background: linear-gradient(140deg, #2a251f 0%, #1a1611 70%);
    }
    /* v2.10.26 rev2 — Toggle moneda del header del home: tamaño y look
       igualados al de dashboard/proyecciones/registros. Active terracota
       tanto en light como dark (pedido Facu, ver image 2).
       v2.10.89 (Facu 2026-05-14) — Wrap bg + border en dark mode: replican
       el patrón del dashboard (.db-currency-toggle dark) — rgba blanco
       translúcido. Antes el wrap heredaba var(--netza-stone) = #ebe5d8
       (light beige) que en dark mode quedaba muy claro y rompía contraste. */
    body.dark-mode .home-mercado-wrap .dm-curr-toggle {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.10);
    }
    body.dark-mode .home-mercado-wrap .dm-curr-toggle button {
        color: rgba(244, 240, 232, 0.62);
    }
    body.dark-mode .home-mercado-wrap .dm-curr-toggle button.active {
        background: var(--hm-accent, #a84a2a) !important;
        color: #fff !important;
    }
    body.dark-mode .home-mercado-wrap .hm-total-canales-reset {
        background: rgba(255, 255, 255, 0.04);
        color: var(--hm-ink-3);
    }
    /* v2.10.9 fix #4 — Toggle moneda active en dark: terracota Netza.
       En light el base ya es ink dark #2d2520. */
    body.dark-mode .home-mercado-wrap .hm-curr-toggle button.active {
        background: #a84a2a;
    }
    /* v2.10.9 rev6 — Toggle moneda dark hereda --hm-card-bg (#231f1a) sin
       override. Antes era rgba blanco translúcido; ahora unificado al bg
       de las cards de acciones rápidas. */
    /* Bottom tab bar oscuro */
    body.dark-mode nav.netza-bottom-tabs {
        background: #1a1611;
        border-top-color: rgba(255, 255, 255, 0.08);
    }
    body.dark-mode .netza-bottom-tab { color: rgba(244, 240, 232, 0.55); }
    body.dark-mode .netza-bottom-tab.active { color: #f4f0e8; }
}
body.dark-mode .hm-modal-card {
    background: #231f1a;
    border-color: rgba(255, 255, 255, 0.08);
    color: #f4f0e8;
}
body.dark-mode .hm-modal-title { color: rgba(244, 240, 232, 0.55); border-bottom-color: rgba(255, 255, 255, 0.08); }
body.dark-mode .hm-modal-text { color: #b8aea0; }
body.dark-mode .hm-modal-label { color: rgba(244, 240, 232, 0.55); }
/* v2.10.91 (Facu 2026-05-14) — !important para vencer la regla base
   (línea 1076) que tiene `background: #fbf8f2 !important` para evitar
   que la global de inputs mobile lo pise. Sin !important acá, el dark
   nunca aplicaba sobre el bg → input "fijar saldo" se veía con bg
   blanco en dark mode. */
body.dark-mode .hm-modal-input {
    background: #1a1611 !important;
    border-color: rgba(255, 255, 255, 0.10);
    color: #f4f0e8;
}
body.dark-mode .hm-modal-input:focus { background: #2a251f !important; }
body.dark-mode .hm-modal-lista .home-canal-select-item {
    background: #1a1611;
    border-color: rgba(255, 255, 255, 0.06);
}
body.dark-mode .hm-modal-lista .home-canal-select-item:hover,
body.dark-mode .hm-modal-lista .home-canal-select-item:active {
    background: #2a251f;
}
body.dark-mode .hm-modal-lista .home-canal-select-nombre { color: #f4f0e8; }

/* v2.11.36 — Canal linkeado a IOL: sombreado + cursor not-allowed +
   icono "link" al lado del nombre. Click hace alert (no abre modal). */
.home-canal-select-item--iol-locked {
    opacity: 0.55;
    cursor: not-allowed;
}
.home-canal-select-item--iol-locked:hover,
.home-canal-select-item--iol-locked:active {
    /* anula los hover backgrounds default — el canal IOL no debe responder
       visualmente al hover/active porque no es clickeable de verdad */
    background: inherit !important;
}
.home-canal-select-iol-icon {
    margin-left: 6px;
    font-size: 11px;
    color: var(--netza-terracota, #a84a2a);
    opacity: 0.85;
}
body.dark-mode .hm-modal-btn-cancel {
    border-color: rgba(255, 255, 255, 0.12);
    color: #b8aea0;
}
body.dark-mode .hm-modal-btn-cancel:hover { background: rgba(255, 255, 255, 0.05); }
body.dark-mode .hm-modal-btn-primary {
    background: #a84a2a;
    border-color: #a84a2a;
}
body.dark-mode .hm-modal-btn-primary:hover { background: #c0593c; border-color: #c0593c; }

/* Modal WebAuthn (Login más rápido) — rediseño + dark mode. */
.webauthn-offer-card {
    max-width: 380px;
    width: calc(100% - 32px);
    text-align: center;
    padding: 26px 24px 22px !important;
}
.webauthn-offer-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 14px;
    background: rgba(168, 74, 42, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
}
.webauthn-offer-icon i {
    font-size: 32px;
    color: #a84a2a;
}
.webauthn-offer-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #2d2520;
}
.webauthn-offer-text {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: #4a3f35;
}
.webauthn-offer-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.webauthn-offer-actions .hm-modal-btn-primary,
.webauthn-offer-actions .hm-modal-btn-cancel {
    padding: 10px 22px;
    font-size: 13px;
    margin-left: 0;
}
.webauthn-offer-msg {
    margin: 12px 0 0;
    font-size: 12px;
    color: #6b6157;
}
body.dark-mode .webauthn-offer-icon {
    background: rgba(168, 74, 42, 0.18);
}
body.dark-mode .webauthn-offer-title { color: #f4f0e8; }
body.dark-mode .webauthn-offer-text { color: #b8aea0; }
body.dark-mode .webauthn-offer-msg { color: rgba(244, 240, 232, 0.55); }

/* Modal Upgrade Required (window.abrirModalUpgrade) — rediseño + dark mode.
   Se invoca para todos los gates premium: Asistente IA, Splitza, forecast
   masivo, recordatorios, multi-tarjeta, etc. */
.mur-card {
    max-width: 380px;
    width: calc(100% - 32px);
    text-align: center;
    padding: 26px 24px 20px !important;
}
.mur-icon-wrap {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    background: rgba(168, 74, 42, 0.12);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mur-icon-wrap i {
    font-size: 22px;
    color: #a84a2a;
}
.mur-title {
    margin: 0 0 6px;
    font-family: 'Roboto', system-ui, -apple-system, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: #2d2520;
}
.mur-feature {
    margin: 0 0 14px;
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.10em;
    color: #6b6157;
}
.mur-text {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.5;
    color: #4a3f35;
}
.mur-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.mur-btn-upgrade {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.dark-mode .mur-icon-wrap {
    background: rgba(168, 74, 42, 0.22);
}
body.dark-mode .mur-title { color: #f4f0e8; }
body.dark-mode .mur-feature { color: rgba(244, 240, 232, 0.65); }
body.dark-mode .mur-text { color: #b8aea0; }

/* ────────────────────────────────────────────────────────────────
   Modal selector de canal (rediseño Home Mercado).
   Fuera del @media porque el modal se reusa en dashboard desktop.
   ──────────────────────────────────────────────────────────────── */
.hm-modal-card {
    background: #f4f0e8;
    border: 1px solid #ede4d2;
    border-radius: 20px;
    padding: 22px 20px 18px;
    width: 360px;
    max-width: calc(100% - 32px);
    box-shadow: 0 16px 48px rgba(20, 19, 17, 0.32);
    font-family: 'Roboto', system-ui, -apple-system, sans-serif;
    color: #2d2520;
}
.hm-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6b6157;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #ede4d2;
}
.hm-modal-title i { font-size: 13px; color: #a84a2a; }
.hm-modal-title span { letter-spacing: 0.04em; }
.hm-modal-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 50vh;
    overflow-y: auto;
}
.hm-modal-lista .home-canal-select-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fbf8f2;
    border: 1px solid #ede4d2;
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    transition: background .15s, border-color .15s;
}
.hm-modal-lista .home-canal-select-item:hover,
.hm-modal-lista .home-canal-select-item:active {
    background: #f4f0e8;
    border-color: #e1d8c4;
}
.hm-modal-lista .home-canal-select-nombre {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: #2d2520;
}
.hm-modal-lista .home-canal-select-saldo {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--hm-positivo, #3a7d5a);
}
.hm-modal-lista .home-canal-select-saldo.home-val-neg { color: var(--hm-negativo, #c45a3f); }
.hm-modal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}
.hm-modal-btn-cancel {
    background: transparent;
    border: 1px solid #e1d8c4;
    border-radius: 10px;
    padding: 8px 18px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: #4a3f35;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.hm-modal-btn-cancel:hover, .hm-modal-btn-cancel:active {
    background: #f4f0e8;
    border-color: #c0b6a0;
}
.hm-modal-btn-primary {
    background: #2d2520;
    border: 1px solid #2d2520;
    border-radius: 10px;
    padding: 8px 18px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: #fbf8f2;
    cursor: pointer;
    transition: background .15s;
    margin-left: 8px;
}
.hm-modal-btn-primary:hover, .hm-modal-btn-primary:active {
    background: #a84a2a;
    border-color: #a84a2a;
}
.hm-modal-text {
    font-size: 13px;
    line-height: 1.5;
    color: #4a3f35;
    margin-bottom: 18px;
}
.hm-modal-form-group {
    margin-bottom: 18px;
}
.hm-modal-label {
    display: block;
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6b6157;
    margin-bottom: 8px;
}
.hm-modal-input {
    width: 100%;
    padding: 10px 12px;
    /* v2.10.72 (Facu 2026-05-13) — !important para vencer la regla global
       de inputs en netza-base.css que pone bg #f4f0e8 para todos los
       input[type] dentro de body[mobile-page]. El input del modal debe
       quedar paper-warm para contrastar con el card paper. */
    background: #fbf8f2 !important;
    border: 1px solid #e1d8c4;
    border-radius: 10px;
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 14px;
    color: #2d2520;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}
.hm-modal-input:focus {
    outline: 0;
    border-color: #a84a2a;
    background: #fff;
}
.hm-modal-input::placeholder { color: #9b9085; }
.hm-modal-title strong { color: #a84a2a; letter-spacing: -0.005em; }

/* Variantes adicionales para modales del tour / confirmaciones */
.hm-modal-estado {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 10.5px;
    color: #6b6157;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
    padding: 10px 12px;
    background: #fbf8f2;
    border: 1px solid #ede4d2;
    border-radius: 10px;
}
.hm-modal-buttons-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.hm-modal-btn-block {
    width: 100%;
    text-align: center;
    margin-left: 0;
    /* v2.10.x (Facu 2026-05-13) — Centrar ícono+texto cuando el JS pone
       display:inline-flex sobre el botón (ej. "Continuar tour"). Sin
       justify-content el contenido quedaba pegado a la izquierda. */
    justify-content: center;
    align-items: center;
}
.hm-modal-btn-block i { margin-right: 6px; }

/* Modal confirmar global (window.confirmarNetza) — apply hm-* look */
#modal-confirmar-netza .netza-modal-confirm-card {
    background: #f4f0e8 !important;
    border: 1px solid #ede4d2 !important;
    border-radius: 20px !important;
    padding: 26px 24px 20px !important;
    width: 380px !important;
    max-width: calc(100% - 32px) !important;
    box-shadow: 0 16px 48px rgba(20, 19, 17, 0.32) !important;
    font-family: 'Roboto', system-ui, -apple-system, sans-serif;
}
#modal-confirmar-netza #mcn-icon-wrap {
    border-radius: 12px !important;
    width: 48px !important;
    height: 48px !important;
}
#modal-confirmar-netza #mcn-titulo {
    font-family: 'Roboto', sans-serif;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    color: #2d2520 !important;
    margin: 0 0 8px !important;
}
#modal-confirmar-netza #mcn-mensaje {
    font-size: 13px !important;
    color: #4a3f35 !important;
    line-height: 1.5 !important;
    margin: 0 0 18px !important;
}
#modal-confirmar-netza #mcn-btn-cancel {
    background: transparent !important;
    border: 1px solid #e1d8c4 !important;
    border-radius: 10px !important;
    padding: 8px 18px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #4a3f35 !important;
}
#modal-confirmar-netza #mcn-btn-cancel:hover {
    background: #f4f0e8 !important;
    border-color: #c0b6a0 !important;
}
#modal-confirmar-netza #mcn-btn-ok {
    border-radius: 10px !important;
    padding: 8px 18px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}

/* Dark mode para confirmar + tour estado */
body.dark-mode .hm-modal-estado {
    background: #1a1611;
    border-color: rgba(255, 255, 255, 0.06);
    color: rgba(244, 240, 232, 0.55);
}
body.dark-mode #modal-confirmar-netza .netza-modal-confirm-card {
    background: #231f1a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode #modal-confirmar-netza #mcn-titulo { color: #f4f0e8 !important; }
body.dark-mode #modal-confirmar-netza #mcn-mensaje { color: #b8aea0 !important; }
body.dark-mode #modal-confirmar-netza #mcn-btn-cancel {
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #b8aea0 !important;
}
body.dark-mode #modal-confirmar-netza #mcn-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ──────────────────────────────────────────────────────────────────
   v2.10.x (Facu 2026-05-13) — Modal Tour Guiado: aplicar la lógica
   de paleta unificada (wrap/contenedor #fbf8f2, blocks internos
   #f4f0e8) y eliminar líneas visibles entre secciones.
   Solo light mode (:not(.dark-mode)).
   ────────────────────────────────────────────────────────────────── */
body:not(.dark-mode) #modal-tour-guiado .hm-modal-card {
    background: #fbf8f2;
    border-color: #fbf8f2;
}
body:not(.dark-mode) #modal-tour-guiado .hm-modal-title {
    /* Quitar border-bottom para evitar línea visible debajo del título. */
    border-bottom-color: transparent;
}
body:not(.dark-mode) #modal-tour-guiado .hm-modal-estado {
    background: #f4f0e8;
    border-color: #f4f0e8;
}
body:not(.dark-mode) #modal-tour-guiado .hm-modal-btn-cancel {
    background: #f4f0e8;
    border-color: #f4f0e8;
}
body:not(.dark-mode) #modal-tour-guiado .hm-modal-btn-cancel:hover,
body:not(.dark-mode) #modal-tour-guiado .hm-modal-btn-cancel:active {
    background: #ede4d2;
    border-color: #ede4d2;
}

/* ════════════════════════════════════════════════════════════════════
   v2.10.75 (Facu 2026-05-13) — Home Mercado en DT (≥601px).
   Refactor profundo: replicar look mobile pero adaptado para pantallas
   anchas (max-width 1200px centered, padding generoso, grids multi-col,
   fonts más grandes). Cada regla acá es independiente del mobile (que
   sigue scoped a @media max-width:600px más arriba), no se pisan.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 601px) {
    /* Ocultar el .home-wrap legacy en DT — el .home-mercado-wrap lo
       reemplaza. .home-legacy-extras también (cotizaciones legacy). */
    .home-wrap { display: none !important; }
    .home-legacy-extras { display: none !important; }

    /* Resetear el .container global cuando contiene el wrap, para evitar
       doble marco (el wrap ya tiene su bg paper-warm + max-width propio).
       Igual que en mobile (línea ~70), pero scoped a DT.
       v2.10.118 — `:has(> .home-mercado-wrap)` (hijo directo) para no pisar
       el padding del container cuando el wrap se usa anidado como sub-wrapper
       (caso del dashboard que importa los estilos sin ser home root). */
    .container:has(> .home-mercado-wrap) {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        max-width: none !important;
        box-shadow: none !important;
    }

    /* Container raíz: max-width 1200px centered + tokens + tipografía.
       v2.10.76 (Facu 2026-05-13) — Compactado para que TODO entre en
       viewport sin scroll vertical: padding chico, fonts más medidas,
       cards más bajas. Usa clamp() para escalar con el viewport. */
    .home-mercado-wrap {
        display: block !important;
        --hm-paper:      #f4f0e8;
        --hm-paper-warm: #fbf8f2;
        --hm-ink:        #2d2520;
        --hm-ink-2:      #4a3f35;
        --hm-ink-3:      #6b6157;
        --hm-rule:       #e1d8c4;
        --hm-rule-soft:  #ede4d2;
        --hm-accent:     #a84a2a;
        --hm-accent-deep:#7d3318;
        --hm-positivo:   #3a7d5a;
        --hm-negativo:   #c45a3f;
        --hm-ink-dark:   #141311;
        --hm-card-bg:    var(--hm-paper);
        --hm-action-bg:    var(--hm-card-bg);
        --hm-action-border:var(--hm-rule-soft);
        --hm-font-sans:    'Roboto', system-ui, -apple-system, sans-serif;
        --hm-font-mono:    'Roboto Mono', ui-monospace, monospace;
        --dm-card-bg:    var(--hm-card-bg);
        --dm-ink:        var(--hm-ink);
        --dm-ink-3:      var(--hm-ink-3);
        --dm-rule:       var(--hm-rule);
        --dm-font-mono:  var(--hm-font-mono);
        background: var(--hm-paper-warm);
        color: var(--hm-ink);
        font-family: var(--hm-font-sans);
        /* v2.10.108 (Facu 2026-05-14) — Full-width (antes max-width 1200px
           centered). El home ahora ocupa todo el ancho disponible en DT
           como el resto de las pantallas. */
        max-width: none;
        margin: 0;
        padding: clamp(10px, 1.5vh, 18px) clamp(16px, 2vw, 28px);
        min-height: auto;
    }

    /* Header: fecha + saludo + íconos */
    .home-mercado-wrap .hm-header {
        padding: 0 0 clamp(6px, 1vh, 12px);
    }
    .home-mercado-wrap .hm-header-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 12px;
    }
    .home-mercado-wrap .hm-fecha {
        font-family: var(--hm-font-mono);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--hm-ink-3);
    }
    .home-mercado-wrap .hm-header-icons {
        display: flex;
        align-items: center;
        gap: 14px;
        color: var(--hm-ink-3);
    }
    /* v2.10.85 (Facu 2026-05-14) — Toggle DT igualado al
       .db-currency-toggle del dashboard.
       v2.10.107 — Bg paper #f4f0e8. Border mismo color (sin contraste). */
    .home-mercado-wrap .hm-curr-toggle-header.dm-curr-toggle {
        background: #f4f0e8;
        border: 1px solid #f4f0e8;
        border-radius: 8px;
        padding: 3px;
    }
    .home-mercado-wrap .hm-curr-toggle-header.dm-curr-toggle button {
        padding: 5px 12px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.04em;
        line-height: 1;
        min-width: 36px;
        border-radius: 6px;
        font-family: var(--hm-font-mono);
        color: var(--hm-ink-3);
        background: transparent;
        border: 0;
        cursor: pointer;
        text-align: center;
        transition: background 0.15s, color 0.15s;
    }
    .home-mercado-wrap .hm-curr-toggle-header.dm-curr-toggle button.active {
        background: var(--hm-ink, #2d2520) !important;
        color: #fff !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.18);
    }
    .home-mercado-wrap .hm-icon-btn {
        background: transparent;
        border: 0;
        padding: 0;
        color: var(--hm-ink-3);
        cursor: pointer;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .home-mercado-wrap .hm-icon-btn i { font-size: 15px; }
    /* v2.10.96 (Facu 2026-05-14) — Lamparita activa unificada en netza-base.css. */

    /* Saludo — clamp para escalar con viewport (no fijo grande). */
    .home-mercado-wrap .hm-saludo {
        font-family: var(--hm-font-mono);
        font-size: clamp(16px, 2.4vh, 22px);
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        margin: clamp(2px, 0.6vh, 6px) 0 0;
        color: var(--hm-ink);
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 8px;
    }
    .home-mercado-wrap .hm-saludo-nombre {
        color: var(--hm-ink);
        outline: none;
        border-radius: 4px;
        padding: 0 3px;
        transition: background .15s, box-shadow .15s;
    }
    .home-mercado-wrap .hm-saludo-nombre--edit {
        background: rgba(168, 74, 42, 0.08);
        box-shadow: inset 0 -2px 0 var(--hm-accent);
    }
    .home-mercado-wrap .hm-saludo-edit {
        background: transparent;
        border: 0;
        font-size: 13px;
        color: var(--hm-ink-3);
        opacity: 0.55;
        padding: 3px 8px;
        border-radius: 6px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        transition: opacity .15s, background .15s;
    }
    .home-mercado-wrap .hm-saludo-edit:hover {
        opacity: 1;
        background: rgba(0, 0, 0, 0.04);
    }

    /* Hero PN — compactado con clamp() para escalar con el viewport. */
    .home-mercado-wrap .hm-hero-wrap { padding: clamp(8px, 1vh, 12px) 0 0; }
    .home-mercado-wrap .hm-hero-pn {
        background: linear-gradient(140deg, var(--hm-ink-dark) 0%, var(--hm-ink) 70%);
        color: #fff;
        border-radius: 18px;
        padding: clamp(14px, 2vh, 22px) clamp(18px, 2vw, 28px);
        position: relative;
        overflow: hidden;
        min-height: clamp(110px, 18vh, 150px);
    }
    .home-mercado-wrap .hm-hero-eyebrow {
        font-family: var(--hm-font-mono);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(244, 240, 232, 0.55);
    }
    .home-mercado-wrap .hm-hero-monto {
        font-size: clamp(28px, 4.8vh, 44px);
        font-weight: 700;
        letter-spacing: -0.035em;
        margin-top: 4px;
        line-height: 1.05;
        font-variant-numeric: tabular-nums;
        color: #3a7d5a;
    }
    .home-mercado-wrap .hm-hero-monto.neg { color: #c45a3f; }
    .home-mercado-wrap .hm-hero-delta {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-top: 8px;
    }
    .home-mercado-wrap .hm-hero-chip {
        background: transparent;
        color: #3a7d5a;
        padding: 0;
        border-radius: 0;
        font-family: var(--hm-font-mono);
        font-size: 12px;
        font-weight: 600;
    }
    .home-mercado-wrap .hm-hero-chip.neg {
        background: transparent;
        color: #c45a3f;
    }
    .home-mercado-wrap .hm-hero-chip-sub {
        font-family: var(--hm-font-mono);
        font-size: 11.5px;
        color: rgba(244, 240, 232, 0.6);
    }
    .home-mercado-wrap .hm-hero-logo {
        position: absolute;
        top: 50%;
        right: clamp(20px, 2vw, 30px);
        bottom: auto;
        width: clamp(80px, 12vh, 110px);
        height: clamp(80px, 12vh, 110px);
        transform: translateY(-50%);
        opacity: 0.68;
        pointer-events: none;
        z-index: 1;
    }

    /* Resumen del mes — 2 cards, alturas compactadas */
    .home-mercado-wrap .hm-resumen-grid {
        padding: clamp(8px, 1.2vh, 14px) 0 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .home-mercado-wrap .hm-resumen-card {
        background: var(--hm-card-bg);
        border: 1px solid var(--hm-rule-soft);
        border-radius: 16px;
        padding: clamp(10px, 1.4vh, 14px) clamp(14px, 1.5vw, 18px);
        position: relative;
        overflow: hidden;
        min-height: clamp(70px, 10vh, 90px);
    }
    .home-mercado-wrap .hm-resumen-eyebrow,
    .home-mercado-wrap .hm-resumen-monto,
    .home-mercado-wrap .hm-resumen-fc { position: relative; z-index: 1; }
    .home-mercado-wrap .hm-resumen-eyebrow {
        font-family: var(--hm-font-mono);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--hm-ink-3);
    }
    .home-mercado-wrap .hm-resumen-monto {
        font-size: clamp(18px, 2.8vh, 24px);
        font-weight: 700;
        letter-spacing: -0.025em;
        margin-top: 3px;
        font-variant-numeric: tabular-nums;
    }
    .home-mercado-wrap .hm-resumen-monto.pos { color: var(--hm-positivo); }
    .home-mercado-wrap .hm-resumen-monto.neg { color: var(--hm-negativo); }
    .home-mercado-wrap .hm-resumen-spark {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        width: 100%;
        height: 60px;
        opacity: 0.16;
        pointer-events: none;
    }
    .home-mercado-wrap .hm-resumen-spark path { stroke: none; fill: var(--hm-ink-3); }
    .home-mercado-wrap .hm-resumen-spark.pos path { fill: var(--hm-positivo); }
    .home-mercado-wrap .hm-resumen-spark.neg path { fill: var(--hm-negativo); }
    .home-mercado-wrap .hm-resumen-fc {
        font-family: var(--hm-font-mono);
        font-size: 10.5px;
        color: var(--hm-ink-3);
        margin-top: 3px;
    }

    /* Section eyebrow + section header */
    .home-mercado-wrap .hm-section-eyebrow {
        font-family: var(--hm-font-mono);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--hm-ink-3);
        padding: clamp(10px, 1.6vh, 18px) 0 clamp(4px, 0.8vh, 8px);
    }
    .home-mercado-wrap .hm-section-header {
        padding: clamp(10px, 1.8vh, 20px) 0 clamp(4px, 0.8vh, 8px);
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    .home-mercado-wrap .hm-section-header .hm-section-eyebrow { padding: 0; }
    .home-mercado-wrap .hm-section-link {
        font-family: var(--hm-font-mono);
        font-size: 10.5px;
        color: var(--hm-ink-3);
        text-decoration: none;
        letter-spacing: 0.10em;
    }
    .home-mercado-wrap .hm-section-link:hover { color: var(--hm-ink); }

    /* Quick actions — 4 botones, compactos */
    .home-mercado-wrap .hm-actions-grid {
        padding: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    .home-mercado-wrap .hm-action-btn {
        background: var(--hm-action-bg);
        border: 1px solid var(--hm-action-border);
        border-radius: 14px;
        padding: clamp(10px, 1.4vh, 14px) 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: var(--hm-ink);
        cursor: pointer;
        text-decoration: none;
        font-family: var(--hm-font-sans);
        min-height: clamp(64px, 9vh, 84px);
        transition: border-color .15s, transform .12s, box-shadow .15s;
    }
    .home-mercado-wrap .hm-action-btn:hover {
        border-color: var(--hm-rule);
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(20, 19, 17, 0.06);
    }
    .home-mercado-wrap .hm-action-btn i { font-size: 16px; }
    .home-mercado-wrap .hm-action-btn .hm-action-label {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: -0.005em;
        text-align: center;
        line-height: 1.2;
        white-space: normal;
        word-break: break-word;
    }
    .home-mercado-wrap .hm-action-btn[data-action="ingreso"]      i { color: var(--hm-positivo); }
    .home-mercado-wrap .hm-action-btn[data-action="egreso"]       i { color: var(--hm-negativo); }
    .home-mercado-wrap .hm-action-btn[data-action="forecast-ing"] i { color: var(--hm-positivo); }
    .home-mercado-wrap .hm-action-btn[data-action="forecast-egr"] i { color: var(--hm-negativo); }

    /* Total canales card — compacto */
    .home-mercado-wrap .hm-canales-wrap { padding: 0; }
    .home-mercado-wrap .hm-total-canales-card {
        background: var(--hm-card-bg);
        border: 1px solid var(--hm-rule-soft);
        border-radius: 16px;
        padding: clamp(10px, 1.4vh, 14px) clamp(14px, 1.5vw, 18px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }
    .home-mercado-wrap .hm-total-canales-info { flex: 1; min-width: 0; }
    .home-mercado-wrap .hm-total-canales-label {
        font-family: var(--hm-font-mono);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--hm-ink-3);
    }
    .home-mercado-wrap .hm-total-canales-monto {
        font-size: clamp(20px, 3vh, 26px);
        font-weight: 700;
        letter-spacing: -0.03em;
        margin-top: 3px;
        font-variant-numeric: tabular-nums;
        /* v2.10.118 — Color #55514a (ink-3) para unificar con DT. Dark mode
           restaurado abajo. */
        color: #55514a;
    }
    body.dark-mode .home-mercado-wrap .hm-total-canales-monto { color: var(--hm-ink); }
    .home-mercado-wrap .hm-total-canales-monto.pos { color: var(--hm-positivo); }
    .home-mercado-wrap .hm-total-canales-monto.neg { color: var(--hm-negativo); }
    /* v2.10.124 — overrides para dark DT: same specificity fix que mobile. */
    body.dark-mode .home-mercado-wrap .hm-total-canales-monto.pos { color: var(--hm-positivo); }
    body.dark-mode .home-mercado-wrap .hm-total-canales-monto.neg { color: var(--hm-negativo); }
    .home-mercado-wrap .hm-total-canales-reset {
        width: 38px; height: 38px;
        border-radius: 11px;
        background: var(--hm-paper-warm);
        border: 1px solid var(--hm-rule-soft);
        color: var(--hm-ink-3);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        flex-shrink: 0;
        transition: background .15s, color .15s;
    }
    .home-mercado-wrap .hm-total-canales-reset:hover {
        background: var(--hm-ink);
        color: var(--hm-paper-warm);
    }

    /* Cotizaciones — 4 cols en DT, compactos */
    .home-mercado-wrap .hm-cotiz-section {
        padding: clamp(10px, 1.8vh, 20px) 0 clamp(4px, 0.8vh, 8px);
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 16px;
    }
    .home-mercado-wrap .hm-cotiz-fecha-header {
        font-family: var(--hm-font-mono);
        font-size: 10.5px;
        color: var(--hm-ink-3);
        letter-spacing: 0.08em;
        opacity: 0.85;
    }
    .home-mercado-wrap .hm-cotiz-grid {
        padding: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    .home-mercado-wrap .hm-cotiz-card {
        background: var(--hm-card-bg);
        border: 1px solid var(--hm-rule-soft);
        border-radius: 14px;
        padding: clamp(8px, 1.2vh, 12px) clamp(12px, 1.4vw, 16px);
    }
    .home-mercado-wrap .hm-cotiz-nombre {
        font-family: var(--hm-font-mono);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--hm-ink-3);
    }
    .home-mercado-wrap .hm-cotiz-vals {
        display: flex; gap: 14px; align-items: baseline; margin-top: 8px;
    }
    .home-mercado-wrap .hm-cotiz-val {
        font-family: var(--hm-font-mono);
        font-size: 17px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.005em;
        color: var(--hm-ink);
    }
    .home-mercado-wrap .hm-cotiz-val.compra { color: var(--hm-positivo); }
    .home-mercado-wrap .hm-cotiz-val.venta  { color: var(--hm-negativo); }
    .home-mercado-wrap .hm-cotiz-sublabel {
        font-family: var(--hm-font-mono);
        font-size: 10px;
        letter-spacing: 0.10em;
        text-transform: uppercase;
        color: var(--hm-ink-3);
    }
    .home-mercado-wrap .hm-cotiz-fecha {
        font-family: var(--hm-font-mono);
        font-size: 9.5px;
        color: var(--hm-ink-3);
        margin-top: 8px;
        letter-spacing: 0.04em;
        opacity: 0.85;
    }

    /* Tutorial panel — sigue fixed centered */
    .home-mercado-wrap .hm-tutorial-panel {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 450;
        align-items: center;
        justify-content: center;
        padding: 24px;
        pointer-events: none;
    }
    body.home-tutorial-activo .home-mercado-wrap .hm-tutorial-panel {
        display: flex;
        pointer-events: auto;
    }
    .home-mercado-wrap .hm-tutorial-card {
        background: var(--hm-card-bg);
        border: 1px solid var(--hm-rule-soft);
        border-radius: 20px;
        padding: 26px 26px 22px;
        width: 480px;
        max-width: 100%;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 16px 48px rgba(20, 19, 17, 0.45);
        color: var(--hm-ink);
    }
    .home-mercado-wrap .hm-tutorial-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--hm-font-mono);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--hm-ink-3);
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-bottom: 1px solid var(--hm-rule-soft);
    }
    .home-mercado-wrap .hm-tutorial-title i { color: var(--hm-accent); font-size: 14px; }
    .home-mercado-wrap .hm-tutorial-list {
        margin: 0 0 20px;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .home-mercado-wrap .hm-tutorial-list li {
        font-size: 13.5px;
        line-height: 1.5;
        color: var(--hm-ink-2);
    }
    .home-mercado-wrap .hm-tutorial-list strong {
        color: var(--hm-ink);
        font-weight: 600;
    }
    .home-mercado-wrap .hm-tutorial-close {
        width: 100%;
        background: transparent;
        border: 1px solid var(--hm-rule);
        border-radius: 11px;
        padding: 12px;
        font-family: inherit;
        font-size: 13.5px;
        font-weight: 500;
        color: var(--hm-ink-2);
        cursor: pointer;
        transition: background .15s, border-color .15s;
    }
    .home-mercado-wrap .hm-tutorial-close:hover {
        background: var(--hm-paper-warm);
        border-color: var(--hm-ink-3);
    }

}

/* v2.10.76 — Pantallas muy anchas (>1400px): pequeño respiro extra de
   padding lateral. Las fonts ya escalan con clamp() según viewport. */
@media (min-width: 1401px) {
    .home-mercado-wrap { padding-left: 40px; padding-right: 40px; }
}

/* Dark mode para Home Mercado en DT (≥601px) — espeja la lógica mobile. */
@media (min-width: 601px) {
    body.dark-mode .home-mercado-wrap {
        --hm-paper:      #231f1a;
        --hm-paper-warm: #141311;
        --hm-ink:        #f4f0e8;
        --hm-ink-2:      #b8aea0;
        --hm-ink-3:      rgba(244, 240, 232, 0.55);
        --hm-rule:       rgba(255, 255, 255, 0.10);
        --hm-rule-soft:  rgba(255, 255, 255, 0.07);
        --hm-card-bg:    #231f1a;
        /* v2.11.7 (Facu 2026-05-16) — Idem mobile dark: action bg = card bg. */
        --hm-action-bg:    #231f1a;
        --hm-action-border:rgba(255, 255, 255, 0.08);
    }
    body.dark-mode .home-mercado-wrap .hm-hero-pn {
        background: linear-gradient(140deg, #2a251f 0%, #1a1611 70%);
    }
    /* v2.10.89 — Toggle moneda dark DT (espejo del mobile arriba). */
    body.dark-mode .home-mercado-wrap .dm-curr-toggle {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.10);
    }
    body.dark-mode .home-mercado-wrap .dm-curr-toggle button {
        color: rgba(244, 240, 232, 0.62);
    }
    body.dark-mode .home-mercado-wrap .dm-curr-toggle button.active {
        background: var(--hm-accent, #a84a2a) !important;
        color: #fff !important;
    }
    body.dark-mode .home-mercado-wrap .hm-total-canales-reset {
        background: rgba(255, 255, 255, 0.04);
        color: var(--hm-ink-3);
    }
    body.dark-mode .home-mercado-wrap .hm-tutorial-list strong {
        color: #c0593c;
    }
}