.history-heading { align-items: flex-end; }
.history-heading > div:first-child { min-width: 0; }
.history-heading h1 { margin-top: 3px; }
.history-heading p { margin: 5px 0 0; color: var(--color-muted); font-size: 12px; }
.history-eyebrow { color: var(--color-accent); font-size: 9px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }

.date-filter-wrap { display: flex; flex-direction: column; gap: 5px; }
.date-filter-wrap label { color: var(--color-muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.history-card { color: inherit; text-decoration: none; }
.history-number { margin: 2px 0 8px; color: var(--color-brand); font-size: 17px; font-weight: 780; }
.pedimento-info > span { color: var(--color-muted); font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.card-metadata { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.card-metadata small { padding: 4px 7px; border-radius: 7px; background: #e8efed; color: #657570; font-size: 9px; }
.history-card[hidden] { display: none; }

.history-help-panel { position: sticky; top: 20px; }
.history-help-icon { display: grid; width: 44px; height: 44px; margin-bottom: 16px; place-items: center; border-radius: 13px; background: rgba(255, 255, 255, .1); color: #f0cb8e; font-size: 23px; }
.history-help-panel h2 { margin-bottom: 8px; }
.history-help-panel > p { margin: 0 0 20px; color: rgba(255, 255, 255, .67); font-size: 11px; line-height: 1.55; }
.history-help-panel > div { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.history-help-panel > div strong { display: grid; flex: 0 0 35px; height: 29px; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .1); color: #f0cb8e; font-size: 9px; }
.history-help-panel > div span { color: rgba(255, 255, 255, .78); font-size: 10px; }

.detail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.detail-toolbar > span { color: var(--color-muted); font-size: 11px; font-weight: 700; }
.back-history-button { display: inline-flex; min-height: 42px; align-items: center; padding: 8px 15px; border: 1px solid var(--color-border); border-radius: 11px; background: #fff; color: var(--color-brand); font-size: 11px; font-weight: 750; text-decoration: none; box-shadow: var(--shadow-sm); }
.back-history-button:hover { border-color: #9eb6b0; }

.detail-layout { grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); }
.pedimento-detail { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
.detail-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 28px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: linear-gradient(135deg, #fff, #f2f7f5); box-shadow: var(--shadow-sm); }
.detail-hero h1 { margin: 3px 0; color: var(--color-brand); font-size: clamp(25px, 3vw, 34px); letter-spacing: -.035em; }
.detail-hero p { margin: 0; color: var(--color-muted); font-size: 12px; }
.detail-date { flex: 0 0 auto; padding: 8px 11px; border-radius: 9px; background: #e4eeeb; color: var(--color-brand); font-size: 11px; font-weight: 750; }

.history-section { min-width: 0; padding: clamp(20px, 2.5vw, 28px); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.history-section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid var(--color-border); }
.history-section-title > span { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: #e7efed; color: var(--color-brand); font-size: 10px; font-weight: 850; }
.history-section-title h2 { margin: 0; color: var(--color-text); font-size: 17px; }
.history-section-title p { margin: 2px 0 0; color: var(--color-muted); font-size: 10px; }

.history-data-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.history-data-grid > div { display: flex; min-width: 0; flex-direction: column; gap: 5px; padding: 13px 14px; border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface-soft); }
.history-data-grid span, .history-metrics span { color: var(--color-muted); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.history-data-grid strong { overflow-wrap: anywhere; color: var(--color-text); font-size: 11px; }
.history-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.history-metrics > div { display: flex; min-width: 0; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; background: #edf4f2; }
.history-metrics strong { overflow-wrap: anywhere; color: var(--color-brand); font-size: 13px; }

.history-empty { margin: 0; padding: 22px; border: 1px dashed var(--color-border); border-radius: 12px; color: var(--color-muted); font-size: 12px; text-align: center; }
.history-record-list { display: grid; gap: 12px; }
.history-record { min-width: 0; padding: 18px; border: 1px solid var(--color-border); border-radius: 14px; background: #fff; }
.history-record-header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.history-record-header > div { min-width: 0; }
.history-record-header span { color: var(--color-accent); font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.history-record-header h3 { overflow-wrap: anywhere; margin: 4px 0 0; color: var(--color-text); font-size: 15px; }
.history-record-header time { flex: 0 0 auto; color: var(--color-muted); font-size: 11px; }
.history-record-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 9px; }
.history-record-grid > div { display: flex; min-width: 0; flex-direction: column; gap: 5px; padding: 12px 13px; border-radius: 10px; background: var(--color-surface-soft); }
.history-record-grid span { color: var(--color-muted); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.history-record-grid strong { overflow-wrap: anywhere; color: var(--color-text); font-size: 12px; }
.financial-history-section { border-color: #c9dad6; }
.financial-record { background: #fbfdfc; }
.financial-record .history-data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.detail-documents-panel { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
.documents-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.documents-panel-title span { color: #f0cb8e; font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.documents-panel-title h2 { margin: 3px 0 0; }
.documents-panel-title > strong { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 11px; }
.detail-documents-panel h3 { margin-top: 18px; }
.documents-empty { margin: 0; padding: 10px 0; color: rgba(255, 255, 255, .5); font-size: 10px; }
.preview-document { align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.preview-document > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.preview-document small { color: rgba(255, 255, 255, .45); font-size: 8px; }
.preview-document b { font-size: 12px; }
.pdf-badge { display: grid; flex: 0 0 31px; width: 31px; height: 31px; place-items: center; border-radius: 8px; background: rgba(240, 203, 142, .13); color: #f0cb8e; font-size: 7px; font-weight: 850; }

.document-preview-modal { width: min(1100px, calc(100vw - 34px)); height: min(820px, calc(100vh - 34px)); padding: 0; overflow: hidden; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 28px 80px rgba(4, 22, 19, .35); }
.document-preview-modal::backdrop { background: rgba(6, 24, 21, .72); backdrop-filter: blur(3px); }
.preview-modal-header { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 18px 13px 22px; border-bottom: 1px solid var(--color-border); }
.preview-modal-header > div:first-child { min-width: 0; }
.preview-modal-header span { color: var(--color-accent); font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.preview-modal-header h2 { max-width: 600px; overflow: hidden; margin: 3px 0 0; color: var(--color-text); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.preview-modal-header > div:last-child { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; }
.preview-modal-header a { padding: 8px 11px; border: 1px solid var(--color-border); border-radius: 9px; color: var(--color-brand); font-size: 9px; font-weight: 750; text-decoration: none; }
.preview-modal-header button { display: grid; width: 35px; height: 35px; padding: 0; place-items: center; border: 0; border-radius: 9px; background: #edf2f0; color: var(--color-text); font-size: 20px; cursor: pointer; }
.preview-frame-wrap { position: relative; height: calc(100% - 70px); background: #dfe5e3; }
.preview-frame-wrap iframe { width: 100%; height: 100%; border: 0; }
.preview-status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px; color: var(--color-text); text-align: center; }
.preview-status[hidden] { display: none; }

@media (max-width: 1050px) {
    .detail-layout { grid-template-columns: 1fr; }
    .history-help-panel, .detail-documents-panel { position: static; }
    .detail-documents-panel { display: block; max-height: none; }
}

@media (max-width: 760px) {
    .history-data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .history-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .history-record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
    .detail-toolbar, .detail-hero { align-items: flex-start; flex-direction: column; }
    .detail-toolbar > span { display: none; }
    .back-history-button { width: 100%; justify-content: center; }
    .history-data-grid, .history-metrics, .history-record-grid, .financial-record .history-data-grid { grid-template-columns: 1fr; }
    .history-record-header { flex-direction: column; }
    .preview-modal-header a { display: none; }
    .document-preview-modal { width: calc(100vw - 16px); height: calc(100vh - 16px); border-radius: 13px; }
}