/* ==========================================================================
   Painel de envios — Filas Autorizador
   Portado da identidade visual da tela "Envio de faturamento TISS"
   (autorizador: site/autorizador/css/faturamento_xml.css). Mesmo prefixo fx-,
   mesmas cores, raios, espaçamentos e componentes (seções, pills, tabelas,
   alertas, detalhes técnicos, estados vazios). Sem dependências externas.
   ========================================================================== */

:root {
    --fx-primary: #A30000;
    --fx-primary-dark: #720000;
    --fx-primary-border: #8a0000;
    --fx-text: #1f2937;
    --fx-text-strong: #111827;
    --fx-muted: #6b7280;
    --fx-border: #e5e7eb;
    --fx-border-soft: #eef0f3;
    --fx-bg: #f3f4f6;
    --fx-focus: #1d4ed8;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body.fx-body {
    margin: 0;
    background: var(--fx-bg);
    color: var(--fx-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.fx-shell {
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px 24px 48px;
}

.fx-page p {
    margin: 0 0 8px;
}

.fx-page p:last-child {
    margin-bottom: 0;
}

.fx-page h1,
.fx-page h2,
.fx-page h3 {
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: var(--fx-text-strong);
}

.fx-page a {
    color: var(--fx-primary);
}

.fx-page a:hover {
    color: var(--fx-primary-dark);
}

.fx-page a:focus-visible,
.fx-page button:focus-visible,
.fx-page input:focus-visible,
.fx-page select:focus-visible,
.fx-page summary:focus-visible,
.fx-page [tabindex]:focus-visible {
    outline: 2px solid var(--fx-focus);
    outline-offset: 2px;
}

.fx-skip {
    position: absolute;
    left: -9999px;
    top: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--fx-border);
    border-radius: 4px;
    color: var(--fx-text-strong);
    z-index: 10;
}

.fx-skip:focus {
    left: 8px;
}

.fx-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.fx-muted {
    color: var(--fx-muted);
}

.fx-small {
    font-size: 12px;
}

.fx-mono {
    font-family: Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
}

.fx-danger-text {
    color: #b91c1c;
}

.fx-icon {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Botões (mesma aparência dos .btn do tema da tela TISS)
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #fff;
    color: var(--fx-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn-sm {
    padding: 5px 12px;
    font-size: 12px;
}

.btn-primary {
    background: var(--fx-primary);
    border-color: var(--fx-primary-border);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--fx-primary-dark);
    border-color: #5a0000;
    color: #fff;
}

.btn-default {
    border-color: #d1d5db;
}

.btn-default:hover,
.btn-default:focus-visible {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: var(--fx-text-strong);
}

.btn-link {
    background: transparent;
    color: #374151;
    padding-left: 8px;
    padding-right: 8px;
}

.btn-link:hover,
.btn-link:focus-visible {
    color: var(--fx-text-strong);
    text-decoration: underline;
}

.btn-link.fx-danger {
    color: #b91c1c;
}

.btn-link.fx-danger:hover,
.btn-link.fx-danger:focus-visible {
    color: #7f1d1d;
}

.btn[disabled],
.btn[aria-busy="true"] {
    cursor: not-allowed;
}

.btn-primary[disabled],
.btn-primary[aria-busy="true"] {
    background: #c9c9c9;
    border-color: #bdbdbd;
    color: #fff;
}

.btn-default[disabled],
.btn-link[disabled],
.btn-default[aria-busy="true"],
.btn-link[aria-busy="true"] {
    opacity: .45;
}

/* --------------------------------------------------------------------------
   Cabeçalho da página
   -------------------------------------------------------------------------- */

.fx-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 4px 0 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--fx-border);
}

.fx-page-header h1 {
    margin: 0 0 4px;
    font-size: 22px;
    line-height: 1.25;
}

.fx-page-header p {
    margin: 0;
    color: var(--fx-muted);
}

.fx-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.fx-header-actions form {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */

.fx-body--login .fx-shell {
    max-width: 480px;
    padding-top: 48px;
}

.fx-login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fx-login-form .fx-field {
    min-width: 0;
}

.fx-login .fx-alert {
    margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Navegação entre seções
   -------------------------------------------------------------------------- */

.fx-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 0;
    border-bottom: 1px solid var(--fx-border);
}

.fx-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -1px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.fx-tabs a:hover {
    color: var(--fx-primary);
    background: rgba(255, 255, 255, .55);
}

.fx-tabs a[aria-current="page"] {
    background: #fff;
    border-color: var(--fx-border);
    color: var(--fx-text-strong);
}

.fx-tabs + .fx-section {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0;
}

.fx-tab-count {
    min-width: 1.25em;
    padding: 0 6px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.fx-tab-count.is-danger {
    background: #fef2f2;
    color: #991b1b;
}

/* --------------------------------------------------------------------------
   Pipeline do lote (quando o filtro de lote está ativo)
   -------------------------------------------------------------------------- */

.fx-pipeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fx-pipeline-step {
    min-width: 0;
}

.fx-pipeline-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fx-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* --------------------------------------------------------------------------
   Resumo operacional
   -------------------------------------------------------------------------- */

.fx-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.fx-summary li {
    background: #fff;
    border: 1px solid var(--fx-border);
    border-radius: 6px;
    padding: 12px 16px;
}

.fx-summary .fx-summary-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--fx-muted);
}

.fx-summary .fx-summary-value {
    display: block;
    margin-top: 2px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--fx-text-strong);
    font-variant-numeric: tabular-nums;
}

.fx-summary li.is-success .fx-summary-value { color: #166534; }
.fx-summary li.is-warn .fx-summary-value { color: #92400e; }
.fx-summary li.is-danger .fx-summary-value { color: #991b1b; }
.fx-summary li.is-zero .fx-summary-value { color: var(--fx-muted); }

/* --------------------------------------------------------------------------
   Seções
   -------------------------------------------------------------------------- */

.fx-section {
    background: #fff;
    border: 1px solid var(--fx-border);
    border-radius: 6px;
    margin-bottom: 20px;
}

.fx-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--fx-border-soft);
}

.fx-section-head h2 {
    font-size: 16px;
}

.fx-section-head h2 .fx-muted {
    margin-left: 8px;
    font-weight: 400;
    font-size: 13px;
}

.fx-section-body {
    padding: 20px;
}

.fx-section-body + .fx-table-wrap {
    border-top: 1px solid var(--fx-border-soft);
}

/* --------------------------------------------------------------------------
   Filtros
   -------------------------------------------------------------------------- */

.fx-filters {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin: 0;
}

.fx-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}

.fx-field--date {
    min-width: 150px;
}

.fx-field label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.fx-field input,
.fx-field select {
    height: 34px;
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: var(--fx-text-strong);
    font: inherit;
    font-size: 13px;
}

.fx-field input:focus,
.fx-field select:focus {
    outline: none;
    border-color: var(--fx-focus);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .2);
}

.fx-filters-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fx-filters-actions .btn {
    height: 34px;
}

/* --------------------------------------------------------------------------
   Alertas
   -------------------------------------------------------------------------- */

.fx-alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    margin-bottom: 16px;
    border: 1px solid;
    border-left-width: 4px;
    border-radius: 6px;
    background: #fff;
}

.fx-alert > .fx-icon {
    margin-top: 3px;
    font-size: 16px;
}

.fx-alert-body {
    flex: 1 1 auto;
    min-width: 0;
}

.fx-alert-title {
    margin: 0 0 2px;
    font-weight: 600;
    color: var(--fx-text-strong);
}

.fx-alert-body p {
    margin: 0;
}

.fx-alert--info { border-color: #bfdbfe; border-left-color: #1d4ed8; background: #f5f8ff; }
.fx-alert--info > .fx-icon { color: #1d4ed8; }
.fx-alert--success { border-color: #bbf7d0; border-left-color: #15803d; background: #f6fdf8; }
.fx-alert--success > .fx-icon { color: #15803d; }
.fx-alert--warn { border-color: #fde68a; border-left-color: #b45309; background: #fffbeb; }
.fx-alert--warn > .fx-icon { color: #b45309; }
.fx-alert--danger { border-color: #fecaca; border-left-color: #b91c1c; background: #fef5f5; }
.fx-alert--danger > .fx-icon { color: #b91c1c; }

.fx-alert-close {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 0 2px;
    color: var(--fx-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.fx-alert-close:hover {
    color: var(--fx-text-strong);
}

/* --------------------------------------------------------------------------
   Pills de status
   -------------------------------------------------------------------------- */

.fx-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    border: 1px solid;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    background: #fff;
}

.fx-status .fx-icon {
    font-size: 12px;
}

.fx-status--neutral { color: #374151; border-color: #d1d5db; background: #f9fafb; }
.fx-status--info { color: #1e40af; border-color: #bfdbfe; background: #eff6ff; }
.fx-status--warn { color: #92400e; border-color: #fde68a; background: #fffbeb; }
.fx-status--danger { color: #991b1b; border-color: #fecaca; background: #fef2f2; }
.fx-status--success { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.fx-status--primary { color: #7a0000; border-color: #f1c0c0; background: #fff5f5; }

/* --------------------------------------------------------------------------
   Tabelas
   -------------------------------------------------------------------------- */

.fx-table-wrap {
    overflow-x: auto;
}

.fx-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.fx-table th,
.fx-table td {
    padding: 10px 14px;
    vertical-align: top;
    border-top: 1px solid var(--fx-border-soft);
    text-align: left;
}

.fx-table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--fx-border);
    background: #f9fafb;
    color: var(--fx-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
    vertical-align: middle;
}

.fx-table tbody tr:first-child td {
    border-top: 0;
}

.fx-table tbody tr {
    transition: background-color .15s ease;
}

.fx-table tbody tr:hover {
    background: #fafbfc;
}

.fx-table td.fx-num,
.fx-table th.fx-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.fx-table .fx-cell-main {
    display: block;
    font-weight: 600;
    color: var(--fx-text-strong);
    white-space: nowrap;
}

.fx-table a.fx-cell-main {
    color: var(--fx-primary);
    text-decoration: none;
}

.fx-table a.fx-cell-main:hover {
    color: var(--fx-primary-dark);
    text-decoration: underline;
}

.fx-table .fx-cell-sub {
    display: block;
    color: var(--fx-muted);
    font-size: 12px;
    margin-top: 1px;
    white-space: nowrap;
}

.fx-table .fx-cell-file {
    display: block;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #374151;
}

.fx-table td.fx-code {
    color: var(--fx-muted);
    font-size: 12px;
    font-family: Menlo, Consolas, "Liberation Mono", monospace;
    white-space: nowrap;
}

.fx-table td.fx-msg {
    min-width: 260px;
    max-width: 480px;
}

.fx-table td.fx-actions {
    white-space: nowrap;
    text-align: right;
}

.fx-table td.fx-actions form {
    display: inline;
    margin: 0;
}

.fx-table td.fx-actions .btn + .btn,
.fx-table td.fx-actions form + form {
    margin-left: 4px;
}

/* Mensagem em dois níveis */

.fx-msg-resumo {
    margin: 0;
    overflow-wrap: anywhere;
}

.fx-details {
    margin-top: 4px;
    font-size: 12px;
}

.fx-details summary {
    display: inline-block;
    cursor: pointer;
    color: #374151;
    font-weight: 600;
    list-style: none;
}

.fx-details summary::-webkit-details-marker {
    display: none;
}

.fx-details summary::before {
    content: "▸";
    display: inline-block;
    width: 12px;
    color: var(--fx-muted);
}

.fx-details[open] summary::before {
    content: "▾";
}

.fx-details summary:hover {
    text-decoration: underline;
}

.fx-details pre {
    margin: 6px 0 0;
    padding: 8px 10px;
    max-height: 260px;
    overflow: auto;
    background: #f3f4f6;
    border: 1px solid var(--fx-border);
    border-radius: 4px;
    color: #374151;
    font-family: Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 11.5px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Estado vazio */

.fx-empty {
    padding: 36px 20px;
    text-align: center;
    color: var(--fx-muted);
}

.fx-empty .fx-icon {
    display: block;
    margin: 0 auto 8px;
    font-size: 26px;
    color: #c7ccd4;
}

.fx-empty.is-success .fx-icon {
    color: #15803d;
}

.fx-empty p {
    margin: 0;
}

.fx-empty p + p {
    margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Paginação
   -------------------------------------------------------------------------- */

.fx-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 12px 20px;
    border-top: 1px solid var(--fx-border-soft);
    font-size: 13px;
}

.fx-pagination-info {
    margin: 0;
    color: var(--fx-muted);
}

.fx-pagination-list {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fx-pagination-list a,
.fx-pagination-list span {
    display: inline-block;
    min-width: 32px;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    color: #374151;
    font-weight: 600;
}

.fx-pagination-list a:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: var(--fx-text-strong);
}

.fx-pagination-list span[aria-current="page"] {
    background: var(--fx-primary);
    border-color: var(--fx-primary-border);
    color: #fff;
}

.fx-pagination-list span.is-disabled {
    color: #9ca3af;
}

.fx-pagination-list span.is-dots {
    color: var(--fx-muted);
}

/* --------------------------------------------------------------------------
   Animação discreta e preferências do usuário
   -------------------------------------------------------------------------- */

@keyframes fx-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.fx-spin {
    animation: fx-spin 1.2s linear infinite;
    transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
    .fx-spin {
        animation-duration: 3s;
    }

    .btn,
    .fx-table tbody tr {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .fx-shell {
        padding: 16px 12px 32px;
    }

    .fx-section-body {
        padding: 16px;
    }

    .fx-section-head {
        padding: 12px 16px;
    }

    .fx-field {
        min-width: 0;
        flex: 1 1 140px;
    }

    .fx-table td.fx-actions {
        text-align: left;
    }

    .fx-table td.fx-msg {
        min-width: 220px;
    }

    .fx-pagination {
        padding: 12px 16px;
    }

    .fx-pipeline {
        grid-template-columns: 1fr;
    }

    .fx-body--login .fx-shell {
        padding-top: 24px;
    }
}