:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --card:#f8fafc;
  --border:#e2e8f0;
  --shadow: 0 10px 20px rgba(2,6,23,.06);

  --primary:#0f172a;
  --primaryText:#ffffff;

  --danger:#ef4444;
  --warn:#f59e0b;
  --ok:#22c55e;
  --info:#3b82f6;

  --radius:16px;
  --radius-sm:12px;
}

[data-theme="dark"]{
  --bg:#0b1220;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --card:#0f172a;
  --border:#1f2a3a;
  --shadow: 0 10px 20px rgba(0,0,0,.35);

  --primary:#e5e7eb;
  --primaryText:#0b1220;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.container{
  max-width: 1600px;   /* prueba 1500px o 1600px si antes era más ancho */
  margin: 0 auto;
  padding: 0 24px;
}

/* Top bar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom:1px solid var(--border);
  padding: 10px 14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.topbar-left{ display:flex; flex-direction:column; gap:6px; }
.brand{ font-weight:800; letter-spacing:.2px; }
.page-title{ font-size: 14px; color: var(--muted); }

.topnav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.topnav a{
  text-decoration:none;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid transparent;
}
.topnav a:hover{
  color: var(--text);
  background: color-mix(in srgb, var(--card) 70%, transparent);
  border-color: var(--border);
}

.topbar-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.userpill{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background: color-mix(in srgb, var(--card) 80%, transparent);
}
.dot{
  width:8px;height:8px;border-radius:999px;
  background: var(--ok);
}

.iconbtn{
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
}

.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}

.card + .card{ margin-top:14px; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  font-weight:600;
  line-height: 1;
}
.btn-primary{
  background: var(--primary);
  color: var(--primaryText);
}
.btn-ghost{
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn:hover{ filter: brightness(1.05); }

/* Forms */
input, select, textarea{
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border:1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  outline:none;
}
label{ font-size: 12px; color: var(--muted); }
.small-muted{ color: var(--muted); font-size: 13px; }

/* Tables */
.table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) 92%, transparent);
}
.table th, .table td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table th{
  text-align:left;
  font-size: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--card) 85%, transparent);
}
.table tr:last-child td{ border-bottom: none; }

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
  color: var(--muted);
}
.badge-red{ color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.badge-amber{ color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); }
.badge-green{ color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, var(--border)); }

/* Layout helpers */
.row{ display:flex; gap:12px; flex-wrap:wrap; }
.col{ flex:1; min-width: 220px; }

@media (max-width: 720px){
  .topbar{ align-items:stretch; }
  .topbar-right{ justify-content:flex-start; }
}


.toast-bubble{position:fixed;left:18px;bottom:18px;z-index:9999;max-width:420px;padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:color-mix(in srgb, var(--card) 92%, transparent);box-shadow:var(--shadow);color:var(--text);opacity:0;transform:translateY(6px);transition:opacity .18s ease, transform .18s ease;font-weight:600;}
.toast-bubble.toast-in{opacity:1;transform:translateY(0);}
.toast-bubble.toast-out{opacity:0;transform:translateY(6px);}
.badge-new{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;border:1px solid color-mix(in srgb, var(--info) 35%, var(--border));color:var(--info);font-size:12px;font-weight:700;}
.row-new{outline:1px solid color-mix(in srgb, var(--info) 25%, transparent);background:color-mix(in srgb, var(--card) 80%, transparent);}


/* Stronger badge colors for light/dark */
.badge{ border:1px solid var(--border); background: color-mix(in srgb, var(--card) 88%, transparent); }
.badge-green{ border-color: color-mix(in srgb, #22c55e 55%, var(--border)); color: #22c55e; background: color-mix(in srgb, #22c55e 14%, transparent); }
.badge-red{ border-color: color-mix(in srgb, #ef4444 55%, var(--border)); color: #ef4444; background: color-mix(in srgb, #ef4444 14%, transparent); }
.badge-amber{ border-color: color-mix(in srgb, #f59e0b 60%, var(--border)); color: #f59e0b; background: color-mix(in srgb, #f59e0b 14%, transparent); }

/* Icono de calendario blanco en modo oscuro (Chrome/Edge/Safari) */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity: 0.9;
}




/* Layout estándar (my_tasks) */
.page-gap{ margin-top:14px; }
.page-wide{
  width: 150%;
  margin-left: -25%;
}
@media (max-width: 1400px){
  .page-wide{ width:100%; margin-left:0; }
}

/* ====== FIX: layout igual al my_tasks antiguo ====== */

/* Container normal (NO enorme) */
.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Gap bajo topbar */
.page-gap{ margin-top:14px; }

/* Wide wrap tipo my_tasks */
.page-wide{
  width:140%;
  margin-left:-20%;
}

/* En pantallas <= 1400px vuelve a normal */
@media (max-width:1400px){
  .page-wide{ width:100%; margin-left:0; }
}

/* Dark mode readable links */
[data-theme="dark"] a:not(.btn):not(.pill):not(.badge),
body.dark a:not(.btn):not(.pill):not(.badge),
html.dark a:not(.btn):not(.pill):not(.badge) {
  color: #93c5fd;
}
[data-theme="dark"] a:not(.btn):not(.pill):not(.badge):visited,
body.dark a:not(.btn):not(.pill):not(.badge):visited,
html.dark a:not(.btn):not(.pill):not(.badge):visited {
  color: #bfdbfe;
}
[data-theme="dark"] a:not(.btn):not(.pill):not(.badge):hover,
body.dark a:not(.btn):not(.pill):not(.badge):hover,
html.dark a:not(.btn):not(.pill):not(.badge):hover {
  color: #dbeafe;
}

/* v31: enlaces legibles en modo oscuro en todo el sistema */
html[data-theme="dark"] a:not(.btn):not([class*="btn"]),
html[data-theme="dark"] a:not(.btn):not([class*="btn"]):visited,
[data-theme="dark"] a:not(.btn):not([class*="btn"]),
[data-theme="dark"] a:not(.btn):not([class*="btn"]):visited,
body.dark a:not(.btn):not([class*="btn"]),
body.dark a:not(.btn):not([class*="btn"]):visited {
  color: #93c5fd !important;
  text-decoration-color: rgba(147,197,253,.55) !important;
}
html[data-theme="dark"] a:not(.btn):not([class*="btn"]):hover,
[data-theme="dark"] a:not(.btn):not([class*="btn"]):hover,
body.dark a:not(.btn):not([class*="btn"]):hover {
  color: #dbeafe !important;
  text-decoration-color: rgba(219,234,254,.75) !important;
}
html[data-theme="dark"] .hawk-nav a,
html[data-theme="dark"] .topnav a,
[data-theme="dark"] .hawk-nav a,
[data-theme="dark"] .topnav a {
  text-decoration: none !important;
}


/* v32: enlaces operativos estandarizados como botones/píldoras.
   Se excluye navegación superior y enlaces que ya son botones. */
.container a:not(.btn):not([class*="btn"]):not(.hawk-nav-link),
.wrap a:not(.btn):not([class*="btn"]):not(.hawk-nav-link),
.page-wide a:not(.btn):not([class*="btn"]):not(.hawk-nav-link),
.card a:not(.btn):not([class*="btn"]):not(.hawk-nav-link) {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:auto;
  max-width:100%;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--info) 35%, var(--border));
  background:color-mix(in srgb, var(--info) 8%, transparent);
  color:color-mix(in srgb, var(--info) 82%, var(--text)) !important;
  text-decoration:none !important;
  text-underline-offset:0;
  font-weight:850;
  line-height:1.15;
  white-space:nowrap;
  vertical-align:middle;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.container a:not(.btn):not([class*="btn"]):not(.hawk-nav-link):hover,
.wrap a:not(.btn):not([class*="btn"]):not(.hawk-nav-link):hover,
.page-wide a:not(.btn):not([class*="btn"]):not(.hawk-nav-link):hover,
.card a:not(.btn):not([class*="btn"]):not(.hawk-nav-link):hover {
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--info) 58%, var(--border));
  background:color-mix(in srgb, var(--info) 15%, transparent);
  color:color-mix(in srgb, var(--info) 55%, var(--text)) !important;
}
[data-theme="dark"] .container a:not(.btn):not([class*="btn"]):not(.hawk-nav-link),
[data-theme="dark"] .wrap a:not(.btn):not([class*="btn"]):not(.hawk-nav-link),
[data-theme="dark"] .page-wide a:not(.btn):not([class*="btn"]):not(.hawk-nav-link),
[data-theme="dark"] .card a:not(.btn):not([class*="btn"]):not(.hawk-nav-link),
[data-theme="dark"] .container a:not(.btn):not([class*="btn"]):not(.hawk-nav-link):visited,
[data-theme="dark"] .wrap a:not(.btn):not([class*="btn"]):not(.hawk-nav-link):visited,
[data-theme="dark"] .page-wide a:not(.btn):not([class*="btn"]):not(.hawk-nav-link):visited,
[data-theme="dark"] .card a:not(.btn):not([class*="btn"]):not(.hawk-nav-link):visited {
  color:#bfdbfe !important;
  border-color:rgba(96,165,250,.42);
  background:rgba(59,130,246,.10);
}
[data-theme="dark"] .container a:not(.btn):not([class*="btn"]):not(.hawk-nav-link):hover,
[data-theme="dark"] .wrap a:not(.btn):not([class*="btn"]):not(.hawk-nav-link):hover,
[data-theme="dark"] .page-wide a:not(.btn):not([class*="btn"]):not(.hawk-nav-link):hover,
[data-theme="dark"] .card a:not(.btn):not([class*="btn"]):not(.hawk-nav-link):hover {
  color:#eff6ff !important;
  background:rgba(59,130,246,.20);
}
.topbar a:not(.btn):not([class*="btn"]),
.hawk-nav a:not(.btn):not([class*="btn"]),
.hawk-nav-menu a:not(.btn):not([class*="btn"]),
.topnav a:not(.btn):not([class*="btn"]) {
  display:inline-flex;
  min-height:auto;
  padding:7px 12px;
  border-color:transparent;
  background:transparent;
  border-radius:999px;
  transform:none;
  box-shadow:none;
}
.table a:not(.btn):not([class*="btn"]),
table a:not(.btn):not([class*="btn"]){
  font-size:12px;
  padding:5px 9px;
}


/* v33: botón estándar global para acciones y enlaces operativos */
a.btn, a.btn:visited, button.btn, .btn{
  background: color-mix(in srgb, var(--card) 86%, var(--bg));
  color: var(--text) !important;
  border-color: var(--border);
  text-decoration: none !important;
  box-shadow: none;
}
a.btn:hover, button.btn:hover, .btn:hover{
  color: var(--text) !important;
  background: color-mix(in srgb, var(--card) 72%, var(--info) 8%);
  border-color: color-mix(in srgb, var(--info) 35%, var(--border));
  filter: none;
}
a.btn-primary, a.btn-primary:visited, button.btn-primary, .btn-primary{
  background: var(--primary) !important;
  color: var(--primaryText) !important;
  border-color: var(--primary) !important;
}
a.btn-ghost, a.btn-ghost:visited, button.btn-ghost, .btn-ghost{
  background: color-mix(in srgb, var(--card) 78%, transparent) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
a.btn-danger, a.btn-danger:visited, button.btn-danger, .btn-danger{
  background: color-mix(in srgb, var(--danger) 10%, transparent) !important;
  color: color-mix(in srgb, var(--danger) 84%, var(--text)) !important;
  border-color: color-mix(in srgb, var(--danger) 48%, var(--border)) !important;
}
[data-theme="dark"] a.btn,
[data-theme="dark"] a.btn:visited,
[data-theme="dark"] button.btn,
[data-theme="dark"] .btn{
  background: rgba(15,23,42,.72);
  color: #e5e7eb !important;
  border-color: rgba(148,163,184,.22);
}
[data-theme="dark"] a.btn:hover,
[data-theme="dark"] button.btn:hover,
[data-theme="dark"] .btn:hover{
  color: #f8fafc !important;
  background: rgba(30,41,59,.88);
  border-color: rgba(96,165,250,.42);
}
[data-theme="dark"] a.btn-primary,
[data-theme="dark"] a.btn-primary:visited,
[data-theme="dark"] button.btn-primary,
[data-theme="dark"] .btn-primary{
  background: #e5e7eb !important;
  color: #0b1220 !important;
  border-color: #e5e7eb !important;
}
[data-theme="dark"] a.btn-danger,
[data-theme="dark"] a.btn-danger:visited,
[data-theme="dark"] button.btn-danger,
[data-theme="dark"] .btn-danger{
  background: rgba(239,68,68,.10) !important;
  color: #fecaca !important;
  border-color: rgba(239,68,68,.48) !important;
}
/* enlaces de contenido sin clase siguen como píldora de acción */
main a:not(.hawk-nav-link):not(.hawk-nav-trigger):not(.btn):not([class*="btn"]),
.container a:not(.hawk-nav-link):not(.hawk-nav-trigger):not(.btn):not([class*="btn"]),
.wrap a:not(.hawk-nav-link):not(.hawk-nav-trigger):not(.btn):not([class*="btn"]),
.page-wide a:not(.hawk-nav-link):not(.hawk-nav-trigger):not(.btn):not([class*="btn"]),
.card a:not(.hawk-nav-link):not(.hawk-nav-trigger):not(.btn):not([class*="btn"]),
.table a:not(.hawk-nav-link):not(.hawk-nav-trigger):not(.btn):not([class*="btn"]){
  color:#2563eb !important;
}
[data-theme="dark"] main a:not(.hawk-nav-link):not(.hawk-nav-trigger):not(.btn):not([class*="btn"]),
[data-theme="dark"] .container a:not(.hawk-nav-link):not(.hawk-nav-trigger):not(.btn):not([class*="btn"]),
[data-theme="dark"] .wrap a:not(.hawk-nav-link):not(.hawk-nav-trigger):not(.btn):not([class*="btn"]),
[data-theme="dark"] .page-wide a:not(.hawk-nav-link):not(.hawk-nav-trigger):not(.btn):not([class*="btn"]),
[data-theme="dark"] .card a:not(.hawk-nav-link):not(.hawk-nav-trigger):not(.btn):not([class*="btn"]),
[data-theme="dark"] .table a:not(.hawk-nav-link):not(.hawk-nav-trigger):not(.btn):not([class*="btn"]){
  color:#bfdbfe !important;
}


/* v35: los enlaces de imágenes/galerías NO deben convertirse en botones */
a:has(img),
a.media-link,
a.image-link,
.gallery a,
.main-img a,
.thumb a,
.product-gallery a,
.oc-image-preview-wrap a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  border-radius: inherit !important;
  text-decoration: none !important;
  transform: none !important;
}
a:has(img):hover,
a.media-link:hover,
a.image-link:hover,
.gallery a:hover,
.main-img a:hover,
.thumb a:hover,
.product-gallery a:hover,
.oc-image-preview-wrap a:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
a:has(img) img,
a.media-link img,
a.image-link img,
.gallery a img,
.main-img a img,
.thumb a img {
  display:block;
}

/* v35: acciones operativas explícitas */
a.hawk-action-link,
a.hawk-action-link:visited {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  min-height:32px !important;
  padding:7px 11px !important;
  border-radius:999px !important;
  border:1px solid color-mix(in srgb,var(--info,#3b82f6) 42%,var(--border,#dbe5f0)) !important;
  background:color-mix(in srgb,var(--info,#3b82f6) 10%,var(--card,#fff)) !important;
  color:color-mix(in srgb,var(--info,#3b82f6) 70%,var(--text,#0f172a)) !important;
  font-weight:850 !important;
  line-height:1.15 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
}
[data-theme="dark"] a.hawk-action-link,
[data-theme="dark"] a.hawk-action-link:visited {
  background:rgba(59,130,246,.12) !important;
  border-color:rgba(96,165,250,.45) !important;
  color:#bfdbfe !important;
}
a.hawk-action-link:hover {
  transform:translateY(-1px);
  filter:none !important;
}

/* Popup global Hawk para alertas/validaciones. No desaparece solo. */
.hawk-modal-alert-overlay{
  position:fixed; inset:0; z-index:20000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(2,6,23,.68);
  backdrop-filter:blur(3px);
}
.hawk-modal-alert-box{
  width:min(520px, calc(100vw - 32px));
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--card);
  color:var(--text);
  box-shadow:0 24px 70px rgba(0,0,0,.35);
  padding:20px;
}
.hawk-modal-alert-title{
  font-size:20px;
  line-height:1.2;
  font-weight:900;
  margin-bottom:10px;
}
.hawk-modal-alert-body{
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
  white-space:normal;
}
.hawk-modal-alert-actions{
  margin-top:18px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

/* ========================================================================== 
   v36 · Responsive system-wide layer · PR-17 · 2026-07-10
   Keeps the page viewport stable, stacks forms/grids on small screens and
   confines wide data tables to their own touch-scroll area.
   ========================================================================== */

html, body{
  width:100%;
  max-width:100%;
  min-width:0;
}
body{ overflow-x:hidden; }

img, picture, video, canvas, svg, iframe{
  max-width:100%;
}
img, picture, video, canvas{ height:auto; }

main, .container, .wrap, .page-wrap, .inv-wrap, .page-wide,
.tasks-wide-wrap, .card, form, fieldset,
.row, .col, [class*="grid"], [class*="toolbar"], [class*="hero"]{
  min-width:0;
}

input, select, textarea, button{
  max-width:100%;
  min-width:0;
}
input[type="checkbox"], input[type="radio"]{
  width:auto;
  min-width:18px;
  height:18px;
  flex:0 0 auto;
}
textarea{ resize:vertical; }

/* Touch-friendly, isolated table scrolling. The wrapper is added by app.js. */
.hawk-table-scroll{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
  scrollbar-gutter:stable;
}
.hawk-table-scroll > table{
  margin:0;
}
.hawk-table-scroll::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.mini-table-wrap::-webkit-scrollbar,
.inv-table-wrap::-webkit-scrollbar,
.inv-groups-scroll::-webkit-scrollbar{
  height:9px;
}
.hawk-table-scroll::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.mini-table-wrap::-webkit-scrollbar-thumb,
.inv-table-wrap::-webkit-scrollbar-thumb,
.inv-groups-scroll::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--muted) 45%, transparent);
  border-radius:999px;
}

/* Header: desktop button remains hidden until the mobile breakpoint. */
.hawk-mobile-brand-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}
.hawk-brand-copy{ min-width:0; }
.hawk-nav-toggle{
  display:none;
  width:42px;
  height:42px;
  padding:0;
  align-items:center;
  justify-content:center;
  flex:0 0 42px;
  border:1px solid var(--border);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 88%, var(--bg));
  color:var(--text);
  cursor:pointer;
  font-size:22px;
  line-height:1;
}

/* Prevent long operational values from forcing the entire viewport wider. */
.card, .table, .mini-table, .inv-table,
.badge, .pill, .chip, .userpill,
[class*="title"], [class*="value"], [class*="name"]{
  overflow-wrap:anywhere;
}

/* Medium screens: keep layouts fluid before the phone breakpoint. */
@media (max-width: 1100px){
  .container, .wrap, .page-wrap, .inv-wrap{
    width:100%;
    max-width:none;
  }
  .page-wide, .tasks-wide-wrap{
    width:100% !important;
    margin-left:0 !important;
  }
}

@media (max-width: 820px){
  :root{ --radius:14px; --radius-sm:10px; }

  body{
    font-size:14px;
    -webkit-text-size-adjust:100%;
  }

  .container, .wrap, .page-wrap, .inv-wrap,
  .docs-page, .tasks-wide-wrap{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .page-wide{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .page-gap{ margin-top:10px; }

  .card{
    max-width:100%;
    padding:12px;
    border-radius:14px;
  }
  .card + .card{ margin-top:10px; }

  h1{ font-size:clamp(24px, 7vw, 30px) !important; line-height:1.12 !important; }
  h2{ font-size:clamp(20px, 5.8vw, 25px) !important; line-height:1.16 !important; }
  h3{ font-size:clamp(17px, 5vw, 21px) !important; }

  /* Mobile navigation becomes a compact accordion instead of wrapping off-screen. */
  .topbar{
    position:sticky !important;
    top:0;
    z-index:1000;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:9px 10px 10px;
  }
  .topbar-left{ width:100%; gap:8px; }
  .hawk-mobile-brand-row{ align-items:center; }
  .brand{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .page-title{
    max-width:calc(100vw - 82px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .hawk-nav-toggle{ display:inline-flex; }
  .hawk-nav{
    display:none;
    width:100%;
    max-height:calc(100dvh - 150px);
    overflow-y:auto;
    overscroll-behavior:contain;
    flex-direction:column;
    align-items:stretch;
    flex-wrap:nowrap;
    gap:5px;
    margin-top:0;
    padding:7px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--card);
    box-shadow:0 18px 45px rgba(2,6,23,.20);
  }
  .topbar.nav-open .hawk-nav{ display:flex; }
  .hawk-nav-link, .hawk-nav-group, .hawk-nav-trigger{
    width:100%;
    max-width:100%;
  }
  .hawk-nav-link, .hawk-nav-trigger{
    min-height:42px;
    justify-content:space-between;
    border-radius:10px;
    padding:9px 11px !important;
  }
  .hawk-nav-group{ display:flex; flex-direction:column; }
  .hawk-nav .hawk-nav-group:not(.open) .hawk-nav-menu{ display:none !important; }
  .hawk-nav .hawk-nav-group.open .hawk-nav-menu{ display:block !important; }
  .hawk-nav-menu{
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    width:100%;
    min-width:0 !important;
    max-width:100%;
    margin:3px 0 4px;
    padding:5px;
    border-radius:12px;
    box-shadow:none;
  }
  .hawk-nav-menu a{
    white-space:normal;
    min-height:42px;
  }
  .topbar-right{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:7px;
    align-items:center;
  }
  .topbar-right .userpill{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .topbar-right .iconbtn,
  .topbar-right .btn{ min-height:40px; }

  /* Common layouts used across HAWK. */
  .row{ flex-direction:column; }
  .col{ width:100%; flex:1 1 auto; min-width:0; }
  .hero, .section-head, .load-head, .company-head,
  .footer-actions, .sticky-actions, .actions-sticky,
  .bottom-actions, .inv-section-head, .inv-group-head{
    max-width:100%;
    flex-wrap:wrap;
  }

  .grid-2, .grid-3, .grid-4,
  .form-grid, .filter-grid, .filters,
  .settings-grid, .settings-grid-3,
  .kpi-grid, .metric-grid, .summary-grid,
  .freight-detail-grid, .t3-rate-fields,
  .pi-grid, .pi-guarantee-grid,
  .inv-toolbar, .check-grid, .visibility-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }

  /* Inline grids are frequent in legacy screens. Collapse only content grids,
     not actual table elements. */
  main [style*="grid-template-columns"],
  .container [style*="grid-template-columns"],
  .wrap [style*="grid-template-columns"],
  .page-wide [style*="grid-template-columns"],
  form [style*="grid-template-columns"]{
    grid-template-columns:minmax(0,1fr) !important;
  }

  input, select, textarea{
    width:100%;
    max-width:100%;
    min-height:43px;
    font-size:16px; /* prevents iOS auto-zoom */
  }
  input[type="checkbox"], input[type="radio"]{
    width:20px !important;
    min-width:20px !important;
    height:20px;
    min-height:20px;
  }
  input[style*="width"], select[style*="width"], textarea[style*="width"]{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  .select2-container{ width:100% !important; max-width:100% !important; }

  .btn, button.btn, a.btn,
  .iconbtn, .hawk-action-link{
    min-height:42px;
    white-space:normal !important;
    text-align:center;
  }

  .hawk-modal-alert-overlay{ padding:12px; align-items:flex-end; }
  .hawk-modal-alert-box{
    width:100%;
    max-width:100%;
    max-height:88dvh;
    overflow:auto;
    border-radius:18px 18px 12px 12px;
    padding:16px;
  }
  .hawk-modal-alert-actions{ position:sticky; bottom:-16px; padding:10px 0 0; background:var(--card); }
  .hawk-modal-alert-actions .btn{ width:100%; }

  .toast, .toast-bubble{
    left:10px !important;
    right:10px !important;
    top:auto !important;
    bottom:10px !important;
    width:auto !important;
    max-width:none !important;
  }

  /* Sticky action bars should fit the phone and never cover their own buttons. */
  .sticky-actions, .actions-sticky,
  .footer-actions, .bottom-actions{
    flex-direction:column;
    align-items:stretch !important;
    padding:10px !important;
  }
  .sticky-actions .btn, .actions-sticky .btn,
  .footer-actions .btn, .bottom-actions .btn{
    width:100%;
  }

  /* On phones, tables may scroll inside themselves but can never widen body. */
  table{ max-width:none; }
  .table th, .table td,
  .mini-table th, .mini-table td{
    padding:8px 9px;
  }

  /* Dedicated complex modules. */
  .t4-load-layout{ grid-template-columns:minmax(0,1fr) !important; }
  .t4-load-simulator{ position:static !important; width:100% !important; }
  .t4-auto-toolbar{ grid-template-columns:minmax(0,1fr) !important; }
  .container-shell{ min-height:190px !important; }
  .container-label{ height:150px !important; font-size:29px !important; }

  .inv-hero{ padding:15px !important; }
  .inv-actions{ width:100%; justify-content:flex-start !important; }
  .inv-actions .btn{ flex:1 1 180px; }
  .inv-kpis{ grid-template-columns:minmax(0,1fr) !important; }
  .inv-kpi.control{ grid-column:auto !important; }
  .inv-toolbar, .inv-toolbar .inv-search-label{ grid-column:auto !important; }

  .email-preview{ max-width:100%; overflow:auto; }
  .copy-area{ white-space:pre-wrap !important; overflow-wrap:anywhere; }
}

@media (max-width: 560px){
  .container, .wrap, .page-wrap, .inv-wrap,
  .docs-page, .tasks-wide-wrap{ padding-left:7px !important; padding-right:7px !important; }
  .card{ padding:10px; }
  .topbar{ padding-left:8px; padding-right:8px; }
  .topbar-right{ grid-template-columns:minmax(0,1fr) 42px; }
  .topbar-right .btn-ghost{ grid-column:1/-1; width:100%; }

  .btn, button.btn, a.btn{ width:100%; }
  .badge, .pill, .chip{ max-width:100%; white-space:normal !important; }

  /* Preserve compact icon-only controls. */
  .iconbtn, .hawk-nav-toggle,
  button[aria-label][class*="icon"],
  .btn-icon{ width:auto !important; min-width:42px; }

  .table th, .table td,
  .mini-table th, .mini-table td,
  .inv-table th, .inv-table td{
    font-size:12px;
  }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ========================================================================== 
   v37 · Ancho global estándar Inventory · PR-17 · 2026-07-14
   Inventory General (1780px) becomes the desktop width standard for all
   authenticated modules and task screens. Mobile responsive rules remain.
   ========================================================================== */
:root{
  --hawk-content-max:1780px;
  --hawk-content-gutter:18px;
}

/* Standard pages that use the shared container + legacy wide wrapper. */
.container{
  width:100%;
  max-width:var(--hawk-content-max);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--hawk-content-gutter);
  padding-right:var(--hawk-content-gutter);
}

/* Retire the old 140%/150% width hack: the parent itself is now wide enough. */
.page-wide,
.tasks-wide-wrap{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Standalone modules/tasks that define their own outer wrapper. */
body > .wrap,
body > .page-wrap,
body > .t6-wrap,
body > .inv-wrap,
body > .docs-page{
  width:100% !important;
  max-width:var(--hawk-content-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* A few screens combine these wrappers instead of placing them at body level. */
.wrap.page-wrap,
.page-wrap.docs-page,
.page-wide.docs-page{
  max-width:var(--hawk-content-max) !important;
}

/* Keep cards fluid inside the new standard page width. */
.container > .card,
.page-wide > .card,
.wrap > .card,
.page-wrap > .card,
.t6-wrap > .card,
.inv-wrap > .card{
  width:100%;
  max-width:none;
}

@media (max-width:1100px){
  :root{ --hawk-content-gutter:10px; }
}

@media (max-width:560px){
  :root{ --hawk-content-gutter:7px; }
}