/* =========================================================
   Slot Manager — Public styles
   ========================================================= */

/* Outer wrapper — enables container queries for responsive layout */
.sm-block-outer {
	container-type: inline-size;
	overflow: hidden;
}

/* Si el bloque se inserta dentro de un widget/columna de Elementor (u otro
   maquetador) que aplica su propio fondo/borde/padding por defecto, se
   neutraliza aquí para que no aparezca un recuadro no deseado alrededor de
   todo el componente. */
.elementor-widget-container:has(> .sm-block-outer),
.elementor-element:has(> .elementor-widget-container > .sm-block-outer) {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* ---------------------------------------------------------
   CSS Custom Properties
   --------------------------------------------------------- */

.sm-container {
	/* Brand */
	--sm-primary-color:          #1a1a2e;
	--sm-secondary-color:        #5c7cfa;

	/* Layout */
	--sm-max-width:              none;
	--sm-padding:                0px;
	--sm-gap:                    32px;
	--sm-sidebar-width:          300px;

	/* Global radius */
	--sm-border-radius:          8px;
	--sm-slot-radius:            6px;
	--sm-button-radius:          6px;

	/* Calendar */
	--sm-calendar-bg:            #ffffff;
	--sm-calendar-header-bg:     #1a1a2e;
	--sm-calendar-header-color:  #ffffff;
	--sm-calendar-border:        #e2e8f0;
	--sm-calendar-title-font-family:  inherit;
	--sm-calendar-title-font-size:    inherit;
	--sm-calendar-title-font-weight:  600;
	--sm-calendar-body-font-family:   inherit;
	--sm-calendar-body-font-size:     inherit;
	--sm-calendar-body-font-weight:   400;

	/* Day states */
	--sm-day-color:              #333333;
	--sm-day-available-bg:       #eef2ff;
	--sm-day-available-color:    #1a1a2e;
	--sm-day-available-hover-bg: #dde6ff;
	--sm-day-partial-bg:         #fff8e1;
	--sm-day-partial-color:      #7c5c00;
	--sm-day-partial-hover-bg:   #ffefc3;
	--sm-day-full-bg:            #fde8e8;
	--sm-day-full-color:         #9b2c2c;
	--sm-day-full-hover-bg:      #fbd0d0;
	--sm-day-selected-bg:        #1a1a2e;
	--sm-day-selected-color:     #ffffff;
	--sm-day-selected-hover-bg:  #2d2d4e;

	/* Slots */
	--sm-slot-bg:                #ffffff;
	--sm-slot-text:              #1a1a2e;
	--sm-slot-border:            #dde3ff;
	--sm-slot-hover-bg:          #eef2ff;
	--sm-slot-hover-border:      #5c7cfa;
	--sm-slot-selected-bg:       #eef2ff;
	--sm-slot-selected-border:   #5c7cfa;
	--sm-slot-selected-text:     #1a1a2e;
	--sm-slot-padding:           12px 16px;

	/* Buttons */
	--sm-button-bg:              #1a1a2e;
	--sm-button-color:           #ffffff;
	--sm-button-hover-bg:        #2d2d4e;
	--sm-button-hover-color:     #ffffff;
	--sm-button-padding:         10px 22px;

	/* Form */
	--sm-form-bg:                #ffffff;
	--sm-form-text:              #333333;
	--sm-input-bg:               #ffffff;
	--sm-input-border:           #cccccc;
	--sm-input-focus-border:     var(--sm-secondary-color);
	--sm-input-radius:           6px;
	--sm-form-padding:           24px;
	--sm-form-title-font-family: inherit;
	--sm-form-title-font-size:   inherit;
	--sm-form-title-font-weight: 600;
	--sm-form-body-font-family:  inherit;
	--sm-form-body-font-size:    inherit;
	--sm-form-body-font-weight:  400;

	/* Sidebar */
	--sm-sidebar-bg:                  #ffffff;
	--sm-sidebar-text:                #333333;
	--sm-sidebar-border:              #e2e8f0;
	--sm-sidebar-radius:              var(--sm-border-radius);
	--sm-sidebar-padding:             24px;
	--sm-sidebar-title-color:         var(--sm-primary-color);
	--sm-sidebar-price-color:         var(--sm-primary-color);
	--sm-sidebar-title-font-family:   inherit;
	--sm-sidebar-title-font-size:     inherit;
	--sm-sidebar-title-font-weight:   600;
	--sm-sidebar-body-font-family:    inherit;
	--sm-sidebar-body-font-size:      inherit;
	--sm-sidebar-body-font-weight:    400;
	--sm-sidebar-meta-label-color:    #888888;
	--sm-sidebar-meta-value-color:    #333333;
	--sm-sidebar-meta-border-clr:   #f0f0f0;
	--sm-sidebar-meta-font-size:      13px;

	/* Slots section panel */
	--sm-slots-section-bg:       #f8f9ff;
	--sm-slots-section-border:   #dde3ff;
	--sm-slots-title-color:      var(--sm-primary-color);

	/* Form border */
	--sm-form-border:            #dddddd;

	/* Button border */
	--sm-button-border:          transparent;
	--sm-button-hover-border:    transparent;

	/* Confirm button (sm-btn--primary) — inherits button vars above */
	--sm-confirm-button-bg:           var(--sm-button-bg);
	--sm-confirm-button-color:        var(--sm-button-color);
	--sm-confirm-button-border:       var(--sm-button-border);
	--sm-confirm-button-hover-bg:     var(--sm-button-hover-bg);
	--sm-confirm-button-hover-color:  var(--sm-button-hover-color);
	--sm-confirm-button-hover-border: var(--sm-button-hover-border);

	/* Check availability button (sm-btn--secondary) */
	--sm-check-button-bg:             var(--sm-secondary-color);
	--sm-check-button-color:          #ffffff;
	--sm-check-button-border:         transparent;
	--sm-check-button-hover-bg:       #4a68e8;
	--sm-check-button-hover-color:    #ffffff;
	--sm-check-button-hover-border:   transparent;
	--sm-check-button-radius:         var(--sm-button-radius);
	--sm-check-button-font-family:    inherit;
	--sm-check-button-font-weight:    600;

	/* Slot card — selected/active state */
	--sm-slot-selected-border-width:  2px;

	/* Slot secondary text (available places, "Sin plazas", etc.) */
	--sm-slot-secondary-color:        #5c7cfa;
	--sm-slot-secondary-font-size:    12px;
	--sm-slot-secondary-font-weight:  400;

	/* Block width (applied to outer wrapper) */
	--sm-block-max-width: none;

	/* Calendar min-width */
	--sm-calendar-min-width: 0px;

	/* Container base */
	max-width: var(--sm-block-max-width);
	padding: var(--sm-padding);
	margin: 0 auto;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
}

/* ---------------------------------------------------------
   Booking Layout — CSS Grid
   Desktop: [calendar] [sidebar]
            [form  — full width]
   The slots ("Sección de horarios") panel lives nested
   inside .sm-col-calendar, not as its own grid area.
   --------------------------------------------------------- */

.sm-booking-layout {
	display: grid;
	grid-template-columns: 1fr var(--sm-sidebar-width, 300px);
	grid-template-rows: auto;
	grid-template-areas:
		"calendar sidebar"
		"form     form";
	gap: var(--sm-gap, 32px);
	align-items: start;
}

.sm-col-calendar { grid-area: calendar; min-width: 0; }
.sm-col-sidebar  { grid-area: sidebar;  min-width: 0; }
.sm-col-form     { grid-area: form;     min-width: 0; }

/* Sidebar left */
.sm-layout--sidebar-left {
	grid-template-columns: var(--sm-sidebar-width, 300px) 1fr;
	grid-template-areas:
		"sidebar  calendar"
		"form     form";
}

/* Sidebar below */
.sm-layout--sidebar-below {
	grid-template-columns: 1fr;
	grid-template-areas:
		"calendar"
		"sidebar"
		"form";
}

/* Sidebar above */
.sm-layout--sidebar-above {
	grid-template-columns: 1fr;
	grid-template-areas:
		"sidebar"
		"calendar"
		"form";
}

/* No sidebar / hidden */
.sm-layout--no-sidebar,
.sm-layout--sidebar-hidden {
	grid-template-columns: 1fr;
	grid-template-areas:
		"calendar"
		"form";
}

.sm-layout--no-sidebar .sm-col-sidebar,
.sm-layout--sidebar-hidden .sm-col-sidebar {
	display: none;
}

/* Alignment helpers */
.sm-align-left    { margin-right: auto; margin-left: 0; }
.sm-align-center  { margin-right: auto; margin-left: auto; }
.sm-align-right   { margin-right: 0;    margin-left: auto; }
.sm-align-wide    { max-width: 1200px;  margin-right: auto; margin-left: auto; }
.sm-align-full    { max-width: none;    width: 100%; }

/* Width presets — applied to outer .sm-container */
.sm-width--compact { --sm-sidebar-width: 240px; --sm-block-max-width: 760px; }
.sm-width--normal  { --sm-sidebar-width: 300px; --sm-block-max-width: 1000px; }
.sm-width--wide    { --sm-sidebar-width: 340px; --sm-block-max-width: 1200px; }
.sm-width--full    { --sm-block-max-width: none; }

/* Mobile: stack left/right sidebars (above/below stay as configured) */
@media (max-width: 768px) {
	.sm-booking-layout:not(.sm-layout--sidebar-above):not(.sm-layout--sidebar-below):not(.sm-layout--sidebar-hidden):not(.sm-layout--no-sidebar) {
		grid-template-columns: 1fr;
		grid-template-areas:
			"calendar"
			"sidebar"
			"form";
	}
}

/* Container query: stack when block is too narrow to fit side-by-side */
@container (max-width: 620px) {
	.sm-booking-layout:not(.sm-layout--sidebar-above):not(.sm-layout--sidebar-below):not(.sm-layout--sidebar-hidden):not(.sm-layout--no-sidebar) {
		grid-template-columns: 1fr;
		grid-template-areas:
			"calendar"
			"sidebar"
			"form";
	}
}

/* ---------------------------------------------------------
   Sidebar
   --------------------------------------------------------- */

.sm-sidebar-card {
	background: var(--sm-sidebar-bg);
	border: 1px solid var(--sm-sidebar-border);
	border-radius: var(--sm-sidebar-radius);
	padding: var(--sm-sidebar-padding);
	position: sticky;
	top: 24px;
}

.sm-sidebar-image {
	margin: calc(var(--sm-sidebar-padding, 24px) * -1) calc(var(--sm-sidebar-padding, 24px) * -1) 16px;
	border-radius: var(--sm-sidebar-radius) var(--sm-sidebar-radius) 0 0;
	overflow: hidden;
}

.sm-sidebar-image img { width: 100%; height: 180px; object-fit: cover; display: block; }

.sm-sidebar-title {
	margin: 0 0 12px;
	font-size: var(--sm-sidebar-title-font-size, 1.1rem);
	color: var(--sm-sidebar-title-color, var(--sm-primary-color));
	font-family: var(--sm-sidebar-title-font-family, inherit);
	font-weight: var(--sm-sidebar-title-font-weight, 600);
}

.sm-sidebar-desc {
	font-size: var(--sm-sidebar-body-font-size, 14px);
	font-family: var(--sm-sidebar-body-font-family, inherit);
	font-weight: var(--sm-sidebar-body-font-weight, 400);
	color: var(--sm-sidebar-text, #555);
	line-height: 1.6;
	margin: 0 0 16px;
}

.sm-sidebar-meta {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
	border-top: 1px solid var(--sm-sidebar-meta-border-clr, #f0f0f0);
	padding-top: 12px;
}

.sm-sidebar-meta-item {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 7px 0;
	border-bottom: 1px solid var(--sm-sidebar-meta-border-clr, #f7f7f7);
	font-size: var(--sm-sidebar-meta-font-size, 13px);
}

.sm-sidebar-meta-item:last-child { border-bottom: none; }

.sm-sidebar-meta-label { color: var(--sm-sidebar-meta-label-color, #888); font-weight: 500; flex-shrink: 0; }
.sm-sidebar-meta-value { color: var(--sm-sidebar-meta-value-color, #333); text-align: right; }

.sm-sidebar-price {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--sm-sidebar-meta-border-clr, #f0f0f0);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--sm-sidebar-price-color, var(--sm-primary-color));
}

.sm-sidebar-price span {
	font-size: 12px;
	font-weight: 400;
	color: var(--sm-sidebar-meta-label-color, #888);
	display: block;
}

@media (max-width: 768px) {
	.sm-sidebar-card { position: static; }
}

/* ---------------------------------------------------------
   Calendar — sm-calendar-wrapper
   --------------------------------------------------------- */

.sm-calendar,
.sm-calendar-wrapper {
	background: var(--sm-calendar-bg);
	border: 1px solid var(--sm-calendar-border, #e2e8f0);
	border-radius: var(--sm-border-radius);
	overflow: hidden;
	margin-bottom: 0;
	min-width: var(--sm-calendar-min-width, 0px);
	font-family: var(--sm-calendar-body-font-family, inherit);
	font-size: var(--sm-calendar-body-font-size, inherit);
	font-weight: var(--sm-calendar-body-font-weight, inherit);
}

.sm-calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: var(--sm-calendar-header-bg);
	color: var(--sm-calendar-header-color);
}

.sm-calendar-title {
	font-size: var(--sm-calendar-title-font-size, 1.1rem);
	font-weight: var(--sm-calendar-title-font-weight, 600);
	text-transform: capitalize;
	font-family: var(--sm-calendar-title-font-family, inherit);
}

.sm-nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--sm-calendar-header-color);
	text-decoration: none;
	background: rgba(255,255,255,0.15);
	transition: background 0.15s;
}

.sm-nav-btn:hover       { background: rgba(255,255,255,0.3); color: var(--sm-calendar-header-color); }
.sm-nav-btn--disabled   { opacity: 0.3; cursor: default; pointer-events: none; }

/* El calendario cambia de mes por AJAX (ver public.js); esta clase da
   feedback visual mientras carga sin desplazar el scroll de la página. */
.sm-calendar--loading { opacity: 0.5; pointer-events: none; transition: opacity 0.15s; }

@media (max-width: 480px) {
	.sm-nav-btn { width: 28px; height: 28px; font-size: 1.2rem; }
}

.sm-calendar-table,
.sm-calendar-grid {
	width: 100%;
	border-collapse: collapse;
}

.sm-calendar-table thead th,
.sm-calendar-grid thead th {
	padding: 10px 0;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* ---------------------------------------------------------
   Day cells — color-based states (no dot indicators)
   --------------------------------------------------------- */

.sm-day,
.sm-calendar-day {
	text-align: center;
	padding: 4px 2px;
	position: relative;
	height: 52px;
	vertical-align: middle;
}

.sm-day-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0 auto;
	border-radius: 50%;
	font-size: 14px;
	color: var(--sm-day-color);
	transition: background 0.15s, color 0.15s;
}

.sm-day--empty .sm-day-number,
.sm-calendar-day--empty .sm-day-number { visibility: hidden; }

.sm-day--past .sm-day-number,
.sm-calendar-day--past .sm-day-number { color: #bbb; }

.sm-day--today .sm-day-number,
.sm-calendar-day--today .sm-day-number {
	background: var(--sm-primary-color);
	color: #fff;
}

/* Available */
.sm-day--available .sm-day-number,
.sm-calendar-day--available .sm-day-number {
	background: var(--sm-day-available-bg);
	color: var(--sm-day-available-color);
	cursor: pointer;
}

.sm-day--available:hover .sm-day-number,
.sm-calendar-day--available:hover .sm-day-number {
	background: var(--sm-day-available-hover-bg);
}

/* Partially booked */
.sm-day--partial .sm-day-number,
.sm-calendar-day--partial .sm-day-number {
	background: var(--sm-day-partial-bg);
	color: var(--sm-day-partial-color);
}

.sm-day--partial:hover .sm-day-number,
.sm-calendar-day--partial:hover .sm-day-number {
	background: var(--sm-day-partial-hover-bg);
}

/* Full */
.sm-day--full .sm-day-number,
.sm-calendar-day--full .sm-day-number {
	background: var(--sm-day-full-bg);
	color: var(--sm-day-full-color);
}

.sm-day--full:hover .sm-day-number,
.sm-calendar-day--full:hover .sm-day-number {
	background: var(--sm-day-full-hover-bg);
}

/* Selected */
.sm-day--available.sm-day--selected .sm-day-number,
.sm-day--available.sm-calendar-day--selected .sm-day-number,
.sm-calendar-day--available.sm-day--selected .sm-day-number,
.sm-calendar-day--available.sm-calendar-day--selected .sm-day-number {
	background: var(--sm-day-selected-bg);
	color: var(--sm-day-selected-color);
}

.sm-day--available.sm-day--selected:hover .sm-day-number,
.sm-calendar-day--available.sm-calendar-day--selected:hover .sm-day-number {
	background: var(--sm-day-selected-hover-bg);
}

/* Cursor for interactive days */
.sm-day--available,
.sm-calendar-day--available { cursor: pointer; }

/* Legacy dot — hidden (replaced by color states) */
.sm-day-dot { display: none; }

/* Calendar legend */
.sm-calendar-legend {
	padding: 10px 16px;
	border-top: 1px solid #f0f0f0;
	font-size: 12px;
	color: #666;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.sm-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sm-legend-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.sm-legend-dot--available  { background: var(--sm-day-available-bg); border: 1px solid var(--sm-day-available-color); }
.sm-legend-dot--partial    { background: var(--sm-day-partial-bg);   border: 1px solid var(--sm-day-partial-color); }
.sm-legend-dot--full       { background: var(--sm-day-full-bg);      border: 1px solid var(--sm-day-full-color); }
.sm-legend-dot--selected   { background: var(--sm-day-selected-bg);  border: 1px solid var(--sm-day-selected-color); }

/* ---------------------------------------------------------
   Slots panel — sm-slots-wrapper
   --------------------------------------------------------- */

.sm-slots-panel,
.sm-slots-wrapper {
	background: var(--sm-slots-section-bg, transparent);
	border-top: 1px solid var(--sm-slots-section-border, var(--sm-calendar-border, #e2e8f0));
	padding: 16px 20px 20px;
}

.sm-slots-title {
	margin: 0 0 14px;
	font-size: var(--sm-calendar-title-font-size, 1rem);
	color: var(--sm-slots-title-color, var(--sm-primary-color));
	font-family: var(--sm-calendar-title-font-family, inherit);
	font-weight: var(--sm-calendar-title-font-weight, 600);
}

.sm-slots-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* ---------------------------------------------------------
   Slot card — sm-slot-card
   --------------------------------------------------------- */

.sm-slot-item,
.sm-slot-card {
	background: var(--sm-slot-bg);
	border: 2px solid var(--sm-slot-border);
	border-radius: var(--sm-slot-radius, var(--sm-border-radius));
	padding: var(--sm-slot-padding, 12px 16px);
	cursor: pointer;
	min-width: 140px;
	text-align: center;
	transition: border-color 0.15s, background 0.15s;
}

.sm-slot-item:hover,
.sm-slot-card:hover {
	border-color: var(--sm-slot-hover-border);
	background: var(--sm-slot-hover-bg);
}

.sm-slot-item:hover .sm-slot-time,
.sm-slot-card:hover .sm-slot-time {
	color: var(--sm-slot-hover-text, var(--sm-slot-text, var(--sm-primary-color)));
}

.sm-slot-item.sm-slot--selected,
.sm-slot-item.sm-slot-card--selected,
.sm-slot-card.sm-slot--selected,
.sm-slot-card.sm-slot-card--selected,
.sm-slot-item.sm-slot-card--active,
.sm-slot-card.sm-slot-card--active {
	border: var(--sm-slot-selected-border-width, 2px) solid var(--sm-slot-selected-border);
	background: var(--sm-slot-selected-bg);
}

.sm-slot-time {
	display: block;
	font-weight: 600;
	font-size: 15px;
	color: var(--sm-slot-text, var(--sm-primary-color));
}

.sm-slot-card.sm-slot--selected .sm-slot-time,
.sm-slot-card.sm-slot-card--selected .sm-slot-time,
.sm-slot-card.sm-slot-card--active .sm-slot-time {
	color: var(--sm-slot-selected-text, var(--sm-slot-text, var(--sm-primary-color)));
}

.sm-slot-available {
	display: block;
	font-size: var(--sm-slot-secondary-font-size, 12px);
	font-weight: var(--sm-slot-secondary-font-weight, 400);
	color: var(--sm-slot-secondary-color, var(--sm-secondary-color));
	margin-top: 4px;
}

.sm-slot-full {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ---------------------------------------------------------
   Booking form — sm-booking-form
   --------------------------------------------------------- */

.sm-booking-panel {
	background: var(--sm-form-bg, #fff);
	border: 1px solid var(--sm-form-border, #ddd);
	border-radius: var(--sm-border-radius);
	padding: var(--sm-form-padding, 24px);
	font-family: var(--sm-form-body-font-family, inherit);
	font-size: var(--sm-form-body-font-size, inherit);
	font-weight: var(--sm-form-body-font-weight, inherit);
}

.sm-booking-title {
	margin: 0 0 20px;
	font-size: var(--sm-form-title-font-size, 1.05rem);
	color: var(--sm-form-text, var(--sm-primary-color));
	font-family: var(--sm-form-title-font-family, inherit);
	font-weight: var(--sm-form-title-font-weight, 600);
}

.sm-form .sm-field { margin-bottom: 16px; }

.sm-form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #444;
	margin-bottom: 5px;
}

.sm-form input[type="text"],
.sm-form input[type="email"],
.sm-form input[type="tel"],
.sm-form input[type="number"],
.sm-form textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--sm-input-border, #ccc);
	border-radius: var(--sm-input-radius, 6px);
	background: var(--sm-input-bg, #fff);
	font-size: var(--sm-form-body-font-size, 14px);
	color: var(--sm-form-text, #333);
	box-sizing: border-box;
	transition: border-color 0.15s;
}

.sm-form input:focus,
.sm-form textarea:focus {
	border-color: var(--sm-input-focus-border, var(--sm-secondary-color));
	outline: none;
}

.sm-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 20px;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

.sm-btn {
	padding: var(--sm-button-padding, 10px 22px);
	border: 1px solid transparent;
	border-radius: var(--sm-button-radius, 6px);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}

.sm-btn--primary {
	background: var(--sm-button-bg);
	color: var(--sm-button-color);
	border-color: var(--sm-button-border, transparent);
}

.sm-btn--primary:hover {
	background: var(--sm-button-hover-bg, var(--sm-button-bg));
	color: var(--sm-button-hover-color, var(--sm-button-color));
	border-color: var(--sm-button-hover-border, var(--sm-button-border, transparent));
	opacity: 1;
}

.sm-btn--secondary {
	background: var(--sm-check-button-bg, var(--sm-secondary-color));
	color: var(--sm-check-button-color, #fff);
	border-color: var(--sm-check-button-border, transparent);
	border-radius: var(--sm-check-button-radius, var(--sm-button-radius, 6px));
	font-family: var(--sm-check-button-font-family, inherit);
	font-weight: var(--sm-check-button-font-weight, 600);
}
.sm-btn--secondary:hover {
	background: var(--sm-check-button-hover-bg, #4a68e8);
	color: var(--sm-check-button-hover-color, #fff);
	border-color: var(--sm-check-button-hover-border, transparent);
	opacity: 1;
}

.sm-btn--ghost {
	background: transparent;
	color: #666;
	border: 1px solid #ddd;
}

.sm-btn--ghost:hover { background: #f5f5f5; }

.sm-btn--inline {
	padding: 4px 12px;
	font-size: 13px;
	margin-top: 8px;
	display: inline-block;
}

/* ---------------------------------------------------------
   Availability messages
   --------------------------------------------------------- */

.sm-availability-msg {
	padding: 14px 16px;
	border-radius: 6px;
	margin-bottom: 16px;
	font-size: 14px;
}

.sm-availability-msg--error   { background: #fff3cd; border: 1px solid #ffecb5; color: #664d03; }
.sm-availability-msg--success { background: #d1e7dd; border: 1px solid #badbcc; color: #0a3622; }

/* ---------------------------------------------------------
   Success message
   --------------------------------------------------------- */

.sm-success-msg {
	text-align: center;
	padding: 32px 20px;
	color: #0a3622;
}

.sm-success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #d1e7dd;
	font-size: 28px;
	margin-bottom: 16px;
}

/* ---------------------------------------------------------
   Selector de actividades (tarjetas)
   --------------------------------------------------------- */

.sm-activity-selector {
	display: flex;
	flex-direction: column;
	gap: var(--sm-activity-cards-spacing, 32px);
}

/* Ninguna actividad activa: no se pinta calendario ni formulario, solo el aviso. */
.sm-no-activities {
	padding: 24px;
	border: 1px dashed var(--sm-border-color, #d9d9d9);
	border-radius: var(--sm-border-radius, 8px);
	text-align: center;
	color: var(--sm-muted-color, #6b7280);
}

.sm-no-activities p {
	margin: 0;
}

.sm-activity-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--sm-activity-card-min-width, 320px), 1fr));
	gap: var(--sm-activity-card-gap, 24px);
}

/* Reseteo explícito: algunos temas aplican text-transform/letter-spacing a todos
   los <button>, y como la tarjeta entera es un <button> (necesario para que sea
   accesible por teclado), hay que neutralizarlo aquí para que no se herede. */
.sm-activity-card,
.sm-activity-card * {
	text-transform: none;
	letter-spacing: normal;
}

.sm-activity-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: left;
	background: var(--sm-activity-card-bg, #ffffff);
	border: 1px solid var(--sm-activity-card-border-clr, #e2e8f0);
	border-radius: var(--sm-activity-card-radius, var(--sm-border-radius, 8px));
	padding: 0;
	margin: 0;
	overflow: hidden;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	line-height: normal;
	box-shadow: none;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* Estado "Hover" — sin personalizar, no cambia ningún color (solo sombra +
   elevación); cada color se activa únicamente si se configura en el bloque. */
.sm-activity-card:hover {
	background: var(--sm-activity-card-hover-bg, var(--sm-activity-card-bg, #ffffff));
	border-color: var(--sm-activity-card-hover-border-clr, var(--sm-activity-card-border-clr, #e2e8f0));
	box-shadow: 0 4px 16px rgba(0,0,0,.08);
	transform: translateY(-2px);
}

.sm-activity-card:hover .sm-activity-card-title {
	color: var(--sm-activity-card-hover-title-color, var(--sm-activity-card-title-color, var(--sm-primary-color, #1a1a2e)));
}

.sm-activity-card:hover .sm-activity-card-desc,
.sm-activity-card:hover .sm-activity-card-meta {
	color: var(--sm-activity-card-hover-body-color, var(--sm-activity-card-body-color, #555555));
}

.sm-activity-card:focus-visible {
	outline: 2px solid var(--sm-secondary-color, #5c7cfa);
	outline-offset: 2px;
}

/* Estado "Activo" (tarjeta seleccionada) — igual de opcional: sin configurar,
   no se distingue visualmente de la tarjeta normal. */
.sm-activity-card--active {
	background: var(--sm-activity-card-active-bg, var(--sm-activity-card-bg, #ffffff));
	border-color: var(--sm-activity-card-active-border-clr, var(--sm-activity-card-border-clr, #e2e8f0));
}

.sm-activity-card--active .sm-activity-card-title {
	color: var(--sm-activity-card-active-title-color, var(--sm-activity-card-title-color, var(--sm-primary-color, #1a1a2e)));
}

.sm-activity-card--active .sm-activity-card-desc,
.sm-activity-card--active .sm-activity-card-meta {
	color: var(--sm-activity-card-active-body-color, var(--sm-activity-card-body-color, #555555));
}

.sm-activity-card-image { display: block; width: 100%; height: var(--sm-activity-card-image-height, 200px); }
.sm-activity-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sm-activity-card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--sm-activity-card-padding, 24px);
}

.sm-activity-card-title {
	font-size: var(--sm-activity-card-title-font-size, 1.1rem);
	font-family: var(--sm-activity-card-title-font-family, inherit);
	font-weight: var(--sm-activity-card-title-font-weight, 600);
	color: var(--sm-activity-card-title-color, var(--sm-primary-color, #1a1a2e));
}

.sm-activity-card-desc {
	font-size: var(--sm-activity-card-body-font-size, 14px);
	font-family: var(--sm-activity-card-body-font-family, inherit);
	font-weight: var(--sm-activity-card-body-font-weight, 400);
	color: var(--sm-activity-card-body-color, #555555);
	line-height: 1.5;
}

.sm-activity-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: 13px;
	color: var(--sm-activity-card-body-color, #555555);
}

.sm-activity-card-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.sm-activity-card-meta-item svg,
.sm-activity-card-meta-item i { flex-shrink: 0; opacity: .75; font-size: 13px; }

/* ---------------------------------------------------------
   Campo de formulario tipo "Selección" (radio buttons)
   --------------------------------------------------------- */

.sm-field-options { display: flex; flex-wrap: wrap; gap: 16px; }

.sm-field-option {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: normal;
}

/* ---------------------------------------------------------
   Block no-activity placeholder
   --------------------------------------------------------- */

.sm-block-no-activity {
	background: #f7fafc;
	border: 2px dashed #a0aec0;
	border-radius: 8px;
	padding: 2rem;
	text-align: center;
	color: #4a5568;
	font-size: 14px;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 480px) {
	.sm-actions     { flex-direction: column; }
	.sm-btn         { text-align: center; }
	.sm-slots-list  { flex-direction: column; }
	.sm-slot-item,
	.sm-slot-card   { min-width: 0; width: 100%; }
}

/* Tarjetas de actividad: en móvil, una columna siempre — un min-width grande
   configurado en el bloque no debe forzar overflow horizontal en pantallas
   estrechas. */
@media (max-width: 600px) {
	.sm-activity-cards-grid { grid-template-columns: 1fr; }
}

@container (max-width: 480px) {
	.sm-activity-cards-grid { grid-template-columns: 1fr; }
	.sm-activity-card-image { height: 140px; }
}