
  :root{
    /* Paleta institucional Geotest (tomada de capturas reales del ERP) */
    --brand:#3F00BA;
    --brand-hover:#320093;
    --brand-soft:#ECEEFC;
    --brand-dark:#150D43;
    --brand-dark-active:#2D2D57;
    --brand-gradient-end:#FF001E;

    --paper:#F8FAFD;
    --paper-raised:#FFFFFF;
    --ink:#0C111A;
    --ink-soft:#5B6B85;
    --line:#E2E5F0;
    --blueprint:#150D43;
    --blueprint-soft:#3F00BA;

    /* Semáforo -- significado funcional (verde/ámbar/rojo), no cambia con la marca */
    --clay:#B8752E;
    --clay-soft:#E7CBA5;
    --ok:#4F7942;
    --ok-bg:#E7EEE0;
    --warn:#A1442E;
    --warn-bg:#F3DFD8;
    --amber-bg:#F6E8CE;
    --radius:3px;
    --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--sans); line-height:1.5; font-size:14px;
    padding-bottom:80px;
  }
  .wrap{ max-width:920px; margin:0 auto; padding:0 20px; }

  /* ---- Header ---- */
  .hero{
    background:var(--blueprint); color:#F0F2FA; padding:28px 0 22px;
    position:relative; overflow:hidden;
  }
  .hero .wrap{ display:flex; gap:22px; align-items:flex-start; position:relative; z-index:1;}
  .core{
    flex:0 0 14px; align-self:stretch; border-radius:2px; overflow:hidden;
    background:linear-gradient(180deg, var(--brand) 0%, #8A6FE0 50%, var(--brand-gradient-end) 100%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
    min-height:96px;
  }
  .hero h1{ font-size:19px; margin:0 0 4px; font-weight:650; letter-spacing:.01em; }
  .hero p{ margin:0; color:#B7BEDB; font-size:13px; max-width:56ch; }
  .hero .tag{
    display:inline-block; margin-top:10px; font-family:var(--mono); font-size:11px;
    color:#F0F2FA; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
    padding:3px 8px; border-radius:2px;
  }

  section{ padding:26px 0; border-bottom:1px solid var(--line); }
  section:last-child{ border-bottom:none; }
  h2{ font-size:14px; margin:0 0 4px; font-weight:650; }
  .step-sub{ color:var(--ink-soft); font-size:12.5px; margin:0 0 16px; max-width:64ch; }
  .step-num{
    display:inline-flex; align-items:center; justify-content:center;
    width:20px; height:20px; border-radius:50%; background:var(--blueprint); color:#fff;
    font-size:11px; font-weight:700; margin-right:8px; vertical-align:-4px;
  }

  /* ---- Upload zone ---- */
  .drop{
    border:1.5px dashed var(--line); border-radius:var(--radius); background:var(--paper-raised);
    padding:26px 20px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s;
  }
  .drop:hover, .drop.drag{ border-color:var(--brand); background:var(--brand-soft); }
  .drop input{ display:none; }
  .drop .icon{ font-size:22px; margin-bottom:6px; }
  .drop .main{ font-size:13.5px; font-weight:600; }
  .drop .sub{ font-size:12px; color:var(--ink-soft); margin-top:3px; }
  .file-chip{
    display:inline-flex; align-items:center; gap:8px; background:var(--paper-raised);
    border:1px solid var(--line); border-radius:var(--radius); padding:7px 12px; font-size:12.5px;
    margin-top:10px;
  }
  .file-chip .x{ cursor:pointer; color:var(--warn); font-weight:700; }

  .sample-link{
    display:inline-block; margin-top:10px; font-size:12px; color:var(--brand);
    text-decoration:underline; cursor:pointer; background:none; border:none; padding:0; font-family:var(--sans);
  }

  button.primary{
    background:var(--brand); color:#fff; border:none; padding:10px 18px; border-radius:var(--radius);
    font-size:13.5px; font-weight:650; cursor:pointer; margin-top:16px;
  }
  button.primary:disabled{ background:#C7C2E8; cursor:not-allowed; }
  button.primary:hover:not(:disabled){ background:var(--brand-hover); }
  button.ghost{
    background:none; border:1px solid var(--line); color:var(--ink); padding:9px 16px;
    border-radius:var(--radius); font-size:13px; cursor:pointer; margin-top:16px; margin-left:8px;
  }
  button.ghost:hover{ border-color:var(--ink-soft); }

  .spinner{
    display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; margin-right:8px; vertical-align:-2px;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  .hidden{ display:none !important; }

  .error-box{
    background:var(--warn-bg); border:1px solid #DDBBAF; color:#6B2A1B; border-radius:var(--radius);
    padding:12px 14px; font-size:13px; margin-top:14px;
  }

  /* ---- metadata form ---- */
  .meta-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; background:var(--paper-raised);
    border:1px solid var(--line); border-radius:var(--radius); padding:16px;
  }
  .meta-grid .full{ grid-column:1/-1; }
  label{ font-size:11.5px; color:var(--ink-soft); display:block; margin-bottom:3px; }
  input[type=text], input[type=number], textarea, select{
    width:100%; border:1px solid var(--line); border-radius:2px; padding:6px 8px; font-size:13px;
    font-family:var(--sans); background:#fff; color:var(--ink);
  }
  textarea{ resize:vertical; min-height:44px; }
  .money-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
  .money-row .field small{ display:block; color:var(--ink-soft); font-size:10.5px; margin-top:2px; }
  .total-line{ font-size:12.5px; color:var(--ink-soft); margin-top:8px; }
  .total-line b{ color:var(--ink); }
  .diff-flag{ font-weight:700; }
  .diff-ok{ color:var(--ok); }
  .diff-bad{ color:var(--warn); }

  .meta-grid.op-block{ background:var(--amber-bg); border-color:#E3CFA0; margin-top:14px; }
  .chips-block{ margin-top:12px; }
  .chips-block h3{ font-size:12px; margin:0 0 6px; color:var(--ink-soft); font-weight:650; }
  .chip-item{
    font-size:12px; background:var(--amber-bg); border:1px solid #E3CFA0; border-radius:2px;
    padding:5px 8px; margin-bottom:4px;
  }

  /* ---- programación table ---- */
  table.prog{ width:100%; border-collapse:collapse; background:var(--paper-raised); font-size:12.5px; }
  table.prog th{
    text-align:left; font-size:11px; color:var(--ink-soft); font-weight:650; padding:7px 8px;
    border-bottom:1.5px solid var(--line); white-space:nowrap;
  }
  table.prog td{ padding:5px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
  table.prog input, table.prog select{ font-size:12px; padding:4px 6px; }
  table.prog input.op-cell{ background:var(--amber-bg); border-color:#E3CFA0; }
  tr.needs-review{ background:var(--amber-bg); }
  tr.excluded-row td{ opacity:.5; text-decoration:line-through; }
  .badge{
    display:inline-block; font-size:10px; padding:2px 6px; border-radius:2px; font-weight:650;
  }
  .badge-review{ background:var(--brand); color:#fff; }
  .badge-ok{ background:var(--ok-bg); color:var(--ok); }
  .row-toggle{ cursor:pointer; font-size:11px; color:var(--brand); background:none; border:none; text-decoration:underline; padding:0; }
  .table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }

  /* ---- notes ---- */
  .notes-box{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
    padding:16px; font-size:12.5px; white-space:pre-wrap; font-family:var(--mono); line-height:1.6;
    max-height:340px; overflow-y:auto;
  }

  /* ---- validation gate ---- */
  .gate{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:16px;
  }
  .gate label{ display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--ink); cursor:pointer; }
  .gate input[type=checkbox]{ margin-top:2px; }
  .review-count{ font-size:12px; color:var(--warn); margin-top:8px; }

  /* ---- sql output ---- */
  pre.sql{
    background:var(--brand-dark); color:#DCE6EE; border-radius:var(--radius); padding:16px;
    font-family:var(--mono); font-size:12px; line-height:1.6; overflow-x:auto; max-height:420px; overflow-y:auto;
  }
  .sql-toolbar{ display:flex; gap:8px; margin-bottom:10px; }
  .sql-toolbar button{
    font-size:12px; background:var(--paper-raised); border:1px solid var(--line); border-radius:2px;
    padding:6px 12px; cursor:pointer;
  }
  .sql-toolbar button:hover{ border-color:var(--ink-soft); }

  .footnote{ font-size:11.5px; color:var(--ink-soft); margin-top:10px; }
  .step-header{ display:flex; align-items:center; justify-content:space-between; }
  .tab-status{ font-size:11px; color:var(--ink-soft); }

  .result-ok{
    background:var(--ok-bg); border:1px solid #B9CBA9; border-radius:var(--radius);
    padding:16px; color:#2F4A26; font-size:13.5px;
  }
  .result-ok b{ display:block; font-size:15px; margin-bottom:4px; }
  .result-err{
    background:var(--warn-bg); border:1px solid #DDBBAF; border-radius:var(--radius);
    padding:16px; color:#6B2A1B; font-size:13px;
  }
  .result-err ul{ margin:8px 0 0; padding-left:18px; }
  .result-err li{ margin-bottom:3px; }

  .spinner-inline{ display:inline-block; width:12px; height:12px; border:2px solid rgba(0,0,0,.15);
    border-top-color:var(--brand); border-radius:50%; animation:spin .7s linear infinite; margin-right:6px; vertical-align:-1px; }

.aux-section{ margin:14px 0; }
.drop-aux{ padding:16px; }
.drop-aux .icon{ font-size:18px; }
.drop-aux .main{ font-size:12.5px; }

.aux-nota{ font-size:12px; padding:9px 12px; border-radius:var(--radius); margin-bottom:12px; }
.aux-nota-ok{ background:var(--ok-bg); color:var(--ok); }
.aux-nota-warn{ background:var(--amber-bg); color:#8A5A16; }

.modal-overlay{
  position:fixed; inset:0; background:rgba(29,43,57,.55); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-box{
  background:var(--paper-raised); border-radius:var(--radius); padding:22px 24px;
  width:100%; max-width:420px; max-height:88vh; overflow-y:auto;
}

.modal-grafica-box{ max-width:780px; }
.modal-grafica-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.curva-clickable{ cursor:zoom-in; position:relative; }
.curva-clickable:hover::after{
  content:"Clic para ampliar"; position:absolute; top:2px; right:2px; font-size:9px;
  color:var(--ink-soft); background:var(--paper-raised); padding:1px 5px; border-radius:2px;
  border:1px solid var(--line);
}
