/* =============================================================================
   GLOBALSAT - CSS Customizado do Projeto
   =============================================================================
   Este arquivo centraliza estilos especificos do projeto que complementam
   o Bootstrap 5. Nao duplicar estilos que o Bootstrap ja oferece.
   ============================================================================= */


/* =============================================================================
   LOGIN PAGE
   ============================================================================= */

body.login-page {
    background: url('../Imagens2/fundo_login.png') no-repeat center center fixed;
    background-size: cover;
    min-height: 100vh;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.form-signin {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    padding: 2.5rem 2rem 2rem;
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.login-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0 1rem;
}

.login-logos img {
    max-height: 60px;
    max-width: 45%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    flex-shrink: 1;
}

.login-logos img.logo-krahe {
    max-height: 300px;
    max-width: none;
    flex-shrink: 0;
    width: 170px;
}

.login-logos .logo-divider {
    width: 1.5px;
    height: 48px;
    background-color: #ccc;
    margin: 0 1.25rem;
    flex-shrink: 0;
}

.login-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 1.75rem;
    font-size: 15px;
    color: #555;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.login-subtitle .btn-info-icon {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #aaa;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s;
    font-size: inherit;
    line-height: inherit;
}

.login-subtitle .btn-info-icon:hover {
    color: #265680;
}

.login-subtitle .btn-info-icon svg {
    width: 1em;
    height: 1em;
}


/* =============================================================================
   FLOATING LABEL (campos de formulario com label flutuante)
   ============================================================================= */

.floating-label-group {
    position: relative;
    margin-bottom: 1.25rem;
    text-align: left;
}

.floating-label-group .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    pointer-events: none;
    z-index: 3;
    transition: color 0.2s;
}

.floating-label-group .input-icon svg {
    width: 18px;
    height: 18px;
}

.floating-label-group .form-control {
    height: auto;
    padding: 14px 14px 14px 44px;
    font-size: 15px;
    border: 2px solid #ddd;
    border-radius: 10px;
    background: #fff;
    color: #333;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    box-sizing: border-box;
    width: 100%;
    outline: none;
    box-shadow: none;
}

.floating-label-group .form-control:focus {
    border-color: #265680;
    box-shadow: 0 0 0 3px rgba(38, 86, 128, 0.1);
    z-index: 2;
}

.floating-label-group .floating-label {
    position: absolute;
    left: 44px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: #999;
    pointer-events: none;
    transition: all 0.2s ease;
    background: transparent;
    padding: 0 4px;
    z-index: 3;
    margin: 0;
    font-weight: 400;
}

.floating-label-group .form-control:focus ~ .floating-label,
.floating-label-group .form-control:not(:placeholder-shown) ~ .floating-label {
    top: 0;
    left: 12px;
    transform: translateY(-50%);
    font-size: 12px;
    color: #265680;
    background: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.floating-label-group .form-control.input-password {
    padding-right: 46px;
}

.toggle-password {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #aaa;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.toggle-password:hover {
    color: #265680;
}

.toggle-password svg {
    width: 20px;
    height: 20px;
}


/* =============================================================================
   BOTAO DE LOGIN
   ============================================================================= */

.btn-login {
    background-color: #265680;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 0;
    width: 100%;
    display: block;
    margin-top: 0;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    letter-spacing: 0.03em;
    text-align: center;
}

.btn-login:hover {
    background-color: #1d4566;
    box-shadow: 0 4px 12px rgba(38, 86, 128, 0.3);
}

.btn-login:active {
    background-color: #163a54;
}

.btn-login-wrapper {
    position: relative;
    margin-top: 0.5rem;
}

.btn-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #265680;
    color: #fff;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    z-index: 5;
}

.btn-loading-overlay.active {
    display: flex;
}

.btn-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.login-forgot-link {
    display: block;
    text-align: center;
    margin-top: 1.25rem;
    font-size: 14px;
    color: #265680;
    text-decoration: none;
    transition: color 0.2s;
}

.login-forgot-link:hover {
    color: #1d4566;
    text-decoration: underline;
}


/* =============================================================================
   BADGES LOJAS DE APP (login)
   ============================================================================= */

.login-app-stores {
    text-align: center;
    margin-top: 0.5rem;
}

.login-divider {
    border: none;
    border-top: 2px solid #ccc;
    margin: 1.25rem 1.5rem 0.75rem;
}

.login-app-stores-label {
    display: block;
    font-size: 13px;
    color: #888;
    margin-bottom: 0.6rem;
    font-weight: 500;
}

.login-app-stores-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.login-app-stores-badges.loaded {
    opacity: 1;
}

/* Badge de loja padronizado (usado no login e nos modais). Sempre "Baixar na". */
.app-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 160px;
    height: 48px;
    padding: 0 14px;
    box-sizing: border-box;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    text-decoration: none;
    color: #fff;
    transition: border-color 140ms ease, transform 140ms ease;
}

    .app-badge:hover {
        border-color: #FFCC33;
        transform: translateY(-1px);
        color: #fff;
        text-decoration: none;
    }

.app-badge__icon {
    flex: none;
    display: block;
}

.app-badge__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    white-space: nowrap;
}

.app-badge__small {
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.app-badge__name {
    font-size: 15px;
    font-weight: 700;
}

@media (max-width: 480px) {
    .app-badge {
        width: 144px;
        height: 44px;
        gap: 8px;
        padding: 0 10px;
    }

    .app-badge__name {
        font-size: 14px;
    }

    .login-divider {
        margin: 1rem 0.75rem 0.6rem;
    }
}


/* =============================================================================
   LAYOUT - PAGINA CENTRALIZADA (telas standalone: senha, erro, etc.)
   ============================================================================= */

.gs-page-centered {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8eef5 0%, #d5dfe9 100%);
    padding: 20px;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

@media (max-width: 480px) {
    .gs-page-centered {
        padding: 16px;
        align-items: flex-start;
        padding-top: 40px;
    }
}


/* =============================================================================
   CARD PADRAO DO PROJETO (Bootstrap 5 - complementa .card)
   ============================================================================= */

.gs-card {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.gs-card-header {
    background: linear-gradient(135deg, #265680, #1d4566);
    border: none;
    padding: 1.75rem 2rem;
    text-align: center;
    color: #fff;
}

.gs-card-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    letter-spacing: 0.03em;
}

.gs-card-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    margin-top: 6px;
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .gs-card-header {
        padding: 1.25rem 1rem;
    }
}


/* =============================================================================
   ICONE CIRCULAR (badge de icone com fundo semi-transparente)
   ============================================================================= */

.gs-icon-circle {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.gs-icon-circle svg {
    width: 24px;
    height: 24px;
    stroke: #fff;
}


/* =============================================================================
   MODAL PADRAO DO PROJETO (Bootstrap 5)
   ============================================================================= */

.gs-modal {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

.gs-modal-header {
    background: linear-gradient(135deg, #265680, #1d4566);
    border: none;
    padding: 1rem 1.5rem;
}

.gs-modal-title {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    letter-spacing: 0.03em;
}

.gs-modal-body {
    padding: 1.5rem 1.25rem;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: .9rem;
    color: #333;
    line-height: 1.5;
    text-align: left;
}

.gs-modal-body p:last-child {
    margin-bottom: 0;
}


/* =============================================================================
   COMPONENTES DE FORMULARIO (reutilizaveis no projeto)
   ============================================================================= */

.gs-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #265680;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.gs-form-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #265680;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.gs-input {
    padding: 11px 14px !important;
    font-size: 14px !important;
    border: 2px solid #ddd !important;
    border-radius: 10px !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
    color: #333 !important;
    background-color: #fff !important;
    box-shadow: none !important;
}

.gs-input:focus {
    border-color: #265680 !important;
    box-shadow: 0 0 0 3px rgba(38, 86, 128, 0.1) !important;
    background-color: #fff !important;
}

.gs-input.gs-input-password {
    padding-right: 46px !important;
}

.btn-gs-primary {
    --bs-btn-bg: #265680;
    --bs-btn-color: #fff;
    --bs-btn-border-color: #265680;
    --bs-btn-hover-bg: #1d4566;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: #1d4566;
    --bs-btn-active-bg: #163a54;
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: #163a54;
    --bs-btn-disabled-bg: #b0c4d8;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-border-color: #b0c4d8;
    background-color: #265680 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    letter-spacing: 0.02em;
}

.btn-gs-primary:hover {
    background-color: #1d4566 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(38, 86, 128, 0.3);
}

.btn-gs-primary:active,
.btn-gs-primary:focus-visible {
    background-color: #163a54 !important;
    color: #fff !important;
}

.btn-gs-primary:disabled {
    background-color: #b0c4d8 !important;
    color: #fff !important;
    border-color: #b0c4d8 !important;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 1;
}

.btn-gs-secondary {
    background-color: #f3f4f6 !important;
    color: #4b5563 !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 10px;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    text-decoration: none !important;
    text-align: center;
}

.btn-gs-secondary:hover {
    background-color: #e5e7eb !important;
    border-color: #9ca3af !important;
    color: #374151 !important;
}

.btn-gs-block {
    display: block;
    width: 100%;
    padding: 13px 0;
    font-size: 15px;
    margin-top: 1.25rem;
    letter-spacing: 0.03em;
}

.gs-channel-item {
    display: flex !important;
    align-items: center;
    padding: 11px 14px;
    margin-bottom: 8px;
    border: 2px solid #e8ecf0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
}

.gs-channel-item:hover {
    border-color: #265680;
    background: #f0f5fa;
}

.gs-channel-item input[type="radio"] {
    margin-right: 10px;
    accent-color: #265680;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.gs-channel-item label {
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    font-weight: 400;
}


/* =============================================================================
   RECUPERACAO DE SENHA (modal)
   ============================================================================= */

.rcp-body {
    padding: 1.75rem 1.75rem 1.5rem !important;
}

.rcp-desc {
    color: #666;
    font-size: 14px;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    margin-top: 0;
}

.rcp-search-options {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.rcp-search-options > span {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.rcp-search-options input[type="radio"] {
    accent-color: #265680;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.rcp-search-options label {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #444;
    cursor: pointer;
}

.rcp-divider {
    border: none;
    border-top: 1px solid #e8ecf0;
    margin: 1.5rem 0;
    opacity: 1;
}

@media (max-width: 576px) {
    .rcp-body {
        padding: 1.5rem 1.25rem !important;
    }
}


/* =============================================================================
   ALERTAS DE SEGURANCA (modal de notificacoes do sistema)
   ============================================================================= */

.alertSegurancaSts {
    z-index: 99999999;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: none;
}

.MaskDivAlertSeg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.42);
}

.MaskDivAlertSegMax {
    background: black;
}

.ModalJanAlertSeg {
    width: 95%;
    max-width: 550px;
    background: white;
    padding: 5px;
    margin: 0 auto;
    position: relative;
    margin-top: 50px;
    border-radius: 3px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.36);
}

.InfoDivsegAlert {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

.InfoDivsegAlert h1 {
    font-size: 0.8em;
    text-align: center;
    font-family: Arial;
}

.InfoDivsegAlert p {
    font-size: 0.8em;
    margin: 0;
    text-align: left;
    font-family: Arial;
}

.ActionDivsegAlert {
    background: rgba(128, 128, 128, 0);
    margin: 0 135px;
    display: table;
    text-align: center;
}

.btnAlertMod {
    -webkit-transition: .2s ease-in-out all;
    -o-transition: .2s ease-in-out all;
    transition: .2s ease-in-out all;
    background: #d4d4d4;
    color: #616161;
    padding: 3px 7px;
    border-radius: 3px;
    border: 2px solid rgba(128, 128, 128, 0.23);
    text-decoration: none;
    cursor: pointer;
    font-family: arial;
    font-size: 0.7em;
    margin: 4px auto;
}

.btnAlertMod:hover {
    background: #3b73b9;
    color: white;
}


/* =============================================================================
   MODAL OVERRIDES (Bootstrap)
   ============================================================================= */

.modal-footer > * {
    margin: 0;
}


/* =============================================================================
   MODAL READONLY - Modo visualizacao (campos desabilitados, valor legivel)
   ============================================================================= */

.modal-header-visualizar {
    background: linear-gradient(135deg, #a8b3be, #95a0ac) !important;
}

.modal-readonly input:disabled,
.modal-readonly textarea:disabled,
.modal-readonly select:disabled {
    background-color: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    color: #111827 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #111827 !important;
    cursor: default !important;
}

.modal-readonly .ts-wrapper.single .ts-control.disabled,
.modal-readonly .ts-wrapper.single .ts-control[disabled] {
    background-color: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: default !important;
}

.modal-readonly .ts-wrapper.single .ts-control.disabled::after {
    opacity: 0.45 !important;
}


/* =============================================================================
   LOGIN - RESPONSIVO
   ============================================================================= */

@media (max-width: 768px) and (min-width: 481px) {
    .ModalJanAlertSeg {
        width: 99%;
        padding: 1%;
        margin: 0 auto;
        position: relative;
        margin-top: 35px;
    }

    .ActionDivsegAlert {
        margin: 0 auto;
    }

    .iziToast-wrapper-bottomCenter {
        max-height: 49px;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .ModalJanAlertSeg {
        width: 99%;
        padding: 1%;
        margin: 0 auto;
        position: relative;
        margin-top: 90px;
    }

    .ActionDivsegAlert {
        margin: 0 auto;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .ModalJanAlertSeg {
        width: 99%;
        padding: 1%;
        margin: 0 auto;
        position: relative;
        margin-top: 35px;
    }

    .ActionDivsegAlert {
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .login-wrapper {
        padding: 0.5rem;
    }

    .form-signin {
        padding: 2rem 1.25rem 1.5rem;
        border-radius: 16px;
        max-width: 100%;
        width: 95%;
    }

    .login-logos img {
        max-height: 45px;
        max-width: 40%;
    }

    .login-logos .logo-divider {
        height: 36px;
        margin: 0 0.75rem;
    }

    .login-subtitle {
        font-size: 13px;
        margin-bottom: 1.25rem;
    }

    .floating-label-group .form-control {
        padding: 12px 12px 12px 40px;
        font-size: 14px;
    }

    .floating-label-group .input-icon {
        left: 12px;
    }

    .floating-label-group .floating-label {
        left: 40px;
        font-size: 14px;
    }

    .floating-label-group .form-control.input-password {
        padding-right: 42px;
    }

    .toggle-password {
        right: 12px;
    }

    .ModalJanAlertSeg {
        width: 99%;
        padding: 1%;
        margin: 0 auto;
        position: relative;
        margin-top: 90px;
    }

    .ActionDivsegAlert {
        margin: 0 auto;
    }
}

@media (max-width: 360px) {
    .form-signin {
        padding: 1.5rem 1rem 1.25rem;
    }

    .login-logos img {
        max-height: 38px;
        max-width: 38%;
    }
}

/* ============================================================
   iziToast - Overrides visuais Globalsat
   ============================================================ */
.iziToast {
    border-radius: 10px !important;
    overflow: hidden !important;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    min-width: 300px;
}

.iziToast > .iziToast-body {
    padding: 0 8px !important;
}

.iziToast > .iziToast-body .iziToast-title {
    font-weight: 700 !important;
    font-size: 13px !important;
}

.iziToast > .iziToast-body .iziToast-message {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.iziToast > .iziToast-close {
    opacity: .7;
}

.iziToast > .iziToast-close:hover {
    opacity: 1;
}

.iziToast > .iziToast-progressbar {
    border-radius: 0 0 10px 10px !important;
    overflow: hidden !important;
}

.iziToast > .iziToast-progressbar > div {
    border-radius: 0 !important;
}

/* =============================================================================
   DATAGRID - GridView padrao do projeto
   -----------------------------------------------------------------------------
   Padrao de alinhamento (UX moderno - Material/IBM/Atlassian):
     - Texto         => esquerda (padrao, sem classe)
     - Numeros       => use class="text-end" no Header e Item
     - Status/icone  => use class="text-center" no Header e Item
     - Coluna de acoes (.gs-grid-actions-td): centralizada automaticamente
     - 1a coluna: segue o conteudo (texto=esq, ID numerico use "text-center")

   Ordenacao (th.sortable):
     - Sem ordem    => chevron-expand cinza
     - .asc / .desc => chevron unico (up/down) azul + fundo cinza sutil
   ============================================================================= */

.datagrid th {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.3rem !important;
    text-align: left !important;
}

.datagrid td {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.3rem !important;
    text-align: left !important;
    vertical-align: middle;
}

.datagrid thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.datagrid th.grid-header {
    background-color: #e9ecef !important;
    color: #181824 !important;
    font-weight: bold !important;
    font-style: normal !important;
    text-decoration: none !important;
    text-align: left !important;
    box-shadow: inset 0 -1px 0 #dee2e6;
    white-space: nowrap !important;
}

.datagrid th.grid-header a {
    color: inherit !important;
    text-decoration: none !important;
    display: block;
    text-align: left !important;
    white-space: nowrap !important;
}

.datagrid th.grid-header:hover {
    background-color: #d3dce0 !important;
}

.datagrid th.sortable {
    position: relative;
    cursor: pointer;
    background-color: #e9ecef;
    padding-right: 1.5rem !important;
}

.datagrid th.sortable::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.5rem;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3e%3cpath d='M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z'/%3e%3c/svg%3e");
    opacity: 0.65;
}

.datagrid th.sortable.asc {
    background-color: #d3dce0;
}

.datagrid th.sortable.asc::after {
    opacity: 1;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23265680'%3e%3cpath d='M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3e%3c/svg%3e");
}

.datagrid th.sortable.desc {
    background-color: #d3dce0;
}

.datagrid th.sortable.desc::after {
    opacity: 1;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23265680'%3e%3cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");
}

/* Sem comunicação: reseta variáveis CSS do Bootstrap 5 que aplicam
   o striped via box-shadow inset, garantindo tom uniforme */
.datagrid.table tbody tr.row-semc > * {
    --bs-table-accent-bg: transparent !important;
    --bs-table-bg-type: transparent !important;
    --bs-table-bg-state: transparent !important;
    --bs-table-color-type: initial !important;
    --bs-table-color-state: initial !important;
}

.datagrid.table tbody tr.row-semc > td:not(:first-child) {
    background-color: #fdecea !important;
    box-shadow: none !important;
    color: #c62828 !important;
}

.datagrid.table.table-hover tbody tr.row-semc:hover > td:not(:first-child) {
    background-color: #f8d0cb !important;
    box-shadow: none !important;
    color: #b71c1c !important;
}

/* Coluna de índice: accent lateral, fundo alinhado com Bootstrap 5
   Obs.: alinhamento segue o conteúdo (texto = esquerda).
   Para colunas de ID numérico, adicionar class="text-center" na coluna. */
.datagrid.table tbody td:first-child {
    background-color: var(--bs-table-bg) !important;
    border-left: 3px solid #3B73B9 !important;
}

/* Header da primeira coluna ganha 3px extras de padding-left para alinhar
   com o conteudo dos TDs (que tem border-left: 3px solid #3B73B9 de accent).
   Usamos padding em vez de border transparente para nao gerar uma faixa
   branca visivel quando o fundo da tabela atras nao for cinza. */
.datagrid.table th:first-child {
    padding-left: calc(0.3rem + 3px) !important;
}

.datagrid.table tbody td:first-child a {
    color: #374151 !important;
    font-weight: 600;
    font-size: 0.73rem;
    text-decoration: none !important;
}

/* Coluna de índice em linha sem comunicação */
.datagrid.table tbody tr.row-semc > td:first-child {
    border-left-color: #dc3545 !important;
    background-color: #fdecea !important;
    box-shadow: none !important;
}

.datagrid.table tbody tr.row-semc > td:first-child a {
    color: #991b1b !important;
}

.datagrid.table.table-hover tbody tr.row-semc:hover > td:first-child {
    background-color: #f8d0cb !important;
    box-shadow: none !important;
}


/* =============================================================================
   LOADING OVERLAY (tela de carregamento)
   ============================================================================= */

.gs-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}


/* =============================================================================
   NODATA MODAL (estado vazio / sem dados)
   ============================================================================= */

.nodata-modal-backdrop {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
}

.nodata-modal-backdrop.active {
    display: flex !important;
}

.nodata-modal {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
    padding: 2rem 1.75rem 1.5rem !important;
    max-width: 400px !important;
    width: 90% !important;
    text-align: center !important;
    animation: nodata-modalSlideIn 0.3s ease !important;
}

@keyframes nodata-modalSlideIn {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.nodata-modal-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: #fff8e1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 1rem !important;
}

.nodata-modal-icon svg {
    width: 28px !important;
    height: 28px !important;
    stroke: #f0a500 !important;
}

.nodata-modal-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 0 0 0.5rem !important;
}

.nodata-modal-message {
    font-size: 14px !important;
    color: #777 !important;
    margin: 0 0 1.5rem !important;
    line-height: 1.5 !important;
}

.nodata-modal-btn {
    display: block !important;
    width: 100% !important;
    padding: 12px 0 !important;
    border: none !important;
    border-radius: 10px !important;
    background: #265680 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

.nodata-modal-btn:hover {
    background: #1d4566 !important;
    box-shadow: 0 4px 12px rgba(38, 86, 128, 0.3) !important;
}

@media (max-width: 480px) {
    .nodata-modal {
        padding: 1.5rem 1.25rem 1.25rem !important;
        max-width: 95% !important;
    }
}



/* =============================================================================
   MAP/GRID - Containers de mapa e grid reutilizaveis
   ============================================================================= */

.gs-map-grid-wrapper {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 4px;
    box-sizing: border-box;
    margin: 0;
}

.gs-map-area {
    width: 100%;
    min-height: 400px;
    height: 56vh;
    max-height: 75vh;
    background: transparent;
    border-radius: 10px;
    margin-bottom: 5px;
    position: relative;
    padding: 0;
}

.gs-map {
    width: 100% !important;
    height: 100% !important;
    min-height: 320px;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Reduz o tamanho do seletor de camadas Leaflet (alinhado aos novos botoes) */
.gs-map-area .leaflet-control-layers-toggle {
    width: 30px;
    height: 30px;
    background-size: 22px 22px;
}

.gs-map-area .leaflet-retina .leaflet-control-layers-toggle {
    background-size: 22px 22px;
}

/* Atualizar: abaixo do seletor de camadas — alinhado ao Leaflet (.leaflet-control-layers + toggle) */
.gs-map-refresh-host {
    position: absolute;
    /* 10px (margem Leaflet) + 30px (altura do toggle) + 5px espaco visual */
    top: 45px;
    right: 10px;
    z-index: 1000;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.gs-map-refresh-host .gs-map-refresh-shell,
.gs-map-refresh-host .gs-map-btn-atualizar {
    pointer-events: auto;
}

/*
  Caixa externa = mesmo bloco do controle de camadas (leaflet.css):
  fundo branco, radius 5px, sombra 0 1px 5px rgba(0,0,0,.4).
  Borda explícita um pouco mais visível que só rgba(0,0,0,.2) no link isolado.
*/
.gs-map-area .gs-map-refresh-shell.leaflet-control-layers {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    line-height: 0;
    border: 1px solid rgba(0, 0, 0, 0.28);
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

/* Toggle interno: sem sombra/borda próprias (evita “apagado” vs camadas); ícone em cinza como o PNG do layers */
.gs-map-area a.gs-map-btn-atualizar,
.gs-map-area a.gs-map-btn-atualizar:link,
.gs-map-area a.gs-map-btn-atualizar:visited {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    margin: 0;
    border: none !important;
    border-radius: 0;
    background: transparent !important;
    background-image: none !important;
    color: transparent !important; /* ícone via .gs-map-refresh-icon */
    box-shadow: none !important;
    font-size: 0;
    line-height: 0;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
}

.gs-map-area a.gs-map-btn-atualizar .gs-map-refresh-icon {
    color: #5c5c5c;
    font-size: 13px;
    opacity: 0.92;
    line-height: 1;
}

.gs-map-area a.gs-map-btn-atualizar:hover,
.gs-map-area a.gs-map-btn-atualizar:focus {
    background: rgba(0, 0, 0, 0.04) !important;
    text-decoration: none !important;
}

.gs-map-area a.gs-map-btn-atualizar:hover .gs-map-refresh-icon,
.gs-map-area a.gs-map-btn-atualizar:focus .gs-map-refresh-icon {
    color: #424242;
    opacity: 1;
}

.gs-map-area a.gs-map-btn-atualizar:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.25);
    outline-offset: -2px;
}

/* Modo touch Leaflet: toggle ligeiramente maior, mas menor que o padrao do Leaflet */
.gs-map-area:has(#map.leaflet-touch) a.gs-map-btn-atualizar {
    width: 38px;
    height: 38px;
}

.gs-map-area:has(#map.leaflet-touch) a.gs-map-btn-atualizar .gs-map-refresh-icon {
    font-size: 15px;
}

.gs-map-area:has(#map.leaflet-touch) .leaflet-control-layers-toggle {
    width: 38px;
    height: 38px;
    background-size: 28px 28px;
}

.gs-map-area:has(#map.leaflet-touch) .gs-map-refresh-host {
    /* 10px (margem Leaflet) + 38px (altura do toggle) + 4px (border 2px topo+baixo) + 5px espaco visual */
    top: 57px;
}

/* Touch: igual leaflet.css — shell fora do #map não herda .leaflet-touch .leaflet-control-layers */
.gs-map-area:has(#map.leaflet-touch) .gs-map-refresh-shell.leaflet-control-layers {
    box-shadow: none;
    border: 2px solid rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
}

/* Modo Fullscreen do mapArea: garante que o mapa preencha a tela e o grid fique invisivel */
.gs-map-area:fullscreen,
.gs-map-area:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    background: #fff;
}

.gs-map-area:fullscreen #map,
.gs-map-area:-webkit-full-screen #map {
    width: 100% !important;
    height: 100% !important;
}

.gs-map-area:fullscreen .gs-map-refresh-host,
.gs-map-area:-webkit-full-screen .gs-map-refresh-host {
    top: 45px;
    right: 10px;
}

/* =============================================================================
   PAINEL LATERAL DE INFO DO VEICULO (dentro do mapa)
   ============================================================================= */

.gs-vinfo-panel {
    position: absolute;
    bottom: 28px;
    left: 10px;
    z-index: 800;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 10px;
    box-shadow: 0 3px 16px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .06);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    min-width: 210px;
    max-width: 260px;
    overflow: hidden;
    display: none;
}

.gs-vinfo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    background: linear-gradient(135deg, #3b73b9 0%, #2c5f9e 100%);
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.gs-vinfo-placa-header {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .8px;
}

.gs-vinfo-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 18px;
    line-height: 1;
    transition: color .15s;
}

.gs-vinfo-close:hover {
    color: #fff;
}

.gs-vinfo-body {
    padding: 10px 12px 12px;
}

.gs-vinfo-placa-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.gs-vinfo-placa {
    font-size: 16px;
    font-weight: 700;
    color: #1d4566;
    letter-spacing: .5px;
}

.gs-vinfo-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.gs-vinfo-status-mov { background: rgba(40,167,69,.12); color: #28a745; }
.gs-vinfo-status-oci { background: rgba(255,193,7,.15); color: #d4a106; }
.gs-vinfo-status-off { background: rgba(108,117,125,.12); color: #6c757d; }
.gs-vinfo-status-sem { background: rgba(220,53,69,.1); color: #dc3545; }

.gs-vinfo-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.gs-vinfo-table td {
    padding: 3px 0;
    vertical-align: top;
    color: #444;
    font-size: 11.5px;
    line-height: 1.35;
}

.gs-vinfo-icon {
    width: 20px;
    color: #7a8a9e;
    text-align: center;
    font-size: 11px;
    padding-right: 6px !important;
}

.gs-vinfo-status-cell {
    text-align: right;
    white-space: nowrap;
    width: 1%;
    padding-left: 6px !important;
}

.gs-vinfo-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gs-vinfo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 6px 0;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    text-align: center;
    border: none;
    transition: background .15s, box-shadow .15s;
}

.gs-vinfo-btn-maps {
    background: #f3f4f6;
    color: #4b5563 !important;
    border: 1px solid #d1d5db;
}

.gs-vinfo-btn-maps:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
    color: #374151 !important;
}

.gs-vinfo-btn-detail {
    background: #265680;
    color: #fff !important;
}

.gs-vinfo-btn-detail:hover {
    background: #1d4566;
    box-shadow: 0 2px 8px rgba(38, 86, 128, .25);
}

@media (max-width: 767px) {
    .gs-vinfo-panel {
        left: 5px;
        right: 5px;
        bottom: 5px;
        max-width: none;
        min-width: 0;
        font-size: 11px;
        border-radius: 8px;
    }

    .gs-vinfo-header {
        padding: 8px 10px;
        font-size: 13px;
    }

    .gs-vinfo-placa-header {
        font-size: 14px;
    }

    .gs-vinfo-close {
        font-size: 18px;
        padding: 2px 6px;
    }

    .gs-vinfo-body {
        padding: 6px 8px 8px;
    }

    .gs-vinfo-placa {
        font-size: 14px;
    }

    .gs-vinfo-badge {
        font-size: 9px;
        padding: 1px 6px;
    }

    .gs-vinfo-table {
        margin-bottom: 6px;
    }

    .gs-vinfo-table td {
        font-size: 10.5px;
        padding: 2px 0;
        line-height: 1.25;
    }

    .gs-vinfo-actions {
        flex-direction: row;
        gap: 6px;
    }

    .gs-vinfo-btn {
        font-size: 10.5px;
        padding: 5px 0;
    }
}


/* =============================================================================
   ROTA ON-DEMAND (overlay no mapa de veiculos)
   ============================================================================= */

.gs-rota-arrow {
    background: none !important;
    border: none !important;
}

.gs-rota-arrow-dot {
    width: 22px;
    height: 22px;
    background: #2563eb;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gs-rota-arrow-dot.gs-rota-dot-mov {
    background: #16a34a;
}

.gs-rota-arrow-dot.gs-rota-dot-oci {
    background: #ea8c00;
}

.gs-rota-arrow-dot.gs-rota-dot-off {
    background: #dc2626;
}

.gs-rota-circle {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    display: block;
}

.gs-rota-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 10px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #265680;
}

.gs-rota-loading-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(38, 86, 128, 0.2);
    border-top-color: #265680;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}


.gs-grid-area {
    display: block !important;
    margin-bottom: 1rem;
    border-radius: 0.8rem;
    font-size: 0.8rem;
    line-height: 1.2;
    margin-top: 20px;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
}

.gs-grid-area .row.align-items-center.mb-3 {
    margin-bottom: 0.5rem;
}

.gs-grid-area .btn,
.gs-grid-area .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.gs-grid-area .form-control,
.gs-grid-area .form-select {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.gs-grid-area .datagrid th,
.gs-grid-area .datagrid td {
    padding: 0.3rem 0.5rem;
    vertical-align: middle;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #dee2e6 !important;
}

.gs-grid-area .datagrid {
    margin-bottom: 1rem;
    border-collapse: separate !important;
    border-spacing: 0;
}

/* Moldura leve só na tabela (toolbar permanece como antes, sem card envolvendo tudo) */
.gs-grid-area .gs-grid-table-shell {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-bottom: 1rem;
}

.gs-grid-area .gs-grid-table-shell .datagrid {
    margin-bottom: 0;
}

/* Acoes do grid: mapa + obs sempre na mesma linha (centralizado por padrao) */
.datagrid .gs-grid-actions-td {
    white-space: nowrap;
    vertical-align: middle;
    text-align: center !important;
}

/* Header da coluna de acoes: acompanha a centralizacao da celula
   Use em pares: HeaderStyle CssClass="gs-grid-actions-th"
                 ItemStyle   CssClass="gs-grid-actions-td" */
.datagrid th.gs-grid-actions-th {
    text-align: center !important;
}

/* Variante alinhada a esquerda: util para colunas de acoes com muitos botoes
   condicionais (ex: aba "Todos"), onde a centralizacao do conjunto inteiro faz
   com que botoes-ancora (ex: o icone de olho) mudem de posicao entre as linhas.
   Mantendo tudo alinhado a esquerda, o primeiro botao fica sempre no mesmo X. */
.datagrid .gs-grid-actions-td-left {
    white-space: nowrap;
    vertical-align: middle;
    text-align: left !important;
}

.datagrid th.gs-grid-actions-th-left {
    text-align: left !important;
}

.datagrid .gs-grid-actions-inline {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.datagrid .gs-grid-actions-inline a,
.gs-grid-actions-inline a {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    line-height: 1;
    text-decoration: none;
}

/* Reserva espaço do ícone "vincular motorista" quando desabilitado (invisível, mas ocupa slot) */
.datagrid .gs-grid-actions-inline a.gs-grid-action-vincula-placeholder {
    visibility: hidden;
    pointer-events: none;
}


/* =============================================================================
   LEAFLET - Overrides visuais
   ============================================================================= */

.leaflet-tooltip {
    font-size: 10px;
    line-height: 1.1;
    padding: 2px 4px;
    max-width: 60px;
    white-space: nowrap;
}


/* =============================================================================
   PAINEL DE FILTROS (status do veiculo no mapa)
   ============================================================================= */

.gs-status-panel {
    position: absolute;
    bottom: 28px;
    right: 10px;
    z-index: 800;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 10px;
    box-shadow: 0 3px 16px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .05);
    font-size: 11px;
    min-width: 185px;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.gs-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 9px;
    background: linear-gradient(135deg, #3b73b9 0%, #2c5f9e 100%);
    font-weight: 700;
    font-size: 9.5px;
    color: #fff;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.gs-filter-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.gs-filter-search {
    display: flex;
    align-items: center;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .3);
    margin-left: 0;
    flex: 1 1 auto;
    min-width: 0;
    transition: background .2s, border-color .2s;
}

.gs-filter-search:focus-within {
    background: rgba(255, 255, 255, .35);
    border-color: rgba(255, 255, 255, .6);
}

.gs-filter-search input {
    border: none;
    outline: none;
    padding: 2px 6px;
    font-size: 10px;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    color: #fff;
}

.gs-filter-search input::placeholder {
    color: rgba(255, 255, 255, .65);
}

.gs-filter-search button {
    border: none;
    background: transparent;
    padding: 2px 4px;
    cursor: pointer;
    color: rgba(255, 255, 255, .7);
    font-size: 9px;
    transition: color .15s;
}

.gs-filter-search button:hover {
    color: #fff;
}

.gs-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    font-size: 9.5px;
}

.gs-status-table {
    width: 100%;
    border-collapse: collapse;
}

.gs-status-row {
    cursor: pointer;
    transition: background-color .18s;
}

.gs-status-row:hover {
    background-color: rgba(59, 115, 185, .07);
}

.gs-status-row.active {
    background: linear-gradient(90deg, rgba(59, 115, 185, .13) 0%, rgba(59, 115, 185, .06) 100%);
    border-left: 3px solid #3b73b9;
}

.gs-status-row td {
    padding: 4px 9px;
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    vertical-align: middle;
}

.gs-status-row.active td {
    padding-left: 6px;
}

.gs-status-row td:first-child {
    width: 24px;
    text-align: center;
    padding-right: 1px;
}

.gs-status-name {
    white-space: nowrap;
    color: #374151;
    font-weight: 500;
}

.gs-status-val {
    text-align: right;
    font-weight: 700;
    min-width: 22px;
    padding-left: 10px;
    color: #1e293b;
}

.gs-status-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    background: linear-gradient(135deg, rgba(59, 115, 185, .06) 0%, rgba(59, 115, 185, .02) 100%);
    border-top: 1px solid rgba(0, 0, 0, .06);
    cursor: pointer;
    transition: background-color .18s;
}

.gs-status-footer:hover {
    background: rgba(59, 115, 185, .1);
}

.gs-status-footer.active {
    background: linear-gradient(90deg, rgba(59, 115, 185, .15) 0%, rgba(59, 115, 185, .06) 100%);
    border-left: 3px solid #3b73b9;
    padding-left: 6px;
}

.gs-status-footer .gs-status-name {
    font-weight: 600;
    color: #1e293b;
}

.gs-status-footer .gs-status-val {
    margin-left: auto;
    font-size: 12px;
    color: #3b73b9;
}

.gs-toggle-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, .75);
    cursor: pointer;
    padding: 0 3px;
    font-size: 10px;
    line-height: 1;
    transition: transform .25s, color .15s;
}

.gs-toggle-btn:hover {
    color: #fff;
}

.gs-status-panel.collapsed .gs-status-table,
.gs-status-panel.collapsed .gs-status-footer {
    display: none;
}

.gs-status-panel.collapsed .gs-toggle-btn {
    transform: rotate(180deg);
}


/* =============================================================================
   MAP/GRID - Responsivo mobile
   ============================================================================= */

@media (max-width: 767px) {
    .gs-map-grid-wrapper {
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 0 !important;
    }

    .gs-map-area {
        position: relative !important;
        height: 48vh !important;
        max-height: none !important;
        margin: 4px 0 !important;
        border-radius: 12px;
    }

    .gs-map {
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: inherit;
    }

    .gs-grid-area {
        margin: 4px 0 !important;
        border-radius: 12px;
    }
}


/* =============================================================================
   LAYOUT - BODY (paginas com sidebar/header)
   ============================================================================= */

body.gs-layout-page {
    background-color: #EEEEEE;
    color: #181824;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
}

.main-layout {
    display: flex;
    flex-direction: row;
}


/* =============================================================================
   LAYOUT - HEADER
   ============================================================================= */

.hyper-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 40px;
    background-color: #EEEEEE;
    color: #fff;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-shadow: 0 2px 8px 0 rgba(44,48,82,.05);
    border-bottom: 2px solid #265680;
}

.hyper-header-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 5px;
}

.btn-sidebar-toggle {
    background: transparent;
    border: none;
    color: #265680;
    font-size: 2.1rem;
    margin-right: 18px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: absolute;
    left: 2px;
}

.btn-sidebar-toggle svg {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    stroke-width: 2.4 !important;
    transition: transform var(--gs-speed) ease;
}

/* A classe e alternada por applySidebarState(): o botao vive no header, fora
   da <aside>, entao nao alcanca .sidebar-collapsed por seletor. */
.btn-sidebar-toggle.is-collapsed svg {
    transform: rotate(180deg);
}

.logo-header {
    height: 60px;
    margin: 0 auto;
    display: block;
    padding-top: 4px;
}

.btn-mobile-refresh {
    position: absolute;
    right: 16px;
    color: #265680;
    display: none;
    align-items: center;
    text-decoration: none;
}

/* =============================================================================
   HEADER - NOTIFICACAO ESPELHAMENTOS PENDENTES
   ============================================================================= */

.gs-notif-wrapper {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(calc(-50% + 4px));
    z-index: 1200;
}

@media (max-width: 575px) {
    .gs-notif-wrapper {
        right: 18px;
    }
}

.gs-notif-bell {
    position: relative;
    background: transparent;
    border: none;
    color: #265680;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
    padding: 0;
}

    .gs-notif-bell:hover,
    .gs-notif-bell:focus {
        background: rgba(38, 86, 128, 0.10);
        outline: none;
    }

    .gs-notif-bell svg {
        width: 18px !important;
        height: 18px !important;
        stroke-width: 2;
    }

.gs-notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background-color: #dc2626;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px;
    border-radius: 9px;
    text-align: center;
    box-shadow: 0 0 0 2px #EEEEEE;
    pointer-events: none;
}

.gs-notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 24px);
    background: #ffffff;
    color: #1e293b;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    z-index: 1300;
    display: none;
    overflow: hidden;
}

    .gs-notif-dropdown.show {
        display: block;
        animation: gsNotifFadeIn 0.14s ease-out;
    }

@keyframes gsNotifFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gs-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
}

.gs-notif-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.gs-notif-title-main {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.1px;
}

.gs-notif-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: #f59e0b;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.gs-notif-link {
    font-size: 0.78rem;
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

    .gs-notif-link:hover {
        text-decoration: underline;
        color: #1d4ed8;
    }

.gs-notif-body {
    max-height: 380px;
    overflow-y: auto;
    padding: 4px 0;
}

.gs-notif-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.12s ease;
    cursor: pointer;
}

    .gs-notif-item:last-child {
        border-bottom: none;
    }

    .gs-notif-item:hover,
    .gs-notif-item:focus {
        background: #f8fafc;
        color: inherit;
        text-decoration: none;
    }

        .gs-notif-item:hover .gs-notif-arrow,
        .gs-notif-item:focus .gs-notif-arrow {
            color: #2563eb;
            transform: translate(2px, -2px);
        }

.gs-notif-info {
    flex: 1 1 auto;
    min-width: 0;
}

.gs-notif-row1 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-notif-placa-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #0f172a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.gs-notif-origem {
    color: #0f172a;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.gs-notif-row2 {
    font-size: 0.74rem;
    color: #64748b;
    margin-top: 3px;
}

.gs-notif-arrow {
    flex: 0 0 auto;
    color: #94a3b8;
    font-size: 0.95rem;
    transition: color 0.15s ease, transform 0.15s ease;
}

.gs-notif-empty {
    padding: 28px 16px 26px;
    text-align: center;
    color: #64748b;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

    .gs-notif-empty i {
        font-size: 2rem;
        color: #10b981;
        margin-bottom: 4px;
    }

.gs-notif-empty-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
}

.gs-notif-empty-sub {
    font-size: 0.78rem;
    color: #64748b;
}

.gs-notif-footer {
    padding: 10px 16px;
    text-align: center;
    font-size: 0.75rem;
    color: #64748b;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}

@media (max-width: 575px) {
    .gs-notif-dropdown {
        width: calc(100vw - 24px);
        right: -6px;
    }
}


/* =============================================================================
   LAYOUT - SIDEBAR
   -----------------------------------------------------------------------------
   Customizacao do tema: alterar apenas as variaveis abaixo. As larguras
   (--gs-w / --gs-w-mini) sao a unica fonte de verdade e tambem definem a
   margem da area de conteudo.
   ============================================================================= */

:root {
    --gs-bg: #12395B;
    --gs-bg-deep: #0F2E49;
    --gs-hover: rgba(255,255,255,.09);
    --gs-accent: #2B92DB;
    --gs-text: #DCE6F0;
    --gs-muted: #8AA5BF;
    --gs-line: rgba(255,255,255,.12);
    --gs-w: 250px;
    --gs-w-mini: 56px;
    --gs-speed: .2s;
}

.hyper-sidebar {
    position: fixed;
    left: 0;
    top: 40px;
    bottom: 0;
    width: var(--gs-w);
    background: var(--gs-bg);
    color: var(--gs-text);
    z-index: 1050;
    transition: width var(--gs-speed) cubic-bezier(.4,0,.2,1), transform var(--gs-speed) cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
}

/* Evita o "piscar" do sidebar e do conteudo principal durante o carregamento
   inicial da pagina. A classe .gs-preload e removida via JS apos o estado inicial
   ser aplicado, reativando as transicoes para interacoes do usuario. */
.gs-preload .hyper-sidebar,
.gs-preload .main-content-area {
    transition: none !important;
}

.sidebar-collapsed {
    width: var(--gs-w-mini) !important;
}

.sidebar-hidden {
    transform: translateX(-100%);
    box-shadow: none;
}

.sidebar-show {
    transform: translateX(0);
    box-shadow: 2px 0 12px 0 rgba(60,60,80,0.12);
}

.sidebar-header {
    display: none;
}

.nav.flex-column {
    width: 100%;
}

.sidebar-nav {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap !important;
}

.sidebar-scroll-area {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 6px 10px 10px;
    box-sizing: border-box;
}

.sidebar-collapsed .sidebar-scroll-area {
    padding: 6px 6px 10px;
}

.sidebar-scroll-area::-webkit-scrollbar {
    width: 6px;
}

.sidebar-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18);
    border-radius: 3px;
}

.sidebar-footer-area {
    flex: 0 0 auto;
    width: 100%;
    padding: 6px 10px 10px;
    box-sizing: border-box;
    border-top: 1px solid var(--gs-line);
}

.sidebar-collapsed .sidebar-footer-area {
    padding: 6px 6px 10px;
}

.sidebar-link, .sidebar-dropdown-toggle {
    position: relative;
    color: var(--gs-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    border-radius: 8px;
    font-size: 0.88rem;
    transition: background var(--gs-speed) ease, color var(--gs-speed) ease;
    cursor: pointer;
    height: 44px;
    min-height: 44px;
    margin-bottom: 2px;
    padding: 0;
}

.sidebar-link:hover, .sidebar-dropdown-toggle:hover {
    background: var(--gs-hover);
    color: #fff;
}

.sidebar-link.active {
    background: var(--gs-accent);
    color: #fff;
}

/* Barra branca colada na borda esquerda da sidebar. O -10px compensa o
   padding lateral de .sidebar-scroll-area / .sidebar-footer-area. */
.sidebar-link.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #fff;
}

.sidebar-collapsed .sidebar-link.active::before {
    left: -6px;
}

.sidebar-link-inner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 12px;
    padding: 0 12px;
    box-sizing: border-box;
}

.sidebar-link svg,
.sidebar-dropdown-toggle svg {
    width: 15px !important;
    height: 15px !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.sidebar-collapsed .sidebar-link,
.sidebar-collapsed .sidebar-dropdown-toggle {
    justify-content: center !important;
}

.sidebar-collapsed .sidebar-link-inner {
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    height: 44px !important;
    width: 100% !important;
}

.sidebar-collapsed .sidebar-link i[data-feather],
.sidebar-collapsed .sidebar-dropdown-toggle i[data-feather] {
    width: 16px !important;
    height: 16px !important;
    font-size: 20px !important;
    margin: 0 !important;
}

.sidebar-collapsed .sidebar-text {
    opacity: 0 !important;
    width: 0 !important;
    display: inline-block;
}

.sidebar-collapsed .dropdown-arrow {
    display: none !important;
}

.sidebar-collapsed .sidebar-dropdown-menu {
    display: none !important;
}

.sidebar-collapsed .sidebar-sublink {
    display: none;
}

.sidebar-dropdown-menu {
    display: none;
    flex-direction: column;
    background: transparent;
    padding-left: 1.75rem;
    gap: 0.1rem;
    margin-top: 0.35rem;
    margin-bottom: 0.25rem;
}

.sidebar-dropdown.open .sidebar-dropdown-menu {
    display: flex;
    animation: sidebarFadeIn 0.19s;
}

.sidebar-sublink {
    color: var(--gs-muted);
    font-size: 0.84rem;
    padding: 0.27rem 0.5rem 0.27rem 0.7rem;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    text-decoration: none;
    display: block;
}

.sidebar-sublink:hover,
.sidebar-sublink.active {
    color: #fff;
    background: var(--gs-hover);
}

.sidebar-sublink.active {
    font-weight: 600;
}

.dropdown-arrow {
    margin-left: auto;
    transition: transform var(--gs-speed);
}

.sidebar-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

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


/* =============================================================================
   LAYOUT - SIDEBAR SECTION TITLE
   ============================================================================= */

.sidebar-section-title {
    padding: .75rem 2rem .25rem 2.5rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9ca3af;
    font-weight: 600;
    cursor: default;
    user-select: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 10px;
}


/* =============================================================================
   LAYOUT - SIDEBAR LOCKED (modulos bloqueados)
   ============================================================================= */

.sidebar-locked .sidebar-link,
.sidebar-locked .sidebar-dropdown-toggle {
    cursor: not-allowed;
    opacity: 0.42;
}

.sidebar-disabled:hover {
    background: none !important;
}

.sidebar-text-disabled {
    color: var(--gs-muted);
}

.dropdown-arrow-disabled {
    opacity: 0.3;
}

.sidebar-lock-right {
    opacity: 0.8;
    width: 16px;
    height: 16px;
}

.sidebar-collapsed .sidebar-lock-right,
.sidebar-collapsed .dropdown-arrow {
    display: none !important;
}

.icon-locked-wrapper {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
}

.icon-locked-wrapper [data-feather="truck"] {
    position: absolute;
    left: 0;
    top: 0;
}

.icon-lock-overlay {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 14px;
    height: 14px;
    opacity: 0.9;
}

.sublink-icon-wrapper {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.icon-lock-overlay-small {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 12px;
    height: 12px;
    opacity: 0.9;
}

.sidebar-dropdown-menu-disabled {
    pointer-events: none;
}

.sidebar-sublink-disabled {
    display: block;
    padding: .5rem 2rem .5rem 2.5rem;
    font-size: .85rem;
    line-height: 1.2rem;
    color: #aaa;
    cursor: not-allowed;
    opacity: 0.5;
}

.sidebar-sublink-locked {
    display: flex !important;
    align-items: center;
    padding-right: 0.85rem;
    cursor: not-allowed;
    opacity: 0.4;
}

.sidebar-sublink-locked:hover {
    background: none !important;
    color: inherit !important;
}


/* =============================================================================
   LAYOUT - SIDEBAR USER INFO (linha de usuario + Sair, no rodape)
   ============================================================================= */

.gs-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--gs-line);
}

.sidebar-collapsed .gs-user-row {
    flex-direction: column;
    gap: 10px;
}

.gs-avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gs-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.gs-user-info {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}

.sidebar-collapsed .gs-user-info {
    display: none;
}

.gs-user-name {
    display: block;
    color: #fff;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gs-user-sub {
    display: block;
    color: var(--gs-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gs-logout {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: var(--gs-text);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--gs-speed) ease, color var(--gs-speed) ease;
}

.gs-logout:hover,
.gs-logout:focus {
    background: var(--gs-hover);
    color: #fff;
    text-decoration: none;
}

.gs-logout svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 2;
}


/* =============================================================================
   LAYOUT - SIDEBAR TOOLTIP (modo recolhido; posicionado via JS na Master)
   ============================================================================= */

.gs-tip {
    position: fixed;
    z-index: 1400;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--gs-bg-deep);
    color: #fff;
    font: 13px/1 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(9,28,45,.28);
    pointer-events: none;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .12s ease, transform .12s ease;
}

.gs-tip.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.gs-tip::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 50%;
    margin-top: -5px;
    border: 5px solid transparent;
    border-left: 0;
    border-right-color: var(--gs-bg-deep);
}


/* =============================================================================
   LAYOUT - MAIN CONTENT AREA
   ============================================================================= */

.main-content-area {
    margin-top: 40px;
    margin-left: var(--gs-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: #EEEEEE;
    transition: margin-left var(--gs-speed) cubic-bezier(.4,0,.2,1);
}

.sidebar-collapsed ~ .main-content-area {
    margin-left: var(--gs-w-mini) !important;
}

.main-content-area.full {
    margin-left: 0 !important;
    width: 100vw;
    max-width: 100vw;
}


/* =============================================================================
   LAYOUT - PAGE TITLE BAR (titulo + breadcrumb)
   ============================================================================= */

.gs-page-title-bar {
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid #dee2e6;
}

.gs-page-title-inner {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.gs-page-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #265680;
    letter-spacing: -0.01em;
}

.gs-breadcrumb {
    font-size: 0.75rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.gs-breadcrumb-icon {
    width: 13px !important;
    height: 13px !important;
    vertical-align: -1px;
    stroke-width: 2.5;
}

.gs-breadcrumb a {
    color: #3b73b9;
    text-decoration: none;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.gs-breadcrumb a:hover {
    color: #265680;
    text-decoration: underline;
}

.gs-breadcrumb-sep {
    margin: 0 0.2rem;
    color: #adb5bd;
    font-size: 0.65rem;
}

.gs-breadcrumb-current {
    color: #999;
}


/* =============================================================================
   LAYOUT - MAP + INFO PANEL (painel lateral desktop 65/35)
   ============================================================================= */

.gs-map-info-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    height: 56vh;
    min-height: 400px;
    max-height: 75vh;
}

.gs-map-info-row #mapArea {
    margin-bottom: 0;
}

.gs-map-col {
    flex: 0 0 70%;
    min-width: 0;
}

.gs-info-panel {
    flex: 1;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.gs-info-panel-header {
    padding: 0.4rem 0.7rem;
    border-bottom: 1px solid #e9ecef;
}

.gs-info-panel-header h6 {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #265680;
}

.gs-info-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #6c757d;
    background: transparent;
    transition: background .2s, color .2s;
    text-decoration: none;
}

.gs-info-edit-btn:hover {
    background: #e8f0fe;
    color: #265680;
}

.gs-info-edit-btn svg {
    width: 14px;
    height: 14px;
}

.gs-info-panel-body {
    padding: 0.3rem 0.7rem 0.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #c8ced6 transparent;
}

.gs-info-panel-body::-webkit-scrollbar {
    width: 5px;
}

.gs-info-panel-body::-webkit-scrollbar-track {
    background: transparent;
}

.gs-info-panel-body::-webkit-scrollbar-thumb {
    background: #c8ced6;
    border-radius: 10px;
}

.gs-info-panel-body::-webkit-scrollbar-thumb:hover {
    background: #a0aab4;
}

/* Botao de recolher o painel de informacoes (desktop) */
.gs-info-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #e1e7ee;
    background: #f5f8fb;
    color: #265680;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.gs-info-collapse-btn:hover {
    background: #e8f0fe;
    border-color: #c8d4e3;
}

/* Estado recolhido aplicado em .gs-map-info-row */
.gs-map-info-row.is-info-collapsed .gs-info-panel {
    display: none !important;
}

.gs-map-info-row.is-info-collapsed .gs-map-col {
    flex: 0 0 100%;
}

/* Estado recolhido pre-paint (classe injetada no <html> via script inline no head)
   evita "flash" do painel aberto em F5/reload. */
html.gs-info-collapsed-pref .gs-info-panel {
    display: none !important;
}

html.gs-info-collapsed-pref .gs-map-col {
    flex: 0 0 100% !important;
}

/* Rail vertical (orelha) que reabre o painel */
.gs-map-col {
    position: relative;
}

.gs-info-rail {
    display: none !important;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    background: #fff;
    border: 1px solid #e1e7ee;
    border-right: none;
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 0 6px rgba(0, 0, 0, .08);
    color: #265680;
    cursor: pointer;
    z-index: 1000;
}

.gs-info-rail span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.gs-info-rail:hover {
    background: #f5f8fb;
}

@media (min-width: 768px) {
    .gs-map-info-row.is-info-collapsed .gs-info-rail,
    html.gs-info-collapsed-pref .gs-info-rail {
        display: inline-flex !important;
    }
}

@media (max-width: 767px) {
    .gs-info-collapse-btn,
    .gs-info-rail {
        display: none !important;
    }
}

.gs-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.gs-info-cell {
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.gs-info-cell.full {
    grid-column: 1 / -1;
}

.gs-info-grid .gs-info-cell:last-child {
    border-bottom: none;
}

.gs-info-grid .gs-info-cell:nth-last-child(2):not(.full) {
    border-bottom: none;
}

.gs-info-label {
    font-size: 0.73rem;
    color: #6c757d;
    font-weight: 400;
    white-space: nowrap;
}

.gs-info-label::after {
    content: ':';
}

.gs-info-value {
    font-size: 0.73rem;
    color: #181824;
    font-weight: 600;
}

hr.gs-info-sep {
    margin: 0.6rem -0.7rem 0.5rem;
    border: 0;
    border-top: 1px solid #e9ecef;
    height: 0;
    padding: 0;
    opacity: 1;
}

.gs-info-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #265680;
    margin-bottom: 0.4rem;
}

.gs-equip-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
}

.gs-equip-table thead th {
    background: #e9ecef;
    padding: 0.2rem 0.4rem;
    font-weight: 600;
    color: #181824;
    text-align: left;
    font-size: 0.64rem;
}

.gs-equip-table tbody td {
    padding: 0.2rem 0.4rem;
    border-bottom: 1px solid #f0f0f0;
    color: #374151;
}

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

/* Badges coloridos por equipamento (ID*) */
.gs-equip-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1;
}
.gs-equip-1 { background-color: rgba(13, 110, 253, 0.18); color: #0d6efd; }
.gs-equip-2 { background-color: rgba(25, 135, 84, 0.18); color: #198754; }
.gs-equip-3 { background-color: rgba(253, 126, 20, 0.18); color: #fd7e14; }
.gs-equip-4 { background-color: rgba(111, 66, 193, 0.18); color: #6f42c1; }
.gs-equip-5 { background-color: rgba(32, 201, 151, 0.18); color: #0f7b5f; }
.gs-equip-6 { background-color: rgba(214, 51, 132, 0.18); color: #d63384; }
.gs-equip-7 { background-color: rgba(13, 202, 240, 0.18); color: #0a8fa8; }
.gs-equip-8 { background-color: rgba(102, 16, 242, 0.18); color: #6610f2; }
.gs-equip-9 { background-color: rgba(255, 193, 7, 0.18); color: #997404; }
.gs-equip-0 { background-color: rgba(108, 117, 125, 0.18); color: #6c757d; }

/* Badge de origem da vinculacao de motorista (M/I/R/T/?) */
.badge-origem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.65rem;
    line-height: 1;
    vertical-align: middle;
    margin-right: .3rem;
    cursor: default;
    border: 1px solid;
}
.badge-origem-manual   { background-color: rgba(108, 117, 125, 0.12); color: #6c757d; border-color: rgba(108, 117, 125, 0.3); }
.badge-origem-teclado  { background-color: rgba(33, 37, 41, 0.10);   color: #343a40; border-color: rgba(33, 37, 41, 0.25); }
.badge-origem-ibutton  { background-color: rgba(13, 110, 253, 0.12); color: #0d6efd; border-color: rgba(13, 110, 253, 0.3); }
.badge-origem-rfid     { background-color: rgba(25, 135, 84, 0.12);  color: #198754; border-color: rgba(25, 135, 84, 0.3); }
.badge-origem-unknown  { background-color: rgba(220, 53, 69, 0.12);  color: #dc3545; border-color: rgba(220, 53, 69, 0.3); }

/* Cores da borda esquerda da linha do grid por equipamento */
.datagrid.table tbody td.gs-equip-border-1 { border-left-color: #0d6efd !important; }
.datagrid.table tbody td.gs-equip-border-2 { border-left-color: #198754 !important; }
.datagrid.table tbody td.gs-equip-border-3 { border-left-color: #fd7e14 !important; }
.datagrid.table tbody td.gs-equip-border-4 { border-left-color: #6f42c1 !important; }
.datagrid.table tbody td.gs-equip-border-5 { border-left-color: #20c997 !important; }
.datagrid.table tbody td.gs-equip-border-6 { border-left-color: #d63384 !important; }
.datagrid.table tbody td.gs-equip-border-7 { border-left-color: #0dcaf0 !important; }
.datagrid.table tbody td.gs-equip-border-8 { border-left-color: #6610f2 !important; }
.datagrid.table tbody td.gs-equip-border-9 { border-left-color: #ffc107 !important; }
.datagrid.table tbody td.gs-equip-border-0 { border-left-color: #6c757d !important; }

.gs-equip-num-cell {
    white-space: nowrap;
    vertical-align: middle;
}

.gs-equip-num-cell .gs-equip-num-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    width: 100%;
}

.gs-equip-num-cell .gs-equip-num-wrap > span {
    line-height: 1.2;
}

.gs-copy-btn {
    border: none;
    background: none;
    cursor: pointer;
    color: #6c757d;
    padding: 0.15rem;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    display: inline-flex;
    align-items: center;
}

.gs-copy-btn:hover {
    color: #265680;
    background: #e9ecef;
}

.gs-copy-btn svg {
    width: 13px;
    height: 13px;
}

@media (max-width: 767px) {
    .gs-map-col {
        flex: 0 0 100%;
    }

    .gs-info-grid {
        grid-template-columns: 1fr;
    }
}


/* =============================================================================
   FORM SELECT / FORM CONTROL - Padronizacao visual
   ============================================================================= */

.form-select,
.form-control {
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: .82rem;
    line-height: 1.4;
    color: #374151;
    transition: border-color .2s, box-shadow .2s;
}

.form-select:focus,
.form-control:focus {
    border-color: #3b73b9;
    box-shadow: 0 0 0 3px rgba(59, 115, 185, .15);
    outline: none;
}

.form-select-sm {
    padding: 4px 2rem 4px 8px;
    font-size: .82rem;
}

.form-control-sm {
    padding: 4px 8px;
    font-size: .82rem;
}


/* =============================================================================
   FILTROS - Barra de filtros padrao
   ============================================================================= */

.card-frame {
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    padding: 1rem 1.25rem;
}

fieldset.card-frame {
    padding-top: .65rem;
}

.card-frame-legend {
    font-size: .78rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 0 .5rem;
    margin-left: .5rem;
    width: auto;
    float: none;
    line-height: 1;
}

.card-title-out {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.linha-filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

.filtro-group {
    display: flex;
    flex-direction: column;
    min-width: max-content;
}

.filtro-label {
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: .25rem;
    white-space: nowrap;
}

.filtro-input-sm {
    min-width: 140px;
}

.filtro-placa .form-select {
    min-width: 160px;
}

.divider-v {
    width: 1px;
    background-color: #ccc;
    align-self: stretch;
    min-height: 40px;
}

.filtro-buscar .btn {
    min-width: 90px;
}

.nowrap {
    white-space: nowrap;
}


/* =============================================================================
   TOM SELECT - Design System
   ============================================================================= */

.ts-wrapper { position: relative; }

/* Anular estilos do Bootstrap copiados para o wrapper (form-select e form-control) */
.ts-wrapper.form-select,
.ts-wrapper.form-control,
.ts-wrapper.form-select-sm,
.ts-wrapper.form-select.form-select-sm {
    background-image: none !important;
    border: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    box-shadow: none !important;
    background-color: transparent !important;
    font-size: inherit !important;
}

/* Controle principal - borda unica, sem borda interna */
.ts-wrapper.single .ts-control {
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    padding: 4px 32px 4px 8px !important;
    min-height: 0;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
}

/* Tamanho sm - alinhar com form-control-sm do Bootstrap */
.ts-wrapper.form-select-sm.single .ts-control {
    padding: .25rem 2rem .25rem .5rem !important;
    min-height: calc(1.5em + .5rem + 2px);
    font-size: .875rem;
    border-radius: .25rem;
}
.ts-wrapper.form-select-sm.single .ts-control input {
    font-size: .875rem;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.single .ts-control input {
    font-size: .82rem;
    line-height: 1.4;
    color: #374151;
}

.ts-wrapper.single .ts-control input::placeholder {
    color: #9ca3af;
}

/* Item selecionado - texto simples, sem chip/tag */
.ts-wrapper.single .ts-control > .item {
    display: inline-block !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #374151;
    font-size: .82rem;
    line-height: 1.4;
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Ocultar item enquanto dropdown esta aberto para evitar sobreposicao ao digitar */
.ts-wrapper.single.dropdown-active .ts-control > .item {
    display: none !important;
}

/* Focus */
.ts-wrapper.single.focus .ts-control {
    border-color: #3b73b9;
    box-shadow: 0 0 0 3px rgba(59, 115, 185, .15);
    outline: none;
}

/* Seta dropdown - chevron SVG igual ao form-select do Bootstrap */
.ts-wrapper.single .ts-control::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-size: 12px 12px;
    background-repeat: no-repeat;
    border: none;
    transform: translateY(-50%);
    transition: transform .2s;
    pointer-events: none;
}

/* Seta rotaciona quando aberto */
.ts-wrapper.single.dropdown-active .ts-control::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Reservar espaco para a seta */
.ts-wrapper.single { --ts-pr-caret: 1.5em; }

/* Remover caret padrao do Tom Select (CDN) para evitar duplicidade */
.ts-wrapper .ts-control .caret { display: none !important; }

/* Dropdown container */
.ts-dropdown {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    margin-top: 4px !important;
    border-top: 1px solid #dee2e6 !important;
    overflow: hidden;
}

/* Area scrollavel */
.ts-dropdown-content {
    max-height: 240px;
    padding: 4px;
    scroll-behavior: smooth;
}

/* Opcoes */
.ts-dropdown .option {
    padding: 7px 12px;
    border-radius: 5px;
    font-size: .82rem;
    color: #374151;
    transition: background .12s, color .12s;
    cursor: pointer;
    margin: 1px 0;
}

.ts-dropdown .option:hover,
.ts-dropdown .active {
    background: #e8f0fe;
    color: #1e293b;
}

.ts-dropdown .option.selected {
    background: #3b73b9;
    color: #fff;
    font-weight: 500;
}

/* Sem resultados */
.ts-dropdown .no-results {
    padding: 10px 12px;
    font-size: .8rem;
    color: #9ca3af;
    text-align: center;
}

/* Scrollbar moderna */
.ts-dropdown-content::-webkit-scrollbar {
    width: 5px;
}

.ts-dropdown-content::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}

.ts-dropdown-content::-webkit-scrollbar-thumb {
    background: #c8ced6;
    border-radius: 10px;
}

.ts-dropdown-content::-webkit-scrollbar-thumb:hover {
    background: #a0aab4;
}

/* Firefox scrollbar */
.ts-dropdown-content {
    scrollbar-width: thin;
    scrollbar-color: #c8ced6 transparent;
}


/* =============================================================================
   LAYOUT - RESPONSIVO (sidebar/header mobile)
   ============================================================================= */

@media (max-width: 767px) {
    .hyper-header-inner {
        padding: 0 8px;
    }

    .hyper-sidebar {
        top: 40px;
        left: 0;
        width: var(--gs-w);
        transition: transform var(--gs-speed);
        box-shadow: 2px 0 12px 0 rgba(60,60,80,0.12);
    }

    .btn-mobile-refresh {
        display: flex;
    }

    /* No mobile a sidebar desliza inteira: o modo recolhido nao vira mini. */
    .sidebar-collapsed {
        width: var(--gs-w) !important;
    }

    .sidebar-collapsed .sidebar-scroll-area,
    .sidebar-collapsed .sidebar-footer-area {
        padding: 6px 10px 10px;
    }

    .sidebar-hidden {
        transform: translateX(-100%);
    }

    .sidebar-show {
        transform: translateX(0);
    }

    .main-content-area {
        margin-left: 0 !important;
    }
}


/* =============================================================================
   INFO STRIP - Barra de resumo acima de grids (total, contadores, periodo)
   ============================================================================= */

.grid-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.45rem 1rem;
    margin-bottom: 0.5rem;
    font-size: .82rem;
    color: #374151;
}

.info-strip-stats {
    display: flex;
    align-items: center;
    gap: 0;
}

.info-stat {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

.info-stat strong {
    color: #1e293b;
}

.info-stat-sep {
    width: 1px;
    height: 16px;
    background: #d1d5db;
    margin: 0 .75rem;
}

.info-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.info-dot-ativo { background-color: #198754; }
.info-dot-encerrado { background-color: #6c757d; }

.info-strip-periodo {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: #6b7280;
    font-size: .78rem;
    white-space: nowrap;
}


/* =============================================================================
   PAGER - Barra de paginacao reutilizavel
   ============================================================================= */

.pager-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.85rem;
}

.pager-links a,
.pager-links span {
    display: inline-block;
    padding: 4px 10px;
    margin: 0 2px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    text-decoration: none;
    color: #265680;
    font-size: 0.8rem;
}

.pager-links span.current-page {
    background-color: #265680;
    color: #fff;
    border-color: #265680;
}

.pager-links a:hover {
    background-color: #e9ecef;
}


/* =============================================================================
   GUIA DA PLATAFORMA (Conta_Guia.aspx)
   ============================================================================= */

.guia-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* Hero / Intro */
.guia-hero {
    background: linear-gradient(135deg, #1d4566 0%, #265680 50%, #3b73b9 100%);
    border-radius: 14px;
    padding: 2rem 2rem 1.6rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.guia-hero::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
}

.guia-hero h4 {
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: .35rem;
}

.guia-hero p {
    font-size: .85rem;
    opacity: .85;
    margin-bottom: 0;
    max-width: 600px;
}

/* Quick nav */
.guia-nav {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}

.guia-nav a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .7rem;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
    color: #fff;
    font-size: .72rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s;
    backdrop-filter: blur(4px);
}

.guia-nav a:hover {
    background: rgba(255,255,255,.28);
    transform: translateY(-1px);
}

/* Sections */
.guia-section {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    overflow: hidden;
    border: 1px solid #e8ecf1;
}

.guia-section-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.15rem;
    font-size: .8rem;
    font-weight: 700;
    color: #265680;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 2px solid #e8ecf1;
    background: #f7f9fc;
}

.guia-section-header i {
    font-size: .9rem;
}

.guia-section-body {
    padding: 1.15rem 1.25rem;
}

/* Perfil cards */
.guia-perfil-card {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: 10px;
    background: #f7f9fc;
    border: 1px solid #e8ecf1;
    height: 100%;
    transition: all .2s;
}

.guia-perfil-card:hover {
    box-shadow: 0 3px 12px rgba(38,86,128,.1);
    border-color: #c5d5e8;
    transform: translateY(-1px);
}

.guia-perfil-card.guia-perfil-principal {
    background: linear-gradient(135deg, #f0f5fa, #e4edf6);
    border-color: #b8cedf;
    border-left: 4px solid #265680;
}

.guia-perfil-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    flex-shrink: 0;
    background: #265680;
}

.guia-perfil-principal .guia-perfil-icon {
    background: linear-gradient(135deg, #1d4566, #265680);
}

.guia-perfil-nome {
    font-weight: 700;
    font-size: .82rem;
    color: #1d4566;
    margin-bottom: 2px;
}

.guia-perfil-desc {
    font-size: .74rem;
    color: #6c757d;
    line-height: 1.4;
}

/* Hierarquia visual */
.guia-hierarquia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 1.5rem 0;
}

.guia-hierarquia-item {
    padding: .7rem 1.1rem;
    border-radius: 10px;
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    width: 300px;
    max-width: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    position: relative;
}

.guia-hierarquia-nome {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-weight: 700;
}

.guia-hierarquia-nome i {
    margin-right: .15rem;
}

.guia-hierarquia-desc {
    margin-top: .3rem;
    font-size: .7rem;
    font-weight: 400;
    line-height: 1.35;
    color: rgba(255,255,255,.95);
}

.guia-hierarquia-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    width: 100%;
}

.guia-hierarquia-arrow {
    color: #265680;
    font-size: .75rem;
    padding: 3px 0;
    opacity: .5;
}

.guia-h-principal   { background: linear-gradient(135deg, #1a3a52, #1d4566); }
.guia-h-admin       { background: linear-gradient(135deg, #1d4566, #265680); }
.guia-h-gestor      { background: linear-gradient(135deg, #2b6199, #3b73b9); }
.guia-h-operacional { background: linear-gradient(135deg, #3f7fbb, #4f8fca); }
.guia-h-observador  { background: linear-gradient(135deg, #5590c8, #689fd3); }
.guia-h-financeiro  { background: linear-gradient(135deg, #3f8a9c, #52a6b8); }

/* Regras */
.guia-regras {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.guia-regra {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .65rem .9rem;
    background: #f7f9fc;
    border-radius: 8px;
    font-size: .8rem;
    line-height: 1.5;
    color: #333;
    border-left: 3px solid #dee2e6;
    transition: border-color .2s;
}

.guia-regra:hover {
    border-left-color: #265680;
}

.guia-regra i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: .9rem;
}

/* Escopo cards */
.guia-escopo-card {
    text-align: center;
    padding: 1.25rem 1rem;
    border-radius: 12px;
    background: #f7f9fc;
    border: 1px solid #e8ecf1;
    height: 100%;
    transition: all .2s;
}

.guia-escopo-card:hover {
    box-shadow: 0 4px 16px rgba(38,86,128,.1);
    transform: translateY(-2px);
}

.guia-escopo-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: .6rem;
    color: #fff;
}

.guia-escopo-icon.esc-todos     { background: linear-gradient(135deg, #265680, #3b73b9); }
.guia-escopo-icon.esc-propria   { background: linear-gradient(135deg, #198754, #28a76d); }
.guia-escopo-icon.esc-liberada  { background: linear-gradient(135deg, #0d6efd, #4d94f8); }

.guia-escopo-nome {
    font-weight: 700;
    font-size: .82rem;
    color: #1d4566;
    margin-bottom: .3rem;
}

.guia-escopo-desc {
    font-size: .74rem;
    color: #6c757d;
    line-height: 1.4;
}

/* Status cards */
.guia-status-card {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1rem;
    border-radius: 10px;
    background: #f7f9fc;
    border: 1px solid #e8ecf1;
    font-size: .82rem;
    height: 100%;
    transition: all .2s;
}

.guia-status-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.guia-status-badge {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
}

.guia-status-badge.sts-ativo    { background: linear-gradient(135deg, #198754, #28a76d); }
.guia-status-badge.sts-restrito { background: linear-gradient(135deg, #dc3545, #e8525f); }

.guia-status-label {
    font-weight: 700;
    font-size: .82rem;
    color: #1d4566;
}

.guia-status-desc {
    font-size: .74rem;
    color: #6c757d;
    line-height: 1.35;
}

/* Matriz de permissoes */
.matriz-perfis {
    font-size: .75rem;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.matriz-perfis thead th {
    background: linear-gradient(180deg, #f0f5fa, #e8eef4);
    font-size: .68rem;
    font-weight: 700;
    color: #265680;
    white-space: nowrap;
    vertical-align: middle;
    padding: .5rem .4rem;
    border-bottom: 2px solid #c5d5e8;
    position: sticky;
    top: 0;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.matriz-modulo-col {
    min-width: 140px;
    text-align: left !important;
}

.matriz-perfis tbody td {
    padding: .35rem .4rem;
    vertical-align: middle;
    border-color: #edf0f3;
}

.matriz-perfis tbody tr:hover td {
    background: #f5f8fb;
}

.matriz-grupo td {
    background: #edf2f7 !important;
    padding: .4rem .6rem !important;
    font-size: .72rem;
    font-weight: 700;
    color: #1d4566;
    letter-spacing: .02em;
    border-top: 2px solid #d5dfe8;
}

.perm-sim {
    color: #198754;
    font-size: .9rem;
}

.perm-nao {
    color: #d1d5da;
    font-size: .9rem;
}

/* Rodape */
.guia-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .7rem 1rem;
    background: #f7f9fc;
    border-radius: 10px;
    border: 1px dashed #d5dfe8;
    font-size: .74rem;
    color: #6c757d;
}

/* Sidebar help link */
.sidebar-help-link {
    margin-top: 0;
    border-top: none;
}

/* =============================================================================
   CHIPS DE FILTRO (pill com contador) - componente global
   -----------------------------------------------------------------------------
   Chip arredondado usado em barras de filtro. A cor da variante representa o
   estado/categoria; o contador (.gs-chip-count) fica embutido como badge.
   Adicione a classe .active no chip selecionado.
   Uso: <button class="gs-chip gs-chip-blue">Texto <span class="gs-chip-count">0</span></button>
   ============================================================================= */
.gs-chip {
    border: 1px solid #d8dee6;
    background: #fff;
    color: #374151;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
}

    .gs-chip:hover {
        text-decoration: none;
    }

    .gs-chip .gs-chip-count {
        border-radius: 999px;
        font-size: .68rem;
        padding: 1px 7px;
        font-weight: 700;
    }

/* Neutro (cinza) - usado tipicamente no "Todas / Total" */
.gs-chip-neutral {
    border-color: #d1d5db;
    background: #f3f4f6;
    color: #374151;
}

    .gs-chip-neutral .gs-chip-count {
        background: rgba(107,114,128,.12);
        color: #4b5563;
    }

    .gs-chip-neutral:hover {
        border-color: #9ca3af;
        background: #e5e7eb;
        color: #374151;
    }

    .gs-chip-neutral.active {
        background: #6b7280;
        border-color: #6b7280;
        color: #fff;
    }

        .gs-chip-neutral.active .gs-chip-count {
            background: rgba(255,255,255,.25);
            color: #fff;
        }

/* Azul */
.gs-chip-blue {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1849a9;
}

    .gs-chip-blue .gs-chip-count {
        background: rgba(46,144,250,.15);
        color: #1849a9;
    }

    .gs-chip-blue:hover {
        border-color: #2e90fa;
        background: #dbeafe;
        color: #1849a9;
    }

    .gs-chip-blue.active {
        background: #2e90fa;
        border-color: #2e90fa;
        color: #fff;
    }

        .gs-chip-blue.active .gs-chip-count {
            background: rgba(255,255,255,.25);
            color: #fff;
        }

/* Vermelho */
.gs-chip-red {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #991b1b;
}

    .gs-chip-red .gs-chip-count {
        background: rgba(217,45,32,.1);
        color: #991b1b;
    }

    .gs-chip-red:hover {
        border-color: #ef4444;
        background: #fee2e2;
        color: #991b1b;
    }

    .gs-chip-red.active {
        background: #dc2626;
        border-color: #dc2626;
        color: #fff;
    }

        .gs-chip-red.active .gs-chip-count {
            background: rgba(255,255,255,.25);
            color: #fff;
        }

/* Verde */
.gs-chip-green {
    border-color: #86efac;
    background: #ecfdf3;
    color: #166534;
}

    .gs-chip-green .gs-chip-count {
        background: rgba(22,163,74,.12);
        color: #166534;
    }

    .gs-chip-green:hover {
        border-color: #22c55e;
        background: #dcfce7;
        color: #166534;
    }

    .gs-chip-green.active {
        background: #16a34a;
        border-color: #16a34a;
        color: #fff;
    }

        .gs-chip-green.active .gs-chip-count {
            background: rgba(255,255,255,.25);
            color: #fff;
        }

/* Âmbar / laranja */
.gs-chip-amber {
    border-color: #fcd34d;
    background: #fffbeb;
    color: #92400e;
}

    .gs-chip-amber .gs-chip-count {
        background: rgba(217,119,6,.12);
        color: #92400e;
    }

    .gs-chip-amber:hover {
        border-color: #f59e0b;
        background: #fef3c7;
        color: #92400e;
    }

    .gs-chip-amber.active {
        background: #d97706;
        border-color: #d97706;
        color: #fff;
    }

        .gs-chip-amber.active .gs-chip-count {
            background: rgba(255,255,255,.25);
            color: #fff;
        }

/* Índigo */
.gs-chip-indigo {
    border-color: #c7d2fe;
    background: #eef2ff;
    color: #3730a3;
}

    .gs-chip-indigo .gs-chip-count {
        background: rgba(99,102,241,.12);
        color: #3730a3;
    }

    .gs-chip-indigo:hover {
        border-color: #6366f1;
        background: #e0e7ff;
        color: #3730a3;
    }

    .gs-chip-indigo.active {
        background: #6366f1;
        border-color: #6366f1;
        color: #fff;
    }

        .gs-chip-indigo.active .gs-chip-count {
            background: rgba(255,255,255,.25);
            color: #fff;
        }

/* ============================================================
   FALE CONOSCO - Modal universal (canais de atendimento)
   ============================================================ */
.gs-fc-modal .gs-fc-content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
}

.gs-fc-header {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 22px 24px 20px;
    background: linear-gradient(135deg, #1d4566 0%, #265680 50%, #3b73b9 100%);
    color: #fff;
}

.gs-fc-header-icon {
    width: 26px !important;
    height: 26px !important;
    stroke-width: 2;
    flex-shrink: 0;
    color: #fff;
}

.gs-fc-logo {
    height: 34px;
    width: auto;
}

.gs-fc-title {
    margin: 0;
    font-weight: 300;
    font-size: 1.35rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #f2f2f2;
}

.gs-fc-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    color: #fff;
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s ease;
}

    .gs-fc-close:hover {
        background: rgba(255,255,255,.22);
    }

.gs-fc-body {
    padding: 20px 24px 26px;
    background: #ededed;
}

.gs-fc-section + .gs-fc-section {
    margin-top: 22px;
}

.gs-fc-section-title {
    margin: 0 0 10px 4px;
    font-weight: 700;
    font-size: 1.15rem;
    color: #23262a;
}

.gs-fc-card {
    background: #fff;
    border-radius: 16px;
    padding: 8px 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.gs-fc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid #f0f0f0;
    color: #2b2f33;
    text-decoration: none;
}

    .gs-fc-row:last-child {
        border-bottom: none;
    }

.gs-fc-dot {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #c9ced3;
}

.gs-fc-row-head .gs-fc-dot {
    width: 16px;
    height: 16px;
}

.gs-fc-central .gs-fc-dot {
    background: #d81f26;
}

.gs-fc-admin .gs-fc-dot {
    background: #f5b60a;
}

.gs-fc-label {
    flex: 1 1 auto;
    font-size: 1rem;
}

    .gs-fc-label i {
        margin-right: 4px;
        opacity: .75;
    }

.gs-fc-row-head .gs-fc-label {
    font-weight: 600;
    font-size: 1.05rem;
}

.gs-fc-value {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 1.1rem;
    color: #1f2225;
    text-align: right;
}

.gs-fc-value-sm {
    font-size: .98rem;
}

.gs-fc-link {
    position: relative;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    border-radius: 10px;
    padding-right: 10px;
}

    .gs-fc-link:hover {
        background: #f6f8f9;
        transform: translateX(2px);
    }

    .gs-fc-link:hover .gs-fc-value {
        color: #128c3a;
    }

/* Botao indicativo de acao (Chamar / Ligar) */
.gs-fc-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.gs-fc-wpp .gs-fc-cta {
    background: #25d366;
    box-shadow: 0 4px 10px rgba(37,211,102,.35);
}

.gs-fc-tel .gs-fc-cta {
    background: #d81f26;
    box-shadow: 0 4px 10px rgba(216,31,38,.30);
}

.gs-fc-link:hover .gs-fc-cta {
    filter: brightness(1.05);
    box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

.gs-fc-arrow {
    font-size: .7rem;
    transition: transform .15s ease;
}

.gs-fc-link:hover .gs-fc-arrow {
    transform: translateX(3px);
}

@media (max-width: 480px) {
    .gs-fc-row {
        flex-wrap: wrap;
    }

    .gs-fc-value {
        width: auto;
        text-align: right;
        padding-left: 0;
    }

    .gs-fc-cta {
        margin-left: auto;
    }
}