/* ==========================================================================
   1. NEUTRALIZAÇÃO & DESIGN SYSTEM (VARIAVEIS GLOBAIS)
   ========================================================================== */
.ast-container, .ast-row, #content, #primary,
.site-content, .ast-article-single, .entry-content,
.ast-separate-container, .ast-page-builder-template,
#ast-content-area-wrap, .ast-content-area-inner,
.ast-layout-boxed, #content-area {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  display: block !important;
}
#secondary, .widget-area, .ast-right-sidebar, .ast-left-sidebar { display: none !important; width: 0 !important; }

*, *::before, *::after { box-sizing: border-box; }


:root {
  --bg-page: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-subtle: #F1F5F9;
  --border-color: #E2E8F0;
  --border-accent: #CBD5E1;
  --orange: #F26522;
  --orange-light: #FFF5F0;
  --orange-glow: rgba(242, 101, 34, 0.15);
  --orange-hover: #d85416;
  --green-accent: #10B981;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03);

  /* ZONAS DE CONEXÃO DO UNIFILAR */
  --color-zone1-bus: #DC2626;
  --color-zone1-line: #F87171;
  --color-zone2-bus: #2563EB;
  --color-zone2-line: #60A5FA;
  --color-zone3-bus: #10B981;
  --color-zone3-line: #34D399;
}

#calc-root,
#calc-root * {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  box-sizing: border-box !important;
}

#calc-root {
  background: var(--bg-page);
  color: var(--text-primary);
  min-height: 100vh;
  padding: 40px 24px 80px;
  line-height: normal;
}

/* O tema/plugins do site aplicam estilo global a <button> com especificidade maior que
   uma única classe (ex.: cor/fundo de botão do Astra/Elementor), atropelando o visual dos
   botões da calculadora. Reforça cada um com !important para garantir a cor pretendida. */
#calc-root .main-tab-btn {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: none !important;
}
#calc-root .main-tab-btn.active {
  background: var(--orange) !important;
  color: #FFFFFF !important;
}
#calc-root .main-tab-btn:hover:not(.active) {
  background: var(--bg-subtle) !important;
  color: var(--text-primary) !important;
}
#calc-root .btn-remove-load {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  color: #EF4444 !important;
}
#calc-root .btn-remove-load:hover {
  background: #EF4444 !important;
  color: #FFFFFF !important;
}
#calc-root .btn-add-load-row {
  background: #FFFFFF !important;
  border: 1px dashed var(--border-accent) !important;
  color: var(--text-secondary) !important;
}
#calc-root .btn-add-load-row:hover {
  border-color: var(--orange) !important;
  color: var(--orange) !important;
  background: rgba(242, 101, 34, 0.04) !important;
}
#calc-root .btn-lc-toggle.type-ind {
  background: rgba(37, 99, 235, 0.08) !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
  color: #2563EB !important;
}
#calc-root .btn-lc-toggle.type-ind:hover {
  background: #2563EB !important;
  color: #FFFFFF !important;
}
#calc-root .btn-lc-toggle.type-cap {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  color: #10B981 !important;
}
#calc-root .btn-lc-toggle.type-cap:hover {
  background: #10B981 !important;
  color: #FFFFFF !important;
}
#calc-root .btn-submit-lead {
  background: var(--orange) !important;
  color: #FFF !important;
  border: none !important;
}
#calc-root .btn-submit-lead:hover { background: var(--orange-hover) !important; }
#calc-root .whatsapp-link-btn {
  background: #10B981 !important;
  color: #FFF !important;
}
#calc-root .whatsapp-link-btn:hover { background: #059669 !important; }

/* Alguns plugins do site forçam "span { display:block !important }" globalmente,
   quebrando spans genéricos usados aqui como divisores/labels. Reforça com classe própria. */
#calc-root .calc-header-divider {
  display: inline-block !important;
  width: 1px !important;
  height: 20px !important;
  min-width: 1px !important;
  background: var(--border-color) !important;
  margin: 0 2px !important;
  flex-shrink: 0 !important;
}
#calc-root .u-col-divider {
  display: inline-block !important;
  width: 1px !important;
  min-width: 1px !important;
}
#calc-root .btn-xlsx-action span {
  display: inline !important;
}

/* ==========================================================================
   2. HEADER & NAVEGAÇÃO POR ABAS
   ========================================================================== */
.calc-header {
  max-width: 980px;
  margin: 0 auto 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}
.calc-title-group h1 {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--text-primary) !important;
  letter-spacing: -0.02em;
}
.calc-title-group h1 span { color: var(--orange) !important; }
.calc-title-group p {
  font-size: 14px;
  color: var(--text-secondary) !important;
  margin: 0;
}
.calc-badge-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.tech-badge {
  background: var(--orange-light);
  border: 1px solid rgba(242, 101, 34, 0.3);
  color: var(--orange) !important;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.main-tabs-wrapper {
  width: 100%;
  padding: 0 16px;
  margin-bottom: 24px;
}
.main-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto;
  max-width: 900px;
  background: #FFFFFF;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.main-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}
.main-tab-btn .tab-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
}
.main-tab-btn.active {
  background: var(--orange);
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(242, 101, 34, 0.3);
}
.main-tab-btn.active .tab-num {
  background: #FFFFFF;
  color: var(--orange);
}
.main-tab-btn:hover:not(.active) {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.calc-grid {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: stretch;
}


/* ==========================================================================
   3. ABA 1 - TABELA DE CARGAS & SELETORES
   ========================================================================== */

.load-lists-card {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.u-load-category-block {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}
.u-load-category-block:last-child {
  margin-bottom: 0;
}

.u-load-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-primary);
}
.u-load-cat-header strong {
  font-weight: 700;
}

.u-load-table-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  margin-top: 8px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--border-accent);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.u-load-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.u-input-item-name,
.u-input-item-num {
  background: #FFFFFF !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  color: var(--text-primary) !important;
  outline: none !important;
}
.u-input-item-name { flex: 2; padding: 8px 12px !important; }
.u-input-item-num {
  padding: 8px 6px !important;
  font-family: 'JetBrains Mono', monospace !important;
  text-align: right !important;
  flex-shrink: 0 !important;
  -moz-appearance: textfield !important;
}
.u-input-item-num::-webkit-outer-spin-button,
.u-input-item-num::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.u-input-item-name:focus,
.u-input-item-num:focus {
  border-color: var(--orange) !important;
}


.u-select-item-type {
  background: #FFFFFF !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 8px !important;
  font-size: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--text-primary) !important;
  outline: none !important;
  cursor: pointer !important;
}

.btn-remove-load {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #EF4444;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.btn-remove-load:hover {
  background: #EF4444;
  color: #FFFFFF;
}

.btn-add-load-row {
  width: 100%;
  margin-top: 6px;
  background: #FFFFFF;
  border: 1px dashed var(--border-accent);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-add-load-row:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(242, 101, 34, 0.04);
}

.u-load-category-total-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 6px 0;
  margin-top: 10px;
  margin-bottom: 8px;
  border-top: 2px solid var(--border-color);
}

.btn-lc-toggle {
  width: 75px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-accent);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s ease;
}
.btn-lc-toggle.type-ind {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.3);
  color: #2563EB;
}
.btn-lc-toggle.type-ind:hover {
  background: #2563EB;
  color: #FFFFFF;
}
.btn-lc-toggle.type-cap {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
  color: #10B981;
}
.btn-lc-toggle.type-cap:hover {
  background: #10B981;
  color: #FFFFFF;
}

/* Colunas de largura fixa reutilizadas nas linhas de carga (substituem style="" inline repetido no JS) */
.u-col-name { flex: 1; min-width: 140px; }
.u-col-70 { width: 70px !important; flex-shrink: 0; }
.u-col-50 { width: 50px !important; flex-shrink: 0; display: inline-block; }
.u-col-28 { width: 28px; flex-shrink: 0; }
.u-col-divider { width: 1px; height: 16px; background: var(--border-color); margin: 0 4px; display: inline-block; flex-shrink: 0; }
.btn-lc-toggle-sm { width: 50px !important; padding: 4px 2px; flex-shrink: 0; }

.kvar-val-span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  width: 70px;
  text-align: right;
  flex-shrink: 0;
}
.input-inrush-opt {
  width: 50px !important;
  text-align: center !important;
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  border-style: dashed;
  opacity: 0.9;
  flex-shrink: 0;
}
.select-etapa-opt {
  width: 50px !important;
  font-size: 11px;
  border-style: dashed;
  opacity: 0.85;
  padding: 3px 2px;
  flex-shrink: 0;
}

.dot-c0 { width: 8px; height: 8px; border-radius: 50%; background: #64748B; }
.dot-c1 { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.dot-c2 { width: 8px; height: 8px; border-radius: 50%; background: #DC2626; }

/* ==========================================================================
   5. ABA 2 - DIAGRAMA UNIFILAR ESQUEMÁTICO & SVG
   ========================================================================== */
.diagram-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
  box-shadow: var(--shadow-card);
  width: 100%;
}

.diagram-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}
.diagram-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary) !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.diagram-status-dot {
  width: 9px;
  height: 9px;
  background: var(--green-accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--green-accent);
}

.unifilar-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: relative;
}

.u-line { display: none !important; }
.u-line.zone-1 { background: var(--color-zone1-line) !important; opacity: 0.85; }
.u-line.zone-2 { background: var(--color-zone2-line) !important; opacity: 0.85; }
.u-line.zone-3 { background: var(--color-zone3-line) !important; opacity: 0.85; }

.u-busbar {
  width: 100%;
  height: 6px;
  background: #94A3B8;
  border-radius: 3px;
  position: relative;
  margin: 0;
  transition: all 0.3s;
  flex-shrink: 0;
}
.u-busbar.active {
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange-glow);
}
.u-busbar.zone-1 { background: var(--color-zone1-bus) !important; box-shadow: 0 0 12px rgba(220, 38, 38, 0.4) !important; }
.u-busbar.zone-2 { background: var(--color-zone2-bus) !important; box-shadow: 0 0 12px rgba(37, 99, 235, 0.4) !important; }
.u-busbar.zone-3 { background: var(--color-zone3-bus) !important; box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important; }

.u-busbar-label {
  position: absolute;
  right: 4px;
  top: -16px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
}

.u-pill-select {
  background: #FFFFFF !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  cursor: pointer !important;
  outline: none !important;
  height: 24px !important;
  line-height: 1 !important;
  transition: all 0.2s !important;
}
.u-pill-select:hover, .u-pill-select:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 2px var(--orange-glow) !important;
}

.u-pill-input {
  background: #FFFFFF !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  width: 44px !important;
  height: 24px !important;
  text-align: center !important;
  outline: none !important;
  cursor: text !important;
  transition: all 0.2s !important;
  -moz-appearance: textfield !important;
}
.u-pill-input::-webkit-outer-spin-button,
.u-pill-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.u-pill-input:hover, .u-pill-input:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 2px var(--orange-glow) !important;
}

/* ==========================================================================
   6. ABA 3 - RESUMO DOS EQUIPAMENTOS & COTAÇÃO
   ========================================================================== */
.u-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}
.u-spec-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: 2px;
  letter-spacing: 0.03em;
}
.u-spec-val {
  font-weight: 800;
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary);
}
.u-card-footer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px dashed var(--border-color);
  padding-top: 12px;
  margin-top: 8px;
}
.u-obs-input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 12px;
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
}
.u-cotar-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--orange);
  cursor: pointer;
  background: #FFFFFF;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  user-select: none;
  transition: border-color 0.2s;
}
.u-cotar-badge:hover {
  border-color: var(--orange);
}

.resumo-card {
  background: #FFFFFF;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}
.resumo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.resumo-table th {
  text-align: left;
  color: var(--text-muted);
  font-size: 11px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}
.resumo-table td {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}
.resumo-table tr:last-child td { border-bottom: none; }
.resumo-val {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--orange);
}
.resumo-val-inrush {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
}

.btn-submit-lead {
  width: 100%;
  background: var(--orange);
  color: #FFF;
  border: none;
  padding: 14px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-submit-lead:hover { background: var(--orange-hover); }

.whatsapp-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #10B981;
  color: #FFF !important;
  text-decoration: none;
  padding: 14px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  transition: background 0.2s;
}
.whatsapp-link-btn:hover { background: #059669; }

/* ==========================================================================
   7. NAVEGAÇÃO DE RODAPÉ & CLASSES DE UTILIDADES/ALERTAS
   ========================================================================== */
.tab-footer-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
  width: 100%;
}
.btn-next-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #F26522 !important;
  background: linear-gradient(135deg, #F26522 0%, #d85416 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 13px 26px !important;
  border-radius: var(--radius-md) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(242, 101, 34, 0.28) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
}
.btn-next-tab:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(242, 101, 34, 0.38) !important;
  background: linear-gradient(135deg, #f57333 0%, #ca4b10 100%) !important;
}
.btn-prev-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #FFFFFF !important;
  color: #475569 !important;
  border: 1.5px solid var(--border-color) !important;
  padding: 13px 22px !important;
  border-radius: var(--radius-md) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}
.btn-prev-tab:hover {
  background: var(--bg-subtle) !important;
  color: #0F172A !important;
  border-color: var(--border-accent) !important;
  transform: translateY(-1px) !important;
}

.input-error-warning {
  border-color: #EF4444 !important;
  background-color: rgba(254, 242, 242, 0.9) !important;
  color: #DC2626 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}

.badge-class-012 {
  background: rgba(37, 99, 235, 0.1);
  color: #2563EB;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.badge-class-12 {
  background: rgba(249, 115, 22, 0.1);
  color: var(--orange);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.badge-class-2 {
  background: rgba(220, 38, 38, 0.1);
  color: #DC2626;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
}

/* ==========================================================================
   8. IMPRESSÃO / EXPORTAR RESUMO EM PDF (window.print())
   ========================================================================== */
@media print {
  body * { visibility: hidden; }
  #mtab_cotacao, #mtab_cotacao * { visibility: visible; }
  #mtab_cotacao {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 100% !important;
    padding: 0 !important;
  }
  #gate-section, #whatsapp-cta-section, #resultado_final, .tab-footer-nav, .btn-xlsx-action, #btn-exportar-pdf {
    display: none !important;
  }
}