/* Interface Endotech. Cores e medidas ficam só nos tokens; telas não definem cor própria. */
@font-face { font-family: Barlow; font-weight: 400; font-display: swap; src: url('../vendor/barlow/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: Barlow; font-weight: 500; font-display: swap; src: url('../vendor/barlow/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: Barlow; font-weight: 600; font-display: swap; src: url('../vendor/barlow/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: Barlow; font-weight: 700; font-display: swap; src: url('../vendor/barlow/barlow-latin-700-normal.woff2') format('woff2'); }

:root, [data-bs-theme="light"] {
    --endo-laranja: #ec6608;
    /* Laranja da marca com branco fica em 3,3:1; botões usam este tom para chegar a 4,5:1. */
    --endo-acao: #c94f04;
    --endo-acao-forte: #a84203;
    --endo-acao-suave: #fdf0e6;
    --endo-texto-acao: #a84203;
    --endo-topo: #3a3a39;
    --endo-fundo: #f5f5f4;
    --endo-superficie: #ffffff;
    --endo-superficie-2: #f0f0ee;
    --endo-borda: #dfdfdc;
    --vidro: rgba(255, 255, 255, .68);
    --vidro-forte: rgba(255, 255, 255, .86);
    --vidro-borda: rgba(255, 255, 255, .75);
    --vidro-linha: rgba(60, 60, 58, .14);
    --vidro-sombra: 0 8px 28px rgba(60, 50, 40, .1);
    --fundo-1: rgba(236, 102, 8, .2);
    --fundo-2: rgba(87, 87, 86, .18);
    --endo-texto: #232322;
    --endo-texto-2: #5c5c5a;
    --endo-ok-fundo: #e5f4ea; --endo-ok-texto: #17663a;
    --endo-pend-fundo: #fdf3d7; --endo-pend-texto: #7a5500;
    --endo-canc-fundo: #fbe7e7; --endo-canc-texto: #9c2222;
    --bs-body-bg: var(--endo-fundo);
    --bs-body-color: var(--endo-texto);
    --bs-secondary-color: var(--endo-texto-2);
    --bs-border-color: var(--endo-borda);
    --bs-link-color-rgb: 168, 66, 3;
    --bs-link-hover-color-rgb: 130, 50, 0;
    --bs-font-sans-serif: Barlow, 'Segoe UI', system-ui, sans-serif;
}
[data-bs-theme="dark"] {
    --endo-acao: #c94f04;
    --endo-acao-forte: #e0620f;
    --endo-acao-suave: #3a2413;
    --endo-texto-acao: #ff9d57;
    --endo-topo: #1c1c1b;
    --endo-fundo: #141413;
    --endo-superficie: #1f1f1e;
    --endo-superficie-2: #2a2a29;
    --endo-borda: #3a3a38;
    --vidro: rgba(36, 36, 35, .62);
    --vidro-forte: rgba(36, 36, 35, .88);
    --vidro-borda: rgba(255, 255, 255, .1);
    --vidro-linha: rgba(255, 255, 255, .12);
    --vidro-sombra: 0 8px 28px rgba(0, 0, 0, .35);
    --fundo-1: rgba(236, 102, 8, .16);
    --fundo-2: rgba(120, 120, 118, .12);
    --endo-texto: #f1f1ef;
    --endo-texto-2: #b3b3af;
    --endo-ok-fundo: #16351f; --endo-ok-texto: #84dba0;
    --endo-pend-fundo: #3a2e0c; --endo-pend-texto: #f2cf6a;
    --endo-canc-fundo: #401a1a; --endo-canc-texto: #f5a3a3;
    --bs-body-bg: var(--endo-fundo);
    --bs-body-color: var(--endo-texto);
    --bs-secondary-color: var(--endo-texto-2);
    --bs-border-color: var(--endo-borda);
    --bs-link-color-rgb: 255, 157, 87;
    --bs-link-hover-color-rgb: 255, 185, 135;
}

/* O rodapé fica no fim da janela mesmo em página curta. */
body { font-family: var(--bs-font-sans-serif); font-size: 1rem; min-height: 100vh; display: flex; flex-direction: column; }
/* Camada fixa em vez de background-attachment, que pesa na rolagem do celular. O vidro precisa de cor atrás para aparecer. */
body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(38rem 30rem at 92% -5%, var(--fundo-1), transparent 70%),
        radial-gradient(34rem 30rem at 0% 45%, var(--fundo-2), transparent 70%),
        radial-gradient(36rem 28rem at 75% 105%, var(--fundo-1), transparent 70%),
        var(--endo-fundo);
}
.vidro, .cartao, .modal-content, .flatpickr-calendar {
    background: var(--vidro); border: 1px solid var(--vidro-borda); box-shadow: var(--vidro-sombra);
    -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
/* Janela sobre a página: com menos opacidade, o texto de trás disputa a leitura com o formulário. */
.modal-content, .flatpickr-calendar { background: var(--endo-superficie); }
.so-escuro { display: none !important; }
[data-bs-theme="dark"] .so-claro { display: none !important; }
[data-bs-theme="dark"] .so-escuro { display: block !important; }
/* Sem suporte a desfoque, ou se a pessoa pediu menos transparência, o texto não pode depender do vidro. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vidro, .cartao, .app-topo { background: var(--endo-superficie); }
}
@media (prefers-reduced-transparency: reduce) {
    .vidro, .cartao, .app-topo, .modal-content { background: var(--endo-superficie); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
h1, .h1 { font-size: 1.5rem; font-weight: 600; margin: 0; }
h2, .h2 { font-size: 1.15rem; font-weight: 600; margin: 0; }
h3, .h3 { font-size: 1rem; font-weight: 600; margin: 0; }
label, .form-label { font-weight: 500; font-size: .9rem; margin-bottom: .3rem; }
.form-text { font-size: .8rem; }
:focus-visible { outline: 2px solid var(--endo-texto-acao); outline-offset: 2px; }

/* --- Bootstrap com a marca --- */
.btn-primary {
    --bs-btn-bg: var(--endo-acao); --bs-btn-border-color: var(--endo-acao); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--endo-acao-forte); --bs-btn-hover-border-color: var(--endo-acao-forte); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--endo-acao-forte); --bs-btn-active-border-color: var(--endo-acao-forte); --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--endo-acao); --bs-btn-disabled-border-color: var(--endo-acao); --bs-btn-disabled-color: #fff;
    font-weight: 600;
}
.btn-outline-secondary {
    --bs-btn-color: var(--endo-texto); --bs-btn-border-color: var(--endo-borda);
    --bs-btn-hover-bg: var(--endo-superficie-2); --bs-btn-hover-color: var(--endo-texto); --bs-btn-hover-border-color: var(--endo-borda);
    --bs-btn-active-bg: var(--endo-acao-suave); --bs-btn-active-color: var(--endo-texto-acao); --bs-btn-active-border-color: var(--endo-texto-acao);
}
.btn-check:checked + .btn-outline-secondary { background: var(--endo-acao-suave); color: var(--endo-texto-acao); border-color: var(--endo-texto-acao); }
.form-control, .form-select { background-color: var(--vidro-forte); border-color: var(--vidro-linha); }
.form-control:focus, .form-select:focus { border-color: var(--endo-laranja); box-shadow: 0 0 0 .2rem rgba(236, 102, 8, .2); background-color: var(--endo-superficie); color: var(--endo-texto); }
.form-control:disabled { background-color: var(--endo-superficie-2); }
.form-check-input:checked { background-color: var(--endo-acao); border-color: var(--endo-acao); }
.modal-header, .modal-footer { border-color: var(--vidro-linha); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--endo-texto); --bs-table-border-color: var(--vidro-linha); --bs-table-hover-bg: var(--vidro-linha); --bs-table-striped-bg: transparent; margin: 0; }
.table thead th { font-size: .8rem; font-weight: 600; color: var(--endo-texto-2); white-space: nowrap; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--endo-acao); --bs-nav-link-color: var(--endo-texto-2); --bs-nav-link-hover-color: var(--endo-texto); gap: .25rem; }
.flatpickr-calendar { color: var(--endo-texto); }
.flatpickr-day { color: var(--endo-texto); }
.flatpickr-day.selected { background: var(--endo-acao); border-color: var(--endo-acao); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--endo-texto-2); opacity: .55; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month input.cur-year, .flatpickr-current-month .flatpickr-monthDropdown-months, span.flatpickr-weekday { color: var(--endo-texto); fill: var(--endo-texto); background: transparent; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--endo-texto); fill: var(--endo-texto); }

/* --- Estrutura --- */
.app-topo {
    position: sticky; top: 0; z-index: 1020; background: var(--vidro-forte); border-bottom: 1px solid var(--vidro-linha);
    -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
.app-marca { display: block; text-decoration: none; }
.app-marca img { display: block; height: 2.6rem; width: auto; }
.app-topo .nav-link { color: var(--endo-texto); font-weight: 500; border-radius: .375rem; padding: .4rem .7rem; }
.app-topo .nav-link:hover { color: var(--endo-texto); background: var(--vidro-linha); }
.app-topo .nav-link.active { color: var(--endo-texto-acao); background: var(--endo-acao-suave); }
.app-topo .navbar-toggler { border-color: var(--vidro-linha); }
.app-icone { background: none; border: 1px solid transparent; color: var(--endo-texto); border-radius: .375rem; padding: .35rem .55rem; line-height: 1; }
.app-icone:hover { background: var(--vidro-linha); }
.app-principal { flex: 1 0 auto; width: 100%; padding-block: 1.25rem 3rem; }
.app-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem 1rem; padding: .75rem 1rem; border-top: 1px solid var(--vidro-linha); font-size: .8rem; color: var(--endo-texto-2); }
.app-rodape a { display: inline-flex; align-items: center; gap: .3rem; color: inherit; text-decoration: none; }
.app-rodape a:hover strong { text-decoration: underline; }
.app-rodape strong { font-weight: 600; color: var(--endo-texto); }
/* O logo tem texto azul-escuro; a base branca mantém a leitura também no tema escuro. */
.powered { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .25rem .45rem; background: #fff; border: 1px solid var(--endo-borda); border-radius: .4rem; font-size: .62rem; line-height: 1; color: #5c5c5a; }
.powered img { display: block; height: 1.4rem; width: auto; }
.powered-linha { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
.app-cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.app-subtitulo { color: var(--endo-texto-2); font-size: .9rem; margin: .1rem 0 0; }
.cartao { border-radius: 1rem; }
.cartao-corpo { padding: 1.25rem; }
.cartao-titulo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--vidro-linha); }
.secao-form { border-top: 1px solid var(--vidro-linha); padding-top: 1.25rem; margin-top: 1.25rem; }

.novidades-logo { display: block; height: 3.5rem; width: auto; margin: 0 auto 1rem; }
.novidades-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.novidades-lista li { display: flex; gap: .6rem; }
.novidades-lista i { color: var(--endo-texto-acao); font-size: 1.1rem; line-height: 1.4; }
.dados-reserva { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .75rem; margin-bottom: 1rem; }
.dados-reserva dt { font-weight: 500; color: var(--endo-texto-2); }
.dados-reserva dd { margin: 0; overflow-wrap: anywhere; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.serie-lista { display: flex; flex-direction: column; gap: .35rem; max-height: 15rem; overflow-y: auto; padding: .6rem .8rem; border: 1px solid var(--vidro-linha); border-radius: .5rem; }

/* --- Filtros --- */
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .7rem 1.25rem; border-bottom: 1px solid var(--vidro-linha); }
.filtros .form-select, .filtros .form-control { width: auto; min-width: 9rem; flex: 0 1 auto; }
.filtros .filtro-busca { flex: 1 1 12rem; }
.filtros .form-check { margin: 0; }
.tabela-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 1.25rem; border-top: 1px solid var(--vidro-linha); font-size: .85rem; color: var(--endo-texto-2); }
.tabela-rodape:empty { display: none; }
.tabela-vazia { padding: 1.5rem 1.25rem; margin: 0; text-align: center; color: var(--endo-texto-2); }
.alert { border: 0; border-left: 4px solid var(--endo-laranja); background: var(--endo-acao-suave); color: var(--endo-texto); border-radius: .5rem; }

.status { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.status-confirmada, .status-livre, .status-ativo { background: var(--endo-ok-fundo); color: var(--endo-ok-texto); }
.status-pendente { background: var(--endo-pend-fundo); color: var(--endo-pend-texto); }
.status-cancelada, .status-ocupada, .status-bloqueado { background: var(--endo-canc-fundo); color: var(--endo-canc-texto); }
.linha-cancelada { color: var(--endo-texto-2); }
.linha-cancelada td { text-decoration-color: var(--endo-texto-2); }

/* --- Telas de acesso --- */
.acesso { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 1rem 1.5rem; gap: 1rem; }
.acesso > .powered { position: absolute; top: .75rem; right: 1rem; }
.acesso-marca { display: block; }
.acesso-marca img { display: block; height: 5.5rem; width: auto; }
.acesso-cartao { width: 100%; max-width: 26rem; }
.acesso-cartao-largo { max-width: 42rem; }
.caixa-termos { max-height: 20rem; overflow-y: auto; padding: .9rem; background: var(--endo-superficie-2); border: 1px solid var(--endo-borda); border-radius: .5rem; font-size: .85rem; }
.caixa-termos-curta { max-height: 8rem; }

/* --- Agenda por sala --- */
.agenda-controles { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.agenda-data { width: auto; min-width: 10rem; }
.agenda-dia-texto { font-weight: 600; text-transform: capitalize; padding: .75rem 1.25rem; border-bottom: 1px solid var(--vidro-linha); }
.agenda-rolagem { overflow-x: auto; }
.agenda-grade { --agenda-sala: 12rem; min-width: 62rem; }
.agenda-linha { display: grid; grid-template-columns: var(--agenda-sala) minmax(0, 1fr); border-bottom: 1px solid var(--vidro-linha); }
.agenda-linha:last-child { border-bottom: 0; }
/* Fica sobre a grade ao rolar para o lado: aqui o fundo precisa ser sólido. */
.agenda-sala { position: sticky; left: 0; z-index: 3; padding: .6rem .8rem; background: var(--vidro-forte); border-right: 1px solid var(--vidro-linha); min-width: 0; }
.agenda-sala-nome { font-weight: 600; display: flex; align-items: center; gap: .4rem; overflow-wrap: anywhere; }
.agenda-sala-cor { width: .65rem; height: .65rem; border-radius: 50%; flex: none; }
.agenda-sala-info { font-size: .8rem; color: var(--endo-texto-2); margin: .1rem 0 .3rem; }
.agenda-horas { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); }
.agenda-horas span { font-size: .75rem; color: var(--endo-texto-2); padding: .4rem 0 .4rem .3rem; border-left: 1px solid var(--vidro-linha); }
.agenda-faixa { position: relative; display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); grid-auto-rows: minmax(3.4rem, 1fr); min-height: 4rem; }
.agenda-slot { display: block; border-left: 1px solid var(--vidro-linha); min-width: 0; }
.agenda-slot.meia-hora { border-left-color: transparent; }
a.agenda-slot:hover, a.agenda-slot:focus-visible { background: var(--endo-acao-suave); }
.agenda-slot.passado { background: var(--vidro-linha); opacity: .45; }
.agenda-reserva {
    z-index: 2; margin: .2rem .1rem; padding: .25rem .4rem; min-width: 0; overflow: hidden; text-align: left; line-height: 1.2;
    border: 1px solid var(--vidro-linha); border-left: 4px solid var(--agenda-cor, var(--endo-laranja)); border-radius: .4rem;
    background: var(--vidro-forte); color: var(--endo-texto); font-size: .8rem;
}
.agenda-reserva:hover { border-color: var(--endo-texto-2); border-left-color: var(--agenda-cor, var(--endo-laranja)); }
.agenda-reserva.pendente { background: var(--endo-pend-fundo); color: var(--endo-pend-texto); border-style: dashed; border-left-style: solid; }
/* Bloco de 1 hora tem cerca de 60 px: o texto quebra em linhas em vez de virar "Tela ...". */
.agenda-reserva strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 600; overflow-wrap: anywhere; }
.agenda-reserva small { display: block; font-weight: 400; font-size: .7rem; overflow: hidden; }
.agenda-lista-item strong { -webkit-line-clamp: 3; }
.agenda-agora { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--endo-canc-texto); z-index: 2; pointer-events: none; }
.agenda-aviso { padding: 1.5rem 1.25rem; color: var(--endo-texto-2); text-align: center; }
.agenda-legenda { display: flex; flex-wrap: wrap; gap: 1rem; padding: .6rem 1.25rem; border-top: 1px solid var(--vidro-linha); font-size: .8rem; color: var(--endo-texto-2); }
.agenda-legenda i { display: inline-block; width: .9rem; height: .7rem; border-radius: .15rem; margin-right: .3rem; border: 1px solid var(--endo-borda); vertical-align: -.05rem; }
.legenda-pendente { background: var(--endo-pend-fundo); border-style: dashed !important; }
.legenda-confirmada { background: var(--endo-superficie-2); }

.agenda-lista-sala { padding: .9rem 1rem; border-bottom: 1px solid var(--vidro-linha); }
.agenda-lista-sala:last-child { border-bottom: 0; }
.agenda-lista-itens { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
.agenda-lista-item { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.75rem; padding: .4rem .6rem; border-radius: .4rem; font-size: .9rem; text-align: left; text-decoration: none; }
a.agenda-lista-item { border: 1px dashed var(--endo-borda); color: var(--endo-texto-acao); font-weight: 500; }
a.agenda-lista-item:hover { background: var(--endo-acao-suave); }
button.agenda-lista-item { display: block; height: auto; border-right: 1px solid var(--endo-borda); }

/* FullCalendar */
.fc { --fc-border-color: var(--endo-borda); --fc-page-bg-color: var(--endo-superficie); --fc-neutral-bg-color: var(--endo-superficie-2); --fc-today-bg-color: var(--endo-acao-suave); --fc-button-bg-color: var(--endo-superficie-2); --fc-button-border-color: var(--endo-borda); --fc-button-text-color: var(--endo-texto); --fc-button-hover-bg-color: var(--endo-borda); --fc-button-hover-border-color: var(--endo-borda); --fc-button-active-bg-color: var(--endo-acao); --fc-button-active-border-color: var(--endo-acao); font-size: .9rem; }
.fc .fc-button-primary:not(:disabled).fc-button-active { color: #fff; }
.fc .fc-toolbar-title { font-size: 1.1rem; font-weight: 600; text-transform: capitalize; }
.fc .fc-daygrid-day { cursor: pointer; }
.fc a { color: inherit; text-decoration: none; }

/* --- Painel --- */
.painel-abas { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .25rem; }
.painel-abas .nav-link { white-space: nowrap; font-weight: 500; }
.painel-busca { max-width: 16rem; }
.registro { max-height: 26rem; overflow-y: auto; }
.registro thead th { position: sticky; top: 0; z-index: 1; }
.perfil-avatar { font-size: 3.25rem; color: var(--endo-texto-2); line-height: 1; }

/* Em tela estreita cada linha vira um bloco com o nome da coluna ao lado do valor. */
@media (max-width: 767.98px) {
    .app-principal { padding-top: 1rem; }
    .powered { padding: .15rem .3rem; font-size: .55rem; gap: .1rem; }
    .powered img { height: .95rem; }
    .agenda-controles { width: 100%; }
    .agenda-data { flex: 1 1 8rem; min-width: 0; }
    .tabela-blocos thead { display: none; }
    .filtros { padding-inline: 1rem; }
    .filtros .form-select { flex: 1 1 8rem; min-width: 0; }
    .app-marca img { height: 2.25rem; }
    .acesso-marca img { height: 4.5rem; }
    .tabela-blocos tr { display: block; padding: .6rem 1rem; border-bottom: 1px solid var(--vidro-linha); }
    .tabela-blocos tr:last-child { border-bottom: 0; }
    .tabela-blocos td { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; border: 0; text-align: right; }
    .tabela-blocos td[data-rotulo]::before { content: attr(data-rotulo); color: var(--endo-texto-2); font-size: .85rem; text-align: left; }
    .tabela-blocos td.vazio { display: block; text-align: center; }
    .fc .fc-toolbar { flex-direction: column; gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }