/* ==========================================================================
   Superservice — folha de estilo única do sistema.

   Antes eram dois arquivos (main.css + shadcn.css) e o Font Awesome inteiro
   vindo da CDN. Agora é um arquivo só, na ordem da cascata de antes:
     1. Base e componentes do sistema (várias fases de redesign, mantidas
        na ordem original para o visual não mudar);
     2. Camada shadcn/ui (tokens new-york/zinc + componentes), que mapeia as
        variáveis antigas (--primary, --bg-primary…) para os tokens novos;
     3. Ícones: só os usados, numa fonte própria em /static/fonts — gerados
        por tools/gerar_icones.py (rode de novo ao usar um ícone novo).

   Regras de classes que não existem mais em nenhum template/JS e
   declarações sempre sobrescritas por uma regra posterior do mesmo seletor
   foram removidas na fusão; o resultado foi conferido tela a tela (claro,
   escuro e celular) contra o visual anterior.
   ========================================================================== */

:root {
    /* Acento único, sólido — sem gradiente */

    /* Status dessaturados */

    /* Sombras mínimas — só para elementos flutuantes reais */

    --sidebar-width: 280px;
    --sidebar-collapsed: 80px;
    --topbar-height: 56px;

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;
}

[data-theme="dark"] {
    /* Acento mais claro para contraste em fundo escuro */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    line-height: 1.6;
    transition: var(--transition);
}

.sidebar-toggle {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 18px;
    width: 36px;
    height: 36px;
    border-radius: 0 !important;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle:hover {
    color: var(--primary);
    background: var(--bg-tertiary);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    position: relative;
    font-weight: 500;
    font-size: 14px;
}

.nav-item:hover {
    background: var(--bg-secondary);
    color: var(--primary);
}

.nav-item.active {
    background: var(--bg-tertiary);
    color: var(--primary);
}

.nav-item i {
    font-size: 18px;
    width: 22px;
    text-align: center;
}

.nav-submenu-toggle {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    justify-content: space-between;
    position: relative;
}

.nav-submenu-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.nav-submenu-items.expanded {
    max-height: 500px;
}

.embarcacao-nome {
    flex: 1;
    font-size: 13px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    transform-origin: left center;
    animation: embarcacaoWave 4.5s ease-in-out infinite;
}

.embarcacao-nome i {
    font-size: 15px;
    flex-shrink: 0;
}

@keyframes embarcacaoWave {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    25% {
        transform: translate3d(0, -1px, 0) rotate(-0.35deg);
    }
    50% {
        transform: translate3d(1px, 0, 0) rotate(0.25deg);
    }
    75% {
        transform: translate3d(0, 1px, 0) rotate(-0.2deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .embarcacao-nome {
        animation: none;
    }
}

.user-info {
    min-width: 0;
    max-width: 100%;
    font: inherit;
    text-align: left;
}

.user-info:hover {
    color: var(--primary);
}

.user-info .fa-user-circle {
    flex-shrink: 0;
    font-size: 18px;
}

.user-info #userName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-arrow {
    flex-shrink: 0;
    font-size: 11px;
}

.user-info[aria-expanded="true"] .user-menu-arrow {
    transform: rotate(180deg);
}

.user-menu {
    position: absolute;
    left: 12px;
    bottom: calc(100% + 8px);
    z-index: 1100;
    display: none;
    min-width: 150px;
    padding: 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.user-menu.open {
    display: grid;
    gap: 4px;
}

.user-menu .theme-toggle,
.user-menu .btn-logout {
    min-height: 36px;
    border-radius: var(--radius-sm) !important;
    font: inherit;
}

.user-menu .btn-logout:hover {
    color: var(--danger);
}

.theme-toggle {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    width: 40px;
    height: 40px;
    border-radius: 0 !important;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    font-size: 17px;
}

.theme-toggle:hover {
    background: var(--bg-tertiary);
    color: var(--primary);
}

.user-info {
    transition: color 0.15s ease;
}

.main-content {
    flex: 1;
    transition: var(--transition);
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.content-wrapper {
    flex: 1;
    min-width: 0;
    min-height: calc(100vh - var(--topbar-height));
    display: flex;
    flex-direction: column;
}

.btn {
    cursor: pointer;
    text-decoration: none;
}

.btn-primary:active {
    background: var(--primary-dark);
}

.btn-secondary {
    border: 1px solid var(--border-color);
}

.btn-success:hover {
    background: #0a7a5f;
}

.btn-block {
    justify-content: center;
}

.table-section {
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-bottom: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.table-header h3 {
    font-size: 18px;
    font-weight: 700;
}

.table-responsive {
    overflow-x: auto;
    flex: 1;
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.data-table thead {
    background: var(--bg-tertiary);
    position: sticky;
    top: 0;
    z-index: 10;
}

.data-table th {
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

.data-table th:first-child {
    border-radius: 0;
}

.data-table th:last-child {
    border-radius: 0;
}

.data-table td {
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.data-table td:nth-child(1) {
    min-width: 50px;
    text-align: center;
}

.data-table td:nth-child(2) {
    min-width: 130px;
}

.data-table td:nth-child(3),
.data-table td:nth-child(5),
.data-table td:nth-child(6),
.data-table td:nth-child(7) {
    min-width: 100px;
}

.data-table td:nth-child(4) {
    min-width: 150px;
}

.data-table td:nth-child(8),
.data-table td:nth-child(9),
.data-table td:nth-child(10),
.data-table td:nth-child(11),
.data-table td:nth-child(12),
.data-table td:nth-child(13),
.data-table td:nth-child(14) {
    min-width: 140px;
    text-align: right;
    font-weight: 600;
}

.data-table th:nth-child(8),
.data-table th:nth-child(9),
.data-table th:nth-child(10),
.data-table th:nth-child(11),
.data-table th:nth-child(12),
.data-table th:nth-child(13),
.data-table th:nth-child(14) {
    text-align: right;
}

.data-table td:nth-child(15) {
    min-width: 100px;
    text-align: center;
}

.data-table td:nth-child(16) {
    min-width: 120px;
    text-align: center;
}

.data-table tbody tr:hover {
    background: var(--bg-secondary);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px;
    color: var(--text-secondary);
    font-size: 15px;
}

.text-center {
    text-align: center;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.modal.show {
    display: flex;
}

.modal-content {
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideIn 0.2s ease;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 !important;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.modal-close {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    width: 32px;
    height: 32px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.modal-close:hover {
    color: var(--danger);
    background: rgba(197, 48, 48, 0.08);
    border-color: var(--danger);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    border-radius: 0 !important;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 13px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 0 !important;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg-primary);
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.form-group small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

@media (max-width: 600px) {
    .form-grid-2,
    .form-grid-3 {
        grid-template-columns: 1fr;
    }
}

.form-group.checkbox-inline label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.form-group.checkbox-inline input[type="checkbox"] {
    width: auto;
    cursor: pointer;
}

.toast-container {
    position: fixed;
    z-index: 3000;
    display: flex;
    gap: 10px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 320px;
    animation: toastSlideIn 0.3s ease;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(360px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-success {
    border-left: 3px solid var(--success);
}

.toast-error {
    border-left: 3px solid var(--danger);
}

.toast-warning {
    border-left: 3px solid var(--warning);
}

.toast-info {
    border-left: 3px solid var(--info);
}

.toast-content {
    flex: 1;
    font-size: 14px;
}

/* ── Login ── */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.login-container {
    width: 100%;
    padding: 24px;
    z-index: 1;
}

.login-header img {
    filter: none;
}

.login-header h1 {
    margin: 16px 0 10px;
}

.login-header p {
    color: var(--text-secondary);
    font-size: 14px;
}

.login-form {
    margin-bottom: 20px;
}

/* ── Page layouts ── */
.page-container {
    /* É item do flex .content-wrapper: sem largura definida, assume a
       largura do conteúdo, e um filho largo (barra de abas) esticava a
       página inteira além da tela no celular. */
    width: 100%;
    min-width: 0;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-header h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 700;
}

.search-section {
    margin-bottom: 20px;
}

.search-box {
    background: var(--bg-primary);
    padding: 12px 20px;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border-color);
    transition: var(--transition-fast);
}

.search-box i {
    color: var(--text-secondary);
    font-size: 18px;
}

.search-box input {
    flex: 1;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 15px;
}

.search-box input:focus {
    outline: none;
}

.config-section {
    background: var(--bg-primary);
    border-radius: 0 !important;
    border: 1px solid var(--border-color);
}

.config-section h3 {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Dashboard specific ── */
.dashboard-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--topbar-height));
    min-height: 0;
    overflow: hidden;
}

.dashboard-container .table-responsive {
    overflow-y: auto;
}

.records-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 13px;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pagination-controls .btn {
    min-width: 34px;
}

@media (max-width: 600px) {
    .records-pagination {
        align-items: flex-start;
        flex-direction: column;
    }
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.dashboard-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.search-input {
    padding: 7px 12px;
    border: 1px solid var(--border-color);
    border-radius: 0 !important;
    font-size: 13px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    width: 150px;
    transition: border-color 0.15s;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
}

.search-input::placeholder {
    color: var(--text-muted);
}

/* ── Tabs ── */
.tabs-container {
    min-width: 0;
    max-width: 100%;
}

.tab-buttons {
    border-bottom: 2px solid var(--border-color);
    /* Muitas abas (Configurações): rolam na horizontal em vez de quebrar. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.tab-button {
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}

.tab-button.active {
    font-weight: 600;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ── Responsive ── */

@media (max-width: 768px) {

    .page-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}

/* Cabeçalhos e paginação permanecem visíveis; somente os registros rolam. */
.dashboard-container .table-section {
    min-height: 0;
}

.dashboard-container .table-responsive {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.dashboard-container .data-table thead,
.dashboard-container .data-table th {
    position: sticky;
    top: 0;
    z-index: 12;
    background: var(--bg-tertiary);
}

.dashboard-container .records-pagination {
    position: relative;
    z-index: 13;
    flex: 0 0 auto;
    margin: 0;
    background: var(--bg-primary);
}

.dashboard-container .records-pagination:empty {
    display: none;
}

/* Cadastros operacionais aproveitam toda a largura útil do desktop. */
.page-container.catalog-page {
    width: 100%;
    max-width: none;
    margin: 0;
}

.catalog-page .page-header,
.catalog-page .search-section,
.catalog-page .table-section,
.catalog-page .table-responsive {
    width: 100%;
    min-width: 0;
}

.catalog-page .data-table th:last-child,
.catalog-page .data-table td:last-child {
    width: 1%;
    min-width: 112px;
    white-space: nowrap;
    text-align: right;
}

#origensTable th:first-child,
#origensTable td:first-child {
    width: 18%;
}

#exportadorasTable th:first-child,
#exportadorasTable td:first-child {
    width: 42%;
}

@media (max-width: 768px) {
    .catalog-page .page-header {
        align-items: stretch;
    }

    .catalog-page .page-header .btn {
        justify-content: center;
    }

    .catalog-page .data-table th:last-child,
    .catalog-page .data-table td:last-child {
        min-width: 104px;
    }
}

/* ── Visual refresh: gestão operacional moderna ── */

body {
    font-size: 14px;
}

.sidebar-toggle,
.theme-toggle {
    border-radius: var(--radius-sm) !important;
}

.sidebar-toggle:hover,
.theme-toggle:hover {
    box-shadow: var(--shadow-sm);
}

.nav-item {
    border-radius: var(--radius-sm) !important;
    margin-bottom: 4px;
    padding: 11px 14px;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.nav-item:hover {
    transform: translateX(2px);
}

.nav-item.active {
    border-left: 0;
    box-shadow: inset 3px 0 0 var(--primary);
    background: color-mix(in srgb, var(--primary) 9%, var(--bg-primary));
}

.main-content {
    background: var(--bg-secondary);
}

.content-wrapper[class~="pl-[0px]"][class~="pr-[0px]"][class~="pt-[0px]"][class~="pb-[0px]"] {
    padding: 0;
}

.btn {
    letter-spacing: 0;
}

.btn:hover:not(:disabled) {
    box-shadow: var(--shadow-md);
}

.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-offset: 2px;
}

.btn-primary {
    box-shadow: 0 4px 10px color-mix(in srgb, var(--primary) 22%, transparent);
}

.config-section,
.search-box {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm);
}

.table-section {
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.table-responsive {
    background: var(--bg-primary);
}

.data-table th {
    padding: 13px 16px;
    border-bottom-color: var(--border-color);
    font-size: 11px;
}

.data-table td {
    padding: 12px 16px;
    border-bottom-color: color-mix(in srgb, var(--border-color) 75%, transparent);
}

.data-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 4%, var(--bg-primary));
}

.search-input,
.form-group input,
.form-group select,
.form-group textarea {
    border-radius: var(--radius-sm) !important;
    border-color: var(--border-color);
    background: var(--bg-primary);
}

.search-input {
    box-shadow: inset 0 1px 2px rgba(23, 43, 58, 0.025);
}

.search-input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.form-group label {
    letter-spacing: 0.05px;
}

.config-section h3 {
    border-bottom: 1px solid var(--border-color);
}

.modal-content {
    border-color: var(--border-color);
}

.modal-header h3 {
    letter-spacing: -0.2px;
}

.modal-close {
    border-radius: var(--radius-sm) !important;
}

.page-header {
    margin-bottom: 22px;
}

.page-header h2 {
    letter-spacing: -0.45px;
}

.login-page {
    background: var(--bg-secondary);
}

.login-page::before,
.login-page::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.login-page::before {
    width: 360px;
    height: 360px;
    top: -180px;
    right: -100px;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.login-page::after {
    width: 260px;
    height: 260px;
    bottom: -130px;
    left: -80px;
    background: color-mix(in srgb, var(--secondary) 8%, transparent);
}

.login-card {
    border-color: var(--border-color);
}

.login-header {
    margin-bottom: 30px;
}

.login-header img {
    width: 86px;
    height: 86px;
    object-fit: contain;
}

.login-header h1 {
    letter-spacing: -0.6px;
}

.login-form .btn {
    min-height: 46px;
    margin-top: 4px;
}

.records-pagination {
    padding: 14px 16px 16px;
}

/* A tabela é uma superfície de trabalho, não um card dentro do Dashboard. */
.dashboard-container .table-section {
    background: transparent;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none;
    overflow: auto;
}

.dashboard-container .table-section > .data-table {
    background: var(--bg-primary);
    border-radius: 0 !important;
}

.dashboard-container .data-table th {
    border-top: 1px solid var(--border-color);
}

.dashboard-container .data-table .table-state-row td {
    height: calc(100vh - var(--topbar-height) - 32px);
    min-height: 280px;
    vertical-align: middle;
    background: var(--bg-primary);
}

.dashboard-container .records-pagination {
    border-top: 1px solid var(--border-color);
    padding: 14px 0 4px;
}

@media (max-width: 768px) {

    .header-actions {
        margin-left: auto;
    }

    .modal-content {
        width: calc(100% - 24px);
        max-height: calc(100vh - 24px);
    }
}

/* ==========================================================================
   REDESIGN — Identidade visual "Balança de Cais"
   Paleta e tipografia inspiradas em instrumentos de pesagem portuária:
   teto profundo (água/noite no porto), latão de selo aduaneiro como acento
   único, e uma face monoespaçada reservada para números que remetem ao
   mostrador digital de uma balança. Sobrescreve os tokens originais.
   ========================================================================== */

:root {

    --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

* {
        outline-color: var(--accent);
}

body {
        font-family: var(--font-body);
}

@media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
                    animation-duration: 0.001ms !important;
                    transition-duration: 0.001ms !important;
        }
}

/* Faixa lateral sólida — identidade de marca visível em toda página interna */

/* Botões — sólidos, sem gradiente, sem elevação no hover */
.btn-primary {
        background: var(--primary);
        color: #fff;
        border: 1px solid var(--primary);
}

.btn-primary:hover {
        background: var(--primary-dark);
        border-color: var(--primary-dark);
        transform: none;
        box-shadow: none;
}

.btn-secondary:hover {
        transform: none;
        box-shadow: none;
}

/* Cartões de estatística — número no estilo mostrador digital */

/* Tabelas — cabeçalho sóbrio, números alinhados como leitura de balança */
.data-table th {
        background: var(--bg-tertiary);
        color: var(--text-secondary);
        font-weight: 600;
        text-transform: none;
        letter-spacing: normal;
}

/* Login — painel dividido, latão como único acento */

.login-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        min-height: 100vh;
        max-width: none;
        align-items: stretch;
}

.login-container::before {
        content: "";
        background: var(--primary-dark);
        background-image:
                    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 28px);
        display: block;
}

.login-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 auto;
        width: 100%;
        padding: 40px 20px;
}

.login-header h1 {
        font-family: var(--font-mono);
        font-weight: 700;
        color: var(--text-primary);
        font-size: 28px;
}

.login-header img {
        display: none;
}

.login-header::before {
        width: 44px;
        height: 44px;
        margin-bottom: 18px;
        background: var(--accent);
        border-radius: 4px;
}

.login-form .btn-primary {
        font-weight: 600;
}

.login-form .btn-primary:hover {
        background: var(--accent-dark);
        border-color: var(--accent-dark);
}

@media (max-width: 860px) {
        .login-container {
                    grid-template-columns: 1fr;
        }
        .login-container::before {
                    display: none;
        }
}

/* ==========================================================================
   CAMADA SHADCN — convenções visuais (raio consistente, bordas sutis no
   lugar de sombra, anéis de foco, variantes de botão) aplicadas por cima
   do sistema de tokens já existente. Mantém a paleta, muda a linguagem
   estrutural dos componentes para o padrão shadcn/ui.
   ========================================================================== */

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--ring);
}

.btn-secondary:hover {
        background: var(--bg-tertiary);
        border-color: var(--border-color);
}

.btn-danger:hover {
        background: var(--danger);
        color: #fff;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="file"],
select,
textarea,
.form-control,
.search-input {
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        background: var(--bg-primary);
        color: var(--text-primary);
        transition: border-color 0.12s ease;
}

input:hover, select:hover, textarea:hover {
        border-color: var(--text-muted);
}

.config-section,
.page-container .table-section,
.dashboard-container .table-section,
.modal-content {
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        box-shadow: none;
}

.table-responsive,
.data-table {
        border-radius: var(--radius-lg);
}

.data-table tr {
        border-bottom: 1px solid var(--border-color);
}

.data-table tr:last-child {
        border-bottom: none;
}

.tab-button {
        border-bottom: 2px solid transparent;
}

.tab-button.active {
        border-bottom-color: var(--primary);
}

/* ==========================================================================
   TEMA ESCURO — paleta alinhada à referência (roxo/violeta primário,
   laranja como acento secundário, superfícies neutras escuras em vez de
   um bloco sólido colorido). Substitui as cores do tema escuro anterior.
   ========================================================================== */

/* Sidebar neutra, não mais um bloco sólido colorido */

/* Login no tema escuro segue a mesma superfície neutra */
[data-theme="dark"] .login-container::before {
        background: var(--bg-secondary);
        background-image:
                    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 28px);
}

[data-theme="dark"] .login-header::before {
        background: var(--primary);
}

[data-theme="dark"] .login-form .btn-primary {
        background: var(--primary);
        border-color: var(--primary);
        color: #ffffff;
}

[data-theme="dark"] .login-form .btn-primary:hover {
        background: var(--primary-dark);
        border-color: var(--primary-dark);
}

/* Botões primários usam o roxo em vez do teal antigo */
[data-theme="dark"] .btn-primary {
        background: var(--primary);
        border-color: var(--primary);
        color: #ffffff;
}

[data-theme="dark"] .btn-primary:hover {
        background: var(--primary-dark);
        border-color: var(--primary-dark);
}

/* ==========================================================================
   NAVBAR SUPERIOR — substitui a sidebar lateral por uma barra fixa no topo.
   ========================================================================== */

:root {
        --navbar-height: 60px;
}

.app-container {
        display: block;
        min-height: 100vh;
}

.navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--navbar-height);
        align-items: center;
        background: var(--bg-primary);
        z-index: 1000;
}

.navbar-brand {
        display: flex;
        align-items: center;
        font-family: var(--font-mono, inherit);
        white-space: nowrap;
}

.navbar-menu {
        display: flex;
        align-items: center;
}

.navbar-menu .nav-item {
        display: flex;
        align-items: center;
        color: var(--text-secondary);
        background: transparent;
        border: none;
        cursor: pointer;
        white-space: nowrap;
}

.navbar-menu .nav-item:hover {
        background: var(--bg-tertiary);
        color: var(--text-primary);
}

.nav-dropdown {
        position: relative;
}

.nav-dropdown-arrow {
        font-size: 10px;
        margin-left: 2px;
}

.nav-dropdown-menu {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        min-width: 200px;
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius, 8px);
        box-shadow: var(--shadow-lg);
        padding: 6px;
        z-index: 1001;
}

.nav-dropdown-menu.show {
        display: block;
}

.nav-dropdown-menu-right {
        left: auto;
        right: 0;
}

.nav-dropdown-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 9px 10px;
        border-radius: var(--radius-sm, 6px);
        color: var(--text-secondary);
        font-size: 13.5px;
        background: transparent;
        border: none;
        text-align: left;
        cursor: pointer;
}

.nav-dropdown-menu .dropdown-item:hover {
        background: var(--bg-tertiary);
        color: var(--text-primary);
}

.navbar-actions {
        display: flex;
        align-items: center;
}

.navbar-search {
        position: relative;
        display: flex;
        align-items: center;
}

.icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: var(--radius-sm, 6px);
        border: 1px solid var(--border-color);
        background: var(--bg-primary);
        color: var(--text-secondary);
        cursor: pointer;
        position: relative;
        flex-shrink: 0;
}

.icon-btn:hover {
        background: var(--bg-tertiary);
        color: var(--text-primary);
}

.icon-btn-primary {
        background: var(--primary);
        border-color: var(--primary);
        color: #ffffff;
}

.icon-btn-primary:hover {
        background: var(--primary-dark);
        border-color: var(--primary-dark);
        color: #ffffff;
}

.icon-btn[title]:hover::after {
        content: attr(title);
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        background: var(--text-primary);
        color: var(--bg-primary);
        font-size: 11px;
        font-weight: 500;
        padding: 4px 8px;
        border-radius: 4px;
        white-space: nowrap;
        z-index: 1002;
        pointer-events: none;
}

.embarcacao-menu {
        min-width: 220px;
}

.embarcacao-menu .embarcacao-nome {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        color: var(--text-primary);
        font-size: 13.5px;
        font-weight: 600;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 6px;
}

.user-info {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 36px;
        padding: 0 10px;
        border-radius: var(--radius-sm, 6px);
        border: 1px solid var(--border-color);
        background: var(--bg-primary);
        color: var(--text-primary);
        font-size: 13px;
        cursor: pointer;
}

.user-info:hover {
        background: var(--bg-tertiary);
}

.user-menu.nav-dropdown-menu {
        min-width: 160px;
}

.user-menu .theme-toggle,
.user-menu .btn-logout {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 9px 10px;
        border-radius: var(--radius-sm, 6px);
        color: var(--text-secondary);
        background: transparent;
        border: none;
        text-align: left;
        cursor: pointer;
        font-size: 13.5px;
}

.user-menu .theme-toggle:hover,
.user-menu .btn-logout:hover {
        background: var(--bg-tertiary);
        color: var(--text-primary);
}

.navbar .sidebar-toggle {
        display: none;
}

.main-content {
        margin-left: 0 !important;
        margin-top: var(--navbar-height);
        min-height: calc(100vh - var(--navbar-height));
        height: calc(100vh - var(--navbar-height));
        width: 100%;
}

.content-wrapper {
        padding: 20px;
}

@media (max-width: 1100px) {
        .navbar-menu .nav-item span,
        .navbar-brand span {
                    display: none;
        }
}

@media (max-width: 860px) {
        .navbar-search {
                    display: none;
        }
}

.nav-dropdown-menu.open {
        display: block;
}

/* ==========================================================================
   CORREÇÕES — menu de perfil, navbar centralizado, cores de botões, cadastros
   ========================================================================== */

/* Menu de perfil (#userMenu) tinha CSS legado conflitando (altura colapsada
   e sem fundo visível). Força layout correto via especificidade de ID. */
#userMenu {
        display: none;
        flex-direction: column;
        height: auto !important;
        max-height: none !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: var(--shadow-lg) !important;
        z-index: 1002 !important;
}

#userMenu.open {
        display: flex !important;
}

#userMenu .theme-toggle,
#userMenu .btn-logout {
        width: 100%;
        padding: 9px 10px;
        border-radius: var(--radius-sm, 6px);
        border: none;
        color: var(--text-secondary);
}

#userMenu .theme-toggle:hover,
#userMenu .btn-logout:hover {
        background: var(--bg-tertiary);
        color: var(--text-primary);
}

.user-menu-arrow {
        transform: rotate(180deg);
        transition: transform 0.15s ease;
}

#userInfo[aria-expanded="true"] .user-menu-arrow {
        transform: rotate(0deg);
}

/* Navbar — menu de navegação centralizado */
.navbar {
        display: grid;
        grid-template-columns: auto 1fr auto;
}

.navbar-menu {
        justify-self: center;
}

.navbar-actions {
        margin-left: 0;
        justify-self: end;
}

/* Cores específicas dos botões de ação */
.icon-btn[title="Planilha Geral"] {
        background: #6B812E;
        border-color: #6B812E;
        color: #ffffff;
}

.icon-btn[title="Planilha Geral"]:hover {
        background: #566a24;
        border-color: #566a24;
}

.icon-btn[title="Trocar Turno"] {
        background: #D3A01F;
        border-color: #D3A01F;
        color: #201404;
}

.icon-btn[title="Trocar Turno"]:hover {
        background: #b3861a;
        border-color: #b3861a;
}

/* Páginas de cadastro (Origens/Exportadoras/Cargas) — centralizadas com
   largura confortável no desktop, em vez de coladas à esquerda */
.page-container {
        max-width: 1100px;
        margin: 0 auto;
}

/* ==========================================================================
   LOGIN — tela simplificada: apenas logo, usuario e senha.
   Desfaz o placeholder quadrado do redesign anterior e mostra a logo real.
   ========================================================================== */

.login-header::before {
        content: none !important;
        display: none !important;
}

.login-header img,
.login-header .login-logo {
        display: block !important;
        width: 130px;
        height: auto;
        margin: 0 auto 10px;
}

.login-header {
        text-align: center;
}

.login-header .login-brand-name {
        margin: 0 0 28px;
        color: #0b2545;
        font-size: 20px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.12em;
}

.login-card {
        max-width: 340px;
}

.login-form .form-group {
        margin-bottom: 16px;
}

.login-form label {
        display: block;
        margin-bottom: 6px;
}

.login-form input {
        width: 100%;
        padding: 0 12px;
}

.login-form .btn-block {
        width: 100%;
        margin-top: 8px;
        height: 40px;
        justify-content: center;
}

.login-form .btn-block:disabled {
        opacity: 0.6;
        cursor: not-allowed;
}

/* ==========================================================================
   LOGIN — estilo inspirado no formulario "bociKond" (Uiverse), adaptado
   para a paleta do sistema: roxo como acento no lugar do verde original.
   Inputs arredondados com anel de foco, botao em pilula, logo acima.
   ========================================================================== */

.login-page .login-card {
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 14px;
        padding: 36px 28px;
        max-width: 340px;
        box-shadow: var(--shadow-lg);
}

.login-page .login-form {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        width: 100%;
}

.login-page .login-form .form-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 0;
}

.login-page .login-form label {
        align-self: flex-start;
        color: var(--primary);
        font-weight: 600;
        font-size: 13px;
        margin-bottom: 0;
}

.login-page .login-form input[type="text"],
.login-page .login-form input[type="password"] {
        border-radius: 0.5rem;
        padding: 1rem 0.75rem;
        width: 100%;
        height: auto;
        border: none;
        background-color: var(--bg-tertiary);
        color: var(--text-primary);
        outline: 2px solid var(--border-color);
        outline-offset: 0;
        transition: outline-color 0.15s ease;
        box-shadow: none;
}

.login-page .login-form input[type="text"]:hover,
.login-page .login-form input[type="password"]:hover {
        outline-color: var(--text-muted);
}

.login-page .login-form input[type="text"]:focus,
.login-page .login-form input[type="password"]:focus {
        outline: 2px solid var(--primary);
        box-shadow: none;
}

.login-page .login-form .btn-block {
        padding: 1rem 0.75rem;
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border-radius: 3rem;
        background-color: var(--primary);
        color: #ffffff;
        border: none;
        cursor: pointer;
        transition: background-color 300ms, color 300ms;
        font-weight: 600;
        font-size: 0.9rem;
        margin-top: 0.5rem;
}

.login-page .login-form .btn-block:hover:not(:disabled) {
        background-color: var(--primary-dark);
        color: #ffffff;
}

.login-page .login-form .btn-block:disabled {
        opacity: 0.6;
        cursor: not-allowed;
}

/* ==========================================================================
   LOGIN — ajustes finais
   1) A paleta roxa estava definida so para [data-theme="dark"], entao no tema
      claro o login aparecia com o teal antigo. Aqui fixamos o roxo do sistema
      na tela de login, independente do tema.
   2) Remove o painel listrado lateral (sobra do redesign anterior): o card
      centralizado nao combina com ele.
   ========================================================================== */

body.login-page {
        --primary: #7c5cff;
        --primary-dark: #6a45f5;
        --primary-light: #9b82ff;
        background: var(--bg-secondary);
}

.login-page .login-container {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        width: 100%;
        max-width: none;
        grid-template-columns: none;
        padding: 20px;
}

.login-page .login-container::before {
        content: none !important;
        display: none !important;
}

[data-theme="dark"] body.login-page,
[data-theme="dark"] .login-page .login-card {
        background: var(--bg-secondary);
}

[data-theme="dark"] .login-page .login-card {
        background: var(--bg-primary);
}

/* ==========================================================================
   NAVBAR: menu a esquerda + embarcacao no centro
   - O menu passa a ficar colado no logo (antes ficava solto no meio).
   - O nome da embarcacao fica centralizado de verdade (posicao absoluta),
     independente da largura dos blocos das laterais.
   - No hover, abre um cartao com a contagem das planilhas gerais.
   ========================================================================== */

.navbar-brand {
        flex: 0 0 auto;
}

.navbar-menu {
        flex: 0 0 auto;
        margin-right: auto;
}

.navbar-embarcacao-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        height: 36px;
        border-radius: var(--radius-sm, 6px);
        border: 1px solid var(--border-color);
        background: var(--bg-primary);
        color: var(--text-primary);
        font-weight: 600;
        white-space: nowrap;
        cursor: default;
        z-index: 1;
}

.navbar-embarcacao-center > span {
        display: inline-block;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        animation: embarcacao-name-wave 4.2s ease-in-out infinite;
        transform-origin: center bottom;
}

@keyframes embarcacao-name-wave {
        0%, 100% {
                transform: translateY(0) skewX(0);
        }
        25% {
                transform: translateY(-1.2px) skewX(-0.5deg);
        }
        50% {
                transform: translateY(0.6px) skewX(0.5deg);
        }
        75% {
                transform: translateY(-0.7px) skewX(-0.25deg);
        }
}

.navbar-embarcacao-center > i {
        color: var(--primary);
        font-size: 13px;
}

.navbar-embarcacao-center:hover {
        border-color: var(--primary);
}

.embarcacao-hovercard {
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%) translateY(-4px);
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 10px 16px;
        border-radius: var(--radius, 8px);
        border: 1px solid var(--border-color);
        background: var(--bg-primary);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
        pointer-events: none;
        z-index: 1002;
}

.navbar-embarcacao-center:hover .embarcacao-hovercard {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
}

.embarcacao-hovercard::after {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 7px solid transparent;
        border-bottom-color: var(--border-color);
}

.embarcacao-hovercard .hc-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
}

.embarcacao-hovercard .hc-item span {
        font-size: 11px;
        font-weight: 500;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.03em;
}

.embarcacao-hovercard .hc-item strong {
        font-family: var(--font-mono, inherit);
        font-size: 18px;
        font-weight: 700;
        color: var(--primary);
        line-height: 1;
}

.embarcacao-hovercard .hc-sep {
        width: 1px;
        align-self: stretch;
        background: var(--border-color);
}

@media (max-width: 1100px) {
        .navbar-embarcacao-center {
                    display: none;
        }
}

/* ==========================================================================
   BOTAO "BAIXAR" — animacao no hover (texto sobe / icone entra / tooltip)
   Adaptado do botao "satyamchaudharydev" (Uiverse) para as cores do sistema.
   ========================================================================== */

.button-download {
        --bd-width: 100px;
        --bd-height: 36px;
        --bd-tooltip-gap: 14px;
        position: relative;
        width: var(--bd-width);
        height: var(--bd-height);
        flex: 0 0 auto;
        background: var(--primary);
        border: none;
        border-radius: 0.45em;
        color: var(--primary-foreground, #ffffff);
        overflow: hidden;
        cursor: pointer;
        padding: 0;
        transition: background 0.3s;
}

.button-download:hover {
        background: var(--primary-dark);
}

.button-download .bd-text,
.button-download .bd-icon {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: inherit;
        font-size: 13.5px;
        font-weight: 600;
        transition: top 0.5s;
}

.button-download .bd-text {
        top: 0;
}

.button-download .bd-icon {
        top: 100%;
}

.button-download .bd-icon svg {
        width: 20px;
        height: 20px;
}

.button-download:hover .bd-text {
        top: -100%;
}

.button-download:hover .bd-icon {
        top: 0;
}

/* Tooltip acima do botao */
.button-download::before {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + var(--bd-tooltip-gap));
        left: 50%;
        transform: translateX(-50%);
        padding: 5px 10px;
        background-color: var(--text-primary);
        color: var(--bg-primary);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.4;
        border-radius: 0.25em;
        white-space: nowrap;
}

.button-download::after {
        content: '';
        position: absolute;
        bottom: calc(100% + var(--bd-tooltip-gap) - 8px);
        left: 50%;
        transform: translateX(-50%);
        border: 8px solid transparent;
        border-top-color: var(--text-primary);
}

.button-download::before,
.button-download::after {
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s;
        pointer-events: none;
}

.button-download:hover::before,
.button-download:hover::after {
        opacity: 1;
        visibility: visible;
}

.button-download:disabled {
        opacity: 0.6;
        cursor: not-allowed;
}

/* ==========================================================================
   NAVBAR — reduzir tamanho geral: o campo de busca estava ficando escondido
   atras do bloco central com o nome da embarcacao. Encolhe o menu esquerdo,
   o campo de busca e o bloco da embarcacao pra sobrar espaco pra todo mundo.
   ========================================================================== */

.navbar {
        padding: 0 12px;
        gap: 6px;
}

.navbar-brand {
        font-size: 14px;
        margin-right: 4px;
}

.navbar-menu {
        gap: 0;
}

.navbar-menu .nav-item {
        height: 32px;
        padding: 0 8px;
        gap: 4px;
        font-size: 13px;
}

/* Configuracoes vira somente icone (mesmo lugar, sem o texto) */
#configLink {
        width: 32px;
        padding: 0;
        justify-content: center;
        gap: 0;
}

#configLink span {
        display: none;
}

.navbar-search {
        margin-right: 4px;
}

.navbar-embarcacao-center {
        max-width: 220px;
        padding: 0 10px;
        font-size: 12px;
        gap: 6px;
}

.navbar-actions {
        gap: 6px;
}

.navbar-actions .icon-btn {
        width: 32px;
        height: 32px;
}

/* Navbar moderna, mantendo a mesma estrutura e ordem dos controles. */
.navbar {
        min-height: var(--navbar-height);
        background: color-mix(in srgb, var(--bg-primary) 96%, transparent);
}

.navbar-brand img {
        border-radius: 9px;
}

.navbar-menu .nav-item,
.navbar-actions .icon-btn,
.navbar-actions .user-info {
        transition: background-color 0.18s ease, border-color 0.18s ease,
                    color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.navbar-menu .nav-item {
        border-radius: 9px;
        font-weight: 600;
}

.navbar-menu .nav-item:hover,
.navbar-actions .icon-btn:hover,
.navbar-actions .user-info:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
}

#btnSyncRegistros {
        width: 32px;
        min-width: 32px;
        height: 32px;
        padding: 0;
}

#btnSyncRegistros.is-updating {
        transform: none;
        cursor: wait;
        opacity: 0.82;
}

#btnSyncRegistros.is-updating::after {
        display: none;
}

#btnSyncRegistros > i {
        width: 1em;
        height: 1em;
        line-height: 1;
        transform-origin: center;
}

#userMenu {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        min-width: 176px;
        padding: 7px !important;
        background: var(--bg-primary) !important;
        background-image: none !important;
        opacity: 1 !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-radius: 11px !important;
        isolation: isolate;
}

#userMenu .theme-toggle,
#userMenu .btn-logout {
        text-align: center;
        background: var(--bg-primary);
}

.navbar-embarcacao-center {
        isolation: isolate;
}

.navbar-embarcacao-center::before {
        content: "";
        position: absolute;
        inset: -1px;
        z-index: -1;
        border: 1px solid color-mix(in srgb, var(--primary) 48%, transparent);
        border-radius: inherit;
        opacity: 0;
        pointer-events: none;
        animation: embarcacaoOndulacao 2.8s ease-out infinite;
}

@keyframes embarcacaoOndulacao {
        0% { opacity: 0; transform: scale(1); }
        18% { opacity: 0.38; }
        72%, 100% { opacity: 0; transform: scale(1.08, 1.3); }
}

/* Esconde a barra visual sem desativar rolagem por mouse, toque ou teclado. */
html,
body,
.main-content,
.table-responsive {
        scrollbar-width: none;
        -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.main-content::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
}

/* Densidade compacta para exibir mais registros por tela. */
.dashboard-container .data-table th {
        height: 28px;
        padding: 4px 7px;
        font-size: 10.5px;
        line-height: 1.15;
}

.dashboard-container .data-table td {
        height: 30px;
        padding: 3px 7px;
        font-size: 11.5px;
        line-height: 1.18;
}

.dashboard-container .data-table .btn-sm {
        width: 25px;
        min-width: 25px;
        height: 23px;
        padding: 0;
        justify-content: center;
}

.empty-records-state {
        min-height: 620px;
        padding: 26px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
}

.empty-records-state > strong {
        color: var(--text-primary);
        font-size: 15px;
}

.empty-records-state > span {
        font-size: 12px;
}

.empty-records-icon {
        margin-bottom: 4px;
        font-size: 24px;
        color: var(--text-muted);
}

.empty-maze-game {
        width: min(100%, 720px);
        margin-top: 16px;
        padding: 16px;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        background: var(--bg-primary);
        box-shadow: var(--shadow-sm);
}

.empty-game-head,
.empty-game-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        font-size: 12px;
}

.empty-game-head {
        margin-bottom: 9px;
        color: var(--text-primary);
        font-weight: 650;
}

.empty-game-footer {
        margin-top: 7px;
        color: var(--text-secondary);
}

.empty-game-close,
.empty-game-show {
        border: 0;
        background: transparent;
        color: var(--text-secondary);
        font: inherit;
        font-size: 12px;
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 3px;
}

.empty-game-show {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
        padding: 9px 14px;
        border: 1px solid var(--border-color);
        border-radius: 999px;
        background: var(--bg-primary);
        box-shadow: var(--shadow-sm);
        text-decoration: none;
}

.empty-game-show:hover {
        border-color: var(--primary);
        color: var(--primary);
}

.empty-maze-game canvas {
        display: block;
        width: 100%;
        height: auto;
        max-height: 520px;
        border: 1px solid var(--border-color);
        border-radius: 7px;
        background: var(--bg-primary);
        image-rendering: pixelated;
}

.empty-maze-game canvas:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
}

.empty-game-controls {
        display: none;
        margin-top: 10px;
}

.empty-game-controls button {
        width: 34px;
        height: 30px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--bg-secondary);
        color: var(--text-primary);
}

@media (hover: none), (max-width: 720px) {
        .empty-records-state {
                min-height: 520px;
                padding: 18px 10px;
        }

        .empty-maze-game {
                padding: 10px;
        }

        .empty-game-controls {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 3px;
        }
}

@media (prefers-reduced-motion: reduce) {
        .navbar-embarcacao-center > span {
                animation: none;
        }
}

/* ==========================================================================
   IMPECCABLE POLISH PASS
   ========================================================================== */

/* 1. Caret, Selection, & Scrollbars */
* {
    caret-color: var(--primary);
    scrollbar-color: var(--text-muted) var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background-color: var(--text-muted);
}

::-webkit-scrollbar-track {
    background-color: var(--bg-secondary);
}

::selection {
    background-color: var(--primary);
    color: var(--bg-primary);
}

[data-theme="dark"] ::selection {
    background-color: var(--primary-light);
    color: var(--bg-primary);
}

/* 2. Focus Management */
:focus-visible,
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-item:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}

/* 3. Interaction States & Transitions */
.btn,
.icon-btn,
button,
.nav-item,
.dropdown-item,
.tab-button {
    transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn:active:not(:disabled),
.icon-btn:active:not(:disabled) {
    transform: scale(0.97) !important;
}

.btn:disabled,
button:disabled,
.icon-btn:disabled,
.icon-btn.is-updating,
.button-download:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

input,
select,
textarea,
.search-input {
    transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 4. Table Scannability & Alignment */
.data-table td {
    font-variant-numeric: tabular-nums;
}

.data-table tbody tr {
    transition: background-color 0.15s ease !important;
}

.data-table tbody tr:hover,
.data-table tbody tr:hover td {
    background-color: var(--bg-tertiary) !important;
}

/* 5. Modals & Overlays Polish */
.modal.show {
    animation: modalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.modal.show .modal-content {
    animation: modalScaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalScaleIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 6. Responsive Touch Targets */
@media (max-width: 768px) {
    .btn,
    .tab-button,
    .nav-item,
    .dropdown-item,
    .user-info,
    .form-control,
    .search-input,
    input,
    select {
        min-height: 44px !important;
    }
    .icon-btn,
    .sidebar-toggle,
    .theme-toggle,
    .close-btn,
    .modal-close {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}
/* ==========================================================================
   Superservice — camada visual shadcn/ui (estilo "new-york", paleta zinc)

   Carregada DEPOIS do main.css. Não muda estrutura, ordem nem comportamento:
   só redefine os tokens (as variáveis antigas passam a apontar para os
   tokens do shadcn) e dá a cada componente existente (.btn, inputs,
   .config-section, .data-table, abas, modal, toasts…) o visual do
   componente shadcn equivalente (Button, Input, Card, Table, Tabs, Dialog,
   Sonner, Badge, Pagination, DropdownMenu).
   ========================================================================== */

/* ---------- Tokens (valores do tema zinc do shadcn) ---------- */
:root {
    --background: #ffffff;
    --foreground: #09090b;
    --card: #ffffff;
    --card-foreground: #09090b;
    --popover: #ffffff;
    --popover-foreground: #09090b;
    --sc-primary: #18181b;
    --sc-primary-hover: #27272a;
    --primary-foreground: #fafafa;
    --sc-secondary: #f4f4f5;
    --secondary-foreground: #18181b;
    --muted: #f4f4f5;
    --muted-foreground: #71717a;
    --sc-accent: #f4f4f5;
    --accent-foreground: #18181b;
    --destructive: #dc2626;
    --destructive-hover: #b91c1c;
    --destructive-foreground: #fafafa;
    --border: #e4e4e7;
    --input: #e4e4e7;
    --sc-ring: #a1a1aa;
    --page: #fafafa;

    /* Status (usados em badges e alertas; tons do Tailwind) */
    --sc-success: #16a34a;
    --sc-success-soft: #f0fdf4;
    --sc-success-border: #bbf7d0;
    --sc-warning: #d97706;
    --sc-warning-soft: #fffbeb;
    --sc-warning-border: #fde68a;
    --sc-info: #2563eb;
    --sc-info-soft: #eff6ff;
    --sc-info-border: #bfdbfe;
    --sc-danger-soft: #fef2f2;
    --sc-danger-border: #fecaca;

    --radius: 0.5rem;
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Variáveis antigas do sistema -> tokens shadcn (todo o main.css herda) */
    --primary: var(--sc-primary);
    --primary-dark: var(--sc-primary-hover);
    --primary-light: #3f3f46;
    --secondary: var(--sc-primary);
    --accent: var(--sc-primary);
    --accent-dark: var(--sc-primary-hover);
    --success: var(--sc-success);
    --danger: var(--destructive);
    --warning: var(--sc-warning);
    --info: var(--sc-info);
    --bg-primary: var(--card);
    --bg-secondary: var(--page);
    --bg-tertiary: var(--muted);
    --text-primary: var(--foreground);
    --text-secondary: var(--muted-foreground);
    --text-muted: #a1a1aa;
    --border-color: var(--border);
    --ring: var(--sc-ring);
    --radius-sm: calc(var(--radius) - 2px);
    --radius-md: var(--radius);
    --radius-lg: calc(var(--radius) + 4px);
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.08);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

[data-theme="dark"] {
    --background: #09090b;
    --foreground: #fafafa;
    --card: #111113;
    --card-foreground: #fafafa;
    --popover: #111113;
    --popover-foreground: #fafafa;
    --sc-primary: #fafafa;
    --sc-primary-hover: #e4e4e7;
    --primary-foreground: #18181b;
    --sc-secondary: #27272a;
    --secondary-foreground: #fafafa;
    --muted: #1c1c1f;
    --muted-foreground: #a1a1aa;
    --sc-accent: #27272a;
    --accent-foreground: #fafafa;
    --destructive: #ef4444;
    --destructive-hover: #dc2626;
    --destructive-foreground: #fafafa;
    --border: #27272a;
    --input: #3f3f46;
    --sc-ring: #71717a;
    --page: #09090b;

    --sc-success: #4ade80;
    --sc-success-soft: rgb(34 197 94 / 0.12);
    --sc-success-border: rgb(34 197 94 / 0.3);
    --sc-warning: #fbbf24;
    --sc-warning-soft: rgb(245 158 11 / 0.12);
    --sc-warning-border: rgb(245 158 11 / 0.3);
    --sc-info: #60a5fa;
    --sc-info-soft: rgb(59 130 246 / 0.12);
    --sc-info-border: rgb(59 130 246 / 0.3);
    --sc-danger-soft: rgb(239 68 68 / 0.12);
    --sc-danger-border: rgb(239 68 68 / 0.3);

    --primary: var(--sc-primary);
    --primary-dark: var(--sc-primary-hover);
    --primary-light: #d4d4d8;
    --secondary: var(--sc-primary);
    --accent: var(--sc-primary);
    --accent-dark: var(--sc-primary-hover);
    --success: var(--sc-success);
    --danger: var(--destructive);
    --warning: var(--sc-warning);
    --info: var(--sc-info);
    --bg-primary: var(--card);
    --bg-secondary: var(--page);
    --bg-tertiary: var(--muted);
    --text-primary: var(--foreground);
    --text-secondary: var(--muted-foreground);
    --text-muted: #71717a;
    --border-color: var(--border);
    --ring: var(--sc-ring);
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.55);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6);
}

/* ---------- Base ---------- */
html {
    color-scheme: light;
}

[data-theme="dark"] {
    color-scheme: dark;
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-sans);
}

body {
    background: var(--page);
    color: var(--foreground);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: color-mix(in srgb, var(--foreground) 14%, transparent);
}

h1, h2, h3, h4 {
    color: var(--foreground);
    letter-spacing: -0.015em;
}

.page-header h2,
.dashboard-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-header h2 > i,
.dashboard-header h2 > i {
    color: var(--muted-foreground);
    font-size: 0.9em;
}

a {
    color: inherit;
}

*:focus-visible {
    outline: none;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.icon-btn:focus-visible,
.tab-button:focus-visible,
[tabindex]:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-ring) 45%, transparent) !important;
}

/* Barras de rolagem discretas */
* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--muted-foreground) 35%, transparent) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--muted-foreground) 30%, transparent);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- Button ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm) !important;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
    transform: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover:not(:disabled) {
    transform: none;
}

.btn:active:not(:disabled) {
    transform: scale(0.98) !important;
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.5 !important;
    pointer-events: none;
    box-shadow: none;
}

.btn i {
    font-size: 0.875em;
}

.btn-primary,
.btn-primary:focus {
    background: var(--sc-primary);
    border-color: var(--sc-primary);
    /* Regras antigas fixavam texto branco — some no tema escuro, onde o
       primário do shadcn é claro. */
    color: var(--primary-foreground) !important;
}

.btn-primary i {
    color: inherit !important;
}

.btn-primary:hover:not(:disabled) {
    background: var(--sc-primary-hover);
    border-color: var(--sc-primary-hover);
    color: var(--primary-foreground) !important;
    box-shadow: var(--shadow-xs);
}

/* "secondary" do sistema = variante outline do shadcn */
.btn-secondary {
    background: var(--background);
    border-color: var(--input);
    color: var(--foreground);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--sc-accent);
    border-color: var(--input);
    color: var(--accent-foreground);
}

.btn-danger {
    background: var(--destructive);
    border-color: var(--destructive);
    color: var(--destructive-foreground);
}

.btn-danger:hover:not(:disabled) {
    background: var(--destructive-hover);
    border-color: var(--destructive-hover);
    color: var(--destructive-foreground);
}

.btn-success {
    background: var(--sc-success-soft);
    border-color: var(--sc-success-border);
    color: var(--sc-success);
}

.btn-success:hover:not(:disabled) {
    background: var(--sc-success-soft);
    border-color: var(--sc-success);
    color: var(--sc-success);
}

.btn-warning {
    background: var(--sc-warning-soft);
    border-color: var(--sc-warning-border);
    color: var(--sc-warning);
}

.btn-warning:hover:not(:disabled) {
    border-color: var(--sc-warning);
    color: var(--sc-warning);
}

.btn-sm {
    height: 32px;
    min-height: 32px;
    padding: 0 10px;
    font-size: 0.8125rem;
    gap: 6px;
}

.btn-block {
    width: 100%;
}

/* ---------- Input / Select / Textarea ---------- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="tel"],
input[type="file"],
select,
textarea,
.form-control,
.form-group input,
.form-group select,
.form-group textarea {
    background: transparent;
    border: 1px solid var(--input);
    border-radius: var(--radius-sm) !important;
    color: var(--foreground);
    font-size: 0.875rem;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .form-control {
    background: color-mix(in srgb, var(--input) 30%, transparent);
}

.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-group select,
.form-control {
    min-height: 36px;
}

input::placeholder,
textarea::placeholder {
    color: var(--muted-foreground);
    opacity: 1;
}

input:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled) {
    border-color: var(--input);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none !important;
    border-color: var(--sc-ring) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-ring) 35%, transparent) !important;
}

input:disabled,
select:disabled,
textarea:disabled,
input[readonly] {
    background: var(--muted);
    color: var(--muted-foreground);
    cursor: not-allowed;
    opacity: 1;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--sc-primary);
}

.form-group label,
.form-group > label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
    letter-spacing: 0;
}

.form-group small,
.config-section small {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

/* ---------- Card ---------- */
.config-section,
.table-section,
.search-section,
.search-box,
.info-box {
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xs);
}

.config-section {
    padding: 24px;
}

.config-section h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--foreground);
    border: none !important;
    padding-bottom: 0;
    margin-bottom: 20px;
}

.config-section h3::after,
.config-section h3::before {
    display: none !important;
}

.config-section h3 > i {
    color: var(--muted-foreground) !important;
    font-size: 0.95em;
}

.info-box,
.info-warning {
    background: var(--sc-warning-soft);
    border-color: var(--sc-warning-border);
    color: var(--foreground);
}

/* ---------- Table ---------- */
.data-table,
.table {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--foreground);
    background: transparent;
}

.data-table thead th,
.data-table th,
.table thead th {
    background: var(--card);
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    height: 40px;
    border-bottom: 1px solid var(--border);
}

.data-table tbody tr,
.table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background-color 0.12s ease;
}

.data-table tbody tr:hover,
.table tbody tr:hover {
    background: color-mix(in srgb, var(--muted) 60%, transparent) !important;
}

.data-table tbody tr:last-child {
    border-bottom: none;
}

.data-table td,
.table td {
    border-color: var(--border);
    color: var(--foreground);
}

.data-table td .btn-sm + .btn-sm {
    margin-left: 4px;
}

.table-responsive {
    border-radius: var(--radius-lg) !important;
}

.table-section .table-header,
.table-section > .table-header {
    padding: 16px 20px 12px;
    border-bottom: none;
}

.table-section .table-header h3,
.table-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

/* Campo de busca dentro do card de busca: o card é o "input" (sem borda
   dupla) e ganha o anel de foco. */
.search-box input,
.search-box .search-input {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    height: 34px !important;
}

.search-box:focus-within {
    border-color: var(--sc-ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-ring) 35%, transparent);
}

.search-box > i {
    color: var(--muted-foreground);
    font-size: 0.9rem;
}

/* Tabelas simples (ex.: modelos em Configurações > Planilhas) */
table.table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

table.table th {
    text-align: left;
    padding: 0 12px;
}

table.table td {
    padding: 10px 12px;
    vertical-align: middle;
}

table.table th:last-child,
table.table td:last-child {
    text-align: right;
}

/* Separator */
hr {
    border: none !important;
    border-top: 1px solid var(--border) !important;
    height: 0;
}

.resultado-calculo {
    border-radius: var(--radius-md);
    background: var(--muted) !important;
}

/* Linhas de estado (carregando / vazio) */
.table-state-row td,
.loading {
    color: var(--muted-foreground);
}

/* ---------- Tabs ---------- */
.tabs-container {
    margin-bottom: 20px;
}

.tab-buttons {
    display: inline-flex !important;
    max-width: 100%;
    gap: 2px;
    padding: 3px;
    background: var(--muted);
    border: none !important;
    border-radius: calc(var(--radius) + 2px);
}

.tab-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 12px !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    color: var(--muted-foreground) !important;
    font-size: 0.875rem;
    font-weight: 500 !important;
    bottom: 0 !important;
    box-shadow: none;
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.tab-button:hover {
    color: var(--foreground) !important;
    background: transparent !important;
}

.tab-button.active {
    background: var(--background) !important;
    color: var(--foreground) !important;
    border-color: transparent !important;
    box-shadow: var(--shadow-xs);
}

[data-theme="dark"] .tab-button.active {
    background: var(--sc-accent) !important;
    border-color: var(--input) !important;
}

.tab-button i {
    font-size: 0.85em;
    opacity: 0.8;
}

/* ---------- Dialog (modal) ---------- */
.modal {
    background: rgb(0 0 0 / 0.5) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.modal-content {
    background: var(--background) !important;
    color: var(--foreground);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
}

.modal-header {
    background: transparent !important;
    border-bottom: none !important;
    padding: 20px 24px 8px !important;
}

.modal-header h2,
.modal-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--foreground);
}

.modal-body {
    padding: 12px 24px 20px !important;
}

.modal-footer {
    background: transparent !important;
    border-top: none !important;
    padding: 0 24px 20px !important;
    gap: 8px;
}

.modal-close,
.close-btn {
    width: 32px;
    height: 32px;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--muted-foreground) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    opacity: 0.8;
}

.modal-close:hover,
.close-btn:hover {
    background: var(--sc-accent) !important;
    color: var(--foreground) !important;
    opacity: 1;
}

/* ---------- Toast (Sonner) ---------- */
.toast {
    background: var(--popover) !important;
    color: var(--popover-foreground) !important;
    border: 1px solid var(--border) !important;
    border-left-width: 1px !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    font-size: 0.875rem;
    padding: 14px 16px !important;
}

.toast::before {
    display: none !important;
}

/* Posição do Sonner: canto inferior direito; a mais nova fica embaixo. */
.toast-container {
    top: auto !important;
    bottom: 20px;
    right: 20px;
    left: auto;
    flex-direction: column;
    align-items: flex-end;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}

.toast-container .toast {
    pointer-events: auto;
}

/* Mesmo nome usado pelo utils.js (entrada, e saída com "reverse"):
   sobe de baixo em vez de deslizar da lateral. */
@keyframes toastSlideIn {
    from {
        transform: translateY(16px) scale(0.98);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@media (max-width: 640px) {
    .toast-container {
        right: 16px;
        left: 16px;
        bottom: 16px;
        align-items: stretch;
    }
}

.toast-icon {
    font-size: 1rem;
}

.toast-success .toast-icon { color: var(--sc-success); }
.toast-error .toast-icon { color: var(--destructive); }
.toast-warning .toast-icon { color: var(--sc-warning); }
.toast-info .toast-icon { color: var(--sc-info); }

/* ---------- Badge ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm) !important;
    background: var(--sc-secondary);
    color: var(--secondary-foreground);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}

.badge-success {
    background: var(--sc-success-soft);
    border-color: var(--sc-success-border);
    color: var(--sc-success);
}

.badge-danger {
    background: var(--sc-danger-soft);
    border-color: var(--sc-danger-border);
    color: var(--destructive);
}

.badge-secondary {
    background: var(--sc-secondary);
    color: var(--secondary-foreground);
}

/* ---------- Navbar ---------- */
.navbar {
    background: color-mix(in srgb, var(--background) 88%, transparent) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
}

.navbar-brand {
    color: var(--foreground);
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}

.navbar-brand span {
    font-family: var(--font-sans) !important;
}

.navbar-brand img {
    box-shadow: none !important;
}

.navbar-menu .nav-item,
.navbar-menu .nav-dropdown-toggle {
    height: 34px;
    padding: 0 12px !important;
    border: none !important;
    border-left: none !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    color: var(--muted-foreground) !important;
    font-size: 0.875rem;
    font-weight: 500 !important;
    box-shadow: none !important;
    transform: none !important;
}

.navbar-menu .nav-item i {
    font-size: 0.9em;
}

.navbar-menu .nav-item:hover,
.navbar-menu .nav-dropdown-toggle:hover {
    background: var(--sc-accent) !important;
    color: var(--foreground) !important;
}

.navbar-menu .nav-item.active {
    background: var(--sc-accent) !important;
    color: var(--foreground) !important;
    box-shadow: none !important;
}

.navbar-menu .nav-item.active::before,
.navbar-menu .nav-item.active::after {
    display: none !important;
}

/* Botões de ícone = Button variant="outline" size="icon" */
.navbar-actions .icon-btn,
.icon-btn {
    width: 36px !important;
    min-width: 36px;
    height: 36px !important;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--background) !important;
    border: 1px solid var(--input) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--foreground) !important;
    box-shadow: var(--shadow-xs) !important;
    transform: none !important;
}

.navbar-actions .icon-btn:hover,
.icon-btn:hover {
    background: var(--sc-accent) !important;
    border-color: var(--input) !important;
    color: var(--accent-foreground) !important;
    box-shadow: var(--shadow-xs) !important;
}

/* Ação principal (Novo Registro) = Button default */
.navbar-actions .icon-btn.icon-btn-primary,
.icon-btn.icon-btn-primary {
    background: var(--sc-primary) !important;
    border-color: var(--sc-primary) !important;
    color: var(--primary-foreground) !important;
}

.navbar-actions .icon-btn.icon-btn-primary:hover,
.icon-btn.icon-btn-primary:hover {
    background: var(--sc-primary-hover) !important;
    border-color: var(--sc-primary-hover) !important;
    color: var(--primary-foreground) !important;
}

/* Cores de identificação que já existiam, agora só no ícone */
.icon-btn[title="Planilha Geral"] i {
    color: #65a30d;
}

.icon-btn[title="Trocar Turno"] i {
    color: #d97706;
}

.search-input {
    height: 36px !important;
    border: 1px solid var(--input) !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    box-shadow: var(--shadow-xs) !important;
    font-size: 0.875rem !important;
}

.navbar-actions .user-info,
.user-info {
    height: 36px;
    border: 1px solid var(--input) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--background) !important;
    color: var(--foreground) !important;
    box-shadow: var(--shadow-xs) !important;
    font-size: 0.875rem;
    font-weight: 500;
    transform: none !important;
}

.navbar-actions .user-info:hover,
.user-info:hover {
    background: var(--sc-accent) !important;
}

/* Nome do navio no centro (hovercard) = Badge outline */
.embarcacao-nome {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--background) !important;
    color: var(--foreground) !important;
    box-shadow: var(--shadow-xs);
    font-weight: 600;
}

/* ---------- DropdownMenu / Popover ---------- */
.nav-dropdown-menu,
.user-menu,
.embarcacao-hovercard {
    background: var(--popover) !important;
    color: var(--popover-foreground) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    padding: 4px !important;
}

.dropdown-item,
.nav-dropdown-menu .dropdown-item,
.user-menu .theme-toggle,
.user-menu .btn-logout {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 32px;
    padding: 6px 8px !important;
    border: none !important;
    border-radius: calc(var(--radius) - 4px) !important;
    background: transparent !important;
    color: var(--popover-foreground) !important;
    font-size: 0.875rem;
    font-weight: 400;
    box-shadow: none !important;
    text-align: left;
}

/* O menu do usuário (Tema / Sair) abria "achatado" — uma regra antiga fixava
   height: 1em nos itens e o menu não crescia com o conteúdo. */
#userMenu .theme-toggle,
#userMenu .btn-logout {
    height: auto !important;
    min-height: 34px !important;
    flex: none !important;
    justify-content: flex-start !important;
    line-height: 1.25 !important;
}

#userMenu {
    gap: 2px;
    /* Duas regras antigas davam top E bottom ao menu (absoluto), o que
       espremia a altura dele a zero. */
    bottom: auto !important;
}

a.dropdown-item,
a.dropdown-item:hover {
    text-decoration: none !important;
}

.dropdown-item i,
.user-menu .theme-toggle i,
.user-menu .btn-logout i {
    width: 16px;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.dropdown-item:hover,
.dropdown-item.active,
.user-menu .theme-toggle:hover {
    background: var(--sc-accent) !important;
    color: var(--accent-foreground) !important;
}

.user-menu .btn-logout,
.user-menu .btn-logout i {
    color: var(--destructive) !important;
}

.user-menu .btn-logout:hover {
    background: var(--sc-danger-soft) !important;
}

/* ---------- Pagination ---------- */
.pagination-controls button,
.pagination-controls .btn,
.records-pagination button {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    color: var(--foreground) !important;
    box-shadow: none !important;
    font-size: 0.875rem;
    font-weight: 500;
}

.pagination-controls button:hover:not(:disabled),
.records-pagination button:hover:not(:disabled) {
    background: var(--sc-accent) !important;
}

.pagination-controls button.active,
.pagination-controls button[aria-current="page"],
.records-pagination button.active,
.records-pagination button[aria-current="page"] {
    background: var(--background) !important;
    border-color: var(--input) !important;
    color: var(--foreground) !important;
    box-shadow: var(--shadow-xs) !important;
}

.pagination-summary {
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

/* ---------- Login ---------- */
.login-page,
.login-container {
    background: var(--page) !important;
}

.login-page::before,
.login-page::after,
.login-container::before,
.login-container::after {
    background: color-mix(in srgb, var(--muted-foreground) 8%, transparent) !important;
}

.login-card {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}

.login-brand-name {
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    color: var(--foreground) !important;
}

.login-form label {
    color: var(--foreground) !important;
    font-size: 0.875rem;
    font-weight: 500;
}

.login-form input {
    height: 40px;
    background: transparent !important;
}

.login-form .btn-primary {
    height: 40px;
    background: var(--sc-primary) !important;
    border-color: var(--sc-primary) !important;
    color: var(--primary-foreground) !important;
}

.login-form .btn-primary:hover:not(:disabled) {
    background: var(--sc-primary-hover) !important;
}

/* ---------- Estados vazios ---------- */
.empty-records-state {
    color: var(--muted-foreground);
}

.empty-records-state h3,
.empty-records-state strong {
    color: var(--foreground);
    font-weight: 600;
}

/* ---------- Celular: barra superior em duas linhas ----------
   Com todos os botões numa linha só, a barra passava da tela e o "+"
   (Novo Registro) ficava inalcançável. Mesma ordem: logo e menu em cima,
   ações embaixo. */
@media (max-width: 640px) {
    :root {
        --navbar-height: 104px;
    }

    .navbar {
        height: var(--navbar-height) !important;
        min-height: var(--navbar-height) !important;
        grid-template-columns: auto 1fr !important;
        grid-template-rows: 40px 36px;
        align-content: center;
        row-gap: 8px !important;
        padding: 6px 12px !important;
    }

    .navbar-actions {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: space-between;
        gap: 4px !important;
        margin-left: 0 !important;
    }

    .navbar-actions .icon-btn,
    .icon-btn {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    .navbar-actions .user-info {
        height: 34px;
        min-height: 34px !important;
        padding: 0 8px !important;
    }

    .navbar-actions .user-info #userName {
        display: none;
    }
}

/* ---------- Colunas fixas, divergência e carregamento das tabelas ---------- */
/* NF fica presa à esquerda e Ações à direita: dá para rolar a tabela de
   17 colunas para os lados sem perder de vista qual é o registro nem os
   botões de editar/enviar e-mail. As células fixas precisam de fundo
   opaco para as colunas roladas passarem por baixo. */
.data-table .col-fixa-nf,
.data-table .col-fixa-acoes {
    position: sticky;
    z-index: 2;
}

.data-table td.col-fixa-nf,
.data-table td.col-fixa-acoes {
    background: var(--card);
}

.data-table .col-fixa-nf {
    left: 0;
    box-shadow: inset -1px 0 0 var(--border);
}

.data-table .col-fixa-acoes {
    right: 0;
    box-shadow: inset 1px 0 0 var(--border);
}

.data-table th.col-fixa-nf,
.data-table th.col-fixa-acoes {
    z-index: 14;
}

.data-table tbody tr:hover td.col-fixa-nf,
.data-table tbody tr:hover td.col-fixa-acoes {
    background: color-mix(in srgb, var(--muted) 60%, var(--card));
}

/* Linha com divergência: fundo avermelhado + faixa à esquerda. */
.data-table tbody tr.linha-divergente,
.data-table tbody tr.linha-divergente td.col-fixa-nf,
.data-table tbody tr.linha-divergente td.col-fixa-acoes {
    background: color-mix(in srgb, var(--destructive) 7%, var(--card));
}

.data-table tbody tr.linha-divergente:hover,
.data-table tbody tr.linha-divergente:hover td.col-fixa-nf,
.data-table tbody tr.linha-divergente:hover td.col-fixa-acoes {
    background: color-mix(in srgb, var(--destructive) 12%, var(--card)) !important;
}

.data-table tbody tr.linha-divergente td:first-child {
    box-shadow: inset 3px 0 0 var(--destructive);
}

/* Carregando: linhas-esqueleto na primeira vez; depois só esmaece. */
.esqueleto {
    display: block;
    min-width: 32px;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--muted) 25%, color-mix(in srgb, var(--muted) 35%, var(--card)) 50%, var(--muted) 75%);
    background-size: 200% 100%;
    animation: esqueleto 1.2s ease-in-out infinite;
}

.data-table tbody tr.linha-esqueleto:hover {
    background: transparent !important;
}

.data-table tbody[aria-busy="true"] tr[data-registro] {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

@keyframes esqueleto {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .esqueleto { animation: none; }
}

/* A coluna Ações só ocupa o espaço dos botões (a regra genérica de
   largura das colunas numéricas a deixava com 140px na Geral). */
.data-table th.col-fixa-acoes,
.data-table td.col-fixa-acoes {
    width: 1%;
    min-width: 0;
    text-align: center;
}

/* ---------- Botões da barra com efeito de pixels (static/js/pixel-canvas.js) ----------
   Ao passar o mouse (ou focar), a borda e o ícone ganham a cor do botão,
   o ícone cresce e os pixels acendem do centro. Cada botão tem sua cor
   (planilha verde e turno laranja já eram as cores dos ícones). */
.icon-btn.btn-pixel {
    --active-color: #0ea5e9;
    --pixel-colors: #e0f2fe, #7dd3fc, #0ea5e9;
    position: relative;
    isolation: isolate;
    transition: border-color 0.2s ease;
}

.icon-btn.btn-pixel-planilha { --active-color: #65a30d; --pixel-colors: #ecfccb, #bef264, #65a30d; }
.icon-btn.btn-pixel-turno { --active-color: #d97706; --pixel-colors: #fef3c7, #fcd34d, #d97706; }
.icon-btn.btn-pixel-calculadora { --active-color: #8b5cf6; --pixel-colors: #ede9fe, #c4b5fd, #8b5cf6; }
.icon-btn.btn-pixel-atualizar { --active-color: #0d9488; --pixel-colors: #ccfbf1, #5eead4, #14b8a6; }
.icon-btn.btn-pixel-embarcacao { --active-color: #6366f1; --pixel-colors: #e0e7ff, #a5b4fc, #6366f1; }

[data-theme="dark"] .icon-btn.btn-pixel { --active-color: #38bdf8; --pixel-colors: #0c4a6e, #0369a1, #0ea5e9; }
[data-theme="dark"] .icon-btn.btn-pixel-planilha { --active-color: #84cc16; --pixel-colors: #1a2e05, #3f6212, #65a30d; }
[data-theme="dark"] .icon-btn.btn-pixel-turno { --active-color: #f59e0b; --pixel-colors: #451a03, #92400e, #d97706; }
[data-theme="dark"] .icon-btn.btn-pixel-calculadora { --active-color: #a78bfa; --pixel-colors: #2e1065, #5b21b6, #8b5cf6; }
[data-theme="dark"] .icon-btn.btn-pixel-atualizar { --active-color: #2dd4bf; --pixel-colors: #042f2e, #115e59, #14b8a6; }
[data-theme="dark"] .icon-btn.btn-pixel-embarcacao { --active-color: #818cf8; --pixel-colors: #1e1b4b, #3730a3, #6366f1; }

.icon-btn.btn-pixel pixel-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
}

.icon-btn.btn-pixel i {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease-out, color 0.3s ease-out;
}

.navbar-actions .icon-btn.btn-pixel:hover,
.icon-btn.btn-pixel:hover,
.icon-btn.btn-pixel:focus-visible {
    background: var(--card) !important;
    border-color: var(--active-color) !important;
}

.navbar-actions .icon-btn.btn-pixel:hover i,
.icon-btn.btn-pixel:hover i,
.icon-btn.btn-pixel:focus-visible i {
    transform: scale(1.15);
    color: var(--active-color);
}

/* ---------- Busca da barra: círculo que expande ao focar ----------
   Fechada é um círculo roxo com a lupa; ao clicar (ou focar pelo Tab)
   abre até a largura que a caixa de busca tinha (130px, ou 100px em telas
   até 1400px) e vira uma linha sublinhada. Com texto digitado continua
   aberta, para a busca ativa não sumir. As regras globais de input usam
   !important (raio e contorno de foco), por isso os !important aqui. */
.navbar-search.busca-expansivel {
    --busca-cor: #7e4fd4;
    --busca-aberta: 130px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.busca-expansivel .busca-campo {
    width: 36px;
    height: 36px;
    padding: 0 36px 0 0;
    border: none !important;
    border-radius: 50% !important;
    outline: none !important;
    background: var(--busca-cor) !important;
    box-shadow: 0 0 3px #f3f3f3 !important;
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    cursor: pointer;
    transition: 0.5s ease-in-out;
}

.busca-expansivel .busca-campo::placeholder {
    color: #8f8f8f;
}

.busca-expansivel .busca-campo:focus,
.busca-expansivel .busca-campo:focus-visible,
.busca-expansivel .busca-campo:not(:placeholder-shown) {
    width: var(--busca-aberta);
    padding-left: 10px;
    border-radius: 0 !important;
    border-bottom: 3px solid var(--busca-cor) !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: text;
    transition: all 500ms cubic-bezier(0, 0.11, 0.35, 2);
}

.busca-expansivel .busca-icone {
    position: absolute;
    right: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: color 0.2s linear;
}

.busca-expansivel:focus-within .busca-icone,
.busca-expansivel:has(.busca-campo:not(:placeholder-shown)) .busca-icone {
    color: var(--busca-cor);
}

[data-theme="dark"] .navbar-search.busca-expansivel {
    --busca-cor: #9d74ea;
}

@media (max-width: 1400px) {
    .navbar-search.busca-expansivel { --busca-aberta: 100px; }
}

@media (prefers-reduced-motion: reduce) {
    .busca-expansivel .busca-campo,
    .busca-expansivel .busca-campo:focus { transition: none; }
}

/* ---------- Ícone de contêiner (planilha TopLink) ----------
   O Font Awesome Free não tem contêiner; é um SVG próprio (caixa com
   frisos verticais, preenchido como os ícones "fas") pintado com a cor do
   texto via mask. Uso: <i class="icone-conteiner" aria-hidden="true"></i> */
.icone-conteiner {
    display: inline-block;
    width: 1.125em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill-rule='evenodd' d='M48 40h480a32 32 0 0 1 32 32v368a32 32 0 0 1-32 32H48a32 32 0 0 1-32-32V72a32 32 0 0 1 32-32ZM90 112h40v288H90ZM162 112h40v288h-40ZM234 112h40v288h-40ZM306 112h40v288h-40ZM378 112h40v288h-40ZM450 112h40v288h-40Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill-rule='evenodd' d='M48 40h480a32 32 0 0 1 32 32v368a32 32 0 0 1-32 32H48a32 32 0 0 1-32-32V72a32 32 0 0 1 32-32ZM90 112h40v288H90ZM162 112h40v288h-40ZM234 112h40v288h-40ZM306 112h40v288h-40ZM378 112h40v288h-40ZM450 112h40v288h-40Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ICONES:INICIO — gerado por tools/gerar_icones.py (Font Awesome Free 6.5.1,
   ícones CC BY 4.0, fonte SIL OFL 1.1). Não edite à mão: rode o script. */
@font-face {
    font-family: "Icones";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("/static/fonts/icones-solid.woff2?v=34a91337") format("woff2");
}

@font-face {
    font-family: "Icones Marcas";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("/static/fonts/icones-marcas.woff2?v=1677db9e") format("woff2");
}

.fa, .fas, .fa-solid, .fab, .fa-brands {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
}

.fa, .fas, .fa-solid { font-family: "Icones"; font-weight: 900; }
.fab, .fa-brands { font-family: "Icones Marcas"; font-weight: 400; }
.fa-fw { text-align: center; width: 1.25em; }
.fa-spin { animation: fa-spin 2s linear infinite; }

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .fa-spin { animation-duration: 1ms; animation-iteration-count: 1; }
}

.fa-bars::before { content: "\f0c9"; }
.fa-bell::before { content: "\f0f3"; }
.fa-boxes::before { content: "\f468"; }
.fa-building::before { content: "\f1ad"; }
.fa-calculator::before { content: "\f1ec"; }
.fa-chart-line::before { content: "\f201"; }
.fa-check::before { content: "\f00c"; }
.fa-check-circle::before { content: "\f058"; }
.fa-chevron-down::before { content: "\f078"; }
.fa-chevron-left::before { content: "\f053"; }
.fa-chevron-right::before { content: "\f054"; }
.fa-chevron-up::before { content: "\f077"; }
.fa-cog::before { content: "\f013"; }
.fa-copy::before { content: "\f0c5"; }
.fa-database::before { content: "\f1c0"; }
.fa-download::before { content: "\f019"; }
.fa-edit::before { content: "\f044"; }
.fa-envelope::before { content: "\f0e0"; }
.fa-eraser::before { content: "\f12d"; }
.fa-exchange-alt::before { content: "\f362"; }
.fa-exclamation-circle::before { content: "\f06a"; }
.fa-exclamation-triangle::before { content: "\f071"; }
.fa-file-alt::before { content: "\f15c"; }
.fa-file-excel::before { content: "\f1c3"; }
.fa-folder::before { content: "\f07b"; }
.fa-gamepad::before { content: "\f11b"; }
.fa-inbox::before { content: "\f01c"; }
.fa-info-circle::before { content: "\f05a"; }
.fa-map-marker-alt::before { content: "\f3c5"; }
.fa-moon::before { content: "\f186"; }
.fa-paper-plane::before { content: "\f1d8"; }
.fa-pencil-alt::before { content: "\f303"; }
.fa-plus::before { content: "\2b"; }
.fa-save::before { content: "\f0c7"; }
.fa-search::before { content: "\f002"; }
.fa-shield-alt::before { content: "\f3ed"; }
.fa-ship::before { content: "\f21a"; }
.fa-sign-out-alt::before { content: "\f2f5"; }
.fa-sort::before { content: "\f0dc"; }
.fa-sort-down::before { content: "\f0dd"; }
.fa-sort-up::before { content: "\f0de"; }
.fa-spinner::before { content: "\f110"; }
.fa-star::before { content: "\f005"; }
.fa-sun::before { content: "\f185"; }
.fa-sync::before { content: "\f021"; }
.fa-sync-alt::before { content: "\f2f1"; }
.fa-table::before { content: "\f0ce"; }
.fa-times::before { content: "\f00d"; }
.fa-times-circle::before { content: "\f057"; }
.fa-trash::before { content: "\f1f8"; }
.fa-truck-loading::before { content: "\f4de"; }
.fa-upload::before { content: "\f093"; }
.fa-user-circle::before { content: "\f2bd"; }
.fa-users::before { content: "\f0c0"; }
.fa-google::before { content: "\f1a0"; }
/* ICONES:FIM */