/* ============================================================
   SIGOS M6 · MOBILE FIX V1
   Solo responsive móvil / tablet pequeña
   ============================================================ */

/* Same field geometry for label/select and div/button, on every viewport. */
#dailyReportModule .m6PerfSelectorsV1{align-items:start;min-width:0}
#dailyReportModule .m6PerfSelectorsV1>.m6PerfFieldV1{display:flex;flex-direction:column;gap:3px;min-width:0;max-width:100%;margin:0;padding:0;box-sizing:border-box}
#dailyReportModule .m6PerfSelectorsV1>.m6PerfFieldV1>span{margin:0;line-height:1.3}
#dailyReportModule .m6PerfSelectorsV1 select,
#dailyReportModule .m6PerfSelectorsV1 .m6PerfInspectorButtonV1{display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0;height:36px;min-height:36px;margin:0;padding:0 8px}

@media (max-width: 768px) {

  /* --------------------------------------------
     1) FRANJA DE MÓDULOS: 3 por fila en móvil
     -------------------------------------------- */
  .sigos-mobile-module-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .sigos-mobile-module-btn {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.1 !important;
    border-radius: 18px !important;
  }

  .sigos-mobile-module-btn span,
  .sigos-mobile-module-btn strong,
  .sigos-mobile-module-btn div {
    text-align: center !important;
    margin: 0 auto !important;
  }

  /* --------------------------------------------
     2) CABECERA ACCIONES M6
     reporte / filtros bien alineados
     -------------------------------------------- */
  #dailyReportModule .sigos-m6-action-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
  }

  #dailyReportModule .sigos-m6-action-bar button,
  #dailyReportModule .sigos-m6-action-bar a {
    min-height: 52px !important;
  }

  /* --------------------------------------------
     3) FECHAS DESDE / HASTA
     dos columnas sin montarse
     -------------------------------------------- */
  #dailyReportModule .sigos-m6-date-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    align-items: stretch !important;
    width: 100% !important;
    border: 1px solid #C9D7E6 !important;
    border-radius: 11px !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  #dailyReportModule .sigos-m6-date-field {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 10px 9px !important;
    box-sizing: border-box !important;
  }

  #dailyReportModule .sigos-m6-date-field + .sigos-m6-date-field {
    border-left: 1px solid #DFE8F1 !important;
  }

  #dailyReportModule .sigos-m6-date-field > span {
    margin: 0 0 3px !important;
  }

  #dailyReportModule .sigos-m6-date-grid .sigos-m6-date-field input,
  #dailyReportModule .sigos-m6-date-grid .sigos-m6-date-field select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* seguridad adicional para grid general de filtros */
  #dailyReportModule .report-filters-grid,
  #dailyReportModule .daily-report-filters-grid,
  #dailyReportModule .filters-grid {
    row-gap: 12px !important;
  }

  /* --------------------------------------------
     4) TÍTULO DEL MÓDULO CENTRO OPERATIVO
     mismo look alineado que los otros
     -------------------------------------------- */
  .sigos-mobile-module-btn[data-sigos-module-name="centro-operativo"] {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 420px) {
  #dailyReportModule .sigos-m6-date-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }
}