/* ============================================================
   Menú Comercial — base compartida (js/comercial.js).
   Cada solapa tiene su hoja: comercial-agenda.css, comercial-cross.css, comercial-embudo.css
   (Listas usa las clases de acá + las de cross).
   ============================================================ */
#view-comercial { display:flex; flex-direction:column; gap:16px; }
#view-comercial[hidden] { display:none; }
.com-head { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.com-titulo { margin:0; font-size:24px; font-weight:700; color:#0f172a; }
.com-sub { font-size:13.5px; color:#64748b; margin-top:2px; }
.com-head-acciones { display:flex; gap:8px; flex-wrap:wrap; }
.com-tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid #e2e8f0; }
.com-tabs[hidden] { display:none; }   /* el menú Agenda va sin solapas */
.com-tab { background:none; border:0; border-bottom:2px solid transparent; padding:10px 14px; font:inherit; font-size:14px; color:#64748b; cursor:pointer; }
.com-tab:hover { color:#0f172a; }
.com-tab.active { color:#0f172a; font-weight:600; border-bottom-color:#2563eb; }
.com-pane[hidden] { display:none; }

.com-card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; }
.com-vacio { color:#64748b; font-size:13.5px; padding:28px; text-align:center; background:#fff; border:1px dashed #cbd5e1; border-radius:12px; }
.com-cargando { color:#64748b; font-size:13.5px; padding:28px; text-align:center; }
.com-btn { height:36px; padding:0 14px; border-radius:8px; border:1px solid #cbd5e1; background:#fff; font:inherit; font-size:13.5px; color:#0f172a; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.com-btn:hover { background:#f1f5f9; }
.com-btn-pri { background:#2563eb; border-color:#2563eb; color:#fff; }
.com-btn-pri:hover { background:#1d4ed8; }
.com-btn-ok { background:#16a34a; border-color:#16a34a; color:#fff; }
.com-btn-peligro { color:#b91c1c; }
.com-btn-icono { width:36px; padding:0; justify-content:center; }
.com-btn:disabled { opacity:.45; cursor:not-allowed; }
.com-pill { font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap; background:#f1f5f9; color:#334155; }
.com-pill-azul { background:#dbeafe; color:#1e40af; }
.com-pill-verde { background:#dcfce7; color:#166534; }
.com-pill-ambar { background:#fef3c7; color:#92400e; }
.com-pill-rojo { background:#fee2e2; color:#991b1b; }
.com-input, .com-select, .com-textarea { height:36px; border:1px solid #cbd5e1; border-radius:8px; padding:0 10px; font:inherit; font-size:13.5px; background:#fff; color:#0f172a; box-sizing:border-box; }
.com-textarea { height:auto; padding:8px 10px; resize:vertical; width:100%; }
.com-label { font-size:12px; color:#64748b; font-weight:600; display:block; margin-bottom:4px; }
.com-campo { margin-bottom:12px; }
.com-fila { display:flex; gap:10px; flex-wrap:wrap; }
.com-fila > * { flex:1 1 140px; }
.com-error { font-size:12.5px; color:#b91c1c; margin-top:4px; min-height:0; }

/* Modal de la zona */
.com-modal-fondo { position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:flex-start; justify-content:center; z-index:1000; padding:48px 16px; overflow:auto; }
.com-modal { background:#fff; border-radius:14px; width:100%; box-shadow:0 20px 50px rgba(15,20,30,.28); }
.com-modal-head { padding:16px 20px 10px; display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.com-modal-titulo { margin:0; font-size:17px; font-weight:600; }
.com-modal-body { padding:4px 20px 12px; }
.com-modal-pie { padding:12px 20px; border-top:1px solid #eef0f3; display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }

@media (max-width: 720px){
  .com-titulo { font-size:20px; }
  .com-modal-fondo { padding:16px 8px; }
}