@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* Paleta para tema escuro sóbrio, cinzas e azul/ciano para contraste */
    --primary-color: #3bb6c1;         /* Ciano escuro para botões principais */
    --primary-hover: #2896a1;         /* Ciano mais escuro no hover */
    --primary-light: #5fd6e1;         /* Ciano claro para foco/sombras */
    --secondary-color: #4b5563;       /* Cinza médio para botões secundários */
    --secondary-hover: #374151;       /* Cinza escuro para hover secundário */
    --accent-color: #64748b;          /* Azul acinzentado para detalhes */
    --accent-hover: #475569;          /* Azul acinzentado escuro para hover */

    /* Cinzas para tema escuro */
    --neutral-darkest: #181a1f;       /* Fundo mais escuro */
    --neutral-darker: #23262b;        /* Fundo principal */
    --neutral-dark: #2e3137;          /* Cards e áreas intermediárias */
    --neutral-medium: #6b7280;        /* Cinza médio para bordas/textos secundários */
    --neutral-light: #bfc3cc;         /* Cinza claro para detalhes */
    --neutral-lighter: #e5e7eb;       /* Cinza bem claro */
    --neutral-lightest: #f8fafc;      /* Quase branco */
    --neutral-white: #ffffff;

    --bg-color: var(--neutral-darker);      /* Fundo principal escuro */
    --card-bg: var(--neutral-dark);         /* Fundo dos cards */
    --text-color: var(--neutral-lightest);  /* Texto principal */
    --text-muted-color: var(--neutral-light); /* Texto secundário */
    --border-color: var(--neutral-medium);  /* Bordas */
    --header-bg: #1a1l22;                  /* Header bem escuro */
    --header-text: var(--neutral-lightest);
    --card-bg-rgb: 35, 38, 43;

    /* Cores Semânticas */
    --success-color: #22c55e;   /* Verde para sucesso */
    --warning-color: #fbbf24;   /* Amarelo para alertas */
    --error-color: #ef4444;     /* Vermelho para erros */
    --info-color: #3bb6c1;      /* Ciano para informações */

    /* Tipografia */
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Espaçamento e Layout */
    --spacing-unit: 8px;
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 72px;

    /* Bordas e Sombras */
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 16px;
    --border-radius-full: 9999px;

    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 2px 4px -1px rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.15);

    /* Transições */
    --transition-duration: 0.2s;
    --transition-timing-function: ease-in-out;
    --transition-base: all var(--transition-duration) var(--transition-timing-function);

    /* Cores específicas da aplicação */
    --hotel-color: #374151;      /* Azul grafite escuro */
    
    --principal-color: #3bb6c1;  /* Ciano para principal */
    --social-color: #64748b;     /* Azul acinzentado para social */
    --extra-color: #4b5563;      /* Cinza médio para extra */
}

/* Reset Básico e Estilos Globais */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-sans);
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 16px; /* Tamanho base da fonte */
    transition: background-color var(--transition-base), color var(--transition-base);
}

.login-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    filter: grayscale(30%);
}
/* Estilo para o container do checkbox de localização */
.destino-localizacao {
    display: flex;
    align-items: center;
    justify-content: right-side; /* Alinha à esquerda */
    margin-bottom: 15px;
    width: 25%;
    gap: 8px; /* Espaço entre checkbox e texto */
}

/* Estilo para o texto do checkbox */
.destino-localizacao label {
    order: 2; /* Coloca o texto antes do checkbox */
    margin-left: 0;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-color);
}

/* Estilo para o checkbox */
.destino-localizacao input[type="checkbox"] {
    order: 1; /* Coloca o checkbox depois do texto */
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
    margin: 0;
    cursor: pointer;
}
/* Estilos para a tela de login */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--neutral-lightest);
    transition: background-color var(--transition-base);
}

.login-box {
    background-color: var(--card-bg);
    padding: calc(var(--spacing-unit) * 4);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 400px;
    text-align: center;
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

.login-box h2 {
    margin-bottom: calc(var(--spacing-unit) * 3);
    color: var (--text-color);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
}

.login-form input {
    padding: calc(var(--spacing-unit) * 1.5);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    font-size: 1rem;
    transition: var(--transition-base);
    background-color: var(--bg-color);
    color: var(--text-color);
}

.login-form input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-light);
}

.login-btn {
    padding: calc(var(--spacing-unit) * 1.5);
    background-color: var(--primary-color);
    color: #313131; /* Texto preto */
    border: none;
    border-radius: var(--border-radius-medium);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-base);
}

.login-btn:hover {
    background-color: var(--primary-hover);
}

.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-unit);
    padding: calc(var(--spacing-unit) * 1.5);
    background-color: var(--neutral-white);
    color: #313131; /* Texto preto */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-base);
}

.google-btn:hover {
    background-color: var(--neutral-lightest);
    box-shadow: var(--shadow-sm);
}

.divider {
    display: flex;
    align-items: center;
    margin: calc(var(--spacing-unit) * 2) 0;
    color: var(--text-muted-color);
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--border-color);
}

.divider::before {
    margin-right: var(--spacing-unit);
}

.divider::after {
    margin-left: var(--spacing-unit);
}

/* Esconde o conteúdo principal quando não logado */
.main-content-wrapper {
    display: none;
}

/* Mostra o conteúdo principal quando logado */
.logged-in .login-container {
    display: none;
}

.logged-in .main-content-wrapper {
    display: block;
}
/* Adicione isto ao seu arquivo style.css */
#openRegisterBtn, 
#openForgotBtn {
    width: calc(50% - 8px) !important; /* Metade da largura menos o espaço entre eles */
    margin-top: 8px !important;
    display: inline-block !important;
    box-sizing: border-box;
}

#visitanteBtn {
    width: 100% !important;
    margin-top: 16px !important;
    box-sizing: border-box;
}

.login-box .login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-box .login-form > * {
    width: 100%;
    margin: 0;
}

/* Cabeçalhos */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    margin-bottom: calc(var(--spacing-unit) * 2);
    color: var(--text-color); /* Garante que herdem a cor do texto do tema */
}

h1 { font-size: 2.25rem; } /* 36px */
h2 { font-size: 1.875rem; } /* 30px */
h3 { font-size: 1.5rem; }   /* 24px */
h4 { font-size: 1.25rem; }  /* 20px */

p {
    margin-bottom: calc(var(--spacing-unit) * 2);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Componentes Principais */
.header {
    background-color: var(--header-bg);
    color: var(--header-text);
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 5); /* 20px 40px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 2);
    border-bottom: 1px solid var(--border-color); /* Adiciona uma borda sutil */
    box-shadow: var(--shadow-sm);
}

.header h1 {
    margin: 0;
    font-size: 1.75rem; /* 28px */
    font-weight: var(--font-weight-medium);
}

.header-right {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2.5); /* 20px */
}

.header-contact {
    display: flex;
    gap: calc(var(--spacing-unit) * 3.75); /* 30px */
}

.header-contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-unit); /* 8px */
    font-size: 0.9rem;
}

.header-icon {
    background-color: rgba(255, 255, 255, 0.1); /* Fundo mais sutil para ícones no header */
    border-radius: var(--border-radius-full);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-base);
}
.header-icon:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
.header-icon i { /* Se estiver usando FontAwesome, por exemplo */
    color: var(--header-text);
    font-size: 1rem;
}


.contador {
    font-size: 0.9rem; /* 14.4px */
    font-weight: var(--font-weight-medium);
    color: var(--neutral-white);
    background-color: var(--accent-color);
    padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit); /* 4px 8px */
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-xs);
}

.banner {
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.3)), url('Banner.jpeg'); /* Gradiente mais suave */
    min-height: 250px; /* Aumenta um pouco a altura */
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column; /* Para alinhar texto e possível subtítulo */
    align-items: center;
    justify-content: center;
    color: var(--neutral-white);
    margin-bottom: calc(var(--spacing-unit) * 5); /* 40px */
    padding: calc(var(--spacing-unit) * 2);
    text-align: center;
}

.banner h2 {
    font-size: 2.5rem; /* 40px - Aumentado para impacto */
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-unit);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Sombra no texto para legibilidade */
}
/* Adicionar um subtítulo opcional ao banner */
.banner p {
    font-size: 1.125rem; /* 18px */
    font-weight: var(--font-weight-light);
    max-width: 600px;
    margin-top: 0;
    opacity: 0.9;
}


.main-container {
    display: flex;
    gap: calc(var(--spacing-unit) * 2); /* Espaço entre sidebar e conteúdo */
    padding: 0 calc(var(--spacing-unit) * 2); /* Adiciona padding lateral ao container principal */
}

.sidebar {
    padding: var(--spacing-unit);
    background-color: var(--neutral-darkest);
    box-shadow: var(--shadow-md);
    width: var(--sidebar-collapsed-width);
    display: flex;
    flex-direction: column;
    height: calc(100vh - (var(--spacing-unit) * 2.5 * 2) - 1px - (var(--spacing-unit) * 5) - (var(--spacing-unit) * 4)); /* Ajuste de altura considerando header, banner e paddings */
    position: sticky;
    top: calc(var(--spacing-unit) * 2); /* Espaço do topo */
    transition: width var(--transition-duration) var(--transition-timing-function), padding var(--transition-duration) var(--transition-timing-function);
    overflow: hidden;
    border-radius: var(--border-radius-medium);
}

.sidebar.expanded {
    width: var(--sidebar-width);
    padding: calc(var(--spacing-unit) * 2);
    background-color: var(--neutral-dark);
}

.sidebar-toggle {
    background-color: var(--primary-color);
    color: var(--neutral-white);
    border: none;
    border-radius: var(--border-radius-medium);
    padding: var(--spacing-unit);
    cursor: pointer;
    margin-bottom: var(--spacing-unit);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: background-color var(--transition-base);
    font-size: 1.2rem; /* Tamanho do ícone */
}

.sidebar-toggle:hover {
    background-color: var(--primary-hover);
}
.sidebar-toggle .toggle-icon-expanded,
.sidebar-toggle .toggle-icon-collapsed {
    display: none; /* Controlado por JS ou estado da sidebar */
}
.sidebar:not(.expanded) .sidebar-toggle .toggle-icon-collapsed { display: inline; }
.sidebar.expanded .sidebar-toggle .toggle-icon-expanded { display: inline; }


.tabs {
    flex: 1;
    overflow-y: auto;
    /* Custom scrollbar (opcional, mas moderno) */
    &::-webkit-scrollbar {
        width: 6px;
    }
    &::-webkit-scrollbar-track {
        background: transparent;
    }
    &::-webkit-scrollbar-thumb {
        background: var(--neutral-light);
        border-radius: var(--border-radius-full);
    }
    &::-webkit-scrollbar-thumb:hover {
        background: var(--neutral-medium);
    }
}
[data-theme="dark"] .tabs {
    &::-webkit-scrollbar-thumb {
        background: var(--neutral-dark);
    }
    &::-webkit-scrollbar-thumb:hover {
        background: var(--neutral-medium);
    }
}

.tab {
    padding: calc(var(--spacing-unit) * 1.5) var(--spacing-unit);
    cursor: pointer;
    background-color: transparent; /* Abas transparentes por padrão */
    color: var(--text-muted-color);
    border-radius: var(--border-radius-medium);
    transition: background-color var(--transition-base), color var(--transition-base);
    display: flex;
    align-items: center;
    gap: var(--spacing-unit);
    white-space: nowrap;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}
.sidebar:not(.expanded) .tab {
    justify-content: center;
}

.tab:hover {
    background-color: var(--primary-light);
    color: var(--primary-hover);
}
.tab.active {
    background-color: var(--primary-color);
    color: var(--neutral-white);
    font-weight: var(--font-weight-medium);
}
.tab.active:hover {
    background-color: var(--primary-hover);
}


.tab span {
    display: none;
    opacity: 0;
    transition: opacity var(--transition-duration) ease-in-out calc(var(--transition-duration) / 2);
}

.sidebar.expanded .tab span {
    display: inline;
    opacity: 1;
}

.sidebar i.fas { /* Assumindo FontAwesome */
    width: 20px; /* Largura fixa para alinhamento */
    text-align: center;
    font-size: 1.1rem;
    transition: font-size var(--transition-base);
}
.sidebar:not(.expanded) i.fas {
    font-size: 1.3rem; /* Ícones maiores quando recolhido */
    margin-right: 0;
}
.sidebar.expanded i.fas {
    margin-right: calc(var(--spacing-unit) * 0.5);
}


.button-group {
    margin-top: auto;
    padding-top: var(--spacing-unit);
    border-top: 1px solid var(--border-color);
}

.button-group .add-btn { /* Reutilizando .add-btn, mas pode ser específico */
    width: 100%;
    justify-content: center; /* Centraliza ícone e texto */
    color: #313131; /* Texto preto */
}

.button-group .add-btn span {
    display: none;
    opacity: 0;
}
.sidebar.expanded .button-group .add-btn span {
    display: inline;
    opacity: 1;
    margin-left: var(--spacing-unit);
}

.main-content {
    flex: 1;
    padding: 0 0 calc(var(--spacing-unit) * 5); /* Remove padding lateral, já que .main-container tem */
    transition: margin-left var(--transition-duration) var(--transition-timing-function);
}

.tab-content {
    display: none;
    animation: fadeIn var(--transition-duration) var(--transition-timing-function);
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

.container {
    background-color: var(--card-bg);
    border-radius: var(--border-radius-large); /* Bordas mais arredondadas para cards */
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 3.5); /* 24px 28px */
    box-shadow: var(--shadow-md);
    margin-bottom: calc(var(--spacing-unit) * 3.5); /* 28px */
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
}
.container:hover {
    box-shadow: var(--shadow-lg); /* Efeito sutil ao passar o mouse */
}


.destino {
    margin-bottom: calc(var(--spacing-unit) * 2.5); /* 20px */
    position: relative;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: calc(var(--spacing-unit) * 2.5); /* 20px */
}

.destino:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.destino-label {
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-unit);
    color: var(--text-color); /* Usar cor de texto principal */
    font-size: 1rem; /* 16px */
    display: block; /* Para garantir margin-bottom */
}

.destino-row {
    display: flex;
    gap: var(--spacing-unit); /* 8px */
    align-items: center;
    margin-bottom: var(--spacing-unit);
}

.coordenadas {
    font-size: 0.875rem; /* 14px */
    color: var(--text-muted-color);
    margin-top: calc(var(--spacing-unit) * 0.5);
    margin-bottom: var(--spacing-unit);
}

/* Formulários Modernizados */
input,
select {
    flex: 1;
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 1.5); /* 10px 12px */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    font-size: 0.95rem; /* 15.2px */
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
    background-color: var(--bg-color); /* Fundo sutilmente diferente do card */
    color: var(--text-color);
    width: 100%; /* Garante que o flex item possa ocupar o espaço */
}
input::placeholder,
select::placeholder {
    color: var(--text-muted-color);
    opacity: 0.7;
}

input:focus,
select:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-light); /* Sombra de foco mais proeminente */
    background-color: var(--card-bg); /* Fundo do card ao focar */
}
select {
    appearance: none; /* Remove estilo padrão do select */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236B7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(var(--spacing-unit) * 1.5) center;
    background-size: 1.2em;
    padding-right: calc(var(--spacing-unit) * 4); /* Espaço para o ícone */
}
[data-theme="dark"] select {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23D1D5DB'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
}


/* Botões Modernizados */
button, .btn /* Classe genérica para botões */ {
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2.5); /* 10px 20px */
    cursor: pointer;
    background-color: var(--primary-color);
    color: var(--neutral-lightest);
    border: 1px solid transparent; /* Borda transparente para consistência */
    border-radius: var(--border-radius-medium);
    font-weight: var(--font-weight-medium);
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
    letter-spacing: 0.5px;
    font-size: 0.95rem;
    display: inline-flex; /* Para alinhar ícones e texto */
    align-items: center;
    justify-content: center;
    gap: var(--spacing-unit);
    text-align: center;
}

button:hover, .btn:hover {
    background-color: var(--primary-hover);
    color: var(--neutral-white);
    transform: translateY(-2px); /* Efeito de elevação sutil */
    box-shadow: var(--shadow-sm);
}
button:active, .btn:active {
    transform: translateY(0px);
    box-shadow: var(--shadow-inner);
}
button:focus, .btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Botão de Remover (Estilo Destrutivo) */
.remove-btn {
    background-color: var(--error-color);
    color: var(--neutral-lightest);
    width: auto; /* Ajustar largura ao conteúdo */
    min-width: 40px; /* Largura mínima */
    height: 40px;
    padding: 0 var(--spacing-unit); /* Padding horizontal para ícone + texto */
    font-size: 1rem; /* Tamanho do ícone/texto */
}
.remove-btn:hover {
    background-color: #b91c1c;
}
.remove-btn i { /* Se usar ícone */
    margin: 0; /* Remove margem se for só ícone */
}

/* Botão de Adicionar (Estilo Construtivo/Primário) */

.add-btn i {
    color: var(--neutral-lightest);
}

/* Botão de Calcular (Pode ser um ícone ou ter texto) */
.calc-btn {
    background-color: var(--accent-color);
    color: var(--neutral-lightest);
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.25); /* Igual ao .categoria-btn */
    border-radius: var(--border-radius-medium); /* Retangular, não circular */
    width: auto;
    height: auto;
    font-size: 1.1rem;
    transition: var(--transition-base);
    border: none;
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.calc-btn:hover {
    background-color: var(--accent-hover);
}

/* Autocomplete */
.autocomplete {
    position: absolute;
    top: calc(100% + 4px); /* Pequeno espaço abaixo do input */
    left: 0;
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    z-index: 1000;
    display: none;
    box-shadow: var(--shadow-lg); /* Sombra mais proeminente para dropdowns */
    max-height: 250px; /* Aumenta um pouco */
    overflow-y: auto;
    /* Custom scrollbar */
    &::-webkit-scrollbar { width: 5px; }
    &::-webkit-scrollbar-track { background: transparent; }
    &::-webkit-scrollbar-thumb { background: var(--neutral-light); border-radius: var(--border-radius-full); }
    &::-webkit-scrollbar-thumb:hover { background: var(--neutral-medium); }
}
[data-theme="dark"] .autocomplete {
    &::-webkit-scrollbar-thumb { background: var(--neutral-dark); }
    &::-webkit-scrollbar-thumb:hover { background: var(--neutral-medium); }
}


.autocomplete div {
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 1.5); /* 10px 12px */
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}
.autocomplete div:last-child {
    border-bottom: none;
}

.autocomplete div:hover,
.autocomplete div.selected /* Para item selecionado com teclado */ {
    background: var(--primary-light);
    color: var(--primary-hover);
}

/* Seção de Rota */
#rota {
    margin-top: calc(var(--spacing-unit) * 3); /* 24px */
    padding: calc(var(--spacing-unit) * 3); /* 24px */
    background-color: var (--card-bg);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-md);
}

.rota-item {
    margin-bottom: var(--spacing-unit);
    padding-bottom: var(--spacing-unit);
    border-bottom: 1px dashed var(--border-color); /* Linha tracejada para diferenciar */
    font-size: 0.95rem;
}

.rota-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.total {
    margin-top: calc(var(--spacing-unit) * 2);
    padding-top: calc(var(--spacing-unit) * 2);
    border-top: 2px solid var(--primary-color);
    font-weight: var(--font-weight-bold);
    font-size: 1.25rem; /* 20px */
    color: var(--primary-color);
    text-align: right; /* Alinha o total à direita */
}
.total span { /* Se houver um label "Total:" */
    color: var(--text-color);
    font-weight: var(--font-weight-medium);
    margin-right: var(--spacing-unit);
}

/* Loader */
.loader {
    display: none; /* Controlado por JS */
    width: 36px; /* Tamanho aumentado */
    height: 36px;
    border: 4px solid var(--neutral-light);
    border-top-color: var(--primary-color); /* Cor primária para o spinner */
    border-radius: 50%;
    animation: spin 0.8s linear infinite; /* Animação mais rápida */
    margin: calc(var(--spacing-unit) * 2.5) auto; /* 20px auto */
}

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

/* Lista de Endereços */
.address-list {
    background-color: var(--card-bg);
    border-radius: var (--border-radius-large);
    box-shadow: var(--shadow-md);
    padding: calc(var(--spacing-unit) * 2.5); /* 20px */
    margin-top: calc(var(--spacing-unit) * 2.5); /* 20px */
}

.address-list h3 {
    margin-top: 0;
    margin-bottom: var(--spacing-unit);
    color: var (--text-color);
    padding-bottom: var(--spacing-unit);
    border-bottom: 1px solid var(--border-color);
    font-size: 1.25rem; /* 20px */
}

.address-list ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.address-list li {
    padding: calc(var(--spacing-unit) * 1.5) 0; /* 12px 0 */
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-unit);
    font-size: 0.95rem;
}

.address-list li:last-child {
    border-bottom: none;
}

.address-list li > span { /* Texto do endereço */
    flex: 1 1 200px; /* Permite quebra e base de 200px */
    margin-right: calc(var(--spacing-unit) * 2);
    word-break: break-word;
    line-height: 1.5;
}

.action-buttons {
    display: flex;
    gap: var(--spacing-unit);
    margin-left: auto; /* Empurra para a direita */
    align-items: center;
    flex-shrink: 0; /* Evita que os botões encolham */
}

/* Botão de Registrar (reg-btn) */
.reg-btn {
    /* Usa o estilo base de .btn ou button */
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.5); /* 6px 12px - Botão menor */
    font-size: 0.875rem; /* 14px */
    height: 40px;
    min-width: 40px;
}
.reg-btn i {
    font-size: 1em; /* Ícone proporcional ao texto */
}

/* Botão de Gravar Áudio (audio-btn) - igual ao reg-btn */
.audio-btn {
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.5);
    font-size: 0.875rem;
    height: 40px;
    min-width: 40px;
    border-radius: var(--border-radius-medium);
    background-color: var(--accent-color);
    color: var(--neutral-lightest);
    border: none;
    transition: var(--transition-base);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-unit);
}
.audio-btn:hover {
    background-color: var(--accent-hover);
    color: var(--neutral-white);
}

/* Informações Registradas e Gravador de Áudio (Containers) */
.informacoes-registradas,
.audio-recorder-container {
    display: none; /* Controlado por JS */
    width: 100%;
    background-color: var(--card-bg); /* Fundo do card */
    padding: calc(var(--spacing-unit) * 2); /* 16px */
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-sm); /* Sombra mais sutil para elementos internos */
    margin-top: var(--spacing-unit);
    /* order: 3; e order: 4; são para flex/grid, verificar contexto HTML */
}

.campo-registro { /* Textarea */
    width: 100%;
    min-height: 120px; /* Altura aumentada */
    padding: calc(var(--spacing-unit) * 1.5); /* 12px */
    font-size: 0.95rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    resize: vertical;
    box-sizing: border-box;
    transition: var(--transition-base);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-family-sans); /* Garante a mesma fonte */
}
.campo-registro:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-light);
}

.categoria-indicador {
    display: inline-flex; /* Para alinhar ícone/texto interno se houver */
    align-items: center;
    margin-right: calc(var(--spacing-unit) * 0.5);
    padding: calc(var(--spacing-unit) * 0.35) calc(var(--spacing-unit) * 1); /* 3px 8px */
    border-radius: var(--border-radius-full); /* Mais arredondado */
    font-weight: var(--font-weight-medium);
    font-size: 0.75rem; /* 12px */
    color: var(--neutral-white); /* Texto branco para contraste */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Estilos para o Mapa */
#map {
    height: 450px; /* Altura aumentada */
    width: 100%;
    border-radius: var(--border-radius-large); /* Consistente com .container */
    margin-top: calc(var(--spacing-unit) * 2.5); /* 20px */
    box-shadow: var(--shadow-md);
    background-color: var(--neutral-lighter); /* Cor de fundo enquanto o mapa carrega */
}

.map-container {
    margin-top: calc(var(--spacing-unit) * 3.5); /* 28px */
}

.map-controls {
    display: flex;
    flex-wrap: wrap; /* Permite quebra em telas menores */
    gap: var(--spacing-unit);
    margin-bottom: var(--spacing-unit);
}

.map-controls button {
    /* Usa estilo base de .btn */
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.5); /* 6px 12px */
    font-size: 0.875rem; /* 14px */
    color: #313131; /* Texto preto */
    background-color: var(--secondary-color); /* Cor secundária para controles de mapa */
}
.map-controls button:hover {
    background-color: var(--secondary-hover);
}
.map-controls button.active { /* Botão de controle ativo */
    background-color: var(--primary-color);
    color: var(--neutral-white);
}


/* Marcadores Customizados do Mapa */
.custom-marker {
    background-color: var(--primary-color);
    color: var(--neutral-lightest);
    border: 2px solid var(--neutral-white);
    border-radius: 50%;
    width: 24px; /* Tamanho aumentado */
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: 0.8rem;
    box-shadow: var(--shadow-sm);
}

.custom-marker.start {
    background-color: var(--success-color); /* Verde para início */
}

.custom-marker.end {
    background-color: var(--error-color); /* Vermelho para fim */
}

/* Informações da Rota (no mapa) */
.route-info {
    background-color: rgba(var(--card-bg-rgb), 0.9); /* Fundo semi-transparente */
    backdrop-filter: blur(5px); /* Efeito de vidro fosco (se suportado) */
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5); /* 8px 12px */
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-lg); /* Sombra mais destacada para sobreposição */
    margin-top: var(--spacing-unit);
    font-size: 0.875rem;
}
[data-theme="dark"] .route-info {
    background-color: rgba(var(--card-bg-rgb-dark), 0.85);
}

.route-info h4 {
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
}

.route-info p {
    margin: calc(var(--spacing-unit) * 0.5) 0;
    line-height: 1.4;
}

/* Botão de Alternar Tema */
.theme-toggle {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.5); /* 6px 12px */
    border-radius: var(--border-radius-full); /* Botão "pill" */
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-unit);
    transition: var(--transition-base);
    margin-left: auto; /* Empurra para a direita no header */
    font-size: 0.875rem;
}

.theme-toggle:hover {
    background-color: var(--primary-color);
    color: var(--neutral-white);
    box-shadow: var(--shadow-sm);
}
.theme-toggle i { /* Ícone dentro do botão de tema */
    font-size: 1.1em;
}


/* Seletor de Categoria */
.categoria-selector {
    display: flex;
    gap: calc(var(--spacing-unit) * 0.5); /* Espaçamento menor entre botões de categoria */
    margin-left: auto; /* Empurra para a direita */
}

.categoria-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.25); /* 6px 10px */
    border-radius: var(--border-radius-medium); /* Consistente */
    cursor: pointer;
    font-size: 0.875rem; /* 14px */
    transition: var(--transition-base);
    opacity: 0.8; /* Levemente transparente quando não ativo */
    border: 1px solid transparent; /* Para manter o tamanho ao adicionar borda no active */
    color: #313131; /* Texto preto */
}
.categoria-btn:hover {
    opacity: 1;
    transform: translateY(-1px); /* Efeito sutil */
}

.categoria-btn.active {
    opacity: 1;
    font-weight: var(--font-weight-semibold);
    transform: scale(1.05); /* Leve aumento */
    box-shadow: var(--shadow-inner), 0 0 0 2px var(--neutral-white); /* Sombra interna e borda branca */
    border-color: rgba(0,0,0,0.1);
}

/* Cores específicas de categoria (mantidas das variáveis originais) */
.categoria-btn.hotel { background-color: var(--hotel-color); color: var(--neutral-lightest);}
.categoria-btn.principal { background-color: var(--principal-color); color: var(--neutral-lightest);}
.categoria-btn.social { background-color: var(--social-color); color: var(--neutral-lightest);}
.categoria-btn.extra { background-color: var(--extra-color); color: var(--neutral-lightest);}
.categoria-btn.active {
    box-shadow: 0 0 0 2px var(--primary-light);
    border-color: var(--primary-light);
}

/* Loader */
.loader {
    border: 4px solid var(--neutral-light);
    border-top-color: var(--primary-color);
}

/* Inputs e selects */
input,
select {
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
input:focus,
select:focus {
    border-color: var(--primary-color);
    background-color: var(--card-bg);
}

/* Autocomplete */
.autocomplete {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}
.autocomplete div:hover,
.autocomplete div.selected {
    background: var(--primary-light);
    color: var(--primary-hover);
}

/* Map marker */
.custom-marker {
    background-color: var(--primary-color);
    color: var(--neutral-lightest);
    border: 2px solid var(--neutral-white);
}
.custom-marker.start {
    background-color: var(--success-color);
}
.custom-marker.end {
    background-color: var(--error-color);
}

/* Header */
.header {
    background-color: var(--header-bg);
    color: var(--header-text);
}

/* Contador */
.contador {
    background-color: var(--accent-color);
    color: var(--neutral-lightest);
}

/* Tooltip */
.tooltip .tooltiptext {
    background-color: #232634;
    color: var(--neutral-lightest);
}

/* Chatinho balão */
.chatinho-balao-text {
    background: #232634;
    color: #3bb6c1;
}

/* Footer */
footer {
    background: var(--header-bg,#232634);
    color: var(--header-text,#fff);
    border-top: 1px solid var(--border-color,#6B7280);
}

/* Esconde o footer quando não logado */
body:not(.logged-in) footer {
    display: none !important;
}

/* Responsividade e ajustes finos */
@media (max-width: 1024px) { /* Tablet e abaixo */
    .sidebar {
        /* Em telas menores, a sidebar pode ser um overlay ou ocupar menos espaço */
        position: fixed; /* Ou absolute, dependendo do fluxo */
        left: calc(var(--sidebar-collapsed-width) * -1 - var(--spacing-unit) * 2); /* Escondida por padrão, considerando padding */
        z-index: 1000;
        height: 100vh;
        top: 0;
        border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0; /* Arredondamento só na direita */
        box-shadow: var(--shadow-xl); /* Sombra mais forte para overlay */
    }
    .sidebar.expanded {
        left: 0;
        width: var(--sidebar-width); /* Garante a largura quando expandida */
    }
    .main-container {
        padding: 0 var(--spacing-unit); /* Reduz padding lateral */
    }
    /* Adicionar um overlay para escurecer o conteúdo quando a sidebar estiver aberta em mobile */
    body.sidebar-open-overlay::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5);
        z-index: 999; /* Abaixo da sidebar */
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition-duration) ease-in-out, visibility var(--transition-duration) ease-in-out;
    }
    body.sidebar-open-overlay.sidebar-expanded::before {
        opacity: 1;
        visibility: visible;
    }
    
    /* Ajustes para a tela de login em dispositivos móveis */
    .login-box {
        padding: calc(var(--spacing-unit) * 2);
        margin: 0 calc(var(--spacing-unit) * 2);
    }
}


@media (max-width: 768px) { /* Mobile */
    body {
        font-size: 15px; /* Ajusta tamanho base da fonte para mobile */
    }
    .header {
        flex-direction: column;
        gap: var(--spacing-unit);
        padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
    }
    .header h1 {
        font-size: 1.5rem; /* 24px */
    }
    .header-right {
        width: 100%;
        justify-content: space-between; /* Distribui o toggle de tema e contato */
    }
    .header-contact {
        gap: var(--spacing-unit);
    }
    .header-contact-item {
        font-size: 0.8rem;
    }

    .banner {
        min-height: 200px;
        margin-bottom: calc(var(--spacing-unit) * 3);
    }
    .banner h2 {
        font-size: 2rem; /* 32px */
    }
    .banner p {
        font-size: 1rem; /* 16px */
    }

    .main-container {
        /* flex-direction: column;  Com sidebar overlay, não precisa mais */
        padding: 0 var(--spacing-unit);
    }

    .main-content {
        padding: 0 0 calc(var(--spacing-unit) * 3);
    }

    .container {
        padding: calc(var(--spacing-unit) * 2); /* 16px */
        border-radius: var(--border-radius-medium); /* Bordas menores em mobile */
    }

    input, select, button, .btn {
        font-size: 0.9rem; /* Ajusta tamanho da fonte dos controles */
        padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5);
    }
    .remove-btn, .reg-btn, .map-controls button, .audio-btn {
        padding: var(--spacing-unit); /* Padding uniforme para botões menores */
        min-width: 36px;
        height: 36px;
        color: #313131; /* Texto preto */
    }

    .address-list li {
        flex-direction: column; /* Empilha texto e botões */
        align-items: flex-start; /* Alinha à esquerda */
        gap: calc(var(--spacing-unit) * 0.5);
    }
    .address-list li > span {
        margin-right: 0;
        margin-bottom: var(--spacing-unit);
    }
    .action-buttons {
        margin-left: 0; /* Alinha à esquerda */
        width: 100%;
        justify-content: flex-start; /* Botões começam da esquerda */
    }

    .map-controls {
        justify-content: center; /* Centraliza controles do mapa */
    }
    #map {
        height: 350px; /* Reduz altura do mapa */
    }

    .categoria-selector {
        width: 100%;
        overflow-x: auto; /* Permite scroll horizontal para categorias */
        padding-bottom: var(--spacing-unit); /* Espaço para scrollbar */
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch; /* Melhora scroll em iOS */
        scrollbar-width: thin; /* Firefox */
        scrollbar-color: var(--neutral-light) transparent; /* Firefox */
    }
    .categoria-selector::-webkit-scrollbar {
        height: 4px;
    }
    .categoria-selector::-webkit-scrollbar-thumb {
        background-color: var(--neutral-light);
        border-radius: var(--border-radius-full);
    }

    .custo-item {
        flex-direction: column;
        align-items: stretch; /* Estica elementos para largura total */
    }
    .custo-item .destino-row label {
        max-width: none;
        margin-bottom: calc(var(--spacing-unit) * 0.5);
    }
    .custo-item .remove-btn {
        margin-left: 0;
        margin-top: var(--spacing-unit);
        align-self: flex-end; /* Alinha botão de remover à direita */
    }

    .audio-controls {
        justify-content: center;
    }
}

/* Melhorias de Acessibilidade (Foco Visível) */
*:focus-visible {
    outline: 3px solid var(--primary-hover) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px var(--primary-light) !important; /* Fallback para navegadores sem :focus-visible */
}
/* Remover outline padrão para elementos que já têm estilo de foco customizado */
input:focus-visible,
select:focus-visible,
button:focus-visible,
.btn:focus-visible,
.campo-registro:focus-visible,
.theme-toggle:focus-visible {
    outline: none !important; /* Já possuem box-shadow no foco */
}
    /* Acessibilidade: foco visível para drag-and-drop */
    .dragging { outline: 2px dashed var(--accent-color); }
    /* Sticky resumo de custos/distância */
    .sticky-summary {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--card-bg);
        box-shadow: var(--shadow-md);
        padding: 8px 16px;
        border-radius: var(--border-radius-large);
        margin-bottom: 12px;
        display: flex;
        gap: 24px;
        align-items: center;
        font-weight: bold;
    }
    /* Tooltips */
    .tooltip {
        position: relative;
        cursor: pointer;
    }
    .tooltip .tooltiptext {
        visibility: hidden;
        width: max-content;
        background-color: #222;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 6px 10px;
        position: absolute;
        z-index: 1001;
        bottom: 125%; left: 50%; transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.2s;
        font-size: 0.85em;
        pointer-events: none;
    }
    .tooltip:focus .tooltiptext,
    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }
/* Adicione no final do arquivo */
.destino-row input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
}

.destino-row label {
    font-size: 0.95rem;
    color: var(--text-color);
    cursor: pointer;
}