/**
 * Akibara EstimatedDelivery — banner ETA brand-aligned.
 *
 * Lenguaje visual:
 *   - Dark surface (--aki-surface = #111) + accent stripe izquierda roja brand.
 *   - Label uppercase Bebas Neue (--font-heading) consistente con .akb-badge.
 *   - Value blanco semibold (alto contraste sobre surface oscuro).
 *   - TBA modifier: stripe + icon cambian a --aki-warning (semantic "pendiente").
 *   - NO usa --aki-yellow (reservado para precios per feedback_akibara_yellow_for_critical_money).
 *
 * BEM:
 *   .akb-eta (block) → __icon / __body / __label / __value (elements)
 *   --single / --cart-overall / --tba (modifiers)
 *
 * Tokens consumidos: --aki-surface, --aki-border-light, --aki-red, --aki-black,
 * --aki-text-muted, --aki-warning, --space-*, --radius-md, --font-heading,
 * --font-body, --text-xs/sm/base, --weight-semibold/bold.
 *
 * Mobile-first. Sin !important. Fallbacks hex por si el theme no carga tokens.css.
 */

.akb-eta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3, 12px);
	padding: var(--space-3, 12px) var(--space-4, 16px);
	margin: var(--space-4, 16px) 0;
	box-sizing: border-box;

	background: var(--aki-surface, #111111);
	border: 1px solid var(--aki-border, #2a2a2e);
	border-left: 3px solid var(--aki-red, #d90010);
	border-radius: var(--radius-md, 6px);

	color: var(--aki-white, #ffffff);
	font-family: var(--font-body, system-ui, -apple-system, sans-serif);
	font-size: var(--text-sm, 14px);
	line-height: 1.4;
}

.akb-eta__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	color: var(--aki-red, #d90010);
}

.akb-eta__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.akb-eta__label {
	font-family: var(--font-heading, "Bebas Neue", "Oswald", sans-serif);
	font-size: var(--text-xs, 11px);
	font-weight: var(--weight-bold, 700);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--aki-text-muted, #6b6b6b);
}

.akb-eta__value {
	font-weight: var(--weight-semibold, 600);
	font-size: var(--text-base, 15px);
	line-height: 1.3;
	color: var(--aki-white, #ffffff);
}

/* Cart overall ocupa ancho completo del container del cart. */
.akb-eta--cart-overall {
	display: flex;
	width: 100%;
}

/* TBA — accent + icon cambian a warning semantic. Resto del shell idéntico. */
.akb-eta--tba {
	border-left-color: var(--aki-warning, #d97706);
}

.akb-eta--tba .akb-eta__icon {
	color: var(--aki-warning, #d97706);
}

/* Mobile (~390px viewport: feedback_always_test_mobile). */
@media (max-width: 600px) {
	.akb-eta {
		font-size: var(--text-xs, 13px);
		padding: var(--space-2, 8px) var(--space-3, 12px);
		gap: var(--space-2, 8px);
	}

	.akb-eta__value {
		font-size: var(--text-sm, 14px);
	}

	.akb-eta__label {
		letter-spacing: 0.06em;
	}
}

/* Pildora compacta de ETA en las cards del loop/archive (solo preventa). Texto en
   neutro de card; label en rojo. */
.akb-eta-loop {
	margin: 4px 0 0;
	font-size: 0.78rem;
	line-height: 1.3;
	color: var(--aki-gray-300, #cccccc);
}
.akb-eta-loop__label {
	/* La card del loop es surface-2 (#1A1A1A). Sobre ese tono el red-bright
	   #FF0A1D solo da 4.40:1 → reprueba AA para texto chico. #FF3D4D mantiene el
	   rojo de marca (mismo matiz) y sube a ~5.0:1, AA-safe en texto chico/bold. */
	color: #FF3D4D;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Intro educativo del modelo de preventa (PreventasRoute::render_intro, /preventas/). */
.akb-preventas-intro {
	margin: 0 0 var(--space-5, 20px);
	padding: var(--space-4, 16px) var(--space-5, 20px);
	background: var(--aki-surface-2, #1a1a1a);
	border-left: 4px solid var(--aki-red-bright, #FF0A1D);
}
.akb-preventas-intro__lead {
	margin: 0;
	color: var(--aki-gray-200, #e5e5e5);
	font-size: 0.95rem;
	line-height: 1.5;
}