/* =========================================================
   Global Vett · App-Shell
   Comportamiento tipo app nativa cuando se instala como PWA.
   No rompe la lógica existente: solo desactiva gestos del navegador.
   ========================================================= */

html, body {
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

input, textarea, [contenteditable="true"], .selectable, .allow-select {
  -webkit-user-select: text;
  user-select: text;
}

@supports (padding: max(0px)) {
  body {
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

* { -webkit-tap-highlight-color: transparent; }

input, select, textarea { font-size: 16px; }

/* ---------- Topbar siempre pegada arriba ---------- */
.main-content .topbar,
.client-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}

/* Botón refrescar flotante dentro del topbar */
.gv-refresh-btn{
  background: linear-gradient(135deg,#13515F,#3FA796);
  color:#fff;border:none;border-radius:999px;
  padding:8px 14px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  font-size:.82rem;font-family:inherit;
  transition:transform .15s, box-shadow .15s;
}
.gv-refresh-btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(19,81,95,.3); }
.gv-refresh-btn.spinning i{ animation: gv-spin 1s linear infinite; }
@keyframes gv-spin { to { transform: rotate(360deg); } }

/* ---------- Modo app instalada ---------- */
@media all and (display-mode: standalone) {
  html, body {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .main-content,
  .client-main,
  .page-body,
  main,
  .wrap {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .main-content .topbar,
  .client-header {
    position: sticky;
    top: 0;
  }
}

/* ---------- Tablas responsivas ---------- */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrapper table {
  min-width: 640px;
}

@media (max-width: 640px) {
  .table-wrapper table { font-size: .78rem; }
  .table-wrapper th, .table-wrapper td { padding: 8px 6px; white-space: nowrap; }
  .gv-kpi { padding: 12px; }
  .gv-kpi .val { font-size: 1.15rem; }
  .gv-kpi .lbl { font-size: .68rem; }
  .topbar { padding: 8px 12px; }
  .topbar-title { font-size: .95rem; }
  .gv-refresh-btn { padding: 6px 10px; font-size: .72rem; }
  .gv-refresh-btn span { display: none; } /* solo ícono en mobile */
}

/* =========================================================
   Bodegas, permisos y auditoría (implementaciones 09-09-2026)
   ========================================================= */

/* ---- Chips de existencias por bodega ---- */
.wh-chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.wh-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:color-mix(in srgb, var(--wh, #0084D4) 10%, #fff);
  border:1px solid color-mix(in srgb, var(--wh, #0084D4) 30%, #fff);
  border-radius:999px; padding:3px 10px; font-size:.72rem; line-height:1.4;
  white-space:nowrap;
}
.wh-chip-tag{ color:var(--wh, #0084D4); font-weight:700; letter-spacing:.02em; text-transform:uppercase; font-size:.64rem; }
.wh-chip b{ color:#13294B; font-size:.86rem; font-weight:800; font-variant-numeric:tabular-nums; }
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .wh-chip{ background:#F3F6FA; border-color:#DBE3EC; }
}

/* ---- Selector de bodega (segmentado) ---- */
.wh-switch{ display:inline-flex; background:#EEF1F5; border-radius:10px; padding:3px; gap:3px; }
.wh-switch button{
  border:none; background:transparent; cursor:pointer; font-family:inherit;
  padding:7px 16px; border-radius:8px; font-size:.8rem; font-weight:700; color:#6B7280;
  transition:background .15s, color .15s, box-shadow .15s;
}
.wh-switch button.active{ background:#fff; color:#13294B; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.wh-switch button:hover:not(.active){ color:#13294B; }

/* ---- Firma de última modificación ---- */
.last-mod{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; color:#6B7280; font-style:italic;
}
.last-mod i{ color:#9CA3AF; font-style:normal; }
.last-mod strong{ color:#13294B; font-style:normal; font-weight:700; }

/* ---- Aviso descartable (nota de migración, etc.) ---- */
.gv-note{
  display:flex; gap:12px; align-items:flex-start;
  background:#FFF8E6; border:1px solid #F5DFA3; border-left:4px solid #F59E0B;
  border-radius:10px; padding:12px 14px; margin-bottom:16px; font-size:.82rem; color:#6B4E12;
}
.gv-note i.gv-note-icon{ color:#F59E0B; margin-top:2px; }
.gv-note-body{ flex:1; line-height:1.5; }
.gv-note-body strong{ color:#4A3708; }
.gv-note-close{
  border:none; background:transparent; cursor:pointer; color:#A17E28;
  font-size:1rem; padding:2px 4px; border-radius:6px; line-height:1;
}
.gv-note-close:hover{ background:rgba(161,126,40,.12); }

/* ---- Estado de despacho ---- */
.disp-box{
  background:#F3F6FA; border:1px solid #E1E8F0; border-radius:10px;
  padding:12px 14px; font-size:.82rem; color:#1F2937;
}
.disp-box .disp-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:#6B7280; font-weight:700; }
.disp-box .disp-value{ font-weight:600; color:#13294B; }
.disp-empty{ color:#9CA3AF; font-style:italic; }

/* ---- Solo lectura: se ve, no se toca ---- */
.readonly-hint{
  display:inline-flex; align-items:center; gap:6px; font-size:.72rem;
  color:#6B7280; background:#F3F4F6; border-radius:999px; padding:4px 10px;
}

/* ---- Resumen de permisos del rol (modal de usuario) ----
   OJO: NO usar .readonly-hint aquí. Es un inline-flex pensado para una sola
   línea corta: con un párrafo largo cada trozo de texto se vuelve un ítem
   flex independiente y el texto se parte letra por letra en columnas. */
.role-perms-hint{
  display:block; width:100%; box-sizing:border-box;
  margin-top:8px; padding:10px 12px;
  background:#F3F6FA; border:1px solid #E1E8F0; border-left:3px solid #0084D4;
  border-radius:10px;
  font-size:.78rem; line-height:1.5; color:#374151;
  text-align:left; word-break:normal; overflow-wrap:anywhere;
}
.role-perms-hint i{ color:#0084D4; margin-right:6px; }
.role-perms-hint strong{ color:#13294B; }
.role-perms-hint:empty{ display:none; }


/* ══════════════════════════════════════════════════════════
   FACTURA ADJUNTA a una orden ("el clip")
   Panel de la auxiliar (js/auxiliar.js) y del admin (js/admin.js).
   ══════════════════════════════════════════════════════════ */
.aux-file-chip{ display:inline-flex; align-items:center; gap:5px; margin-left:6px; font-size:.72rem; font-weight:700;
    color:#0084D4; text-decoration:none; background:#EFF6FF; border:1px solid #BFDBFE; border-radius:999px;
    padding:2px 9px; white-space:nowrap; }
.aux-file-chip:hover{ background:#DBEAFE; text-decoration:underline; }
.aux-file-current{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.82rem;
    background:#F8FAFC; border:1px solid #E5E7EB; border-radius:8px; padding:8px 10px; margin-bottom:8px; }
.aux-file-current a{ color:#0084D4; font-weight:600; word-break:break-all; }
.aux-file-remove{ margin-left:auto; display:flex; align-items:center; gap:5px; font-size:.76rem; color:#B23232; cursor:pointer; }

/* ══════════════════════════════════════════════════════════
   TARJETA DE NOTIFICACIONES (js/notificaciones.js)
   ══════════════════════════════════════════════════════════ */
.notif-card{ display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:12px;
    border:1px solid #E5E7EB; background:#fff; margin-bottom:18px; }
.notif-card.notif-ok{    background:#F0FDF4; border-color:#BBF7D0; }
.notif-card.notif-aviso{ background:#EFF6FF; border-color:#BFDBFE; }
.notif-card.notif-malo{  background:#FEF2F2; border-color:#FECACA; }
.notif-icono{ flex-shrink:0; width:38px; height:38px; border-radius:10px; display:flex; align-items:center;
    justify-content:center; font-size:1.05rem; background:rgba(0,0,0,.05); color:#13294B; }
.notif-ok    .notif-icono{ background:#DCFCE7; color:#0F7B4F; }
.notif-aviso .notif-icono{ background:#DBEAFE; color:#0084D4; }
.notif-malo  .notif-icono{ background:#FEE2E2; color:#B23232; }
.notif-cuerpo{ flex:1; min-width:0; }
.notif-titulo{ font-weight:800; color:#13294B; font-size:.95rem; margin-bottom:3px; }
.notif-texto{ font-size:.83rem; color:#4B5563; line-height:1.5; }
.notif-acciones{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.notif-acciones .btn{ min-height:38px; }
@media (max-width:480px){
  .notif-card{ padding:12px; gap:10px; }
  .notif-acciones .btn{ width:100%; justify-content:center; }
}

/* ══════════════════════════════════════════════════════════
   DIÁLOGO DE FACTURACIÓN
   Antes era una lista de campos sueltos y el error del servidor salía como
   un párrafo gris ilegible. Ahora: campos agrupados, zona de adjunto que se
   ve como tal y estados claros de subida.
   ══════════════════════════════════════════════════════════ */
.fac-dialogo{ text-align:left; }
.fac-grupo{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
@media (max-width:520px){ .fac-grupo{ grid-template-columns:1fr; } }
.fac-campo label{ display:block; font-size:.76rem; font-weight:700; color:#13294B;
    text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; }
.fac-campo .form-control{ width:100%; }
.fac-obligatorio{ color:#EF4444; }

/* Zona de adjunto */
.fac-adjunto{ border:2px dashed #BFDBFE; border-radius:12px; background:#F8FBFF;
    padding:16px; text-align:center; transition:border-color .15s, background .15s; cursor:pointer; }
.fac-adjunto:hover, .fac-adjunto.arrastrando{ border-color:#0084D4; background:#EFF6FF; }
.fac-adjunto input[type=file]{ display:none; }
.fac-adjunto-icono{ font-size:1.6rem; color:#0084D4; margin-bottom:6px; }
.fac-adjunto-titulo{ font-weight:700; color:#13294B; font-size:.9rem; }
.fac-adjunto-pista{ font-size:.75rem; color:#6B7280; margin-top:3px; }
.fac-adjunto.tiene{ border-style:solid; border-color:#BBF7D0; background:#F0FDF4; }
.fac-adjunto.tiene .fac-adjunto-icono{ color:#0F7B4F; }

/* Archivo elegido / ya guardado */
.fac-archivo{ display:flex; align-items:center; gap:10px; text-align:left; background:#fff;
    border:1px solid #E5E7EB; border-radius:10px; padding:10px 12px; margin-top:10px; }
.fac-archivo i{ font-size:1.2rem; color:#B23232; flex-shrink:0; }
.fac-archivo-datos{ flex:1; min-width:0; }
.fac-archivo-nombre{ font-weight:600; font-size:.83rem; color:#13294B;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fac-archivo-peso{ font-size:.72rem; color:#6B7280; }
.fac-archivo-quitar{ background:none; border:0; color:#B23232; cursor:pointer; font-size:.9rem; padding:4px 6px; }
.fac-archivo-quitar:hover{ color:#7f1d1d; }

/* Aviso de error, legible */
.fac-error{ display:flex; gap:9px; align-items:flex-start; background:#FEF2F2; border:1px solid #FECACA;
    border-radius:10px; padding:10px 12px; margin-top:12px; font-size:.82rem; color:#991B1B; line-height:1.45; }
.fac-error i{ margin-top:2px; }
.fac-nota{ font-size:.76rem; color:#6B7280; margin:12px 0 0; line-height:1.5; }