/* ==========================================
Agenda do Auditório
style.css - versão aplicativo
========================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

:root{

--primary:#1565C0;
--primary-light:#E3F2FD;

--background:#F4F7FB;

--card:#FFFFFF;

--text:#263238;

--gray:#78909C;

--green:#2E7D32;

--green-bg:#E8F5E9;

--red:#C62828;

--red-bg:#FFEBEE;

--shadow:0 8px 25px rgba(0,0,0,.08);

--radius:22px;


}

body{

font-family:'Inter',sans-serif;

background:var(--background);

color:var(--text);


}

/* ==================================
Aplicativo
================================== */

.app{

max-width:520px;

margin:auto;

padding:16px;

min-height:100vh;


}

/* ==================================
Cabeçalho
================================== */

.app-header{

background:linear-gradient(
    135deg,
    #1976D2,
    #0D47A1
);

color:white;

border-radius:26px;

padding:22px;

display:flex;

align-items:center;

gap:15px;

box-shadow:var(--shadow);

margin-bottom:20px;


}

.app-header .icon{

background:rgba(255,255,255,.18);

width:55px;

height:55px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;


}

.app-header h1{

font-size:26px;

font-weight:700;


}

.app-header p{

margin-top:5px;

opacity:.85;

font-size:14px;


}

/* ==================================
Cards
================================== */

.calendar-card,
.schedule-card{

background:var(--card);

border-radius:var(--radius);

padding:18px;

margin-bottom:18px;

box-shadow:var(--shadow);


}

.section-title h2,
.schedule-title h2{

font-size:19px;

margin-bottom:15px;


}

/* ==================================
Calendário
================================== */

#calendar{

width:100%;


}

.fc{

font-size:13px;


}

.fc .fc-toolbar{

margin-bottom:15px;


}

.fc .fc-toolbar-title{

font-size:18px;

font-weight:600;


}

.fc-button{

background:var(--primary)!important;

border:none!important;

border-radius:10px!important;


}

.fc-daygrid-day{

border-radius:12px;


}

.fc-daygrid-day:hover{

background:#E3F2FD;

cursor:pointer;


}

.fc-day-selected{

background:#BBDEFB!important;

border-radius:12px;


}

/* Eventos */

.fc-bg-event{

opacity:1!important;

border-radius:10px;


}

/* ==================================
Legenda
================================== */

.legend{

display:flex;

justify-content:center;

gap:25px;

margin-top:15px;

color:#607D8B;

font-size:13px;


}

.legend div{

display:flex;

align-items:center;

gap:7px;


}

.legend span{

width:12px;

height:12px;

border-radius:50%;


}

.legend .red{

background:#E53935;


}

.legend .green{

background:#43A047;


}

/* ==================================
Horários
================================== */

.schedule-title{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:15px;


}

#selectedDate{

font-size:13px;

color:var(--gray);

text-align:right;


}

#schedule{

display:flex;

flex-direction:column;

gap:12px;


}

.schedule-item{

padding:16px;

border-radius:16px;

display:flex;

justify-content:space-between;

align-items:center;

font-size:14px;

transition:.25s;


}

.schedule-item:hover{

transform:translateY(-2px);


}

.schedule-item.available{

background:var(--green-bg);

color:var(--green);


}

.schedule-item.busy{

background:var(--red-bg);

color:var(--red);


}

.empty{

background:#F5F5F5;

padding:20px;

border-radius:15px;

color:#90A4AE;

text-align:center;

font-size:14px;


}

/* ==================================
Botão inferior
================================== */

.bottom-action{

position:sticky;

bottom:15px;

margin-top:25px;


}

.btn{

display:block;

background:var(--primary);

color:white;

text-decoration:none;

text-align:center;

padding:17px;

border-radius:18px;

font-weight:600;

font-size:16px;

box-shadow:

0 10px 25px rgba(21,101,192,.35);

transition:.25s;


}

.btn:hover{

background:#0D47A1;

transform:translateY(-2px);


}

.btn:disabled{

background:#B0BEC5;

cursor:not-allowed;

box-shadow:none;

transform:none;


}

/* ==================================
Animação
================================== */

.fade{

animation:

aparecer .25s ease;


}

@keyframes aparecer{

from{

opacity:0;

transform:translateY(10px);


}

to{

opacity:1;

transform:translateY(0);


}

}

/* ==================================
Celular
================================== */

@media(max-width:600px){

.app{

padding:12px;


}

.app-header h1{

font-size:22px;


}

.fc .fc-toolbar-title{

font-size:16px;


}

}

/* ==========================================
MODAL DE AGENDAMENTO
========================================== */

.modal-overlay {

position: fixed;

inset: 0;

background:
    rgba(0, 0, 0, 0.55);

display: flex;

align-items: center;

justify-content: center;

z-index: 9999;

padding: 20px;


}

.modal-agendamento {

position: relative;

width: 100%;

max-width: 460px;

background: #ffffff;

border-radius: 18px;

padding: 28px;

box-shadow:
    0 20px 50px
    rgba(0, 0, 0, 0.25);

animation:
    aparecerModal
    0.2s
    ease-out;


}

@keyframes aparecerModal {

from {

    opacity: 0;

    transform:
        translateY(15px)
        scale(0.98);

}

to {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

}


}

.modal-agendamento h2 {

margin-top: 0;

margin-bottom: 24px;

color: #1565C0;

font-size: 24px;


}

.modal-fechar {

position: absolute;

top: 12px;

right: 15px;

border: none;

background: transparent;

font-size: 30px;

color: #777;

cursor: pointer;


}

.campo-formulario {

margin-bottom: 18px;


}

.campo-formulario label {

display: block;

margin-bottom: 7px;

font-weight: 600;

color: #333;


}

.campo-formulario input,

.campo-formulario select {

width: 100%;

box-sizing: border-box;

padding: 12px 14px;

border: 1px solid #d5dce5;

border-radius: 9px;

background: #fff;

font-size: 16px;

color: #333;


}

.campo-formulario input:focus,

.campo-formulario select:focus {

outline: none;

border-color: #1565C0;

box-shadow:
    0 0 0 3px
    rgba(21, 101, 192, 0.12);


}

.campo-formulario input:disabled {

background: #f1f4f8;

color: #555;


}

.botoes-formulario {

display: flex;

gap: 10px;

margin-top: 24px;


}

.btn-cancelar,

.btn-confirmar {

flex: 1;

padding: 13px 15px;

border: none;

border-radius: 9px;

font-size: 15px;

font-weight: 600;

cursor: pointer;


}

.btn-cancelar {

background: #e9edf2;

color: #444;


}

.btn-confirmar {

background: #1565C0;

color: white;


}

.btn-confirmar:hover {

background: #0D47A1;


}

.btn-confirmar:disabled {

opacity: 0.6;

cursor: not-allowed;


}

.mensagem-agendamento {

margin-top: 10px;

font-size: 14px;


}

.mensagem-agendamento.erro {

color: #c62828;

background: #ffebee;

padding: 10px;

border-radius: 8px;


}

.mensagem-agendamento.sucesso {

color: #2e7d32;

background: #e8f5e9;

padding: 16px;

border-radius: 10px;


}

.sucesso-agendamento {

display: flex;

align-items: center;

gap: 10px;

font-size: 16px;


}

.sucesso-agendamento:first-letter {

font-size: 24px;


}

#btnAgendar {

width: 100%;

display: block;

background: linear-gradient(
    135deg,
    #1976D2,
    #0D47A1
);

color: #ffffff;

border: none;

border-radius: 18px;

padding: 17px 20px;

margin-top: 18px;

font-family: 'Inter', sans-serif;

font-size: 18px;

font-weight: 700;

text-align: center;

cursor: pointer;

box-shadow:
    0 8px 20px
    rgba(21,101,192,.25);

transition:
    .25s ease;


}

#btnAgendar:hover {

background: linear-gradient(
    135deg,
    #1565C0,
    #0D47A1
);

transform: translateY(-2px);

box-shadow:
    0 10px 25px
    rgba(21,101,192,.35);


}

#btnAgendar:active {

transform: translateY(0);


}