/* ----------------------------------------------------------------------
   SAC-AUTO - ESTILO GLOBAL (PALETA CALMARIA & ALEGRIA)
   ---------------------------------------------------------------------- */

:root {
    /* Dark Mode removido, mantendo apenas light */
    /* Cores Principais - Tons de Azul e Turquesa Suave */
    --primary-color: #55acee;    /* Azul da logo */
    --primary-hover: #3b91d8;
    --primary-text: #1a5a8a;     /* Azul escuro acessível (Contraste 7:1+) */
    --secondary-color: #a2d2ff;  /* Azul pastel */
    
    /* Gradiente de Fundo (Ultra suave) */
    --bg-gradient: linear-gradient(160deg, #eef5ff 0%, #ffffff 100%);
    
    /* Variáveis de Vidro (Adaptadas para Fundo Claro) */
    --glass-bg: rgba(255, 255, 255, 0.6); 
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.08);
    --glass-blur: blur(12px);

    /* Cores de Erro Customizadas */
    --error-bg: rgba(255, 82, 82, 0.1);
    --error-border: #ff5252;

    /* Cores de Texto para Contraste em Fundo Claro */
    --text-main: #2c3e50;        /* Cinza azulado profundo */
    --text-muted: #626f70;       /* Cinza ajustado para contraste AA (4.5:1) */
}

/* Reset de CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Reserva o espaço da barra de rolagem para evitar o "pulo" lateral ao abrir modais */
html {
    scrollbar-gutter: stable;
}

/* Fundo da Página */
body {
    background-color: #eef5ff; /* Cor sólida de fallback idêntica ao início do gradiente */
    background-image: var(--bg-gradient);
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--text-main);
    overflow-x: hidden;
    line-height: 1.6;
}

/* Impede o scroll da página principal quando um modal estiver aberto */
body.modal-active {
    overflow: hidden;
    overscroll-behavior: none; /* Impede o efeito de 'elástico' que revela o fundo no Android */
}

/* Helper para Debug de Safe Area - Pode remover após os testes */
.debug-safe-area::after {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 0, 0, 0.2); /* Faixa vermelha transparente na área segura */
    pointer-events: none;
    z-index: 9999;
}

/* Fallback para Safari antigo: Adiciona padding compensatório apenas se scrollbar-gutter não for suportado */
@supports not (scrollbar-gutter: stable) {
    body.modal-active {
        padding-right: var(--scrollbar-width, 0px);
    }
}

/* Efeito de desfoque no fundo quando o modal está ativo */
body.modal-active .login-wrapper,
body.modal-active .dashboard-wrapper,
body.modal-active .dashboard-nav {
    filter: blur(0.3125rem);
    transition: filter 0.3s ease;
}

/* --- CLASES UTILITÁRIAS DE VIDRO --- */

/* Container Principal de Vidro (Agora com aspecto de vidro jateado claro) */
.glass-container {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 1.5625rem;
    box-shadow: var(--glass-shadow);
}

/* Inputs de Vidro (Clean e Leves) */
.glass-input {
    width: 100%;
    background: white;
    border: 1px solid #d1d9e6;
    border-radius: 1.875rem; /* Mais arredondado para suavidade */
    padding: 0.625rem 1.25rem;
    color: #333;
    outline: none;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.glass-input:focus {
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0.75rem rgba(85, 172, 238, 0.15);
}

.glass-input.invalid {
    border-color: var(--error-border);
    background: var(--error-bg);
}

.glass-input::placeholder {
    color: #95a5a6;
}

/* Estilo para labels de erro */
.error-label {
    color: var(--error-border);
    font-size: 0.75rem;
    margin-top: 0.3125rem;
    display: block;
    font-weight: 600;
}

/* Botões de Vidro (Vibrantes e Confiáveis) */
/* Base para todos os botões com estilo glass */
.glass-btn {
    background: var(--primary-color); /* Fundo azul da marca */
    border: none; /* Sem borda padrão */
    border-radius: 1.875rem; /* Botões mais arredondados (pill-shaped) */
    color: #fff; /* Texto branco */
    padding: 0.5rem 1.25rem; /* Reduzido para um visual mais elegante */
    text-transform: none; /* Remove uppercase for a softer look */
    letter-spacing: 0.5px; /* Espaçamento de letra mais sutil */
    font-weight: 600; /* Peso da fonte um pouco menos bold */
    cursor: pointer;
    transition: all 0.3s ease; /* Transição suave para hover e active */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem; /* Tamanho da fonte mais discreto */
    box-shadow: 0 0.25rem 0.9375rem rgba(85, 172, 238, 0.2); /* Sombra inicial sutil */
}

.glass-btn:hover {
    background: var(--primary-hover); /* Azul mais escuro no hover */
    transform: translateY(-0.125rem); /* Leve elevação */
    box-shadow: 0 0.5rem 1.25rem rgba(85, 172, 238, 0.35); /* Sombra mais pronunciada */
}

/* Estado de Carregamento (Estilo Ladda) */
.glass-btn.btn-loading {
    position: relative;
    color: transparent !important; /* Esconde o texto */
    pointer-events: none; /* Impede cliques extras */
}

.glass-btn.btn-loading::after {
    content: "";
    position: absolute;
    width: 1.2rem;
    height: 1.2rem;
    top: calc(50% - 0.6rem);
    left: calc(50% - 0.6rem);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: btn-spin 0.6s linear infinite;
}

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

.glass-btn:active {
    transform: translateY(0); /* Retorna à posição original */
    box-shadow: 0 0.125rem 0.5rem rgba(85, 172, 238, 0.2); /* Sombra menor no clique */
}

/* Modificador para botões slim (ex: Sair) */
.glass-btn.btn-slim {
    background: transparent; /* Fundo transparente */
    border: 1px solid rgba(255, 255, 255, 0.6); /* Borda de vidro sutil */
    color: var(--text-main); /* Cor do texto principal */
    padding: 0.375rem 1rem; /* Mais compacto para ações secundárias */
    font-size: 0.8rem; /* Fonte reduzida para diferenciar da ação principal */
    font-weight: 500; /* Peso da fonte normal */
    box-shadow: none; /* Sem sombra inicial */
    border-radius: 1.875rem; /* Mantém o arredondamento */
}

.glass-btn.btn-slim:hover {
    background: rgba(255, 255, 255, 0.3); /* Fundo levemente visível no hover */
    transform: translateY(-1px); /* Elevação sutil */
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.05); /* Sombra muito sutil */
    border-color: var(--primary-color); /* Borda azul no hover */
    color: var(--primary-color); /* Texto azul no hover */
}

/* Modificador para botões slim verdes (ex: Novo Chamado) */
.glass-btn.btn-slim-green {
    background: rgba(76, 175, 80, 0.8); /* Verde suave e transparente */
    border: 1px solid rgba(76, 175, 80, 0.6); /* Borda verde mais escura */
    color: white; /* Texto branco */
    padding: 0.375rem 1rem; /* Mais compacto */
    font-size: 0.8rem; /* Fonte reduzida */
    font-weight: 500; /* Peso da fonte normal */
    box-shadow: 0 0.25rem 0.625rem rgba(76, 175, 80, 0.2); /* Sombra verde sutil */
    border-radius: 1.875rem; /* Mantém o arredondamento */
}

.glass-btn.btn-slim-green:hover {
    background: rgba(76, 175, 80, 0.95); /* Verde mais opaco no hover */
    transform: translateY(-1px); /* Elevação sutil */
    box-shadow: 0 0.375rem 0.9375rem rgba(76, 175, 80, 0.3); /* Sombra verde mais pronunciada */
}

/* Scrollbar Personalizada (Sutil) */

/* Scrollbar Personalizada (Sutil) */
::-webkit-scrollbar {
    width: 0.375rem;
}

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

::-webkit-scrollbar-thumb {
    background: #aab2b7;
    border-radius: 0.625rem;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* --- MODAL DE NOTIFICAÇÃO CUSTOMIZADO --- */
.modal-notificacao {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    width: 95vw;
    max-width: 25rem;
    padding: 1.875rem;
    z-index: 1100; /* Acima do modal de detalhes */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-align: center;
}

.modal-notificacao.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translate(-50%, -50%);
}

#modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s;
}

#modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.modal-notificacao h3 { color: var(--primary-color); margin-bottom: 0.75rem; }
.modal-notificacao p { margin-bottom: 1.5625rem; color: var(--text-main); font-size: 0.95rem; }
.modal-actions { display: flex; gap: 0.75rem; justify-content: center; }