.float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #0C9;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
}

.my-float {
    margin-top: 22px;
}

.login_lnk a {
    color: #666666;
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
}

.login_lnk a:hover {
    color: #0056b3;

}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-top: 10px;
}

.day {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    border-radius: 6px;
}

.header {
    font-weight: bold;
    background: #eee;
}

.today {
    background: #007bff;
    color: #fff;
    font-weight: bold;
}

.past {
    color: #ccc;
    /* Deixa o número do dia cinza */
    background-color: #f9f9f9;
    /* Um fundo levemente diferente */
    cursor: not-allowed;
    /* Mostra o cursor de "não permitido" */
}

.day.future-disabled {
    color: #ccc;
    /* Deixa o número do dia cinza */
    background-color: #f9f9f9;
    /* Um fundo levemente diferente */
    cursor: not-allowed;
    /* Mostra o cursor de "não permitido" */
}

/* --- NOVO ESTILO DO CALENDÁRIO --- */

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* 7 colunas iguais */
    gap: 8px;
    /* Espaçamento entre os dias */
    width: 100%;
}

.calendar .header {
    font-weight: 600;
    /* Mais forte */
    font-size: 0.9em;
    text-align: center;
    padding-bottom: 10px;
    color: #777;
    border-bottom: 1px solid #eee;
    margin-bottom: 5px;
}

/* Célula vazia antes do dia 1 */
.calendar .day-empty {
    background-color: #fcfcfc;
    border: 1px dashed #f0f0f0;
    border-radius: 8px;
}

/* Célula de um dia */
.calendar .day {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Força o dia a ser um quadrado perfeito */
    border: 1px solid #eee;
    border-radius: 8px;
    /* O toque moderno! */
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

/* Span dentro do dia (para o efeito de zoom) */
.calendar .day span {
    transition: transform 0.2s ease;
}

/* Dias no passado ou futuro desabilitado */
.calendar .day.past,
.calendar .day.future-disabled {
    color: #aaa;
    background-color: #f8f9fa;
    cursor: not-allowed;
}

/* Dia de Hoje */
.calendar .day.today {
    border-color: #009ef7;
    /* Cor primária (ajuste se usar outra) */
    color: #009ef7;
    font-weight: 700;
}

/* --- EFEITOS DE INTERAÇÃO --- */

/* Wrapper do link */
.calendar a {
    text-decoration: none;
    color: inherit;
    display: block;
    /* Garante que o 'a' preencha o espaço da grid */

}

/* Hover (Passar o mouse) em dias clicáveis */
.calendar a:hover .day {
    background-color: #f0f5ff;
    /* Um azul bem claro */
    border-color: #009ef7;
    transform: scale(1.05);
    /* Efeito de "zoom" sutil */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Dia SELECIONADO (via JavaScript) */
.calendar .day.selected {
    background-color: #009ef7;
    /* Cor primária */
    color: #fff;
    border-color: #009ef7;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.calendar .day.selected span {
    transform: scale(1.2);
    /* Destaca o número */
}

/* --- ESTILO DOS RESULTADOS --- */
#resultados-horarios {
    /* O placeholder já está estilizado inline */
    /* Você pode adicionar mais estilos aqui para a lista de horários */
}

/* ==================================================================
  CORREÇÃO DE RESPONSIVIDADE MÓVEL
==================================================================
*/

/* * Alvo: Telas pequenas, com largura máxima de 576px (celulares).
 * (Qualquer tela maior que isso usará os estilos de desktop).
 */
@media (max-width: 576px) {

    /* * 1. Reduz o espaçamento entre os dias.
     * O 'gap: 8px' original ocupa muito espaço (6 vãos * 8px = 48px).
     * Vamos reduzir pela metade.
     */
    .calendar {
        gap: 3px;
        /* O original era 8px */
        margin-left: -20px;
        margin-bottom: 20px;
    }

    /* * 2. Reduz a fonte dos cabeçalhos (Dom, Seg, Qua).
     * Esta é a principal causa do overflow, pois "Qua" e "Qui" são largos.
     */
    .calendar .header {
        font-size: 0.8em;
        /* O original era 0.9em */
        font-weight: 500;
        padding-bottom: 5px;
        margin-bottom: 2px;
    }

    /* * 3. Reduz a fonte dos números dos dias.
     * Isso permite que a célula do grid (o 'quadrado' do dia) 
     * fique menor sem quebrar o texto.
     */
    .calendar .day {
        font-size: 0.9em;
        font-weight: 400;
        border-radius: 6px;
        /* Um pouco menor no mobile */
    }

    /* * 4. [Opcional] Reduzir o padding geral do card.
     * Se o calendário ainda estiver apertado, é porque o 'card-body'
     * tem muito padding (ex: p-5).
     */
    .card-body {
        /* * Use 1rem (aprox. 16px) de padding no mobile
         * em vez dos p-4 ou p-5 do desktop. 
         */
        padding: 1rem !important;
    }
}


/*
 * ==================================================
 * ESTILO DOS CARDS DE SELEÇÃO (SALA / EQUIPAMENTO)
 * ==================================================
 */

.selection-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border: 1px solid #e0e0e0;
    border-radius: 12px;
    /* Borda arredondada */
    padding: 2.5rem 2rem;
    min-height: 180px;

    text-decoration: none;
    color: #333;
    background-color: #fcfcfc;

    transition: all 0.2s ease-in-out;
}

/* Ícone dentro do card */
.selection-card .icon {
    font-size: 2.5rem;
    /* Tamanho do ícone */
    margin-bottom: 1rem;
    color: #009ef7;
    /* Cor primária (azul) */
}

/* Texto dentro do card */
.selection-card .text {
    font-size: 1.1rem;
    font-weight: 600;
}

/*
 * Efeito de Hover (Passar o mouse)
 */
.selection-card:hover {
    transform: translateY(-5px) scale(1.02);
    /* Levanta o card */
    box-shadow: 0 10px 25px rgba(0, 99, 178, 0.1);
    /* Sombra azulada */
    border-color: #009ef7;
    background-color: #fff;
    color: #009ef7;
}

/* * ===============================================
 * ESTADO ATIVO (SELECIONADO)
 * (Adicione isso ao seu CSS, junto com o .selection-card)
 * ===============================================
 */

.selection-card.active {
    background-color: #6c757d;
    /* Cor do btn-secondary do Bootstrap */
    border-color: #6c757d;
    color: #fff;
    /* Texto branco */

    /* Mantém os efeitos de "levantar" */
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Muda a cor do ícone também quando estiver ativo */
.selection-card.active .icon {
    color: #fff;
}

/* * Ajusta o hover para não afetar o card ativo 
 */
.selection-card:not(.active):hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 99, 178, 0.1);
    border-color: #009ef7;
    background-color: #fff;
    color: #009ef7;
}

/* (Opcional) Ajusta o hover do ícone */
.selection-card:not(.active):hover .icon {
    color: #009ef7;
}

/*
 * ==================================================
 * ESTILO DOS CARDS DE SELEÇÃO (SALA / EQUIPAMENTO)
 * ==================================================
 */

.selection-card {
    /* ... (restante do CSS do selection-card) ... */
}

/* Ícone dentro do card */
.selection-card .icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    /* ANTES: color: #009ef7; */
    color: #888;
    /* Um cinza mais suave para o estado normal */
}

/*
 * Efeito de Hover (Passar o mouse)
 */
.selection-card:hover {
    /* ... (restante do CSS do hover) ... */
    border-color: #777;
    /* Um cinza mais escuro no hover */
    /* ANTES: color: #009ef7; */
    color: #444;
    /* Texto um pouco mais escuro no hover */
}

/* (Opcional) Ajusta o hover do ícone */
.selection-card:not(.active):hover .icon {
    /* ANTES: color: #009ef7; */
    color: #444;
    /* Ícone na mesma cor do texto no hover */
}


/*
 * ===============================================
 * ESTADO ATIVO (SELECIONADO)
 * ===============================================
 */

.selection-card.active {
    background-color: #6c757d;
    /* Cor do btn-secondary (cinza escuro) */
    border-color: #6c757d;
    color: #fff;
    /* Texto branco */

    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Muda a cor do ícone também quando estiver ativo */
.selection-card.active .icon {
    color: #fff;
    /* Ícone branco quando ativo */
}

/*
 * ==================================================
 * ESTILO DO ÍCONE DE ERRO (ACESSO NEGADO)
 * ==================================================
 */

.error-icon {
    font-size: 6rem;
    /* Tamanho GRANDE do ícone */
    color: #555;
    /* Tom de cinza escuro (neutro) */

    /* Animação "pop-in" (reutilizada da tela de confirmação) */
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: scale(1);
}

/* * (Se você ainda não tem a animação popIn, adicione-a)
 */
@keyframes popIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}


/* ==========================================================
   ESTILOS GERAIS DO DASHBOARD
   ========================================================== */

/* Cards de Estatísticas */
.dashboard-stat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.75rem;
    border-radius: 0.75rem;
    /* Mais arredondado */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.dashboard-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.dashboard-stat-card .icon-wrapper {
    font-size: 2.5rem;
    opacity: 0.6;
}

.dashboard-stat-card .details {
    text-align: right;
}

.dashboard-stat-card .value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.dashboard-stat-card .label {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.8;
    margin-top: 0.25rem;
}

/* Cores de fundo mais suaves (subtle) */
.bg-primary-subtle {
    background-color: #cfe2ff !important;
}

/* Bootstrap's primary-subtle */
.text-primary {
    color: #0d6efd !important;
}

.bg-warning-subtle {
    background-color: #fff3cd !important;
}

/* Bootstrap's warning-subtle */
.text-warning {
    color: #ffc107 !important;
}

.bg-success-subtle {
    background-color: #d1e7dd !important;
}

/* Bootstrap's success-subtle */
.text-success {
    color: #198754 !important;
}

.bg-info-subtle {
    background-color: #cff4fc !important;
}

/* Bootstrap's info-subtle