/* Logística · Thelsa — grid de capacidad, toast, modal, estado vacío */

  .cap-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
  .cap-grid th, .cap-grid td { padding: 8px 9px; border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); text-align: center; }
  .cap-grid th { background: var(--bg-subtle); font-size: 10px; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
  .cap-grid th.branch-h, .cap-grid td.branch-h { position: sticky; left: 0; background: var(--bg-card); z-index: 2; text-align: left; font-weight: 600; border-right: 1px solid var(--line); }
  .cap-grid th.branch-h { background: var(--bg-subtle); }
  .cap-grid td.cell-ok { background: #f1f8f4; }
  .cap-grid td.cell-warn { background: #fdf3e1; }
  .cap-grid td.cell-err { background: #fae2e2; }
  .cap-grid td.cell-empty { background: #f8fafc; color: var(--ink-faint); }

  .toast { position: fixed; bottom: 22px; right: 22px; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r-md); box-shadow: var(--shadow-lg); font-size: 13px; z-index: 300; opacity: 0; transform: translateY(10px); transition: all 0.25s; pointer-events: none; max-width: 420px; }
  .toast.show { opacity: 1; transform: translateY(0); }
  .toast.ok { background: var(--ok); } .toast.warn { background: var(--warn); } .toast.err { background: var(--err); }

  .modal-overlay { position: fixed; inset: 0; background: rgba(13,27,42,0.50); display: none; align-items: center; justify-content: center; z-index: 150; }
  .modal-overlay.open { display: flex; }
  .modal { background: #fff; border-radius: var(--r-md); width: 500px; max-width: 92vw; box-shadow: var(--shadow-lg);
    max-height: 90vh; display: flex; flex-direction: column; }
  .modal-head, .modal-foot { flex: none; }
  .modal.modal-ancho { width: 860px; }
  .modal-body .tabla-scroll { overflow-x: auto; margin: 0 -4px; }
  .modal-body .data-table { width: 100%; }
  .modal-body .data-table .truncate { max-width: 260px; }
  .modal-head { padding: 16px 20px; border-bottom: 1px solid var(--line); }
  .modal-head h3 { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500; }
  .modal-body { padding: 18px 20px; font-size: 13px; line-height: 1.6; color: var(--ink-soft);
    overflow-y: auto; flex: 1 1 auto; -webkit-overflow-scrolling: touch; }
  .modal-body p + p { margin-top: 8px; }
  .modal-foot { padding: 12px 20px; border-top: 1px solid var(--line); background: var(--bg-subtle); display: flex; gap: 8px; justify-content: flex-end; }

  .empty { text-align: center; padding: 50px 20px; color: var(--ink-faint); }
  .empty-title { font-size: 14px; color: var(--ink-soft); font-weight: 500; }
  .empty-sub { font-size: 12px; margin-top: 4px; }