/**
 * Cool Table — diseño base.
 *
 * TODO va con variables (--ct-…). Los controles del bloque de Elementor
 * escriben esas variables sobre el bloque, y estas reglas las leen. Así el
 * usuario puede cambiar cualquier cosa desde el editor sin que haya que tocar
 * este archivo. Los valores por defecto de aquí son los del diseño de Figma
 * de la tabla de programas.
 *
 * Las reglas de "tabla compacta" y "tarjetas" NO están aquí: se generan al
 * vuelo con los puntos de corte del sitio (ver cool-table.php), porque cada
 * web tiene los suyos.
 *
 * Estructura:
 *   .cool-table                 el bloque
 *     .ct-table                 la tabla (semántica de tabla, pintada con flex)
 *       .ct-thead > .ct-tr > .ct-th
 *       .ct-tbody > .ct-row > .ct-cell (--hl, --head, --btn, --price, --group-start...)
 */

/*
 * El bloque ocupa todo el ancho del contenedor de Elementor. Sin esto, en un
 * contenedor que centra sus elementos la tabla se encoge a lo que mide su
 * contenido (en tarjetas, a poco más de 200 píxeles). Se respeta el ancho
 * que el usuario fije en la pestaña Avanzado del bloque.
 */
.elementor-widget-cool-table {
	width: var(--container-widget-width, 100%);
	max-width: 100%;
}

.cool-table {
	--ct-row-gap: 12px;
	--ct-row-radius: 12px;
	--ct-row-bg: #ffffff;
	--ct-row-border: #f4f4f4;
	--ct-row-shadow: 0 0 16px 0 rgba(0, 10, 40, 0.1);

	--ct-header-color: #000000;
	--ct-header-size: 14px;
	--ct-header-weight: 400;
	--ct-header-pad-y: 8px;
	--ct-header-pad-x: 16px;

	--ct-cell-pad-y: 16px;
	--ct-cell-pad-x: 16px;
	--ct-cell-size: 16px;
	--ct-cell-weight: 400;
	--ct-cell-color: #000000;
	--ct-sub-size: 14px;
	--ct-sub-color: #767676;
	--ct-divider: transparent;

	--ct-hl-bg: rgba(0, 52, 200, 0.1);
	--ct-hl-color: #002250;
	--ct-hl-weight: 700;

	--ct-link-color: #aa0032;
	--ct-link-hover: #830728;
	--ct-link-weight: 600;

	--ct-price-color: #000000;
	--ct-price-weight: 700;
	--ct-old-color: #767676;
	--ct-old-size: 14px;

	--ct-btn-bg: #aa0032;
	--ct-btn-color: #ffffff;
	--ct-btn-hover-bg: #830728;
	--ct-btn-hover-color: #ffffff;
	--ct-btn2-bg: #0034c8;
	--ct-btn2-color: #ffffff;
	--ct-btn-dis-bg: #830728;
	--ct-btn-dis-color: #ffffff;
	--ct-btn-dis-opacity: 0.3;
	--ct-btn-size: 12px;
	--ct-btn-weight: 700;
	--ct-btn-pad-y: 8px;
	--ct-btn-pad-x: 16px;
	--ct-btn-radius: 4px;

	--ct-band-1: rgba(0, 52, 200, 0.25);
	--ct-band-2: rgba(0, 52, 200, 0.15);
	--ct-band-3: rgba(0, 52, 200, 0.06);
	--ct-band-divider: #ffffff;

	--ct-card-head-bg: rgba(0, 52, 200, 0.1);
	--ct-card-head-bg-open: rgba(0, 52, 200, 0.2);
	--ct-card-head-pad-y: 12px;
	--ct-card-label-size: 12px;
	--ct-card-label-weight: 400;
	--ct-card-label-color: #000000;
	--ct-card-head-label-color: #000000;
	--ct-card-value-size: 14px;
	--ct-card-cell-pad-y: 8px;
	--ct-card-cell-pad-y-last: 16px;
	--ct-card-btn-pad-y: 12px;

	width: 100%;
	font-family: var(--ct-font, inherit);
	-webkit-font-smoothing: antialiased;
}

/*
 * Ajuste prefijado "Calendario": el de la tabla de horarios por franjas.
 * Cabeceras en blanco (va sobre fondo oscuro), sin sombra, día en azul sólido
 * y celdas con franjas. Cualquier control del bloque manda sobre esto.
 */
.cool-table.ct-preset-schedule {
	--ct-row-gap: 8px;
	--ct-row-shadow: none;
	--ct-row-border: transparent;
	--ct-header-color: #ffffff;
	--ct-hl-bg: #0034c8;
	--ct-hl-color: #ffffff;
	--ct-divider: #ffffff;
	--ct-card-head-bg: #0034c8;
	--ct-card-head-bg-open: #0034c8;
	--ct-card-head-label-color: rgba(255, 255, 255, 0.85);
	--ct-card-value-size: 16px;
}

.cool-table.ct-preset-schedule .ct-toggle__value {
	color: #ffffff;
}

.cool-table.ct-preset-schedule .ct-chevron {
	color: #ffffff;
}

/* ------------------------------------------------------------------ */
/* La tabla: semántica de tabla, pintada con filas flexibles           */
/* ------------------------------------------------------------------ */

/*
 * Se pinta con flex y no como tabla de verdad porque cada fila es una tarjeta
 * con esquinas redondeadas, borde y sombra, y eso una fila de tabla no lo
 * admite bien. Los papeles de accesibilidad (role) van en el HTML para que
 * los lectores de pantalla sigan viéndola como tabla.
 */
.cool-table .ct-table,
.cool-table .ct-thead,
.cool-table .ct-tbody {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: none;
}

.cool-table .ct-tr {
	display: flex;
	align-items: stretch;
	width: 100%;
	margin: 0;
}

.cool-table .ct-th,
.cool-table .ct-cell {
	display: block;
	flex: 0 0 var(--w, auto);
	width: var(--w, auto);
	min-width: 0;
	margin: 0;
	border: 0;
	background: none;
	text-align: left;
	vertical-align: middle;
	box-sizing: border-box;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

/* Las columnas sin ancho fijado se reparten lo que sobra. */
.cool-table .ct-th.ct-auto,
.cool-table .ct-cell.ct-auto {
	flex: 1 1 0;
	width: auto;
}

/* La columna del botón se ciñe a su contenido, alineada a la derecha. */
.cool-table .ct-th.ct-col--btn,
.cool-table .ct-cell--btn {
	flex: 0 0 auto;
	width: auto;
	margin-left: auto;
	text-align: right;
}

/* El botón mide lo que su texto, no se estira a lo ancho de la celda. */
.cool-table .ct-cell--btn {
	align-items: flex-end;
}

.cool-table .ct-align-center { text-align: center; }
.cool-table .ct-align-right  { text-align: right; }
.cool-table .ct-nowrap       { white-space: nowrap; }

/* ------------------------------------------------------------------ */
/* Cabecera                                                            */
/* ------------------------------------------------------------------ */

.cool-table .ct-th {
	padding: var(--ct-header-pad-y) var(--ct-header-pad-x);
	color: var(--ct-header-color);
	font-size: var(--ct-header-size);
	font-weight: var(--ct-header-weight);
	line-height: 1.45;
}

.cool-table .ct-thead .ct-tr {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Filas                                                               */
/* ------------------------------------------------------------------ */

.cool-table .ct-row {
	position: relative;
	overflow: hidden;
	margin-bottom: var(--ct-row-gap);
	border: 0.5px solid var(--ct-row-border);
	border-radius: var(--ct-row-radius);
	background: var(--ct-row-bg);
	box-shadow: var(--ct-row-shadow);
	transition: box-shadow 0.15s ease;
}

.cool-table .ct-row:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Celdas                                                              */
/* ------------------------------------------------------------------ */

.cool-table .ct-cell {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	padding: var(--ct-cell-pad-y) var(--ct-cell-pad-x);
	color: var(--ct-cell-color);
	font-size: var(--ct-cell-size);
	font-weight: var(--ct-cell-weight);
	line-height: 1.5;
	border-left: 1px solid var(--ct-divider);
}

.cool-table .ct-cell:first-child {
	border-left: 0;
}

.cool-table .ct-cell .ct-value {
	display: block;
}

/* Segunda línea (por ejemplo, la dirección debajo del lugar). */
.cool-table .ct-sub {
	display: block;
	color: var(--ct-sub-color);
	font-size: var(--ct-sub-size);
	font-weight: 400;
	line-height: 1.45;
}

/* La columna destacada (la ciudad, el día). */
.cool-table .ct-cell--hl {
	background: var(--ct-hl-bg);
	color: var(--ct-hl-color);
	font-weight: var(--ct-hl-weight);
}

/* Enlaces dentro de las celdas. */
.cool-table .ct-link {
	color: var(--ct-link-color);
	font-weight: var(--ct-link-weight);
	text-decoration: none;
	transition: color 0.15s ease;
}

.cool-table .ct-link:hover {
	color: var(--ct-link-hover);
}

.cool-table .ct-cell--hl .ct-link {
	color: inherit;
	font-weight: inherit;
}

/* Precio con tachado. */
.cool-table .ct-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
}

/*
 * Los precios van a la derecha, como cualquier columna de números: así el
 * precio vigente queda en la misma vertical en todas las filas, tengan o no
 * precio tachado. Si la columna se centra desde el bloque, se centran.
 */
.cool-table .ct-cell--price .ct-price {
	justify-content: flex-end;
}

.cool-table .ct-cell--price.ct-align-center .ct-price {
	justify-content: center;
}

.cool-table .ct-th.ct-col--price {
	text-align: right;
}

.cool-table .ct-th.ct-col--price.ct-align-center {
	text-align: center;
}

.cool-table .ct-price__old {
	color: var(--ct-old-color);
	font-size: var(--ct-old-size);
	font-weight: 400;
	text-decoration: line-through;
}

.cool-table .ct-price__new {
	color: var(--ct-price-color);
	font-weight: var(--ct-price-weight);
}

/* Franjas por grupo de columnas (mañana / tarde / noche). */
.cool-table .ct-band-1 { background: var(--ct-band-1); }
.cool-table .ct-band-2 { background: var(--ct-band-2); }
.cool-table .ct-band-3 { background: var(--ct-band-3); }
.cool-table .ct-band-4 { background: var(--ct-band-1); }
.cool-table .ct-band-5 { background: var(--ct-band-2); }
.cool-table .ct-band-6 { background: var(--ct-band-3); }

.cool-table .ct-cell[class*="ct-band-"] + .ct-cell[class*="ct-band-"] {
	border-left-color: var(--ct-band-divider);
}

/* ------------------------------------------------------------------ */
/* Botón                                                               */
/* ------------------------------------------------------------------ */

.cool-table .ct-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--ct-btn-pad-y) var(--ct-btn-pad-x);
	border: 0;
	border-radius: var(--ct-btn-radius);
	background: var(--ct-btn-bg);
	color: var(--ct-btn-color);
	font-family: inherit;
	font-size: var(--ct-btn-size);
	font-weight: var(--ct-btn-weight);
	line-height: 1.35;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.cool-table .ct-btn:hover,
.cool-table .ct-btn:focus-visible {
	background: var(--ct-btn-hover-bg);
	color: var(--ct-btn-hover-color);
}

.cool-table .ct-btn--secondary {
	background: var(--ct-btn2-bg);
	color: var(--ct-btn2-color);
}

.cool-table .ct-btn--disabled,
.cool-table .ct-btn--disabled:hover {
	background: var(--ct-btn-dis-bg);
	color: var(--ct-btn-dis-color);
	opacity: var(--ct-btn-dis-opacity);
	cursor: not-allowed;
	pointer-events: none;
}

.cool-table .ct-btn:focus-visible {
	outline: 3px solid var(--ct-link-color);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Piezas de las tarjetas, escondidas mientras la vista sea de tabla   */
/* ------------------------------------------------------------------ */

.cool-table .ct-toggle {
	display: none;
}

.cool-table .ct-chevron svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Sin datos que enseñar. */
.cool-table .ct-empty {
	padding: var(--ct-cell-pad-y) var(--ct-cell-pad-x);
	border-radius: var(--ct-row-radius);
	background: var(--ct-row-bg);
	color: var(--ct-sub-color);
	font-size: var(--ct-cell-size);
}

@media (prefers-reduced-motion: reduce) {
	.cool-table .ct-row,
	.cool-table .ct-btn,
	.cool-table .ct-link,
	.cool-table .ct-chevron {
		transition: none;
	}
}