/**
 * Selector de ventana de entrega.
 *
 * Mobile-first y sin decisiones de marca: todos los colores se derivan de
 * `currentColor`, que es el color de texto que ya definió el tema. Así el
 * selector se ve como el resto del checkout sea cual sea el tema, y cuando
 * llegue la identidad visual hay un solo lugar donde pisarla (las variables de
 * abajo).
 *
 * Los `color-mix()` llevan siempre una declaración previa con un valor plano:
 * un navegador que no lo soporte se queda con la anterior en vez de perder el
 * borde entero.
 */

.super-ent {
	--super-ent-radio: 8px;
	--super-ent-toque: 44px; /* Mínimo táctil. No bajar de acá. */

	--super-ent-borde: rgba(128, 128, 128, 0.35);
	--super-ent-borde: color-mix(in srgb, currentColor 25%, transparent);

	--super-ent-borde-activo: currentColor;

	--super-ent-fondo-suave: rgba(128, 128, 128, 0.08);
	--super-ent-fondo-suave: color-mix(in srgb, currentColor 7%, transparent);

	--super-ent-tenue: rgba(128, 128, 128, 0.9);
	--super-ent-tenue: color-mix(in srgb, currentColor 70%, transparent);
}

/* ── Fila de días ──────────────────────────────────────────────────────────
 *
 * Deslizable en horizontal porque en un teléfono no entran cuatro días con
 * nombre y fecha en una línea, y partirlos en dos filas rompe la lectura de
 * "los próximos días" como una secuencia.
 */

.super-ent-dias {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 2px 8px;
	margin: 0 -2px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.super-ent-dia {
	flex: 0 0 auto;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 72px;
	min-height: var(--super-ent-toque);
	padding: 8px 12px;
	border: 1px solid var(--super-ent-borde);
	border-radius: var(--super-ent-radio);
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
}

.super-ent-dia:hover {
	background: var(--super-ent-fondo-suave);
}

.super-ent-dia[aria-pressed="true"] {
	border-color: var(--super-ent-borde-activo);
	border-width: 2px;
	padding: 7px 11px; /* Compensa el borde para que no salte el ancho. */
	background: var(--super-ent-fondo-suave);
}

.super-ent-dia__nombre {
	font-size: 0.8125em;
	text-transform: lowercase;
}

.super-ent-dia__numero {
	font-size: 1.0625em;
	font-weight: 600;
	white-space: nowrap;
}

.super-ent-dia__marca {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

/* ── Ventanas del día ───────────────────────────────────────────────────── */

.super-ent-ventanas {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	border: 0;
}

.super-ent-ventana {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: var(--super-ent-toque);
	padding: 12px;
	border: 1px solid var(--super-ent-borde);
	border-radius: var(--super-ent-radio);
	cursor: pointer;
}

.super-ent-ventana:hover {
	background: var(--super-ent-fondo-suave);
}

.super-ent-ventana--elegida {
	border-color: var(--super-ent-borde-activo);
	border-width: 2px;
	padding: 11px;
	background: var(--super-ent-fondo-suave);
}

.super-ent-ventana input[type="radio"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
}

.super-ent-ventana__texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.super-ent-ventana__horario {
	font-weight: 600;
}

.super-ent-ventana__escasez,
.super-ent-ventana__corte {
	font-size: 0.8125em;
	color: var(--super-ent-tenue);
}

.super-ent-ventana__escasez {
	font-weight: 600;
}

/* ── Estados ───────────────────────────────────────────────────────────── */

.super-ent-aviso {
	margin: 0;
	padding: 12px;
	border: 1px solid var(--super-ent-borde);
	border-radius: var(--super-ent-radio);
	background: var(--super-ent-fondo-suave);
}

.super-ent-aviso__titulo {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.super-ent-cargando {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: var(--super-ent-toque);
	color: var(--super-ent-tenue);
}

.super-ent-error {
	margin: 8px 0 0;
	font-size: 0.875em;
}

.super-ent-selector[aria-busy="true"] .super-ent-ventanas {
	opacity: 0.6;
}

/* El checkout hace foco en el primer `input` dentro de `.has-error` cuando el
 * cliente intenta confirmar sin completar algo. Los radios de las ventanas son
 * inputs de verdad justamente para caer dentro de ese mecanismo. */
.super-ent-selector.has-error .super-ent-ventanas {
	border-radius: var(--super-ent-radio);
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* ── Resumen del carrito ───────────────────────────────────────────────── */

.super-ent-resumen {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 0;
}

.super-ent-resumen__titulo {
	font-weight: 600;
}

.super-ent-resumen__detalle {
	color: var(--super-ent-tenue);
	font-size: 0.875em;
}

.super-ent-resumen__enlace {
	min-height: var(--super-ent-toque);
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
}

/* ── Resumen de ventana del pedido (agradecimiento, mi cuenta) ───────────
 *
 * Mismo tratamiento visual que `.super-ent-ventana--elegida`: borde grueso +
 * fondo suave es, en este sistema, "esto ya quedó confirmado". Reutilizarlo
 * acá evita inventar un segundo lenguaje visual para la misma idea.
 */

.super-ent-pedido {
	margin: 0 0 24px;
	padding: 16px;
	border: 2px solid var(--super-ent-borde-activo);
	border-radius: var(--super-ent-radio);
	background: var(--super-ent-fondo-suave);
}

.super-ent-pedido__titulo {
	margin: 0 0 4px;
	font-size: 0.8125em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--super-ent-tenue);
}

.super-ent-pedido__mensaje {
	margin: 0;
	font-size: 1.0625em;
	font-weight: 600;
	line-height: 1.4;
}

/* Ventana perdida: no es una confirmación, así que no lleva el mismo borde
 * sólido "esto ya está". El mensaje tampoco necesita el peso visual de una
 * buena noticia. */
.super-ent-pedido--liberada {
	border-style: dashed;
}

.super-ent-pedido--liberada .super-ent-pedido__mensaje {
	font-weight: 400;
}

/* Columna "Entrega" del listado de "Mis pedidos". */
.super-ent-pedido-columna--liberada {
	font-weight: 600;
}

/* ── Vista de editor ───────────────────────────────────────────────────── */

.super-ent-editor {
	pointer-events: none;
}

.super-ent-editor__nota {
	margin: 8px 0 0;
	font-size: 0.8125em;
	font-style: italic;
	color: var(--super-ent-tenue);
}