/* Kona House – Horario.
 * Diseño tomado de las imágenes originales. El CSS se limita a .kona-schedule
 * para no depender del tema ni de Elementor.
 */

@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url( '../fonts/newsreader-latin.woff2' ) format( 'woff2' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url( '../fonts/newsreader-latin-ext.woff2' ) format( 'woff2' );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.kona-schedule {
	--kona-bg: #1A1A1A;
	--kona-text: #FFFFFF;
	--kona-divider: #FF7F00;
	--kona-radius: 4px;
	--kona-gap: 5px;
	--kona-row-height: 70px;
	--kona-time-width: 56px;
	--kona-weekend-width: 195px;
	--kona-weekend-offset: 50px;
	--kona-section-gap: 40px;
	--kona-weekend-padding: 15px;
	--kona-font-size: 14px;
	--kona-header-size: 13px;
	--kona-time-size: 11px;
	--kona-max-width: 1152px;
	--kona-padding: 40px;
	--kona-font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
	box-sizing: border-box;
	background: var(--kona-bg);
	color: var(--kona-text);
	font-family: var(--kona-font-family);
	font-size: var(--kona-font-size);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	padding: var(--kona-padding);
	container-type: inline-size;
	container-name: kona;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.kona-schedule--transparent {
	background: transparent;
}

.kona-schedule *,
.kona-schedule *::before,
.kona-schedule *::after {
	box-sizing: border-box;
}

.kona-schedule__inner {
	width: 100%;
	max-width: var(--kona-max-width);
	margin: 0 auto;
}

.kona-schedule__title {
	margin: 0 0 20px;
	font-family: inherit;
	font-size: 20px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-align: left;
	text-transform: uppercase;
	color: var(--kona-text);
}

.kona-layout {
	display: flex;
	align-items: stretch;
	gap: var(--kona-section-gap);
	width: 100%;
}

.kona-week {
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
}

.kona-week::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 26px;
	background: linear-gradient(to right, rgba(26, 26, 26, 0), var(--kona-bg));
	pointer-events: none;
	opacity: 0;
}

.kona-week__scroll {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--kona-divider) transparent;
	-webkit-overflow-scrolling: touch;
}

.kona-week__scroll:focus-visible {
	outline: 2px solid var(--kona-divider);
	outline-offset: 4px;
}

/* --- Tabla de entre semana --- */
.kona-table {
	width: 100%;
	min-width: 600px;
	margin: 0;
	padding: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: var(--kona-gap);
	table-layout: fixed;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: center;
}

.kona-table caption {
	caption-side: top;
}

/* Reset de estilos de tabla del tema: el tema puede pintar los th/td y el
 * fin de semana solo tiene un th por fila, así que necesita la misma
 * especificidad que la tabla semanal. */
.kona-schedule .kona-table th,
.kona-schedule .kona-table td,
.kona-schedule .kona-weekend__table th,
.kona-schedule .kona-weekend__table td,
.kona-schedule .kona-table tbody th.kona-time,
.kona-schedule .kona-table tbody td.kona-table__cell,
.kona-schedule .kona-weekend__table tbody th.kona-weekend__time,
.kona-schedule .kona-weekend__table tbody td.kona-weekend__cell {
	background: transparent;
	border: 0;
}

.kona-schedule .kona-weekend__table tbody th.kona-weekend__time,
.kona-schedule .kona-weekend__table tbody td.kona-weekend__cell {
	background-color: transparent !important;
	border: 0 !important;
}

.kona-table thead th {
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--kona-text);
	font-family: inherit;
	font-size: var(--kona-header-size);
	font-weight: 500;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

.kona-table__corner {
	width: var(--kona-time-width);
	padding: 0;
}

.kona-table td {
	height: var(--kona-row-height);
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	vertical-align: middle;
}

.kona-table tbody th.kona-time {
	width: var(--kona-time-width);
	margin: 0;
	padding: 10px 8px 0 0;
	border: 0;
	background: transparent;
	color: var(--kona-text);
	font-family: inherit;
	font-size: var(--kona-time-size);
	font-weight: 400;
	font-style: normal;
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-align: left;
	text-transform: none;
	vertical-align: top;
	white-space: nowrap;
}

.kona-time time {
	display: block;
}

/* --- Bloques de clase --- */
.kona-cell {
	display: flex;
	align-items: stretch;
	justify-content: stretch;
	gap: var(--kona-gap);
	width: 100%;
	height: 100%;
	min-height: var(--kona-row-height);
}

.kona-class {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: var(--kona-row-height);
	margin: 0;
	padding: 4px 2px;
	border: 1px solid var(--kona-class-border, transparent);
	border-radius: var(--kona-radius);
	background: var(--kona-class-bg, transparent);
	color: var(--kona-class-fg, #FFFFFF);
	font-family: inherit;
	font-size: var(--kona-class-size, inherit);
	font-weight: var(--kona-class-weight, 700);
	font-style: normal;
	line-height: 1.08;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
	overflow: hidden;
}

.kona-class__line {
	display: block;
	width: 100%;
}

/* --- Sábado y domingo: columnas independientes --- */
.kona-weekend {
	flex: 0 0 var(--kona-weekend-width);
	width: var(--kona-weekend-width);
	min-width: 0;
	padding-left: var(--kona-weekend-padding);
	border-left: 1px solid var(--kona-divider);
}

.kona-weekend__table {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: var(--kona-gap);
	table-layout: fixed;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: center;
}

.kona-weekend__title {
	caption-side: top;
	height: auto;
	margin: 0;
	padding: 0 0 var(--kona-weekend-offset);
	border: 0;
	background: transparent;
	color: var(--kona-text);
	font-family: inherit;
	font-size: var(--kona-header-size);
	font-weight: 500;
	font-style: normal;
	line-height: 30px;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.kona-weekend__time {
	width: var(--kona-time-width);
	margin: 0;
	padding: 0 6px 0 0;
	border: 0;
	background: transparent;
	color: var(--kona-text);
	font-family: inherit;
	font-size: var(--kona-time-size);
	font-weight: 400;
	font-style: normal;
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-align: left;
	text-transform: none;
	vertical-align: middle;
	white-space: nowrap;
}

.kona-weekend__time time {
	display: block;
}

.kona-weekend__cell {
	height: var(--kona-row-height);
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	vertical-align: middle;
}

.kona-weekend__cell .kona-cell {
	min-height: var(--kona-row-height);
}

/* --- Adaptación a contenedores estrechos --- */
@container kona (max-width: 1040px) {
	.kona-layout {
		flex-wrap: wrap;
	}

	.kona-week {
		flex: 1 1 100%;
	}

	.kona-weekend {
		flex: 1 1 0;
		width: auto;
		padding-top: var(--kona-weekend-padding);
		padding-left: 0;
		border-top: 1px solid var(--kona-divider);
		border-left: 0;
	}
}

@container kona (max-width: 700px) {
	.kona-week::after {
		opacity: 1;
	}

	.kona-weekend {
		flex: 1 1 100%;
	}

	.kona-table {
		min-width: 640px;
	}

	.kona-class--filled {
		font-size: calc(var(--kona-class-size, 14px) - 1px);
	}

	.kona-schedule .kona-table tbody th.kona-time,
	.kona-schedule .kona-table thead th.kona-table__corner {
		position: sticky;
		left: 0;
		z-index: 2;
		background: var(--kona-bg) !important;
		box-shadow: 0 0 0 var(--kona-gap) var(--kona-bg);
	}

	.kona-schedule .kona-table thead th.kona-table__corner {
		z-index: 3;
	}
}

@container kona (max-width: 480px) {
	.kona-class--filled {
		font-size: calc(var(--kona-class-size, 14px) - 2px);
	}
}

@media (max-width: 520px) {
	.kona-schedule {
		padding: 16px;
	}
}

/* --- Accesibilidad y avisos --- */
.kona-schedule .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	word-wrap: normal !important;
}

.kona-schedule__error {
	margin: 0;
	padding: 12px 16px;
	border-left: 3px solid #FF7F00;
	background: rgba(255, 127, 0, 0.12);
	color: #FFFFFF;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 14px;
	line-height: 1.5;
}