/* TGBS Comunidad — blanco y negro, fotos en hexágono.
   La tipografía la pone el tema; aquí solo escala y ritmo.
   Para adaptar colores, sobrescribe estas variables en el tema. */
.tgbs-cm {
	--tgbs-ink: #000;
	--tgbs-paper: #fff;
	--tgbs-mute: #595959;
	--tgbs-rule: #c8c8c8;
	--tgbs-soft: #f3f3f3;
	--tgbs-error: #b00020;
	--tgbs-gap: clamp(1rem, 2.5vw, 2rem);
	color: var(--tgbs-ink);
	box-sizing: border-box;
}
.tgbs-cm *, .tgbs-cm *::before, .tgbs-cm *::after { box-sizing: inherit; }

/* ---------- Hexágono ---------- */
.tgbs-cm-hex {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 0.866;
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	background: var(--tgbs-soft);
	overflow: hidden;
}
.tgbs-cm-hex img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	display: block;
}
.tgbs-cm-initials {
	font-size: clamp(1.5rem, 4vw, 2.5rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--tgbs-mute);
}

/* ---------- Controles comunes ---------- */
.tgbs-cm-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.tgbs-cm-field label { font-weight: 600; font-size: 0.9rem; }
.tgbs-cm input[type="text"], .tgbs-cm input[type="email"], .tgbs-cm input[type="url"],
.tgbs-cm input[type="tel"], .tgbs-cm input[type="search"], .tgbs-cm select, .tgbs-cm textarea {
	width: 100%;
	font: inherit;
	color: var(--tgbs-ink);
	background: var(--tgbs-paper);
	border: 1px solid var(--tgbs-ink);
	border-radius: 0;
	padding: 0.65rem 0.75rem;
	min-height: 2.75rem;
}
.tgbs-cm textarea { resize: vertical; }
.tgbs-cm :focus-visible { outline: 3px solid var(--tgbs-ink); outline-offset: 2px; }
.tgbs-cm [aria-invalid="true"] { border-color: var(--tgbs-error); border-width: 2px; }
.tgbs-cm-btn {
	font: inherit;
	font-weight: 700;
	color: var(--tgbs-paper);
	background: var(--tgbs-ink);
	border: 1px solid var(--tgbs-ink);
	border-radius: 0;
	padding: 0.7rem 1.4rem;
	min-height: 2.75rem;
	cursor: pointer;
}
.tgbs-cm-btn:hover { background: var(--tgbs-paper); color: var(--tgbs-ink); }
.tgbs-cm-reset { color: var(--tgbs-ink); font-weight: 600; text-underline-offset: 3px; }
.tgbs-cm-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tgbs-cm-tags li {
	font-size: 0.78rem;
	line-height: 1;
	border: 1px solid var(--tgbs-ink);
	padding: 0.3rem 0.5rem;
	margin: 0;
}

/* ---------- Directorio ---------- */
.tgbs-cm-filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 0.75rem 1rem;
	align-items: end;
	padding-bottom: var(--tgbs-gap);
	border-bottom: 2px solid var(--tgbs-ink);
}
.tgbs-cm-field--search { grid-column: 1 / -1; }
.tgbs-cm-filters__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tgbs-cm-count-results { margin: 1rem 0 var(--tgbs-gap); color: var(--tgbs-mute); font-size: 0.9rem; }

.tgbs-cm-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
	gap: calc(var(--tgbs-gap) * 1.5) var(--tgbs-gap);
}
.tgbs-cm-card { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.tgbs-cm-card__link { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 0.75rem; }
.tgbs-cm-card__link .tgbs-cm-hex { max-width: 160px; }
.tgbs-cm-card__name { font-size: 1.1rem; font-weight: 700; line-height: 1.25; }
.tgbs-cm-card__link:hover .tgbs-cm-card__name,
.tgbs-cm-card__link:focus-visible .tgbs-cm-card__name { text-decoration: underline; text-underline-offset: 3px; }
.tgbs-cm-card__role, .tgbs-cm-card__company { margin: 0; font-size: 0.92rem; line-height: 1.4; }
.tgbs-cm-card__company { color: var(--tgbs-mute); }
.tgbs-cm-card .tgbs-cm-tags { margin-top: 0.5rem; }

.tgbs-cm-pagination { margin-top: calc(var(--tgbs-gap) * 1.5); display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tgbs-cm-pagination .page-numbers {
	display: inline-grid; place-items: center;
	min-width: 2.5rem; min-height: 2.5rem; padding: 0 0.6rem;
	border: 1px solid var(--tgbs-ink); color: var(--tgbs-ink); text-decoration: none;
}
.tgbs-cm-pagination .page-numbers.current { background: var(--tgbs-ink); color: var(--tgbs-paper); }
.tgbs-cm-pagination .page-numbers.dots { border-color: transparent; }
.tgbs-cm-empty { padding: var(--tgbs-gap) 0; }

/* ---------- Ficha ---------- */
.tgbs-cm-profile { max-width: 46rem; }
.tgbs-cm-profile__head {
	display: grid;
	grid-template-columns: minmax(120px, 220px) 1fr;
	gap: var(--tgbs-gap);
	align-items: center;
	padding-bottom: var(--tgbs-gap);
	border-bottom: 2px solid var(--tgbs-ink);
}
.tgbs-cm-profile__role { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.25rem; line-height: 1.3; }
.tgbs-cm-profile__company { margin: 0 0 1rem; color: var(--tgbs-mute); font-size: 1.05rem; }
.tgbs-cm-profile__section { padding: var(--tgbs-gap) 0; border-bottom: 1px solid var(--tgbs-rule); }
.tgbs-cm-profile__section h2 { font-size: 1.1rem; margin: 0 0 0.75rem; }
.tgbs-cm-profile__section p { max-width: 65ch; }
.tgbs-cm-profile__contact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.tgbs-cm-profile__contact a, .tgbs-cm-profile__section a { color: var(--tgbs-ink); text-underline-offset: 3px; word-break: break-word; }
.tgbs-cm-back { margin-top: var(--tgbs-gap); }
.tgbs-cm-back a { color: var(--tgbs-ink); font-weight: 600; }
@media (max-width: 540px) {
	.tgbs-cm-profile__head { grid-template-columns: 1fr; }
	.tgbs-cm-profile__head .tgbs-cm-hex { max-width: 180px; }
}

/* ---------- Formulario ---------- */
.tgbs-cm-form { max-width: 46rem; display: grid; gap: calc(var(--tgbs-gap) * 1.25); }
.tgbs-cm-form fieldset { border: 0; border-top: 2px solid var(--tgbs-ink); margin: 0; padding: 1rem 0 0; min-width: 0; }
.tgbs-cm-form legend { font-size: 1.2rem; font-weight: 700; padding: 0 0.5rem 0 0; }
.tgbs-cm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.tgbs-cm-field--wide { grid-column: 1 / -1; }
@media (max-width: 600px) { .tgbs-cm-grid { grid-template-columns: 1fr; } }
.tgbs-cm-req { color: var(--tgbs-mute); }
.tgbs-cm-hint { margin: 0 0 1rem; font-size: 0.85rem; color: var(--tgbs-mute); }
.tgbs-cm-field .tgbs-cm-hint { margin: 0; }
.tgbs-cm-count { align-self: flex-end; font-size: 0.78rem; color: var(--tgbs-mute); }
.tgbs-cm-error { margin: 0; color: var(--tgbs-error); font-size: 0.85rem; font-weight: 600; }
.tgbs-cm-alert { border: 2px solid var(--tgbs-error); color: var(--tgbs-error); padding: 0.85rem 1rem; font-weight: 600; }

.tgbs-cm-upload { display: grid; grid-template-columns: 110px 1fr; gap: 1.25rem; align-items: center; margin-bottom: 1.25rem; }
.tgbs-cm-upload input[type="file"] { font: inherit; max-width: 100%; }

.tgbs-cm-checks { display: grid; gap: 0.5rem; margin-top: 1rem; }
.tgbs-cm-check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; cursor: pointer; }
.tgbs-cm-check input { width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; flex: none; accent-color: var(--tgbs-ink); }
.tgbs-cm-consent { display: grid; gap: 0.35rem; }
.tgbs-cm-consent a { color: var(--tgbs-ink); }
.tgbs-cm-form .tgbs-cm-btn { justify-self: start; }

.tgbs-cm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.tgbs-cm-done { max-width: 46rem; border-top: 2px solid var(--tgbs-ink); padding-top: 1rem; }
.tgbs-cm-done h2 { margin: 0 0 0.5rem; }

/* ---------- 1.2: sesiones, edición y contacto ---------- */
.tgbs-cm-group-label { font-weight: 600; font-size: 0.9rem; }
.tgbs-cm-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tgbs-cm-chip { position: relative; cursor: pointer; }
.tgbs-cm-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tgbs-cm-chip span {
	display: inline-block;
	border: 1px solid var(--tgbs-ink);
	padding: 0.5rem 0.85rem;
	font-size: 0.88rem;
	min-height: 2.5rem;
	line-height: 1.4;
}
.tgbs-cm-chip input:checked + span { background: var(--tgbs-ink); color: var(--tgbs-paper); }
.tgbs-cm-chip input:focus-visible + span { outline: 3px solid var(--tgbs-ink); outline-offset: 2px; }

.tgbs-cm-badges { margin-top: 0.9rem; }
.tgbs-cm-badges__label { display: block; font-size: 0.8rem; color: var(--tgbs-mute); margin-bottom: 0.35rem; }
.tgbs-cm-badges ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tgbs-cm-badges li {
	margin: 0;
	background: var(--tgbs-ink);
	color: var(--tgbs-paper);
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.35rem 0.85rem;
	clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}
.tgbs-cm-card__sessions { margin: 0.4rem 0 0; font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
.tgbs-cm-card__sessions::before {
	content: "";
	width: 0.7rem; height: 0.8rem;
	background: var(--tgbs-ink);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.tgbs-cm-mode { border-left: 4px solid var(--tgbs-ink); padding: 0.6rem 0.9rem; background: var(--tgbs-soft); margin: 0; font-weight: 600; }
.tgbs-cm-form--narrow { max-width: 30rem; }
.tgbs-cm-form .tgbs-cm-hint a { color: var(--tgbs-ink); font-weight: 600; }

.tgbs-cm-contact { display: grid; gap: 1rem; margin-top: 1.5rem; padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--tgbs-ink); }
.tgbs-cm-contact h3 { margin: 0; font-size: 1.05rem; }
.tgbs-cm-contact .tgbs-cm-btn { justify-self: start; }
.tgbs-cm-contact-ok { margin-top: 1.5rem; padding: 1rem 1.25rem; border-left: 4px solid var(--tgbs-ink); background: var(--tgbs-soft); }
.tgbs-cm-contact-ok p { margin: 0; }