/* NODO Facturador — adaptación para COMPUTADORA (≥ 900 px). Mismo estilo Metro, aprovechando el ancho:
   · Inicio como en el celular: mosaicos en 8 columnas, centrados, y la flecha lleva a la lista de módulos.
   · Formularios en dos columnas · detalle como panel lateral (la lista queda visible) · KPIs y gráficos acotados.
   El celular (< 900 px) no cambia: todo lo de escritorio está dentro del @media. */
:root { --app-w: 1280px; }
@media (min-width: 1600px) { :root { --app-w: 1440px; } }
.emi-atajo, .emi-vacio { display: none; }

.m-less { display: none; }
@media (min-width: 900px) {
  /* Sin barras de scroll a la vista (como en el teléfono): se sigue con la rueda, el trackpad, las flechas o arrastrando */
  * { scrollbar-width: none; -ms-overflow-style: none; }
  *::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .m-less { display: grid; margin: 0 auto 0 0; }
  .app { max-width: var(--app-w); }
  .header { padding-left: 24px; padding-right: 24px; }
  .seccion { padding: 8px 24px 32px; }
  #sec-hub { padding: 8px 24px 24px; }

  /* Inicio: igual que en el celular (mosaicos + flecha a la lista de módulos), pero con 8 columnas y centrado para que entre sin scroll */
  .m-hub-wrap { max-width: 840px; }
  .m-tiles { grid-template-columns: repeat(8, 1fr); grid-auto-rows: calc((100cqw - 7 * var(--m-tile-gap)) / 8); }
  .m-tile__label { font-size: 14px; left: 12px; bottom: 10px; }
  .m-title--lista { margin-top: 0; }
  .m-appitem { min-height: 56px; }
  .m-appitem:hover { background: var(--m-surface-2); }
  .m-bar { max-width: var(--app-w); }

  /* Formularios: cliente a la izquierda, detalle a la derecha */
  .emi-2col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 48px; align-items: start; }
  .emi-col { min-width: 0; }
  .emi-atajo { display: block; margin: 8px 0 0; text-align: right; }
  .emi-vacio { display: block; padding: 24px 0; }
  .m-btn.block { min-height: 52px; }
  #emi-go, #doc-go { margin-bottom: 8px; }
  #sec-ajustes .emi { max-width: 560px; }
  #doc-ok, #emi-ok { max-width: 720px; }

  /* Listas y KPIs */
  .m-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .m-item__row:hover { background: var(--m-surface-2); }
  .emi-seg { max-width: 640px; }

  /* Detalle: panel lateral (maestro-detalle); la lista se corre para no quedar tapada */
  .detalle-panel { left: auto; right: max(0px, calc((100vw - var(--app-w)) / 2)); width: 520px; max-width: 100%; margin: 0;
    border-left: 2px solid var(--m-accent); animation-name: none; }
  .seccion:has(> .detalle-panel:not(.oculto)) > .dash-cuerpo { margin-right: 548px; }
  .detalle-panel-cuerpo { padding-left: 24px; padding-right: 24px; }

  /* Reporte: cifras a la izquierda, gráfico a la derecha */
  .rep-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 48px; align-items: start; }
  #rep-b .m-chart { max-width: 960px; }
  #rep-c { max-width: 720px; }
}
/* notebook chico / tablet horizontal (900-1199): panel de detalle más angosto para que la lista respire */
@media (min-width: 900px) and (max-width: 1199px) {
  .detalle-panel { width: 440px; }
  .seccion:has(> .detalle-panel:not(.oculto)) > .dash-cuerpo { margin-right: 468px; }
}
/* pantalla ancha (≥ 1200): buscador y selector de tipo en una sola fila */
@media (min-width: 1200px) {
  #sec-estado .filtros-bar { flex-wrap: nowrap; }
  #sec-estado .filtro-busqueda { flex: 1 1 auto; width: auto; }
  #sec-estado .filtro-sel { flex: 0 0 240px; width: 240px; }
}