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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #fff; color: #111; line-height: 1.5;
  max-width: 1060px; margin: 0 auto; padding: 1.5rem 2rem;
}

body:not(.authenticated):not(.admin-authenticated) header,
body:not(.authenticated):not(.admin-authenticated) .agent-console,
body:not(.authenticated):not(.admin-authenticated) .page:not(#page-auth):not(#page-admin) {
  display: none !important;
}

body.authenticated #page-auth {
  display: none;
}

body.authenticated #page-admin-auth {
  display: none;
}

body.admin-authenticated header,
body.admin-authenticated .agent-console {
  display: none !important;
}

body.admin-authenticated #page-auth,
body.admin-authenticated #page-admin-auth {
  display: none;
}

body.admin-authenticated .page:not(#page-admin) {
  display: none !important;
}

/* ── Header ──────────────────────────────────────────────────────────── */
header { display: flex; align-items: center; gap: 2rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #e0e0e0; }
header h1 { font-size: 1.3rem; }
nav { display: flex; gap: .5rem; }
.nav-btn { background: none; border: 1px solid #ddd; border-radius: 6px; padding: .4rem 1rem;
           font-size: .85rem; cursor: pointer; color: #555; transition: all .15s; }
.nav-btn:hover { border-color: #111; color: #111; }
.nav-btn.active { background: #111; color: #fff; border-color: #111; }

/* ── Pages ───────────────────────────────────────────────────────────── */
.page { display: none; }
.page.active { display: block; }

.clientes-panel { display: none; }
.clientes-panel.active { display: block; }

.auth-page {
  min-height: calc(100vh - 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-card {
  width: min(520px, 100%);
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 1.5rem;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  display: grid;
  gap: 1.25rem;
}

.auth-hero h1 {
  font-size: 1.8rem;
  margin-bottom: .35rem;
}

.auth-hero p {
  color: #555;
}

.auth-form .action-bar {
  margin-top: .2rem;
}

.auth-switch {
  display: flex;
  justify-content: flex-end;
}

.session-box {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-left: 1rem;
  border-left: 1px solid #eee;
}

.session-box .session-label {
  display: block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #888;
}

.session-box strong,
.session-box span {
  display: block;
  font-size: .85rem;
}

.session-box span {
  color: #666;
}

.hidden {
  display: none !important;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.page-subtitle {
  font-size: .88rem;
  color: #666;
}

.admin-card {
  width: min(760px, 100%);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 760px) {
  .form-grid { grid-template-columns: 1fr; }
  .page-header { align-items: flex-start; flex-direction: column; }
}

.stack-form {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .85rem;
  color: #444;
}

.form-field span small {
  color: #888;
  font-weight: 400;
}

.form-field input,
.form-field select {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid #d7d7d7;
  border-radius: 8px;
  font: inherit;
  background: #fff;
  color: #111;
  outline: none;
}

.form-field input:focus,
.form-field select:focus {
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

.entity-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
}

.entity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem .9rem;
  border: 1px solid #ececec;
  border-radius: 10px;
  background: #fff;
}

.entity-row strong {
  display: block;
  font-size: .92rem;
}

.entity-row span {
  display: block;
  font-size: .82rem;
  color: #666;
}

.entity-row code {
  font-size: .78rem;
  color: #444;
  background: #f6f6f6;
  padding: .15rem .35rem;
  border-radius: 6px;
}

/* ── Agent console ───────────────────────────────────────────────────── */
.agent-console {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  width: min(360px, calc(100vw - 3rem));
  height: calc(100vh - 3rem);
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid #3b82f6;
  background: #fff;
  color: #111;
  box-shadow: 0 16px 40px rgba(59, 130, 246, 0.12);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.agent-console-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.agent-console h2 {
  font-size: 1rem;
  letter-spacing: .01em;
  margin-top: .1rem;
  color: #0f172a;
}
.agent-kicker {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #2563eb;
  margin-bottom: .15rem;
}
.agent-console .status {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
}
.agent-chat-messages {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: .25rem;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: #f8fbff;
  padding: .8rem;
}
.agent-message {
  max-width: min(85%, 680px);
  padding: .7rem .85rem;
  border-radius: 14px;
  font-size: .9rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.agent-message.user {
  align-self: flex-end;
  background: #eff6ff;
  color: #0f172a;
  border: 1px solid #93c5fd;
}
.agent-message.assistant {
  align-self: flex-start;
  background: #fff;
  color: #0f172a;
  border: 1px solid #93c5fd;
}
.agent-message.meta {
  align-self: center;
  background: transparent;
  color: #2563eb;
  padding: 0;
  font-size: .78rem;
}
.agent-chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem;
  align-items: end;
  padding-top: .25rem;
}
.agent-chat-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 52px;
  max-height: 140px;
  padding: .75rem .85rem;
  border-radius: 12px;
  border: 1px solid #93c5fd;
  background: #fff;
  color: #111827;
  outline: none;
}
.agent-chat-form textarea::placeholder {
  color: #60a5fa;
}
.agent-chat-form textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(59,130,246,.16);
}
.agent-chat-form button {
  min-width: 92px;
  padding-inline: 1rem;
  background: #2563eb;
  color: #fff;
}
.agent-chat-form button:hover:not(:disabled) {
  opacity: 1;
  background: #1d4ed8;
}
.agent-chat-form button:disabled {
  opacity: .55;
}
@media (max-width: 700px) {
  .agent-console-head {
    flex-direction: column;
  }
  .agent-console {
    position: static;
    width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
  }
  .agent-chat-form {
    grid-template-columns: 1fr;
  }
  .agent-chat-form button {
    width: 100%;
  }
  .agent-message {
    max-width: 100%;
  }
}

/* ── Tabs ────────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 0; margin-bottom: 1.5rem; border-bottom: 2px solid #e0e0e0; }
.tab { padding: .55rem 1.1rem; font-size: .875rem; cursor: pointer; border: none; background: none;
       color: #888; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; }
.tab:hover { color: #111; }
.tab.active { color: #111; font-weight: 600; border-bottom-color: #111; }

/* ── Upload area ─────────────────────────────────────────────────────── */
.upload-area { border: 2px dashed #ccc; border-radius: 8px; padding: 2rem; text-align: center;
               cursor: pointer; transition: border-color .2s; margin-bottom: 1rem; }
.upload-area:hover, .upload-area.dragover { border-color: #111; }
.upload-area input { display: none; }
.upload-area .label { font-size: .9rem; color: #555; }
.file-list { margin-top: .75rem; font-size: .85rem; color: #111; }
.file-list .file-item { display: inline-block; background: #f5f5f5; border-radius: 4px; padding: .2rem .6rem; margin: .15rem; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
button { background: #111; color: #fff; border: none; border-radius: 6px; padding: .55rem 1.3rem;
         font-size: .85rem; cursor: pointer; transition: opacity .15s; }
button:disabled { opacity: .35; cursor: not-allowed; }
button:hover:not(:disabled) { opacity: .85; }
.btn-save { background: #1a7f37; }
.btn-save:hover:not(:disabled) { background: #15692e; opacity: 1; }
.back-btn { background: none; color: #555; border: 1px solid #ddd; padding: .35rem .8rem; font-size: .8rem; margin-bottom: 1rem; }
.back-btn:hover { border-color: #111; color: #111; }

.action-bar { display: flex; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.detail-upload-box { display: flex; flex-direction: column; gap: 1rem; }

/* ── Status ──────────────────────────────────────────────────────────── */
.status { font-size: .85rem; color: #555; }
.status.error { color: #c00; }
.status.success { color: #1a7f37; }

/* ── Progress ────────────────────────────────────────────────────────── */
.progress-container { margin: 1rem 0; }
.progress-bar { height: 6px; background: #e0e0e0; border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: #111; width: 0%; transition: width .3s; }
.progress-text { font-size: .8rem; color: #888; margin-top: .3rem; }

/* ── Results / Sections ──────────────────────────────────────────────── */
.results-card { background: #fafafa; border: 1px solid #e8e8e8; border-radius: 8px; padding: 1.25rem; margin-top: 1rem; }
.section-title { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .6rem;
                 padding-bottom: .3rem; border-bottom: 1px solid #e0e0e0; }
.section-title:first-child { margin-top: 0; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1.5rem; }
@media (max-width: 600px) { .field-grid { grid-template-columns: 1fr; } }
.field { padding: .4rem 0; }
.field-name { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #888; }
.field-value { font-size: .9rem; word-break: break-word; }
.field-value.null { color: #bbb; font-style: italic; }

/* Editable fields */
.field-value[contenteditable="true"] { border: 1px solid #ddd; border-radius: 4px; padding: .15rem .35rem;
                                        background: #fff; outline: none; min-width: 60px; }
.field-value[contenteditable="true"]:focus { border-color: #111; }

/* ── Array tables ────────────────────────────────────────────────────── */
.array-section { margin: .6rem 0 1rem; overflow-x: auto; }
.data-table, table { width: 100%; border-collapse: collapse; font-size: .82rem; }
th { text-align: left; font-weight: 600; padding: .4rem .5rem; border-bottom: 2px solid #ddd;
     font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: #555; }
td { padding: .4rem .5rem; border-bottom: 1px solid #eee; }
tbody tr { cursor: default; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: #f8f8f8; }

/* ── Raw JSON toggle ─────────────────────────────────────────────────── */
.raw-toggle { margin-top: 1rem; }
.raw-toggle summary { cursor: pointer; font-size: .8rem; color: #555; }
pre { background: #fafafa; border: 1px solid #eee; border-radius: 6px; padding: .75rem;
      overflow-x: auto; font-size: .75rem; margin-top: .4rem; }

/* ── Page header ─────────────────────────────────────────────────────── */
.page-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.page-header h2 { font-size: 1.2rem; }
.editable-title {
  border-radius: 6px;
  padding: .15rem .35rem;
  margin-left: -.35rem;
  outline: none;
  min-width: 120px;
  cursor: text;
}
.editable-title:hover { background: #f7f7f7; }
.editable-title:focus {
  background: #fff;
  box-shadow: inset 0 0 0 1px #111;
}
.badge { background: #f0f0f0; color: #555; padding: .15rem .5rem; border-radius: 4px; font-size: .8rem; font-family: monospace; }
.badge-active { background: #e7f6ea; color: #1a7f37; }
.badge-inactive { background: #f3f3f3; color: #777; }

/* ── Detail panels ───────────────────────────────────────────────────── */
.detail-panel { display: none; }
.detail-panel.active { display: block; }

/* ── Comparação ──────────────────────────────────────────────────────── */
.comparacao-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.comparacao-header label { font-size: .85rem; color: #555; display: flex; align-items: center; gap: .4rem; }
.comparacao-header input { border: 1px solid #ddd; border-radius: 4px; padding: .35rem .5rem;
                           font-size: .85rem; width: 100px; }
.comparacao-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
@media (max-width: 700px) { .comparacao-grid { grid-template-columns: 1fr; } }
.comparacao-col { background: #fafafa; border: 1px solid #e8e8e8; border-radius: 8px; padding: 1rem; }
.comparacao-col h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: #888; margin-bottom: .75rem; }
.comparacao-row { display: flex; justify-content: space-between; padding: .3rem 0; font-size: .85rem;
                  border-bottom: 1px solid #eee; }
.comparacao-row:last-child { border-bottom: none; }
.comparacao-row .val { font-weight: 600; }
.comparacao-row .val.excedente { color: #c00; }
.comparacao-row .val.ok { color: #1a7f37; }

/* ── Empty state ─────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 2rem; color: #888; font-size: .9rem; }

/* ── Utilities ───────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.mt-1 { margin-top: 1rem; }

/* ── Excedentes Table Custom ────────────────────────────────────────── */
.excedentes-table {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.04);
  margin: 0 auto 2.5rem auto;
  width: 100%;
  max-width: 900px;
  border: 1px solid #e0e0e0;
  font-size: 1rem;
}
.excedentes-table th, .excedentes-table td {
  padding: 1rem 1.2rem;
  font-size: 1rem;
}
.excedentes-table th {
  background: #fafafa;
  color: #444;
  border-bottom: 2px solid #e0e0e0;
}
.excedentes-table td {
  background: #fff;
  color: #222;
  border-bottom: 1px solid #f0f0f0;
}
.excedentes-table tr:last-child td {
  border-bottom: none;
}
#excedentesContent {
  margin-top: 0.5rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#excedentesTableContainer {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.pagination {
  margin-top: 1.5rem;
  text-align: center;
}
.pagination .page-btn {
  background: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 0 2px;
  padding: 0.4rem 0.9rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pagination .page-btn.active, .pagination .page-btn:hover {
  background: #111;
  color: #fff;
  border-color: #111;
}