/* Componentes compartilhados das telas operacionais. */

.portal-main:has(.portal-responsive-main-card) { padding-top: clamp(1.25rem, 4vh, 3rem); }
.portal-main:has(.portal-responsive-main-card) > section { max-width: 92rem; }

.portal-responsive-main-card { position: relative; overflow: hidden; }

.portal-responsive-main-card::before {
    position: absolute;
    content: '';
    pointer-events: none;
    inset: 0;
    background: radial-gradient(circle at 76% 0%, rgba(28, 184, 168, 0.08), transparent 28%);
}

.portal-responsive-main-card > * { position: relative; z-index: 1; }

.portal-responsive-main-card .portal-responsive-hero {
    max-width: 68rem;
    margin-bottom: 2.25rem !important;
}

.portal-responsive-main-card .portal-responsive-hero > span:first-child {
    border: 1px solid rgba(83, 222, 208, 0.16);
    background: rgba(20, 172, 159, 0.11) !important;
    color: #70e7dc !important;
    box-shadow: 0 0.8rem 1.5rem rgba(7, 126, 123, 0.12);
}

.portal-responsive-main-card .portal-responsive-hero-copy > p:first-child {
    color: #65dcd1 !important;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
}

.portal-responsive-main-card .portal-responsive-hero-copy > p:nth-child(2) { color: #9debe4 !important; font-size: 0.78rem; }

.portal-responsive-main-card .portal-responsive-hero-copy h1:not(.portal-page-title) {
    max-width: 54rem;
    font-size: clamp(2rem, 3.2vw, 3.25rem);
    line-height: 1.08;
}

.portal-responsive-main-card .portal-responsive-hero-copy > p:last-child {
    max-width: 48rem;
    margin-top: 0.9rem !important;
    color: #aebdce !important;
    font-size: 0.98rem;
    line-height: 1.6;
}

.portal-responsive-main-card:not(.portal-login-card) form > div,
.portal-responsive-main-card > div[id="upload-form"] > div,
.portal-responsive-main-card > div[id="automation-form"] > div {
    border-color: rgba(111, 137, 167, 0.19) !important;
    background: rgba(5, 18, 32, 0.52) !important;
}

.portal-responsive-main-card label { color: #b9c8d8 !important; font-size: 0.68rem !important; letter-spacing: 0.18em; }

.portal-responsive-main-card input:not([type="checkbox"]):not([type="radio"]),
.portal-responsive-main-card textarea,
.portal-responsive-main-card select {
    border-color: rgba(111, 137, 167, 0.24) !important;
    background-color: rgba(18, 29, 49, 0.72) !important;
}

.portal-responsive-main-card input:not([type="checkbox"]):not([type="radio"]):focus,
.portal-responsive-main-card textarea:focus,
.portal-responsive-main-card select:focus {
    border-color: rgba(83, 222, 208, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(83, 222, 208, 0.12);
}

.portal-responsive-actions {
    align-items: center;
    border-top: 1px solid rgba(111, 137, 167, 0.16);
    padding-top: 1.35rem;
}

.portal-responsive-actions button,
.portal-responsive-actions a {
    min-height: 3.1rem;
    border-radius: 0.85rem !important;
    padding-inline: 1.15rem !important;
}

.portal-responsive-actions button[type="submit"],
.portal-responsive-actions button[id*="start"],
.portal-responsive-actions button[id*="preview"] + button { box-shadow: 0 0.75rem 1.5rem rgba(7, 126, 123, 0.16); }

.portal-responsive-main-card > .mt-8,
.portal-responsive-main-card > .mt-6[id="result"],
.portal-responsive-main-card > .mt-6[id="preview-area"] { border-color: rgba(111, 137, 167, 0.18) !important; }

.portal-responsive-main-card > .mt-8 h2,
.portal-responsive-main-card > .mt-8 h3 { color: #f2f7fb; font-size: 1rem; }

.portal-responsive-main-card > .mt-8 h2 + p,
.portal-responsive-main-card > .mt-8 h3 + p { margin-top: 0.25rem; color: #8fa2b7; font-size: 0.82rem; }

.portal-responsive-main-card [id="status-message"],
.portal-responsive-main-card [id="progress"],
.portal-responsive-main-card [id="estimated-time-left"] { color: #dce7f0 !important; font-size: 0.86rem; line-height: 1.45; }

.portal-responsive-sidepanel > div {
    border-color: rgba(111, 137, 167, 0.2) !important;
    background: linear-gradient(145deg, rgba(18, 29, 49, 0.9), rgba(8, 22, 36, 0.88)) !important;
    box-shadow: 0 1rem 2.5rem rgba(2, 8, 23, 0.16) !important;
}

.portal-responsive-sidepanel h2 { letter-spacing: -0.02em; }

.portal-responsive-sidepanel p.rounded-2xl {
    border-color: rgba(111, 137, 167, 0.18) !important;
    background: rgba(255, 255, 255, 0.025) !important;
    color: #b8c6d5 !important;
    font-size: 0.8rem;
    line-height: 1.45;
}

html[data-theme="light"] .portal-responsive-main-card::before { background: radial-gradient(circle at 76% 0%, rgba(15, 159, 145, 0.08), transparent 28%); }
html[data-theme="light"] .portal-responsive-main-card .portal-responsive-hero-copy > p:last-child { color: #5d6c84 !important; }

html[data-theme="light"] .portal-responsive-main-card:not(.portal-login-card) form > div,
html[data-theme="light"] .portal-responsive-main-card > div[id="upload-form"] > div,
html[data-theme="light"] .portal-responsive-main-card > div[id="automation-form"] > div {
    border-color: rgba(105, 133, 164, 0.2) !important;
    background: rgba(241, 246, 250, 0.78) !important;
}

html[data-theme="light"] .portal-responsive-main-card label { color: #405067 !important; }

html[data-theme="light"] .portal-responsive-main-card input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] .portal-responsive-main-card textarea,
html[data-theme="light"] .portal-responsive-main-card select { border-color: rgba(105, 133, 164, 0.28) !important; background-color: #ffffff !important; color: #182338 !important; }

html[data-theme="light"] .portal-responsive-main-card > .mt-8 h2,
html[data-theme="light"] .portal-responsive-main-card > .mt-8 h3 { color: #182338; }

html[data-theme="light"] .portal-responsive-main-card [id="status-message"],
html[data-theme="light"] .portal-responsive-main-card [id="progress"],
html[data-theme="light"] .portal-responsive-main-card [id="estimated-time-left"] { color: #2f4059 !important; }

html[data-theme="light"] .portal-responsive-sidepanel > div { border-color: rgba(105, 133, 164, 0.2) !important; background: linear-gradient(145deg, #ffffff, #f3f7fa) !important; box-shadow: 0 1rem 2.5rem rgba(55, 78, 108, 0.1) !important; }
html[data-theme="light"] .portal-responsive-sidepanel p.rounded-2xl { border-color: rgba(105, 133, 164, 0.2) !important; background: rgba(238, 244, 249, 0.78) !important; color: #405067 !important; }

@media (max-width: 767px) {
    .portal-main:has(.portal-responsive-main-card) > section { max-width: none; }
    .portal-responsive-main-card { padding: 1.15rem !important; border-radius: 1.35rem !important; }
    .portal-responsive-main-card .portal-responsive-hero { margin-bottom: 1.5rem !important; }
    .portal-responsive-main-card .portal-responsive-hero-copy h1:not(.portal-page-title) { font-size: clamp(1.75rem, 8vw, 2.45rem); }
    .portal-responsive-main-card .portal-responsive-hero-copy > p:last-child { font-size: 0.9rem; line-height: 1.5; }
    .portal-responsive-actions { align-items: stretch; }
    .portal-responsive-actions > * { width: 100%; }
    .portal-responsive-sidepanel { margin-top: 0.25rem; }
}

.portal-sienge-actions { align-items: center; gap: 0.75rem !important; }
.portal-sienge-actions > a { min-height: 2.75rem; border-radius: 0.8rem !important; padding: 0.65rem 1rem !important; }

.portal-automation-result-card {
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 0.9rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.78);
    text-align: center;
}

.portal-automation-result-card.is-success {
    border-color: rgba(74, 222, 128, 0.5);
    background: rgba(20, 83, 45, 0.3);
}

.portal-automation-result-card.is-warning {
    border-color: rgba(251, 191, 36, 0.62);
    background: rgba(120, 53, 15, 0.3);
}

.portal-automation-result-card.is-error {
    border-color: rgba(248, 113, 113, 0.62);
    background: rgba(127, 29, 29, 0.3);
}

.portal-automation-result-heading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: 100%;
}

.portal-automation-result-icon {
    flex: 0 0 auto;
    font-size: 1.05rem;
}

.portal-automation-result-title {
    min-width: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.portal-automation-result-card.is-success .portal-automation-result-icon,
.portal-automation-result-card.is-success .portal-automation-result-title { color: #86efac; }

.portal-automation-result-card.is-warning .portal-automation-result-icon,
.portal-automation-result-card.is-warning .portal-automation-result-title { color: #fcd34d; }

.portal-automation-result-card.is-error .portal-automation-result-icon,
.portal-automation-result-card.is-error .portal-automation-result-title { color: #fca5a5; }

.portal-automation-result-summary { color: #dbe5ee; }
.portal-automation-result-error { color: #fca5a5; }

.portal-automation-result-warnings {
    margin-top: 0.75rem;
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 0.65rem;
    padding: 0.75rem;
    background: rgba(120, 53, 15, 0.24);
    color: #fde68a;
    text-align: left;
}

.portal-automation-result-warnings-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 700;
}

.portal-automation-result-warnings ul {
    max-height: 10rem;
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    overflow: auto;
    font-size: 0.8rem;
    line-height: 1.45;
}

.portal-download-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    max-width: 100%;
    border: 1px solid rgba(103, 232, 249, 0.5);
    border-radius: 0.65rem;
    padding: 0.55rem 0.8rem;
    background: rgba(8, 145, 178, 0.28);
    color: #cffafe !important;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.portal-download-link:hover {
    border-color: rgba(165, 243, 252, 0.85);
    background: rgba(8, 145, 178, 0.48);
    color: #ffffff !important;
}

html[data-theme="light"] .portal-automation-result-card {
    background: #ffffff;
    box-shadow: 0 0.75rem 1.5rem rgba(55, 78, 108, 0.08);
}

html[data-theme="light"] .portal-automation-result-card.is-success {
    border-color: #86efac;
    background: #f0fdf4;
}

html[data-theme="light"] .portal-automation-result-card.is-warning {
    border-color: #fbbf24;
    background: #fffbeb;
}

html[data-theme="light"] .portal-automation-result-card.is-error {
    border-color: #fca5a5;
    background: #fef2f2;
}

html[data-theme="light"] .portal-automation-result-card.is-success .portal-automation-result-icon,
html[data-theme="light"] .portal-automation-result-card.is-success .portal-automation-result-title { color: #166534 !important; }

html[data-theme="light"] .portal-automation-result-card.is-warning .portal-automation-result-icon,
html[data-theme="light"] .portal-automation-result-card.is-warning .portal-automation-result-title { color: #92400e !important; }

html[data-theme="light"] .portal-automation-result-card.is-error .portal-automation-result-icon,
html[data-theme="light"] .portal-automation-result-card.is-error .portal-automation-result-title { color: #b91c1c !important; }

html[data-theme="light"] .portal-automation-result-summary { color: #405067 !important; }
html[data-theme="light"] .portal-automation-result-error { color: #b91c1c !important; }

html[data-theme="light"] .portal-automation-result-warnings {
    border-color: #fbbf24;
    background: #fff7d6;
    color: #78350f;
}

html[data-theme="light"] .portal-download-link {
    border-color: #0284c7;
    background: #e0f2fe;
    color: #075985 !important;
}

html[data-theme="light"] .portal-download-link:hover {
    border-color: #0369a1;
    background: #bae6fd;
    color: #0c4a6e !important;
}

@media (max-width: 639px) { .portal-sienge-actions > a { width: 100%; } }

/* Conteúdo das ferramentas PDF e operações. As prioridades abaixo substituem
   os estilos utilitários e regras antigas com !important, sem afetar o shell. */
#page-content .portal-operation-page {
    --operation-accent: #22d3ee;
    --operation-ink: #06283b;
    --operation-soft: rgba(34, 211, 238, 0.07);
    --operation-line: rgba(103, 190, 215, 0.24);
    color: var(--portal-text-primary);
    min-width: 0;
}
html[data-theme="light"] #page-content .portal-operation-page {
    --operation-accent: #087da4;
    --operation-soft: #eefaff;
    --operation-line: #cce4f1;
}
#page-content .portal-operation-page .portal-operation-header {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-4);
    margin: 0 0 var(--ui-space-5) !important;
    max-width: none;
}
#page-content .portal-operation-page .portal-operation-header > span {
    width: 3.25rem;
    height: 3.25rem;
    border: 1px solid var(--operation-accent);
    border-radius: var(--ui-radius-md);
    background: var(--operation-soft) !important;
    color: var(--operation-accent) !important;
}
#page-content .portal-operation-page .portal-responsive-hero-copy { min-width: 0; }
#page-content .portal-operation-page .portal-operation-header .portal-page-title {
    margin: 0;
    font-size: clamp(1.45rem, 2.2vw, 2.25rem);
    line-height: 1.2;
    color: var(--portal-text-primary) !important;
}
#page-content .portal-operation-page .portal-operation-header .portal-responsive-hero-copy > p:first-child {
    margin: 0 0 0.25rem;
    color: var(--operation-accent) !important;
    font-size: var(--ui-text-xs);
    letter-spacing: 0.08em;
}
#page-content .portal-operation-page .portal-operation-header .portal-responsive-hero-copy > p:last-child {
    margin-top: 0.45rem;
    color: var(--portal-text-muted) !important;
    font-size: var(--ui-text-sm);
    line-height: 1.55;
}
#page-content .portal-operation-page .portal-operation-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
    align-items: start;
    gap: var(--ui-space-5);
}
#page-content .portal-operation-page .portal-operation-content {
    min-width: 0;
    padding: var(--ui-space-5) !important;
    border: 1px solid var(--operation-line) !important;
    border-radius: var(--ui-radius-md) !important;
    background: var(--portal-surface) !important;
    box-shadow: none !important;
    overflow: visible;
}
#page-content .portal-operation-page .portal-operation-content::before { display: none; }
#page-content .portal-operation-page .portal-operation-content form > div,
#page-content .portal-operation-page .portal-operation-content form > div > div:not([id]),
#page-content .portal-operation-page .portal-operation-content #suffix-field,
#page-content .portal-operation-page .portal-operation-content #cpa-actions-grid > div,
#page-content .portal-operation-page .portal-operation-content #cpa-note-box,
#page-content .portal-operation-page .portal-operation-content #cielo-upload-card,
#page-content .portal-operation-page .portal-operation-content #cielo-api-card {
    min-width: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0;
    box-shadow: none;
}
#page-content .portal-operation-page .portal-operation-content form > div + div { margin-top: var(--ui-space-5); }
#page-content .portal-operation-page .portal-operation-content label {
    font-size: var(--ui-text-sm) !important;
    font-weight: var(--ui-weight-semibold);
    letter-spacing: normal;
    text-transform: none;
    color: var(--portal-text-primary) !important;
}
#page-content .portal-operation-page .portal-operation-content :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    max-width: 100%;
    min-width: 0;
    border: 1px solid var(--operation-line) !important;
    border-radius: var(--ui-radius-sm);
    background: var(--portal-card-muted) !important;
    color: var(--portal-text-primary) !important;
}
#page-content .portal-operation-page .portal-operation-content :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--operation-accent);
    outline-offset: 2px;
    box-shadow: var(--ui-focus-ring);
}
#page-content .portal-operation-page .portal-operation-content input[type="file"] {
    min-height: 5rem;
    padding: 1rem;
    border-style: dashed !important;
    background: var(--operation-soft) !important;
    font-size: var(--ui-text-sm);
}
#page-content .portal-operation-page .portal-operation-content input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    border: 1px solid var(--operation-line);
    border-radius: var(--ui-radius-sm);
    padding: 0.65rem;
    background: var(--portal-surface);
    color: var(--operation-accent);
}
#page-content .portal-operation-page .portal-sienge-actions { margin-bottom: var(--ui-space-5); flex-wrap: wrap; }
#page-content .portal-operation-page .portal-operation-content :is(button, a.inline-flex, label.cursor-pointer) {
    border: 1px solid var(--operation-line);
    border-color: var(--operation-line) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: transparent !important;
    color: var(--operation-accent) !important;
    box-shadow: none !important;
    min-height: var(--ui-control-min-height);
    white-space: normal;
}
#page-content .portal-operation-page .portal-operation-content :is(button, a, label):focus-visible {
    outline: 2px solid var(--operation-accent);
    outline-offset: 3px;
}
#page-content .portal-operation-page .portal-operation-content :is(button[type="submit"], #start-automation-btn),
#page-content .portal-operation-page .portal-operation-content > a[href*="download-zip"] {
    background: #22d3ee !important;
    border-color: #22d3ee !important;
    color: var(--operation-ink) !important;
    font-weight: var(--ui-weight-bold);
}
#page-content .portal-operation-page .portal-operation-content #cielo-api-form button[type="submit"] {
    background: transparent !important;
    border-color: var(--operation-line) !important;
    color: var(--operation-accent) !important;
}
#page-content .portal-operation-page .portal-operation-content button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Feedback compartilhado sem deslocar controles nem animar ações indisponíveis. */
#page-content .portal-operation-page .portal-operation-content :is(button, a.inline-flex, label.cursor-pointer),
#page-content .portal-operation-page .cielo-file-action,
#page-content .portal-operation-page input[type="file"]::file-selector-button {
    transition: background-color 180ms ease, border-color 180ms ease, filter 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
    #page-content .portal-operation-page .portal-operation-content :is(button:enabled, a.inline-flex, label.cursor-pointer):not([aria-disabled="true"]):hover {
        border-color: var(--operation-accent) !important;
        filter: brightness(1.12);
    }
    #page-content .portal-operation-page .portal-operation-content :is(button:enabled:not([type="submit"]):not(#start-automation-btn), a.inline-flex:not([href*="download-zip"]), label.cursor-pointer):not([aria-disabled="true"]):hover,
    #page-content .portal-operation-page .portal-operation-content #cielo-api-form button[type="submit"]:enabled:hover {
        background: color-mix(in srgb, var(--operation-accent) 14%, transparent) !important;
    }
    #page-content .portal-operation-page .cielo-upload-control:hover .cielo-file-action,
    #page-content .portal-operation-page input[type="file"]:enabled:hover::file-selector-button {
        background: color-mix(in srgb, var(--operation-accent) 14%, var(--portal-surface)) !important;
        border-color: var(--operation-accent);
    }
}
#page-content .portal-operation-page .portal-operation-content :is(button:enabled, a.inline-flex, label.cursor-pointer):not([aria-disabled="true"]):active {
    filter: brightness(0.94);
}
@media (prefers-reduced-motion: reduce) {
    #page-content .portal-operation-page .portal-operation-content :is(button, a.inline-flex, label.cursor-pointer),
    #page-content .portal-operation-page .cielo-file-action,
    #page-content .portal-operation-page input[type="file"]::file-selector-button {
        transition: none;
    }
}
#page-content .portal-operation-page .portal-operation-content form > .portal-responsive-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-3);
    padding-top: var(--ui-space-4);
    border-top: 1px solid var(--operation-line) !important;
}
#page-content .portal-operation-page .portal-operation-content #file-list { min-height: 7rem; }
#page-content .portal-operation-page .portal-operation-content :is(#result, #preview-area):empty { margin: 0; }
#page-content .portal-operation-page .operation-column-reference {
    margin-top: var(--ui-space-5);
    padding: var(--ui-space-4) 0 0;
    border: 0;
    border-top: 1px solid var(--operation-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
#page-content .portal-operation-page .operation-column-reference > div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--ui-space-3);
}
#page-content .portal-operation-page .operation-column-reference p {
    min-width: 0;
    margin: 0;
    padding: 0.5rem 0;
    border: 0;
    background: transparent;
    overflow-wrap: anywhere;
}
#page-content .portal-operation-page .portal-operation-guide {
    position: static;
    min-width: 0;
    padding: var(--ui-space-5);
    border: 1px solid var(--operation-line);
    border-radius: var(--ui-radius-md);
    background: var(--operation-soft);
}
#page-content .portal-operation-page .portal-operation-guide > div {
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
#page-content .portal-operation-page .portal-operation-guide h2 {
    color: var(--portal-text-primary) !important;
    font-size: var(--ui-text-lg);
    font-weight: var(--ui-weight-bold);
    line-height: 1.4;
}
.operation-instructions h2 { display: flex; align-items: center; gap: 0.65rem; }
.operation-instructions h2 i { color: var(--operation-accent); }
.operation-instruction-list { list-style: none; counter-reset: operation-guide; padding: 0; margin: 1rem 0 0; }
.operation-instruction-list li {
    counter-increment: operation-guide;
    display: grid;
    grid-template-columns: 1.9rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.5rem 0;
    color: var(--portal-text-soft);
    font-size: var(--ui-text-sm);
    line-height: 1.6;
}
.operation-instruction-list li::before {
    content: counter(operation-guide);
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: #22d3ee;
    color: var(--operation-ink);
    font-weight: var(--ui-weight-bold);
}
#page-content .portal-operation-page .portal-operation-guide .operational-privacy-card {
    padding: var(--ui-space-4);
    margin-top: var(--ui-space-5);
    border-radius: var(--ui-radius-sm) !important;
    background: var(--portal-card-muted) !important;
}
#page-content .portal-operation-page .portal-operation-guide p { color: var(--portal-text-soft) !important; }
#page-content .portal-operation-page .portal-operation-guide p.rounded-2xl {
    background: transparent !important;
    border: 0;
    border-bottom: 1px solid var(--operation-line);
    border-radius: 0;
    padding: 0.5rem 0;
}
#page-content .portal-operation-page .portal-operation-status {
    margin-top: var(--ui-space-5);
    padding: var(--ui-space-5);
    background: var(--portal-surface) !important;
    border: 1px solid var(--operation-line) !important;
    border-radius: var(--ui-radius-md);
}
#page-content .portal-operation-page .portal-operation-status :is(h2, h3) { color: var(--portal-text-primary) !important; }
#page-content .portal-operation-page .portal-operation-status p { color: var(--portal-text-soft) !important; }
#page-content .portal-operation-page .portal-operation-status > .grid > div {
    padding: 0;
    border: 0;
    background: transparent;
}
#page-content .portal-operation-page .portal-operation-status :is(.h-4, .portal-progress-bar) { height: 0.65rem; }
#page-content .portal-operation-page .portal-operation-status .portal-progress-bar { background: #22d3ee; }
#page-content .portal-operation-page .portal-operation-status > .h-4 { background: var(--portal-border-strong); }
#page-content .portal-operation-page #cpa-upload-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
#page-content .portal-operation-page .portal-responsive-upload-head { flex-wrap: wrap; }
#page-content .portal-operation-page .portal-responsive-upload-head label { flex-shrink: 0; word-break: normal; }
#page-content .portal-operation-page .cielo-file-action {
    background: transparent !important;
    border: 1px solid var(--operation-line);
    color: var(--operation-accent) !important;
}
#page-content .portal-operation-page .operation-fields-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ui-space-5);
}
#page-content .portal-operation-page .operation-fields-grid > div { grid-column: 1 / -1; margin: 0 !important; }
#page-content .portal-operation-page .operation-fields-grid > .operation-half { grid-column: span 1; }
@media (max-width: 1100px) {
    #page-content .portal-operation-page .portal-operation-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
    #page-content .portal-operation-page .portal-operation-content,
    #page-content .portal-operation-page .portal-operation-guide,
    #page-content .portal-operation-page .portal-operation-status { padding: var(--ui-space-4) !important; }
    #page-content .portal-operation-page .portal-operation-header { gap: var(--ui-space-3); }
    #page-content .portal-operation-page .portal-operation-header > span { width: 2.75rem; height: 2.75rem; }
    #page-content .portal-operation-page .operation-fields-grid { grid-template-columns: minmax(0, 1fr); }
    #page-content .portal-operation-page .operation-fields-grid > .operation-half { grid-column: 1 / -1; }
    #page-content .portal-operation-page .portal-operation-content .portal-responsive-actions { align-items: stretch; }
    #page-content .portal-operation-page .portal-operation-content .portal-responsive-actions > button { width: 100%; }
    #page-content .portal-operation-page .portal-operation-content input[type="file"] { padding: 0.65rem; }
}

/* Seleção visual e ordenação local dos arquivos de Juntar PDF. */
#page-content .pdf-merge-page [hidden] { display: none !important; }
#page-content .pdf-merge-page #error-message:not([hidden]) { display: block; color: #fda4af !important; text-align: left; }
html[data-theme="light"] #page-content .pdf-merge-page #error-message:not([hidden]) { color: #b91c1c !important; }
#page-content .portal-operation-page .pdf-dropzone {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px dashed var(--operation-accent);
    border-radius: var(--ui-radius-md);
    background: var(--operation-soft);
    text-align: left;
    transition: background-color 180ms ease, box-shadow 180ms ease;
}
#page-content .portal-operation-page .pdf-dropzone.is-dragover {
    background: color-mix(in srgb, var(--operation-accent) 18%, var(--portal-surface));
    box-shadow: var(--ui-focus-ring);
}
.pdf-drop-icon { color: var(--operation-accent); font-size: 2rem; }
/* Cores dos formatos de documento nas ferramentas e serviços operacionais. */
.portal-operation-page { --operation-excel-icon: #34d399; --operation-pdf-icon: #f87171; }
html[data-theme="light"] .portal-operation-page { --operation-excel-icon: #15803d; --operation-pdf-icon: #dc2626; }
#page-content .portal-operation-page :is(.bi-file-excel, .bi-file-earmark-excel, .bi-file-earmark-spreadsheet, .bi-file-spreadsheet, .bi-filetype-xlsx, .bi-filetype-xls),
#page-content .portal-operation-page [data-extension="xlsx"] > .pdf-drop-icon { color: var(--operation-excel-icon); }
#page-content .portal-operation-page :is(.bi-file-pdf, .bi-file-earmark-pdf, .bi-filetype-pdf),
#page-content .portal-operation-page [data-extension="pdf"] > .pdf-drop-icon { color: var(--operation-pdf-icon); }
.pdf-drop-copy { min-width: 0; overflow-wrap: anywhere; }
.pdf-dropzone input[hidden] { display: none !important; }
.pdf-dropzone h2 { font-size: var(--ui-text-lg); font-weight: var(--ui-weight-bold); }
.pdf-dropzone p { color: var(--portal-text-muted); font-size: var(--ui-text-sm); }
#page-content .portal-operation-page :is(#select-pdfs, .pdf-select-button) { padding: 0.65rem 1.5rem; background: var(--operation-soft) !important; }
.pdf-file-count { flex-shrink: 0; border: 1px solid var(--operation-line); border-radius: 2rem; padding: 0.3rem 0.7rem; font-size: var(--ui-text-xs); color: var(--portal-text-muted); }
.pdf-empty-state { display: grid; justify-items: center; gap: 0.5rem; padding: 1.75rem 1rem; border: 1px dashed var(--operation-line); border-radius: var(--ui-radius-md); color: var(--portal-text-muted); text-align: center; }
.pdf-empty-state i { font-size: 2rem; }
#page-content .pdf-merge-page #file-list.pdf-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
    max-height: none;
}
#page-content .pdf-merge-page #file-list:empty { display: none; }
.pdf-file-card { min-width: 0; padding: 0.75rem; border: 1px solid var(--operation-line); border-radius: var(--ui-radius-md); background: var(--portal-card-muted); cursor: grab; }
.pdf-file-card.is-dragging { opacity: 0.45; }
.pdf-file-card.is-drop-target { outline: 2px solid var(--operation-accent); outline-offset: 2px; }
.pdf-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; margin-bottom: 0.65rem; }
.pdf-position { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; flex-shrink: 0; border-radius: 50%; background: #22d3ee; color: #06283b; font-size: var(--ui-text-xs); font-weight: var(--ui-weight-bold); }
.pdf-drag-label { font-size: 0.65rem; color: var(--portal-text-muted); }
.pdf-thumbnail { height: 13rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.5rem; background: var(--operation-soft); border-radius: var(--ui-radius-sm); overflow: hidden; }
.pdf-thumbnail > i { font-size: 2.5rem; color: var(--operation-accent); }
.pdf-thumbnail-message { font-size: var(--ui-text-xs); color: var(--portal-text-muted); text-align: center; }
.pdf-thumbnail:has(iframe) { display: block; }
.pdf-thumbnail iframe { width: 400%; height: 400%; border: 0; pointer-events: none; background: white; transform: scale(0.25); transform-origin: top left; }
.pdf-filename { margin-top: 0.7rem; font-weight: var(--ui-weight-semibold); font-size: var(--ui-text-sm); overflow-wrap: anywhere; }
.pdf-card-actions { display: flex; gap: 0.4rem; margin-top: 0.7rem; }
#page-content .pdf-merge-page .pdf-card-actions button { flex: 1; min-width: 0; padding: 0.45rem; }
@media (max-width: 639px) {
    #page-content .pdf-merge-page #file-list.pdf-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
    .pdf-file-card { padding: 0.5rem; }
    .pdf-thumbnail { height: 10rem; padding: 0.25rem; }
    .pdf-drag-label { display: none; }
    .pdf-card-actions { gap: 0.2rem; }
    #page-content .portal-operation-page .pdf-dropzone { grid-template-columns: auto minmax(0, 1fr); gap: 0.65rem; padding: 0.75rem; }
    #page-content .portal-operation-page :is(#select-pdfs, .pdf-select-button) { grid-column: 1 / -1; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .pdf-dropzone { transition: none; } }

/* Automação de boletos: escolha de ação e acompanhamento compacto. */
#page-content .bot-operation-page [hidden] { display: none !important; }
.bot-settings { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.25rem; align-items: end; }
.bot-action-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
#page-content .bot-operation-page .bot-action-option { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; margin: 0; border: 1px solid var(--operation-line); border-radius: var(--ui-radius-sm); cursor: pointer; text-transform: none; letter-spacing: normal; transition: background-color 180ms ease, border-color 180ms ease; }
.bot-action-option:has(:checked) { background: var(--operation-soft); border-color: var(--operation-accent) !important; }
.bot-action-option:hover { background: var(--operation-soft); }
.bot-action-option:focus-within { outline: 2px solid var(--operation-accent); outline-offset: 2px; }
#page-content .bot-operation-page .bot-action-option input { width: 1.15rem; height: 1.15rem; min-height: 0; flex-shrink: 0; accent-color: var(--operation-accent); }
.bot-action-option > i { font-size: 1.75rem; color: var(--operation-accent); }
.bot-action-option strong, .bot-action-option small { display: block; }
.bot-action-option small { margin-top: 0.25rem; color: var(--portal-text-muted); font-weight: normal; }
.bot-start-hint { color: var(--portal-text-muted); font-size: var(--ui-text-sm); }
#start-automation-btn:not(:disabled) ~ .bot-start-hint { display: none; }
#page-content .bot-operation-page .bot-status-details > div { background: transparent; border: 0; border-radius: 0; padding: 0.5rem 1rem; }
#page-content .bot-operation-page .bot-status-details > div + div { border-left: 1px solid var(--operation-line); }
@media (max-width: 1100px) { .bot-settings { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .bot-action-options { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { #page-content .bot-operation-page .bot-status-details > div + div { border-left: 0; border-top: 1px solid var(--operation-line); } }
@media (prefers-reduced-motion: reduce) { #page-content .bot-operation-page .bot-action-option { transition: none; } }

/* Contas a Receber Freddo: modelo, cookie e upload. */
.cr-model-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem; margin-bottom: 1.25rem; background: var(--operation-soft); border: 1px solid var(--operation-line); border-radius: var(--ui-radius-sm); }
.cr-model-banner > i { font-size: 2rem; color: var(--operation-accent); }
.cr-model-banner h2 { font-weight: var(--ui-weight-bold); }
.cr-model-banner p { color: var(--portal-text-muted); font-size: var(--ui-text-sm); margin-top: 0.25rem; }
.cr-cookie-field { position: relative; }
#page-content :is(.cr-freddo-page, .cr-sienge-page, .cr-baixa-page, .alocacao-page) #cookie_header { padding-right: 3.5rem; }
#page-content :is(.cr-freddo-page, .cr-sienge-page, .cr-baixa-page, .alocacao-page) #cr-toggle-cookie { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); padding: 0.5rem; min-height: 2.5rem; border: 0 !important; background: transparent !important; }
#page-content :is(.cr-freddo-page, .cr-sienge-page, .cr-baixa-page, .alocacao-page) [hidden] { display: none !important; }
@media (max-width: 767px) { .cr-model-banner { grid-template-columns: auto minmax(0, 1fr); } .cr-model-banner a { grid-column: 1 / -1; } }

.cr-columns-summary { cursor: pointer; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; color: var(--portal-text); }
.cr-columns-summary span { color: var(--operation-accent); font-size: var(--ui-text-sm); }
#page-content .cr-sienge-page details.operation-column-reference { box-shadow: none; border: 1px solid var(--operation-line) !important; border-radius: var(--ui-radius-sm) !important; padding: 1rem; background: transparent !important; }

.cr-baixa-data-title { grid-column: 1 / -1; border-top: 1px solid var(--operation-line); padding-top: 1rem; }
.cr-baixa-page #cr-sheet-dropzone { grid-template-columns: auto minmax(0, 1fr); }
.cr-baixa-page #cr-select-file { grid-column: 1 / -1; }
