/* ============================================================================
   HEADER
   Archivo: interface/mobile-v303.css
   Proyecto: CutMaster CNC Local
   Módulo: Interfaz responsiva / Mobile UI
   Versión: 3.03
   Estado: Producción / revisión responsive
   Fecha: 2026-09-06
   Descripción:
     Capa exclusivamente responsiva para teléfono y tablet. Mantiene intactos
     el orden del DOM, la experiencia desktop, los motores de cálculo, datos,
     validaciones y funciones. Solo reorganiza visualmente los mismos módulos
     cuando el viewport es <= 820 px.
   Dependencias: styles.css, enterprise/enterprise.css, interface/easy-ui.css
   Entradas: viewport CSS, clases y estructura existentes de CutMaster
   Salidas: layout adaptativo para tablet y móvil
   Compatibilidad: Safari iOS, Chrome Android, navegadores desktop modernos
   ============================================================================ */

/* --------------------------------------------------------------------------
   TABLET / MOBILE: se conserva el mismo orden funcional del desktop.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body.easy-ui {
    min-width: 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .easy-ui .app,
  .easy-ui .main,
  .easy-ui .view,
  .easy-ui .workspace,
  .easy-ui .center,
  .easy-ui .right,
  .easy-ui .page-pad,
  .easy-ui .panel,
  .easy-ui .card,
  .easy-ui .config,
  .easy-ui .results {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Menú lateral móvil: mismo orden que PC, convertido a drawer. */
  .easy-ui .sidebar {
    width: min(316px, 90vw) !important;
    max-width: 90vw !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: 18px 0 44px rgba(16, 38, 67, .20);
  }

  .easy-ui .sidebar nav {
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }

  .easy-ui .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 14990;
    background: rgba(16, 28, 46, .48);
  }

  .easy-ui.mobile-nav-open .mobile-nav-backdrop {
    display: block !important;
  }

  .easy-ui:not(.mobile-nav-open) .mobile-nav-backdrop {
    display: none !important;
  }

  /* Header compacto, sin quitar acciones ni cambiar el orden de la página. */
  .easy-ui .topbar {
    position: sticky;
    top: 0;
    z-index: 700;
    width: 100%;
    min-height: 72px;
    padding: 10px 12px;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid #dce4ee;
  }

  .easy-ui #mobileMenuBtn {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
  }

  .easy-ui .topbar > div:not(.top-actions):not(.local-mode-badge) {
    min-width: 0;
    flex: 1 1 150px;
  }

  .easy-ui .topbar h1 {
    overflow-wrap: anywhere;
    line-height: 1.15;
  }

  .easy-ui .local-mode-badge {
    flex: 0 0 auto;
  }

  /* Contenedores principales */
  .easy-ui .workspace,
  .easy-ui .page-pad,
  .easy-ui .easy-page {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .easy-ui .panel,
  .easy-ui .crm-card,
  .easy-ui .quote-document,
  .easy-ui .quote-side-card,
  .easy-ui .trouble-hero,
  .easy-ui .trouble-ai-entry,
  .easy-ui .trouble-wizard,
  .easy-ui .trouble-principles,
  .easy-ui .ai-control-hero,
  .easy-ui .machine-editor,
  .easy-ui .machine-list-col {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Todo grid de formulario técnico se apila manteniendo su orden original. */
  .easy-ui .form-grid,
  .easy-ui .machine-editor .form-grid,
  .easy-ui .settings-mini-grid,
  .easy-ui .settings-extra-grid,
  .easy-ui .strategy-grid,
  .easy-ui .stl-grid,
  .easy-ui .stl-stage-grid,
  .easy-ui .quote-header-grid,
  .easy-ui .quote-client-row,
  .easy-ui .quote-add-row,
  .easy-ui .quote-bottom-grid,
  .easy-ui .quote-modal-grid,
  .easy-ui .mw-fields,
  .easy-ui .crm-form-grid,
  .easy-ui .workshop-entry-row,
  .easy-ui .tw-result-grid,
  .easy-ui .tw-options {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .easy-ui .span-2,
  .easy-ui .span-3,
  .easy-ui .full,
  .easy-ui .wide,
  .easy-ui .summary-wide {
    grid-column: 1 / -1 !important;
  }

  /* Inputs: evita zoom de iOS y cortes visuales. */
  .easy-ui input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  .easy-ui select,
  .easy-ui textarea,
  .easy-ui button {
    max-width: 100%;
  }

  .easy-ui input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  .easy-ui select,
  .easy-ui textarea {
    font-size: 16px !important;
  }

  .easy-ui textarea {
    resize: vertical;
  }

  .easy-ui .search-bar,
  .easy-ui .component-select-row,
  .easy-ui .price {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-width: 0;
  }

  .easy-ui .search-input,
  .easy-ui .selected,
  .easy-ui .beginner-select-card,
  .easy-ui .quick-native-select {
    min-width: 0 !important;
  }

  .easy-ui .dropdown,
  .easy-ui .customer-results {
    max-width: 100%;
    max-height: min(45vh, 360px);
    -webkit-overflow-scrolling: touch;
  }

  /* Visualizador del archivo */
  .easy-ui .viewer,
  .easy-ui .calculator-file-viewer,
  .easy-ui .viewer-canvas,
  .easy-ui .dxf-preview {
    max-width: 100%;
    overflow: hidden;
  }

  .easy-ui .viewer-canvas {
    min-height: 170px;
    height: clamp(170px, 42vw, 260px);
  }

  .easy-ui .geometry-summary,
  .easy-ui .dxf-preview-meta,
  .easy-ui .viewer-file,
  .easy-ui .viewer-note {
    overflow-wrap: anywhere;
  }

  /* Resultados: sin eliminar métricas, solo reflujo. */
  .easy-ui .results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .easy-ui .metric {
    min-width: 0;
    height: auto;
  }

  .easy-ui .metric strong,
  .easy-ui .metric span,
  .easy-ui .metric small,
  .easy-ui .metric em {
    overflow-wrap: anywhere;
  }

  .easy-ui .result-reset-bar,
  .easy-ui .quote-export-bar,
  .easy-ui .easy-result-actions,
  .easy-ui .machine-summary-actions,
  .easy-ui .quote-after-actions,
  .easy-ui .trouble-ai-entry-actions,
  .easy-ui .tw-nav,
  .easy-ui .crm-header-actions,
  .easy-ui .crm-dialog footer,
  .easy-ui .mw-shell footer {
    flex-wrap: wrap;
  }

  /* Tablas: no se pierden columnas; se permite desplazamiento horizontal
     cuando convertirlas a tarjetas alteraría información o edición. */
  .easy-ui .quote-items-wrap,
  .easy-ui .crm-table-wrap,
  .easy-ui .table-wrap,
  .easy-ui .responsive-table-wrap,
  .easy-ui .mw-preview,
  .easy-ui .tools-table-wrap {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  .easy-ui table {
    max-width: none;
  }

  /* Mis máquinas */
  .easy-ui .machine-page {
    grid-template-columns: minmax(0,1fr) !important;
  }

  .easy-ui .machine-list-col,
  .easy-ui .machine-editor {
    width: 100%;
    border-right: 0 !important;
  }

  .easy-ui .machine-editor-actions,
  .easy-ui .machine-save-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Modales a pantalla útil de teléfono, conservando contenido completo. */
  .easy-ui .modal-backdrop,
  .easy-ui .simple-choice-modal,
  .easy-ui .machine-summary-modal,
  .easy-ui .quote-modal,
  .easy-ui .calc-help-modal,
  .easy-ui .crm-modal,
  .easy-ui .ai-chat-modal {
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  }

  .easy-ui .warning-modal,
  .easy-ui .simple-choice-sheet,
  .easy-ui .machine-summary-card,
  .easy-ui .quote-modal-card,
  .easy-ui .calc-help-card,
  .easy-ui .crm-dialog,
  .easy-ui .ai-chat-card {
    width: min(100%, 680px) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Cotizaciones */
  .easy-ui .quote-workspace,
  .easy-ui .quote-side {
    grid-template-columns: minmax(0,1fr) !important;
  }

  .easy-ui .quote-topbar,
  .easy-ui .quote-export-bar {
    align-items: stretch;
  }

  .easy-ui .quote-top-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
  }

  .easy-ui .quote-top-actions button,
  .easy-ui .quote-after-actions button {
    min-width: 0;
  }

  /* Gestión de empresa: conserva módulos; tabs desplazables. */
  .easy-ui .crm-nav,
  .easy-ui .workshop-tabs {
    max-width: 100%;
  }

  .easy-ui .workshop-tabs,
  .easy-ui .crm-nav > div {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .easy-ui .workshop-tabs button,
  .easy-ui .crm-nav button {
    flex: 0 0 auto;
  }

  .easy-ui .crm-columns,
  .easy-ui .crm-welcome,
  .easy-ui .crm-stats {
    min-width: 0;
  }

  /* Resolución de problemas, IA, manuales, FAQ */
  .easy-ui .trouble-hero,
  .easy-ui .trouble-ai-bar,
  .easy-ui .ai-control-hero,
  .easy-ui .beginner-calc-intro,
  .easy-ui .howto-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .easy-ui .trouble-ai-entry,
  .easy-ui .ai-control-layout,
  .easy-ui .trouble-work,
  .easy-ui .machine-howto-grid,
  .easy-ui .howto-toc-grid,
  .easy-ui .faq-category-buttons,
  .easy-ui .beginner-needs,
  .easy-ui .worked-example,
  .easy-ui .beginner-glossary {
    grid-template-columns: minmax(0,1fr) !important;
  }

  /* Glosario flotante: accesible pero sin tapar toda la pantalla. */
  .easy-ui .global-glossary-float {
    right: 10px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    width: min(360px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .easy-ui .global-glossary-content {
    max-height: min(52dvh, 470px) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Historial, favoritos y listas: textos largos no desbordan. */
  .easy-ui .history-item,
  .easy-ui .favorite-item,
  .easy-ui .workshop-item,
  .easy-ui .guide-card,
  .easy-ui .faq-item {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Seguridad en iPhone con notch/home indicator. */
  .easy-ui .sidebar,
  .easy-ui .topbar,
  .easy-ui .global-glossary-float {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
}

/* --------------------------------------------------------------------------
   TELÉFONO: optimización fina sin ocultar funciones.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .easy-ui .workspace,
  .easy-ui .page-pad,
  .easy-ui .easy-page {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .easy-ui .panel.config,
  .easy-ui .results,
  .easy-ui .article,
  .easy-ui .side-card,
  .easy-ui .trouble-wizard,
  .easy-ui .trouble-detail,
  .easy-ui .trouble-ai-entry,
  .easy-ui .trouble-principles,
  .easy-ui .quote-document,
  .easy-ui .crm-card,
  .easy-ui .machine-editor,
  .easy-ui .machine-list-col {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .easy-ui .panel-head,
  .easy-ui .quote-topbar,
  .easy-ui .crm-title-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .easy-ui .panel-head > *,
  .easy-ui .quote-topbar > *,
  .easy-ui .crm-title-row > * {
    min-width: 0;
  }

  .easy-ui .search-bar,
  .easy-ui .component-select-row,
  .easy-ui .price {
    grid-template-columns: minmax(0,1fr) !important;
  }

  .easy-ui .search-btn,
  .easy-ui .price select,
  .easy-ui .price input {
    width: 100%;
  }

  .easy-ui .results-grid {
    grid-template-columns: minmax(0,1fr) !important;
  }

  .easy-ui .metric {
    min-height: 112px;
  }

  .easy-ui .easy-flow-footer,
  .easy-ui .result-reset-bar,
  .easy-ui .easy-result-actions,
  .easy-ui .quote-export-bar,
  .easy-ui .quote-after-actions,
  .easy-ui .machine-summary-actions,
  .easy-ui .trouble-ai-entry-actions,
  .easy-ui .tw-nav,
  .easy-ui .crm-header-actions,
  .easy-ui .machine-editor-actions,
  .easy-ui .machine-save-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    width: 100%;
  }

  .easy-ui .easy-flow-footer button,
  .easy-ui .easy-result-actions button,
  .easy-ui .quote-export-bar button,
  .easy-ui .quote-after-actions button,
  .easy-ui .machine-summary-actions button,
  .easy-ui .trouble-ai-entry-actions button,
  .easy-ui .tw-nav button,
  .easy-ui .crm-header-actions button,
  .easy-ui .machine-editor-actions button,
  .easy-ui .machine-save-row button {
    width: 100%;
    min-width: 0 !important;
  }

  .easy-ui .quote-top-actions {
    grid-template-columns: minmax(0,1fr) !important;
  }

  .easy-ui .machine-summary-card,
  .easy-ui .simple-choice-sheet,
  .easy-ui .warning-modal,
  .easy-ui .quote-modal-card,
  .easy-ui .calc-help-card,
  .easy-ui .crm-dialog {
    border-radius: 16px 16px 8px 8px !important;
  }

  .easy-ui .machine-summary-grid,
  .easy-ui .easy-result-context,
  .easy-ui .crm-stats,
  .easy-ui .crm-dialog .crm-stats {
    grid-template-columns: minmax(0,1fr) !important;
  }

  .easy-ui .calc-progress-guide {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  .easy-ui .official-data-strip {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .easy-ui .official-data-strip > span {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .easy-ui .unit.unit-choice {
    min-width: 0;
  }

  .easy-ui .unit.unit-choice input {
    min-width: 0;
  }

  .easy-ui .unit.unit-choice .unit-select {
    min-width: 86px !important;
    max-width: 105px !important;
  }

  .easy-ui .global-glossary-float[open] {
    max-height: 70dvh;
  }
}

/* Teléfonos muy angostos (320–390 px aprox.) */
@media (max-width: 390px) {
  .easy-ui .topbar {
    gap: 8px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .easy-ui .topbar h1 {
    font-size: 17px !important;
  }

  .easy-ui #mobileMenuBtn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .easy-ui .workspace,
  .easy-ui .page-pad,
  .easy-ui .easy-page {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .easy-ui .panel.config,
  .easy-ui .results,
  .easy-ui .article,
  .easy-ui .side-card,
  .easy-ui .crm-card,
  .easy-ui .quote-document {
    padding-left: 11px !important;
    padding-right: 11px !important;
  }

  .easy-ui button {
    overflow-wrap: anywhere;
  }

  .easy-ui .global-glossary-float {
    left: 7px !important;
    right: 7px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* ============================================================================
   FOOTER
   Fin de archivo: interface/mobile-v303.css
   CutMaster CNC Local v3.03
   Regla de diseño: desktop permanece intacto; responsive solo <= 820 px.
   ============================================================================ */