/*
 * Marcação de reuniões — aspecto.
 *
 * Tudo prefixado com `.ssm-`, e nenhuma regra fora de `.ssm`. É o que permite
 * ao widget cair em qualquer tema sem lhe estragar nada e sem ser estragado.
 *
 * As cores saem de variáveis com valores próprios. Um tema que queira mandar
 * redefine-as uma vez — `.ssm { --ssm-cor: #c00 }` — e muda tudo. Não se herdam
 * cores do tema por omissão porque herdar de um tema desconhecido dá contrastes
 * imprevisíveis: um botão branco sobre branco não dá erro, só não se vê.
 *
 * Nada de cor fixa no texto dos campos — essa é a regra que já nos mordeu em
 * formulários reutilizados.
 */

.ssm {
	--ssm-cor: #2563eb;
	--ssm-cor-texto: #ffffff;
	--ssm-fundo: #ffffff;
	--ssm-texto: #1f2430;
	--ssm-suave: #6b7280;
	--ssm-linha: rgba(31, 36, 48, 0.14);
	--ssm-livre: rgba(37, 99, 235, 0.08);
	--ssm-raio: 10px;

	box-sizing: border-box;
	/* **A caixa é estreita até haver dia escolhido e alarga para mostrar as
	 * horas.** O crescimento é animado de propósito: a mesma mudança feita de
	 * repente lê-se como um solavanco, e feita em terço de segundo lê-se como
	 * a caixa a abrir espaço para o que vem a seguir. É a diferença entre o
	 * ecrã tremer e o ecrã responder.
	 *
	 * O salto é aceitável porque é **a própria pessoa que o provoca**, ao
	 * carregar num dia — não é conteúdo a mexer-se sozinho debaixo do rato. */
	max-width: 480px;
	transition: max-width 320ms cubic-bezier(0.4, 0, 0.2, 1);
	margin: 0 auto;
	color: var(--ssm-texto);
	background: var(--ssm-fundo);
	border: 1px solid var(--ssm-linha);
	border-radius: 14px;
	padding: 20px;
	font-size: 15px;
	line-height: 1.5;
}

/* Tudo o que está dentro herda do widget e não da página. Sem isto, uma regra
   do tema como `.entry-content a { color: #fff }` pinta texto nosso de branco
   sobre o nosso fundo branco. */
.ssm p,
.ssm div,
.ssm span,
.ssm label,
.ssm h3,
.ssm h4,
.ssm strong {
	color: inherit;
}

/* **O escuro vem da PÁGINA, não do sistema operativo.**
 *
 * A primeira versão usava `prefers-color-scheme`, e o resultado era este: num
 * computador em modo escuro, um site branco levava um bloco preto ao meio. O
 * widget vive dentro da página de outra pessoa — quem manda é o fundo dessa
 * página, não a preferência de quem a está a ver.
 *
 * Quem decide é o JS, que lê o fundo real e põe `data-ssm-escuro` na raiz. O
 * `prefers-color-scheme` fica como recurso para o caso de o fundo ser
 * indeterminável (páginas com imagem de fundo, por exemplo).
 *
 * E o tom é o nosso: ardósia `#22303d`, não o quase-preto que lá estava. */
.ssm[data-ssm-escuro] {
	--ssm-fundo: #22303d;
	--ssm-texto: #e8edf4;
	--ssm-suave: #9aa5b4;
	--ssm-linha: rgba(232, 237, 244, 0.18);
	--ssm-livre: rgba(232, 237, 244, 0.08);
}

@media (prefers-color-scheme: dark) {
	.ssm[data-ssm-tema="indeterminado"] {
		--ssm-fundo: #22303d;
		--ssm-texto: #e8edf4;
		--ssm-suave: #9aa5b4;
		--ssm-linha: rgba(232, 237, 244, 0.18);
		--ssm-livre: rgba(232, 237, 244, 0.08);
	}
}

.ssm[data-ssm-largo] { max-width: 760px; }

/* Quem pediu ao sistema para reduzir animações não leva com esta. */
@media (prefers-reduced-motion: reduce) {
	.ssm { transition: none; }
}

.ssm *,
.ssm *::before,
.ssm *::after { box-sizing: inherit; }

.ssm-titulo { margin: 0 0 14px; font-size: 19px; line-height: 1.3; }

.ssm-estado {
	margin: 0;
	color: var(--ssm-suave);
	font-size: 14px;
}

.ssm-erro {
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: var(--ssm-raio);
	background: rgba(220, 38, 38, 0.10);
	border: 1px solid rgba(220, 38, 38, 0.35);
	color: #b91c1c;
	font-size: 14px;
}

@media (prefers-color-scheme: dark) {
	.ssm:not([data-ssm-claro]) .ssm-erro { color: #fca5a5; }
}

/* ── passos ─────────────────────────────────────────────────────────── */

.ssm-passos {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	font-size: 12.5px;
	color: var(--ssm-suave);
	flex-wrap: wrap;
}

.ssm-passo { display: flex; align-items: center; gap: 6px; }
.ssm-passo[aria-current="step"] { color: var(--ssm-texto); font-weight: 600; }

.ssm-passo-n {
	width: 20px; height: 20px;
	display: grid; place-items: center;
	border-radius: 50%;
	border: 1px solid var(--ssm-linha);
	font-size: 11px;
}

.ssm-passo[aria-current="step"] .ssm-passo-n {
	background: var(--ssm-cor);
	border-color: var(--ssm-cor);
	color: var(--ssm-cor-texto);
}

/* ── duração ────────────────────────────────────────────────────────── */

.ssm-duracoes {
	display: flex;
	gap: 8px;
	margin: 0 0 14px;
	flex-wrap: wrap;
}

.ssm-duracao {
	appearance: none;
	border: 1px solid var(--ssm-linha);
	background: var(--ssm-fundo);
	border-radius: 999px;
	color: var(--ssm-texto);
	font: inherit;
	font-size: 13.5px;
	padding: 7px 15px;
	cursor: pointer;
}

.ssm-duracao:hover { border-color: var(--ssm-cor); }

.ssm-duracao[aria-pressed="true"] {
	background: var(--ssm-cor);
	color: var(--ssm-cor-texto);
	border-color: var(--ssm-cor);
	font-weight: 600;
}

/* ── calendário ─────────────────────────────────────────────────────── */

.ssm-mes {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	gap: 10px;
}

.ssm-mes-nome { font-weight: 600; font-size: 15px; text-transform: capitalize; }

.ssm-seta {
	appearance: none;
	background: transparent;
	border: 1px solid var(--ssm-linha);
	border-radius: 8px;
	color: inherit;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 6px 11px;
}

.ssm-seta:disabled { opacity: 0.35; cursor: default; }
.ssm-seta:hover:not(:disabled) { border-color: var(--ssm-cor); }

.ssm-grelha {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.ssm-dia-nome {
	text-align: center;
	font-size: 11.5px;
	color: var(--ssm-suave);
	padding-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ssm-dia {
	appearance: none;
	border: 1px solid transparent;
	background: transparent;
	border-radius: 8px;
	color: inherit;
	font: inherit;
	font-size: 14px;
	padding: 9px 0;
	cursor: default;
	opacity: 0.35;
}

.ssm-dia[data-livre] {
	cursor: pointer;
	opacity: 1;
	background: var(--ssm-livre);
	border-color: transparent;
	font-weight: 600;
}

.ssm-dia[data-livre]:hover { border-color: var(--ssm-cor); }

.ssm-dia[aria-pressed="true"] {
	background: var(--ssm-cor);
	color: var(--ssm-cor-texto);
	border-color: var(--ssm-cor);
}

/* ── horas ──────────────────────────────────────────────────────────── */

/* **Calendário à esquerda, horas à direita, com um traço a separar.**
 *
 * Com as horas por baixo, escolher um dia empurrava o calendário para cima e
 * obrigava a procurar onde é que a lista tinha aparecido. Lado a lado, o dia
 * escolhido fica à vista enquanto se escolhe a hora.
 *
 * No telemóvel volta a empilhar: duas colunas num ecrã estreito davam horas
 * espremidas e um calendário ilegível. */
/* **A coluna das horas só aparece com um dia escolhido.**
 *
 * O calendário leva largura própria em vez de esticar. É isso que permite as
 * duas coisas ao mesmo tempo: a coluna nasce só quando faz falta **e** o
 * calendário não salta de tamanho quando ela nasce — se ele ocupasse o espaço
 * todo, ganhar um vizinho encolhia-o à frente de quem estava a olhar. */
.ssm-colunas {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.ssm-coluna-dias {
	flex: 0 1 auto;
	width: 100%;
	max-width: 420px;
}

.ssm-coluna-horas {
	flex: 1 1 190px;
	min-width: 170px;
	border-left: 1px solid var(--ssm-linha);
	padding-left: 20px;
}

.ssm-coluna-horas-titulo {
	font-size: 12.5px;
	color: var(--ssm-suave);
	margin: 0 0 10px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ssm-horas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
	gap: 8px;
	/* Uma lista comprida não pode empurrar o widget para fora do ecrã. */
	max-height: 340px;
	overflow-y: auto;
}

.ssm-hora {
	appearance: none;
	border: 1px solid var(--ssm-linha);
	background: transparent;
	border-radius: 8px;
	color: inherit;
	font: inherit;
	font-size: 14px;
	padding: 10px 0;
	cursor: pointer;
	text-align: center;
}

.ssm-hora:hover { border-color: var(--ssm-cor); }

.ssm-hora[aria-pressed="true"] {
	background: var(--ssm-cor);
	color: var(--ssm-cor-texto);
	border-color: var(--ssm-cor);
}

/* ── modalidades ────────────────────────────────────────────────────── */

.ssm-modos { display: grid; gap: 8px; margin: 4px 0 16px; }

.ssm-modo {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 13px;
	border: 1px solid var(--ssm-linha);
	border-radius: var(--ssm-raio);
	cursor: pointer;
}

.ssm-modo:hover { border-color: var(--ssm-cor); }
.ssm-modo input { accent-color: var(--ssm-cor); margin: 0; }
.ssm-modo-nome { font-weight: 600; font-size: 14px; }
.ssm-modo-nota { color: var(--ssm-suave); font-size: 12.5px; }

/* ── formulário ─────────────────────────────────────────────────────── */

.ssm-campos { display: grid; gap: 12px; }

.ssm-campo { display: grid; gap: 5px; }

.ssm-campo label { font-size: 13px; color: var(--ssm-suave); }

/* **O par cor-de-texto/fundo é do widget, nunca herdado.**
 *
 * A primeira versão deixava `color: inherit` com um comentário a dizer que
 * fixar a cor era como se faziam campos invisíveis num tema escuro. Metade
 * certo: herdar tem o defeito simétrico e foi o que apareceu — num tema cujo
 * texto é claro, escrevia-se branco sobre o fundo branco do widget e o que se
 * escrevia não se via.
 *
 * Nenhum dos dois serve. O que serve é o widget ser dono do par: `--ssm-texto`
 * e `--ssm-fundo` mudam sempre juntos (claro e escuro), por isso o contraste
 * está garantido por construção e não depende do tema de ninguém. */
.ssm-campo input,
.ssm-campo textarea {
	width: 100%;
	font: inherit;
	font-size: 14.5px;
	color: var(--ssm-texto);
	background: var(--ssm-fundo);
	border: 1px solid var(--ssm-linha);
	border-radius: var(--ssm-raio);
	padding: 10px 12px;
	-webkit-text-fill-color: var(--ssm-texto);   /* Safari e preenchimento automático */
}

/* O preenchimento automático do Chrome impõe fundo e texto próprios. A sombra
   interior é o único jeito de lhe sobrepor o fundo sem !important em tudo. */
.ssm-campo input:-webkit-autofill,
.ssm-campo input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--ssm-fundo) inset;
	-webkit-text-fill-color: var(--ssm-texto);
	caret-color: var(--ssm-texto);
}

.ssm-campo input::placeholder,
.ssm-campo textarea::placeholder {
	color: var(--ssm-suave);
	opacity: 1;   /* o Firefox esbate-o por omissão e fica ilegível */
}

.ssm-campo input:focus,
.ssm-campo textarea:focus {
	outline: 2px solid var(--ssm-cor);
	outline-offset: 1px;
	border-color: transparent;
}

.ssm-campo textarea { resize: vertical; min-height: 84px; }

/* O isco. `display:none` é ignorado por alguns robôs; tirar do fluxo e
   esconder do leitor de ecrã apanha mais e não atrapalha ninguém. */
.ssm-isco {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* ── botões ─────────────────────────────────────────────────────────── */

.ssm-accoes {
	display: flex;
	gap: 10px;
	margin-top: 18px;
	flex-wrap: wrap;
}

.ssm-botao {
	appearance: none;
	border: 0;
	border-radius: var(--ssm-raio);
	background: var(--ssm-cor);
	color: var(--ssm-cor-texto);
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	padding: 11px 20px;
	cursor: pointer;
}

.ssm-botao:disabled { opacity: 0.5; cursor: default; }

.ssm-botao-plano {
	background: transparent;
	color: inherit;
	border: 1px solid var(--ssm-linha);
	font-weight: 500;
}

/* ── confirmação ────────────────────────────────────────────────────── */

.ssm-feito { text-align: center; padding: 10px 0; }
.ssm-feito-marca { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.ssm-feito h4 { margin: 0 0 6px; font-size: 18px; }
.ssm-feito p { margin: 0 0 6px; color: var(--ssm-suave); font-size: 14px; }
.ssm-feito .ssm-botao { margin-top: 14px; display: inline-block; text-decoration: none; }

.ssm-resumo {
	margin: 0 0 14px;
	padding: 11px 13px;
	border-radius: var(--ssm-raio);
	background: var(--ssm-livre);
	font-size: 14px;
}

/* ── telemóvel ──────────────────────────────────────────────────────── */

/* 600 e não 640: numa coluna de 56 % de um contentor de 1200 px o widget mede
   ~650 px, e um ecrã um pouco mais estreito punha-o abaixo de 640 e empilhava
   as horas sem necessidade. A 600 ainda cabem o calendário (420) e as horas
   (170) com o intervalo. */
@media (max-width: 600px) {
	.ssm-colunas { flex-direction: column; gap: 16px; }
	.ssm-coluna-dias { max-width: none; }
	.ssm-coluna-horas {
		border-left: 0;
		border-top: 1px solid var(--ssm-linha);
		padding-left: 0;
		padding-top: 16px;
		min-height: 0;
	}
	.ssm-horas { max-height: none; }
}

@media (max-width: 520px) {
	.ssm { padding: 16px; border-radius: 12px; }
	.ssm-horas { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
	.ssm-dia { padding: 11px 0; }   /* alvo de toque maior */
}