:root {
    --ext--paper:#F7F5F0;
    --ext--paper-raised:#FFFFFF;
    --ext--ink:#1C2024;
    --ext--ink-soft:#5B6168;
    --ext--rule:#D8D3C7;
    --ext--accent:#1E3A5F;
    --ext--accent-soft:#E8EEF4;
    --ext--good:#2F6B3E;
    --ext--good-soft:#E7F0E8;
    --ext--bad:#9B3B3B;
    --ext--bad-soft:#F5E8E8;
    --ext--wait:#946F2B;
    --ext--wait-soft:#F4EDE0;
    --ext--radius:3px;
  }
.extractor-view * {box-sizing:border-box;}
.extractor-view {margin:0;padding:0;}
.extractor-view {
    background:var(--ext--paper);
    color:var(--ext--ink);
    font-family:"Inter",sans-serif;
    min-height:100%;
    width:100%;
    padding:32px 24px 60px;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
.extractor-view .wrap {max-width:980px;width:100%;margin:0 auto;}
.extractor-view header {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    border-bottom:2px solid var(--ext--ink);
    padding-bottom:18px;
    margin-bottom:36px;
    gap:24px;
  }
.extractor-view .title-block {display:flex;align-items:center;gap:14px;}
.extractor-view .back-link {
    font-size:18px;
    color:var(--ext--ink);
    text-decoration:none;
    padding-bottom:4px;
  }
.extractor-view .back-link:hover {color:var(--ext--accent);}
.extractor-view .title-block .eyebrow {
    font-family:"IBM Plex Mono",monospace;
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--ext--ink-soft);
    margin:0 0 6px;
  }
.extractor-view h1 {
    font-family:"Source Serif 4",serif;
    font-weight:600;
    font-size:30px;
    margin:0;
    letter-spacing:-0.01em;
  }
.extractor-view .config-btn {
    font-family:"IBM Plex Mono",monospace;
    font-size:12px;
    background:transparent;
    border:1px solid var(--ext--ink);
    color:var(--ext--ink);
    padding:8px 14px;
    border-radius:var(--ext--radius);
    cursor:pointer;
    white-space:nowrap;
  }
.extractor-view .config-btn:hover {background:var(--ext--ink);color:var(--ext--paper);}
.extractor-view .api-panel {
    background:var(--ext--paper-raised);
    border:1px solid var(--ext--rule);
    border-radius:var(--ext--radius);
    padding:20px 22px;
    margin-bottom:28px;
    display:none;
  }
.extractor-view .api-panel.open {display:block;}
.extractor-view .api-panel label {
    display:block;
    font-size:12px;
    font-weight:500;
    color:var(--ext--ink-soft);
    margin-bottom:8px;
  }
.extractor-view .api-row {display:flex;gap:10px;}
.extractor-view .api-row input {
    flex:1;
    font-family:"IBM Plex Mono",monospace;
    font-size:13px;
    padding:10px 12px;
    border:1px solid var(--ext--rule);
    border-radius:var(--ext--radius);
    background:#FBFAF7;
    color:var(--ext--ink);
  }
.extractor-view .api-row input:focus {outline:2px solid var(--ext--accent);outline-offset:1px;}
.extractor-view .api-row button {
    font-family:"Inter",sans-serif;
    font-size:13px;
    font-weight:500;
    padding:10px 16px;
    background:var(--ext--accent);
    color:#fff;
    border:none;
    border-radius:var(--ext--radius);
    cursor:pointer;
  }
.extractor-view .api-row button:hover {background:#16304F;}
.extractor-view .api-note {font-size:12px;color:var(--ext--ink-soft);margin-top:10px;line-height:1.5;}
.extractor-view .api-note a {color:var(--ext--accent);}
.extractor-view .api-status {font-size:12px;margin-top:8px;font-weight:500;}
.extractor-view .api-status.ok {color:var(--ext--good);}
.extractor-view .dropzone {
    background:var(--ext--paper-raised);
    border:1.5px dashed var(--ext--rule);
    border-radius:var(--ext--radius);
    padding:48px 24px;
    text-align:center;
    cursor:pointer;
    transition:border-color .15s, background .15s;
    margin-bottom:32px;
  }
.extractor-view .dropzone.drag {border-color:var(--ext--accent);background:var(--ext--accent-soft);}
.extractor-view .dropzone .dz-icon {
    width:40px;height:40px;margin:0 auto 14px;
    border:1.5px solid var(--ext--ink-soft);
    border-radius:4px;
    position:relative;
  }
.extractor-view .dropzone .dz-icon::before {
    content:"";position:absolute;left:50%;top:50%;
    width:16px;height:2px;background:var(--ext--ink-soft);
    transform:translate(-50%,-50%);
  }
.extractor-view .dropzone .dz-icon::after {
    content:"";position:absolute;left:50%;top:50%;
    width:2px;height:16px;background:var(--ext--ink-soft);
    transform:translate(-50%,-50%);
  }
.extractor-view .dropzone p {margin:0;font-size:14px;color:var(--ext--ink-soft);}
.extractor-view .dropzone .dz-main {font-size:15px;color:var(--ext--ink);font-weight:500;margin-bottom:4px;}
.extractor-view .dropzone input {display:none;}
.extractor-view .queue {margin-bottom:32px;}
.extractor-view .queue-title {
    font-family:"IBM Plex Mono",monospace;
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ext--ink-soft);
    margin-bottom:10px;
    display:flex;
    justify-content:space-between;
  }
.extractor-view .doc-row {
    display:flex;
    align-items:center;
    gap:14px;
    background:var(--ext--paper-raised);
    border:1px solid var(--ext--rule);
    border-radius:var(--ext--radius);
    padding:12px 16px;
    margin-bottom:8px;
  }
.extractor-view .doc-row .doc-name {
    flex:1;
    font-size:13px;
    font-weight:500;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
.extractor-view .doc-row .doc-meta {font-size:12px;color:var(--ext--ink-soft);font-family:"IBM Plex Mono",monospace;}
.extractor-view .pill {
    font-family:"IBM Plex Mono",monospace;
    font-size:11px;
    padding:4px 9px;
    border-radius:20px;
    white-space:nowrap;
    font-weight:500;
  }
.extractor-view .pill.pending {background:#EEEBE3;color:var(--ext--ink-soft);}
.extractor-view .pill.working {background:var(--ext--wait-soft);color:var(--ext--wait);}
.extractor-view .pill.done {background:var(--ext--good-soft);color:var(--ext--good);}
.extractor-view .pill.error {background:var(--ext--bad-soft);color:var(--ext--bad);}
.extractor-view .doc-row .remove-btn {
    background:none;border:none;color:var(--ext--ink-soft);
    cursor:pointer;font-size:16px;line-height:1;padding:2px 6px;
  }
.extractor-view .doc-row .remove-btn:hover {color:var(--ext--bad);}
.extractor-view .actions-row {display:flex;gap:12px;margin-bottom:40px;}
.extractor-view .btn-primary {
    font-family:"Inter",sans-serif;
    font-size:14px;
    font-weight:600;
    padding:13px 24px;
    background:var(--ext--ink);
    color:var(--ext--paper);
    border:none;
    border-radius:var(--ext--radius);
    cursor:pointer;
  }
.extractor-view .btn-primary:hover:not(:disabled) {background:var(--ext--accent);}
.extractor-view .btn-primary:disabled {opacity:.4;cursor:not-allowed;}
.extractor-view .btn-secondary {
    font-family:"Inter",sans-serif;
    font-size:14px;
    padding:13px 20px;
    background:transparent;
    color:var(--ext--ink);
    border:1px solid var(--ext--rule);
    border-radius:var(--ext--radius);
    cursor:pointer;
  }
.extractor-view .btn-secondary:hover {border-color:var(--ext--ink);}

/* ── Modal de resultados: centrado en pantalla, fuera del flujo normal ── */
.ext-results-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(28,32,36,0.55);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ext-results-overlay.open { display: flex; }

.ext-results-modal {
  background: var(--ext--paper-raised, #fff);
  border-radius: 6px;
  width: 640px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
}

.ext-results-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 2px solid var(--ext--ink, #1C2024);
  position: sticky;
  top: 0;
  background: var(--ext--paper-raised, #fff);
}
.ext-results-modal-header h2 {
  font-family: "Source Serif 4", serif;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: var(--ext--ink, #1C2024);
}
.ext-results-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ext--ink-soft, #5B6168);
  font-size: 16px;
  padding: 6px 9px;
  border-radius: 4px;
}
.ext-results-close:hover { background: #F0EDE5; color: var(--ext--ink, #1C2024); }

.ext-results-modal-body {
  padding: 18px 22px;
}
.extractor-view .doc-table-block {
    background:var(--ext--paper-raised);
    border:1px solid var(--ext--rule);
    border-radius:var(--ext--radius);
    margin-bottom:22px;
    overflow:hidden;
  }
.extractor-view .doc-table-block .doc-table-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:13px 16px;
    border-bottom:2px solid var(--ext--ink);
    background:#FBFAF7;
    gap:12px;
  }
.extractor-view .doc-table-block .doc-table-header .dt-name {
    font-size:13.5px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
.extractor-view table.vtable {
    border-collapse:collapse;
    width:100%;
    font-size:13px;
  }
.extractor-view table.vtable td {
    padding:9px 16px;
    border-bottom:1px solid var(--ext--rule);
    vertical-align:top;
  }
.extractor-view table.vtable tr:last-child td {border-bottom:none;}
.extractor-view table.vtable tr:hover {background:#FBFAF7;}
.extractor-view table.vtable td.field-name {
    font-family:"Inter",sans-serif;
    font-weight:500;
    font-size:12.5px;
    color:var(--ext--ink-soft);
    width:38%;
    white-space:nowrap;
  }
.extractor-view table.vtable td.field-value {
    font-family:"IBM Plex Mono",monospace;
    color:var(--ext--ink);
    word-break:break-word;
    font-weight:600;
  }
.extractor-view table.vtable td.field-value.null-val {color:#B8B2A4;font-style:italic;font-weight:400;}
.extractor-view table.vtable td.field-copy {width:38px;text-align:center;}
.extractor-view .copy-cell-btn {
    background:none;
    border:1px solid transparent;
    border-radius:var(--ext--radius);
    cursor:pointer;
    padding:4px 6px;
    color:var(--ext--ink-soft);
    font-size:13px;
    line-height:1;
  }
.extractor-view .copy-cell-btn:hover {border-color:var(--ext--rule);color:var(--ext--ink);}
.extractor-view .copy-cell-btn.copied {color:var(--ext--good);}
.extractor-view .doc-table-footer {
    display:flex;
    justify-content:flex-end;
    padding:10px 16px;
    border-top:1px solid var(--ext--rule);
  }
.extractor-view .tool-btn {
    font-family:"IBM Plex Mono",monospace;
    font-size:12px;
    padding:8px 14px;
    background:var(--ext--paper-raised);
    border:1px solid var(--ext--rule);
    border-radius:var(--ext--radius);
    cursor:pointer;
    color:var(--ext--ink);
  }
.extractor-view .tool-btn:hover {border-color:var(--ext--ink);}
.extractor-view .tool-btn.copied {background:var(--ext--good-soft);color:var(--ext--good);border-color:var(--ext--good);}
.extractor-view .match-header {
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 18px;
    font-size:15px;
    font-weight:700;
  }
.extractor-view .match-header.match-ok {background:var(--ext--good-soft);color:var(--ext--good);}
.extractor-view .match-header.match-none {background:var(--ext--wait-soft);color:var(--ext--wait);}
.extractor-view .match-header.match-error {background:var(--ext--bad-soft);color:var(--ext--bad);}
.extractor-view .match-header.match-checking {background:#F4F2EC;color:var(--ext--ink-soft);font-weight:500;font-size:13px;}
.extractor-view .match-icon {font-size:18px;flex-shrink:0;}
.extractor-view .match-header strong {font-weight:800;}
.extractor-view .btn-view-provider {
    font-family:"Inter",sans-serif;
    font-size:12.5px;
    font-weight:600;
    padding:7px 14px;
    background:var(--ext--good);
    color:#fff;
    border:none;
    border-radius:var(--ext--radius);
    cursor:pointer;
    white-space:nowrap;
    margin-left:auto;
  }
.extractor-view .btn-view-provider:hover {background:#235430;}
.extractor-view .btn-create-provider {
    font-family:"Inter",sans-serif;
    font-size:12.5px;
    font-weight:600;
    padding:8px 14px;
    background:var(--ext--wait);
    color:#fff;
    border:none;
    border-radius:var(--ext--radius);
    cursor:pointer;
    white-space:nowrap;
    margin-left:auto;
  }
.extractor-view .btn-create-provider:hover {background:#7A5A22;}
.extractor-view .btn-create-provider.created {background:var(--ext--good);cursor:default;}
.extractor-view .btn-new-provider-footer {
    display:flex;
    align-items:center;
    gap:7px;
    font-family:"IBM Plex Mono",monospace;
    font-size:12px;
    padding:8px 14px;
    background:var(--ext--ink);
    color:var(--ext--paper);
    border:none;
    border-radius:var(--ext--radius);
    cursor:pointer;
  }
.extractor-view .btn-new-provider-footer:hover {background:var(--ext--accent);}

.extractor-view .summary-table {
    border-collapse:collapse;
    width:100%;
    font-size:13px;
  }
.extractor-view .summary-table td {
    padding:9px 16px;
    border-bottom:1px solid var(--ext--rule);
    vertical-align:top;
  }
.extractor-view .summary-table tr:last-child td {border-bottom:none;}
.extractor-view .summary-table tr:hover {background:#FBFAF7;}
.extractor-view .summary-table td.field-name {
    font-family:"Inter",sans-serif;
    font-weight:500;
    font-size:12.5px;
    color:var(--ext--ink-soft);
    width:38%;
    white-space:nowrap;
  }
.extractor-view .summary-table td.field-value {
    font-family:"IBM Plex Mono",monospace;
    color:var(--ext--ink);
    word-break:break-word;
    font-weight:600;
  }
.extractor-view .summary-table td.field-value.null-val {color:#B8B2A4;font-style:italic;font-weight:400;}
.extractor-view .summary-table td.field-copy {width:38px;text-align:center;}
.extractor-view .summary-table tr.row-separator td {
    padding:0;
    border-bottom:2px solid var(--ext--ink);
  }
.extractor-view .copy-cell-btn {
    background:none;
    border:1px solid transparent;
    border-radius:var(--ext--radius);
    cursor:pointer;
    padding:4px 6px;
    color:var(--ext--ink-soft);
    font-size:13px;
    line-height:1;
  }
.extractor-view .copy-cell-btn:hover {border-color:var(--ext--rule);color:var(--ext--ink);}
.extractor-view .copy-cell-btn.copied {color:var(--ext--good);}
.extractor-view .modal-overlay-create {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    z-index:1000;
    align-items:center;
    justify-content:center;
    padding:20px;
  }
.extractor-view .modal-overlay-create.open {display:flex;}
.extractor-view .modal-create {
    background:var(--ext--paper-raised);
    border-radius:var(--ext--radius);
    width:460px;
    max-width:95vw;
    max-height:90vh;
    overflow-y:auto;
    padding:24px;
  }
.extractor-view .modal-create h3 {
    font-family:"Source Serif 4",serif;
    font-size:18px;
    margin:0 0 16px;
  }
.extractor-view .modal-create .form-group {margin-bottom:12px;}
.extractor-view .modal-create label {
    display:block;
    font-size:12px;
    font-weight:500;
    color:var(--ext--ink-soft);
    margin-bottom:5px;
  }
.extractor-view .modal-create input {
    width:100%;
    font-family:"Inter",sans-serif;
    font-size:13px;
    padding:9px 11px;
    border:1px solid var(--ext--rule);
    border-radius:var(--ext--radius);
    background:#FBFAF7;
    color:var(--ext--ink);
  }
.extractor-view .modal-create input:focus {outline:2px solid var(--ext--accent);outline-offset:1px;}
.extractor-view .modal-create-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:18px;
  }
.extractor-view .empty-note {
    font-size:13px;
    color:var(--ext--ink-soft);
    padding:16px;
  }
.extractor-view footer {
    margin-top:60px;
    padding-top:18px;
    border-top:1px solid var(--ext--rule);
    font-size:11.5px;
    color:var(--ext--ink-soft);
    font-family:"IBM Plex Mono",monospace;
  }
@media  (max-width:640px) {.extractor-view header {flex-direction:column;align-items:flex-start;}
.extractor-view .actions-row {flex-direction:column;}}
/* ── Animación de carga al extraer datos ── */
.ext-loading-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(28,32,36,0.7);
  z-index: 2100;
  align-items: center;
  justify-content: center;
}
.ext-loading-overlay.open { display: flex; }

.ext-loading-box {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  min-width: 300px;
}

.ext-loading-spinner {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1E3A5F, #2F6B3E);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  animation: ext-pulse 1.2s ease-in-out infinite;
}

@keyframes ext-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(30,58,95,0.4); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(30,58,95,0); }
}

.ext-loading-text {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1C2024;
  text-align: center;
  min-height: 20px;
}

.ext-loading-bar {
  width: 220px;
  height: 5px;
  background: #E8E6DE;
  border-radius: 10px;
  overflow: hidden;
}
.ext-loading-bar-fill {
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, #1E3A5F, #2F6B3E);
  border-radius: 10px;
  animation: ext-loading-slide 1.4s ease-in-out infinite;
}

@keyframes ext-loading-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}