/* ============================================================
   WORKSTATION CRIATOR — builder.css
   Criador de Tabelas (criador.html) e Gerenciamento (gerenciamento.html):
   lista de módulos, passos, painel de colunas, abas e cards de config.
   ============================================================ */

.builder-grid{display:flex;gap:16px;align-items:flex-start;}
.builder-left{flex:0 0 320px;min-width:0;}
.builder-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px;}

.module-list{display:flex;flex-direction:column;gap:2px;margin-top:12px;max-height:420px;overflow-y:auto;overflow-x:hidden;}
.module-row{display:flex;align-items:flex-start;gap:10px;padding:10px;border-radius:var(--radius-sm);border:1px solid transparent;transition:background var(--dur-fast) var(--ease);cursor:pointer;}
.module-row:hover{background:var(--gray-25);}
.module-row:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.module-row.active{background:var(--blue-50);border-color:var(--blue-100);}
.module-row .mi{width:28px;height:28px;border-radius:var(--radius-sm);background:var(--gray-50);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gray-600);margin-top:1px;}
.module-row.active .mi{background:#fff;color:var(--blue-600);}
.module-row .mi svg{width:14px;height:14px;}
.module-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.module-row-text b{font-size:var(--text-sm);color:var(--gray-800);font-weight:600;line-height:1.3;}
.module-row.active .module-row-text b{color:var(--blue-700);}
.module-row .lock-sm{width:13px;height:13px;color:var(--gray-300);flex-shrink:0;margin-top:3px;}
.module-row .tag-pill{align-self:flex-start;}

.steps-card{display:flex;align-items:center;background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-xs);gap:8px;}
.step{display:flex;align-items:center;gap:12px;flex:1;min-width:0;}
.step-icon{width:40px;height:40px;border-radius:var(--radius-md);background:var(--blue-50);color:var(--blue-600);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.step-icon svg{width:19px;height:19px;}
.step-text b{display:block;font-size:var(--text-sm);color:var(--gray-900);font-weight:700;}
.step-text span{display:block;font-size:var(--text-xs);color:var(--gray-500);margin-top:2px;line-height:1.4;}
.step-arrow{width:24px;display:flex;align-items:center;justify-content:center;color:var(--gray-300);flex-shrink:0;}
.step-arrow svg{width:16px;height:16px;}

.panel-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.panel-title .mi-lg{width:36px;height:36px;border-radius:var(--radius-md);background:var(--blue-50);color:var(--blue-600);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.panel-title .mi-lg svg{width:18px;height:18px;}
.panel-title h2{margin:0;font-size:var(--text-xl);font-weight:700;color:var(--gray-900);letter-spacing:-.02em;}
.panel-sub{font-size:var(--text-xs);color:var(--gray-500);margin:8px 0 16px;}
.header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;}

/* Botões de reordenar coluna (▲▼) — mínimos, sem contorno */
.ord-btns{display:inline-flex;flex-direction:column;gap:1px;vertical-align:middle;margin-right:8px;}
.ord-btn{width:18px;height:14px;border:none;background:transparent;color:var(--gray-400);border-radius:var(--radius-xs);padding:0;display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);}
.ord-btn svg{width:11px;height:11px;}
.ord-btn:hover:not([disabled]){background:var(--blue-50);color:var(--blue-600);}
.ord-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--blue-500);position:relative;z-index:1;}
.ord-btn[disabled]{opacity:.35;cursor:not-allowed;}

.add-row-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border-radius:var(--radius-sm);border:1px dashed var(--gray-300);background:#fff;color:var(--gray-600);font-size:var(--text-sm);font-weight:600;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);}
.add-row-btn:hover{border-color:var(--blue-500);color:var(--blue-600);background:var(--blue-50);}
.add-row-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-color:var(--blue-500);}
.add-row-btn svg{width:16px;height:16px;}

.small-pill{font-size:var(--text-2xs);font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);letter-spacing:.01em;}
.pill-you{color:var(--green-600);background:var(--green-50);}
.pill-other{color:var(--gray-500);background:var(--gray-100);}

.bottom-3{display:flex;gap:16px;align-items:stretch;flex-wrap:wrap;}
.bottom-3>.card{flex:1;min-width:260px;display:flex;flex-direction:column;}

.config-item{display:flex;gap:12px;margin-bottom:16px;}
.config-item:last-child{margin-bottom:0;}
.config-item .ci-icon{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--gray-50);color:var(--gray-500);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.config-item .ci-icon svg{width:15px;height:15px;}
.config-item b{display:block;font-size:var(--text-xs);color:var(--gray-500);font-weight:600;}
.config-item span{display:block;font-size:var(--text-sm);color:var(--gray-800);margin-top:2px;}

/* Cards de atalho — brancos, com filete de accent à esquerda (verde/azul só como marca fina) */
.card.visao-card,.card.visao-card-blue{background:#fff;border:1px solid var(--gray-100);display:flex;flex-direction:column;gap:16px;justify-content:space-between;}
.card.visao-card{border-left:3px solid var(--green-600);}
.card.visao-card-blue{border-left:3px solid var(--blue-600);}
.card.visao-card > a,.card.visao-card-blue > a{margin-top:auto;align-self:flex-start;}

.tabs{display:flex;gap:24px;}
.tab{padding:12px 2px;font-size:var(--text-sm);font-weight:600;color:var(--gray-500);border-bottom:2px solid transparent;cursor:pointer;transition:color var(--dur-fast) var(--ease);margin-bottom:-1px;}
.tab.active{color:var(--blue-600);border-bottom-color:var(--blue-600);}
.tab:hover:not(.active){color:var(--gray-700);}

.entity-card{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:16px;}
.entity-left{display:flex;align-items:center;gap:14px;}
.entity-icon{width:48px;height:48px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.entity-icon svg{width:22px;height:22px;}
.entity-left h2{margin:0;font-size:var(--text-xl);font-weight:700;color:var(--gray-900);letter-spacing:-.01em;}
.entity-left p{margin:4px 0 0;font-size:var(--text-xs);color:var(--gray-500);}
.stat-row{display:flex;gap:10px;flex-wrap:wrap;}
.stat-chip{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-md);background:var(--gray-25);border:1px solid var(--gray-100);}
.stat-chip .si{width:32px;height:32px;border-radius:var(--radius-sm);background:#fff;border:1px solid var(--gray-100);display:flex;align-items:center;justify-content:center;color:var(--blue-600);flex-shrink:0;}
.stat-chip .si svg{width:15px;height:15px;}
.stat-chip b{display:block;font-size:var(--text-lg);color:var(--gray-900);line-height:1.1;font-variant-numeric:tabular-nums;}
.stat-chip span{display:block;font-size:var(--text-2xs);color:var(--gray-500);margin-top:2px;}