/* Desktop Phase 1–2. Loaded only at >=1024px; no existing mobile rules changed. */
@media (min-width: 1024px) {
  body:not(.desktop-app) .topbar .btn-tema { margin-left: auto; }
  body:not(.desktop-app) .topbar .btn-entrar { margin-left: 0; }
  .desktop-app {
    --dt-sidebar-width: 250px;
    --dt-gap: 24px;
    --dt-pad: 28px;
    --dt-control-radius: min(var(--radius), 8px);
    --dt-accent-soft: color-mix(in srgb, var(--principal) 10%, transparent);
    --dt-elevated: color-mix(in srgb, var(--surface) 86%, var(--surface-2));
    padding-left: var(--dt-sidebar-width);
    transition: padding-left .18s ease;
  }
  /* The existing form removes inline accent overrides when green is selected.
     Override the server-rendered custom color on desktop during that preview. */
  .desktop-app:has(#apariencia input[name="color"][value=""]:checked) { --principal: var(--brand); --principal-ink: var(--brand-ink); }
  :root[data-sidebar="collapsed"] .desktop-app { --dt-sidebar-width: 68px; }
  :root[data-densidad="compacta"] .desktop-app { --dt-gap: 16px; --dt-pad: 20px; }
  .desktop-app .desktop-only { display: block; }
  .desktop-app > .topbar, .desktop-app > .bottom-nav { display: none; }
  .desktop-app main { padding: var(--dt-pad) 0 36px; min-width: 0; }
  .desktop-app main > .container { max-width: 1496px; padding: 0 var(--dt-pad); }
  .desktop-app > .footer { margin-top: auto; border: 0; padding: 10px var(--dt-pad) 22px; }
  .desktop-app > .footer .container { max-width: 1440px; padding: 0; font-size: .75rem; }
  .desktop-app main > .container > .aviso-amazon:has(~ .dt-dashboard) { display: none; }
  .desktop-app .legacy-panel { display: none; }
  .desktop-app .dt-icon { width: 19px; height: 19px; flex: 0 0 auto; vertical-align: middle; }
  .desktop-app :is(.dt-sidebar,.dt-header,.dt-dashboard) a:hover { text-decoration: none; }
  .desktop-app :is(.dt-sidebar,.dt-header,.dt-dashboard) :is(a,button,input,summary):focus-visible { outline: 2px solid var(--principal); outline-offset: 3px; }
  .desktop-app .dt-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--dt-sidebar-width);
    background: var(--surface); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; transition: width .18s ease;
  }
  .dt-brand-row { padding: 25px 22px 21px; min-height: 90px; display: flex; align-items: center; }
  .dt-brand { display: flex; align-items: center; gap: 11px; color: var(--text); min-width: 0; }
  .dt-brand img { flex: 0 0 30px; }
  .dt-brand-name { font-size: 1.28rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
  .dt-brand-caption { display: block; font-size: .51rem; color: var(--muted); letter-spacing: .15em; margin-top: 7px; font-weight: 600; white-space: nowrap; }
  .dt-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 16px; scrollbar-width: thin; }
  .dt-nav-group + .dt-nav-group { margin-top: 24px; }
  .dt-group-label { color: var(--muted); font-size: .61rem; font-weight: 700; letter-spacing: .13em; margin: 0 12px 10px; }
  .dt-nav-link { display: flex; gap: 11px; align-items: center; min-height: 41px; padding: 9px 12px; border-radius: var(--dt-control-radius); color: var(--muted); font-size: .8rem; font-weight: 600; margin: 3px 0; }
  .dt-nav-link .dt-icon { width: 18px; height: 18px; }
  .dt-nav-link:hover { color: var(--text); background: var(--surface-2); }
  .dt-nav-link.is-active { color: var(--principal); background: var(--dt-accent-soft); box-shadow: inset 2px 0 var(--principal); }
  .dt-nav-label { white-space: nowrap; }
  .dt-sidebar-bottom { padding: 8px 12px 16px; border-top: 1px solid var(--border); }
  .dt-collapse { display: flex; align-items: center; width: 100%; gap: 12px; padding: 10px 12px; border: 0; border-radius: var(--dt-control-radius); background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: .76rem; }
  .dt-collapse:hover { background: var(--surface-2); color: var(--text); }
  .dt-account-menu { position: relative; margin-top: 7px; }
  .dt-account-menu summary { display: flex; align-items: center; list-style: none; gap: 10px; padding: 10px 6px; cursor: pointer; border-radius: var(--dt-control-radius); }
  .dt-account-menu summary::-webkit-details-marker { display: none; }
  .dt-account-menu summary:hover { background: var(--surface-2); }
  .dt-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: min(var(--radius), 9px); background: var(--dt-accent-soft); color: var(--principal); font-size: .82rem; font-weight: 700; object-fit: cover; }
  .dt-user-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
  .dt-user-info b { font-size: .77rem; overflow-wrap: anywhere; font-weight: 600; }
  .dt-user-info > span { font-size: .65rem; color: var(--muted); overflow-wrap: anywhere; }
  .dt-account-popover { position: absolute; bottom: calc(100% + 8px); left: 0; width: 260px; max-height: 60vh; overflow: auto; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sombra); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 8px; font-size: .8rem; overflow-wrap: anywhere; }
  .dt-account-popover > span { color: var(--muted); font-size: .75rem; }
  .dt-account-popover > .dt-account-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--dt-control-radius); color: var(--text); }
  .dt-account-popover > .dt-account-link:hover { background: var(--dt-accent-soft); color: var(--principal); }
  .dt-account-popover form { margin: 6px 0 0; border-top: 1px solid var(--border); padding-top: 12px; }
  .dt-account-popover button { background: none; border: 0; padding: 0; color: var(--danger); font: inherit; cursor: pointer; display: flex; gap: 8px; align-items: center; }
  :root[data-sidebar="collapsed"] :is(.dt-brand-name,.dt-group-label,.dt-sidebar .dt-nav-label,.dt-user-info) { display: none; }
  :root[data-sidebar="collapsed"] .dt-brand-row { padding-inline: 19px; }
  :root[data-sidebar="collapsed"] .dt-nav { padding-inline: 9px; }
  :root[data-sidebar="collapsed"] .dt-nav-link { justify-content: center; padding-inline: 0; }
  :root[data-sidebar="collapsed"] .dt-nav-group + .dt-nav-group { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }
  :root[data-sidebar="collapsed"] .dt-sidebar-bottom { padding-inline: 9px; }
  :root[data-sidebar="collapsed"] .dt-collapse { justify-content: center; padding-inline: 0; }
  :root[data-sidebar="collapsed"] .dt-collapse .dt-icon { transform: rotate(180deg); }
  :root[data-sidebar="collapsed"] .dt-account-menu summary { justify-content: center; padding-inline: 0; }
  .desktop-app .dt-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; padding: 12px var(--dt-pad); border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 20; }
  .dt-breadcrumb { display: flex; gap: 12px; align-items: center; font-size: .76rem; min-width: 0; }
  .dt-breadcrumb > span { color: var(--muted); }
  .dt-breadcrumb b { font-weight: 600; }
  .dt-header-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
  .dt-marketplace { font-size: .7rem; color: var(--muted); }
  .dt-connection { display: flex; align-items: center; gap: 7px; font-size: .7rem; color: var(--text); }
  .dt-dot { width: 6px; height: 6px; display: inline-block; flex: 0 0 6px; border-radius: 50%; background: currentColor; color: var(--muted); }
  .dt-dot-ok { color: var(--brand); }
  .dt-header-divider { width: 1px; height: 20px; background: var(--border); }
  .dt-icon-button { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: var(--dt-control-radius); cursor: pointer; }
  .dt-icon-button:hover { color: var(--principal); background: var(--surface-2); }
  .dt-page-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 26px; }
  .dt-eyebrow { font-size: .61rem; font-weight: 700; color: var(--muted); letter-spacing: .13em; margin: 0 0 9px; }
  .dt-dashboard h1 { font-size: 1.9rem; letter-spacing: -.04em; font-weight: 700; line-height: 1.2; margin-bottom: 9px; }
  .dt-subtitle { font-size: .8rem; color: var(--muted); margin: 0; }
  .dt-account-pill { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--dt-control-radius); font-size: .72rem; background: var(--surface); }
  .dt-account-pill small { display: block; font-size: .65rem; margin-top: 2px; }
  .dt-search-card { padding: var(--dt-gap); border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); margin-bottom: var(--dt-gap); }
  .dt-search-heading { display: flex; align-items: center; gap: 12px; }
  .dt-search-symbol { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--dt-control-radius); color: var(--principal); background: var(--dt-accent-soft); }
  .dt-search-heading h2 { font-size: 1rem; margin: 0 0 4px; letter-spacing: -.02em; }
  .dt-search-heading p { font-size: .75rem; color: var(--muted); margin: 0; }
  .dt-search-form { display: flex; gap: 10px; margin-top: 22px; }
  .dt-search-input { display: flex; flex: 1; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--campo-borde); border-radius: var(--dt-control-radius); background: var(--bg); color: var(--muted); min-width: 0; }
  .dt-search-input:focus-within { outline: 2px solid var(--principal); outline-offset: 2px; }
  .dt-search-input input { min-width: 0; width: 100%; background: none; color: var(--text); border: 0; font: inherit; font-size: .83rem; padding: 14px 0; outline: none !important; }
  .dt-search-input input::placeholder { color: var(--muted); opacity: .85; }
  .dt-dashboard .btn { border-radius: var(--dt-control-radius); padding: 10px 15px; font-size: .78rem; font-weight: 600; min-height: 39px; }
  .dt-search-form .btn { white-space: nowrap; gap: 16px; }
  .dt-scan-button { display: grid; place-items: center; width: 46px; flex: 0 0 46px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--dt-control-radius); color: var(--text); }
  .dt-scan-button:hover { color: var(--principal); border-color: var(--principal); }
  .dt-search-hint { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
  .dt-search-hint > span { padding: 2px 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: min(var(--radius), 4px); color: var(--muted); font-size: .57rem; font-weight: 600; }
  .dt-search-hint p { margin: 0 0 0 auto; font-size: .65rem; color: var(--muted); }
  .dt-kpis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: var(--dt-gap); }
  .dt-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 19px 18px 16px; }
  .dt-kpi-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
  .dt-kpi-top > span:first-child { font-size: .72rem; color: var(--muted); line-height: 1.4; }
  .dt-metric-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: var(--dt-control-radius); background: var(--surface-2); }
  .dt-metric-icon .dt-icon { width: 16px; height: 16px; }
  .dt-kpi > strong { display: block; font-size: 1.95rem; letter-spacing: -.04em; line-height: 1.3; font-weight: 600; margin-top: 13px; font-variant-numeric: tabular-nums; }
  .dt-kpi p { font-size: .61rem; line-height: 1.5; color: var(--muted); margin: 7px 0 0; }
  .dt-tone-ok { color: var(--brand); }
  .dt-tone-no { color: var(--danger); }
  .dt-tone-warn { color: var(--warn); }
  .dt-tone-neutral { color: var(--muted); }
  .dt-tone-accent { color: var(--principal); }
  .dt-dashboard-grid { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: var(--dt-gap); align-items: start; }
  .dt-history-card { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); min-width: 0; overflow: hidden; }
  .dt-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px; border-bottom: 1px solid var(--border); }
  .dt-section-heading h2 { font-size: .88rem; margin: 0 0 4px; letter-spacing: -.02em; }
  .dt-section-heading p { font-size: .68rem; color: var(--muted); margin: 0; }
  .dt-section-heading > a { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .67rem; white-space: nowrap; }
  .dt-section-heading > a:hover { color: var(--principal); }
  .dt-section-heading > a .dt-icon { width: 14px; height: 14px; }
  .dt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 290px; padding: 32px; text-align: center; }
  .dt-empty-icon { display: grid; place-items: center; width: 46px; height: 46px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 17px; }
  .dt-empty h3 { font-size: .88rem; margin: 0 0 7px; font-weight: 600; }
  .dt-empty p { color: var(--muted); font-size: .73rem; max-width: 300px; line-height: 1.65; margin: 0 0 19px; }
  .dt-empty .btn { font-size: .7rem; }
  .dt-workflow-card { padding: 23px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
  .dt-workflow-card > h2 { font-size: 1.2rem; letter-spacing: -.035em; font-weight: 600; line-height: 1.35; margin-bottom: 10px; }
  .dt-workflow-description { color: var(--muted); font-size: .7rem; line-height: 1.7; margin: 0; }
  .dt-workflow { list-style: none; padding: 0; margin: 23px 0; }
  .dt-workflow li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 18px; }
  .dt-workflow li:last-child { margin-bottom: 0; }
  .dt-workflow li > span { width: 23px; height: 23px; flex: 0 0 23px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface-2); border-radius: min(var(--radius), 7px); color: var(--muted); font-size: .65rem; }
  .dt-workflow b { font-size: .7rem; font-weight: 600; }
  .dt-workflow li p { font-size: .63rem; color: var(--muted); margin: 3px 0 0; line-height: 1.6; }
  .dt-workflow-link { display: flex; gap: 8px; align-items: center; font-size: .65rem; padding-top: 15px; border-top: 1px solid var(--border); }
  .dt-workflow-link .dt-icon { width: 15px; height: 15px; }
  .dt-quick-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: var(--dt-gap); }
  .dt-quick-actions > span { color: var(--muted); font-size: .68rem; margin-right: 5px; }
  .dt-quick-actions a { display: inline-flex; align-items: center; gap: 8px; font-size: .68rem; padding: 9px 12px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--dt-control-radius); color: var(--text); }
  .dt-quick-actions a:hover { border-color: var(--principal); color: var(--principal); }
  .dt-quick-actions .dt-icon { width: 15px; height: 15px; }
  .dt-data-note { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .6rem; margin: 23px 0 0; }
  .dt-data-note .dt-icon { width: 13px; height: 13px; }
  .dt-table-scroll { overflow-x: auto; }
  .dt-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .69rem; }
  .dt-table th { color: var(--muted); font-size: .6rem; font-weight: 600; background: var(--surface-2); padding: 11px 14px; white-space: nowrap; }
  .dt-table td { padding: 13px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  .dt-table tr:last-child td { border: 0; }
  .dt-table-product { display: flex; align-items: center; gap: 9px; min-width: 160px; max-width: 260px; }
  .dt-product-thumb { width: 32px; height: 36px; display: grid; place-items: center; flex: 0 0 32px; background: var(--surface-2); border-radius: var(--dt-control-radius); color: var(--muted); }
  .dt-product-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .dt-table-product b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .67rem; line-height: 1.45; font-weight: 600; }
  .dt-table-product code { display: block; color: var(--muted); font-size: .59rem; margin-top: 3px; }
  .dt-status { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: .6rem; padding: 4px 7px; background: var(--surface-2); border-radius: var(--dt-control-radius); }
  .dt-status .dt-dot { color: inherit; width: 4px; height: 4px; flex-basis: 4px; }
  .dt-status.dt-tone-ok { background: var(--ok-bg); }
  .dt-status.dt-tone-no { background: var(--no-bg); }
  .dt-status.dt-tone-warn { background: var(--aviso-bg); }
  .dt-table time { color: var(--muted); white-space: nowrap; }
  .dt-row-action { color: var(--muted); }
  .dt-row-action .dt-icon { width: 16px; height: 16px; }
  .dt-table-note { font-size: .6rem; color: var(--muted); margin: 0; padding: 12px 16px; border-top: 1px solid var(--border); }
  .dt-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
  .dt-system-page { max-width: 850px; }
  .dt-system-page h1 { font-size: 1.8rem; }
  :root[data-densidad="compacta"] .dt-nav-link { min-height: 34px; padding-block: 7px; }
  :root[data-densidad="compacta"] .dt-kpi { padding: 14px; }
  :root[data-densidad="compacta"] .dt-table td { padding-block: 8px; }
  :root[data-densidad="compacta"] .dt-search-form { margin-top: 15px; }
  :root[data-densidad="compacta"] .dt-empty { min-height: 245px; }
}
@media (min-width:1024px) and (max-width:1279px) {
  .desktop-app { --dt-sidebar-width: 230px; --dt-pad: 22px; --dt-gap: 18px; }
  .dt-header-actions { gap: 10px; }
  .dt-marketplace { display: none; }
  .dt-dashboard-grid { grid-template-columns: minmax(0,1fr); }
  .dt-workflow-card { display: none; }
  .dt-kpis { gap: 10px; }
  .dt-kpi { padding: 14px 12px; }
  .dt-kpi-top { align-items: flex-start; }
  .dt-kpi-top > span:first-child { font-size: .68rem; }
  .dt-account-pill { max-width: 200px; }
  .dt-search-hint p { font-size: .6rem; }
}
@media (min-width:1024px) and (prefers-reduced-motion: reduce) {
  .desktop-app, .desktop-app .dt-sidebar { transition: none; }
}