:root{
  --bg:#070b14;--panel:#0d1424;--panel2:#111b2f;--muted:#8ea0bd;--text:#eef4ff;
  --line:rgba(255,255,255,.09);--gold:#d6a849;--blue:#4aa3ff;--green:#37d18b;--red:#ff6b7a;--amber:#ffbe55;
  --shadow:0 24px 90px rgba(0,0,0,.45);--radius:20px;
}
*{box-sizing:border-box} body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at 20% 0%,rgba(214,168,73,.16),transparent 34%),radial-gradient(circle at 78% 12%,rgba(74,163,255,.13),transparent 28%),var(--bg);color:var(--text)}
button,input,select{font:inherit} a{color:inherit}.app{display:grid;grid-template-columns:300px 1fr;min-height:100vh}.sidebar{border-right:1px solid var(--line);background:rgba(7,11,20,.82);backdrop-filter:blur(18px);padding:22px;position:sticky;top:0;height:100vh;overflow:auto}.brand{display:flex;gap:14px;align-items:center;margin-bottom:24px}.helm{width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,var(--gold),#7f5b12);display:grid;place-items:center;font-weight:900;color:#070b14;box-shadow:0 0 45px rgba(214,168,73,.28)}.brand b{font-size:18px;letter-spacing:.12em}.brand small{display:block;color:var(--muted);margin-top:3px}.context{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid var(--line);border-radius:18px;padding:14px;margin-bottom:18px}.context label{display:block;font-size:12px;color:var(--muted);margin-bottom:7px}.context select,.context input{width:100%;background:#0a1020;border:1px solid var(--line);border-radius:12px;color:var(--text);padding:10px;margin-bottom:10px}.nav-title{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin:20px 0 8px}.nav button{width:100%;display:flex;align-items:center;gap:11px;padding:12px;border:0;background:transparent;color:#cbd7ee;border-radius:14px;cursor:pointer;text-align:left}.nav button:hover,.nav button.active{background:rgba(214,168,73,.12);color:#fff}.ico{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;background:rgba(74,163,255,.13)}.main{padding:26px 30px 50px}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px}.eyebrow{color:var(--gold);font-size:12px;text-transform:uppercase;letter-spacing:.18em;font-weight:700}.title{font-size:34px;margin:6px 0 4px}.subtitle{color:var(--muted);max-width:850px;line-height:1.55}.statusbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.badge{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:7px 10px;font-size:12px;border:1px solid var(--line);background:rgba(255,255,255,.045)}.badge.ok{color:var(--green);border-color:rgba(55,209,139,.22)}.badge.warn{color:var(--amber);border-color:rgba(255,190,85,.22)}.badge.bad{color:var(--red);border-color:rgba(255,107,122,.22)}.grid{display:grid;gap:16px}.grid.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.two{grid-template-columns:1.1fr .9fr}.card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}.card h3{margin:0 0 12px;font-size:17px}.metric .label{color:var(--muted);font-size:13px}.metric .value{font-size:29px;font-weight:800;margin:8px 0}.metric .note{color:var(--muted);font-size:12px}.table-wrap{overflow:auto;border-radius:16px;border:1px solid var(--line)}table{width:100%;border-collapse:collapse;min-width:760px;background:rgba(6,10,18,.35)}th,td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}th{color:var(--muted);font-weight:700;background:rgba(255,255,255,.035)}tr:last-child td{border-bottom:0}.stepper{display:grid;grid-template-columns:repeat(11,minmax(130px,1fr));gap:12px;overflow:auto;padding-bottom:8px}.step{min-height:142px;border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(255,255,255,.035);position:relative}.step:before{content:"";position:absolute;left:14px;top:14px;width:12px;height:12px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 6px rgba(142,160,189,.12)}.step.done:before{background:var(--green)}.step.attention:before{background:var(--amber)}.step.pending:before{background:var(--muted)}.step strong{display:block;margin-top:25px;line-height:1.25}.step small{display:block;color:var(--muted);margin-top:10px}.actions{display:flex;gap:10px;flex-wrap:wrap}.btn{border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);border-radius:12px;padding:10px 13px;cursor:pointer}.btn.primary{background:linear-gradient(135deg,var(--gold),#916914);border-color:rgba(214,168,73,.5);color:#080b11;font-weight:800}.btn:hover{filter:brightness(1.1)}.empty{border:1px dashed rgba(255,255,255,.18);border-radius:18px;padding:28px;text-align:center;color:var(--muted)}.form{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.form label{font-size:12px;color:var(--muted)}.form input,.form select{width:100%;margin-top:7px;background:#0a1020;border:1px solid var(--line);border-radius:12px;color:var(--text);padding:11px}.secret{letter-spacing:.18em;color:var(--muted)}.footer-note{margin-top:18px;color:var(--muted);font-size:12px}.pillrow{display:flex;gap:8px;flex-wrap:wrap}.split{display:flex;justify-content:space-between;gap:14px;align-items:center}.hide{display:none!important}@media(max-width:1100px){.app{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.grid.cards{grid-template-columns:repeat(2,1fr)}.grid.two{grid-template-columns:1fr}.topbar{display:block}}@media(max-width:680px){.grid.cards,.form{grid-template-columns:1fr}.main{padding:18px}.title{font-size:26px}}

/* Ajuste para caminhos longos da infraestrutura */
.metric .value.small,
.metric .value {
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

.card.metric {
  overflow: hidden;
}

.table-wrap {
  overflow-x: auto;
}

/* =========================================================
   Correção visual: paths longos, cards e textos estourando
   ========================================================= */

.card,
.card.metric {
  min-width: 0;
  overflow: hidden;
}

.metric .value {
  max-width: 100%;
  line-height: 1.12;
}

.metric .value.small,
.card.metric .value.small {
  font-size: clamp(15px, 1.15vw, 21px) !important;
  line-height: 1.2 !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.card.metric .label,
.card.metric .note {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.card.metric .note {
  font-size: 12px;
  line-height: 1.35;
}

/* Cards de métrica com conteúdo técnico */
.grid.cards .card.metric {
  min-height: 132px;
  max-height: 190px;
}

/* Paths dentro de steps */
.step small {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
  font-size: 12px;
}

/* Stepper mais comportado */
.stepper {
  gap: 12px;
  align-items: stretch;
}

.step {
  min-width: 120px;
  max-width: 180px;
  overflow: hidden;
}

.step strong {
  display: block;
  line-height: 1.2;
  margin-bottom: 8px;
}

/* Tabelas sem quebrar o layout */
.table-wrap {
  width: 100%;
  overflow-x: auto;
}

table {
  min-width: 900px;
}

td,
th {
  white-space: nowrap;
}

td:nth-child(2),
td:nth-child(3) {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Em telas menores, reduzir cards */
@media (max-width: 1400px) {
  .metric .value {
    font-size: 26px;
  }

  .metric .value.small,
  .card.metric .value.small {
    font-size: 15px !important;
  }

  .grid.cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .grid.cards,
  .grid.two {
    grid-template-columns: 1fr !important;
  }

  .step {
    max-width: 100%;
  }
}

.clean-list {
  margin: 10px 0 0;
  padding-left: 22px;
  color: var(--muted);
  line-height: 1.7;
}

.badge.warn {
  border-color: rgba(245, 158, 11, .35);
  color: #fbbf24;
  background: rgba(245, 158, 11, .08);
}

.badge.bad {
  border-color: rgba(239, 68, 68, .35);
  color: #fca5a5;
  background: rgba(239, 68, 68, .08);
}

td {
  vertical-align: top;
}

td:nth-child(7) {
  max-width: 420px;
  white-space: normal;
  line-height: 1.35;
}

/* Mapeamento gerencial */
td:nth-child(5),
td:nth-child(6) {
  max-width: 520px;
  white-space: normal;
  line-height: 1.35;
}

code {
  display: inline-block;
  padding: 4px 7px;
  border-radius: 8px;
  background: rgba(15, 23, 42, .65);
  border: 1px solid rgba(148, 163, 184, .18);
  color: #bfdbfe;
  font-size: 12px;
}

.map-input {
  width: 100%;
  min-width: 160px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, .25);
  background: rgba(15, 23, 42, .65);
  color: #e5f0ff;
  outline: none;
}

.map-input:focus {
  border-color: rgba(34, 211, 238, .55);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .08);
}

.map-input.wide {
  min-width: 360px;
}

.map-input.full {
  margin: 6px 0 12px;
}

.field-label {
  display: block;
  color: #93c5fd;
  font-size: 12px;
  margin-top: 8px;
}

.action-btn,
.mini-btn {
  border: 1px solid rgba(16, 185, 129, .35);
  background: rgba(16, 185, 129, .10);
  color: #34d399;
  padding: 9px 13px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
}

.action-btn.secondary,
.mini-btn.secondary {
  border-color: rgba(96, 165, 250, .35);
  background: rgba(96, 165, 250, .10);
  color: #93c5fd;
}

.action-btn.danger,
.mini-btn.danger {
  border-color: rgba(239, 68, 68, .35);
  background: rgba(239, 68, 68, .10);
  color: #fca5a5;
}

.action-btn:hover,
.mini-btn:hover {
  filter: brightness(1.15);
}

td input.map-input {
  font-size: 12px;
}

td:nth-child(3) input.map-input {
  min-width: 420px;
}

.field-hint {
  margin-top: 5px;
  font-size: 11px;
  color: #fbbf24;
  line-height: 1.3;
}

select.map-input {
  appearance: auto;
}

/* Preview visual estilo Excel com camada de vidro */
.excel-preview-shell {
  margin-top: 12px;
  border: 1px solid rgba(148, 163, 184, .20);
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, .10), transparent 35%),
    rgba(15, 23, 42, .45);
}

.excel-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, .16);
  background: rgba(15, 23, 42, .55);
}

.excel-toolbar strong {
  display: block;
  color: #e5f0ff;
}

.excel-toolbar small {
  display: block;
  color: #93a4bd;
  margin-top: 3px;
}

.excel-toolbar-right {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.excel-toolbar-right span {
  border: 1px solid rgba(16, 185, 129, .28);
  color: #34d399;
  background: rgba(16, 185, 129, .08);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
}

.excel-preview-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.excel-preview-table {
  min-width: 1100px;
  width: max-content;
  border-collapse: separate;
  border-spacing: 0;
}

.excel-preview-table th,
.excel-preview-table td {
  min-width: 145px;
  max-width: 220px;
  padding: 9px 10px;
  border-right: 1px solid rgba(148, 163, 184, .12);
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.excel-preview-table th {
  position: relative;
  background: rgba(15, 23, 42, .88);
  color: #bfdbfe;
  vertical-align: top;
}

.excel-preview-table td {
  color: #dbeafe;
  background: rgba(2, 6, 23, .32);
}

.excel-preview-table th.excel-mapped {
  background:
    linear-gradient(135deg, rgba(34, 211, 238, .24), rgba(16, 185, 129, .15)),
    rgba(15, 23, 42, .86);
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .25);
}

.excel-preview-table td.excel-mapped-cell {
  background:
    linear-gradient(135deg, rgba(34, 211, 238, .13), rgba(16, 185, 129, .08)),
    rgba(2, 6, 23, .38);
  box-shadow: inset 0 0 18px rgba(34, 211, 238, .04);
}

.excel-col-name {
  font-weight: 800;
  margin-bottom: 7px;
}

.glass-chip {
  display: inline-block;
  max-width: 190px;
  padding: 4px 7px;
  border-radius: 999px;
  color: #99f6e4;
  background: rgba(20, 184, 166, .12);
  border: 1px solid rgba(45, 212, 191, .28);
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.glass-chip.muted {
  color: #64748b;
  background: rgba(100, 116, 139, .08);
  border-color: rgba(100, 116, 139, .18);
}

.mapping-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid rgba(148, 163, 184, .16);
}

.mapping-token {
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 6px 9px;
  color: #d1fae5;
  background: rgba(16, 185, 129, .10);
  border: 1px solid rgba(16, 185, 129, .22);
}

.mapping-token.muted {
  color: #94a3b8;
  background: rgba(148, 163, 184, .08);
  border-color: rgba(148, 163, 184, .18);
}

/* Cores distintas por coluna mapeada - tons fracos */
.excel-preview-table th.map-color-0,
.excel-preview-table td.map-color-0,
.glass-chip.map-color-0,
.mapping-token.map-color-0 {
  --map-rgb: 34, 211, 238;
}

.excel-preview-table th.map-color-1,
.excel-preview-table td.map-color-1,
.glass-chip.map-color-1,
.mapping-token.map-color-1 {
  --map-rgb: 16, 185, 129;
}

.excel-preview-table th.map-color-2,
.excel-preview-table td.map-color-2,
.glass-chip.map-color-2,
.mapping-token.map-color-2 {
  --map-rgb: 168, 85, 247;
}

.excel-preview-table th.map-color-3,
.excel-preview-table td.map-color-3,
.glass-chip.map-color-3,
.mapping-token.map-color-3 {
  --map-rgb: 245, 158, 11;
}

.excel-preview-table th.map-color-4,
.excel-preview-table td.map-color-4,
.glass-chip.map-color-4,
.mapping-token.map-color-4 {
  --map-rgb: 244, 114, 182;
}

.excel-preview-table th.map-color-5,
.excel-preview-table td.map-color-5,
.glass-chip.map-color-5,
.mapping-token.map-color-5 {
  --map-rgb: 96, 165, 250;
}

.excel-preview-table th.map-color-6,
.excel-preview-table td.map-color-6,
.glass-chip.map-color-6,
.mapping-token.map-color-6 {
  --map-rgb: 132, 204, 22;
}

.excel-preview-table th.map-color-7,
.excel-preview-table td.map-color-7,
.glass-chip.map-color-7,
.mapping-token.map-color-7 {
  --map-rgb: 251, 113, 133;
}

.excel-preview-table th.map-color-8,
.excel-preview-table td.map-color-8,
.glass-chip.map-color-8,
.mapping-token.map-color-8 {
  --map-rgb: 45, 212, 191;
}

.excel-preview-table th.map-color-9,
.excel-preview-table td.map-color-9,
.glass-chip.map-color-9,
.mapping-token.map-color-9 {
  --map-rgb: 250, 204, 21;
}

.excel-preview-table th.map-color-10,
.excel-preview-table td.map-color-10,
.glass-chip.map-color-10,
.mapping-token.map-color-10 {
  --map-rgb: 129, 140, 248;
}

.excel-preview-table th.map-color-11,
.excel-preview-table td.map-color-11,
.glass-chip.map-color-11,
.mapping-token.map-color-11 {
  --map-rgb: 52, 211, 153;
}

/* Aplicação da pele de vidro usando a cor da coluna */
.excel-preview-table th.excel-mapped[class*="map-color-"] {
  background:
    linear-gradient(135deg, rgba(var(--map-rgb), .22), rgba(var(--map-rgb), .07)),
    rgba(15, 23, 42, .86) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--map-rgb), .32),
    inset 0 -18px 35px rgba(var(--map-rgb), .06);
}

.excel-preview-table td.excel-mapped-cell[class*="map-color-"] {
  background:
    linear-gradient(135deg, rgba(var(--map-rgb), .13), rgba(var(--map-rgb), .04)),
    rgba(2, 6, 23, .38) !important;
  box-shadow: inset 0 0 18px rgba(var(--map-rgb), .06);
}

.glass-chip[class*="map-color-"] {
  color: rgb(var(--map-rgb));
  background: rgba(var(--map-rgb), .12);
  border-color: rgba(var(--map-rgb), .30);
}

.mapping-token[class*="map-color-"] {
  color: rgb(var(--map-rgb));
  background: rgba(var(--map-rgb), .10);
  border-color: rgba(var(--map-rgb), .28);
}

/* Evita que a cor antiga única sobreponha as novas */
.excel-preview-table th.excel-mapped {
  background: rgba(15, 23, 42, .86);
}

.excel-preview-table td.excel-mapped-cell {
  background: rgba(2, 6, 23, .38);
}

.mini-btn.selected {
  background: rgba(34, 211, 238, .16);
  border-color: rgba(34, 211, 238, .55);
  color: #67e8f9;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .08);
}

.selected-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 999px;
  background: #22d3ee;
  box-shadow: 0 0 12px rgba(34, 211, 238, .75);
}

.editor-active {
  border-color: rgba(34, 211, 238, .32) !important;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, .08), 0 0 35px rgba(34, 211, 238, .05);
}

/* Banco do Tenant */
td:nth-child(4),
td:nth-child(6) {
  max-width: 520px;
  white-space: normal;
  line-height: 1.35;
}

.card .subtitle strong {
  color: #dbeafe;
}