/* Facturas de proveedor: inbox, document viewer, pipeline steps, registry and payments. */

.small { font-size: 11px; }
.panel > .hd { flex-wrap: wrap; }

/* Inbox */
.mails { list-style: none; margin: 0; padding: 0; }
.mail { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.mail:hover { background: var(--paper-2); }
.mail.sel { background: var(--signal-ochre-tint); box-shadow: inset 3px 0 0 var(--gold); }
.mail .mtop { display: flex; align-items: baseline; gap: 8px; }
.mail .no { font-weight: 700; font-size: 11px; width: 20px; height: 20px; display: inline-grid; place-items: center; border: 1px solid var(--ink); flex: none; }
.mail .from { font-weight: 700; font-size: 12.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail .time { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.mail .subj { font-size: 12.5px; }
.mail .body { font-size: 11.5px; color: var(--ink-2); line-height: 1.45; }
.mail .att { font-size: 11px; color: var(--ink-3); }
.mail .mact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.mail .mact .spacer { flex: 1; }

.upload { padding: 14px 16px 16px; display: grid; gap: 8px; background: var(--paper-2); }
.upload .lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.upload .uprow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.upload .fname { font-size: 11px; color: var(--ink-3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload label.btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.upload input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; }
.upload p { margin: 0; line-height: 1.5; }
.upload .err { color: var(--err); }

/* Document */
.docp { display: flex; flex-direction: column; }
.docwrap { background: #e8e6e0; min-height: 200px; flex: 1; }
.docwrap iframe { display: block; width: 100%; height: 560px; border: 0; }
.docwrap .empty { padding: 24px 16px; font-size: 12px; color: var(--ink-3); }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); counter-reset: st; }
.step { position: relative; min-width: 0; padding: 0 0 14px 34px; counter-increment: st; }
.step::before { content: counter(st); position: absolute; left: 0; top: 0; width: 22px; height: 22px; display: grid; place-items: center; font-size: 11px; font-weight: 700; border: 1px solid var(--ink); background: var(--paper); }
.step::after { content: ""; position: absolute; left: 11px; top: 22px; bottom: 0; width: 1px; background: var(--line-soft); }
.step:last-child::after { display: none; }
.step.ok::before { background: var(--ink); color: var(--paper); }
.step.detenida::before { background: var(--err); border-color: var(--err); color: var(--paper); }
.step.apartada::before { background: var(--warn); border-color: var(--warn); color: var(--paper); }
.step.omitida { opacity: 0.55; }
.step.idle::before { color: var(--ink-3); border-color: var(--line-soft); }
.step.idle .why { color: var(--ink-3); }
.step .sh { display: flex; align-items: center; gap: 8px; min-height: 22px; flex-wrap: wrap; }
.step .st { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.step .why { font-size: 12.5px; line-height: 1.5; margin-top: 3px; color: var(--ink-2); }
.step.running .why { color: var(--ink-3); }
.fields { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 8px 0 0; font-size: 12px; padding: 8px 10px; background: var(--paper-2); }
.fields dt { color: var(--ink-3); }
.fields dd { margin: 0; font-weight: 700; word-break: break-word; }
.step details { margin-top: 6px; font-size: 11px; }
.step details summary { cursor: pointer; color: var(--ink-2); }
.step details pre { margin: 6px 0 0; padding: 8px; background: var(--ink); color: var(--paper); font-size: 11px; white-space: pre-wrap; word-break: break-word; }
.aviso { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--err); background: var(--err-tint); font-size: 12px; }
.mini { margin-top: 8px; font-size: 11.5px; }
.mini td, .mini th { padding: 5px 6px; }
.mini td { white-space: nowrap; }
.mini td:nth-child(2) { white-space: normal; }
.flow { margin-top: 8px; font-size: 12px; padding: 8px 10px; background: var(--paper-2); }
.flow b { font-variant-numeric: tabular-nums; }
.result { margin-top: 4px; padding: 12px 14px; border: 1px solid var(--line); display: grid; gap: 6px; font-size: 13px; }
.result.registrada { border-color: var(--signal); background: var(--signal-tint); }
.result.detenida { border-color: var(--err); background: var(--err-tint); }
.result.apartada { border-color: var(--warn); background: var(--warn-tint); }

/* Registry */
.reg { font-size: 12px; }
.reg th, .reg td { padding: 7px 8px; }
.reg td { white-space: nowrap; }
.reg td.prov { white-space: normal; min-width: 130px; }
.reg .tags { display: flex; gap: 4px; margin-top: 4px; }
.reg tr.new td { background: var(--signal-ochre-tint); }
.reg tr.flash td { animation: flash 1.6s var(--ease); }
@keyframes flash { from { background: rgba(184, 115, 28, 0.35); } to { background: var(--signal-ochre-tint); } }
.reg .neg { color: var(--err); }

/* Payments by week */
.weeks { display: grid; gap: 14px; }
.wk { display: grid; gap: 5px; }
.wk .wh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 12px; }
.wk .wh .muted { white-space: nowrap; }
.wk .wh b { white-space: nowrap; }
.wk .wh .amt { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk .bar { height: 8px; background: var(--paper-2); }
.wk .bar i { display: block; height: 100%; background: var(--ink-2); }
.wk.late .bar i { background: var(--err); }
.wk.has-new .bar i { background: var(--gold); }
.wk .det { font-size: 11px; color: var(--ink-3); line-height: 1.45; }
.wk .det .nw { color: var(--ink); font-weight: 700; }

@media (max-width: 1000px) {
  .docwrap iframe { height: 520px; }
}