/**
 * Visor de salas Ateneu.
 * Diseño autónomo (tarjeta clara): legible en cualquier tema del sitio,
 * oscuro o claro — como un embed de YouTube, siempre consistente.
 */

.ateneu-salas-visor {
	--asalas-ink: #1e293b;      /* texto principal */
	--asalas-ink-soft: #64748b; /* texto secundario (plantas, botones) */
	--asalas-line: #e2e8f0;     /* bordes */
	--asalas-card: #ffffff;     /* fondo tarjeta */
	--asalas-bg: #f8fafc;       /* fondos suaves */

	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	position: relative;
	margin: 12px auto 24px;
	max-width: 1280px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--asalas-ink);
}

/* ---- Panel de salas ---- */
.asalas-panel {
	background: var(--asalas-card);
	border: 1px solid var(--asalas-line);
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 1px 3px rgb(15 23 42 / 6%);
	position: sticky;
	top: 24px;
	max-height: 82vh;
	overflow: auto;
	color: var(--asalas-ink);
}

.asalas-panel-title {
	font-weight: 800;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--asalas-ink-soft);
	margin-bottom: 12px;
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.asalas-panel-actions {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}

.asalas-mini-btn {
	flex: 1;
	border: 1px solid var(--asalas-line);
	background: var(--asalas-bg);
	color: var(--asalas-ink);
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.asalas-mini-btn:hover {
	background: #eef2f7;
}

.asalas-grupo + .asalas-grupo {
	margin-top: 14px;
	border-top: 1px dashed var(--asalas-line);
	padding-top: 12px;
}

.asalas-grupo-nombre {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--asalas-ink-soft);
	margin-bottom: 8px;
	cursor: pointer;
	user-select: none;
}

.asalas-grupo-nombre:hover {
	color: var(--asalas-ink);
}

.asalas-grupo-nombre input[type="checkbox"],
.asalas-chip input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	flex: none;
	accent-color: var(--sala-color, #3788d8);
	cursor: pointer;
}

/* Pista cuando no hay salas marcadas */
.asalas-hint {
	background: var(--asalas-bg);
	border: 1px dashed var(--asalas-line);
	border-radius: 8px;
	color: var(--asalas-ink-soft);
	font-size: 13px;
	padding: 8px 10px;
	margin-bottom: 10px;
}

.asalas-hint[hidden] {
	display: none;
}

/* Chips de sala */
.asalas-chip {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--asalas-line);
	border-left: 5px solid var(--sala-color, #3788d8);
	border-radius: 10px;
	padding: 7px 12px 7px 8px;
	margin-bottom: 6px;
	cursor: pointer;
	user-select: none;
	color: var(--asalas-ink);
	font-size: 14px;
	transition: background .15s, border-color .15s;
}

.asalas-chip:hover {
	background: var(--asalas-bg);
}

/* Sala desmarcada: apagada pero legible (sin tachar el nombre) */
.asalas-chip input[type="checkbox"]:not(:checked) {
	outline-offset: 1px;
}

.asalas-chip input[type="checkbox"]:not(:checked) ~ .asalas-chip-nombre {
	color: var(--asalas-ink-soft);
}

.asalas-chip-nombre {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- Calendario (FullCalendar themed con variables propias) ---- */
.asalas-calendario {
	--fc-page-bg-color: var(--asalas-card);
	--fc-border-color: var(--asalas-line);
	--fc-neutral-bg-color: var(--asalas-bg);
	--fc-today-bg-color: rgb(46 125 50 / 5%);
	--fc-event-text-color: #ffffff;
	--fc-highlight-color: rgb(55 136 216 / 12%);
	--fc-now-indicator-color: #ef4444;

	color: var(--asalas-ink);
	background: var(--asalas-card);
	border: 1px solid var(--asalas-line);
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 1px 3px rgb(15 23 42 / 6%);
	min-width: 0;
}

.asalas-calendario .fc .fc-toolbar-title {
	font-size: 17px;
	color: var(--asalas-ink);
	font-weight: 800;
}

.asalas-calendario .fc .fc-button {
	background: var(--asalas-bg);
	border: 1px solid var(--asalas-line);
	color: var(--asalas-ink);
	font-weight: 600;
}

.asalas-calendario .fc .fc-button:hover {
	background: #eef2f7;
	color: var(--asalas-ink);
}

.asalas-calendario .fc .fc-button-active,
.asalas-calendario .fc .fc-button:active {
	background: var(--asalas-ink);
	color: #ffffff;
	border-color: var(--asalas-ink);
}

.asalas-calendario .fc .fc-daygrid-day-number,
.asalas-calendario .fc .fc-col-header-cell-cushion,
.asalas-calendario .fc .fc-timegrid-slot-label {
	color: var(--asalas-ink-soft);
}

/* Enfatizar el color de sala en el rango (además de event.color del backend) */
.asalas-calendario .fc-event {
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	box-shadow: 0 1px 2px rgb(15 23 42 / 18%);
}

/* ---- Estados ---- */
.asalas-cargando {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .6);
	z-index: 5;
	pointer-events: none;
	border-radius: 12px;
}

.asalas-cargando[hidden] {
	display: none;
}

.asalas-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid #cbd5e1;
	border-top-color: #3788d8;
	border-radius: 50%;
	animation: asalas-spin .8s linear infinite;
}

@keyframes asalas-spin {
	to { transform: rotate(360deg); }
}

.asalas-error {
	grid-column: 1 / -1;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 13px;
}

/* ---- Responsive ---- */
@media (max-width: 782px) {
	.ateneu-salas-visor {
		grid-template-columns: 1fr;
	}

	.asalas-panel {
		position: static;
		max-height: none;
		order: 2;
	}

	.asalas-calendario {
		order: 1;
	}
}