/* NUEVO: desk-mobile.css — vista móvil reducida de solo lectura para Cebyko Desk,
   activa solo <900px. Aditivo: no modifica css/mobile-responsive.css ni css/terminal.css.
   En >=900px Desk se comporta exactamente igual que hoy. Calcado de
   css/terminal-mobile.css (mismo breakpoint, misma estructura #app-shell/#*-root),
   con prefijo dmob- y tokens tomados de apps/desk/DESIGN.md. */

@media (min-width: 900px) {
  #dmob-root { display: none !important; }
}

@media (max-width: 899px) {
  /* Oculta el shell de escritorio completo (header + sidebar + main-content
     + el drawer/hamburger que js/mobile-nav.js cuelga de #app-shell) */
  #app-shell { display: none !important; }

  #dmob-root {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg0);
    color: var(--text0);
    font-family: var(--font-body);
    padding: 16px 14px 28px;
    gap: 16px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .dmob-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .dmob-title {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.015em;
  }
  .dmob-readonly-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 8px;
    white-space: nowrap;
  }

  .dmob-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .dmob-nav-btn {
    flex: 0 0 auto;
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text1);
    border-radius: 999px;
    padding: 7px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .dmob-nav-btn[aria-selected="true"] {
    background: var(--purple);
    border-color: var(--purple);
    color: #06080d;
  }

  .dmob-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .dmob-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    width: 100%;
    box-sizing: border-box;
  }
  .dmob-kpi-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text2);
    margin-bottom: 6px;
  }
  .dmob-kpi-value {
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 700;
    word-break: break-word;
  }
  .dmob-kpi-value.pos { color: var(--green); }
  .dmob-kpi-value.neg { color: var(--red); }
  .dmob-kpi-value.amber { color: var(--amber); }
  .dmob-kpi-value.info { color: var(--blue); }

  .dmob-section-title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text2);
    margin-bottom: 8px;
  }

  .dmob-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dmob-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 12px; }
  .dmob-table th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text2);
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
  }
  .dmob-table td {
    padding: 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text1);
  }
  .dmob-table td.pos { color: var(--green); }
  .dmob-table td.neg { color: var(--red); }
  .dmob-table td.amber { color: var(--amber); }

  .dmob-empty {
    color: var(--text2);
    font-size: 12px;
    padding: 20px 4px;
    text-align: center;
  }

  .dmob-subnav {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: -6px 0 2px;
  }
  .dmob-subnav-btn {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 8px 6px;
    min-height: 32px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text2);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .dmob-subnav-btn[aria-selected="true"] {
    color: var(--text0);
    border-bottom-color: var(--purple);
  }

  @media (max-width: 419px) {
    .dmob-kpi-grid { grid-template-columns: 1fr; }
  }
}