/* Componentes compartidos por el portal público y los paneles.
   Todo se construye sobre los tokens que define el design system de
   CrocoBuilder; los valores de reserva de cada var() son los mismos, para que
   el sitio siga siendo legible si el constructor no llegara a cargar. */

/* ------------------------------------------------------------ Estructura */

.bt-container {
	width: 100%;
	max-width: var(--bt-container, 1180px);
	margin-inline: auto;
	padding-inline: var(--bt-space-5, 20px);
}

.bt-main {
	display: block;
	padding-block: var(--bt-space-8, 40px) var(--bt-space-10, 72px);
}

.bt-card {
	background: var(--bt-surface, #fff);
	border: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
	border-radius: var(--bt-radius-lg, 24px);
	box-shadow: var(--bt-shadow-sm, 0 8px 20px rgba(22, 38, 56, .045));
	padding: var(--bt-space-6, 24px);
	margin-block-end: var(--bt-space-6, 24px);
}

.bt-eyebrow {
	display: block;
	margin-block-end: var(--bt-space-2, 8px);
	color: var(--bt-green-700, #0f7d5b);
	font-size: var(--bt-fs-eyebrow, 11.5px);
	font-weight: var(--bt-w-semi, 620);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.bt-muted { color: var(--bt-ink-muted, #5c6c80); }

.bt-prose { line-height: 1.72; }
.bt-prose > :last-child { margin-block-end: 0; }

/* --------------------------------------------------------------- Botones */

.bt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bt-space-2, 8px);
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--bt-radius-pill, 999px);
	font: inherit;
	font-size: 14px;
	font-weight: var(--bt-w-semi, 620);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.bt-btn:disabled { opacity: .55; cursor: progress; }

.bt-btn-primary {
	background: var(--bt-grad-primary, linear-gradient(135deg, #18aa55 0%, #13996f 100%));
	color: #fff;
	box-shadow: var(--bt-shadow-sm, 0 8px 20px rgba(22, 38, 56, .045));
}

.bt-btn-secondary {
	background: var(--bt-surface, #fff);
	border-color: var(--bt-line-strong, rgba(138, 158, 181, .28));
	color: var(--bt-ink, #162638);
}

.bt-btn-ghost {
	background: transparent;
	color: var(--bt-ink-muted, #5c6c80);
}

.bt-btn-small { padding: 8px 16px; font-size: 13px; }

@media (hover: hover) {
	.bt-btn:hover:not(:disabled) { transform: translateY(-1px); }
	.bt-btn-primary:hover:not(:disabled) { box-shadow: var(--bt-shadow-md, 0 16px 38px rgba(22, 38, 56, .075)); }
	.bt-btn-secondary:hover:not(:disabled),
	.bt-btn-ghost:hover:not(:disabled) { background: var(--bt-green-050, #e9faf4); color: var(--bt-green-700, #0f7d5b); }
}

@media (prefers-reduced-motion: reduce) {
	.bt-btn { transition: none; }
	.bt-btn:hover:not(:disabled) { transform: none; }
}

/* -------------------------------------------------------------- Etiquetas */

.bt-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: var(--bt-radius-pill, 999px);
	background: var(--bt-line, rgba(138, 158, 181, .16));
	color: var(--bt-ink-2, #34485e);
	font-size: var(--bt-fs-eyebrow, 11.5px);
	font-weight: var(--bt-w-semi, 620);
	line-height: 1.4;
	white-space: nowrap;
}

.bt-status-active {
	background: var(--bt-green-050, #e9faf4);
	color: var(--bt-green-700, #0f7d5b);
}

/* El naranja del sistema es de relleno, no de texto: sobre un fondo claro no
   llega a AA. Se oscurece con color-mix para poder usarlo como color de letra
   sin salirse de la paleta. */
.bt-status-draft {
	background: var(--bt-orange-050, #fff5e6);
	color: color-mix(in srgb, var(--bt-orange-500, #ef9b18) 62%, #000);
}

.bt-status-closed {
	background: var(--bt-line, rgba(138, 158, 181, .16));
	color: var(--bt-ink-muted, #5c6c80);
}

/* ---------------------------------------------------------------- Avisos */

.bt-notice {
	margin-block: var(--bt-space-4, 16px);
	padding: var(--bt-space-4, 16px) var(--bt-space-5, 20px);
	border-radius: var(--bt-radius-md, 18px);
	border-inline-start: 3px solid currentColor;
	font-size: 14px;
}

.bt-notice--info {
	background: var(--bt-blue-050, #f1f5ff);
	color: color-mix(in srgb, var(--bt-blue-500, #4f7cff) 68%, #000);
}

.bt-notice--error {
	background: var(--bt-danger-050, #fff2f1);
	color: color-mix(in srgb, var(--bt-danger-500, #c84b4b) 82%, #000);
}

.bt-notice--success {
	background: var(--bt-green-050, #e9faf4);
	color: var(--bt-green-700, #0f7d5b);
}

/* ------------------------------------------------------- Tablas de datos */

.bt-datatable { display: block; }

.bt-datarow {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bt-space-3, 12px);
	padding-block: var(--bt-space-3, 12px);
	border-block-end: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
}

.bt-datarow:last-child { border-block-end: 0; }

.bt-datarow__label {
	flex: 0 1 auto;
	color: var(--bt-ink-muted, #5c6c80);
	font-size: var(--bt-fs-sm, 13px);
}

.bt-datarow__value {
	flex: 1 1 60%;
	min-width: 0;
	text-align: end;
	font-weight: var(--bt-w-semi, 620);
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ Herramientas */

.bt-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bt-space-4, 16px);
	margin-block-end: var(--bt-space-5, 20px);
}

.bt-toolbar h1,
.bt-toolbar h2 { margin: 0; }

.bt-toolbar__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bt-space-2, 8px);
}

/* ------------------------------------------------------------- Pestañas */

.bt-tabs {
	display: flex;
	gap: var(--bt-space-1, 4px);
	margin-block-end: var(--bt-space-6, 24px);
	border-block-end: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
	/* En móvil las cuatro pestañas no caben: se desplazan dentro de su caja,
	   nunca arrastrando el ancho de la página. */
	overflow-x: auto;
	scrollbar-width: thin;
}

.bt-tab {
	display: inline-flex;
	align-items: center;
	gap: var(--bt-space-2, 8px);
	padding: var(--bt-space-3, 12px) var(--bt-space-4, 16px);
	border-block-end: 2px solid transparent;
	color: var(--bt-ink-muted, #5c6c80);
	font-size: 14px;
	font-weight: var(--bt-w-medium, 540);
	text-decoration: none;
	white-space: nowrap;
}

.bt-tab.is-active {
	border-block-end-color: var(--bt-green-600, #13996f);
	color: var(--bt-ink, #162638);
	font-weight: var(--bt-w-semi, 620);
}

.bt-tab__count {
	padding: 1px 8px;
	border-radius: var(--bt-radius-pill, 999px);
	background: var(--bt-line, rgba(138, 158, 181, .16));
	font-size: 11.5px;
}

.bt-tab.is-active .bt-tab__count {
	background: var(--bt-green-050, #e9faf4);
	color: var(--bt-green-700, #0f7d5b);
}

/* --------------------------------------------------------- Estado vacío */

.bt-empty-state {
	padding: var(--bt-space-9, 56px) var(--bt-space-5, 20px);
	border: 1px dashed var(--bt-line-strong, rgba(138, 158, 181, .28));
	border-radius: var(--bt-radius-lg, 24px);
	background: var(--bt-surface, #fff);
	text-align: center;
}

.bt-empty-state h2 {
	font-size: var(--bt-fs-h3, 22px);
	line-height: 1.25;
	letter-spacing: -.03em;
}

.bt-empty-state p {
	max-width: 46ch;
	margin-inline: auto;
	color: var(--bt-ink-muted, #5c6c80);
}

/* ------------------------------------------------------------ Formularios */

.bt-form { max-width: 620px; }

.bt-field { margin-block-end: var(--bt-space-4, 16px); }

.bt-field label {
	display: block;
	margin-block-end: 6px;
	font-size: var(--bt-fs-sm, 13px);
	font-weight: var(--bt-w-semi, 620);
	color: var(--bt-ink-2, #34485e);
}

.bt-field input:not([type="checkbox"]):not([type="radio"]),
.bt-field select,
.bt-field textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--bt-line-strong, rgba(138, 158, 181, .28));
	border-radius: var(--bt-radius-sm, 14px);
	background: var(--bt-surface, #fff);
	color: var(--bt-ink, #162638);
	font: inherit;
	font-size: 15px;
}

.bt-field--check label {
	display: flex;
	align-items: flex-start;
	gap: var(--bt-space-2, 8px);
	font-weight: var(--bt-w-regular, 400);
	font-size: 14px;
}

.bt-field--check input { margin-block-start: 3px; flex: 0 0 auto; }

/* ------------------------------------------------ Portal público: evento */

.bt-event-hero {
	overflow: hidden;
	margin-block-end: var(--bt-space-6, 24px);
	border-radius: var(--bt-radius-lg, 24px);
	background: var(--bt-surface, #fff);
	box-shadow: var(--bt-shadow-sm, 0 8px 20px rgba(22, 38, 56, .045));
}

.bt-event-hero__cover {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

.bt-event-hero__body { padding: var(--bt-space-7, 32px); }

.bt-event-hero__title {
	margin-block: var(--bt-space-3, 12px) var(--bt-space-2, 8px);
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.04;
	letter-spacing: -.045em;
}

.bt-event-hero__subtitle {
	font-size: 17px;
	color: var(--bt-ink-muted, #5c6c80);
}

.bt-event-hero__dates { color: var(--bt-green-700, #0f7d5b); }
.bt-event-hero__place { color: var(--bt-ink-2, #34485e); margin-block-end: 0; }

.bt-organizer__logo {
	max-height: 64px;
	width: auto;
	margin-block-end: var(--bt-space-3, 12px);
}

.bt-organizer__name {
	font-size: 18px;
	font-weight: var(--bt-w-semi, 620);
	margin-block-end: var(--bt-space-1, 4px);
}

/* ---------------------------------------------------- Patrocinadores */

.bt-event-sponsors { margin-block-end: var(--bt-space-7, 32px); }

.bt-sponsor-tier { margin-block-end: var(--bt-space-6, 24px); }

.bt-sponsor-tier__label {
	margin-block-end: var(--bt-space-3, 12px);
	font-size: var(--bt-fs-eyebrow, 11.5px);
	font-weight: var(--bt-w-semi, 620);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bt-green-700, #0f7d5b);
}

.bt-sponsor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--bt-space-4, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bt-sponsor-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bt-space-3, 12px);
	padding: var(--bt-space-5, 20px);
	border: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
	border-radius: var(--bt-radius-md, 18px);
	background: var(--bt-surface, #fff);
	text-align: center;
}

/* El nivel de patrocinio es un compromiso comercial: se distingue con una
   línea superior de color, no con tamaños distintos de tarjeta, para que la
   rejilla siga siendo regular. */
.bt-sponsor-tier--platino .bt-sponsor-card { border-block-start: 3px solid var(--bt-ink-2, #34485e); }
.bt-sponsor-tier--oro .bt-sponsor-card { border-block-start: 3px solid var(--bt-orange-500, #ef9b18); }
.bt-sponsor-tier--plata .bt-sponsor-card { border-block-start: 3px solid var(--bt-ink-muted, #5c6c80); }
.bt-sponsor-tier--bronce .bt-sponsor-card { border-block-start: 3px solid var(--bt-rose-500, #d95a45); }

.bt-sponsor-card__logo { max-height: 72px; width: auto; object-fit: contain; }
.bt-sponsor-card__name { font-weight: var(--bt-w-semi, 620); }

.bt-sponsor-card__certs,
.bt-sponsor-certs__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.bt-cert-list {
	margin: var(--bt-space-3, 12px) 0 0;
	padding: 0;
	list-style: none;
}

.bt-cert-list li {
	padding-block: var(--bt-space-2, 8px);
	border-block-end: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
}

.bt-cert__meta { color: var(--bt-ink-muted, #5c6c80); font-size: var(--bt-fs-sm, 13px); }

/* --------------------------------------------------------------- Participa */

.bt-participate__qr {
	max-width: 220px;
	margin-block: var(--bt-space-4, 16px);
	padding: var(--bt-space-3, 12px);
	border: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
	border-radius: var(--bt-radius-md, 18px);
	background: #fff;
}

.bt-qr { display: block; width: 100%; height: auto; }

.bt-participate__note { color: var(--bt-ink-muted, #5c6c80); font-size: var(--bt-fs-sm, 13px); }

/* ------------------------------------------------------ Rejilla de eventos */

.bt-event-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr));
	gap: var(--bt-space-5, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bt-event-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bt-space-2, 8px);
	margin-block-end: 0;
}

.bt-event-card__title,
.bt-event-card h3 {
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: -.02em;
}

.bt-event-card__date,
.bt-event-card__meta {
	margin: 0;
	color: var(--bt-ink-muted, #5c6c80);
	font-size: var(--bt-fs-sm, 13px);
}

.bt-event-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bt-space-2, 8px);
	margin-block-start: auto;
	padding-block-start: var(--bt-space-3, 12px);
}

/* ------------------------------------------------------ Patrocinador: ficha */

.bt-sponsor-hero { margin-block-end: var(--bt-space-6, 24px); }
.bt-sponsor-hero__logo { max-height: 96px; width: auto; }
.bt-sponsor-hero__subtitle { color: var(--bt-ink-muted, #5c6c80); font-size: 17px; }

.bt-sponsor-list {
	display: grid;
	gap: var(--bt-space-4, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bt-sponsor-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bt-space-4, 16px);
	margin-block-end: 0;
}

.bt-sponsor-row__logo {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.bt-sponsor-row__body { flex: 1 1 220px; min-width: 0; }
.bt-sponsor-row__body h3 { margin: 0 0 2px; font-size: 17px; }
.bt-sponsor-row__body p { margin: 0; }

.bt-sponsor-row__certs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-block-start: var(--bt-space-2, 8px);
}

.bt-sponsor-row__actions { flex: 0 0 auto; margin-inline-start: auto; }

/* ------------------------------------------------------- Cabos sueltos */

/* El anillo reutiliza el donut por dentro; aquí sólo se coloca su pie. */
.bt-ring-wrap { display: grid; justify-items: center; gap: var(--bt-space-2, 8px); }

.bt-event-details .bt-datatable { margin-block-start: var(--bt-space-4, 16px); }

.bt-event-participants {
	margin-block-start: var(--bt-space-5, 20px);
	padding-block-start: var(--bt-space-5, 20px);
	border-block-start: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
}

.bt-organizer__web { font-size: var(--bt-fs-sm, 13px); }

.bt-reward__image {
	display: block;
	width: 100%;
	max-height: 260px;
	object-fit: cover;
	border-radius: var(--bt-radius-md, 18px);
	margin-block-end: var(--bt-space-4, 16px);
}

.bt-participate--closed { text-align: center; }

.bt-sponsor-events { margin-block-start: var(--bt-space-8, 40px); }

.bt-sponsor-certs { margin-block-start: var(--bt-space-4, 16px); }

.bt-form__result:empty { display: none; }

/* Plantilla de reserva del tema: archivos y paginación. */
.bt-archive-head { margin-block-end: var(--bt-space-7, 32px); }
.bt-archive-desc { color: var(--bt-ink-muted, #5c6c80); max-width: 62ch; }

.bt-page-links,
.navigation.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bt-space-2, 8px);
	margin-block-start: var(--bt-space-7, 32px);
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--bt-space-3, 12px);
	border: 1px solid var(--bt-line-strong, rgba(138, 158, 181, .28));
	border-radius: var(--bt-radius-sm, 14px);
	background: var(--bt-surface, #fff);
	text-decoration: none;
}

.navigation.pagination .page-numbers.current {
	background: var(--bt-green-050, #e9faf4);
	border-color: var(--bt-green-300, #c9eadf);
	color: var(--bt-green-700, #0f7d5b);
	font-weight: var(--bt-w-semi, 620);
}

/* ------------------------------------------------------------- Respuestas */

@media (max-width: 640px) {
	.bt-card { padding: var(--bt-space-5, 20px); border-radius: var(--bt-radius-md, 18px); }
	.bt-event-hero__body { padding: var(--bt-space-5, 20px); }
	.bt-datarow__value { text-align: start; flex-basis: 100%; }
	.bt-toolbar { align-items: flex-start; }
	.bt-toolbar .bt-btn { width: 100%; }
}