/* =========================================================
   PCDental - Estilos gerais do sistema
   ========================================================= */

:root {
	--pcdental-azul-escuro: #003078;
	--pcdental-azul: #0877c9;
	--pcdental-azul-claro: #35b7f3;

	--pcdental-fundo: #f5f7fa;
	--pcdental-branco: #ffffff;

	--pcdental-texto: #263238;
	--pcdental-texto-suave: #6b7280;

	--pcdental-borda: #e3e8ef;

	--pcdental-sucesso: #198754;
	--pcdental-perigo: #dc3545;
}

/* =========================================================
   Reset básico
   ========================================================= */

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: var(--pcdental-fundo);
	color: var(--pcdental-texto);
}

/* =========================================================
   Estrutura principal
   ========================================================= */









/* =========================================================
   Conteúdo
   ========================================================= */


/* =========================================================
   Barra superior
   ========================================================= */




/* =========================================================
   Área da página
   ========================================================= */

.pcd-content {
	padding: 30px;
}

.pcd-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;

	margin-bottom: 24px;
}

.pcd-page-title h1 {
	margin: 0 0 5px 0;

	font-size: 28px;
	color: var(--pcdental-azul-escuro);
}

.pcd-page-title p {
	margin: 0;
	color: var(--pcdental-texto-suave);
}

/* =========================================================
   Botões
   ========================================================= */

.pcd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	min-height: 42px;

	padding: 9px 18px;

	border: 0;
	border-radius: 8px;

	font-size: 14px;
	font-weight: 600;

	text-decoration: none;
	cursor: pointer;

	transition: opacity 0.2s,
		transform 0.1s;
}

.pcd-btn:hover {
	opacity: 0.90;
}

.pcd-btn:active {
	transform: translateY(1px);
}

.pcd-btn-primary {
	background-color: var(--pcdental-azul);
	color: var(--pcdental-branco);
}

.pcd-btn-secondary {
	background-color: var(--pcdental-branco);
	color: var(--pcdental-azul-escuro);

	border: 1px solid var(--pcdental-borda);
}

.pcd-btn-whatsapp {
	background-color: #25d366;
	color: #ffffff;
}

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

.pcd-card {
	background-color: var(--pcdental-branco);

	border: 1px solid var(--pcdental-borda);
	border-radius: 12px;

	padding: 22px;

	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* =========================================================
   Busca
   ========================================================= */

.pcd-search {
	display: flex;
	gap: 10px;

	margin-bottom: 20px;
}

.pcd-search input {
	flex: 1;

	height: 42px;

	padding: 0 14px;

	border: 1px solid var(--pcdental-borda);
	border-radius: 8px;

	font-size: 14px;
}

.pcd-search input:focus {
	outline: none;
	border-color: var(--pcdental-azul-claro);

	box-shadow: 0 0 0 3px rgba(53, 183, 243, 0.15);
}

/* =========================================================
   Tabelas
   ========================================================= */

.pcd-table-wrapper {
	width: 100%;
	overflow-x: auto;
}

.pcd-table {
	width: 100%;
	border-collapse: collapse;
}

.pcd-table th {
	padding: 13px 14px;

	text-align: left;

	font-size: 13px;
	color: var(--pcdental-texto-suave);

	background-color: #f8fafc;

	border-bottom: 1px solid var(--pcdental-borda);
}

.pcd-table td {
	padding: 14px;

	font-size: 14px;

	border-bottom: 1px solid var(--pcdental-borda);
}

.pcd-table tbody tr:hover {
	background-color: #f8fbfe;
}

/* =========================================================
   Status
   ========================================================= */

.pcd-status {
	display: inline-block;

	padding: 5px 9px;

	border-radius: 20px;

	font-size: 12px;
	font-weight: 700;
}

.pcd-status-ativo {
	color: #146c43;
	background-color: #d1e7dd;
}

.pcd-status-inativo {
	color: #842029;
	background-color: #f8d7da;
}

/* =========================================================
   Mensagens
   ========================================================= */

.pcd-message {
	padding: 12px 15px;

	margin-bottom: 20px;

	border-radius: 8px;

	font-size: 14px;
}

.pcd-message-success {
	color: #0f5132;
	background-color: #d1e7dd;
	border: 1px solid #badbcc;
}

.pcd-message-error {
	color: #842029;
	background-color: #f8d7da;
	border: 1px solid #f5c2c7;
}

/* =========================================================
   Formulários
   ========================================================= */

.pcd-form-section {
	margin-bottom: 28px;
}

.pcd-form-section h2 {
	margin: 0 0 18px 0;

	font-size: 18px;
	color: var(--pcdental-azul-escuro);
}

.pcd-form-grid {
	display: grid;

	grid-template-columns:
		repeat(12, minmax(0, 1fr));

	gap: 18px;
	align-items: start;
}

.pcd-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.pcd-field label {
	font-size: 13px;
	font-weight: 600;
}

.pcd-field input,
.pcd-field select,
.pcd-field textarea {
	width: 100%;

	padding: 10px 12px;

	border: 1px solid var(--pcdental-borda);
	border-radius: 8px;

	font: inherit;

	background-color: var(--pcdental-branco);
}

.pcd-field textarea {
	resize: vertical;
	min-height: 100px;
}

.pcd-field input:focus,
.pcd-field select:focus,
.pcd-field textarea:focus {
	outline: none;

	border-color: var(--pcdental-azul-claro);

	box-shadow: 0 0 0 3px rgba(53, 183, 243, 0.15);
}

.pcd-field-error {
	color: var(--pcdental-perigo);
	font-size: 12px;
}

/* =========================================================
   AÇÕES DOS FORMULÁRIOS
   ========================================================= */

.pcd-form-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
}

/* =========================================================
   AÇÕES DE STATUS DO AGENDAMENTO
   ========================================================= */

.pcd-status-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}

.pcd-status-actions form {
	margin: 0;
}

.col-12 {
	grid-column: span 12;
}

.col-8 {
	grid-column: span 8;
}

.col-6 {
	grid-column: span 6;
}

.col-5 {
	grid-column: span 5;
}

.col-4 {
	grid-column: span 4;
}

.col-3 {
	grid-column: span 3;
}

.col-2 {
	grid-column: span 2;
}

.span-12 {
	grid-column: span 12;
}

.span-8 {
	grid-column: span 8;
}

.span-6 {
	grid-column: span 6;
}

.span-5 {
	grid-column: span 5;
}

.span-4 {
	grid-column: span 4;
}

.span-3 {
	grid-column: span 3;
}

.span-2 {
	grid-column: span 2;
}

/* =========================================================
   Responsividade
   ========================================================= */

@media (max-width: 900px) {

	

	.pcd-content {
		padding: 20px;
	}

	.col-8,
	.col-6,
	.col-5,
	.col-4,
	.col-3,
	.col-2,
	.span-8,
	.span-6,
	.span-5,
	.span-4,
	.span-3,
	.span-2 {
		grid-column: span 12;
	}
}


/* Bloco responsivo */
@media (max-width: 700px) {


	.pcd-page-header {
		align-items: flex-start;
		flex-direction: column;
	}


	.pcd-search-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.pcd-search-actions .pcd-btn {
		width: 100%;
	}
}

.pcd-search-actions {
	display: flex;
	align-items: center;
	gap: 12px;

	margin-bottom: 20px;
}

.pcd-search-actions .pcd-search {
	flex: 1;
	margin-bottom: 0;
}

.pcd-search-actions .pcd-btn {
	flex-shrink: 0;
}
















/* =========================================================
   AGENDA - CALENDÁRIO SEMANAL
   ========================================================= */

.pcd-agenda-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 30px;
	margin-bottom: 16px;
}

.pcd-agenda-toolbar h2 {
	margin: 0 0 6px 0;
}

.pcd-agenda-toolbar p {
	margin: 0;
	color: var(--pcdental-texto-suave);
}

.pcd-agenda-navigation {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pcd-agenda-nav-button {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--pcdental-borda);
	border-radius: 8px;
	background: var(--pcdental-branco);
	color: var(--pcdental-azul-escuro);
	font-size: 24px;
	line-height: 1;
	text-decoration: none;
}

.pcd-agenda-nav-button:hover {
	background: var(--pcdental-fundo);
}

.pcd-calendar-card {
	background: var(--pcdental-branco);
	border: 1px solid var(--pcdental-borda);
	border-radius: 14px;
	overflow: hidden;
}

.pcd-calendar-scroll {
	width: 100%;
	overflow-x: auto;
}

.pcd-calendar {
	min-width: 1050px;
}

.pcd-calendar-header {
	display: grid;
	grid-template-columns: 90px repeat(7, minmax(135px, 1fr));
	border-bottom: 1px solid var(--pcdental-borda);
	background: #fafbfd;
}

.pcd-calendar-time-header,
.pcd-calendar-day-header {
	min-height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	border-right: 1px solid var(--pcdental-borda);
}

.pcd-calendar-time-header {
	font-size: 13px;
	font-weight: 600;
	color: var(--pcdental-texto-suave);
}

.pcd-calendar-day-header {
	flex-direction: column;
	gap: 3px;
}

.pcd-calendar-day-name {
	font-size: 13px;
	text-transform: uppercase;
	color: var(--pcdental-texto-suave);
}

.pcd-calendar-day-header strong {
	color: var(--pcdental-azul-escuro);
}

.pcd-calendar-day-selected {
	background: #eaf6fd;
}

.pcd-calendar-row {
	display: grid;
	grid-template-columns: 90px repeat(7, minmax(135px, 1fr));
	height: 90px;
	border-bottom: 1px solid var(--pcdental-borda);
}

.pcd-calendar-row:last-child {
	border-bottom: 0;
}

.pcd-calendar-time {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding-top: 8px;
	border-right: 1px solid var(--pcdental-borda);
	font-size: 12px;
	font-weight: 600;
	color: var(--pcdental-texto-suave);
}

.pcd-calendar-slot {
	position: relative;
	height: 90px;
	border-right: 1px solid var(--pcdental-borda);
	background: var(--pcdental-branco);
}

.pcd-calendar-slot:last-child {
	border-right: 0;
}

.pcd-calendar-slot:hover {
	background: #f5fbff;
}

.pcd-calendar-slot-selected {
	background: #fbfdff;
}

@media (max-width: 700px) {

	.pcd-agenda-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.pcd-agenda-navigation {
		justify-content: space-between;
	}

	.pcd-calendar {
		min-width: 1050px;
	}
}

/* =========================================================
   AGENDA - COMPROMISSOS NO CALENDÁRIO
   ========================================================= */

.pcd-calendar-appointment {
	
	display: block;
    text-decoration: none;
    color: inherit;
	
    position: absolute;

    top: 4px;
    left: 4px;
    right: 4px;

    z-index: 5;

    padding: 7px 8px;

    border-left: 4px solid var(--pcdental-azul);
    border-radius: 7px;

    background: #eaf6fd;

    box-shadow: 0 1px 3px rgba(0, 48, 120, 0.12);

    overflow: hidden;
    
    box-sizing: border-box;

    cursor: pointer;
}

.pcd-calendar-appointment:hover {
    background: #dff2fc;
}

.pcd-calendar-appointment-time {
    margin-bottom: 3px;

    font-size: 11px;
    font-weight: 700;

    color: var(--pcdental-azul-escuro);
}

.pcd-calendar-appointment-patient {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 12px;

    color: var(--pcdental-texto);
}

.pcd-calendar-appointment-dentist {
    display: block;

    margin-top: 2px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 11px;

    color: var(--pcdental-texto-suave);
}

.pcd-calendar-appointment-status {
    display: inline-block;

    margin-top: 4px;

    font-size: 9px;
    font-weight: 700;

    color: var(--pcdental-azul-escuro);
}

/* =========================================================
   AGENDA - ROLAGEM INTERNA E CABEÇALHO FIXO
   ========================================================= */

/*
 * O calendário passa a ter sua própria área de rolagem.
 * Assim, não precisamos rolar a página inteira para
 * consultar os horários do dia.
 */
.pcd-calendar-scroll {
    width: 100%;
    max-height: 650px;

    overflow-x: auto;
    overflow-y: auto;

    position: relative;
}


/*
 * Mantém o cabeçalho com os dias da semana visível
 * durante a rolagem vertical.
 */
.pcd-calendar-header {
    position: sticky;
    top: 0;

    z-index: 20;
}


/*
 * É importante manter um fundo sólido no cabeçalho,
 * para que as linhas da agenda não apareçam por baixo
 * durante a rolagem.
 */
.pcd-calendar-time-header,
.pcd-calendar-day-header {
    background: #fafbfd;
}


/*
 * Mantém o destaque da data selecionada mesmo com
 * o cabeçalho fixo.
 */
.pcd-calendar-day-header.pcd-calendar-day-selected {
    background: #eaf6fd;
}


/*
 * Primeira coluna fixa durante eventual
 * rolagem horizontal.
 */
.pcd-calendar-time-header {
    position: sticky;
    left: 0;

    z-index: 30;
}


/*
 * Horários também permanecem visíveis quando
 * houver rolagem horizontal.
 */
.pcd-calendar-time {
    position: sticky;
    left: 0;

    z-index: 10;

    background: var(--pcdental-branco);
}

/* =========================================================
   FORMULÁRIOS - MENSAGENS DE VALIDAÇÃO
   ========================================================= */

.pcd-field-error {
    margin-top: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--pcdental-perigo);
}

/* =========================================================
   ALERTAS E MENSAGENS DO SISTEMA
   ========================================================= */

.pcd-alert {
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 20px;

    border: 1px solid transparent;
    border-radius: 8px;

    font-size: 15px;
    line-height: 1.4;

    box-sizing: border-box;
}


/* =========================================================
   ERRO
   ========================================================= */

.pcd-alert-error {
    background-color: #f8d7da;
    border-color: #f1aeb5;
    color: #842029;
}


/* =========================================================
   SUCESSO
   ========================================================= */

.pcd-alert-success {
    background-color: #d1e7dd;
    border-color: #a3cfbb;
    color: #0a3622;
}


/* =========================================================
   AVISO
   ========================================================= */

.pcd-alert-warning {
    background-color: #fff3cd;
    border-color: #ffe69c;
    color: #664d03;
}


/* =========================================================
   INFORMAÇÃO
   ========================================================= */

.pcd-alert-info {
    background-color: #cff4fc;
    border-color: #9eeaf9;
    color: #055160;
}


/* =========================================================
   ERRO ASSOCIADO A UM CAMPO
   ========================================================= */

.pcd-field-error {
    display: block;

    margin-top: 6px;

    color: #b02a37;

    font-size: 14px;
    line-height: 1.3;
}




/* Navegação autenticada compartilhada, sem deslocamento lateral. */
.pcd-layout { display: flex; flex-direction: column; min-height: 100vh; }
.pcd-main { flex: 1; width: 100%; min-width: 0; }
.pcd-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    min-height: 70px; padding: 12px 30px; background: var(--pcdental-branco);
    border-bottom: 1px solid var(--pcdental-borda); }
.pcd-topbar-brand { color: var(--pcdental-azul-escuro); font-size: 24px;
    font-weight: 700; text-decoration: none; flex-shrink: 0; }
.pcd-topbar-panel { display: flex; align-items: center; flex: 1; min-width: 0; gap: 16px; }
.pcd-topbar-nav { display: flex; align-items: center; gap: 4px; }
.pcd-topbar-nav a, .pcd-topbar-dropdown > summary { display: flex; align-items: center;
    min-height: 44px; padding: 10px 12px; border-radius: 8px; color: var(--pcdental-azul-escuro);
    text-decoration: none; font-size: 14px; font-weight: 600; cursor: pointer; }
.pcd-topbar-nav a:hover, .pcd-topbar-dropdown > summary:hover { background: var(--pcdental-fundo); }
.pcd-topbar-nav [aria-current="page"], .pcd-topbar-dropdown.pcd-topbar-active > summary {
    background: var(--pcdental-azul-claro); color: var(--pcdental-azul-escuro); }
.pcd-topbar-user { display: flex; align-items: center; justify-content: flex-end; gap: 12px;
    margin-left: auto; min-width: 0; font-size: 14px; }
.pcd-topbar-identity { min-width: 0; overflow-wrap: anywhere; max-width: 240px; }
.pcd-topbar-identity strong, .pcd-topbar-identity small { display: block; }
.pcd-topbar-identity small { color: var(--pcdental-texto-suave); margin-top: 3px; }
.pcd-topbar-logout { margin: 0; flex-shrink: 0; }
.pcd-topbar-dropdown { position: relative; }
.pcd-topbar-dropdown > summary { list-style: none; gap: 6px; }
.pcd-topbar-dropdown > summary::-webkit-details-marker { display: none; }
.pcd-topbar-dropdown > summary::after { content: "▾"; }
.pcd-topbar-dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 220px;
    background: var(--pcdental-branco); border: 1px solid var(--pcdental-borda);
    border-radius: 8px; padding: 6px; z-index: 40; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.pcd-topbar-toggle { display: none; min-width: 44px; min-height: 44px; border: 1px solid var(--pcdental-borda);
    border-radius: 8px; background: var(--pcdental-branco); color: var(--pcdental-azul-escuro);
    font-size: 24px; cursor: pointer; margin-left: auto; }
.pcd-topbar a:focus-visible, .pcd-topbar button:focus-visible, .pcd-topbar summary:focus-visible {
    outline: 3px solid var(--pcdental-azul); outline-offset: 3px; }
@media (max-width: 991.98px) {
    .pcd-topbar { padding: 12px 20px; gap: 10px; }
    .pcd-topbar-toggle:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; }
    .pcd-topbar-panel { flex-basis: 100%; flex-direction: column; align-items: stretch; }
    .pcd-topbar-panel[hidden] { display: none; }
    .pcd-topbar-nav { flex-direction: column; align-items: stretch; }
    .pcd-topbar-user { margin-left: 0; justify-content: space-between; flex-wrap: wrap; }
    .pcd-topbar-identity { max-width: 100%; }
    .pcd-topbar-dropdown-menu { position: static; min-width: 0; box-shadow: none; }
}
@media (min-width: 992px) {
    .pcd-topbar-nav { flex-wrap: wrap; }
    .pcd-topbar-panel[hidden] { display: flex; }
}