/* NUEVO: terminal-mobile.css — vista móvil reducida de solo lectura, activa
   solo <900px. Aditivo: no modifica css/mobile-responsive.css ni css/terminal.css.
   En >=900px el terminal se comporta exactamente igual que hoy. */

@media (min-width: 900px) {
  #tmob-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; }
  /* El banner "prueba la app móvil" queda redundante: la vista de solo
     lectura ya cumple esa función dentro del propio terminal */
  #cbk-mobile-banner { display: none !important; }

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

  .tmob-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .tmob-title {
    font-family: 'Syne', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .3px;
  }
  .tmob-readonly-badge {
    font-family: 'DM Mono', monospace;
    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;
  }

  .tmob-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    padding-right: 14px;
    scroll-snap-type: x proximity;
  }
  .tmob-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: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .tmob-nav-btn[aria-selected="true"] {
    background: var(--purple);
    border-color: var(--purple);
    color: #06080d;
  }

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

  .tmob-section-title {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text2);
    margin-bottom: 8px;
  }

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

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

  .tmob-subnav {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: -6px 0 2px;
    padding-right: 14px;
    scroll-snap-type: x proximity;
  }
  .tmob-subnav-btn {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 8px 6px;
    min-height: 32px;
    font-family: 'DM Mono', monospace;
    font-size: 10.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text2);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .tmob-subnav-btn[aria-selected="true"] {
    color: var(--text0);
    border-bottom-color: var(--purple);
  }

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

/* NUEVO: mobile-render-switch-bypass */
/* Bypass reversible del switch de arriba. Por defecto (USE_REDUCED_MOBILE=false
   en apps/terminal/index.html) la clase html.cbm-reduced-mobile no se añade, así
   que estas reglas ganan por especificidad ((1,1,1) > (1,0,0)) y devuelven
   #app-shell/#tmob-root a su estado normal de escritorio incluso en viewport
   móvil — css/mobile-responsive.css se encarga de reflotarlo. Para restaurar la
   vista reducida "CBM Terminal / SOLO LECTURA", basta con volver
   USE_REDUCED_MOBILE=true en el HTML; este archivo no necesita tocarse. */
@media (max-width: 899px) {
  html:not(.cbm-reduced-mobile) #app-shell { display: flex !important; }
  html:not(.cbm-reduced-mobile) #tmob-root { display: none !important; }
}
/* /NUEVO: mobile-render-switch-bypass */