/* AgroCore Mobile Shell
   Capa responsive aislada: no altera la composicion de escritorio.
   Mantiene las mismas vistas, datos, permisos y acciones de app.js. */

.mobile-bottom-nav,
.mobile-menu-backdrop,
.mobile-app-menu {
  display: none;
}

@media (max-width: 760px) {
  :root {
    --mobile-shell-bar-height: 66px;
    --mobile-shell-top-height: 48px;
  }

  html {
    scroll-padding-top: calc(var(--mobile-shell-top-height) + 8px);
  }

  body {
    padding-bottom: calc(var(--mobile-shell-bar-height) + env(safe-area-inset-bottom));
    background: #f3f7f5;
  }

  body.mobile-menu-open {
    overflow: hidden;
  }

  .app-shell {
    min-height: 100dvh;
  }

  /* En telefono el sidebar de escritorio deja espacio a una navegacion tactil dedicada. */
  .app-shell > .sidebar {
    display: none !important;
  }

  .main {
    width: 100%;
    min-width: 0;
    padding: 0 7px calc(var(--mobile-shell-bar-height) + 14px) !important;
  }

  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 850 !important;
    min-height: var(--mobile-shell-top-height) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 -7px 8px !important;
    padding: max(6px, env(safe-area-inset-top)) 9px 6px !important;
    border: 0 !important;
    border-bottom: 1px solid #d8e4df !important;
    border-radius: 0 !important;
    background: rgba(249, 252, 250, 0.97) !important;
    box-shadow: 0 5px 18px rgba(10, 47, 36, 0.08) !important;
    backdrop-filter: blur(14px);
  }

  .topbar .eyebrow {
    display: none !important;
  }

  .topbar h1 {
    margin: 0 !important;
    color: #173f34;
    font-size: 0.94rem !important;
    line-height: 1.1;
  }

  .topbar .top-actions {
    display: flex !important;
    width: auto !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .topbar #newOrderTop,
  .topbar #resetDemo {
    display: none !important;
  }

  .topbar .user-chip {
    min-height: 36px !important;
    max-width: 150px !important;
    padding: 3px 6px 3px 4px !important;
    border-radius: 12px !important;
  }

  .topbar .user-avatar {
    width: 29px !important;
    height: 29px !important;
  }

  .topbar .user-chip-copy strong {
    font-size: 0.66rem !important;
  }

  .topbar .user-chip-copy small {
    font-size: 0.55rem !important;
  }

  .user-menu-panel {
    top: calc(var(--mobile-shell-top-height) + env(safe-area-inset-top) + 4px) !important;
    right: 7px !important;
    width: min(250px, calc(100vw - 14px)) !important;
    z-index: 9700 !important;
  }

  /* Navegacion inferior: accesos operativos, respetando los permisos que aplica app.js. */
  .app-shell:not(.locked) .mobile-bottom-nav {
    position: fixed;
    z-index: 9400;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: stretch;
    gap: 2px;
    min-height: var(--mobile-shell-bar-height);
    padding: 5px 5px max(5px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(31, 90, 70, 0.18);
    background: rgba(250, 253, 251, 0.98);
    box-shadow: 0 -8px 24px rgba(13, 50, 39, 0.12);
    backdrop-filter: blur(15px);
  }

  .mobile-bottom-nav .mobile-nav-item,
  .mobile-bottom-nav .mobile-menu-toggle {
    position: relative;
    display: grid !important;
    flex: 1 1 0;
    min-width: 0 !important;
    min-height: 52px !important;
    place-items: center;
    align-content: center;
    gap: 2px !important;
    padding: 4px 2px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #60766d !important;
    box-shadow: none !important;
    transform: none !important;
    font: inherit;
  }

  .mobile-bottom-nav [hidden] {
    display: none !important;
  }

  .mobile-bottom-nav .mobile-nav-icon {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 8px;
    background: #edf5f1;
    color: #315e4f;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
  }

  .mobile-bottom-nav small {
    color: inherit;
    font-size: 0.58rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
  }

  .mobile-bottom-nav .mobile-nav-item.active {
    background: #e5f4ed !important;
    color: #0d6b50 !important;
  }

  .mobile-bottom-nav .mobile-nav-item.active .mobile-nav-icon {
    background: #157557;
    color: #ffffff;
  }

  .mobile-bottom-nav .mobile-menu-toggle[aria-expanded="true"] {
    background: #e8f0ed !important;
    color: #173f34 !important;
  }

  /* Menu completo en formato bottom sheet. */
  .app-shell:not(.locked) .mobile-menu-backdrop {
    position: fixed;
    z-index: 9500;
    inset: 0;
    display: block;
    visibility: hidden;
    background: rgba(4, 17, 13, 0.52);
    opacity: 0;
    pointer-events: none;
    transition: opacity 170ms ease, visibility 170ms ease;
  }

  .app-shell:not(.locked) .mobile-app-menu {
    position: fixed;
    z-index: 9600;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    max-height: min(84dvh, 760px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #cadbd4;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    background: #f9fcfa;
    box-shadow: 0 -20px 50px rgba(4, 29, 21, 0.26);
    transform: translateY(105%);
    pointer-events: none;
    transition: transform 190ms ease;
  }

  body.mobile-menu-open .mobile-menu-backdrop {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  body.mobile-menu-open .mobile-app-menu {
    transform: translateY(0);
    pointer-events: auto;
  }

  .mobile-app-menu-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 40px;
    gap: 10px;
    align-items: center;
    padding: 12px 13px 10px;
    border-bottom: 1px solid #dbe7e2;
    background: #ffffff;
  }

  .mobile-app-menu-head img {
    width: 40px;
    height: 40px;
    object-fit: contain;
  }

  .mobile-app-menu-head div {
    display: grid;
    gap: 1px;
  }

  .mobile-app-menu-head small {
    color: #72877f;
    font-size: 0.61rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .mobile-app-menu-head strong {
    color: #173f34;
    font-size: 0.98rem;
  }

  .mobile-menu-close {
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 11px !important;
  }

  .mobile-app-menu-scroll {
    display: grid;
    gap: 13px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 11px 11px calc(18px + env(safe-area-inset-bottom));
  }

  .mobile-menu-section {
    display: grid;
    gap: 6px;
  }

  .mobile-menu-section > strong {
    padding: 0 4px;
    color: #6b8078;
    font-size: 0.63rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .mobile-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .mobile-app-menu .mobile-drawer-item {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    align-items: center;
    justify-content: flex-start;
    padding: 9px 11px !important;
    border: 1px solid #d7e4df !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    color: #294d41 !important;
    box-shadow: none !important;
    font-size: 0.72rem !important;
    font-weight: 800;
    text-align: left;
    white-space: normal !important;
    transform: none !important;
  }

  .mobile-app-menu .mobile-drawer-item.active {
    border-color: #63a58c !important;
    background: #e8f5ef !important;
    color: #0b664c !important;
  }

  .mobile-app-menu .mobile-drawer-item[hidden] {
    display: none !important;
  }

  /* Densidad y tactilidad generales sin cambiar el estilo visual de AgroCore. */
  .view.active-view > .panel {
    border-radius: 12px;
  }

  .panel-header {
    gap: 8px;
  }

  .panel-header h2 {
    font-size: 1rem;
  }

  .panel-header p {
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .modal-actions button,
  .card-actions button,
  .wide-actions button,
  .warehouse-actions button,
  #manager .manager-order-card .card-actions button {
    min-height: 42px !important;
    padding: 8px 10px !important;
    font-size: 0.76rem !important;
  }

  .view.active-view input:not([type="checkbox"]):not([type="radio"]),
  .view.active-view select,
  .view.active-view textarea {
    min-height: 40px;
    font-size: 0.82rem;
  }

  .table-wrap,
  .gantt-table,
  .report-table {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap::after,
  .gantt-table::after {
    display: block;
  }

  /* Filtros: una sola franja desplazable evita llenar la pantalla antes del contenido. */
  .warehouse-filters,
  .program-filters,
  .report-filters,
  .harvest-filters,
  .harvest-operational-filters {
    display: flex !important;
    width: 100%;
    max-width: 100%;
    align-items: end;
    gap: 7px;
    overflow-x: auto;
    padding: 3px 1px 7px;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
  }

  .warehouse-filters > label,
  .program-filters > label,
  .report-filters > label,
  .harvest-filters > label,
  .harvest-operational-filters > label,
  .warehouse-filters > button,
  .program-filters > button,
  .report-filters > button {
    flex: 0 0 150px !important;
    width: 150px !important;
    min-width: 150px !important;
    scroll-snap-align: start;
  }

  .warehouse-filters .warehouse-order-search {
    flex-basis: 176px !important;
    width: 176px !important;
    min-width: 176px !important;
  }

  /* Bodega: la misma informacion se presenta como tarjetas legibles. */
  #warehouse.active-view > .panel {
    padding: 8px !important;
  }

  #warehouse .warehouse-panel-header {
    display: grid;
    align-items: stretch;
    gap: 7px;
  }

  #warehouse .warehouse-panel-header > div:first-child p {
    display: none;
  }

  #warehouse .warehouse-order-list {
    gap: 10px;
  }

  #warehouse .warehouse-order-card {
    gap: 9px;
    padding: 11px;
    border-left-width: 4px;
    border-radius: 12px;
  }

  #warehouse .warehouse-order-card .order-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
  }

  #warehouse .warehouse-order-identity {
    min-width: 0;
    gap: 9px;
  }

  #warehouse .warehouse-order-number {
    flex-basis: 66px;
    min-width: 66px;
    padding: 5px 7px;
  }

  #warehouse .warehouse-order-number strong {
    font-size: 1.22rem;
  }

  #warehouse .warehouse-order-heading h3 {
    font-size: 0.88rem;
    line-height: 1.2;
  }

  #warehouse .warehouse-order-subline {
    gap: 2px 6px;
  }

  #warehouse .warehouse-created-at {
    width: 100%;
    font-size: 0.61rem;
  }

  #warehouse .warehouse-order-card .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-radius: 9px;
  }

  #warehouse .warehouse-order-card .metrics > div {
    min-height: 52px;
    padding: 7px 8px;
  }

  #warehouse .warehouse-order-card .metrics dt {
    font-size: 0.61rem;
  }

  #warehouse .warehouse-order-card .metrics dd {
    font-size: 0.86rem;
  }

  #warehouse .warehouse-order-context,
  #warehouse .warehouse-detail-grid {
    grid-template-columns: 1fr !important;
  }

  #warehouse .warehouse-order-context > div {
    padding: 7px 8px;
  }

  #warehouse .warehouse-visible-section {
    min-width: 0;
    overflow: hidden;
    border-radius: 10px;
  }

  #warehouse .warehouse-product-table thead,
  #warehouse .warehouse-history-table thead {
    display: none;
  }

  #warehouse .warehouse-product-table table,
  #warehouse .warehouse-product-table tbody,
  #warehouse .warehouse-history-table table,
  #warehouse .warehouse-history-table tbody {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }

  #warehouse .warehouse-product-table tbody,
  #warehouse .warehouse-history-table tbody {
    display: grid;
    gap: 7px;
    padding: 7px;
  }

  #warehouse .warehouse-product-table tr,
  #warehouse .warehouse-history-table tr {
    display: grid;
    gap: 0;
    width: 100%;
    padding: 7px 8px;
    border: 1px solid #d9e6e1;
    border-radius: 9px;
    background: #ffffff;
  }

  #warehouse .warehouse-product-table td,
  #warehouse .warehouse-history-table td {
    display: grid;
    grid-template-columns: minmax(88px, 0.8fr) minmax(0, 1.35fr);
    gap: 8px;
    align-items: center;
    width: 100% !important;
    min-width: 0 !important;
    padding: 5px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #edf3f0 !important;
    font-size: 0.7rem !important;
    overflow-wrap: anywhere;
  }

  #warehouse .warehouse-product-table td:last-child,
  #warehouse .warehouse-history-table td:last-child {
    border-bottom: 0 !important;
  }

  #warehouse .warehouse-product-table td[data-label]::before,
  #warehouse .warehouse-history-table td[data-label]::before {
    content: attr(data-label);
    color: #70837c;
    font-size: 0.59rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  #warehouse .warehouse-history-table .dispatch-row-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }

  #warehouse .warehouse-history-table .dispatch-row-actions button {
    min-height: 36px !important;
    padding: 6px !important;
    font-size: 0.66rem !important;
  }

  #warehouse .warehouse-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100%;
  }

  #warehouse .warehouse-actions .warehouse-dispatch-button,
  #warehouse .warehouse-actions .warehouse-complete-button {
    grid-column: 1 / -1;
  }

  /* Supervisor: prioridad a la orden; Gantt completa sigue disponible mediante scroll. */
  #manager.active-view > .panel {
    padding: 8px !important;
  }

  #manager.active-view > .panel > .panel-header {
    display: grid;
    gap: 7px;
  }

  #manager.active-view > .panel > .panel-header p {
    display: none;
  }

  #manager.active-view > .panel > .panel-header .top-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px;
    width: 100% !important;
  }

  #manager .gantt-panel {
    margin-bottom: 10px;
    padding: 7px;
    border-radius: 11px;
  }

  #manager .gantt-head {
    top: calc(var(--mobile-shell-top-height) + env(safe-area-inset-top)) !important;
  }

  #manager .gantt-mobile-hint {
    display: block !important;
    margin: 5px 1px;
    color: #61766e;
    font-size: 0.64rem;
    font-weight: 750;
    line-height: 1.2;
  }

  #manager .order-grid {
    grid-template-columns: 1fr !important;
    gap: 9px;
  }

  #manager .manager-order-card {
    gap: 9px;
    padding: 11px;
    border-radius: 12px;
  }

  #manager .manager-order-identity {
    gap: 8px;
    align-items: stretch;
  }

  #manager .manager-order-number {
    flex-basis: 70px;
    min-width: 70px;
    min-height: 54px;
    padding: 5px 7px;
  }

  #manager .manager-order-number strong {
    font-size: 1.32rem;
  }

  #manager .manager-order-identity h3 {
    font-size: 0.9rem;
    line-height: 1.18;
  }

  #manager .manager-order-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 9px;
    padding: 7px 0;
  }

  #manager .manager-order-objective {
    grid-column: 1 / -1;
  }

  #manager .manager-recipe-list {
    display: grid;
    grid-template-columns: 1fr;
  }

  #manager .manager-recipe-list span {
    min-height: 38px;
    align-items: center;
    padding: 7px 8px;
    font-size: 0.7rem;
  }

  #manager .manager-order-card .card-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  #manager .manager-order-card .card-actions button:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* Mapas y paneles de terreno ganan altura util. */
  .harvest-map,
  .pest-monitoring-map,
  .geo-map,
  .field-tree-count-map {
    min-height: min(62dvh, 560px) !important;
  }
}

@media (max-width: 640px) {
  .mobile-menu-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Dialogos como hoja inferior: mas comodos con una mano y teclado movil. */
  dialog.modal[open] {
    inset: auto 0 0 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 92dvh !important;
    margin: auto 0 0 !important;
    border-radius: 18px 18px 0 0 !important;
  }

  dialog.modal::backdrop {
    background: rgba(4, 17, 13, 0.48);
  }

  dialog.modal .modal-body,
  dialog.modal .dialog-card {
    width: 100% !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .toast {
    right: 10px !important;
    bottom: calc(var(--mobile-shell-bar-height) + env(safe-area-inset-bottom) + 10px) !important;
    left: 10px !important;
    width: auto !important;
  }
}

@media (max-width: 430px) {
  .mobile-app-menu {
    max-height: 88dvh;
  }

  .mobile-menu-grid {
    gap: 5px;
  }

  .mobile-app-menu .mobile-drawer-item {
    min-height: 42px !important;
    padding: 8px 9px !important;
    font-size: 0.69rem !important;
  }

  #warehouse .warehouse-order-card,
  #manager .manager-order-card {
    padding: 9px;
  }

  #warehouse .warehouse-order-card .metrics {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 360px) {
  .mobile-bottom-nav small {
    font-size: 0.53rem;
  }

  .mobile-bottom-nav .mobile-nav-icon {
    width: 23px;
    height: 23px;
    font-size: 0.9rem;
  }

  .mobile-menu-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-backdrop,
  .mobile-app-menu {
    transition: none !important;
  }
}


/* AgroCore Mobile Complete v548
   Ajustes finales por modulo. Esta seccion carga despues de todos los estilos
   historicos para resolver conflictos sin alterar escritorio. */
@media (max-width: 760px) {
  :root {
    --agrocore-sticky-filter-top: calc(var(--mobile-shell-top-height) + env(safe-area-inset-top) + 2px) !important;
  }

  .view.active-view {
    width: 100%;
    min-width: 0;
  }

  .view.active-view :is(.panel, .order-card, .execution-card, .chart-panel) {
    max-width: 100%;
    min-width: 0;
  }

  .view.active-view > :first-child {
    margin-top: 0;
  }

  .view.active-view .panel-header {
    min-width: 0;
  }

  .view.active-view .panel-header > div {
    min-width: 0;
  }

  .view.active-view .panel-header :is(h2, h3, p, span) {
    overflow-wrap: anywhere;
  }

  .view.active-view .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-bottom: 9px !important;
  }

  .view.active-view .kpi {
    min-height: 82px;
    gap: 4px;
    padding: 10px !important;
  }

  .view.active-view .kpi > span {
    font-size: 0.63rem;
    line-height: 1.1;
  }

  .view.active-view .kpi strong {
    font-size: 1.13rem !important;
    line-height: 1.05;
  }

  .view.active-view .kpi small {
    font-size: 0.6rem;
    line-height: 1.15;
  }

  /* Inicio / estacion climatica */
  #dashboard .weather-station-home {
    gap: 8px;
  }

  #dashboard .weather-station-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    align-items: stretch !important;
  }

  #dashboard .weather-station-header h2 {
    font-size: 1.05rem !important;
  }

  #dashboard .weather-station-header-actions {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    width: 100%;
  }

  #dashboard .weather-view-switch {
    width: max-content;
    min-height: 38px;
  }

  #dashboard .weather-view-switch button {
    min-height: 32px;
    padding-inline: 12px;
  }

  #dashboard .weather-station-filters {
    position: static !important;
    display: flex !important;
    width: 100%;
    gap: 6px;
    overflow-x: auto;
    padding: 1px 1px 6px;
    box-shadow: none !important;
    background: transparent !important;
    scroll-snap-type: x proximity;
  }

  #dashboard .weather-station-filters label {
    flex: 0 0 132px;
    min-width: 132px;
    scroll-snap-align: start;
  }

  #dashboard .weather-station-filters select {
    width: 100%;
    min-width: 0;
    min-height: 38px;
  }

  #dashboard .weather-import-button,
  #dashboard .weather-export-button {
    min-height: 38px !important;
  }

  #dashboard .weather-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px;
  }

  #dashboard .weather-kpi {
    min-height: 86px;
    padding: 10px;
  }

  #dashboard .weather-dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  #dashboard .weather-temperature-panel,
  #dashboard .weather-rain-panel,
  #dashboard .weather-frost-panel,
  #dashboard .weather-frost-history,
  #dashboard .weather-rain-history {
    padding: 10px;
  }

  #dashboard .weather-panel-title {
    align-items: flex-start;
    gap: 6px;
  }

  #dashboard .weather-temperature-scroll,
  #dashboard .weather-rain-scroll {
    margin-inline: -4px;
    padding-inline: 4px;
  }

  /* Panel principal de Aplicaciones */
  #applicationDashboard .core-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-bottom: 9px;
  }

  #applicationDashboard .module-card {
    min-height: 105px;
    gap: 4px;
    padding: 11px;
    border-radius: 11px;
  }

  #applicationDashboard .module-card span {
    font-size: 0.62rem;
  }

  #applicationDashboard .module-card strong {
    font-size: 1.05rem;
  }

  #applicationDashboard .module-card :is(small, em) {
    font-size: 0.62rem;
  }

  #applicationDashboard .dashboard-ops {
    grid-template-columns: 1fr !important;
    gap: 9px;
    margin-top: 9px;
  }

  #applicationDashboard .geo-map {
    min-height: min(56dvh, 520px) !important;
  }

  #applicationDashboard .dashboard-alerts {
    gap: 8px;
  }

  #applicationDashboard .alert-panel {
    padding: 10px;
  }

  #applicationDashboard .scroll-alerts {
    max-height: 280px;
  }

  #applicationDashboard .alert-row {
    gap: 8px;
    padding-block: 8px;
  }

  /* Programa fitosanitario */
  #program .official-program-panel {
    padding: 8px !important;
  }

  #program .official-program-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px;
  }

  #program .official-program-head-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  #program .official-program-head-actions button {
    min-height: 42px !important;
  }

  #program .official-program-filters {
    position: static !important;
    box-shadow: none !important;
  }

  #program .official-program-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px;
  }

  #program .official-program-summary > span {
    min-height: 54px;
    padding: 7px;
  }

  #program .official-program-list {
    gap: 8px;
  }

  #program .official-program-item {
    border-radius: 11px;
    overflow: hidden;
  }

  #program .official-program-item > summary {
    min-height: 56px;
    gap: 7px;
    padding: 9px !important;
  }

  #program .official-program-number {
    min-width: 52px;
  }

  #program .official-program-title {
    min-width: 0;
  }

  #program .official-program-title :is(strong, span) {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  #program .official-program-detail {
    padding: 8px !important;
  }

  #program .official-program-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #program .official-program-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  #program .official-program-actions button {
    min-height: 40px !important;
  }

  #program .manager-order-card {
    padding: 10px;
  }

  /* Inventario / Stock */
  #inventory .inventory-layout {
    grid-template-columns: 1fr !important;
    gap: 9px;
  }

  #inventory .inventory-panel-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px;
  }

  #inventory .inventory-panel-header .top-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px;
  }

  #inventory .inventory-panel-header .top-actions button {
    min-height: 42px !important;
  }

  #inventory .inventory-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important;
    gap: 6px;
  }

  #inventory .timeline {
    max-height: 360px;
    overflow-y: auto;
  }

  #inventory .timeline-item {
    padding: 8px;
  }

  /* Reportes */
  #reports > .panel {
    padding: 8px !important;
  }

  #reports .report-toolbar {
    position: static !important;
    display: grid !important;
    gap: 6px;
    box-shadow: none !important;
    background: transparent !important;
  }

  #reports .report-filters {
    display: flex !important;
    width: 100%;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 6px;
  }

  #reports .report-filters > * {
    flex: 0 0 150px !important;
    min-width: 150px !important;
  }

  #reports .report-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  #reports .chart-panel,
  #reports .report-program-products-panel {
    min-width: 0;
    padding: 10px;
  }

  #reports .chart-body {
    min-width: 0;
    overflow-x: auto;
  }

  #reports .bar-row,
  #reports .report-progress-row,
  #reports .monthly-row {
    min-width: 0;
  }

  /* Riego completo */
  #irrigation.active-view > .irrigation-panel,
  #calicatas.active-view > .calicatas-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
  }

  #irrigation .irrigation-panel {
    padding: 6px !important;
  }

  #irrigation .irrigation-gantt-filter-bar {
    top: var(--agrocore-sticky-filter-top) !important;
    margin-inline: 0 !important;
  }

  #irrigation .irrigation-gantt-filter-bar .irrigation-filters,
  #irrigation .irrigation-filter-drawer .irrigation-filters {
    display: flex !important;
    width: 100%;
    overflow-x: auto;
    gap: 6px;
    padding: 4px 2px 7px;
    scroll-snap-type: x proximity;
  }

  #irrigation .irrigation-filters > label,
  #irrigation .irrigation-filters > button {
    flex: 0 0 132px !important;
    width: 132px !important;
    min-width: 132px !important;
    scroll-snap-align: start;
  }

  #irrigation .irrigation-wiseconn-refresh {
    flex-basis: 156px !important;
    width: 156px !important;
    min-width: 156px !important;
  }

  #irrigation .irrigation-filter-drawer {
    top: calc(var(--mobile-shell-top-height) + env(safe-area-inset-top) + 4px) !important;
    right: 5px !important;
    left: 5px !important;
    width: auto !important;
    max-height: min(72dvh, 560px);
    overflow-y: auto;
    border-radius: 13px;
  }

  #irrigation .irrigation-compare-wrap {
    top: calc(var(--mobile-shell-top-height) + env(safe-area-inset-top) + 3px) !important;
    margin-top: 4px;
  }

  #irrigation .irrigation-section-title {
    min-height: 34px;
    padding-inline: 7px;
  }

  #irrigation .irrigation-section-title strong {
    font-size: 0.78rem;
  }

  #irrigation .irrigation-bandeja-current-total {
    font-size: 0.6rem;
  }

  #irrigation .irrigation-gantt {
    max-width: 100%;
    min-height: 170px;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #irrigation .irrigation-row {
    grid-template-columns: 220px max-content 50px 62px !important;
  }

  #irrigation .irrigation-block-label {
    grid-template-columns: 28px 36px minmax(0, 1fr) !important;
  }

  #irrigation .irrigation-days {
    grid-template-columns: repeat(var(--days), 30px) !important;
  }

  #irrigation :is(
    .irrigation-date-cell,
    .irrigation-tray-cell,
    .irrigation-program-cell,
    .irrigation-hour-input,
    .calicata-day-cell,
    .calicata-detail-cell
  ) {
    width: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    font-size: 0.61rem !important;
  }

  #irrigation .irrigation-gantt-program,
  #irrigation .irrigation-gantt-real {
    min-height: 185px !important;
    max-height: 43dvh !important;
  }

  #irrigation .irrigation-bandeja-entry-row,
  #irrigation .irrigation-bandeja-entry-actions,
  #irrigation .irrigation-balance-toolbar,
  #irrigation .irrigation-local-filters,
  #irrigation .satellite-toolbar {
    min-width: 0;
  }

  #irrigation .irrigation-bandeja-entry-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px;
  }

  #irrigation .irrigation-bandeja-entry-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px;
  }

  #irrigation .irrigation-bandeja-view-switch {
    width: 100%;
  }

  #irrigation .irrigation-bandeja-view-switch button {
    flex: 1 1 0;
    min-height: 40px;
  }

  #irrigation .irrigation-bandeja-matrix-scroll,
  #irrigation .irrigation-balance-table-wrap,
  #irrigation .irrigation-alert-gantt-scroll {
    max-width: 100%;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #irrigation .satellite-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px;
  }

  #irrigation .satellite-map {
    min-height: min(58dvh, 540px) !important;
  }

  #irrigation .irrigation-events-panel {
    min-height: auto !important;
    padding: 7px !important;
  }

  #irrigation .irrigation-events-head,
  #irrigation .irrigation-compact-events-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px;
  }

  #irrigation .irrigation-events-view-switch {
    width: 100%;
  }

  #irrigation .irrigation-events-view-switch button {
    flex: 1 1 0;
    min-height: 40px;
  }

  #irrigation .irrigation-events-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  #irrigation .irrigation-compact-alert {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px;
  }

  #irrigation .irrigation-compact-alert-action {
    width: 100%;
  }

  #irrigation .irrigation-compact-alert-action button {
    width: 100%;
    min-height: 40px !important;
  }

  /* Calicatas */
  #calicatas .calicatas-panel {
    padding: 6px !important;
  }

  #calicatas .calicatas-panel-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px;
  }

  #calicatas .calicatas-filters {
    position: static !important;
    display: flex !important;
    width: 100%;
    overflow-x: auto;
    gap: 6px;
    padding: 2px 1px 6px;
    box-shadow: none !important;
    background: transparent !important;
  }

  #calicatas .calicatas-filters > * {
    flex: 0 0 145px !important;
    min-width: 145px !important;
  }

  #calicatas .irrigation-calicatas-layout {
    grid-template-columns: 1fr !important;
    gap: 7px;
  }

  #calicatas .irrigation-calicata-map {
    min-height: 54dvh !important;
    max-height: 62dvh !important;
  }

  #calicatas .irrigation-calicata-history {
    min-height: 220px !important;
    max-height: 36dvh !important;
  }

  /* Fertilizantes: estanques, bodega y folios */
  #fertilizers .fertilizer-shell,
  #fertilizerAnalysis .fertilizer-analysis-shell,
  #fertilizerWork .fertilizer-work-shell {
    gap: 8px;
  }

  #fertilizers .fertilizer-toolbar {
    position: static !important;
    padding: 8px !important;
    box-shadow: none !important;
  }

  #fertilizers .fertilizer-toolbar-title {
    font-size: 1.05rem;
  }

  #fertilizers .fertilizer-toolbar-body {
    grid-template-columns: 1fr !important;
    gap: 7px;
  }

  #fertilizers .fertilizer-filters {
    display: flex !important;
    width: 100%;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 5px;
  }

  #fertilizers .fertilizer-filters label {
    flex: 0 0 145px;
    min-width: 145px;
  }

  #fertilizers .fertilizer-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px;
  }

  #fertilizers .fertilizer-action-button {
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 6px 4px !important;
    font-size: 0.66rem !important;
    white-space: normal !important;
  }

  #fertilizers .fertilizer-source-note {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 2px;
  }

  #fertilizers .fertilizer-source-note span {
    flex: 0 0 auto;
  }

  #fertilizers .fertilizer-workspace {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  #fertilizers .fertilizer-section-title {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px;
  }

  #fertilizers .fertilizer-storage-toggle {
    width: 100% !important;
  }

  #fertilizers .fertilizer-storage-toggle button {
    min-height: 40px;
  }

  #fertilizers .fertilizer-caseta-grid,
  #fertilizers .fertilizer-tank-grid,
  #fertilizers .fertilizer-warehouse-group .fertilizer-tank-grid {
    grid-template-columns: 1fr !important;
  }

  #fertilizers .fertilizer-warehouse-house-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px;
  }

  #fertilizers .fertilizer-warehouse-group-totals {
    justify-content: stretch;
  }

  #fertilizers .fertilizer-warehouse-group-totals > div {
    flex: 1 1 130px;
    min-width: 0;
    text-align: left;
  }

  #fertilizers .fertilizer-warehouse-card {
    grid-template-columns: 86px minmax(0, 1fr) !important;
  }

  #fertilizers .fertilizer-folio-card > summary {
    min-height: 54px;
    padding: 9px;
  }

  #fertilizers .fertilizer-folio-metadata {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Fertilizante analisis */
  #fertilizerAnalysis .fertilizer-analysis-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px;
    padding: 8px;
  }

  #fertilizerAnalysis .fertilizer-analysis-filters {
    display: flex !important;
    width: 100%;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 6px;
  }

  #fertilizerAnalysis .fertilizer-analysis-filters > label,
  #fertilizerAnalysis .fertilizer-analysis-filters > button {
    flex: 0 0 145px !important;
    min-width: 145px !important;
  }

  #fertilizerAnalysis .fertilizer-analysis-legend {
    overflow-x: auto;
    white-space: nowrap;
  }

  #fertilizerAnalysis .fertilizer-kpi-groups {
    grid-template-columns: 1fr !important;
    gap: 7px;
  }

  #fertilizerAnalysis .fertilizer-kpi-group {
    padding: 8px;
  }

  #fertilizerAnalysis .fertilizer-month-panel {
    padding: 8px;
  }

  #fertilizerAnalysis .fertilizer-month-panel-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px;
  }

  #fertilizerAnalysis .fertilizer-month-matrix-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Trabajo fertilizante */
  #fertilizerWork .fertilizer-work-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px;
    padding: 8px;
  }

  #fertilizerWork .fertilizer-work-filters {
    display: flex !important;
    width: 100%;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 6px;
  }

  #fertilizerWork .fertilizer-work-filters > label,
  #fertilizerWork .fertilizer-work-filters > button {
    flex: 0 0 145px !important;
    min-width: 145px !important;
  }

  #fertilizerWork .fertilizer-work-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px;
  }

  #fertilizerWork .fertilizer-work-card {
    border-radius: 11px;
    padding: 8px;
  }

  #fertilizerWork .fertilizer-work-card-header {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px;
  }

  #fertilizerWork .fertilizer-work-card-balance {
    min-width: 108px;
  }

  #fertilizerWork .fertilizer-work-table-wrap {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #fertilizerWork .fertilizer-work-table {
    min-width: max(760px, calc(390px + (var(--block-count) * 88px))) !important;
  }

  /* Monitoreo de plagas */
  #pestMonitoring .pest-monitoring-shell {
    gap: 8px;
  }

  #pestMonitoring .pest-method-switch {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px;
  }

  #pestMonitoring .pest-method-switch button {
    min-height: 40px !important;
  }

  #pestMonitoring .pest-method-switch > span {
    grid-column: 1 / -1;
    padding: 4px 2px;
    font-size: 0.64rem;
  }

  #pestMonitoring .pest-filter-bar {
    position: static !important;
    display: flex !important;
    width: 100%;
    overflow-x: auto;
    align-items: end;
    gap: 6px;
    padding: 6px;
    box-shadow: none !important;
    scroll-snap-type: x proximity;
  }

  #pestMonitoring .pest-filter-bar > label,
  #pestMonitoring .pest-report-action,
  #pestMonitoring .pest-filter-bar > button {
    flex: 0 0 140px;
    min-width: 140px;
    scroll-snap-align: start;
  }

  #pestMonitoring .pest-filter-bar :is(input, select, button) {
    min-height: 38px !important;
  }

  #pestMonitoring .pest-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px;
  }

  #pestMonitoring .pest-kpis .kpi {
    min-height: 78px;
  }

  #pestMonitoring .pest-monitoring-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
    gap: 8px;
  }

  #pestMonitoring .pest-map-panel {
    min-height: 55dvh;
  }

  #pestMonitoring .pest-monitoring-map {
    min-height: 55dvh !important;
    height: 55dvh !important;
  }

  #pestMonitoring .pest-tree-layer-control {
    top: 48px;
    left: 7px;
    max-width: calc(100% - 14px);
  }

  #pestMonitoring .pest-map-legend {
    right: 7px;
    bottom: 8px;
    max-width: calc(100% - 14px);
  }

  #pestMonitoring .pest-ranking-panel {
    min-height: 0;
    max-height: none !important;
  }

  #pestMonitoring .pest-coverage-wrap,
  #pestMonitoring .pest-monthly-table-wrap,
  #pestMonitoring .pest-current-detail-wrap,
  #pestMonitoring .pest-latest-potrero-wrap {
    max-width: 100%;
    overflow-x: auto;
  }

  /* Fenologia */
  #phenologyMonitoring .phenology-shell {
    gap: 8px;
  }

  #phenologyMonitoring .phenology-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 7px;
  }

  #phenologyMonitoring .phenology-toolbar-title h2 {
    font-size: 1.05rem;
  }

  #phenologyMonitoring .phenology-toolbar-filters {
    display: flex !important;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    gap: 6px;
    padding-bottom: 6px;
  }

  #phenologyMonitoring .phenology-toolbar-filters label,
  #phenologyMonitoring .phenology-toolbar-filters button {
    flex: 0 0 145px !important;
    min-width: 145px !important;
  }

  #phenologyMonitoring .phenology-toolbar-filters select {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 40px;
  }

  #phenologyMonitoring .phenology-map {
    height: 55dvh !important;
    min-height: 390px;
  }

  #phenologyMonitoring .phenology-timeline-heading {
    display: grid;
    gap: 3px;
  }

  #phenologyMonitoring .phenology-calendar-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px;
  }

  #phenologyMonitoring .phenology-view-toggle {
    width: 100%;
  }

  #phenologyMonitoring .phenology-view-toggle button {
    flex: 1 1 0;
    min-height: 40px;
  }

  #phenologyMonitoring .phenology-calendar-count {
    margin-left: 0 !important;
  }

  #phenologyMonitoring .phenology-table-scroll {
    max-width: 100%;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #phenologyMonitoring .phenology-potrero-corner,
  #phenologyMonitoring .phenology-potrero-row-label {
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    padding: 6px !important;
  }

  #phenologyMonitoring .phenology-calendar-table.is-month .phenology-day-head,
  #phenologyMonitoring .phenology-calendar-table.is-month .phenology-calendar-cell {
    width: 78px !important;
    min-width: 78px !important;
  }

  #phenologyMonitoring .phenology-month-head,
  #phenologyMonitoring .phenology-calendar-table.is-year .phenology-calendar-cell {
    width: 132px !important;
    min-width: 132px !important;
  }

  #phenologyMonitoring .phenology-calendar-cell {
    height: 62px;
  }

  /* Conteo de arboles */
  #fieldTreeCount .field-tree-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px;
  }

  #fieldTreeCount .field-tree-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  #fieldTreeCount .field-tree-actions button {
    min-height: 42px !important;
  }

  #fieldTreeCount .field-tree-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px;
  }

  #fieldTreeCount .field-tree-map {
    min-height: 56dvh !important;
    height: 56dvh !important;
  }

  #fieldTreeCount .field-tree-legend {
    display: flex;
    max-width: calc(100% - 14px);
    flex-wrap: wrap;
    gap: 5px 9px;
  }

  #fieldTreeCount .field-tree-summary {
    grid-template-columns: 1fr !important;
  }

  #fieldTreeCount .field-tree-table-wrap {
    max-width: 100%;
    overflow-x: auto;
  }

  /* Informaticos */
  #informatics .informatics-module {
    gap: 8px;
  }

  #informatics .informatics-toolbar {
    padding: 9px;
  }

  #informatics .informatics-toolbar-heading {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px;
  }

  #informatics .informatics-toolbar-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px;
  }

  #informatics .informatics-toolbar-actions .primary-button {
    grid-column: 1 / -1;
  }

  #informatics .informatics-filters {
    display: flex !important;
    width: 100%;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 6px;
  }

  #informatics .informatics-filters > label {
    flex: 0 0 145px;
    min-width: 145px;
  }

  #informatics .informatics-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px;
  }

  #informatics .informatics-week-board {
    grid-template-columns: repeat(7, minmax(82vw, 1fr)) !important;
    gap: 7px;
    scroll-snap-type: x mandatory;
  }

  #informatics .informatics-day {
    min-height: 300px;
    scroll-snap-align: start;
  }

  #informatics .informatics-pending-list > article {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  /* Cosecha: mapa, Harvest, exportacion y analisis */
  #harvestMap .harvest-map-panel,
  #harvestInfo > .panel,
  #harvestExport .harvest-analytics-panel,
  #harvestAnalysis .harvest-analytics-panel {
    padding: 8px !important;
  }

  #harvestMap .harvest-map {
    min-height: 59dvh !important;
    height: 59dvh !important;
  }

  #harvestInfo .harvest-info-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #harvestInfo .harvest-info-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  #harvestInfo .harvest-info-actions .harvest-crew-schedule-open:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  #harvestInfo .harvest-missing-compact {
    grid-template-columns: auto auto !important;
    gap: 6px;
    padding: 8px;
  }

  #harvestInfo .harvest-missing-compact > div {
    grid-column: 1 / -1;
  }

  #harvestInfo .harvest-dashboard-grid,
  #harvestInfo .harvest-crop-dashboard-grid,
  #harvestExport .harvest-analytics-grid,
  #harvestAnalysis .harvest-analytics-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  #harvestInfo .harvest-ranking,
  #harvestExport .harvest-analytics-card,
  #harvestAnalysis .harvest-analytics-card {
    padding: 9px !important;
  }

  #harvestInfo .harvest-rank-row {
    grid-template-columns: minmax(92px, 1fr) minmax(70px, 1fr) 44px !important;
    gap: 6px;
  }

  #harvestInfo .harvest-rank-row span {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  #harvestExport .harvest-analytics-filters,
  #harvestAnalysis .harvest-analysis-filters {
    position: static !important;
    display: flex !important;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    gap: 6px;
    padding: 4px 1px 7px !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  #harvestExport .harvest-analytics-filters > label,
  #harvestExport .harvest-analytics-filters > button,
  #harvestAnalysis .harvest-analysis-filters > label,
  #harvestAnalysis .harvest-analysis-filters > button {
    flex: 0 0 145px !important;
    min-width: 145px !important;
  }

  #harvestAnalysis .harvest-year-checks {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    display: flex !important;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
  }

  #harvestAnalysis .harvest-year-checks label {
    min-width: auto !important;
    white-space: nowrap;
  }

  #harvestAnalysis .harvest-analysis-fold-trigger {
    min-height: 58px;
    padding: 9px !important;
  }

  #harvestAnalysis .harvest-analysis-fold-copy small {
    line-height: 1.15;
  }

  #harvestAnalysis .harvest-comparison-species-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  #harvestAnalysis .harvest-comparison-species-totals {
    justify-content: flex-start;
  }

  #harvestAnalysis .harvest-variety-year-groups,
  #harvestAnalysis .harvest-potrero-variety-masonry,
  #harvestAnalysis .harvest-contractor-variety-grid {
    grid-template-columns: 1fr !important;
  }

  #harvestAnalysis .harvest-contractor-years {
    grid-template-columns: 1fr !important;
  }

  /* Tablas convertidas dinamicamente a tarjetas por mobile-navigation.js */
  .mobile-card-table-wrap {
    overflow: visible !important;
  }

  table.mobile-card-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate !important;
  }

  table.mobile-card-table > thead {
    display: none !important;
  }

  table.mobile-card-table > tbody {
    display: grid !important;
    width: 100% !important;
    gap: 7px;
  }

  table.mobile-card-table > tbody > tr {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 7px 8px !important;
    border: 1px solid #d8e5df !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(17, 58, 46, 0.05);
  }

  table.mobile-card-table > tbody > tr[hidden] {
    display: none !important;
  }

  table.mobile-card-table > tbody > tr > :is(td, th) {
    display: grid !important;
    grid-template-columns: minmax(92px, 0.85fr) minmax(0, 1.35fr) !important;
    gap: 8px !important;
    align-items: center;
    width: 100% !important;
    min-width: 0 !important;
    padding: 5px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #edf3f0 !important;
    background: transparent !important;
    font-size: 0.7rem !important;
    text-align: left !important;
    overflow-wrap: anywhere;
  }

  table.mobile-card-table > tbody > tr > :is(td, th):last-child {
    border-bottom: 0 !important;
  }

  table.mobile-card-table > tbody > tr > td[data-mobile-label]::before {
    content: attr(data-mobile-label);
    color: #6e8179;
    font-size: 0.58rem;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
  }

  table.mobile-card-table > tbody > tr > td[colspan] {
    display: block !important;
    padding: 8px 0 !important;
  }

  table.mobile-card-table > tbody > tr > td[colspan]::before {
    content: none !important;
  }
}

@media (max-width: 480px) {
  #fertilizers .fertilizer-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #fertilizers .fertilizer-action-button.action-export:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  #fieldTreeCount .field-tree-stats {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  #fieldTreeCount .field-tree-stats > * {
    padding-inline: 5px;
  }

  #harvestInfo .harvest-info-kpis,
  #dashboard .weather-kpi-grid,
  .view.active-view .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #inventory .inventory-toolbar {
    grid-template-columns: 1fr !important;
  }

  #manager .manager-order-card .card-actions,
  #warehouse .warehouse-actions,
  #inventory .inventory-panel-header .top-actions {
    grid-template-columns: 1fr !important;
  }

  #manager .manager-order-card .card-actions > *,
  #warehouse .warehouse-actions > *,
  #inventory .inventory-panel-header .top-actions > * {
    grid-column: auto !important;
  }

  #phenologyMonitoring .phenology-map,
  #pestMonitoring .pest-monitoring-map,
  #fieldTreeCount .field-tree-map,
  #harvestMap .harvest-map {
    min-height: 52dvh !important;
    height: 52dvh !important;
  }

  table.mobile-card-table > tbody > tr > :is(td, th) {
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }
}

@media (max-width: 360px) {
  .view.active-view .kpi-grid,
  #dashboard .weather-kpi-grid,
  #harvestInfo .harvest-info-kpis,
  #applicationDashboard .core-overview,
  #fertilizerWork .fertilizer-work-summary {
    grid-template-columns: 1fr !important;
  }

  #fieldTreeCount .field-tree-stats {
    grid-template-columns: 1fr !important;
  }

  #program .official-program-summary,
  #program .official-program-facts,
  #program .official-program-head-actions,
  #program .official-program-actions,
  #harvestInfo .harvest-info-actions,
  #informatics .informatics-toolbar-actions {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  :root {
    --mobile-shell-bar-height: 54px;
    --mobile-shell-top-height: 42px;
  }

  .topbar {
    min-height: 42px !important;
    padding-block: 4px !important;
  }

  .mobile-bottom-nav {
    min-height: 54px !important;
    padding-block: 3px !important;
  }

  .mobile-bottom-nav .mobile-nav-item,
  .mobile-bottom-nav .mobile-menu-toggle {
    min-height: 44px !important;
  }

  .mobile-bottom-nav .mobile-nav-icon {
    width: 21px;
    height: 21px;
    font-size: 0.82rem;
  }

  #irrigation .irrigation-gantt-program,
  #irrigation .irrigation-gantt-real {
    min-height: 58dvh !important;
    max-height: 68dvh !important;
  }

  #phenologyMonitoring .phenology-map,
  #pestMonitoring .pest-monitoring-map,
  #fieldTreeCount .field-tree-map,
  #harvestMap .harvest-map,
  #calicatas .irrigation-calicata-map,
  #irrigation .satellite-map {
    min-height: 72dvh !important;
    height: 72dvh !important;
    max-height: 78dvh !important;
  }
}


/* Mobile menu accordion v549 */
@media (max-width: 760px) {
  .mobile-app-menu-head {
    grid-template-columns: 42px minmax(0, 1fr) 40px;
  }

  .mobile-app-menu-head > div {
    min-width: 0;
  }

  .mobile-current-view {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #678078;
    font-size: 0.61rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-menu-search {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 34px;
    gap: 5px;
    align-items: center;
    margin: 9px 11px 0;
    padding: 4px 5px 4px 8px;
    border: 1px solid #d5e3dd;
    border-radius: 12px;
    background: #ffffff;
  }

  .mobile-menu-search > span {
    color: #648076;
    font-size: 1.05rem;
    font-weight: 900;
    text-align: center;
  }

  .mobile-menu-search input {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #173f34;
    font: inherit;
    font-size: 0.78rem;
  }

  .mobile-menu-search button {
    width: 32px;
    height: 32px;
    min-height: 32px !important;
    padding: 0 !important;
    border: 0;
    border-radius: 9px;
    background: #eef5f2;
    color: #5e756c;
    font-size: 1rem;
  }

  .mobile-menu-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .mobile-app-menu .mobile-drawer-shortcut {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }

  .mobile-drawer-shortcut > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .mobile-drawer-shortcut strong {
    color: inherit;
    font-size: 0.72rem;
  }

  .mobile-drawer-shortcut small {
    color: #72867f;
    font-size: 0.58rem;
    font-weight: 750;
  }

  .mobile-menu-item-icon,
  .mobile-menu-section-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 9px;
    background: #e9f4ef;
    color: #155f49;
    font-size: 0.72rem;
    font-weight: 950;
  }

  .mobile-menu-accordion {
    gap: 0 !important;
    overflow: hidden;
    border: 1px solid #d7e4df;
    border-radius: 12px;
    background: #ffffff;
  }

  .mobile-menu-section-toggle {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 26px;
    width: 100%;
    min-height: 54px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 0;
    background: #ffffff;
    color: #234c3f;
    text-align: left;
    cursor: pointer;
  }

  .mobile-menu-section-toggle[aria-expanded="true"] {
    background: #edf7f2;
  }

  .mobile-menu-section-toggle[aria-expanded="true"] .mobile-menu-section-icon {
    background: #157557;
    color: #ffffff;
  }

  .mobile-menu-section-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .mobile-menu-section-copy strong {
    color: inherit;
    font-size: 0.78rem;
    font-weight: 900;
  }

  .mobile-menu-section-copy small {
    overflow: hidden;
    color: #758980;
    font-size: 0.59rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-menu-chevron {
    color: #668078;
    font-size: 1rem;
    font-weight: 900;
    text-align: center;
    transition: transform 150ms ease;
  }

  .mobile-menu-section-toggle[aria-expanded="true"] .mobile-menu-chevron {
    transform: rotate(180deg);
  }

  .mobile-submenu {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    padding: 5px 7px 8px;
    border-top: 1px solid #dce8e3;
    background: #f8fbf9;
  }

  .mobile-submenu[hidden] {
    display: none !important;
  }

  .mobile-submenu .mobile-drawer-item {
    position: relative;
    min-height: 42px !important;
    padding: 8px 10px 8px 34px !important;
    border-color: #e0ebe6 !important;
    border-radius: 9px !important;
    background: #ffffff !important;
  }

  .mobile-submenu .mobile-drawer-item::before {
    position: absolute;
    left: 14px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #9db8ad;
    content: "";
  }

  .mobile-submenu .mobile-drawer-item.active {
    border-color: #67a990 !important;
    background: #e6f5ed !important;
    color: #0b664c !important;
  }

  .mobile-submenu .mobile-drawer-item.active::before {
    background: #147759;
    box-shadow: 0 0 0 3px rgba(20, 119, 89, 0.13);
  }

  .mobile-menu-section.is-current {
    border-color: #9ac8b6;
    box-shadow: 0 0 0 1px rgba(21, 117, 87, 0.08);
  }

  .mobile-search-hidden {
    display: none !important;
  }

  .mobile-menu-toggle.is-context-active {
    background: #e8f4ee !important;
    color: #0e6c51 !important;
  }

  .mobile-menu-toggle.is-context-active .mobile-nav-icon {
    background: #157557;
    color: #ffffff;
  }

  /* Segunda pasada responsive: acceso y formularios complejos */
  .auth-gate {
    place-items: start center;
    overflow-y: auto;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
  }

  .auth-card {
    width: min(100%, 520px);
    max-height: none;
    gap: 12px;
    margin: auto 0;
    padding: 14px !important;
    border-radius: 14px;
  }

  .auth-tabs {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 3px;
    border-radius: 10px;
    background: #ffffff;
  }

  .auth-pane .form-grid,
  .modal-body .form-grid,
  .fertilizer-application-form .form-grid {
    grid-template-columns: 1fr !important;
  }

  .auth-pane .form-grid .full,
  .modal-body .form-grid .full {
    grid-column: auto !important;
  }

  .auth-pane :is(input, select, button) {
    min-height: 44px;
  }

  dialog.modal .modal-head {
    position: sticky;
    top: 0;
    z-index: 8;
    margin: -1px -1px 4px;
    padding: 8px 2px 7px;
    background: inherit;
  }

  dialog.modal .modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 7;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
    padding: 8px 0 max(3px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255,255,255,0), #ffffff 22%);
  }

  dialog.modal .modal-actions > button:only-child,
  dialog.modal .modal-actions > .primary-button:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .fertilizer-application-form .calc-preview,
  .fertilizer-operation-form .calc-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .fertilizer-block-table-head {
    display: none !important;
  }

  .fertilizer-block-check {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 5px 8px !important;
    min-height: 0 !important;
    padding: 8px !important;
  }

  .fertilizer-block-check > :not(.fertilizer-block-select):not(strong) {
    grid-column: 2;
  }

  .fertilizer-block-check .fertilizer-block-liters {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    min-height: 40px;
  }

  .fertilizer-block-check :is(strong, em, small) {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
  }

  .harvest-sync-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .harvest-sync-change {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .harvest-sync-diffs {
    grid-column: 2;
  }

  .harvest-sync-change-main :is(strong, small),
  .harvest-sync-diffs em {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
  }

  .harvest-report-range {
    grid-template-columns: 1fr !important;
  }

  .harvest-report-fields {
    max-height: 30dvh;
    overflow-y: auto;
  }

  .user-menu-panel button {
    min-height: 42px;
  }
}

@media (max-width: 430px) {
  .mobile-menu-shortcuts {
    grid-template-columns: 1fr;
  }

  .mobile-menu-section-copy small {
    white-space: normal;
  }

  dialog.modal .modal-actions {
    grid-template-columns: 1fr !important;
  }

  dialog.modal .modal-actions > * {
    grid-column: auto !important;
  }

  .fertilizer-application-form .calc-preview,
  .fertilizer-operation-form .calc-preview,
  .harvest-sync-summary {
    grid-template-columns: 1fr !important;
  }
}


/* Mobile sidebar real v550: reutiliza exactamente el menu de escritorio */
@media (max-width: 760px) {
  .app-shell {
    display: block !important;
  }

  .app-shell > .sidebar {
    position: fixed !important;
    z-index: 9600 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: flex !important;
    width: min(88vw, 340px) !important;
    height: 100dvh !important;
    max-height: none !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: max(10px, env(safe-area-inset-top)) 10px max(14px, env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-right: 1px solid rgba(110, 218, 178, 0.2) !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    background: var(--shell-navy, #0b1a21) !important;
    box-shadow: 18px 0 44px rgba(0, 0, 0, 0.34) !important;
    transform: translateX(-105%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 190ms ease, visibility 190ms ease;
    scrollbar-width: thin;
    scrollbar-color: #3a8b70 rgba(255,255,255,0.06);
  }

  body.mobile-menu-open .app-shell > .sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  .app-shell > .sidebar::-webkit-scrollbar {
    width: 8px;
  }

  .app-shell > .sidebar::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
  }

  .app-shell > .sidebar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #367e68;
  }

  .app-shell > .sidebar::after {
    position: fixed !important;
  }

  .sidebar .sidebar-brand {
    position: sticky !important;
    top: calc(-1 * max(10px, env(safe-area-inset-top))) !important;
    z-index: 15 !important;
    min-height: 78px !important;
    justify-content: center !important;
    margin: 0 -10px 4px !important;
    padding: max(9px, env(safe-area-inset-top)) 48px 8px 10px !important;
    border-bottom: 1px solid rgba(103, 220, 177, 0.17) !important;
    background: var(--shell-navy, #0b1a21) !important;
  }

  .sidebar-brand-logo {
    width: min(150px, 68%) !important;
    height: 62px !important;
    object-fit: contain !important;
  }

  .mobile-sidebar-close {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    right: 10px;
    display: grid !important;
    width: 38px;
    height: 38px;
    min-height: 38px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 10px;
    background: rgba(255,255,255,0.07);
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
  }

  .sidebar .nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    width: 100%;
    overflow: visible !important;
    padding: 0 0 4px !important;
  }

  .sidebar .nav > .nav-item,
  .sidebar .nav-group-toggle,
  .sidebar .nav-group .nav-item {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    flex: none !important;
    justify-content: flex-start !important;
    padding: 0 12px !important;
    border-radius: 9px !important;
    text-align: left !important;
    scroll-snap-align: none !important;
    white-space: normal !important;
  }

  .sidebar .nav-group-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-color: rgba(255,255,255,0.10) !important;
    background: rgba(255,255,255,0.045) !important;
    color: #f0f8f5 !important;
    font-size: 0.82rem !important;
  }

  .sidebar .nav-group-toggle::after {
    float: none !important;
    margin-left: auto;
  }

  .sidebar .nav > .nav-item {
    color: #e1ede8 !important;
    font-size: 0.82rem !important;
  }

  .sidebar .nav-group {
    display: none !important;
    width: 100% !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 5px 0 5px 10px !important;
    overflow: visible !important;
    border-left: 2px solid rgba(83, 215, 166, 0.30) !important;
    opacity: 1 !important;
    transform: none !important;
    max-height: none !important;
  }

  .sidebar .nav-group.open {
    display: grid !important;
  }

  .sidebar .nav-group .nav-item {
    min-height: 42px !important;
    background: rgba(1, 12, 18, 0.34) !important;
    color: #cfe1db !important;
    font-size: 0.77rem !important;
  }

  .sidebar .nav-item.active {
    border-color: rgba(95, 229, 178, 0.34) !important;
    background: #126a55 !important;
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 #57ddb0 !important;
  }

  .sidebar .nav-label {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .sidebar .sync-box {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin-top: auto !important;
    padding: 10px !important;
  }

  .sidebar .sync-box span {
    display: block !important;
    grid-column: auto !important;
    color: #a9c0b7 !important;
  }

  .sidebar .sidebar-privacy-link {
    display: inline-block !important;
    color: rgba(255,255,255,0.82) !important;
  }

  .app-shell:not(.locked) .mobile-menu-backdrop {
    position: fixed;
    z-index: 9550;
    inset: 0;
    display: block !important;
    visibility: hidden;
    background: rgba(2, 10, 8, 0.58);
    opacity: 0;
    pointer-events: none;
    transition: opacity 170ms ease, visibility 170ms ease;
  }

  body.mobile-menu-open .mobile-menu-backdrop {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-app-menu {
    display: none !important;
  }

  .mobile-menu-toggle[aria-expanded="true"] {
    background: #e1f2ea !important;
    color: #0b664c !important;
  }
}

@media (min-width: 761px) {
  .mobile-sidebar-close {
    display: none !important;
  }
}


/* Single mobile menu v551 */
.mobile-topbar-menu,
.mobile-sidebar-close {
  display: none;
}

@media (max-width: 760px) {
  :root {
    --mobile-shell-bar-height: 0px;
    --mobile-shell-top-height: 54px;
  }

  body {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  .main {
    padding: 0 7px calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-bottom-nav,
  .mobile-app-menu {
    display: none !important;
  }

  .topbar {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    min-height: var(--mobile-shell-top-height) !important;
    gap: 7px !important;
    padding: max(6px, env(safe-area-inset-top)) 8px 6px !important;
  }

  .mobile-topbar-menu {
    display: grid !important;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px !important;
    place-items: center;
    padding: 0 !important;
    border: 1px solid #bed6cc;
    border-radius: 11px;
    background: #e9f4ef;
    color: #115f49;
    box-shadow: 0 2px 8px rgba(18, 74, 57, 0.08);
    font-size: 1.18rem;
    font-weight: 950;
    line-height: 1;
  }

  .mobile-topbar-menu[aria-expanded="true"] {
    border-color: #178064;
    background: #157557;
    color: #ffffff;
  }

  .topbar-title {
    min-width: 0;
  }

  .topbar-title h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar .user-chip {
    max-width: 132px !important;
  }

  .app-shell > .sidebar {
    width: min(87vw, 330px) !important;
    gap: 8px !important;
    padding: max(8px, env(safe-area-inset-top)) 9px max(12px, env(safe-area-inset-bottom)) !important;
  }

  .sidebar .sidebar-brand {
    min-height: 72px !important;
    margin: 0 -9px 4px !important;
    padding: max(8px, env(safe-area-inset-top)) 48px 7px 9px !important;
  }

  .sidebar-brand-logo {
    width: min(142px, 70%) !important;
    height: 56px !important;
  }

  .mobile-sidebar-close {
    position: absolute;
    top: max(9px, env(safe-area-inset-top));
    right: 9px;
    display: grid !important;
    width: 38px;
    height: 38px;
    min-height: 38px !important;
    place-items: center;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 10px;
    background: rgba(255,255,255,0.07);
    color: #ffffff;
    font-size: 1.28rem;
    line-height: 1;
  }

  .sidebar .nav {
    gap: 6px !important;
  }

  .sidebar .nav > .nav-item,
  .sidebar .nav-group-toggle {
    min-height: 46px !important;
    border-radius: 10px !important;
    padding-inline: 13px !important;
  }

  .sidebar .nav-group-toggle {
    border-color: rgba(255,255,255,0.11) !important;
    background: rgba(255,255,255,0.05) !important;
    color: #f3faf7 !important;
    font-size: 0.83rem !important;
    letter-spacing: 0.01em;
  }

  .sidebar .nav-group-toggle.is-active-group {
    border-color: rgba(92, 224, 176, 0.28) !important;
    background: rgba(27, 137, 103, 0.24) !important;
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 #57ddb0;
  }

  .sidebar .nav-group {
    gap: 5px !important;
    padding: 5px 0 6px 10px !important;
  }

  .sidebar .nav-group .nav-item {
    min-height: 42px !important;
    padding: 7px 10px 7px 13px !important;
    border: 1px solid rgba(255,255,255,0.055) !important;
    border-radius: 8px !important;
    background: rgba(1, 11, 17, 0.30) !important;
    color: #ccddd7 !important;
    font-size: 0.76rem !important;
    line-height: 1.2;
  }

  .sidebar .nav-group .nav-item.active {
    border-color: rgba(95, 229, 178, 0.26) !important;
    background: #126a55 !important;
    color: #ffffff !important;
  }

  .sidebar .nav-group-toggle[hidden],
  .sidebar .nav-item[hidden] {
    display: none !important;
  }

  .sidebar .sync-box {
    margin-top: 10px !important;
    border-radius: 10px !important;
    padding: 9px !important;
  }

  body.mobile-menu-open .main {
    pointer-events: none;
  }

  body.mobile-menu-open .topbar {
    pointer-events: none;
  }

  body.mobile-menu-open .mobile-menu-backdrop,
  body.mobile-menu-open .app-shell > .sidebar {
    pointer-events: auto;
  }
}

@media (max-width: 390px) {
  .topbar .user-chip {
    width: 40px !important;
    max-width: 40px !important;
    padding: 4px !important;
  }

  .topbar .user-chip-copy,
  .topbar .user-chevron {
    display: none !important;
  }

  .app-shell > .sidebar {
    width: min(91vw, 326px) !important;
  }
}


/* Full-height mobile menu v552 */
@media (max-width: 760px) {
  .app-shell > .sidebar {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    align-content: stretch !important;
    width: min(94vw, 360px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .sidebar .sidebar-brand {
    position: relative !important;
    top: auto !important;
    z-index: 4 !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: max(9px, env(safe-area-inset-top)) 50px 8px 12px !important;
    border-bottom: 1px solid rgba(105, 221, 178, 0.18) !important;
    background:
      linear-gradient(180deg, rgba(16, 42, 47, 0.98), rgba(8, 27, 34, 0.98)) !important;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.16);
  }

  .sidebar-brand-logo {
    width: min(154px, 72%) !important;
    height: 58px !important;
  }

  .mobile-sidebar-close {
    top: max(11px, env(safe-area-inset-top)) !important;
    right: 11px !important;
    z-index: 6;
  }

  .sidebar .nav {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: 7px !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 10px 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .sidebar .nav::after {
    content: "";
    display: block;
    height: 2px;
  }

  .sidebar .nav::-webkit-scrollbar {
    width: 7px;
  }

  .sidebar .nav::-webkit-scrollbar-track {
    background: transparent;
  }

  .sidebar .nav::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #4a9b80;
    background-clip: padding-box;
  }

  .sidebar .nav > .nav-item,
  .sidebar .nav-group-toggle {
    min-height: 48px !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 11px !important;
    font-size: 0.84rem !important;
    line-height: 1.2 !important;
  }

  .sidebar .nav-group-toggle {
    position: relative;
    isolation: isolate;
  }

  .sidebar .nav-group-toggle::before {
    content: "";
    position: absolute;
    inset: 7px auto 7px 0;
    width: 3px;
    border-radius: 99px;
    background: transparent;
  }

  .sidebar .nav-group-toggle.is-active-group::before,
  .sidebar .nav-group-toggle[aria-expanded="true"]::before {
    background: #57ddb0;
  }

  .sidebar .nav-group-toggle::after {
    flex: 0 0 auto;
    margin-left: 10px !important;
  }

  .sidebar .nav-group {
    display: none !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    width: calc(100% - 8px) !important;
    margin: -1px 0 2px 8px !important;
    padding: 4px 0 6px 9px !important;
    overflow: visible !important;
    border-left: 2px solid rgba(87, 221, 176, 0.30) !important;
  }

  .sidebar .nav-group.open {
    display: grid !important;
  }

  .sidebar .nav-group .nav-item {
    min-height: 44px !important;
    width: 100% !important;
    padding: 8px 12px !important;
    border-radius: 9px !important;
    font-size: 0.79rem !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }

  .sidebar .nav-label {
    display: block !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .sidebar .sync-box {
    position: relative !important;
    z-index: 4 !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 6px 10px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 9px 12px max(10px, env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-top: 1px solid rgba(105, 221, 178, 0.16) !important;
    border-radius: 0 !important;
    background: rgba(3, 17, 23, 0.96) !important;
    box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.15);
  }

  .sidebar .sync-box span {
    min-width: 0;
    overflow: hidden;
    color: #a9c0b7 !important;
    font-size: 0.64rem !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar .sidebar-privacy-link {
    color: #cfe6dd !important;
    font-size: 0.62rem !important;
    white-space: nowrap;
  }

  body.mobile-menu-open .mobile-menu-backdrop {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
}

@media (max-width: 430px) {
  .app-shell > .sidebar {
    width: 100vw !important;
    max-width: none !important;
  }

  .sidebar .nav {
    padding-inline: 12px !important;
  }

  .sidebar .sidebar-brand {
    padding-left: 14px !important;
  }
}

@media (max-height: 650px) and (max-width: 760px) {
  .sidebar .sidebar-brand {
    min-height: 60px !important;
    padding-top: max(6px, env(safe-area-inset-top)) !important;
    padding-bottom: 5px !important;
  }

  .sidebar-brand-logo {
    height: 45px !important;
  }

  .mobile-sidebar-close {
    top: max(7px, env(safe-area-inset-top)) !important;
  }

  .sidebar .nav {
    gap: 5px !important;
    padding-top: 7px !important;
    padding-bottom: 10px !important;
  }

  .sidebar .nav > .nav-item,
  .sidebar .nav-group-toggle {
    min-height: 43px !important;
  }

  .sidebar .nav-group .nav-item {
    min-height: 40px !important;
  }
}


/* Wider mobile menu content v553 */
@media (max-width: 760px) {
  .sidebar .nav {
    width: 100% !important;
    max-width: none !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
    box-sizing: border-box !important;
  }

  .sidebar .nav > .nav-item,
  .sidebar .nav-group-toggle {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .sidebar .nav-group {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 8px !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .sidebar .nav-group .nav-item {
    width: calc(100% - 1px) !important;
    max-width: none !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .sidebar .nav-label {
    width: 100% !important;
  }
}

@media (max-width: 430px) {
  .sidebar .nav {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .sidebar .nav-group {
    padding-left: 6px !important;
  }
}


/* Warehouse mobile alignment v554 */
@media (max-width: 760px) {
  #warehouse.active-view {
    padding-top: 0 !important;
  }

  #warehouse.active-view > .panel {
    margin-top: 0 !important;
    padding-top: 7px !important;
    overflow: visible !important;
  }

  #warehouse .panel-header.warehouse-panel-header {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-height: none !important;
    gap: 6px !important;
    margin: 0 0 8px !important;
    padding: 7px !important;
    overflow: visible !important;
    border: 1px solid #c9ddd5 !important;
    border-radius: 10px !important;
    background: #f7fbf9 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #warehouse .panel-header.warehouse-panel-header::before {
    content: none !important;
    display: none !important;
  }

  #warehouse .warehouse-panel-header > div:first-child {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  #warehouse .warehouse-panel-header h2 {
    margin: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.1;
  }

  #warehouse .warehouse-filters {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    align-items: end !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 2px 0 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  #warehouse .warehouse-filters > label {
    flex: 0 0 clamp(122px, 39vw, 154px) !important;
    width: auto !important;
    min-width: 0 !important;
  }

  #warehouse .warehouse-filters .warehouse-order-search {
    flex-basis: clamp(148px, 46vw, 180px) !important;
    width: auto !important;
    min-width: 0 !important;
  }

  #warehouse .warehouse-filters > button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 38px !important;
    align-self: end;
  }

  #warehouse .warehouse-filters :is(input, select) {
    min-height: 38px !important;
    height: 38px !important;
  }

  #warehouse .warehouse-order-list {
    position: relative;
    z-index: 1;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #warehouse .warehouse-order-card:first-child {
    margin-top: 0 !important;
  }

  body[data-mobile-view="warehouse"] .topbar {
    z-index: 9100 !important;
  }

  body[data-mobile-view="warehouse"] .mobile-topbar-menu {
    justify-self: start !important;
  }
}

@media (max-width: 430px) {
  #warehouse.active-view > .panel {
    padding: 6px !important;
  }

  #warehouse .panel-header.warehouse-panel-header {
    padding: 6px !important;
  }

  #warehouse .warehouse-filters > label {
    flex-basis: 132px !important;
  }

  #warehouse .warehouse-filters .warehouse-order-search {
    flex-basis: 160px !important;
  }
}


/* Stable dark mobile topbar + warehouse overflow fix v555 */
@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .app-shell,
  .main,
  .topbar,
  .view,
  .view.active-view,
  #warehouse,
  #warehouse.active-view,
  #warehouse.active-view > .panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .topbar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9300 !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    grid-template-areas: "menu title account" !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 54px !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 -7px 8px !important;
    padding: max(7px, env(safe-area-inset-top)) 8px 7px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(109, 223, 181, 0.18) !important;
    border-radius: 0 !important;
    background: #0b1a21 !important;
    color: #f4fbf8 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .mobile-topbar-menu {
    grid-area: menu !important;
    justify-self: start !important;
    align-self: center !important;
    display: grid !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center;
    border: 1px solid rgba(112, 225, 184, 0.28) !important;
    border-radius: 10px !important;
    background: #12352f !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .mobile-topbar-menu[aria-expanded="true"] {
    border-color: #70dfb8 !important;
    background: #17785d !important;
    color: #ffffff !important;
  }

  .topbar-title {
    grid-area: title !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .topbar-title h1,
  .topbar h1 {
    max-width: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 0.92rem !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .topbar .top-actions {
    grid-area: account !important;
    justify-self: end !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 138px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    gap: 4px !important;
  }

  .topbar .user-menu {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .topbar .user-chip {
    min-width: 0 !important;
    max-width: 132px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: #132a31 !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  .topbar .user-chip-copy strong {
    color: #ffffff !important;
  }

  .topbar .user-chip-copy small,
  .topbar .user-chevron {
    color: #a9c4ba !important;
  }

  .topbar .user-avatar {
    background: #1d765e !important;
    color: #ffffff !important;
  }

  /* Bodega no puede ensanchar ni desplazar la barra superior. */
  #warehouse,
  #warehouse > *,
  #warehouse .panel,
  #warehouse .warehouse-panel-header,
  #warehouse .warehouse-order-list,
  #warehouse .warehouse-order-card,
  #warehouse .warehouse-order-card > *,
  #warehouse .warehouse-visible-section,
  #warehouse .warehouse-detail-grid {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #warehouse.active-view > .panel {
    overflow-x: hidden !important;
  }

  #warehouse .warehouse-panel-header {
    overflow: hidden !important;
  }

  #warehouse .warehouse-filters {
    max-width: 100% !important;
    min-width: 0 !important;
    contain: inline-size;
  }

  #warehouse .warehouse-order-list {
    overflow-x: hidden !important;
  }

  #warehouse .warehouse-order-card {
    overflow-x: hidden !important;
  }

  #warehouse .warehouse-order-card .order-card-head {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #warehouse .warehouse-order-identity {
    display: flex !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #warehouse .warehouse-order-heading {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #warehouse .warehouse-order-heading h3,
  #warehouse .warehouse-order-subline {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  body[data-mobile-view="warehouse"] .topbar {
    position: sticky !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 430px) {
  .topbar {
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  }

  .topbar .top-actions {
    width: 42px !important;
    max-width: 42px !important;
  }

  .topbar .user-menu,
  .topbar .user-chip {
    width: 40px !important;
    max-width: 40px !important;
  }
}


/* Definitive warehouse mobile header/sidebar reset v556
   Neutraliza reglas antiguas "Bodega móvil v3" sin perder el tema oscuro. */
@media (max-width: 760px) {
  body:has(#warehouse.active-view) .app-shell > .sidebar,
  body:has(#warehouse.active-view) .sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: min(94vw, 360px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: translateX(-105%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body:has(#warehouse.active-view).mobile-menu-open .app-shell > .sidebar,
  body:has(#warehouse.active-view).mobile-menu-open .sidebar {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body:has(#warehouse.active-view) .sidebar .sidebar-brand {
    min-height: 74px !important;
    margin: 0 !important;
    padding: max(9px, env(safe-area-inset-top)) 50px 8px 12px !important;
  }

  body:has(#warehouse.active-view) .topbar {
    position: sticky !important;
    top: 0 !important;
    right: auto !important;
    left: auto !important;
    z-index: 9300 !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    grid-template-areas: "menu title account" !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 54px !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 -7px 8px !important;
    padding: max(7px, env(safe-area-inset-top)) 8px 7px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(109, 223, 181, 0.18) !important;
    border-radius: 0 !important;
    background: #0b1a21 !important;
    color: #f4fbf8 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.24) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
  }

  body:has(#warehouse.active-view) .topbar-title {
    display: block !important;
    grid-area: title !important;
    min-width: 0 !important;
  }

  body:has(#warehouse.active-view) .mobile-topbar-menu {
    display: grid !important;
    grid-area: menu !important;
    justify-self: start !important;
  }

  body:has(#warehouse.active-view) .top-actions {
    display: flex !important;
    grid-area: account !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 138px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    overflow: visible !important;
  }

  body:has(#warehouse.active-view) .user-menu {
    display: block !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:has(#warehouse.active-view) .user-chip {
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    max-width: 132px !important;
    margin: 0 !important;
  }

  body:has(#warehouse.active-view) .main {
    min-height: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }

  body:has(#warehouse.active-view) #warehouse.active-view {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 430px) {
  body:has(#warehouse.active-view) .app-shell > .sidebar,
  body:has(#warehouse.active-view) .sidebar {
    width: 100vw !important;
    max-width: none !important;
  }

  body:has(#warehouse.active-view) .sidebar .sidebar-brand {
    padding-right: 50px !important;
  }

  body:has(#warehouse.active-view) .topbar {
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  }

  body:has(#warehouse.active-view) .top-actions,
  body:has(#warehouse.active-view) .user-menu,
  body:has(#warehouse.active-view) .user-chip {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  body:has(#warehouse.active-view) .user-chip-copy,
  body:has(#warehouse.active-view) .user-chevron {
    display: none !important;
  }
}


/* Warehouse mobile v556: elimina espacio fantasma y consolida cabecera/contraste */
@media (max-width: 760px) {
  /*
   * Bodega heredaba una regla de styles.css que convertía el sidebar off-canvas
   * en position:relative. Aunque estuviera oculto, reservaba casi 100dvh y
   * desplazaba las órdenes hacia abajo.
   */
  body:has(#warehouse.active-view) .app-shell > .sidebar {
    position: fixed !important;
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(87vw, 330px) !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
  }

  body:has(#warehouse.active-view) .app-shell > .sidebar .sidebar-brand {
    min-height: 72px !important;
    margin: 0 -9px 4px !important;
    padding: max(8px, env(safe-area-inset-top)) 48px 7px 9px !important;
  }

  body:has(#warehouse.active-view) .app-shell > .sidebar .sidebar-brand-logo {
    width: min(142px, 70%) !important;
    height: 56px !important;
  }

  body:has(#warehouse.active-view) .main {
    min-height: 100svh !important;
    padding: 0 7px calc(12px + env(safe-area-inset-bottom)) !important;
  }

  /*
   * Una sola fila real: menú a la izquierda, título al centro y cuenta a la
   * derecha. Anula las versiones antiguas que fijaban la cuenta por separado.
   */
  body:has(#warehouse.active-view) .topbar {
    position: sticky !important;
    top: 0 !important;
    right: auto !important;
    left: auto !important;
    z-index: 9300 !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    grid-template-areas: "menu title account" !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 54px !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 -7px 8px !important;
    padding: max(7px, env(safe-area-inset-top)) 8px 7px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(109, 223, 181, 0.18) !important;
    border-radius: 0 !important;
    background: #0b1a21 !important;
    color: #f4fbf8 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.24) !important;
    transform: none !important;
  }

  body:has(#warehouse.active-view) .topbar-title {
    display: block !important;
    grid-area: title !important;
    min-width: 0 !important;
  }

  body:has(#warehouse.active-view) .mobile-topbar-menu {
    grid-area: menu !important;
    justify-self: start !important;
    align-self: center !important;
  }

  body:has(#warehouse.active-view) .topbar .top-actions {
    grid-area: account !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 138px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  body:has(#warehouse.active-view) .topbar .user-menu {
    position: relative !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body:has(#warehouse.active-view) .topbar .user-chip {
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    background: #132a31 !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  body:has(#warehouse.active-view) .topbar .user-avatar {
    background: #1d765e !important;
    color: #ffffff !important;
  }

  /* El panel de cuenta se dibuja sobre el contenido y no crea una fila nueva. */
  body:has(#warehouse.active-view) #userMenuPanel[data-mobile-floating="true"] {
    z-index: 9800 !important;
    margin: 0 !important;
    padding: 6px !important;
    border: 1px solid #354c5e !important;
    border-radius: 9px !important;
    background: #0f1821 !important;
    color: #f5f8fa !important;
    box-shadow: 0 18px 38px rgba(0,0,0,.52) !important;
    overflow-y: auto !important;
  }

  body:has(#warehouse.active-view) #userMenuPanel[data-mobile-floating="true"] button {
    width: 100% !important;
    min-height: 40px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #f5f8fa !important;
    text-align: left !important;
  }

  body:has(#warehouse.active-view) #userMenuPanel[data-mobile-floating="true"] button + button {
    border-top: 1px solid #293b49 !important;
  }

  /*
   * Encabezado/filtros oscuros. Esta regla es deliberadamente más específica
   * que la antigua v554 que usaba fondo blanco.
   */
  #warehouse .panel-header.warehouse-panel-header {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin: 0 0 8px !important;
    padding: 7px !important;
    overflow: visible !important;
    border: 1px solid #283b49 !important;
    border-radius: 9px !important;
    outline: 0 !important;
    background: #0e161e !important;
    color: #f4f8fb !important;
    box-shadow: none !important;
  }

  #warehouse .panel-header.warehouse-panel-header :is(h2, h3) {
    color: #ffffff !important;
  }

  #warehouse .warehouse-filters {
    margin: 0 !important;
    padding: 3px 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #warehouse .warehouse-filters label {
    color: #a9bac6 !important;
  }

  #warehouse .warehouse-filters :is(input, select) {
    border: 1px solid #344b5c !important;
    outline: 0 !important;
    background: #101b24 !important;
    color: #f5f8fa !important;
    box-shadow: none !important;
  }

  #warehouse .warehouse-filters input::placeholder {
    color: #8296a5 !important;
  }

  #warehouse.active-view,
  #warehouse.active-view > .panel,
  #warehouse .warehouse-order-list {
    background: #080d12 !important;
  }

  #warehouse.active-view > .panel {
    margin-top: 0 !important;
    padding: 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  #warehouse .warehouse-order-card {
    border: 1px solid #2e4251 !important;
    border-left: 3px solid var(--order-status) !important;
    border-radius: 8px !important;
    outline: 0 !important;
    background: #101922 !important;
    color: #f5f8fa !important;
    box-shadow: none !important;
  }

  #warehouse .warehouse-order-card :is(
    .warehouse-order-heading h3,
    .warehouse-order-heading strong,
    .warehouse-order-number strong,
    .warehouse-order-context span,
    .warehouse-order-card .metrics dd
  ) {
    color: #f6f9fb !important;
  }

  #warehouse .warehouse-order-card :is(
    .warehouse-created-at,
    .warehouse-order-subline span,
    .warehouse-order-subline small,
    .warehouse-order-context strong,
    .warehouse-order-card .metrics dt
  ) {
    color: #9fb0bd !important;
  }

  #warehouse .warehouse-order-card .metrics > div,
  #warehouse .warehouse-order-context > div {
    border: 1px solid #293c4a !important;
    outline: 0 !important;
    background: #15212b !important;
    color: #f5f8fa !important;
    box-shadow: none !important;
  }

  #warehouse .warehouse-visible-section {
    border: 1px solid #2c404f !important;
    border-radius: 7px !important;
    outline: 0 !important;
    background: #0e171f !important;
    box-shadow: none !important;
  }

  #warehouse .warehouse-products-section {
    border-left: 2px solid #2c7be5 !important;
  }

  #warehouse .warehouse-history-section {
    border-left: 2px solid #23a574 !important;
  }

  #warehouse .warehouse-visible-section-head {
    border: 0 !important;
    border-bottom: 1px solid #293c49 !important;
    background: #14202a !important;
    color: #f5f8fa !important;
  }

  #warehouse .warehouse-visible-section-head > span {
    color: #f5f8fa !important;
  }

  #warehouse .warehouse-visible-section-head > strong {
    border: 1px solid #405567 !important;
    background: #1a2a36 !important;
    color: #f8fbfd !important;
  }

  /*
   * Anula definitivamente las tarjetas blancas de la adaptación antigua de
   * tablas: bordes finos y texto claro sobre superficie oscura.
   */
  #warehouse .warehouse-product-table tr,
  #warehouse .warehouse-history-table tr {
    border: 1px solid #273946 !important;
    border-radius: 6px !important;
    outline: 0 !important;
    background: #131f28 !important;
    color: #f4f8fb !important;
    box-shadow: none !important;
  }

  #warehouse .warehouse-product-table td,
  #warehouse .warehouse-history-table td {
    border: 0 !important;
    border-bottom: 1px solid #243541 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #f4f8fb !important;
  }

  #warehouse .warehouse-product-table td:last-child,
  #warehouse .warehouse-history-table td:last-child {
    border-bottom: 0 !important;
  }

  #warehouse .warehouse-product-table td[data-label]::before,
  #warehouse .warehouse-history-table td[data-label]::before,
  #warehouse .warehouse-product-table td::before,
  #warehouse .warehouse-history-table td::before {
    color: #8fa5b5 !important;
  }

  #warehouse .warehouse-product-table td :is(strong, b, span),
  #warehouse .warehouse-history-table td :is(strong, b) {
    color: #f6f9fb !important;
  }

  #warehouse .warehouse-product-table td :is(small, em),
  #warehouse .warehouse-history-table td :is(small, em, span) {
    color: #b1c0ca !important;
  }
}

@media (max-width: 430px) {
  body:has(#warehouse.active-view) .topbar {
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  }

  body:has(#warehouse.active-view) .topbar .top-actions,
  body:has(#warehouse.active-view) .topbar .user-menu,
  body:has(#warehouse.active-view) .topbar .user-chip {
    width: 40px !important;
    max-width: 40px !important;
  }

  body:has(#warehouse.active-view) .topbar .user-chip {
    grid-template-columns: 1fr !important;
    place-items: center !important;
    padding: 4px !important;
  }

  body:has(#warehouse.active-view) .topbar .user-chip-copy,
  body:has(#warehouse.active-view) .topbar .user-chevron {
    display: none !important;
  }
}


/* Warehouse mobile ordenado v563 */
@media (max-width: 760px) {
  #warehouse.active-view {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #warehouse.active-view > .panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 7px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  #warehouse .panel-header.warehouse-panel-header {
    width: 100% !important;
    min-width: 0 !important;
    gap: 9px !important;
    margin-bottom: 9px !important;
    padding: 10px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #warehouse .warehouse-panel-header > div:first-child {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #warehouse .warehouse-panel-header h2 {
    margin: 0 0 4px !important;
    font-size: 1rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  #warehouse .warehouse-panel-header p {
    margin: 0 !important;
    color: #9fb0bd !important;
    font-size: .68rem !important;
    line-height: 1.3 !important;
  }

  #warehouse .warehouse-filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 7px !important;
    padding: 0 !important;
    overflow: visible !important;
    contain: none !important;
    scroll-snap-type: none !important;
  }

  #warehouse .warehouse-filters > label,
  #warehouse .warehouse-filters .inline-filter,
  #warehouse .warehouse-filters .warehouse-order-search {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
    gap: 3px !important;
    margin: 0 !important;
    font-size: .62rem !important;
    box-sizing: border-box !important;
  }

  #warehouse .warehouse-filters .warehouse-order-search {
    grid-column: 1 / -1 !important;
  }

  #warehouse .warehouse-filters :is(input, select) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 6px 8px !important;
    font-size: .76rem !important;
    box-sizing: border-box !important;
  }

  #warehouse .warehouse-filters > button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    margin: 0 !important;
  }

  #warehouse .warehouse-order-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  #warehouse .warehouse-order-card {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #warehouse .warehouse-order-card .order-card-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    align-items: start !important;
  }

  #warehouse .warehouse-order-identity {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  #warehouse .warehouse-order-number {
    display: grid !important;
    width: 64px !important;
    min-width: 64px !important;
    min-height: 54px !important;
    place-content: center !important;
    padding: 5px !important;
    border: 1px solid #354a59 !important;
    border-radius: 7px !important;
    background: #16242e !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  #warehouse .warehouse-order-number small {
    color: #91a5b4 !important;
    font-size: .54rem !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
  }

  #warehouse .warehouse-order-number strong {
    color: #ffffff !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #warehouse .warehouse-order-heading {
    display: grid !important;
    min-width: 0 !important;
    align-content: center !important;
    gap: 4px !important;
  }

  #warehouse .warehouse-order-heading h3 {
    margin: 0 !important;
    font-size: .88rem !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  #warehouse .warehouse-order-subline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    gap: 2px !important;
    font-size: .64rem !important;
    line-height: 1.2 !important;
  }

  #warehouse .order-status-stack {
    display: flex !important;
    max-width: 104px !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 4px !important;
  }

  #warehouse .order-status-stack .badge {
    max-width: 100% !important;
    padding: 4px 7px !important;
    font-size: .6rem !important;
    white-space: normal !important;
    text-align: center !important;
  }

  #warehouse .warehouse-order-card .metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  #warehouse .warehouse-order-card .metrics > div {
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 7px !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
  }

  #warehouse .warehouse-order-card .metrics dt {
    font-size: .58rem !important;
    line-height: 1.15 !important;
  }

  #warehouse .warehouse-order-card .metrics dd {
    margin: 4px 0 0 !important;
    font-size: .82rem !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere !important;
  }

  #warehouse .warehouse-order-card .progress {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #warehouse .warehouse-order-context {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  #warehouse .warehouse-order-context > div {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    min-width: 0 !important;
    gap: 8px !important;
    align-items: start !important;
    padding: 7px 8px !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
  }

  #warehouse .warehouse-order-context strong {
    font-size: .6rem !important;
  }

  #warehouse .warehouse-order-context span {
    min-width: 0 !important;
    font-size: .7rem !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  #warehouse .warehouse-detail-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  #warehouse .warehouse-visible-section {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #warehouse .warehouse-visible-section-head {
    display: flex !important;
    min-height: 36px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 7px 9px !important;
  }

  #warehouse .warehouse-visible-section-head > span {
    font-size: .72rem !important;
    font-weight: 900 !important;
  }

  #warehouse .warehouse-product-table,
  #warehouse .warehouse-history-table,
  #warehouse .warehouse-product-table.table-wrap,
  #warehouse .warehouse-history-table.table-wrap {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 7px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #warehouse .warehouse-product-table::after,
  #warehouse .warehouse-history-table::after {
    display: none !important;
    content: none !important;
  }

  #warehouse .warehouse-product-table table,
  #warehouse .warehouse-history-table table,
  #warehouse .warehouse-product-table tbody,
  #warehouse .warehouse-history-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #warehouse .warehouse-product-table thead,
  #warehouse .warehouse-history-table thead {
    display: none !important;
  }

  #warehouse .warehouse-product-table tr,
  #warehouse .warehouse-history-table tr {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 7px !important;
    padding: 7px 8px !important;
    box-sizing: border-box !important;
  }

  #warehouse .warehouse-product-table tr:last-child,
  #warehouse .warehouse-history-table tr:last-child {
    margin-bottom: 0 !important;
  }

  #warehouse .warehouse-product-table td,
  #warehouse .warehouse-history-table td {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    align-items: start !important;
    padding: 6px 0 !important;
    font-size: .69rem !important;
    line-height: 1.25 !important;
    text-align: right !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
  }

  #warehouse .warehouse-product-table td::before,
  #warehouse .warehouse-history-table td::before {
    content: attr(data-label) !important;
    display: block !important;
    min-width: 0 !important;
    font-size: .58rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-transform: uppercase !important;
  }

  #warehouse .warehouse-product-table td[colspan],
  #warehouse .warehouse-history-table td[colspan] {
    display: block !important;
    text-align: center !important;
  }

  #warehouse .warehouse-product-table td[colspan]::before,
  #warehouse .warehouse-history-table td[colspan]::before {
    display: none !important;
  }

  #warehouse .dispatch-parameter-summary {
    display: grid !important;
    min-width: 0 !important;
    gap: 2px !important;
    text-align: right !important;
  }

  #warehouse .dispatch-parameter-summary :is(b, small) {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #warehouse .dispatch-row-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 5px !important;
  }

  #warehouse .dispatch-row-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 5px 6px !important;
    font-size: .63rem !important;
  }

  #warehouse .warehouse-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 7px !important;
  }

  #warehouse .warehouse-actions .warehouse-dispatch-button,
  #warehouse .warehouse-actions .warehouse-complete-button {
    grid-column: 1 / -1 !important;
  }

  #warehouse .warehouse-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 7px 8px !important;
    font-size: .72rem !important;
    white-space: normal !important;
  }
}

@media (max-width: 430px) {
  #warehouse .warehouse-order-card .order-card-head {
    grid-template-columns: 1fr !important;
  }

  #warehouse .order-status-stack {
    max-width: none !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  #warehouse .warehouse-order-context > div {
    grid-template-columns: 78px minmax(0, 1fr) !important;
  }

  #warehouse .warehouse-product-table td,
  #warehouse .warehouse-history-table td {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    gap: 6px !important;
  }
}

@media (max-width: 360px) {
  #warehouse .warehouse-filters,
  #warehouse .warehouse-order-card .metrics,
  #warehouse .warehouse-actions,
  #warehouse .dispatch-row-actions {
    grid-template-columns: 1fr !important;
  }

  #warehouse .warehouse-filters .warehouse-order-search,
  #warehouse .warehouse-filters > button,
  #warehouse .warehouse-actions .warehouse-dispatch-button,
  #warehouse .warehouse-actions .warehouse-complete-button {
    grid-column: auto !important;
  }
}


/* Bodega: formulario Nueva/Modificar salida movil v564 */
@media (max-width: 760px) {
  #dispatchDialog:has(.dispatch-entry-form),
  #returnDialog:has(.dispatch-entry-form) {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    height: calc(100dvh - 8px) !important;
    max-height: calc(100dvh - 8px) !important;
    margin: 4px auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #f4f8f6 !important;
    box-sizing: border-box !important;
  }

  #dispatchDialog:has(.dispatch-entry-form)::backdrop,
  #returnDialog:has(.dispatch-entry-form)::backdrop {
    background: rgba(3, 15, 20, .72) !important;
  }

  #dispatchDialog .dispatch-entry-form,
  #returnDialog .dispatch-entry-form {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 10px calc(12px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
  }

  #dispatchDialog .dispatch-entry-form > *,
  #returnDialog .dispatch-entry-form > *,
  #dispatchDialog .dispatch-form-workspace,
  #returnDialog .dispatch-form-workspace,
  #dispatchDialog .dispatch-form-main,
  #returnDialog .dispatch-form-main,
  #dispatchDialog .dispatch-form-side,
  #returnDialog .dispatch-form-side {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #dispatchDialog .dispatch-entry-form .modal-head,
  #returnDialog .dispatch-entry-form .modal-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 36px !important;
    gap: 8px !important;
    align-items: start !important;
    min-height: 0 !important;
    margin: 0 -10px 9px !important;
    padding: 11px 10px 10px 12px !important;
    border-bottom: 1px solid #cbded6 !important;
    background: #f4f8f6 !important;
    box-shadow: 0 4px 12px rgba(15, 49, 39, .08) !important;
  }

  #dispatchDialog .dispatch-entry-form .modal-head > div,
  #returnDialog .dispatch-entry-form .modal-head > div {
    min-width: 0 !important;
  }

  #dispatchDialog .dispatch-entry-form .modal-head h2,
  #returnDialog .dispatch-entry-form .modal-head h2 {
    margin: 0 !important;
    color: #143d32 !important;
    font-size: .92rem !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #dispatchDialog .dispatch-entry-form .modal-head p,
  #returnDialog .dispatch-entry-form .modal-head p {
    margin: 3px 0 0 !important;
    color: #657a72 !important;
    font-size: .63rem !important;
    line-height: 1.28 !important;
  }

  #dispatchDialog .dispatch-entry-form .modal-head .icon-button,
  #returnDialog .dispatch-entry-form .modal-head .icon-button {
    position: static !important;
    display: grid !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    place-items: center !important;
    justify-self: end !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #dispatchDialog .dispatch-order-summary,
  #returnDialog .dispatch-order-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 6px !important;
    margin: 0 0 9px !important;
  }

  #dispatchDialog .dispatch-order-summary > span,
  #returnDialog .dispatch-order-summary > span {
    min-width: 0 !important;
    min-height: 51px !important;
    padding: 7px 8px !important;
  }

  #dispatchDialog .dispatch-order-summary small,
  #returnDialog .dispatch-order-summary small {
    margin-bottom: 3px !important;
    font-size: .54rem !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }

  #dispatchDialog .dispatch-order-summary strong,
  #returnDialog .dispatch-order-summary strong {
    font-size: .7rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  #dispatchDialog .dispatch-order-blocks,
  #returnDialog .dispatch-order-blocks {
    grid-column: 1 / -1 !important;
  }

  #dispatchDialog .dispatch-form-workspace,
  #returnDialog .dispatch-form-workspace {
    display: block !important;
    overflow: visible !important;
  }

  #dispatchDialog .dispatch-form-main,
  #returnDialog .dispatch-form-main,
  #dispatchDialog .dispatch-form-side,
  #returnDialog .dispatch-form-side {
    display: block !important;
  }

  #dispatchDialog .dispatch-section,
  #returnDialog .dispatch-section,
  #dispatchDialog .dispatch-product-calculator,
  #returnDialog .dispatch-product-calculator,
  #dispatchDialog .calc-preview,
  #returnDialog .calc-preview,
  #dispatchDialog .dispatch-form-side > label,
  #returnDialog .dispatch-form-side > label {
    margin: 0 0 9px !important;
  }

  #dispatchDialog .dispatch-section,
  #returnDialog .dispatch-section {
    padding: 9px !important;
    border-radius: 8px !important;
  }

  #dispatchDialog .dispatch-section legend,
  #returnDialog .dispatch-section legend {
    padding: 0 5px !important;
    font-size: .68rem !important;
  }

  #dispatchDialog .dispatch-primary-grid,
  #returnDialog .dispatch-primary-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 8px !important;
  }

  #dispatchDialog .dispatch-primary-grid > *,
  #returnDialog .dispatch-primary-grid > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-column: auto !important;
    box-sizing: border-box !important;
  }

  #dispatchDialog .dispatch-entry-form label,
  #returnDialog .dispatch-entry-form label {
    display: grid !important;
    min-width: 0 !important;
    gap: 4px !important;
    color: #365b50 !important;
    font-size: .67rem !important;
    font-weight: 850 !important;
  }

  #dispatchDialog .dispatch-entry-form :is(input, select),
  #returnDialog .dispatch-entry-form :is(input, select) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 43px !important;
    padding: 8px 9px !important;
    font-size: .82rem !important;
    box-sizing: border-box !important;
  }

  #dispatchDialog .dispatch-time-control,
  #returnDialog .dispatch-time-control {
    grid-template-columns: minmax(0, 1fr) 43px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 43px !important;
    box-sizing: border-box !important;
  }

  #dispatchDialog .dispatch-time-control input[data-dispatch-time-text],
  #returnDialog .dispatch-time-control input[data-dispatch-time-text] {
    min-height: 41px !important;
    padding: 7px 8px !important;
    font-size: .95rem !important;
  }

  #dispatchDialog .dispatch-time-picker-button,
  #returnDialog .dispatch-time-picker-button {
    width: 43px !important;
    min-width: 43px !important;
    min-height: 41px !important;
  }

  #dispatchDialog .dispatch-overnight-hint,
  #returnDialog .dispatch-overnight-hint {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    min-height: 0 !important;
    padding: 7px 8px !important;
  }

  #dispatchDialog .dispatch-overnight-hint[hidden],
  #returnDialog .dispatch-overnight-hint[hidden] {
    display: none !important;
  }

  #dispatchDialog .dispatch-supervisor-parameter,
  #returnDialog .dispatch-supervisor-parameter {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px !important;
    border: 1px solid #b8d7ca !important;
    border-radius: 7px !important;
    background: #edf7f2 !important;
    box-sizing: border-box !important;
  }

  #dispatchDialog label.dispatch-supervisor-parameter,
  #returnDialog label.dispatch-supervisor-parameter {
    color: #174f3f !important;
  }

  #dispatchDialog .dispatch-supervisor-parameter select,
  #returnDialog .dispatch-supervisor-parameter select {
    background: #ffffff !important;
    color: #173e32 !important;
  }

  #dispatchDialog .dispatch-supervisor-parameter small,
  #returnDialog .dispatch-supervisor-parameter small {
    color: #61766e !important;
    font-size: .58rem !important;
    line-height: 1.25 !important;
  }

  #dispatchDialog .dispatch-product-calculator,
  #returnDialog .dispatch-product-calculator {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #dispatchDialog .dispatch-product-calculator-head,
  #returnDialog .dispatch-product-calculator-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 7px !important;
    margin: 0 0 8px !important;
  }

  #dispatchDialog .dispatch-product-calculator-head h3,
  #returnDialog .dispatch-product-calculator-head h3 {
    margin: 0 !important;
    color: #173e32 !important;
    font-size: .8rem !important;
  }

  #dispatchDialog .dispatch-product-calculator-head button,
  #returnDialog .dispatch-product-calculator-head button {
    width: 100% !important;
    min-height: 38px !important;
  }

  #dispatchDialog .dispatch-product-list,
  #returnDialog .dispatch-product-list {
    display: grid !important;
    grid-auto-rows: max-content !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: min(42dvh, 380px) !important;
    gap: 7px !important;
    padding: 0 3px calc(66px + env(safe-area-inset-bottom)) 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  #dispatchDialog .dispatch-product-calc-row,
  #returnDialog .dispatch-product-calc-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 7px !important;
    min-height: 0 !important;
    height: auto !important;
    align-self: start !important;
    padding: 9px !important;
    box-sizing: border-box !important;
  }

  #dispatchDialog .dispatch-product-calc-row > *,
  #returnDialog .dispatch-product-calc-row > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-column: auto !important;
    box-sizing: border-box !important;
  }

  #dispatchDialog .dispatch-product-identity strong,
  #returnDialog .dispatch-product-identity strong {
    font-size: .79rem !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  #dispatchDialog .dispatch-product-identity span,
  #returnDialog .dispatch-product-identity span,
  #dispatchDialog .dispatch-product-formula :is(small, strong),
  #returnDialog .dispatch-product-formula :is(small, strong) {
    font-size: .64rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #dispatchDialog .dispatch-product-total,
  #returnDialog .dispatch-product-total {
    display: grid !important;
    gap: 4px !important;
  }

  #dispatchDialog .dispatch-product-input-wrap,
  #returnDialog .dispatch-product-input-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 7px !important;
  }

  #dispatchDialog .dispatch-product-input-wrap input,
  #returnDialog .dispatch-product-input-wrap input {
    min-width: 0 !important;
  }

  #dispatchDialog .dispatch-product-input-wrap b,
  #returnDialog .dispatch-product-input-wrap b {
    min-width: 32px !important;
    color: #173e32 !important;
    font-size: .7rem !important;
    text-align: right !important;
  }

  #dispatchDialog .dispatch-use-calculation,
  #returnDialog .dispatch-use-calculation {
    width: 100% !important;
    min-height: 38px !important;
  }

  #dispatchDialog .calc-preview,
  #returnDialog .calc-preview {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }

  #dispatchDialog .calc-preview > *,
  #returnDialog .calc-preview > * {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  #dispatchDialog .dispatch-form-side > label:last-of-type,
  #returnDialog .dispatch-form-side > label:last-of-type {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 10px !important;
  }

  #dispatchDialog .dispatch-entry-form .modal-actions,
  #returnDialog .dispatch-entry-form .modal-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 18 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: calc(100% + 20px) !important;
    min-width: 0 !important;
    margin: 0 -10px !important;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #cbded6 !important;
    background: rgba(244, 248, 246, .98) !important;
    box-shadow: 0 -5px 14px rgba(15, 49, 39, .08) !important;
    box-sizing: border-box !important;
  }

  #dispatchDialog .dispatch-entry-form .modal-actions button,
  #returnDialog .dispatch-entry-form .modal-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 8px !important;
    font-size: .73rem !important;
  }

  #dispatchDialog .dispatch-save-overlay,
  #returnDialog .dispatch-save-overlay {
    position: fixed !important;
    inset: 4px !important;
    border-radius: 10px !important;
  }

  #dispatchDialog .dispatch-save-status,
  #returnDialog .dispatch-save-status {
    width: calc(100vw - 36px) !important;
    max-width: 420px !important;
    padding: 16px !important;
  }
}

@media (max-width: 430px) {
  #dispatchDialog .dispatch-product-list,
  #returnDialog .dispatch-product-list {
    max-height: min(38dvh, 340px) !important;
    padding-bottom: calc(116px + env(safe-area-inset-bottom)) !important;
  }

  #dispatchDialog .dispatch-order-summary,
  #returnDialog .dispatch-order-summary {
    grid-template-columns: 1fr !important;
  }

  #dispatchDialog .dispatch-order-blocks,
  #returnDialog .dispatch-order-blocks {
    grid-column: auto !important;
  }

  #dispatchDialog .dispatch-entry-form .modal-actions,
  #returnDialog .dispatch-entry-form .modal-actions {
    grid-template-columns: 1fr !important;
  }

  #dispatchDialog .dispatch-entry-form .modal-actions .primary-button,
  #returnDialog .dispatch-entry-form .modal-actions .primary-button {
    order: -1 !important;
  }
}


/* Bodega salida: tractorista y equipo correlacionado movil v565 */
@media (max-width: 760px) {
  #dispatchDialog .dispatch-supervisor-parameter,
  #returnDialog .dispatch-supervisor-parameter {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #dispatchDialog .dispatch-supervisor-parameter > label,
  #returnDialog .dispatch-supervisor-parameter > label {
    width: 100% !important;
    min-width: 0 !important;
  }

  #dispatchDialog .dispatch-supervisor-parameter-preview,
  #returnDialog .dispatch-supervisor-parameter-preview {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  #dispatchDialog .dispatch-supervisor-parameter-preview > span,
  #returnDialog .dispatch-supervisor-parameter-preview > span {
    display: grid !important;
    min-width: 0 !important;
    gap: 2px !important;
    padding: 7px !important;
    box-sizing: border-box !important;
  }

  #dispatchDialog .dispatch-supervisor-parameter-preview small,
  #returnDialog .dispatch-supervisor-parameter-preview small {
    font-size: .53rem !important;
    line-height: 1.15 !important;
  }

  #dispatchDialog .dispatch-supervisor-parameter-preview strong,
  #returnDialog .dispatch-supervisor-parameter-preview strong {
    font-size: .68rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 430px) {
  #dispatchDialog .dispatch-supervisor-parameter-preview,
  #returnDialog .dispatch-supervisor-parameter-preview {
    grid-template-columns: 1fr !important;
  }
}

/* Bodega salida movil v651: una sola zona de scroll y guardado a pantalla completa del modal. */
@media (max-width: 760px) {
  #dispatchDialog:has(.dispatch-entry-form),
  #returnDialog:has(.dispatch-entry-form) {
    position: relative !important;
    overflow: hidden !important;
  }

  #dispatchDialog .dispatch-entry-form,
  #returnDialog .dispatch-entry-form {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 10px calc(8px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  #dispatchDialog .dispatch-entry-form .modal-head,
  #returnDialog .dispatch-entry-form .modal-head {
    position: relative !important;
    top: auto !important;
    flex: none !important;
  }

  #dispatchDialog .dispatch-form-scroll,
  #returnDialog .dispatch-form-scroll {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    padding: 0 2px 10px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
  }

  #dispatchDialog .dispatch-form-scroll .dispatch-order-summary,
  #returnDialog .dispatch-form-scroll .dispatch-order-summary {
    margin-top: 0 !important;
  }

  #dispatchDialog .dispatch-entry-form .modal-actions,
  #returnDialog .dispatch-entry-form .modal-actions {
    position: relative !important;
    bottom: auto !important;
    z-index: 22 !important;
    flex: none !important;
  }

  #dispatchDialog > .dispatch-save-overlay,
  #returnDialog > .dispatch-save-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: inherit !important;
  }
}

/* Bodega movil v652: checklist de meses responsivo. */
@media (max-width: 760px) {
  #warehouse .warehouse-filters .warehouse-month-filter {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    contain: none !important;
  }

  #warehouse .warehouse-month-filter-head {
    width: 100% !important;
    min-width: 0 !important;
  }

  #warehouse .warehouse-month-checklist {
    width: 100% !important;
    min-width: 0 !important;
  }

  #warehouse .warehouse-month-check {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #warehouse .warehouse-filters .warehouse-month-check input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    max-width: 15px !important;
    padding: 0 !important;
  }
}

@media (max-width: 360px) {
  #warehouse .warehouse-month-filter {
    grid-column: auto / span 1 !important;
  }

  #warehouse .warehouse-month-checklist {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* Supervisor · Acceso rápido: exportar arriba; copiar y crear una orden en la misma fila. */
@media (max-width: 760px) {
  #manager.active-view > .panel > .panel-header .top-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    overflow: visible !important;
  }
  #manager.active-view > .panel > .panel-header .top-actions [data-action="export-excel"] {
    grid-column: 1 / -1;
  }
  #manager.active-view > .panel > .panel-header .top-actions [data-action="quick-copy-application-order"],
  #manager.active-view > .panel > .panel-header .top-actions [data-action="new-order"],
  #manager.active-view > .panel > .panel-header .top-actions [data-action="export-excel"] {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal;
  }
}

/* v579: los accesos a Mantenciones y Campo/Pozos son táctiles y visibles. */
@media(max-width:760px){
  .sidebar .nav [data-mobile-custom-view]:not([hidden]){min-height:48px!important;cursor:pointer;touch-action:manipulation}
  .sidebar .nav [data-mobile-custom-view].active{box-shadow:inset 3px 0 0 #57ddb0!important}
}