/* Alpha Link · la piel del panel (capa 2026).

   Va encima de style.css y no declara variables: todas salen de
   tokens.css. Escribir un color a mano aquí vuelve a partir el diseño
   en dos, que es justo lo que esta hoja existe para evitar. */

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 88% -10%, color-mix(in srgb, var(--al-accent) 14%, transparent), transparent 35rem),
        var(--al-bg);
    color: var(--al-ink);
    font-family: var(--al-fuente);
}

.app {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 22px 20px 64px;
}

.app-content { min-width: 0; }

.topbar {
    min-height: 62px;
    margin: 0 0 22px;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
}

.topbar-left { gap: 12px; }
.brand { gap: 11px; }
.brand-mark { width: 38px; height: 38px; flex: 0 0 38px; }
.brand-name { color: var(--al-ink); font-size: 1.05rem; font-weight: 700; letter-spacing: -.035em; }
.brand-name .lk { color: var(--al-accent); }
.brand-sub { color: var(--al-muted); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.menu-btn,
.sheet-close,
.mini {
    border: 1px solid var(--al-line);
    background: var(--al-surface);
    color: var(--al-ink);
    box-shadow: none;
}
.menu-btn { width: 44px; height: 44px; border-radius: 50%; }
.menu-btn:hover,
.sheet-close:hover,
.mini:hover { border-color: var(--al-accent); background: var(--al-accent-soft); }

.back-link {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--al-line);
    border-radius: 999px;
    background: var(--al-surface);
    color: var(--al-muted);
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}
.back-link:hover { border-color: var(--al-accent); background: var(--al-accent-soft); color: var(--al-ink); }

.status-chip {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid currentColor;
    background: transparent;
    font-size: .7rem;
}

/* Navigation */
.sidebar-nav { display: none; }

@media (min-width: 900px) {
    .app.con-sidebar {
        display: grid;
        grid-template-columns: 244px minmax(0, 1fr);
        align-items: start;
        gap: 34px;
        max-width: 1420px;
        padding: 24px 28px 72px;
    }

    .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 24px;
        position: sticky;
        top: 24px;
        min-height: calc(100vh - 48px);
        padding: 20px 14px;
        border: 1px solid rgba(255, 255, 255, .07);
        border-radius: 28px;
        background: var(--al-chrome);
        box-shadow: 0 24px 60px rgba(0, 0, 0, .16);
    }

    .sidebar-nav .brand {
        padding: 4px 8px 22px;
        border-bottom: 1px solid rgba(255, 255, 255, .11);
    }
    .sidebar-nav .brand-name { color: var(--al-chrome-ink); }
    .sidebar-nav .brand-name .lk { color: var(--gold-bright); }
    .sidebar-nav .brand-sub { color: color-mix(in srgb, var(--al-chrome-ink) 48%, transparent); }
    .sidebar-links { display: flex; flex-direction: column; gap: 6px; }
    .sidebar-link {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 48px;
        padding: 0 13px;
        border-radius: var(--al-radius-sm);
        color: color-mix(in srgb, var(--al-chrome-ink) 57%, transparent);
        font-size: .82rem;
        font-weight: 700;
        text-decoration: none;
    }
    .sidebar-link svg { width: 18px; height: 18px; }
    .sidebar-link:hover { background: rgba(255, 255, 255, .07); color: var(--al-chrome-ink); }
    .sidebar-link.is-active { background: var(--al-accent-bright); color: var(--al-chrome); box-shadow: none; }
    .con-sidebar .topbar { min-height: 40px; margin-bottom: 18px; }
    .con-sidebar .topbar-left { display: none; }
}

/* Dashboard */
.dashboard-redesign {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.dashboard-redesign > .hero,
.dashboard-redesign > .dashboard-section,
.dashboard-redesign > .dashboard-recientes {
    width: 100%;
    margin: 0;
}

.portfolio-hero {
    min-height: 300px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 0;
    border-radius: var(--al-radius-lg);
    background:
        radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--al-accent) 30%, transparent), transparent 30%),
        linear-gradient(138deg, var(--al-chrome) 0%, #13213a 62%, #294879 100%);
    color: var(--al-chrome-ink);
    box-shadow: var(--al-shadow);
}

.hero-topline,
.hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; position: relative; }
.hero-label { margin: 0; color: var(--gold-bright); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hero-live { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.62); font-size: .68rem; font-weight: 700; }
.hero-live span { width: 7px; height: 7px; border-radius: 50%; background: var(--al-green); box-shadow: 0 0 0 5px rgba(109,224,165,.11); }
.portfolio-hero .hero-amount { margin: auto 0; font-size: clamp(3rem, 7vw, 5.2rem); font-weight: 700; line-height: .95; letter-spacing: -.075em; }
.hero-meta { margin: 0; color: rgba(255,255,255,.66); font-size: .78rem; font-weight: 600; }
.hero-link { color: var(--al-chrome-ink); font-size: .75rem; font-weight: 800; text-decoration: none; }
.hero-link:hover { color: var(--gold-bright); }
.hero-watermark { right: -14px; top: 26px; width: 230px; height: 230px; opacity: .07; }

.dashboard-section-head { margin: 0 2px 14px; }
.section-eyebrow { margin: 0 0 5px; color: var(--al-accent); font-size: .67rem; font-weight: 800; letter-spacing: .14em; }
.section-title { margin: 0; color: var(--al-ink); font-size: clamp(1.45rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -.055em; }

.saldos-cripto,
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.saldos-cripto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.dashboard-redesign .stat {
    min-width: 0;
    min-height: 132px;
    padding: 20px;
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius-md);
    background: var(--al-surface);
    box-shadow: none;
}
.dashboard-redesign .stat::after { display: none; }
.dashboard-redesign .stat-label { margin: 0 0 13px; color: var(--al-muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.dashboard-redesign .stat-value { margin: 0; color: var(--al-ink); font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 700; letter-spacing: -.045em; }
.dashboard-redesign .stat-value + .stat-value { margin-top: 7px; color: var(--al-muted); font-size: .86rem; }

.dashboard-section-actions {
    padding: 28px;
    border: 0;
    border-radius: var(--al-radius-lg);
    background: var(--al-chrome);
    box-shadow: none;
}
.dashboard-section-actions .section-eyebrow { color: var(--gold-bright); }
.dashboard-section-actions .section-title { color: var(--al-chrome-ink); }
.dashboard-section-actions .actions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dashboard-section-actions .action {
    min-height: 148px;
    padding: 17px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 19px;
    background: rgba(255,255,255,.055);
    color: var(--al-chrome-ink);
}
.dashboard-section-actions .action:hover { transform: translateY(-3px); border-color: rgba(242,201,144,.62); background: rgba(255,255,255,.1); box-shadow: none; }
.dashboard-section-actions .action-icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; box-shadow: none; }
.dashboard-section-actions .action-title { color: var(--al-chrome-ink); font-size: .9rem; font-weight: 700; }
.dashboard-section-actions .action-sub { margin-top: 3px; color: rgba(255,255,255,.55); font-size: .68rem; }

.dashboard-recientes .list-section {
    padding: 28px;
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius-lg);
    background: var(--al-surface);
}

/* Cards, forms and inputs */
.convert-card,
.ext-controles,
.ext-chart,
.ext-tabla-wrap,
.receipt,
.receipt-bloque,
.list {
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius-md);
    background: var(--al-surface);
    box-shadow: none;
}

.app-content main > .convert-card,
.app-content main > #overlay .convert-card {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 30px;
    border-radius: var(--al-radius-lg);
    box-shadow: var(--al-shadow);
}

.convert-head { gap: 16px; margin: 0 0 28px; padding: 0 0 24px; border-bottom: 1px solid var(--al-line); }
.convert-icon { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 16px; background: var(--al-solid); color: var(--al-on-solid); }
.convert-head .list-title { font-size: clamp(1.5rem, 3vw, 2rem); }
.convert-sub { margin-top: 4px; color: var(--al-muted); font-size: .85rem; }
.field { margin-bottom: 22px; }
.field-label { margin-bottom: 8px; color: var(--al-ink); font-size: .78rem; font-weight: 700; }
.field-hint { color: var(--al-muted); font-size: .7rem; }

.input {
    min-height: 58px;
    padding: 15px 16px;
    border: 1px solid color-mix(in srgb, var(--al-ink) 20%, var(--al-line));
    border-radius: 16px;
    background: var(--al-surface);
    color: var(--al-ink);
    box-shadow: none;
}
.input:hover { border-color: var(--al-muted); background: var(--al-surface); }
.input:focus { border: 2px solid var(--al-accent); background: var(--al-surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--al-accent) 12%, transparent); }
.input::placeholder { color: color-mix(in srgb, var(--al-muted) 75%, transparent); }
.input-amount { font-size: 1.2rem; font-weight: 700; }
.input-icon { color: var(--al-muted); }

.chips,
.filters,
.montos-rapidos,
.llave-tipos { gap: 8px; }

.convert-card > .filters {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
}
.chip span,
.filter,
.monto-rapido,
.llave-tipo,
.pager-num {
    min-height: var(--al-alto-chip);
    border: 1px solid var(--al-line);
    border-radius: 999px;
    background: var(--al-surface);
    color: var(--al-muted);
    font-weight: 700;
    box-shadow: none;
}
.chip input:checked + span,
.filter.is-active,
.llave-tipo.is-active,
.pager-num.is-active { border-color: var(--al-solid); background: var(--al-solid); color: var(--al-on-solid); }
.monto-rapido:hover,
.filter:hover { border-color: var(--al-accent); background: var(--al-accent-soft); color: var(--al-ink); }

.submit,
.btn-primary {
    min-height: 54px;
    border: 0;
    border-radius: 999px;
    background: var(--al-solid);
    color: var(--al-on-solid);
    font-size: .92rem;
    font-weight: 700;
    box-shadow: none;
}
.submit:hover,
.btn-primary:hover { transform: translateY(-1px); background: var(--al-accent); color: var(--al-chrome); box-shadow: 0 10px 24px color-mix(in srgb, var(--al-accent) 24%, transparent); }
.submit:disabled { background: var(--al-surface-soft); color: var(--al-muted); }

.resumen-envio,
.llave-aviso {
    border: 1px solid var(--al-line);
    border-radius: 16px;
    background: var(--al-surface-soft);
}
/* La nota neutra (sin fondo ni relleno) tampoco lleva borde: con él quedaba
   un marco vacío pegado al texto (Finity, 16/09). */
.llave-aviso.neutral { border: 0; background: none; }
/* El resumen dentro de una tarjeta de conversión: la última línea es el
   total (lo que recibe o llega), en el acento y más grande. */
.convert-card .resumen-envio { margin: 18px 0 14px; padding: 14px 16px; }
.convert-card .resumen-linea span { color: var(--al-muted); font-size: .84rem; }
.convert-card .resumen-linea strong { font-variant-numeric: tabular-nums; }
.convert-card .resumen-linea strong.texto { font-family: inherit; font-weight: 600; }
.convert-card .resumen-total { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--al-line); border-bottom: 0; }
.convert-card .resumen-total span { color: var(--al-ink); font-weight: 600; }
.convert-card .resumen-total strong { color: var(--al-accent); font-size: 1.15rem; }
/* Los saldos del resumen no se parten en dos líneas. */
.ext-resumen .stat-value { font-size: clamp(.95rem, 1.6vw, 1.5rem); overflow-wrap: anywhere; }
.resumen-linea { border-bottom-color: var(--al-line); }

/* Lists and activity */
.list-head { margin-bottom: 18px; }
.list-title { color: var(--al-ink); font-size: 1.45rem; font-weight: 700; letter-spacing: -.045em; }
.list { overflow: hidden; }
.item { min-height: 78px; border-bottom-color: var(--al-line); }
.item:hover { background: color-mix(in srgb, var(--al-accent-soft) 42%, var(--al-surface)); }
.item-icon { border-radius: 13px; }
.item-title { color: var(--al-ink); font-weight: 700; }
.item-sub,
.item-time { color: var(--al-muted); }
.badge { min-height: 25px; border-radius: 999px; font-weight: 700; }
.badge-ok { background: var(--al-green-soft); color: var(--al-green); }

/* Dialogs */
.overlay { padding: 20px; background: rgba(7, 10, 16, .66); backdrop-filter: blur(10px); }
.sheet {
    width: min(100%, 520px);
    padding: 28px;
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius-lg);
    background: var(--al-surface);
    box-shadow: 0 28px 80px rgba(0,0,0,.28);
}
.sheet-head { margin-bottom: 24px; }
.sheet-title { color: var(--al-ink); font-size: 1.65rem; font-weight: 700; letter-spacing: -.05em; }
.sheet-sub { color: var(--al-muted); font-size: .88rem; }
.sheet-close { width: 42px; height: 42px; border-radius: 50%; }
.menu-opciones { gap: 10px; }
.sheet .menu-opciones .action {
    min-height: 96px;
    padding: 16px;
    flex-direction: row;
    border: 1px solid var(--al-line);
    border-radius: 18px;
    background: var(--al-surface-soft);
    color: var(--al-ink);
}
.sheet .menu-opciones .action:hover { transform: translateX(3px); border-color: var(--al-accent); background: var(--al-accent-soft); }
.sheet .menu-opciones .action-icon { border-radius: 50%; }
.sheet .menu-opciones .action:hover .action-icon { background: var(--al-accent); color: var(--al-on-pop); }
.sheet .menu-opciones .action-title { color: var(--al-ink); font-size: .95rem; }
.sheet .menu-opciones .action-sub { color: var(--al-muted); font-size: .76rem; }

/* Statements and reports */
.ext-controles { padding: 22px; background: var(--al-surface); }
.ext-resumen { gap: 12px; }
.ext-resumen .stat { min-height: 110px; border-radius: var(--al-radius-md); background: var(--al-surface); }
.ext-chart { padding: 20px; }
.ext-export-panel { border-color: var(--al-line); border-radius: var(--al-radius-md); background: var(--al-accent-soft); }
.ext-tabla th { background: var(--al-surface-soft); border-bottom-color: var(--al-line); }
.ext-tabla td { border-bottom-color: var(--al-line); }

/* Receipts */
.receipt-page { max-width: 560px; }
.receipt { overflow: hidden; border-radius: var(--al-radius-lg); box-shadow: var(--al-shadow); }
.receipt-head {
    min-height: 120px;
    /* El bloque oscuro del panel con el halo dorado, como Operar: el
       degradé al azul era de la paleta vieja (27/09). */
    background:
        radial-gradient(circle at 92% 0, color-mix(in srgb, var(--al-accent) 26%, transparent), transparent 55%),
        var(--al-bloque);
}
.receipt-body { background: var(--al-surface); }
.receipt-amount { color: var(--al-ink); font-weight: 700; letter-spacing: -.06em; }
.receipt-bloque { border-radius: var(--al-radius-md); }
.receipt-export { border-radius: var(--al-radius-md); background: var(--al-surface-soft); }

/* Login */
.login-body {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: clamp(24px, 5vh, 48px);
    background: var(--al-bg);
}
.login-shell {
    width: min(100%, 960px);
    min-height: 600px;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    border: 1px solid var(--al-line);
    border-radius: 30px;
    background: var(--al-surface);
    box-shadow: var(--al-shadow);
    overflow: hidden;
}
.login-aside {
    min-height: 600px;
    padding: 48px 44px;
    background: var(--al-bloque);
}
.login-aside-content { max-width: 340px; }
.login-aside-brand { margin-bottom: 22px; }
.login-aside-title { font-size: clamp(2rem, 3.4vw, 2.65rem); }
.login-aside-text { margin-bottom: 26px; }
.login-main { min-width: 0; padding: 48px; background: var(--al-surface); }
.login-box { max-width: 360px; }
.login-head { margin-bottom: 28px; }
.login-title { font-size: 1.8rem; font-weight: 700; letter-spacing: -.055em; }
.login-subtitle { line-height: 1.55; }
.login-submit { width: 100%; }

/* En oscuro ya no hay que repetir aquí el botón primario, los chips
   activos ni el icono de la tarjeta: todos leen `--al-solid`, que
   tokens.css cambia de carbón a dorado. */
@media (prefers-color-scheme: dark) {
    body { background: radial-gradient(circle at 88% -10%, color-mix(in srgb, var(--al-accent) 8%, transparent), transparent 34rem), var(--al-bg); }
    .back-link { background: var(--al-surface); }
}

@media (max-width: 899px) {
    .app { padding: 14px 14px 52px; }
    .topbar { min-height: 54px; margin-bottom: 18px; }
    .portfolio-hero { min-height: 250px; padding: 24px; border-radius: 26px; }
    .portfolio-hero .hero-amount { font-size: clamp(2.6rem, 12vw, 4.2rem); }
    .dashboard-redesign { gap: 22px; }
    .saldos-cripto { grid-template-columns: 1fr; gap: 9px; }
    .dashboard-redesign .stat { min-height: 104px; }
    .dashboard-section-actions { padding: 20px; border-radius: 26px; }
    .dashboard-section-actions .actions { grid-template-columns: 1fr 1fr; gap: 9px; }
    .dashboard-section-actions .action { min-height: 124px; padding: 14px; }
    .dashboard-section-actions .action-full { grid-column: 1 / -1; min-height: 106px; }
    .dashboard-recientes .list-section { padding: 20px; border-radius: 24px; }
    .app-content main > .convert-card,
    .app-content main > #overlay .convert-card { padding: 22px; border-radius: 24px; }
    .convert-head { margin-bottom: 24px; padding-bottom: 20px; }
    .login-body { display: block; padding: 0; background: var(--al-surface); }
    .login-shell { min-height: 100dvh; grid-template-columns: 1fr; border: 0; border-radius: 0; }
    .login-main { width: 100%; min-height: 100dvh; padding: 44px 24px; }
}

@media (max-width: 560px) {
    .hero-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
    .stats { grid-template-columns: 1fr; }
    .sheet { padding: 20px 18px calc(24px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; }
    .receipt-page { padding: 14px 12px 40px; }
    .ext-resumen { grid-template-columns: 1fr 1fr !important; }
}

@media (prefers-reduced-motion: no-preference) {
    .dashboard-redesign > * { animation: al-reveal .46s var(--al-ease) both; }
    .dashboard-redesign > *:nth-child(2) { animation-delay: 55ms; }
    .dashboard-redesign > *:nth-child(3) { animation-delay: 100ms; }
    .dashboard-redesign > *:nth-child(4) { animation-delay: 145ms; }
    .dashboard-redesign > *:nth-child(5) { animation-delay: 190ms; }
    @keyframes al-reveal { from { opacity: 0; transform: translateY(12px); } }
}

/* Visual integrity
   These rules deliberately come last so legacy component styles cannot break
   the redesigned layout at narrow widths. */
body { overflow-x: hidden; }

.app,
.app-content,
.app-content main,
form,
.field,
.input-wrap,
.convert-head > div,
.sheet-head > div,
.action-text,
.item-body,
.item-right {
    min-width: 0;
}

button,
input,
select,
textarea { font: inherit; }

img,
svg { max-width: 100%; }

.input,
.amount-field,
.input-wrap { width: 100%; max-width: 100%; }
.input { min-width: 0; }
select.input { overflow: hidden; text-overflow: ellipsis; }

.portfolio-hero .hero-amount,
.dashboard-redesign .stat-value,
.receipt-amount {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.chips {
    width: 100%;
    min-width: 0;
    align-items: stretch;
}

.chip {
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
}

/* The legacy statement filter also uses .chip. Form chips must not inherit
   that outer padding and border, otherwise they render as a pill in a pill. */
.chips > .chip,
.chips > .chip:hover {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 8px 14px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

/* A single rail is information, not another button nested inside the form. */
.chip-fijo {
    display: block;
    width: 100%;
}

.chip-fijo span,
.chip-fijo input:checked + span {
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    justify-content: flex-start;
    border: 1px solid var(--al-line);
    border-radius: 16px;
    background: var(--al-surface-soft);
    color: var(--al-ink);
    font-size: .88rem;
    font-weight: 700;
    text-align: left;
    cursor: default;
}

.action,
.item,
.menu-opciones,
.sheet-head,
.convert-head { min-width: 0; }

.action-title,
.action-sub,
.item-title,
.item-sub,
.item-ref,
.sheet-title,
.sheet-sub,
.field-label,
.field-hint,
.hero-meta {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.overlay {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sheet {
    max-height: calc(100dvh - 40px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-width: 560px) {
    .app { padding-inline: 12px; }
    .topbar { gap: 10px; }
    .topbar-left { min-width: 0; }
    .brand-name,
    .brand-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .portfolio-hero { min-height: 232px; padding: 22px 20px; }
    .portfolio-hero .hero-amount {
        font-size: clamp(2.25rem, 11vw, 3.5rem);
        letter-spacing: -.06em;
    }

    .dashboard-section-actions { padding: 18px; }
    .dashboard-section-actions .action { min-height: 116px; }
    .dashboard-section-actions .action-title { font-size: .84rem; }

    .app-content main > .convert-card,
    .app-content main > #overlay .convert-card { padding: 20px 16px; }
    .convert-head { align-items: flex-start; }
    .convert-icon { width: 46px; height: 46px; flex-basis: 46px; }

    .sheet {
        width: 100%;
        max-height: calc(100dvh - 12px - env(safe-area-inset-top));
    }
    .sheet .menu-opciones .action { min-height: 84px; padding: 14px; }
    .sheet .menu-opciones .action-icon { flex: 0 0 auto; }

    .item { overflow: hidden; }
    .item-right { max-width: 48%; }
    .item-amount { max-width: 100%; font-size: .85rem; }
    .receipt-row > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
}

@media (max-width: 380px) {
    .dashboard-section-actions .actions { grid-template-columns: 1fr; }
    .dashboard-section-actions .action,
    .dashboard-section-actions .action-full { grid-column: auto; min-height: 104px; }
    .ext-resumen { grid-template-columns: 1fr !important; }
    .ext-resumen .stat { min-height: 0; }
    .item-right { max-width: 44%; }
}

/* Extracto contable y de Finity */
.ext-etiqueta { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--al-surface-soft); color: var(--al-muted); font-size: .68rem; font-weight: 600; letter-spacing: .02em; }
.ext-cuadro { margin: 18px 0 24px; padding: 6px 18px 10px; border: 1px solid var(--al-line); border-radius: 20px; background: var(--al-surface); }
.ext-tabla-cuadro th { padding: 14px 0 6px; text-align: left; background: none; color: var(--al-muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ext-tabla-cuadro td { padding: 8px 0; }
.ext-tabla-cuadro td.in { color: var(--al-ok); }
.ext-tabla-cuadro td.out { color: var(--al-danger); }
.ext-tabla-cuadro tr.ext-total td { padding-top: 12px; border-top: 1px solid var(--al-line); font-weight: 700; color: var(--al-ink); font-size: 1.02rem; }
.ext-cuadro .ext-nota { margin: 12px 0 4px; }
.ext-resumen .stat-value.is-out { color: var(--al-danger); }

/* Una conversión en la lista: lo recibido y la tasa, debajo del monto. */
.item-conversion { margin: 2px 0 4px; color: var(--al-ok); font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 520px) { .item-conversion { font-size: .72rem; white-space: normal; } }

.ext-ver-todos { display: flex; justify-content: center; margin: 16px 0 4px; }

/* Cabecera en el celular: el nombre de la sección se recorta con «…» en vez
   de meterse debajo del botón «Volver a inicio». */
.topbar-left .brand, .topbar-left .brand > div { min-width: 0; }
.topbar .brand-sub { text-overflow: ellipsis; }

/* ============================================================
   Sistema unificado
   Lo que sigue existe para que el mismo componente se vea igual
   en toda la plataforma. Antes cada página traía su versión: el
   botón primario era carbón en «Convertir» y navy en «Rotación»,
   el título de página era un hero en el tablero, una banda oscura
   en los extractos, un <h2> suelto en movimientos y nada en las
   páginas de conversión.
   ============================================================ */

/* --- Encabezado de página ---------------------------------- */
.page-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 2px 22px;
}

.page-head-texto { min-width: 0; flex: 1 1 auto; }

.page-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: var(--al-radius-sm);
    background: var(--al-solid);
    color: var(--al-on-solid);
}
.page-icon svg { width: 24px; height: 24px; }

.page-eyebrow {
    margin: 0 0 5px;
    color: var(--al-accent-ink);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.page-title {
    margin: 0;
    color: var(--al-ink);
    font-size: clamp(1.45rem, 3vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -.055em;
    overflow-wrap: anywhere;
}

.page-sub {
    margin: 6px 0 0;
    max-width: 62ch;
    color: var(--al-muted);
    font-size: .88rem;
    line-height: 1.5;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

/* Un solo antetítulo: el del tablero, el de los extractos («CONSULTA»,
   «RESUMEN» — que hasta ahora no tenían estilo ninguno y salían en texto
   plano) y el de cada página. */
.section-eyebrow,
.section-kicker {
    display: block;
    margin: 0 0 5px;
    color: var(--al-accent-ink);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Un solo título de sección dentro de una tarjeta. */
.ext-section-title,
.list-title { margin: 0; color: var(--al-ink); font-size: 1.45rem; font-weight: 700; letter-spacing: -.045em; }
.dashboard-section-actions .section-eyebrow,
.portfolio-hero .hero-label { color: var(--al-accent-bright); }

@media (max-width: 720px) {
    .page-head { flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
    .page-actions { width: 100%; margin-left: 0; }
    .page-icon { width: 44px; height: 44px; flex-basis: 44px; }
}

/* --- Botones ------------------------------------------------
   Tres formas y una sola geometría:
     .submit / .btn-primary / .btn-primario  relleno sólido, alto de campo
     .btn / .btn-secundario / .link-extracto contorno, alto de botón
     .p2p-btn-rechazar                       contorno rojo, mismo alto
   Todos en píldora, todos con la misma tipografía. */
.btn,
.btn-secundario,
.link-extracto,
.pager-btn,
.p2p-btn-rechazar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--al-alto-boton);
    padding: 0 20px;
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius-pill);
    background: var(--al-surface);
    color: var(--al-muted);
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.btn:hover,
.btn-secundario:hover,
.link-extracto:hover,
.pager-btn:hover { border-color: var(--al-accent); background: var(--al-accent-soft); color: var(--al-ink); }

.p2p-btn-rechazar { color: var(--al-danger); }
.p2p-btn-rechazar:hover { border-color: var(--al-danger); background: var(--al-danger-soft); color: var(--al-danger); }

.submit,
.btn-primary,
.btn-primario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--al-alto-campo);
    padding: 0 26px;
    border: 0;
    border-radius: var(--al-radius-pill);
    background: var(--al-solid);
    color: var(--al-on-solid);
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
}
.submit:hover,
.btn-primary:hover,
.btn-primario:hover {
    transform: translateY(-1px);
    background: var(--al-accent);
    color: var(--al-chrome);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--al-accent) 24%, transparent);
}
.submit:disabled,
.btn-primary:disabled,
.btn-primario:disabled {
    transform: none;
    background: var(--al-surface-soft);
    color: var(--al-muted);
    box-shadow: none;
    cursor: not-allowed;
}

/* --- Tarjetas ------------------------------------------------
   Una sola tarjeta: mismo borde, mismo radio, mismo fondo.
   `.p2p-card` y `.p2p-card-head` no existían en ninguna hoja: la
   rotación pintaba sus tarjetas sin caja. */
.card,
.p2p-card,
.p2p-ficha {
    padding: 18px;
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius-md);
    background: var(--al-surface);
    box-shadow: none;
}
.card + .card,
.p2p-card + .p2p-card { margin-top: 14px; }

.p2p-card-head,
.p2p-ficha-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
}

/* --- Nota / aviso dentro de una tarjeta --------------------- */
.nota,
.p2p-nota,
.p2p-vacio,
.ext-nota {
    margin: 14px 0 0;
    padding: 10px 14px;
    border-radius: var(--al-radius-sm);
    background: var(--al-surface-soft);
    color: var(--al-ink);
    font-size: .8125rem;
    line-height: 1.5;
}
.nota.es-critica,
.p2p-nota.es-critica { background: var(--al-danger-soft); color: var(--al-danger); font-weight: 600; }
.nota.es-alerta,
.p2p-nota.es-alerta { background: var(--al-warning-soft); color: var(--al-warning); font-weight: 600; }
/* La primera nota de una tarjeta no arrastra el margen de separación
   (la CSP del panel es `style-src 'self'`: nada de style="" en la
   plantilla para corregirlo caso por caso). */
.card > .nota:first-of-type,
.card > form > .nota:first-of-type,
.list-section > .nota:first-of-type { margin-top: 0; }

/* --- Campos ------------------------------------------------
   `.campo` es lo que usa la rotación y `.field` el resto del panel:
   el mismo campo con dos nombres. Se ven igual. */
.campo,
.field { display: block; margin-bottom: 22px; min-width: 0; }
.campo > span,
.field-label {
    display: block;
    margin-bottom: 8px;
    color: var(--al-ink);
    font-size: .78rem;
    font-weight: 700;
}
.campo-check {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 22px;
    color: var(--al-ink);
    font-size: .84rem;
    font-weight: 600;
}
.campo-check input { accent-color: var(--al-accent); width: 18px; height: 18px; }

/* Un formulario en columna ocupa su tarjeta, como los demás del panel
   (antes se quedaba en 28rem y dejaba media tarjeta vacía). */
.form-columna { display: grid; gap: 0; }
.form-columna > .submit,
.form-columna > .btn-primario,
.form-columna > .btn-secundario,
.form-columna > .btn { width: 100%; }

/* Un formulario dentro del encabezado o de una fila de acciones no se
   estira: envuelve a su botón y nada más. */
.page-actions form,
.p2p-acciones form { display: inline-flex; margin: 0; }

/* ============================================================
   Piel Uglycash (22/09/2026)

   Lo que define la referencia y lo que se replica acá:
   - fondo gris claro plano, módulos blancos muy redondeados y sin
     borde ni sombra: el contraste lo hace el gris, no la línea;
   - titulares en grotesca condensada, en mayúsculas y apretados;
   - el marino de la marca para lo seleccionado y lo principal;
   - botones secundarios en píldora gris sin borde;
   - el dorado del logo como halo (el balance, el CTA) y el dorado
     claro como etiqueta.
   Va al final para mandar sobre las capas viejas de style.css.
   ============================================================ */

body,
.login-body { background: var(--al-bg); }

/* --- Titulares condensados -------------------------------- */
.page-title,
.section-title,
.list-title,
.ext-section-title,
.sheet-title,
.login-title,
.login-aside-title,
.convert-head .list-title,
.portfolio-hero .hero-amount,
.receipt-amount,
.brand-name {
    font-family: var(--al-fuente-display);
    font-stretch: 68%;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.035em;
    line-height: .92;
}
.brand-name { font-size: 1.35rem; letter-spacing: -.04em; }
.brand-name .lk { color: inherit; }
.brand-sub { letter-spacing: .02em; text-transform: none; font-weight: 600; }
.page-title { font-size: clamp(2.3rem, 5.2vw, 3.9rem); letter-spacing: -.04em; }
.section-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.list-title,
.ext-section-title,
.convert-head .list-title { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.sheet-title { font-size: 2rem; }

/* Antetítulos: etiqueta chica en negro, como «Balance» en la app. */
.page-eyebrow,
.section-eyebrow,
.section-kicker {
    color: var(--al-ink);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}
.page-sub,
.convert-sub { color: var(--al-muted); }

/* --- Navegación ------------------------------------------- */
@media (min-width: 900px) {
    .sidebar-nav {
        border: 0;
        background: var(--al-surface);
        box-shadow: var(--al-shadow);
    }
    .sidebar-nav .brand { border-bottom: 1px solid var(--al-line); }
    .sidebar-nav .brand-name,
    .sidebar-nav .brand-name .lk { color: var(--al-ink); }
    .sidebar-nav .brand-sub { color: var(--al-muted); }
    .sidebar-link {
        border-radius: var(--al-radius-pill);
        color: var(--al-muted);
        font-weight: 600;
    }
    .sidebar-link:hover { background: var(--al-surface-soft); color: var(--al-ink); }
    .sidebar-link.is-active {
        position: relative;
        background: var(--al-solid);
        color: var(--al-on-solid);
    }
    .sidebar-link.is-active::after {
        content: "";
        width: 7px;
        height: 7px;
        margin-left: auto;
        border-radius: 50%;
        background: var(--al-accent);
        box-shadow: 0 0 10px var(--al-glow);
    }
}

.menu-btn,
.sheet-close,
.mini,
.back-link {
    border: 0;
    background: var(--al-surface);
    color: var(--al-ink);
}
.menu-btn:hover,
.sheet-close:hover,
.mini:hover,
.back-link:hover { border: 0; background: var(--al-solid); color: var(--al-on-solid); }
.back-link { font-weight: 600; }
.status-chip { border: 0; background: var(--al-pop); color: var(--al-on-pop); font-weight: 700; }

/* --- Balance ----------------------------------------------
   La tarjeta de la app: blanca, la cifra enorme y condensada, y un
   halo dorado que la separa del resto. */
.portfolio-hero,
.dashboard-redesign .portfolio-hero {
    border: 0;
    background: var(--al-surface);
    color: var(--al-ink);
    box-shadow:
        0 0 0 1.5px color-mix(in srgb, var(--al-accent) 70%, transparent),
        0 0 42px -6px var(--al-glow);
}
.portfolio-hero::before,
.portfolio-hero::after,
.portfolio-hero .hero-watermark { display: none; }
.portfolio-hero .hero-label { color: var(--al-ink); font-size: .85rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.portfolio-hero .hero-live {
    justify-self: end;
    padding: 6px 12px;
    border-radius: var(--al-radius-pill);
    background: var(--al-pop);
    color: var(--al-on-pop);
    font-weight: 700;
    transform: rotate(-4deg);
}
.portfolio-hero .hero-live span { background: var(--al-on-pop); box-shadow: none; }
.portfolio-hero .hero-amount {
    color: var(--al-ink);
    font-size: clamp(4.2rem, 10vw, 8rem);
    letter-spacing: -.045em;
    line-height: .85;
    font-variant-numeric: tabular-nums;
}
.portfolio-hero .hero-meta { color: var(--al-muted); }
.portfolio-hero .hero-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: var(--al-radius-pill);
    background: var(--al-surface-soft);
    color: var(--al-ink);
    font-weight: 600;
}
.portfolio-hero .hero-link:hover { background: var(--al-solid); color: var(--al-on-solid); }

/* --- Módulos ---------------------------------------------- */
.dashboard-redesign .stat,
.ext-resumen .stat,
.dashboard-recientes .list-section,
.convert-card,
.app-content main > .convert-card,
.ext-controles,
.ext-chart,
.ext-tabla-wrap,
.ext-cuadro,
.list,
.card,
.p2p-card,
.p2p-ficha,
.receipt-bloque {
    border: 0;
    border-radius: var(--al-radius-lg);
    background: var(--al-surface);
    box-shadow: var(--al-shadow);
}
.dashboard-redesign .stat,
.dashboard-redesign > .dashboard-section:nth-of-type(4) .stat { border-radius: var(--al-radius-md); background: var(--al-surface); }
.dashboard-redesign .stat::after,
.dashboard-redesign > .dashboard-section:nth-of-type(4) .stat::after { display: none; }
.dashboard-redesign .stat-label { color: var(--al-ink); font-size: .8rem; font-weight: 700; letter-spacing: 0; }
.dashboard-redesign .stat-value,
.ext-resumen .stat-value {
    font-family: var(--al-fuente-display);
    font-stretch: 68%;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    letter-spacing: -.03em;
    line-height: 1;
}
.dashboard-redesign .stat-value + .stat-value { font-family: var(--al-fuente); font-stretch: normal; font-size: .86rem; letter-spacing: 0; }
.dashboard-redesign .stat-value.is-warn { color: var(--al-warning); }
.dashboard-redesign .stat-value.is-neg { color: var(--al-danger); }

/* Operar: el bloque marino con halo, como la franja de la tarjeta en la
   app. Las acciones son teclas un tono más claro que se prenden en dorado. */
.dashboard-section-actions,
.dashboard-redesign .dashboard-section-actions {
    border: 0;
    background: var(--al-bloque);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--al-accent) 60%, transparent), 0 0 36px -8px var(--al-glow);
}
.dashboard-section-actions .section-eyebrow,
.dashboard-section-actions .section-title,
.dashboard-redesign .dashboard-section-actions .section-eyebrow,
.dashboard-redesign .dashboard-section-actions .section-title { color: var(--al-bloque-ink); }
.dashboard-section-actions .action,
.dashboard-redesign .dashboard-section-actions .action {
    border: 0;
    border-radius: var(--al-radius-md);
    background: var(--al-bloque-tecla);
    color: var(--al-bloque-ink);
}
.dashboard-section-actions .action:hover,
.dashboard-redesign .dashboard-section-actions .action:hover {
    background: var(--al-pop);
    border: 0;
}
.dashboard-section-actions .action-title { color: var(--al-bloque-ink); font-size: 1rem; }
.dashboard-section-actions .action-sub { color: var(--al-bloque-muted); }
.dashboard-section-actions .action:hover .action-title,
.dashboard-section-actions .action:hover .action-sub { color: var(--al-on-pop); }
.dashboard-redesign .action-icon,
.dashboard-redesign .action-in .action-icon,
.dashboard-redesign .action-convertir .action-icon,
.dashboard-redesign .action-out .action-icon,
.dashboard-redesign .action-cripto .action-icon {
    border-radius: 50%;
    background: var(--al-bloque-ink);
    color: var(--al-bloque);
}
.dashboard-redesign .action:hover .action-icon { background: var(--al-on-pop); color: var(--al-pop); }

/* --- Botones ----------------------------------------------- */
.submit,
.btn-primary,
.btn-primario {
    background: var(--al-solid);
    color: var(--al-on-solid);
    font-weight: 700;
}
.submit:hover,
.btn-primary:hover,
.btn-primario:hover {
    transform: translateY(-1px);
    background: var(--al-solid);
    color: var(--al-on-solid);
    box-shadow: 0 0 0 2px var(--al-accent), 0 0 26px -2px var(--al-glow);
}
.submit:disabled,
.btn-primary:disabled,
.btn-primario:disabled { box-shadow: none; }

.btn,
.btn-secundario,
.link-extracto,
.pager-btn,
.pager-num,
.filter,
.chip,
.monto-rapido {
    border: 0;
    background: var(--al-surface-soft);
    color: var(--al-ink);
    font-weight: 600;
}
.btn:hover,
.btn-secundario:hover,
.link-extracto:hover,
.pager-btn:hover,
.pager-num:hover,
.filter:hover,
.chips > .chip:hover,
.monto-rapido:hover { border: 0; background: color-mix(in srgb, var(--al-ink) 12%, var(--al-surface-soft)); color: var(--al-ink); }
.pager-num.is-active,
.filter.is-active,
.filter.active,
.chip.is-active,
.chip-fijo input:checked + span {
    border: 0;
    background: var(--al-solid);
    color: var(--al-on-solid);
}
.p2p-btn-rechazar { border: 0; background: var(--al-danger-soft); color: var(--al-danger); }

/* --- Campos ------------------------------------------------ */
.input {
    border: 2px solid transparent;
    border-radius: var(--al-radius-sm);
    background: var(--al-surface-soft);
}
.input:hover { border-color: transparent; background: color-mix(in srgb, var(--al-ink) 7%, var(--al-surface-soft)); }
.input:focus {
    border: 2px solid var(--al-ink);
    background: var(--al-surface);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--al-accent) 22%, transparent);
}
.field-label { font-weight: 700; }
.convert-icon,
.page-icon { border-radius: 50%; background: var(--al-solid); color: var(--al-on-solid); }
.convert-card .resumen-total strong { color: var(--al-ink); font-family: var(--al-fuente-display); font-stretch: 68%; font-size: 1.5rem; }
.campo-check input { accent-color: var(--al-ink); }

/* --- Listas ------------------------------------------------ */
.item:hover { background: var(--al-surface-soft); }
.item-icon { border-radius: 50%; }
/* Salida en gris (lo normal del día); la entrada en verde, que es la
   buena noticia; cripto se queda en su azul. */
.item-icon.out { background: var(--al-surface-soft); color: var(--al-ink); }
.item-icon.in { background: var(--al-green-soft); color: var(--al-green); }
.badge { font-weight: 700; }

/* --- Hojas ------------------------------------------------- */
.overlay { background: color-mix(in srgb, var(--al-blue-deep) 60%, transparent); }
.sheet { border: 0; border-radius: var(--al-radius-lg); background: var(--al-surface); }
.sheet .menu-opciones .action { border: 0; border-radius: var(--al-radius-md); background: var(--al-surface-soft); }
.sheet .menu-opciones .action:hover { border: 0; background: var(--al-pop); color: var(--al-on-pop); }
.sheet .menu-opciones .action:hover .action-title,
.sheet .menu-opciones .action:hover .action-sub { color: var(--al-on-pop); }

/* --- Extracto ---------------------------------------------- */
.ext-export-panel { border: 0; background: var(--al-accent-soft); }
.ext-tabla th { background: var(--al-surface-soft); }

/* --- Comprobante ------------------------------------------- */
.receipt { border: 0; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--al-accent) 60%, transparent), 0 0 42px -8px var(--al-glow); }
.receipt-head { background: var(--al-bloque); }
.receipt-amount { font-size: clamp(2.6rem, 9vw, 3.6rem); }
.receipt-bloque,
.receipt-export { box-shadow: none; background: var(--al-surface-soft); }

/* --- Acceso -------------------------------------------------
   El login es la portada: titular gigante en negro sobre gris y la
   tarjeta del formulario en blanco con el halo. */
.login-shell {
    border: 0;
    background: var(--al-surface);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--al-accent) 60%, transparent), 0 0 60px -10px var(--al-glow);
}
.login-aside { background: var(--al-bloque); color: var(--al-bloque-ink); }
.login-aside-glow,
.login-aside-mark { display: none; }
.login-aside-brand {
    font-family: var(--al-fuente-display);
    font-stretch: 68%;
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.03em;
    color: var(--al-bloque-ink);
}
.login-aside-brand .lk { color: var(--al-accent-bright); }
.login-aside-title { font-size: clamp(3rem, 5.4vw, 4.6rem); color: var(--al-bloque-ink); }
.login-aside-title .rotator { color: var(--al-pop); }
.login-aside-text,
.login-aside-list li { color: var(--al-bloque-muted); }
.login-aside-list li::before { color: var(--al-pop); }
.login-main { background: var(--al-surface); }
.login-title { font-size: 2.6rem; }

@media (max-width: 899px) {
    .login-body { background: var(--al-surface); }
    .login-shell { box-shadow: none; }
    .portfolio-hero .hero-amount { font-size: clamp(3.4rem, 17vw, 5.4rem); }
    .page-title { font-size: clamp(2rem, 9vw, 2.8rem); }
}
@media (max-width: 560px) {
    .portfolio-hero .hero-topline { grid-template-columns: 1fr auto; }
}
.ext-resumen .stat::after { display: none; }
/* Un saldo que no se pudo leer no es una alerta: va en gris. Lo
   pendiente del resumen sí sigue en ámbar. */
.dashboard-redesign .saldos-cripto .stat-value.is-warn { color: var(--al-faint); }

/* Archivo condensada es más angosta que la Helvetica de respaldo: el
   tracking negativo le junta las palabras, así que se abre el espacio. */
.page-title,
.section-title,
.list-title,
.ext-section-title,
.sheet-title,
.login-title,
.login-aside-title,
.login-aside-brand,
.brand-name,
.portfolio-hero .hero-amount,
.receipt-amount,
.dashboard-redesign .stat-value,
.ext-resumen .stat-value,
.convert-card .resumen-total strong { letter-spacing: -.015em; word-spacing: .12em; }
.dashboard-redesign .stat-value + .stat-value { letter-spacing: 0; word-spacing: normal; }

/* Casilla en la línea del panel: cuadro gris redondeado que se llena en
   marino con el visto, en vez del cuadro blanco del sistema. */
.campo-check input {
    appearance: none;
    display: inline-grid;
    place-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 2px solid color-mix(in srgb, var(--al-ink) 22%, transparent);
    border-radius: 7px;
    background: var(--al-surface-soft);
    cursor: pointer;
}
.campo-check input::before {
    content: "";
    width: 10px;
    height: 5px;
    margin-top: -2px;
    border-left: 2px solid var(--al-on-solid);
    border-bottom: 2px solid var(--al-on-solid);
    transform: rotate(-45deg) scale(0);
}
.campo-check input:checked { border-color: var(--al-solid); background: var(--al-solid); }
.campo-check input:checked::before { transform: rotate(-45deg) scale(1); }
.campo-check input:focus-visible { outline: 2px solid var(--al-accent); outline-offset: 2px; }

/* En oscuro el menú activo ya es dorado: el punto va en la tinta. */
@media (prefers-color-scheme: dark) {
    .sidebar-link.is-active::after { background: var(--al-on-solid); box-shadow: none; }
}

/* Tabla del extracto: el radio grande de los módulos se comía la columna
   de estado contra la esquina. Radio medio, aire en los bordes y la
   etiqueta de estado en una sola línea. */
.ext-tabla-wrap { border-radius: var(--al-radius-md); }
.ext-tabla th:first-child,
.ext-tabla td:first-child { padding-left: 22px; }
.ext-tabla th:last-child,
.ext-tabla td:last-child { padding-right: 22px; }
.ext-tabla .badge { white-space: nowrap; }

/* Ganancia (15/10): el estado de resultados factor por factor. */
.gan-resumen .stat-value { font-variant-numeric: tabular-nums; }
.gan-cascada {
    margin-bottom: 26px; padding: 6px 20px; border: 1px solid var(--al-line);
    border-radius: var(--al-radius-md); background: var(--al-surface);
}
.gan-fila {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(80px, 28%) auto;
    align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--al-line);
}
.gan-fila:last-child { border-bottom: 0; }
.gan-signo { color: var(--al-muted); font-weight: 700; text-align: center; }
.gan-nombre { margin: 0; color: var(--al-ink); font-weight: 600; }
.gan-nota { margin: 2px 0 0; color: var(--al-muted); font-size: .8rem; line-height: 1.35; }
.gan-barra-wrap { height: 8px; border-radius: var(--al-radius-pill); background: var(--al-surface-soft); overflow: hidden; }
.gan-barra { width: 0; height: 100%; border-radius: inherit; transition: width .5s var(--al-ease, ease); }
.gan-valor { margin: 0; min-width: 120px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gan-fila.suma .gan-barra { background: var(--al-ok); }
.gan-fila.resta .gan-barra { background: var(--al-danger); opacity: .75; }
.gan-fila.resta .gan-valor { color: var(--al-danger); }
.gan-fila.total { background: var(--al-surface-soft); margin: 4px -20px; padding: 14px 20px; border-bottom: 0; }
.gan-fila.total .gan-nombre, .gan-fila.total .gan-valor { font-size: 1.05rem; font-weight: 800; }
.gan-fila.total .gan-barra { background: var(--al-ink); }
.gan-fila.total.is-neg .gan-valor { color: var(--al-danger); }
.gan-fila.total.is-neg .gan-barra { background: var(--al-danger); }
.gan-dias { margin-bottom: 26px; }
.gan-barras { display: flex; align-items: flex-end; gap: 6px; min-width: 100%; height: 150px; }
.gan-dias .chart-col { flex: 1 0 18px; }
.gan-dia { width: 100%; max-width: 26px; height: 2px; border-radius: 6px 6px 0 0; transition: height .5s var(--al-ease, ease); }
.gan-dia.cubre { background: var(--al-ok); }
.gan-dia.no-cubre { background: var(--al-accent); }
.gan-dia.neg { background: var(--al-danger); }
.gan-dias .chart-col:hover .gan-dia { filter: brightness(1.15); }
@media (max-width: 640px) {
    .gan-fila { grid-template-columns: 18px minmax(0, 1fr) auto; }
    .gan-barra-wrap { display: none; }
    .gan-valor { min-width: 0; }
}
/* La «Ganancia de hoy» del tablero abre su detalle. */
.stat-link { display: block; color: inherit; text-decoration: none; transition: transform .2s var(--al-ease, ease), border-color .2s; }
.stat-link:hover { transform: translateY(-2px); border-color: var(--al-accent); }
.stat-link:focus-visible { outline: 2px solid var(--al-accent); outline-offset: 2px; }
.stat-link .stat-nota { color: var(--al-accent-ink); }
.gan-barra-col { display: flex; flex-direction: column; gap: 4px; }
.gan-parte { color: var(--al-muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.gan-fila.is-cero .gan-valor, .gan-fila.is-cero .gan-nombre { color: var(--al-muted); }
.gan-fila.is-cero .gan-barra-wrap, .gan-fila.is-cero .gan-parte { visibility: hidden; }
@media (max-width: 640px) { .gan-barra-col { display: none; } }

/* Ganancia dinámica (15/10): se refresca sola, cambia de periodo sin
   recargar, anima las cifras y abre cada renglón al tocarlo. */
.gan-vivo { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--al-muted); font-size: .82rem; font-weight: 600; }
.gan-vivo-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--al-ok); box-shadow: 0 0 0 0 var(--al-ok); animation: gan-latido 2s infinite; }
@keyframes gan-latido { 0% { box-shadow: 0 0 0 0 rgba(99, 212, 154, .55); } 70% { box-shadow: 0 0 0 8px rgba(99, 212, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(99, 212, 154, 0); } }
.gan-cuerpo { transition: opacity .25s var(--al-ease, ease); }
.gan-cuerpo.is-cargando { opacity: .45; pointer-events: none; }
.gan-principal.is-pos { border-color: color-mix(in srgb, var(--al-ok) 40%, var(--al-line)); }
.gan-principal.is-neg { border-color: color-mix(in srgb, var(--al-danger) 40%, var(--al-line)); }
.gan-sube { color: var(--al-ok) !important; transition: color .3s; }
.gan-baja { color: var(--al-danger) !important; transition: color .3s; }

.gan-meta { margin: 14px 0 26px; padding: 16px 20px; border: 1px solid var(--al-line); border-radius: var(--al-radius-md); background: var(--al-surface); }
.gan-meta-texto p { margin: 0 0 4px; color: var(--al-ink); font-size: .95rem; }
.gan-meta-texto span { color: var(--al-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.gan-meta-barra { height: 10px; margin-top: 12px; border-radius: var(--al-radius-pill); background: var(--al-surface-soft); overflow: hidden; }
.gan-meta-barra > div { width: 0; height: 100%; border-radius: inherit; background: var(--al-accent); transition: width .8s var(--al-ease, ease); }
.gan-meta-barra.is-lleno > div { background: var(--al-ok); }

button.gan-fila {
    width: 100%; margin: 0; border: 0; border-bottom: 1px solid var(--al-line); border-radius: 0;
    background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
button.gan-fila:last-child { border-bottom: 0; }
button.gan-fila:hover { background: color-mix(in srgb, var(--al-surface-soft) 60%, transparent); }
button.gan-fila:focus-visible { outline: 2px solid var(--al-accent); outline-offset: -2px; }
.gan-fila.total, button.gan-fila.total:hover { background: var(--al-surface-soft); }
.gan-texto, .gan-nombre, .gan-nota, .gan-barra-wrap, .gan-barra, .gan-valor { display: block; }
.gan-nota { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s var(--al-ease, ease), opacity .25s, margin .3s; margin-top: 0; }
.gan-fila.is-abierta .gan-nota { max-height: 6em; opacity: 1; margin-top: 3px; }
.gan-nombre::after { content: " ›"; color: var(--al-muted); font-weight: 400; transition: transform .2s; display: inline-block; }
.gan-fila.is-abierta .gan-nombre::after { transform: rotate(90deg); }

a.gan-col { color: inherit; text-decoration: none; cursor: pointer; }
a.gan-col:focus-visible .gan-dia { outline: 2px solid var(--al-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .gan-vivo-punto { animation: none; }
    .gan-nota, .gan-meta-barra > div, .gan-barra, .gan-dia { transition: none; }
}
button.gan-fila.total { width: calc(100% + 40px); }
.gan-nombre::after { content: "›"; margin-left: 6px; }