/* Pequenos ajustes que o Tailwind (via CDN) sozinho não cobre. */

.input {
    display: block;
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 1rem;
    background-color: #fff;
}

.input:focus {
    outline: 2px solid #0d6e64;
    outline-offset: 1px;
    border-color: #0d6e64;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background-color: #0d6e64;
    color: #fff;
    font-weight: 600;
    padding: 0.6rem 1.1rem;
    border-radius: 0.6rem;
    font-size: 0.95rem;
}

.btn-primary:hover {
    background-color: #0b5c53;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background-color: #e2e8f0;
    color: #1e293b;
    font-weight: 600;
    padding: 0.6rem 1.1rem;
    border-radius: 0.6rem;
    font-size: 0.95rem;
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background-color: #dc2626;
    color: #fff;
    font-weight: 600;
    padding: 0.6rem 1.1rem;
    border-radius: 0.6rem;
    font-size: 0.95rem;
}

.card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem;
}

/* --- Grade de horários (agendamento) --------------------------------------
   Definidas aqui, e não via utilitários do Tailwind, porque o Tailwind via
   CDN só gera CSS para as classes que existem no HTML inicial da página. Os
   botões de horário são criados dinamicamente por JavaScript, então classes
   como bg-teal-700 nunca ganhavam CSS — o texto branco ficava sobre fundo
   branco (invisível). Com classes reais aqui, o estado selecionado sempre
   aparece corretamente. */
.slot-btn {
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    padding: 0.5rem 0.25rem;
    font-size: 0.75rem;
    line-height: 1.1;
    text-align: center;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    transition: background-color .12s, color .12s;
}
.slot-btn:hover { background: #ccfbf1; }

.slot-btn--extends {
    background: #fffbeb;
    color: #92400e;
    border-color: #fcd34d;
}
.slot-btn--extends:hover { background: #fef3c7; }

.slot-btn--selected,
.slot-btn--selected:hover {
    background: #0d6e64;
    color: #fff;
    border-color: #0d6e64;
}

.slot-btn--disabled,
.slot-btn--disabled:hover {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* --- Calendário: visão de semana (grade de horários) ----------------------
   Grade de horas server-rendered. Os eventos são posicionados por top/height
   em pixels (calculados no Django), então usam estilo inline; o resto é CSS
   real aqui para não depender de utilitários do Tailwind gerados em runtime. */
.cal-week-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cal-week {
    display: grid;
    grid-template-columns: 44px repeat(7, minmax(84px, 1fr));
    min-width: 640px;
}
.cal-corner { border-bottom: 1px solid #e2e8f0; }
.cal-head {
    text-align: center;
    font-size: .68rem;
    color: #64748b;
    padding: .3rem 0;
    border-bottom: 1px solid #e2e8f0;
    border-left: 1px solid #f1f5f9;
}
.cal-head--today { background: #f0fdfa; color: #0d6e64; font-weight: 600; }
.cal-head-day { font-size: .95rem; font-weight: 600; color: #0f172a; }
.cal-axis-cell {
    height: 60px;
    font-size: .62rem;
    color: #94a3b8;
    text-align: right;
    padding-right: 4px;
    box-sizing: border-box;
}
.cal-col {
    position: relative;
    border-left: 1px solid #f1f5f9;
    background-image: repeating-linear-gradient(
        to bottom, #f1f5f9 0, #f1f5f9 1px, transparent 1px, transparent 60px);
}
.cal-event {
    position: absolute;
    left: 3px;
    right: 3px;
    border-radius: 6px;
    padding: 2px 4px;
    font-size: .62rem;
    line-height: 1.15;
    overflow: hidden;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, .12);
    text-decoration: none;
}
.cal-event-time { font-weight: 600; }