/**
 * Refinos mobile ≤767px (alinhado ao prompt mestre de responsividade).
 * Carregar depois de mesa-mobile-system.css.
 * Todo o conteúdo deste ficheiro vive neste único @media.
 */
@media (max-width:767px){
  /* ── Login: card = ecrã, footer no fluxo ───────────────────────────── */
  #mesaGuestShell.mesa-guest-shell--entry.login-root{
    align-items:stretch;
    justify-content:flex-start;
    min-height:100dvh;
    width:100%;
    padding:0;
    background:var(--bg-root);
  }

  #mesaGuestShell.mesa-guest-shell--entry .mesa-guest-shell__inner.login-card{
    width:100%;
    max-width:100%;
    min-height:100dvh;
    margin:0;
    border-radius:0;
    box-shadow:none;
    border:none;
    padding:48px 24px 32px;
  }

  #mesaGuestShell.mesa-guest-shell--entry .mesa-guest-hero{
    border-radius:0;
    border:none;
    border-bottom:1px solid var(--border);
    box-shadow:none;
    padding-left:0;
    padding-right:0;
  }

  #mesaGuestShell.mesa-guest-shell--entry .mesa-guest-brand__title{
    font-size:26px;
    line-height:1.2;
  }

  #mesaGuestShell.mesa-guest-shell--entry .mesa-guest-hero__tagline{
    font-size:14px;
    line-height:1.6;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--border);
  }

  #mesaGuestShell.mesa-guest-shell--entry .mesa-guest-theme-label{
    font-size:9px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--text-dim, var(--text-mid));
  }

  #mesaGuestShell.mesa-guest-shell--entry .mesa-guest-theme-toggle{
    min-height:36px;
  }

  #mesaGuestShell.mesa-guest-shell--entry .mesa-guest-theme-btn{
    min-height:44px;
    min-width:44px;
    padding:8px 12px;
  }

  #mesaGuestShell.mesa-guest-shell--entry .mesa-guest-panel{
    margin-top:24px;
    padding:24px 0;
    background:transparent;
    border:none;
    box-shadow:none;
    border-radius:0;
  }

  #mesaGuestShell.mesa-guest-shell--entry .mesa-guest-mode-toggle{
    margin-bottom:24px;
  }

  #mesaGuestShell.mesa-guest-shell--entry .mesa-guest-actions .btn-seleto,
  #mesaGuestShell.mesa-guest-shell--entry .mesa-guest-actions .btn-seleto-ghost{
    height:52px;
    width:100%;
    font-size:15px;
    font-weight:600;
    border-radius:6px;
  }

  #mesaGuestShell.mesa-guest-shell--entry > .login-footer.mesa-guest-footer{
    margin-top:24px;
    padding-bottom:max(24px, env(safe-area-inset-bottom, 0px));
    text-align:center;
    width:100%;
    font-size:10px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--text-dim, var(--text-mid));
  }

  [data-theme="clean"] #mesaGuestShell.mesa-guest-shell--entry .mesa-guest-panel .field--float > input[type="email"],
  [data-theme="clean"] #mesaGuestShell.mesa-guest-shell--entry .mesa-guest-panel .field--float > input[type="text"],
  [data-theme="clean"] #mesaGuestShell.mesa-guest-shell--entry .mesa-guest-panel .field--float > input[type="password"]{
    background:var(--surface, var(--bg-surface)) !important;
  }

  [data-theme="clean"] #mesaGuestShell.mesa-guest-shell--entry .mesa-guest-panel .field--float > .mesa-password-wrap{
    background:var(--surface, var(--bg-surface)) !important;
  }

  /* ── Header KPIs ───────────────────────────────────────────────────── */
  #mesaAppShell .app-header{
    padding:max(20px, env(safe-area-inset-top, 0px) + 8px) 20px 24px;
    margin-bottom:20px;
  }

  #mesaAppShell .app-header__title-row{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
  }

  #mesaAppShell .app-header__scoreboard__primary .logo-title{
    font-size:24px;
    line-height:1.2;
  }

  #mesaAppShell #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) > .stat{
    padding:12px;
    border-radius:6px;
    border:1px solid var(--border);
    background:color-mix(in srgb, var(--surface) 92%, var(--text) 4%);
  }

  [data-theme="dark"] #mesaAppShell #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) > .stat{
    background:color-mix(in srgb, var(--text) 5%, transparent);
  }

  #mesaAppShell #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) .stat-label{
    font-size:9px;
    letter-spacing:0.1em;
  }

  #mesaAppShell #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) .stat-value{
    font-size:16px;
    font-weight:700;
    line-height:1.2;
    white-space:nowrap;
  }

  #mesaAppShell .mesa-header-session{
    justify-content:flex-end;
    margin-top:16px;
    gap:8px;
    width:100%;
  }

  #mesaAppShell .mesa-header-btn{
    height:36px;
    min-height:36px;
    padding:0 12px;
    font-size:11px;
  }

  /* ── Strip de carteiras no header: fade à direita ─────────────────── */
  #mesaAppShell .header-patrimonio-executive__wallets .wallet-strip-wrap{
    position:relative;
  }

  #mesaAppShell .header-patrimonio-executive__wallets .wallet-strip-wrap::after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:32px;
    pointer-events:none;
    background:linear-gradient(to left, var(--bg-root), transparent);
    z-index:1;
  }

  /* ── Patrimônio: grelha de ativos por carteira = scroll horizontal ── */
  #mesaAppShell .wallet-panel__body{
    position:relative;
  }

  #mesaAppShell .wallet-panel__body::after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:32px;
    pointer-events:none;
    background:linear-gradient(to left, var(--bg-root), transparent);
    z-index:2;
  }

  #mesaAppShell .wallet-panel__body .summary-grid{
    display:flex !important;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:12px;
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding:4px 0 8px;
    margin:0 -2px;
    position:relative;
  }

  #mesaAppShell .wallet-panel__body .summary-grid::-webkit-scrollbar{
    display:none;
  }

  #mesaAppShell .wallet-panel__body .summary-grid > .summary-card.summary-card--premium{
    flex:0 0 auto;
    scroll-snap-align:start;
    min-width:220px;
    max-width:min(320px, 88vw);
    min-height:200px;
  }

  #mesaAppShell .wallet-panel[open] > .wallet-panel__summary{
    padding:16px;
    min-height:56px;
    border-radius:8px 8px 0 0;
    background:var(--surface, var(--bg-surface));
    border:1px solid var(--border);
    border-bottom:none;
  }

  #mesaAppShell .wallet-panel:not([open]) > .wallet-panel__summary{
    padding:16px;
    min-height:56px;
    border-radius:8px;
    background:var(--surface, var(--bg-surface));
    border:1px solid var(--border);
  }

  #mesaAppShell .wallet-panel__title{
    font-size:14px;
    font-weight:700;
  }

  /* ── Resultado realizado / encerradas: evitar “—” por overflow ───── */
  #mesaAppShell .mesa-fin-table tbody tr{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto auto;
    grid-template-areas:
      'tk dt'
      'num num'
      'note note';
    min-width:0;
  }

  #mesaAppShell .mesa-fin-table tbody td{
    min-width:0;
    max-width:100%;
  }

  #mesaAppShell .mesa-fin-table tbody td.mesa-fin-td--num{
    overflow:visible;
    text-overflow:clip;
    font-variant-numeric:normal;
    word-break:break-word;
    white-space:normal;
  }

  /* ── Relatórios: tabs com snap ───────────────────────────────────── */
  #mesaAppShell .mesa-reports-tabs{
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    position:relative;
    gap:4px;
    padding:0 4px;
  }

  #mesaAppShell .mesa-reports-tab{
    scroll-snap-align:start;
    flex-shrink:0;
  }

  /* ── Fechamento mensal: mês atual com borda (tokens) ─────────────── */
  #mesaAppShell .mesa-month-cell--current{
    outline:none;
    border:1px solid var(--accent);
  }

  [data-theme="dark"] #mesaAppShell .mesa-month-cell--current{
    border-color:var(--gold-dim);
  }

  /* ── :active como feedback tátil (opacity) ───────────────────────── */
  #mesaAppShell .btn-ghost:active,
  #mesaAppShell .btn-add:active,
  #mesaAppShell .mesa-header-btn:active,
  #mesaAppShell .summary-card.summary-card--premium:active,
  #mesaAppShell .wallet-mini:active,
  #mesaAppShell .contrib-card:active,
  #mesaAppShell .mesa-reports-tab:active{
    opacity:0.75;
    transition:opacity 100ms ease;
  }
}