/* Tipografía de marca: Montserrat (archivo variable local, licencia OFL) */
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/Montserrat.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; }
html, body, .login-screen, input, select, textarea, button { font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif; }
body { font-weight: 400; }
h1, h2, h3, .page-header h1, .card h2, .modal-header h3, .login-hero-copy h1, .login-form-heading h2 { font-family: 'Montserrat', 'Segoe UI', sans-serif; font-weight: 700; }
th, .btn, .badge, .nav-item.active, .link-cliente, .field label { font-weight: 600; }
.text-muted, .hint, .field .hint, .page-header p, .cot-timeline small, .login-hero-description, .hoja-pie, .hoja-meta span { font-weight: 300; }
.num, .code-badge, .cot-totales { font-variant-numeric: tabular-nums; }
.cot-totales .gran { font-weight: 700; }

/* Cotizador — estilos propios del módulo (usa los tokens de styles.css / theme.css) */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.area-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; }
.area-tag i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); flex-shrink: 0; }

.cot-grid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .cot-grid { grid-template-columns: 1fr; } }
.qty-input, .precio-input { width: 86px; text-align: right; padding: 6px 8px; }
.cot-totales { margin: 12px 0 0 auto; max-width: 280px; }
.cot-totales > div { display: flex; justify-content: space-between; padding: 3px 0; color: var(--gray-industrial); }
.cot-totales .gran { border-top: 2px solid var(--text-main); margin-top: 6px; padding-top: 8px; font-size: 18px; font-weight: 700; color: var(--text-main); }

.cot-timeline { list-style: none; margin: 0; padding: 0 0 0 6px; border-left: 2px solid var(--gray-border); }
.cot-timeline li { position: relative; padding: 0 0 12px 16px; }
.cot-timeline li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); border: 2px solid var(--white); }
.cot-timeline small { display: block; color: var(--text-muted); }

.tabs-area { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tab-area { border: 1px solid var(--gray-border); background: var(--white); border-left: 5px solid var(--c); padding: 8px 14px; border-radius: 6px; cursor: pointer; font: inherit; font-weight: 600; color: var(--text-main); }
.tab-area.on { background: var(--color-primary-light); border-color: var(--c); }

/* Hoja de vista previa / impresión */
.hoja { padding: 8px 6px; }
.hoja-enc { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid var(--color-primary); padding-bottom: 12px; margin-bottom: 14px; }
.hoja-empresa { font-size: 18px; color: var(--color-primary-dark); }
.hoja-folio { text-align: right; }
.hoja-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; font-size: 12.5px; }
.hoja-meta span { display: block; color: var(--text-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.hoja-obs { margin-top: 16px; }
.hoja-aviso { margin-top: 14px; padding: 8px 10px; background: var(--warning-bg); color: var(--warning); border-radius: 6px; font-size: 12px; }
.hoja-firmas { display: flex; justify-content: space-around; margin-top: 46px; font-size: 12px; color: var(--gray-industrial); text-align: center; }
.hoja-firmas > div { border-top: 1px solid var(--text-main); padding-top: 6px; min-width: 190px; }
@media (max-width: 700px) { .hoja-meta { grid-template-columns: 1fr 1fr; } }

@media print {
  .app-shell, .sidebar, .mobile-topbar, #toast-container, .no-print, .modal-close, .modal-header { display: none !important; }
  .modal-overlay { position: static !important; background: none !important; display: block !important; padding: 0 !important; }
  .modal { box-shadow: none !important; max-width: none !important; width: 100% !important; max-height: none !important; }
  .modal-body { overflow: visible !important; }
  body { background: #fff !important; }
}

/* Logo SEMT (imagen casi cuadrada: se limita la altura) */
.brand-logo img { width: auto; max-width: 100%; max-height: 130px; margin: 0 auto; }
.login-brand-column .login-logo { width: auto; max-width: 100%; max-height: 190px; margin: 0 auto; }
.hoja-logo { height: 84px; width: auto; display: block; }
.hoja-contacto { margin-top: 18px; font-size: 12.5px; line-height: 1.6; }
.hoja-pie { margin-top: 26px; padding-top: 10px; border-top: 3px solid var(--color-primary); text-align: center; font-size: 11px; color: var(--gray-industrial); }

/* Las tablas de la plantilla tienen ancho mínimo 900px; aquí caben en su tarjeta */
.hoja table, .cot-grid table, #cat-root table { min-width: 0; width: 100%; }
.hoja th, .hoja td { padding: 8px 10px; }

/* ==========================================================================
   Rediseño Módulo de Usuarios (Estilo SaaS Moderno y Ejecutivo)
   ========================================================================== */
.users-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.users-kpi-card {
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.users-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.07);
}
.users-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.users-kpi-icon svg { width: 22px; height: 22px; }
.users-kpi-info { display: flex; flex-direction: column; }
.users-kpi-val { font-size: 22px; font-weight: 700; color: var(--text-main); line-height: 1.1; }
.users-kpi-label { font-size: 12px; color: var(--text-muted); font-weight: 500; margin-top: 2px; }

/* Toolbar de Usuarios */
.users-toolbar-card {
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.users-search-wrapper {
  position: relative;
  flex: 1;
  min-width: 260px;
}
.users-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}
.users-search-input {
  width: 100%;
  padding: 9px 12px 9px 38px !important;
  border: 1px solid var(--gray-border) !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  background: #fdfdfe !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.users-search-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(43, 122, 158, 0.15) !important;
  background: #fff !important;
  outline: none;
}
.users-filters-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.users-select {
  padding: 8px 12px !important;
  border: 1px solid var(--gray-border) !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  font-size: 13px !important;
  color: var(--text-main) !important;
  font-weight: 500 !important;
  cursor: pointer;
}
.users-select:focus {
  border-color: var(--color-primary) !important;
  outline: none;
}

/* Tabla Estilizada */
.users-table-container {
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
}
.users-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}
.users-table th {
  background: #f8fafc;
  color: #475569;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 13px 18px;
  border-bottom: 1px solid #e2e8f0;
}
.users-table td {
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  font-size: 13px;
}
.users-table tbody tr {
  transition: background-color 0.12s ease;
}
.users-table tbody tr:hover {
  background-color: #f8fafc;
}
.users-table tbody tr:last-child td {
  border-bottom: none;
}

/* Celda de Usuario con Avatar */
.user-profile-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.user-avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e40af, #3b82f6);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.user-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.user-name-title {
  font-weight: 600;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.2;
}
.user-identifier-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
}
.user-puesto-tag {
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 1px;
}

/* Celda de Contacto */
.user-contact-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.user-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #334155;
  text-decoration: none;
}
.user-contact-item:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.user-contact-item svg {
  width: 14px;
  height: 14px;
  color: #94a3b8;
  flex-shrink: 0;
}

/* Badges de Roles */
.role-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
}
.role-badge-admin {
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
}
.role-badge-cotizador {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}
.role-badge-revisor {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}
.role-badge-aprobador {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.role-badge-default {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

/* Pill de Estado Activo/Inactivo Interactivo */
.status-pill-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  background: none;
}
.status-pill-toggle.is-active {
  background: #ecfdf5;
  color: #059669;
  border-color: #a7f3d0;
}
.status-pill-toggle.is-active:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
}
.status-pill-toggle.is-inactive {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}
.status-pill-toggle.is-inactive:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.status-pill-toggle.is-active .status-dot { background: #10b981; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); }
.status-pill-toggle.is-inactive .status-dot { background: #ef4444; }

/* Botones de Acción Elegantes */
.actions-btn-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.action-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.action-icon-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}
.action-icon-btn svg {
  width: 14px;
  height: 14px;
  color: #64748b;
}
.action-icon-btn.btn-delete:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}
.action-icon-btn.btn-delete:hover svg {
  color: #dc2626;
}

/* ==========================================================================
   Rediseño Editor de Roles y Permisos (RBAC Moderno)
   ========================================================================== */
.role-editor-wrap {
  max-height: 75vh;
  overflow-y: auto;
  padding: 4px 6px 16px 2px;
}
.role-identity-panel {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.role-field-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}
.role-field-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13.5px;
  background: #fff;
  transition: all 0.15s ease;
}
.role-field-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(43, 122, 158, 0.15);
  outline: none;
}
.role-perm-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}
.role-perm-section-title h3 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.perm-module-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  transition: border-color 0.15s ease;
}
.perm-module-header {
  background: #f8fafc;
  padding: 10px 16px;
  border-bottom: 1px solid #edf2f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.perm-module-name {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.perm-module-quick-btn {
  font-size: 11.5px;
  color: var(--color-primary);
  background: none;
  border: none;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.perm-module-quick-btn:hover {
  background: rgba(43, 122, 158, 0.1);
}
.perm-grid-body {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.perm-toggle-item {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  transition: all 0.15s ease;
  cursor: pointer;
}
.perm-toggle-item:hover {
  border-color: #cbd5e1;
  background: #fafbfc;
}
.perm-toggle-item.is-selected {
  border-color: #2b7a9e;
  background: #f0f7fa;
  box-shadow: 0 1px 3px rgba(43, 122, 158, 0.08);
}
.perm-checkbox-custom {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #2b7a9e;
}
.perm-text-info {
  flex: 1;
  min-width: 0;
}
.perm-text-title {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.25;
}
.perm-text-desc {
  font-size: 11.5px;
  color: #64748b;
  margin-top: 3px;
  line-height: 1.3;
}
.perm-scope-select {
  font-size: 11.5px;
  font-weight: 600;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.perm-scope-select:hover {
  background: #dbeafe;
}

/* ==========================================================================
   Tarjetas KPI Interactivas con Desglose de Sección
   ========================================================================== */
.kpi-interactive-card {
  cursor: pointer;
  border: 2px solid transparent !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
  user-select: none;
}
.kpi-interactive-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
}
.kpi-interactive-card.is-active-card {
  border-color: var(--color-primary) !important;
  box-shadow: 0 8px 24px rgba(43, 122, 158, 0.18) !important;
  background: #ffffff !important;
}
.kpi-drilldown-panel {
  background: #ffffff;
  border: 1px solid var(--gray-border);
  border-radius: 12px;
  box-shadow: 0 4px 20px -2px rgba(0,0,0,0.06);
  padding: 20px;
  margin-bottom: 24px;
  animation: fadeInDown 0.25s ease-out;
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.kpi-drilldown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 16px;
}
.kpi-drilldown-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kpi-drilldown-title h2 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.kpi-close-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}
.kpi-close-btn:hover {
  background: #f1f5f9;
  color: #334155;
}

/* ==========================================================================
   Ficha Flotante / Quick Preview de Cotización (Estilo Referencia Imagen 2)
   ========================================================================== */
.cot-quickview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.15s ease-out;
}
.cot-quickview-overlay.is-closing {
  opacity: 0;
  transition: opacity 0.12s ease-in;
}
.cot-quickview-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.22), 0 8px 18px -4px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 860px;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid #cbd5e1;
  animation: popIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.cot-quickview-header {
  padding: 18px 24px 14px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.cot-quickview-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cot-quickview-folio {
  font-size: 22px;
  font-weight: 800;
  color: #0284c7;
  letter-spacing: -0.02em;
}
.cot-quickview-cliente {
  font-size: 13px;
  color: #64748b;
  margin-top: 3px;
  font-weight: 500;
}
.cot-quickview-metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 14px 24px;
  background: #f8fafc;
  border-bottom: 1px solid #edf2f7;
}
.cot-metric-box {
  display: flex;
  flex-direction: column;
}
.cot-metric-lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.04em;
}
.cot-metric-val {
  font-size: 17px;
  font-weight: 800;
  color: #1e293b;
  margin-top: 2px;
}
.cot-metric-val.is-red {
  color: #dc2626 !important;
}
.cot-quickview-body {
  padding: 18px 24px;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 24px;
}
@media (max-width: 768px) {
  .cot-quickview-metrics { grid-template-columns: repeat(2, 1fr); }
  .cot-quickview-body { grid-template-columns: 1fr; }
}
.cot-section-subtitle {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: #475569;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cot-partidas-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.cot-partidas-mini-table th {
  background: #f8fafc;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 8px 6px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}
.cot-partidas-mini-table th.num, .cot-partidas-mini-table td.num {
  text-align: right;
}
.cot-partidas-mini-table td {
  padding: 10px 6px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}
.cot-partida-concepto {
  font-weight: 600;
  color: #1e293b;
  line-height: 1.25;
}
.cot-partida-desc {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}
.cot-datos-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12.5px;
  background: #fdfdfe;
  padding: 12px;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
}
.cot-dato-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.cot-dato-row span:first-child {
  color: #64748b;
  font-weight: 500;
  flex-shrink: 0;
}
.cot-dato-row span:last-child {
  color: #0f172a;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}
.cot-quickview-footer {
  padding: 14px 24px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 0 12px 12px;
}