/* RVargas Inventory - Mobile Enterprise Layer V27.4.2
   Objetivo: UI móvil real, fluida y adaptable sin tocar lógica, perfiles ni datos. */

@media (max-width: 860px) {
  :root {
    --rv-m-bg: #f4f7fb;
    --rv-m-card: rgba(255,255,255,.96);
    --rv-m-ink: #0b1628;
    --rv-m-muted: #667085;
    --rv-m-line: #d9e1ec;
    --rv-m-primary: #0b2d4a;
    --rv-m-primary-2: #123f67;
    --rv-m-gold: #b88924;
    --rv-m-danger: #b42318;
    --rv-m-radius: 18px;
    --rv-m-shadow: 0 12px 34px rgba(16,24,40,.10);
  }

  html, body, #root {
    width: 100%;
    min-width: 0 !important;
    overflow-x: hidden !important;
    background: var(--rv-m-bg) !important;
  }

  body {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }

  .premium-shell.final-shell,
  .premium-shell {
    display: block !important;
    min-height: 100dvh !important;
    padding-bottom: calc(94px + env(safe-area-inset-bottom)) !important;
    background:
      radial-gradient(circle at 10% -10%, rgba(184,137,36,.16), transparent 34%),
      linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%) !important;
  }

  .premium-main {
    min-width: 0 !important;
    width: 100% !important;
  }

  .premium-sidebar.final-sidebar,
  .premium-sidebar {
    display: none !important;
  }

  .premium-topbar.final-topbar,
  .premium-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    min-height: auto !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: calc(10px + env(safe-area-inset-top)) 12px 10px !important;
    background: rgba(255,255,255,.94) !important;
    border-bottom: 1px solid rgba(216,225,236,.9) !important;
    box-shadow: 0 8px 22px rgba(16,24,40,.08) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  .top-kicker {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #667085 !important;
    letter-spacing: .10em !important;
    font-size: clamp(8px, 2.1vw, 10px) !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
  }

  .premium-topbar h1,
  .final-topbar h1 {
    margin: 2px 0 0 !important;
    color: var(--rv-m-ink) !important;
    font-size: clamp(20px, 5.3vw, 25px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.04em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .top-meta,
  .final-top-meta,
  .notification-pill {
    display: none !important;
  }

  .mobile-logout-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border: 1px solid var(--rv-m-line) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--rv-m-ink) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    box-shadow: 0 6px 18px rgba(16,24,40,.07) !important;
  }

  .premium-content.final-content,
  .premium-content,
  .content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  .enterprise-home {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .enterprise-toolbar,
  .page-title {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    border: 1px solid rgba(216,225,236,.95) !important;
    border-radius: 22px !important;
    padding: 16px !important;
    background:
      linear-gradient(135deg, rgba(11,45,74,.98), rgba(18,63,103,.96)),
      radial-gradient(circle at 90% 10%, rgba(184,137,36,.30), transparent 35%) !important;
    color: #fff !important;
    box-shadow: var(--rv-m-shadow) !important;
    overflow: hidden !important;
  }

  .enterprise-toolbar span,
  .page-title .eyebrow,
  .eyebrow {
    color: #f2c46d !important;
    letter-spacing: .12em !important;
    font-size: clamp(9px, 2.4vw, 11px) !important;
    margin: 0 0 4px !important;
  }

  .enterprise-toolbar h2,
  .page-title h1 {
    color: #fff !important;
    margin: 0 !important;
    font-size: clamp(23px, 6.2vw, 31px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.05em !important;
  }

  .enterprise-toolbar p,
  .page-title p {
    color: rgba(255,255,255,.78) !important;
    margin: 5px 0 0 !important;
    font-size: clamp(13px, 3.4vw, 15px) !important;
    line-height: 1.35 !important;
  }

  .enterprise-toolbar-actions,
  .header-actions,
  .actions-right {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .enterprise-status {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    color: #fff !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .enterprise-toolbar-actions button,
  .header-actions button,
  .actions-right button,
  .primary-btn,
  .secondary-btn {
    min-height: 44px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
  }

  .enterprise-toolbar-actions button {
    background: #fff !important;
    color: var(--rv-m-primary) !important;
    border-color: rgba(255,255,255,.45) !important;
  }

  .enterprise-kpis,
  .control-strip,
  .executive-metrics,
  .compact-stats,
  .clean-kpi-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .enterprise-metric,
  .control-strip > div,
  .premium-metric,
  .clean-kpi,
  .compact-stats > div {
    min-width: 0 !important;
    min-height: 92px !important;
    border: 1px solid rgba(216,225,236,.95) !important;
    border-radius: 20px !important;
    padding: 14px !important;
    background: var(--rv-m-card) !important;
    box-shadow: 0 10px 26px rgba(16,24,40,.07) !important;
    overflow: hidden !important;
  }

  .enterprise-metric span,
  .control-strip span,
  .premium-metric span,
  .clean-kpi span {
    display: block !important;
    color: var(--rv-m-muted) !important;
    font-size: clamp(9px, 2.35vw, 11px) !important;
    line-height: 1.1 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .enterprise-metric strong,
  .control-strip strong,
  .premium-metric strong,
  .clean-kpi strong,
  .compact-stats strong {
    display: block !important;
    color: var(--rv-m-ink) !important;
    margin-top: 8px !important;
    font-size: clamp(25px, 8vw, 36px) !important;
    line-height: .95 !important;
    letter-spacing: -.06em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .enterprise-layout,
  .system-grid,
  .premium-dashboard-grid,
  .clean-grid,
  .executive-summary-grid,
  .reports-workbench,
  .form-grid,
  .detail-grid,
  .reports-filter-grid,
  .compact-filters {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .enterprise-panel,
  .panel,
  .premium-panel,
  .form-grid-panel,
  .clean-card,
  .reports-filter-card,
  .movement-card,
  .workorder-card,
  .install-list-panel,
  .serial-panel {
    width: 100% !important;
    min-width: 0 !important;
    border: 1px solid rgba(216,225,236,.95) !important;
    border-radius: 20px !important;
    padding: 14px !important;
    background: var(--rv-m-card) !important;
    box-shadow: 0 10px 26px rgba(16,24,40,.06) !important;
    overflow: hidden !important;
  }

  .enterprise-panel-head,
  .panel-head,
  .premium-panel-head,
  .serial-panel-head,
  .install-list-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid #eef2f6 !important;
  }

  .enterprise-panel-head h3,
  .panel-head h2,
  .premium-panel-head h3 {
    color: var(--rv-m-ink) !important;
    margin: 0 !important;
    font-size: clamp(17px, 4.5vw, 21px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.03em !important;
  }

  .enterprise-panel-head span,
  .panel-head p,
  .premium-panel-head p,
  .field-help,
  .install-item-card span,
  .install-item-card small,
  .movement-card span,
  .movement-card small {
    color: var(--rv-m-muted) !important;
    font-size: clamp(11px, 3vw, 13px) !important;
    line-height: 1.35 !important;
  }

  label,
  .form-grid label,
  .login-form label {
    color: #475467 !important;
    letter-spacing: .08em !important;
    font-size: 11px !important;
    font-weight: 900 !important;
  }

  input,
  select,
  textarea,
  .search-input,
  .series-box,
  .serial-input {
    width: 100% !important;
    min-height: 46px !important;
    border: 1px solid #cfd8e5 !important;
    border-radius: 14px !important;
    padding: 11px 12px !important;
    background: #fff !important;
    color: var(--rv-m-ink) !important;
    font-size: 16px !important;
    outline: none !important;
  }

  input:focus,
  select:focus,
  textarea:focus,
  .search-input:focus {
    border-color: rgba(184,137,36,.85) !important;
    box-shadow: 0 0 0 4px rgba(184,137,36,.14) !important;
  }

  .table-wrap,
  .enterprise-table-wrap,
  .report-table-wrap {
    width: 100% !important;
    border-radius: 18px !important;
    border: 1px solid rgba(216,225,236,.95) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: #fff !important;
  }

  table {
    min-width: 760px !important;
    font-size: 13px !important;
  }

  th, td,
  .compact-table th,
  .compact-table td {
    padding: 10px !important;
    white-space: nowrap !important;
  }

  .mobile-bottom-nav {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 80 !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 1fr !important;
    gap: 5px !important;
    padding: 7px !important;
    border: 1px solid rgba(216,225,236,.95) !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 18px 48px rgba(16,24,40,.22) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }

  .mobile-bottom-nav button {
    min-width: 0 !important;
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    color: #667085 !important;
    padding: 5px 4px !important;
    font-size: clamp(9px, 2.6vw, 11px) !important;
    line-height: 1.1 !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-bottom-nav button.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--rv-m-primary), var(--rv-m-primary-2)) !important;
    box-shadow: 0 10px 24px rgba(11,45,74,.28) !important;
  }

  .mobile-more-panel {
    z-index: 90 !important;
    background: rgba(7,17,31,.66) !important;
    padding: 16px 14px calc(104px + env(safe-area-inset-bottom)) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  .mobile-more-card {
    width: 100% !important;
    max-width: 520px !important;
    margin: 58px auto 0 !important;
    border-radius: 24px !important;
    padding: 14px !important;
    background: #fff !important;
    box-shadow: 0 24px 70px rgba(7,17,31,.32) !important;
  }

  .mobile-more-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .mobile-more-grid button {
    min-height: 74px !important;
    border-radius: 18px !important;
    border: 1px solid #e3e9f2 !important;
    background: linear-gradient(180deg,#fff,#f9fbfe) !important;
  }

  .rvm-home-access {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 20px !important;
    border: 1px solid rgba(184,137,36,.32) !important;
    background: linear-gradient(135deg, #fff, #fff8eb) !important;
    box-shadow: 0 10px 28px rgba(16,24,40,.08) !important;
  }

  .rvm-home-access .rvm-home-icon {
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--rv-m-primary), var(--rv-m-primary-2)) !important;
  }

  .login-page,
  .center-screen {
    min-height: 100dvh !important;
    padding: 14px !important;
    background:
      radial-gradient(circle at 10% 0%, rgba(184,137,36,.18), transparent 34%),
      linear-gradient(180deg,#07111f 0%, #0b2d4a 42%, #eef3f8 42%, #eef3f8 100%) !important;
  }

  .login-shell,
  .login-shell-enterprise {
    width: 100% !important;
    max-width: 460px !important;
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    box-shadow: 0 24px 70px rgba(7,17,31,.28) !important;
  }

  .login-brand,
  .login-brand-enterprise {
    padding: 24px !important;
    min-height: 210px !important;
    border: 0 !important;
    background: linear-gradient(145deg,#07111f,#0b2d4a) !important;
    color: #fff !important;
  }

  .login-brand h1,
  .brand-copy-panel h1 {
    color: #fff !important;
    font-size: clamp(28px, 8vw, 38px) !important;
  }

  .login-brand p,
  .brand-copy-panel p {
    color: rgba(255,255,255,.78) !important;
  }

  .login-form,
  .login-form-enterprise,
  .login-box {
    border: 0 !important;
    padding: 24px !important;
    background: #fff !important;
  }
}

@media (max-width: 390px) {
  .enterprise-kpis,
  .control-strip,
  .executive-metrics,
  .compact-stats,
  .clean-kpi-strip {
    gap: 8px !important;
  }

  .enterprise-metric,
  .control-strip > div,
  .premium-metric,
  .clean-kpi,
  .compact-stats > div {
    min-height: 82px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .enterprise-metric strong,
  .control-strip strong,
  .premium-metric strong,
  .clean-kpi strong,
  .compact-stats strong {
    font-size: clamp(22px, 7.2vw, 30px) !important;
  }

  .enterprise-toolbar-actions,
  .header-actions,
  .actions-right {
    grid-template-columns: 1fr !important;
  }

  .mobile-more-grid {
    grid-template-columns: 1fr !important;
  }

  .mobile-bottom-nav button {
    min-height: 44px !important;
    font-size: 9px !important;
  }
}