/**
 * Amelia Slots — estilos.
 *
 * Una píldora con borde verde y fondo claro, centrada dentro de su
 * contenedor: «Próximo horario | Lun 5 oct | 19:00 (7:00 p. m.)».
 *
 * - Los colores salen de variables, así que un dominio puede reajustar la
 *   paleta sin duplicar el archivo. Basta redefinirlas en el tema:
 *
 *       .amelia-slot { --aslot-acento: #0d6efd; --aslot-fondo: #eef4ff; }
 *
 * - Diseño B (1.9.2, elegido por el dueño): una línea con la marca de mañana
 *   o tarde más discreta; si no cabe, pasa a dos líneas sin partir la fecha
 *   ni la hora. En las tarjetas del listado, hasta 1100 px, la fecha corta.
 * - Estados sin horario («Ver en el perfil», «Ver en la agenda», «Sin
 *   horarios por ahora») y de error («Revisa sus horarios en su perfil»):
 *   en gris, nunca en rojo, porque no son una alarma para el paciente.
 * - `max-width: 100%` para que la píldora no se desborde de una tarjeta
 *   estrecha en el móvil.
 * - Contraste AA (4,5:1) en todos los textos. La carga se distingue por el
 *   borde discontinuo y no por la opacidad, que apagaba justo el texto que
 *   el paciente tiene que leer.
 */

/* Píldora ---------------------------------------------------------------- */

.amelia-slot {
	--aslot-acento: #15803d;
	--aslot-fondo: #f0faf6;
	--aslot-borde: #1d9e75;
	--aslot-sep: #b0d9c8;
	--aslot-fecha: #1a1a1a;
	--aslot-hora: #555;
	--aslot-apagado: #6e6e6e;
	--aslot-borde-apagado: #d0d0d0;
	--aslot-fondo-apagado: #f5f5f5;
	--aslot-marca: #5f6b77;
	--aslot-error: #3c4752;
	--aslot-borde-error: #c9cfd6;
	--aslot-fondo-error: #f5f6f8;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	column-gap: 8px;
	row-gap: 2px;

	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 7px 12px;

	border: 1px solid var(--aslot-borde);
	border-radius: 6px;
	background: var(--aslot-fondo);

	font-family: inherit;
	line-height: 1.3;
}

.amelia-slot__label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--aslot-acento);
	white-space: nowrap;
}

.amelia-slot__sep {
	font-size: 11px;
	color: var(--aslot-sep);
	/* Es decoración: no debería copiarse al seleccionar el texto. */
	user-select: none;
}

.amelia-slot__fecha {
	font-size: 13px;
	font-weight: 600;
	color: var(--aslot-fecha);
	white-space: nowrap;
}

.amelia-slot__hora {
	font-size: 13px;
	color: var(--aslot-fecha);
	white-space: nowrap;
}

/* «(7:00 p. m.)»: la marca de mañana o tarde, más discreta (diseño B). */
.amelia-slot__marca {
	font-size: 12px;
	color: var(--aslot-marca);
}

.amelia-slot__value {
	font-size: 12px;
	color: var(--aslot-apagado);
}

/*
 * En .com y .mx el servidor manda el instante en ISO y la fecha y la hora
 * las rellena el navegador en la zona horaria del visitante. Si ese dato
 * llegara ilegible, los dos huecos se quedarían vacíos y la píldora
 * mostraría solo los separadores. El espacio duro mantiene el ancho.
 */
.amelia-slot--available .amelia-slot__fecha:empty::before,
.amelia-slot--available .amelia-slot__hora:empty::before {
	content: "\00a0";
}

/* Fecha corta (1.9.1; hasta 1100 px desde la 1.9.2) --------------------- */

/*
 * En las tarjetas del listado, hasta 1100 px, «Lunes 28 de septiembre»
 * partía la píldora en tres líneas. Ahí se ve «Lun 28 sep» y la píldora
 * ocupa una línea o, con la marca de la hora, dos. En la ficha del
 * profesional y en pantallas anchas sigue la larga.
 *
 * La corta lleva también la clase amelia-slot__fecha, así que tiene el mismo
 * tipo, tamaño y negrita que la larga, y llega con el atributo hidden: solo
 * estas reglas la muestran, y solo en las píldoras amelia-slot--corta. Una
 * página guardada en caché con un CSS anterior muestra la larga, nunca las
 * dos. La corta de la 1.9.0 (sin la clase de la larga) no se muestra nunca.
 */
.amelia-slot__fecha-corta:not(.amelia-slot__fecha) {
	display: none;
}

@media (max-width: 1100px) {
	.amelia-slot-listing-wrapper .amelia-slot--corta .amelia-slot__fecha {
		display: none;
	}
	.amelia-slot-listing-wrapper .amelia-slot--corta .amelia-slot__fecha-corta {
		display: inline;
	}
}

/* Sin disponibilidad ----------------------------------------------------- */

.amelia-slot--empty {
	border-color: var(--aslot-borde-apagado);
	background: var(--aslot-fondo-apagado);
}

.amelia-slot--empty .amelia-slot__label {
	color: var(--aslot-apagado);
}

/* Cargando --------------------------------------------------------------- */

.amelia-slot--loading {
	border-color: var(--aslot-borde-apagado);
	background: var(--aslot-fondo-apagado);
	border-style: dashed;
}

.amelia-slot--loading .amelia-slot__label {
	color: var(--aslot-apagado);
}

/* Error ------------------------------------------------------------------ */

.amelia-slot--error {
	border-color: var(--aslot-borde-error);
	background: var(--aslot-fondo-error);
}

.amelia-slot--error .amelia-slot__label {
	color: var(--aslot-marca);
}

.amelia-slot--error .amelia-slot__sep {
	color: var(--aslot-borde-error);
}

.amelia-slot--error .amelia-slot__value {
	font-size: 13px;
	color: var(--aslot-error);
}

/* Aviso de configuración del shortcode ----------------------------------- */

.amelia-slot-error {
	margin: 0;
	font-size: 12px;
	color: #c0392b;
}

/* Panel de administración ------------------------------------------------ */

.amelia-slot-admin {
	margin: 0;
	font-size: 13px;
}

.amelia-slot-admin--ok {
	color: #1d9e75;
}

.amelia-slot-admin--warn {
	color: #b45309;
}