/* ── 10. MODALS & OVERLAYS ────────────────────────────────────── */
/*
 * PATTERN:
 *   .modal  = full-screen overlay (position:fixed; inset:0; display:none → flex by JS)
 *   .modal-box = visual card inside the overlay
 *
 * JS uses:
 *   saModal(id, true)  → el.style.display = 'flex'
 *   closeModal(id)     → el.classList.remove('open'); setTimeout → el.style.display = 'none'
 *
 * So: .modal { display:none } — overridden by JS inline style.
 *     .modal-overlay { display:flex } — used in new code, always visible when in DOM.
 */

.modal,
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(3px);
  padding: var(--space-5);
  animation: fadeIn .15s ease;
}
/* .modal hidden by default; JS sets display:flex to show */
.modal         { display: none; }
/* .modal-overlay hidden by default; JS sets display:flex to show */
.modal-overlay { display: none; }

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* Modal box (the visual card) */
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 540px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
  animation: slideUp .2s ease;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}

.modal-header { padding:var(--space-5) var(--space-5) var(--space-4); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); position:sticky; top:0; background:var(--surface); z-index:1; }
.modal-header h3 { font-size:var(--text-md); font-weight:800; color:var(--text); }
.modal-close { border:none; background:none; cursor:pointer; color:var(--text3); font-size:18px; width:28px; height:28px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; transition:all var(--t); }
.modal-close:hover { background:var(--surface2); color:var(--text); }
.modal-body   { padding:var(--space-4) var(--space-5); color:var(--text); }
.modal-footer { padding:var(--space-4) var(--space-5); border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:var(--space-2); position:sticky; bottom:0; background:var(--surface); z-index:1; }

/* Detail slide panel */
.detail-panel { position:fixed; top:0; right:-520px; bottom:0; width:500px; max-width:90vw; background:var(--surface); border-left:1px solid var(--border); box-shadow:var(--shadow-md); z-index:calc(var(--z-modal) - 100); display:flex; flex-direction:column; transition:right .25s ease; }
.detail-panel.open { right:0; }
.detail-header { padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:var(--space-3); flex-shrink:0; }
.detail-header h3 { font-size:var(--text-sm); font-weight:800; flex:1; color:var(--text); min-width:0; }
.detail-body   { flex:1; overflow-y:auto; padding:var(--space-4) var(--space-5); }
.detail-footer { padding:var(--space-4) var(--space-5); border-top:1px solid var(--border); display:flex; gap:var(--space-2); flex-shrink:0; }

/* ── 11. TABS ─────────────────────────────────────────────────── */

.tabs, .sa-tab-bar {
  display:flex; gap:2px;
  border-bottom:1px solid var(--border);
  margin-bottom:var(--space-4);
  flex-wrap:wrap;
}
.tab, .sa-tab {
  display:inline-flex; align-items:center; height:36px;
  padding:0 var(--space-4);
  font-size:var(--text-xs); font-weight:600;
  color:var(--text3);
  cursor:pointer; border:none; background:none;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:all var(--t);
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  font-family:var(--font);
  white-space:nowrap; flex-shrink:0;
}
.tab:hover,  .sa-tab:hover  { color:var(--text); background:var(--surface2); }
.tab.active, .sa-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:700; }

/* SA empresa detail tabs */
.sa-det-tab {
  display:inline-flex; align-items:center; height:36px;
  padding:0 10px;
  white-space: nowrap;
  font-size: 13px; font-weight:600;
  color: var(--text3); background:none; border:none;
  border-bottom:2px solid transparent; cursor:pointer;
  flex-shrink: 0;
  transition: color .15s, border-color .15s;
}
.sa-det-tab:hover  { color:var(--text); background:var(--surface2); }
.sa-det-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:700; }

/* SA det panels (tab content) */
.sa-det-panel { display:none; }
.sa-det-panel.active { display:block; }
.sa-datos-tab { padding:var(--space-4); }

/* Period tabs */
.period-tabs { display:flex; gap:2px; flex-wrap:wrap; }
.period-tab { height:28px; padding:0 var(--space-3); border-radius:var(--radius-sm); font-size:var(--text-xs); font-weight:700; cursor:pointer; border:none; background:none; color:var(--text3); transition:all var(--t); font-family:var(--font); }
.period-tab.active { background:var(--surface2); color:var(--accent); }
.period-tab:hover  { color:var(--text); }

/* ── 12. BADGES / PILLS / DOTS ────────────────────────────────── */

.pill, .badge, .sa-badge, .sa-pill {
  display:inline-flex; align-items:center;
  height:20px; padding:0 var(--space-2);
  border-radius:20px;
  font-size:10px; font-weight:700;
  flex-shrink:0; white-space:nowrap;
}
.pill.green,  .badge.green,  .sa-badge.green,  .sa-pill.g  { background:var(--green-l);  color:var(--green);  }
.pill.red,    .badge.red,    .sa-badge.red,    .sa-pill.r  { background:var(--red-l);    color:var(--red);    }
.pill.amber,  .badge.amber,  .sa-badge.amber,  .sa-pill.a  { background:var(--amber-l);  color:var(--amber);  }
.pill.blue,   .badge.blue,   .sa-badge.blue,   .sa-pill.b  { background:var(--blue-l);   color:var(--blue);   }
.pill.purple, .badge.purple, .sa-badge.purple               { background:var(--purple-l); color:var(--purple); }
.pill.gray,   .badge.gray,   .sa-badge.gray,   .sa-pill.gr { background:var(--surface3); color:var(--text3);  }
.pill.accent, .badge.accent, .sa-badge.accent               { background:var(--accent-l); color:var(--accent); }

.dot { width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0; }
.dot.green  { background:var(--green);  box-shadow:0 0 6px rgba(34,197,94,.5); }
.dot.red    { background:var(--red);    box-shadow:0 0 6px rgba(239,68,68,.5); }
.dot.amber  { background:var(--amber); }
.dot.gray   { background:var(--text3); }

/* Status dots (SA) */
.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.status-dot.ok      { background:var(--green); box-shadow:0 0 6px rgba(34,197,94,.5); }
.status-dot.warn    { background:var(--amber); }
.status-dot.error   { background:var(--red);   box-shadow:0 0 6px rgba(239,68,68,.4); }
.status-dot.neutral { background:var(--text3); }
.ok      { color:var(--green); }
.neutral { color:var(--text3); }

/* Avatar */
.avatar    { width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; flex-shrink:0; }
.avatar-sm { width:22px; height:22px; font-size:9px; }
.avatar-lg { width:36px; height:36px; font-size:var(--text-xs); }

/* ──────────────────────────────────────────────────────────
   Mejora visual de formularios dentro de modales (.modal-box)
   ────────────────────────────────────────────────────────── */
.modal-box { padding: var(--space-5); }
.modal-box .modal-title {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
/* Inputs/selects/textarea dentro del modal: mismo look que .form-input */
.modal-box .field-input,
.modal-box input:not([type=checkbox]):not([type=radio]),
.modal-box select,
.modal-box textarea {
  width: 100%;
  height: var(--input-h);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  color: var(--text);
  font-size: var(--text-sm);
  transition: border-color var(--t), box-shadow var(--t);
}
.modal-box textarea { height: auto; min-height: 72px; padding: var(--space-2) var(--space-3); resize: vertical; }
.modal-box .field-input:focus,
.modal-box input:focus,
.modal-box select:focus,
.modal-box textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-l);
  background: var(--surface);
  outline: none;
}
/* Espaciado entre filas y secciones */
.modal-box .field-row { margin-bottom: var(--space-3); }
.modal-box .field-label { display:block; margin-bottom: 4px; font-size: var(--text-xs); font-weight: 600; color: var(--text2); }
.modal-box .form-grid { margin-bottom: var(--space-4); }
.modal-box .form-section-title { margin: var(--space-4) 0 var(--space-3); }
.modal-box .form-section-title:first-of-type { margin-top: 0; }
/* Footer de botones separado */
/* Footer de botones dentro del modal: bloque normal al final, sin solapar la ultima fila */
.modal-box .modal-footer {
  position: static;
  margin: var(--space-4) calc(var(--space-5) * -1) calc(var(--space-5) * -1);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--surface);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
/* Aire extra abajo del contenido para que nada quede pegado al footer */
.modal-box form { padding-bottom: 0; }

/* Buscador global: dejar lugar al hint de teclado para que no se encime con el texto */
#topbarSearch .search-input { padding-right: 14px; }
.cmd-k-hint {
  font-size: 10px;
  font-weight: 600;
  color: var(--text3);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 6px;
  font-family: inherit;
  line-height: 1.4;
}

/* Direcciones del modal de pedido (origen/destino) — faltaban estilos */
.dir-wrap { display: flex; flex-direction: column; gap: var(--space-2); }
.dir-row { display: flex; gap: var(--space-2); align-items: flex-start; }
.dir-localidad-wrap { position: relative; }
.dir-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,.12); max-height: 200px; overflow-y: auto; margin-top: 2px;
}
.dir-dropdown:empty { display: none; }
.dir-dropdown > * { padding: 8px 12px; cursor: pointer; font-size: 13px; }
.dir-dropdown > *:hover { background: var(--surface2); }
.dir-full { font-size: 12px; color: var(--text2); margin-top: 2px; }
.dir-full:empty { display: none; }