/*Aqui object utilizador pode definir sobreposi��es de classes CSS gen�ricas definidas na aplica��o, ou seja, das defini��es que se encontream no ficheiro geral.css*/

.alertify-log {     
		background: rgba(47, 150, 180,0.8); 
}
.alertify-log.alertify-log-success {     
		background: rgba(81, 163, 81,0.8); 
}
.alertify-log.alertify-log-error {     
		background: rgba(189, 54, 47,0.8); 
}


.sploader {
  width: 16px;
  height: 16px;
  box-shadow: 0 30px, 0 -30px;
  border-radius: 4px;
  background: currentColor;
  display: block;
  margin:auto;
  position: absolute;
  color: #fab609;
  transform: translateY(30px);
  box-sizing: border-box;
  animation: animloader 2s ease infinite;
   top: calc(50% - 24px);
   left: calc(50% - 24px);
   margin-top: 15%;
    margin-left: -10px;
}
.sploader::after,
.sploader::before {
  content: '';  
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  box-shadow: 0 30px, 0 -30px;
  border-radius: 4px;
  background: currentColor;
  color: #fab609;
  position: absolute;
  left: 30px;
  top: 0;
  animation: animloader 2s 0.2s ease infinite;
}
.sploader::before {
  animation-delay: 0.4s;
  left: 60px;
}

 

@keyframes animloader {
  0% {
    top: 0;
    color: #fab609;
  }
  50% {
    top: 30px;
    color: rgba(255, 255, 255, 0.2);
  }
  100% {
    top: 0;
    color: #fab609;
  }
}

.overlay {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 5;
    cursor: pointer;
}

.dropdown-sugestoes {
    position: absolute;
    background: #ffffff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    width: 100%;
    z-index: 1050;
    display: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    overflow-y: auto;
    max-height: 300px;
    font-size: 14px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    margin-top: 4px;
}

.dropdown-sugestoes .item-passageiro {
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border-bottom: 1px solid #f5f7fa;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* �ltimo item sem linha divis�ria */
.dropdown-sugestoes .item-passageiro:last-child {
    border-bottom: none;
}

/* Efeito de hover */
.dropdown-sugestoes .item-passageiro:hover {
    background: #f8fafc;
    border-left: 3px solid #007bff;
    padding-left: 13px;
}

/* Estado de sele��o ativa */
.dropdown-sugestoes .item-passageiro:active,
.dropdown-sugestoes .item-passageiro.selected {
    background: #e3f2fd;
    border-left: 3px solid #0056b3;
}

/* Header do passageiro */
.passageiro-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.passageiro-header .nome {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 15px;
    line-height: 1.3;
}

.passageiro-header .codigo {
    font-size: 11px;
    color: #6c757d;
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

/* Container de detalhes */
.passageiro-detalhes {
    display: flex;
    flex-direction: column;
}

/* Item de detalhe */
.detalhe-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.detalhe-label {
    font-size: 11px;
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
	font-weight: bold;
}

.detalhe-valor {
    font-size: 12px;
    color: #495057;
    font-weight: 400;
    word-break: break-word;
}

/* Estados de hover nos detalhes */
.dropdown-sugestoes .item-passageiro:hover .detalhe-valor {
    color: #007bff;
}

.dropdown-sugestoes .item-passageiro:hover .nome {
    color: #0056b3;
}

/* Scrollbar personalizada */
.dropdown-sugestoes::-webkit-scrollbar {
    width: 6px;
}

.dropdown-sugestoes::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0 8px 8px 0;
}

.dropdown-sugestoes::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.dropdown-sugestoes::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Indicador visual de sele��o */
.dropdown-sugestoes .item-passageiro::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: #007bff;
    transition: width 0.2s ease;
}

.dropdown-sugestoes .item-passageiro:hover::before {
    width: 2px;
}


/* Modal Fullscreen para Relat�rio */
.modal-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-fullscreen.active {
    opacity: 1;
    visibility: visible;
}

.btn-fechar {
    position: absolute;
    top: 15px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.btn-fechar:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Body do modal fullscreen */
.modal-body-fullscreen {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
    background: #f8f9fa;
}

.caixa-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.caixa-item {
    padding: 18px 15px;
    border: 1px solid #e1e8ed;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #f8f9fa;
}

.caixa-item:hover {
    background-color: #f0f7ff;
    border-color: #3498db;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.caixa-item.selected {
    background-color: #e3f2fd;
    border-color: #3498db;
    box-shadow: 0 0 0 2px #3498db;
}

.caixa-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.caixa-item.disabled:hover {
    transform: none;
    background-color: #f8f9fa;
    border-color: #e1e8ed;
    box-shadow: none;
}

.caixa-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(to right, #3498db, #2980b9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
}

.caixa-info {
    width: 100%;
}

.caixa-nome {
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 16px;
}

.caixa-status {
    font-size: 0.85rem;
    padding: 3px 8px;
    border-radius: 12px;
    display: inline-block;
    font-weight: 500;
}

.caixa-status.disponivel {
    background-color: #e8f6ef;
    color: #27ae60;
}

.caixa-status.ocupado {
    background-color: #fdedec;
    color: #e74c3c;
}

.caixa-operador {
    font-size: 0.8rem;
    color: #7f8c8d;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* Popup de sele��o de data */
.popup-data {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.popup-data.active {
    opacity: 1;
    visibility: visible;
}

.popup-content {
    background: white;
    border-radius: 12px;
    padding: 30px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
    text-align: center;
}

.popup-data.active .popup-content {
    transform: translateY(0);
}

.popup-title {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 20px;
    font-weight: 600;
}

.data-seletor {
    margin: 25px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.data-seletor label {
    font-weight: 600;
    color: #2c3e50;
    font-size: 1.1rem;
}

.data-seletor input {
    padding: 12px 15px;
    border: 2px solid #e1e8ed;
    border-radius: 8px;
    font-size: 16px;
    width: 100%;
    max-width: 250px;
    transition: border-color 0.3s;
}

.data-seletor input:focus {
    outline: none;
    border-color: #3498db;
}

.popup-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
}

.btn-popup {
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 120px;
}

.btn-confirmar-data {
    background: linear-gradient(to right, #27ae60, #219653);
    color: white;
}

.btn-confirmar-data:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(39, 174, 96, 0.3);
}

.btn-cancelar {
    background: #95a5a6;
    color: white;
}

.btn-cancelar:hover {
    background: #7f8c8d;
    transform: translateY(-2px);
}

/* Estilos para o relat�rio FULLSCREEN */
.relatorio-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.info-caixa-data {
    margin-bottom: 25px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    border-left: 5px solid #3498db;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.grupo-pagamento {
    margin-bottom: 30px;
    border: 1px solid #e1e8ed;
    border-radius: 10px;
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.btn-navegar {
    background: #3498db;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s;
    font-weight: 500;
}

.btn-navegar:hover {
    background: #2980b9;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.total-grupo {
    padding: 8px;
    background: linear-gradient(to right, #f8f9fa, #e9ecef);
    font-weight: 700;
    text-align: right;
    border-top: 2px solid #e1e8ed;
    font-size: 1.1rem;
    color: #2c3e50;
}

.total-geral {
    margin-top: 30px;
    padding: 8px;
    background: linear-gradient(to right, #2c3e50, #34495e);
    color: white;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.4rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.acoes-relatorio {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
    gap: 15px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.btn-imprimir {
    background: linear-gradient(to right, #27ae60, #219653);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
    font-size: 1rem;
}

.btn-imprimir:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.3);
}

.btn-voltar {
    background: linear-gradient(to right, #95a5a6, #7f8c8d);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
    font-size: 1rem;
}

.btn-voltar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(149, 165, 166, 0.3);
}

.info-titulo {
    font-size: 1.4rem;
    color: #2c3e50;
    margin-bottom: 8px;
    font-weight: 700;
}

.info-detalhes {
    font-size: 1.1rem;
    color: #7f8c8d;
    font-weight: 500;
}

.grupo-header {
    background: linear-gradient(to right, #f8f9fa, #e9ecef);
    padding: 6px 7px;
    font-weight: 700;
    font-size: 1.3rem;
    color: #2c3e50;
    border-bottom: 2px solid #e1e8ed;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Bot�o principal */
.btn-abrir-modal {
    background: linear-gradient(to right, #3498db, #2980b9);
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
    font-weight: 600;
    margin: 10px;
}

.btn-abrir-modal:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}

/* Responsividade para Fullscreen */
@media (max-width: 1200px) {
    .relatorio-container {
        padding: 15px;
    }
    
    .tabela-vendas {
        font-size: 0.9rem;
    }
    
    .tabela-vendas th,
    .tabela-vendas td {
        padding: 12px 15px;
    }
}
.list-group-item { cursor: pointer; margin-bottom: 2px;}
.list-group-item:hover { background-color: #f5f5f5; }
.well-destinatarios { max-height: 200px; overflow-y: auto; }
.contador-caracteres { float: right; color: #666; }
.texto-perigo { color: #d9534f; }
.alert-emergencia { background-color: #f2dede; border-color: #ebccd1; color: #a94442; }
.template-rapido { cursor: pointer; padding: 5px; border: 1px dashed #ccc; margin: 2px; border-radius: 3px; }
.template-rapido:hover { background-color: #e6e6e6; }
.form-control{
	border: 1px solid #ccc !important;
}

@media (max-width: 768px) {
    .caixa-lista {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    
    .tabela-vendas {
        display: block;
        overflow-x: auto;
    }
    
    .popup-actions {
        flex-direction: column;
    }
    
    .btn-popup {
        width: 100%;
    }
    
    .acoes-relatorio {
        flex-direction: column;
    }
    
    .btn-imprimir,
    .btn-voltar {
        width: 100%;
        justify-content: center;
    }
    
    .grupo-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .caixa-lista {
        grid-template-columns: 1fr 1fr;
    }
    
    .modal {
        width: 95%;
    }
    
    .modal-header h2 {
        font-size: 1.5rem;
    }
    
    .info-titulo {
        font-size: 1.2rem;
    }
    
    .info-detalhes {
        font-size: 1rem;
    }
}


 
       .modal-content-payment {
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    border: none;
    overflow: hidden;
}

.modal-header-payment {
   background: linear-gradient(135deg, #6d142f, #8a1b3b, #b82354);

    color: white;
    border-radius: 0;
    padding: 10px 25px;
    border-bottom: none;
}

.modal-header-payment h4 {
    margin: 0;
    font-weight: 600;
    font-size: 1.4em;
    color: white;
}

.modal-body-payment {
    padding: 15px;
    background: #f8f9fa;
}

/* GRID LAYOUT CORRIGIDO */
.payment-methods-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.payment-method {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.payment-method:hover {
    border-color: #3498db;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2);
}

.payment-method-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.payment-icon {
    font-size: 20px;
    color: #3498db;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f4fc;
    border-radius: 8px;
    margin-right: 10px;
}

.method-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95em;
    margin: 0;
}

.payment-input-group {
    display: flex;
    width: 100%;
}

.payment-input {
    text-align: right;
    font-weight: 600;
    font-size: 1em;
    border: 2px solid #e9ecef;
    border-radius: 8px 0 0 8px;
    padding: 8px 12px;
    transition: all 0.3s ease;
    flex: 1;
}

.payment-input:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
    outline: none;
}

.input-group-addon {
    background: #3498db;
    color: white;
    border: 2px solid #3498db;
    border-radius: 0 8px 8px 0;
    font-weight: 600;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
}

.summary-section {
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
    padding: 5px;
    border-radius: 15px;
    margin-bottom: 10px;
    border: 2px solid #e9ecef;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    text-align: center;
}

.btn-finish {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    font-weight: 600;
    padding: 12px 20px;
    width: 100%;
    margin-top: 20px;
    border: none;
    border-radius: 12px;
    font-size: 1.1em;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
}

.btn-finish:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
    background: linear-gradient(135deg, #219955, #27ae60);
}

.btn-finish:disabled {
    background: linear-gradient(135deg, #95a5a6, #bdc3c7);
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

.payment-amounts {
    margin-top: 20px;
    background: white;
    padding: 20px;
    border-radius: 12px;
    border: 2px solid #e9ecef;
}

.payment-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f1f2f6;
    font-size: 1em;
}

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

.total-amount {
    font-weight: 700;
    font-size: 2em;
    color: #2c3e50;
    margin: 0;
}

.change-display {
    background: linear-gradient(135deg, #e8f6f3, #d1f2eb);
    padding: 12px;
    border-radius: 10px;
    margin-top: 15px;
    text-align: center;
    border: 2px solid #a3e4d7;
    display: none;
    font-weight: 600;
    color: #27ae60;
}

.validation-message {
    color: #e74c3c;
    font-size: 0.8em;
    margin-top: 5px;
    display: none;
    text-align: center;
}

.section-title-payment {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 1.2em;
    border-left: 4px solid #3498db;
    padding-left: 10px;
}

/* Responsividade */
@media (max-width: 768px) {
    .payment-methods-container {
        grid-template-columns: 1fr;
    }
    
    .modal-body-payment {
        padding: 15px;
    }
}

/* BACKDROP ESCURO E BLOQUEADO */


.modal-backdrop {
    opacity: 0.5 !important;
    background-color: #000 !important;
}

/* Garantir que fique por tr�s da modal */
/*/*.modal-backdrop.in {
    opacity: 0.5 !important;
	 background-color: #000 !important;
}

/* Impedir cliques no backdrop */
.modal-backdrop {
    pointer-events: auto !important;
}

/* Se ainda n�o estiver escuro o suficiente, aumente a opacidade */
.modal-backdrop {
    opacity: 0.7 !important;
    background-color: #000 !important;
}

.citylink-dashboard {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: 100vh;
    padding: 20px 0;
	
	margin-left: 15px;
	margin-right: 15px;
	margin-top: -40px;
	margin-bottom: -50px;

}

.citylink-header {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    color: #6d142f;
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 25px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.citylink-logo {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 5px;
}

.citylink-tagline {
    font-size: 16px;
    opacity: 0.8;
    font-weight: 500;
    color: #ef7e22;
}

.citylink-filters {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 25px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.citylink-filter-group {
    margin-bottom: 10px;
}

.citylink-filter-label {
    font-weight: 600;
    margin-bottom: 8px;
    color: #6d142f;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.citylink-filter-control {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(109, 20, 47, 0.2);
    color: #333;
    border-radius: 8px;
}

.citylink-kpi-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.citylink-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #6d142f 0%, #ef7e22 100%);
}

.citylink-kpi-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.9);
}

.citylink-kpi-icon {
    font-size: 28px;
    margin-bottom: 15px;
    color: #ef7e22;
}

.citylink-kpi-value {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #6d142f;
}

.citylink-kpi-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.citylink-kpi-trend {
    font-size: 12px;
    margin-top: 5px;
    font-weight: 600;
}

.citylink-chart-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

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

.citylink-chart-title {
    font-size: 18px;
    font-weight: 600;
    color: #6d142f;
}

.citylink-period-selector {
    display: flex;
    background: rgba(109, 20, 47, 0.1);
    border-radius: 8px;
    padding: 4px;
}

.citylink-period-btn {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: #666;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.citylink-period-btn.active {
    background: #6d142f;
    color: white;
}

.citylink-period-btn:hover:not(.active) {
    background: rgba(109, 20, 47, 0.2);
}

.citylink-table-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.citylink-table-title {
    font-size: 18px;
    font-weight: 600;
    color: #6d142f;
    margin-bottom: 20px;
}

.citylink-table {
    width: 100%;
    color: #333;
}

.citylink-table th {
    background: rgba(109, 20, 47, 0.1);
    color: #6d142f;
    font-weight: 600;
    border: none;
}

.citylink-table td {
    border-color: rgba(109, 20, 47, 0.1);
    vertical-align: middle;
}

.citylink-status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.citylink-status-active {
    background: rgba(76, 175, 80, 0.15);
    color: #2e7d32;
}

.citylink-status-pending {
    background: rgba(255, 152, 0, 0.15);
    color: #ef6c00;
}

.citylink-status-completed {
    background: rgba(33, 150, 243, 0.15);
    color: #1565c0;
}

.citylink-btn-primary {
    background: linear-gradient(135deg, #6d142f 0%, #ef7e22 100%);
    border: none;
    color: white;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.citylink-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(239, 126, 34, 0.4);
    background: linear-gradient(135deg, #7d1837 0%, #f58c3a 100%);
    color: white;
}

.citylink-trend-up {
    color: #2e7d32;
}

.citylink-trend-down {
    color: #d32f2f;
}

.citylink-trend-neutral {
    color: #ff9800;
}

@media (max-width: 768px) {
    .citylink-filters .col-xs-6 {
        margin-bottom: 15px;
    }
    
    .citylink-kpi-value {
        font-size: 24px;
    }
    
    .citylink-period-selector {
        flex-wrap: wrap;
    }
    
    .citylink-period-btn {
        font-size: 10px;
        padding: 4px 8px;
    }
}


:root {
            --primary-orange: #ef7e22;
            --primary-maroon: #6d142f;
        }
        
        
        .dashboard-subtitle {
            font-size: 16px;
            color: #666;
            margin: 5px 0 0 0;
        }
        
        .filter-section {
            background: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 25px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .filter-group {
            margin-bottom: 15px;
        }
        
        .filter-label {
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--primary-maroon);
            font-size: 13px;
        }
        
        .kpi-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            border-top: 4px solid var(--primary-orange);
            transition: transform 0.3s ease;
        }
        
        .kpi-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.1);
        }
        
        .kpi-icon {
            font-size: 24px;
            color: var(--primary-orange);
            margin-bottom: 10px;
        }
        
        .kpi-value {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary-maroon);
            margin-bottom: 5px;
        }
        
        .kpi-label {
            font-size: 14px;
            color: #666;
            font-weight: 500;
        }
        
        .chart-container {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .chart-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--primary-maroon);
            margin: 0;
        }
        
        .period-selector {
            display: flex;
            background: #f8f9fa;
            border-radius: 8px;
            padding: 4px;
        }
        
        .period-btn {
            padding: 6px 12px;
            border: none;
            background: transparent;
            color: #666;
            font-size: 12px;
            font-weight: 500;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .period-btn.active {
            background: var(--primary-maroon);
            color: white;
        }
        
        .period-btn:hover:not(.active) {
            background: rgba(109, 20, 47, 0.1);
        }
        
        .table-container {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .status-badge {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
        }
        
        .status-terminal { background-color: #fff3cd; color: #856404; }
        .status-transito { background-color: #cce7ff; color: #004085; }
        .status-destino { background-color: #d1ecf1; color: #0c5460; }
        .status-armazem { background-color: #ffeaa7; color: #8d7100; }
        .status-entregue { background-color: #d4edda; color: #155724; }
        .status-extraviada { background-color: #f8d7da; color: #721c24; }
        .status-danificada { background-color: #f5c6cb; color: #721c24; }
        
        .btn-primary {
            background-color: var(--primary-orange);
            border-color: var(--primary-orange);
        }
        
        .btn-primary:hover {
            background-color: #d86a1a;
            border-color: #d86a1a;
        }
        
        .table th {
            background-color: var(--primary-maroon);
            color: white;
        }
        
        .incident-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            border-left: 4px solid #dc3545;
        }
        
        .incident-value {
            font-size: 32px;
            font-weight: 700;
            color: #dc3545;
            margin-bottom: 5px;
        }
        
        .incident-trend {
            font-size: 12px;
            font-weight: 600;
            color: #dc3545;
        }
        
        .incident-trend.positive {
            color: #28a745;
        }
		
		
		.mon-grupos > td > div {
			display:flex;
			flex-direction:column;
			gap:20px;
		}
		 
		.mon-grupo {
			display:flex;
			flex-direction:column;
			gap:8px;
		}
		 
		.mon-grupo-header {
			font-weight:bold;
			background-color:#eff0f1;
			margin-bottom:0;padding:8px;
		}
		 
		.mon-grupo-header:hover {
			cursor: pointer;
		}
		 
		.mon-grupo-body {
			display:flex;
			flex-direction:column;
			gap:8px;
		}
				
				
		/* CSS STATUS */
		
		
/* Historical Timeline Container */
.mapwkf-container {
    position: relative;
    padding: 20px 0;
}

/* Central Line */
.mapwkf-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 3px;
    background: #f5f5f5;
    border-radius: 4px;
}

/* Historical Item */
.mapwkf-item {
    margin-bottom: 40px;
    position: relative;
    display: flex;
    align-items: flex-start;
}

/* Historical Dot */
.mapwkf-dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    top: 0;
    z-index: 10;
}

.mapwkf-dot.aprovado {
    border: 4px solid #009e5b;
}

.mapwkf-dot.reprovado {
    border: 4px solid #c7000f;
}

.mapwkf-dot.devolvido {
    border: 4px solid #b13e2d;
}

/* Historical Content */
.mapwkf-content {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mapwkf-content.left {
    margin-left: 0;
    margin-right: auto;
    width: 48%;
    text-align: right;
    padding-right: 30px;
}

.mapwkf-content.right {
    margin-right: 0;
    margin-left: auto;
    width: 48%;
    text-align: left;
    padding-left: 30px;
}

/* Historical Header */
.mapwkf-header {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Historical Status Badge */
.mapwkf-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.mapwkf-status.pendente {
    background: #fff0e2;
    color: #c66000;
}

.mapwkf-status.aprovado {
    background: #d1fae5;
    color: #0b5e42;
}

.mapwkf-status.reprovado {
    background: #fee;
    color: #c7000f;
}

.mapwkf-status.devolvido {
    background: #e7f5ff;
    color: #004499;
}

.mapwkf-status.em-espera {
    background: #f3e5f5;
    color: #6a1b9a;
}

.mapwkf-status.ignorada {
    background: #f5f5f5;
    color: #808080;
}

.mapwkf-status.rascunho {
    background: #f5f5f5;
    color: #808080;
}

.mapwkf-status.default {
    background: #e9ecef;
    color: #555555;
}

/* Historical Body */
.mapwkf-body {
    padding: 16px;
}

/* Historical Meta */
.mapwkf-meta {
    font-size: 13px;
    color: #666;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* Historical Box (Parecer/Motivo) */
.mapwkf-box {
    background: #f5f5f5;
    padding: 12px;
    border-radius: 4px;
    margin-top: 8px;
}

.mapwkf-box.parecer {
    border-left: 4px solid #2196F3;
}

.mapwkf-box.motivo {
    border-left: 4px solid #c7000f;
}

.mapwkf-box-title {
    font-weight: 600;
    font-size: 12px;
    color: #333;
    margin-bottom: 4px;
}

.mapwkf-box-content {
    font-size: 13px;
    color: #555;
    line-height: 1.4;
}