/*
 * Escola de Famílies · estilos de lo que pinta el plugin (entrada, saludo, panel, formularios).
 * Usa los tokens del tema (variables --wp--preset--*).
 */

.efam-punt {
	display: inline-block;
	width: 0.42em;
	height: 0.42em;
	margin-inline-start: 0.12em;
	border-radius: 50%;
	background: var(--wp--preset--color--punt);
	vertical-align: baseline;
}

/* ── Controles comunes ──────────────────────────────────────── */
.efam-boto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.875rem 1.25rem;
	border: 0;
	border-radius: var(--wp--custom--radi--petit);
	background: var(--wp--preset--color--accio);
	color: #FFFFFF !important;
	font: inherit;
	font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
}
.efam-boto:hover { background: var(--wp--preset--color--tinta); }
.efam-boto-secundari { background: var(--wp--preset--color--superficie); color: var(--wp--preset--color--tinta) !important; border: 1px solid var(--wp--preset--color--vora); }
.efam-boto-secundari:hover { background: var(--wp--preset--color--suau-fons); }
.efam-enllac { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--wp--preset--color--accio); cursor: pointer; text-decoration: none; }
.efam-enllac:hover { text-decoration: underline; }
.efam-enllac-perill { color: #A4262C; }

.efam-etiqueta { display: block; margin-bottom: 0.375rem; font-weight: 600; color: var(--wp--preset--color--tinta); }
.efam-etiqueta small { font-weight: 400; color: var(--wp--preset--color--text-suau); }
.efam-camp {
	box-sizing: border-box;
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid #CFC6B8;
	border-radius: var(--wp--custom--radi--petit);
	background: #FFFFFF;
	color: var(--wp--preset--color--text);
	font: inherit;
	font-size: 1rem;
}
.efam-camp:focus { outline: 2px solid var(--wp--preset--color--accio); outline-offset: 1px; border-color: transparent; }
.efam-camp-gran { font-size: 1.25rem; font-weight: 600; }
.efam-camp-petit { width: auto; padding: 0.45rem 0.8rem; }
textarea.efam-camp { resize: vertical; line-height: 1.5; }
.efam-opcio { display: flex; align-items: center; gap: 0.5rem; margin: 0.375rem 0; }
.efam-opcio input { width: 1.15rem; height: 1.15rem; accent-color: var(--wp--preset--color--accio); }

.efam-avis {
	padding: 0.75rem 1rem;
	border-radius: var(--wp--custom--radi--petit);
	background: #E6F6F2;
	color: #00543F;
	font-weight: 500;
}
.efam-avis-error { background: #FDECEE; color: #8E1F2B; }

.efam-antetitol {
	font-size: var(--wp--preset--font-size--petit) !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--text-suau) !important;
	margin: 0 0 var(--wp--preset--spacing--20);
}

/* ── Entrada ────────────────────────────────────────────────── */
.efam-app { min-height: 100vh; min-height: 100svh; }
.efam-entrar {
	position: relative;
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	max-width: 28rem;
	margin: 0 auto;
	padding: 3.25rem 1.75rem 2rem;
	color: #FFFFFF;
}
body:has(.efam-entrar) { background: var(--wp--preset--color--tinta); }
.efam-entrar-logos { display: flex; align-items: center; gap: 1.25rem; }
.efam-entrar-logos img { height: auto; }
.efam-entrar-logos img:first-child { width: 6.5rem; }
.efam-entrar-logos img:last-child { width: 8.5rem; }
.efam-entrar-cos { margin-top: auto; padding-top: 3rem; }
.efam-entrar-titol { margin: 0; color: #FFFFFF; font-size: clamp(2rem, 1.5rem + 2vw, 2.4rem); line-height: 1.05; letter-spacing: -0.03em; }
.efam-entrar-text { margin: 0.75rem 0 1.5rem; color: var(--wp--preset--color--sobre-tinta); }
.efam-entrar .efam-etiqueta { color: #FFFFFF; }
.efam-entrar .efam-camp { border-color: transparent; }
.efam-entrar .efam-boto { width: 100%; margin-top: 0.75rem; padding-block: 1rem; font-size: 1.0625rem; }
.efam-entrar .efam-boto:hover { background: #B8005D; }
.efam-entrar a { color: #FFFFFF; }
.efam-entrar :focus-visible { outline-color: #FFFFFF !important; }
.efam-entrar-petit { font-size: 0.8125rem; color: var(--wp--preset--color--sobre-tinta); margin: 1rem 0 0; text-align: center; }
.efam-entrar .efam-avis { margin: 1rem 0 0; }
.efam-camp-codi { font-size: 1.75rem; font-weight: 700; letter-spacing: 0.4em; text-align: center; color: var(--wp--preset--color--tinta); }
.efam-idioma-form { position: absolute; top: 1.25rem; right: 1.25rem; margin: 0; }
.efam-idioma { border: 1px solid rgba(255, 255, 255, 0.35); background: none; color: #FFFFFF; border-radius: 999px; padding: 0.3rem 0.8rem; font: inherit; font-size: 0.8125rem; cursor: pointer; }

/* ── Portada: saludo y «continua» ───────────────────────────── */
.efam-salutacio {
	max-width: none !important;
	margin-top: calc(-1 * var(--wp--preset--spacing--40)) !important;
	margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1.125rem)) !important;
	padding: 0.5rem max(var(--wp--style--root--padding-left, 1.125rem), calc((100% - var(--wp--style--global--wide-size, 1120px)) / 2)) 1.5rem;
	background: var(--wp--preset--color--tinta);
	color: #FFFFFF;
	border-radius: 0 0 var(--wp--custom--radi--gran) var(--wp--custom--radi--gran);
}
.efam-salutacio p { margin: 0; }
.efam-salutacio-hola { color: var(--wp--preset--color--sobre-tinta); font-size: 0.875rem; }
.efam-salutacio-nom { font-size: var(--wp--preset--font-size--gran); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.efam-xip-escola { display: inline-flex !important; align-items: center; gap: 0.4rem; margin-top: 0.6rem !important; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 0.8125rem; }
.efam-xip-escola .efam-punt { margin: 0; width: 0.5rem; height: 0.5rem; }
.efam-salutacio-panell { margin-top: 0.75rem !important; font-size: 0.875rem; }
.efam-salutacio-panell a { color: #FFFFFF; }

.efam-continua { margin-top: var(--wp--preset--spacing--40) !important; }
.efam-continua-targeta {
	display: block;
	max-width: 36rem;
	background: var(--wp--preset--color--superficie);
	border-radius: var(--wp--custom--radi--mitja);
	box-shadow: var(--wp--custom--ombra);
	overflow: hidden;
	text-decoration: none;
}
.efam-continua-imatge { position: relative; display: block; aspect-ratio: 16 / 7; background: var(--wp--preset--gradient--miniatura); }
.efam-continua-imatge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.efam-play {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 4px 14px rgba(0, 30, 50, 0.25);
}
.efam-play::before { content: ""; position: absolute; left: 56%; top: 50%; transform: translate(-50%, -50%); border-left: 0.8rem solid var(--wp--preset--color--tinta); border-top: 0.5rem solid transparent; border-bottom: 0.5rem solid transparent; }
.efam-continua-titol { display: block; padding: 0.875rem 1rem; font-weight: 700; color: var(--wp--preset--color--tinta); line-height: 1.25; }

/* ── Ficha: vídeo y documentos ──────────────────────────────── */
.efam-video { margin: var(--wp--preset--spacing--30) 0; }
.efam-video iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--wp--custom--radi--mitja); display: block; }
.efam-documents { margin-top: var(--wp--preset--spacing--40); }
.efam-documents ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.efam-documents a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--superficie);
	border-radius: var(--wp--custom--radi--petit);
	box-shadow: var(--wp--custom--ombra);
	text-decoration: none;
	color: var(--wp--preset--color--tinta);
}
.efam-documents b { display: block; }
.efam-documents small { color: var(--wp--preset--color--text-suau); }
.efam-doc-ext { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.6rem; background: #FFE3F0; color: var(--wp--preset--color--accio); font-size: 0.6875rem; font-weight: 700; }

/* ── Compte ─────────────────────────────────────────────────── */
.efam-compte > * + * { margin-top: var(--wp--preset--spacing--30); }
.efam-dades { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.25rem; margin: 0; padding: 1.25rem; background: var(--wp--preset--color--superficie); border-radius: var(--wp--custom--radi--mitja); }
.efam-dades dt { color: var(--wp--preset--color--text-suau); }
.efam-dades dd { margin: 0; font-weight: 600; color: var(--wp--preset--color--tinta); word-break: break-word; }
.efam-form-idioma fieldset { border: 0; padding: 0; margin: 0 0 0.75rem; }
.efam-sortir { color: #A4262C; font-weight: 600; }

/* ── Panel ──────────────────────────────────────────────────── */
body:has(.efam-panell) { background: var(--wp--preset--color--fons); }
.efam-panell { display: flex; min-height: 100vh; min-height: 100svh; }
.efam-panell-lateral {
	flex: none;
	width: 15rem;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.5rem 1.125rem;
	background: var(--wp--preset--color--tinta);
	color: #FFFFFF;
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
}
.efam-panell-marca { color: #FFFFFF; font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; text-decoration: none; }
.efam-panell-escola { margin: 0.125rem 0 1.25rem; color: var(--wp--preset--color--sobre-tinta); font-size: 0.8125rem; }
.efam-panell-lateral nav { display: flex; flex-direction: column; gap: 0.25rem; }
.efam-panell-lateral nav a { padding: 0.65rem 0.75rem; border-radius: var(--wp--custom--radi--petit); color: #DCE8F0; text-decoration: none; font-weight: 500; }
.efam-panell-lateral nav a:hover { background: rgba(255, 255, 255, 0.08); }
.efam-panell-lateral nav a[aria-current] { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; font-weight: 600; }
.efam-panell-lateral nav a[aria-current]::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-inline-end: 0.5rem; border-radius: 50%; background: var(--wp--preset--color--punt); vertical-align: 0.1em; }
.efam-panell-lateral > .efam-boto { margin-top: auto; }
.efam-panell-peu { margin: 0.75rem 0 0; font-size: 0.8125rem; }
.efam-panell-peu a { color: var(--wp--preset--color--sobre-tinta); }
.efam-panell-lateral :focus-visible { outline-color: #FFFFFF !important; }

.efam-panell-area { flex: 1; min-width: 0; box-sizing: border-box; padding: 2rem clamp(1.125rem, 3vw, 2.5rem) 4rem; max-width: 72rem; }
.efam-panell-area > * + * { margin-top: 1.25rem; }
.efam-panell-cap { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.efam-panell-cap h1 { margin: 0; font-size: var(--wp--preset--font-size--molt-gran); }
.efam-panell-cap p { margin: 0.25rem 0 0; color: var(--wp--preset--color--text-suau); }

.efam-xifres { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.875rem; }
.efam-xifres > div { padding: 1rem 1.125rem; background: var(--wp--preset--color--superficie); border-radius: var(--wp--custom--radi--mitja); box-shadow: var(--wp--custom--ombra); }
.efam-xifres b { display: block; font-size: 1.75rem; color: var(--wp--preset--color--tinta); letter-spacing: -0.02em; }
.efam-xifres span { color: var(--wp--preset--color--text-suau); font-size: 0.875rem; }
.efam-xifres form { margin-top: 0.25rem; }

.efam-plegable { background: var(--wp--preset--color--superficie); border-radius: var(--wp--custom--radi--mitja); padding: 0.875rem 1.125rem; box-shadow: var(--wp--custom--ombra); }
.efam-plegable summary { cursor: pointer; font-weight: 600; color: var(--wp--preset--color--accio); }
.efam-plegable[open] summary { margin-bottom: 1rem; }

.efam-form { display: grid; gap: 1.125rem; }
.efam-form-linia { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: end; }
.efam-form-material { max-width: 46rem; padding: 1.5rem; background: var(--wp--preset--color--superficie); border-radius: var(--wp--custom--radi--mitja); box-shadow: var(--wp--custom--ombra); }
.efam-triar { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.efam-triar legend { width: 100%; }
.efam-pastilla { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border: 1px solid var(--wp--preset--color--vora); border-radius: 999px; cursor: pointer; font-weight: 500; color: var(--wp--preset--color--tinta); }
.efam-pastilla input { accent-color: var(--wp--preset--color--accio); margin: 0; }
.efam-pastilla:has(input:checked) { border-color: var(--wp--preset--color--accio); background: #FFF0F7; }
.efam-pastilla:has(input:focus-visible) { outline: 2px solid var(--wp--preset--color--accio); outline-offset: 2px; }
.efam-bloc-form img { display: block; border-radius: var(--wp--custom--radi--petit); margin-bottom: 0.5rem; }
.efam-botons { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.efam-form-esborrar { max-width: 46rem; text-align: right; }

.efam-cerca-panell { max-width: 28rem; }
.efam-taula-embolcall { overflow-x: auto; background: var(--wp--preset--color--superficie); border-radius: var(--wp--custom--radi--mitja); box-shadow: var(--wp--custom--ombra); }
.efam-taula { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.efam-taula th { text-align: left; padding: 0.75rem 1rem; background: var(--wp--preset--color--suau-fons); color: var(--wp--preset--color--text-suau); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.efam-taula td { padding: 0.8rem 1rem; border-top: 1px solid var(--wp--preset--color--vora); vertical-align: middle; }
.efam-taula td b { color: var(--wp--preset--color--tinta); }
.efam-taula a { text-decoration: none; }
.efam-taula small { color: var(--wp--preset--color--text-suau); }
.efam-accions { white-space: nowrap; text-align: right; }
.efam-accions form { display: inline; margin-inline-start: 1rem; }
.efam-fila-error td { background: #FDECEE; }
.efam-fila-existeix td { color: var(--wp--preset--color--text-suau); }
.efam-xip { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--wp--preset--color--suau-fons); color: var(--wp--preset--color--tinta); font-size: 0.8125rem; white-space: nowrap; }
.efam-estat { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.efam-estat-ok { background: #E6F6F2; color: #00543F; }
.efam-estat-pendent { background: #FFF1E0; color: #7A4300; }
.efam-llista-simple { padding-inline-start: 1.25rem; }
.efam-llista-simple li { margin: 0.4rem 0; }
.efam-llista-simple span { color: var(--wp--preset--color--text-suau); font-size: 0.875rem; }

@media (max-width: 781px) {
	.efam-panell { flex-direction: column; }
	.efam-panell-lateral { width: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 1rem 1.125rem; }
	.efam-panell-escola { display: none; }
	.efam-panell-lateral nav { flex-direction: row; order: 3; width: 100%; overflow-x: auto; }
	.efam-panell-lateral > .efam-boto { margin: 0 0 0 auto; padding: 0.55rem 0.9rem; font-size: 0.875rem; }
	.efam-panell-peu { display: none; }
	.efam-accions form { display: block; margin: 0.25rem 0; }
}

@media (min-width: 782px) {
	.efam-entrar { min-height: 0; margin-top: 8vh; padding-top: 4rem; }
	.efam-entrar-cos { margin-top: 0; padding-top: 3.5rem; }
}
.efam-nota { color: var(--wp--preset--color--text-suau); font-size: 0.875rem; }
@media (max-width: 781px) {
	.efam-xifres { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
	.efam-xifres > div { padding: 0.75rem; }
	.efam-xifres b { font-size: 1.375rem; }
	.efam-xifres span { font-size: 0.75rem; display: block; line-height: 1.3; }
}

/* ── Reproductor de Bunny con marca de agua ─────────────────────── */
.efam-reproductor { position: relative; overflow: hidden; border-radius: var(--wp--custom--radi--mitja); background: #000; aspect-ratio: 16 / 9; }
.efam-reproductor iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; aspect-ratio: auto; }
.efam-reproductor:fullscreen { border-radius: 0; aspect-ratio: auto; }
.efam-marca-aigua { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.efam-marca-aigua span { position: absolute; left: 8%; top: 10%; font-size: clamp(0.6875rem, 0.5rem + 0.6vw, 0.9375rem); font-weight: 600; color: rgba(255, 255, 255, 0.28); text-shadow: 0 0 2px rgba(0, 0, 0, 0.35); white-space: nowrap; transition: left 1.2s ease, top 1.2s ease; user-select: none; }
.efam-pantalla-completa { position: absolute; z-index: 3; right: 0.625rem; top: 0.625rem; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E") center / 1.1rem no-repeat; cursor: pointer; opacity: 0.8; }
.efam-pantalla-completa:hover, .efam-pantalla-completa:focus-visible { opacity: 1; }

/* ── Subida de vídeo en el panel ───────────────────────────────── */
.efam-pujada-video { display: grid; gap: 0.5rem; }
.efam-barra { height: 0.5rem; border-radius: 999px; background: var(--wp--preset--color--vora); overflow: hidden; }
.efam-barra span { display: block; height: 100%; width: 0; background: var(--wp--preset--color--accio); transition: width 0.3s ease; }

/* ── App al mòbil (Compte) ─────────────────────────────────────── */
.efam-app { margin-block: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--30); border-radius: var(--wp--custom--radi--mitja); background: var(--wp--preset--color--superficie); box-shadow: var(--wp--custom--ombra); }
.efam-app-text { margin: 0.25rem 0 0.75rem; }

/* ── Lista completa del curso ──────────────────────────────────── */
.efam-panell-subtitol { margin: var(--wp--preset--spacing--40) 0 0.25rem; font-size: var(--wp--preset--font-size--mitja); }

/* ── Privacitat ────────────────────────────────────────────────── */
.efam-privacitat { max-width: 42rem; }
.efam-privacitat h2 { margin: var(--wp--preset--spacing--40) 0 0.5rem; font-size: var(--wp--preset--font-size--mitja); }
.efam-privacitat ul { padding-inline-start: 1.25rem; }
.efam-privacitat li + li { margin-top: 0.375rem; }
.efam-privacitat-intro { font-size: 1.0625rem; }

/* ── Ajuda del panell ──────────────────────────────────────────── */
.efam-ajuda { display: grid; gap: 0.75rem; max-width: 46rem; }
.efam-ajuda details { padding: 1rem 1.25rem; border-radius: var(--wp--custom--radi--mitja); background: var(--wp--preset--color--superficie); box-shadow: var(--wp--custom--ombra); }
.efam-ajuda summary { cursor: pointer; font-weight: 600; color: var(--wp--preset--color--tinta); }
.efam-ajuda details[open] summary { margin-bottom: 0.5rem; }
.efam-ajuda ul, .efam-ajuda ol { padding-inline-start: 1.25rem; margin: 0.5rem 0 0; }
.efam-ajuda li + li { margin-top: 0.375rem; }
.efam-ajuda p { margin: 0.5rem 0 0; }

/* ── Documents «només lectura» ─────────────────────────────── */
.efam-lectura { margin-block: var(--wp--preset--spacing--30); }
.efam-lectura h3 { font-size: var(--wp--preset--font-size--mitja); margin: 0 0 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.efam-lectura-etiqueta { font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; background: #E6F0F6; color: var(--wp--preset--color--tinta); }
.efam-pagines { display: grid; gap: 0.75rem; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.efam-pagines img { display: block; width: 100%; height: auto; min-height: 8rem; background: #FFFFFF; border-radius: var(--wp--custom--radi--petit); box-shadow: var(--wp--custom--ombra); pointer-events: none; }
.efam-doc-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--wp--preset--color--vora); }
.efam-doc-nom { flex: 1 1 12rem; font-weight: 500; overflow-wrap: anywhere; }
.efam-doc-fila .efam-opcio { margin: 0; }
.efam-mode-docs { border: 0; padding: 0; margin: 0.75rem 0 0; }
.efam-mode-docs .efam-opcio { align-items: flex-start; }
.efam-mode-docs .efam-opcio input { margin-top: 0.2rem; flex: none; }