/* ============================================================================
   AtlasEntityPicker — buscador compacto server-side reutilizable.
   Plan: API/docs/plans/2026-07-23-atlas-entity-picker.md §7

   Dirección de diseño ("index rail"), decidida para NO parecer un dropdown
   Bootstrap más:
     · El campo no es una caja: es una LÍNEA BASE. Un filete de 1px que se
       engorda y toma el color primario al enfocar. Junto a un form-control
       normal se distingue al instante sin gritar.
     · El panel de resultados va EN FLUJO (empuja el contenido), no flotando.
       Dentro de un modal un dropdown absoluto se recorta o pelea por z-index;
       además "en flujo" refuerza que esto es un paso del formulario.
     · Cada fila es un renglón de índice: raíl de 2px a la izquierda que se
       enciende SOLO en la fila activa (cursor de teclado / hover). Sin fondos
       deslizándose por toda la fila.
     · Columna derecha monoespaciada y tabular con la CLAVE de la entidad
       (documento / matrícula): quien mete datos a volumen escanea por número,
       no por nombre — alinearlos hace que la columna se lea de un vistazo.
     · Pie que SIEMPRE habla: contador "n de N", cargando, error o vacío. Una
       lista vacía nunca puede significar a la vez "no hay" y "falló".

   Reglas de casa: solo tokens --atlas-*, cero CSS inline, clases namespaced
   .aep-*, prefers-reduced-motion respetado.
   ========================================================================= */

.aep {
	position: relative;
	display: block;
	font-family: var(--atlas-font-sans);
}

/* ── Campo de búsqueda: línea base, no caja ──────────────────────────────── */

.aep-field {
	display: flex;
	align-items: center;
	gap: var(--atlas-space-2);
	padding: var(--atlas-space-1) 0;
	border-bottom: 1px solid var(--atlas-border-strong);
	transition: border-color .15s ease;
}

.aep-field:focus-within {
	border-bottom-color: var(--atlas-color-primary);
	box-shadow: 0 1px 0 0 var(--atlas-color-primary);
}

.aep-field-icon {
	flex: 0 0 auto;
	font-size: 1rem;
	line-height: 1;
	color: var(--atlas-text-faint);
}

.aep-field:focus-within .aep-field-icon {
	color: var(--atlas-color-primary);
}

.aep-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: var(--atlas-space-1) 0;
	font-size: .875rem;
	line-height: 1.35;
	color: var(--atlas-text);
}

.aep-input:focus {
	outline: none;
}

.aep-input::placeholder {
	color: var(--atlas-text-faint);
}

/* Botón de limpiar / spinner del campo comparten hueco a la derecha. */
.aep-field-action {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: var(--atlas-radius-full);
	background: transparent;
	color: var(--atlas-text-muted);
	font-size: .875rem;
	line-height: 1;
	cursor: pointer;
}

.aep-field-action:hover,
.aep-field-action:focus-visible {
	background: var(--atlas-surface-sunken);
	color: var(--atlas-text);
}

.aep-field-action:focus-visible {
	outline: 2px solid var(--atlas-border-focus);
	outline-offset: 1px;
}

.aep-spin {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	margin-right: var(--atlas-space-1);
	border: 2px solid var(--atlas-border);
	border-top-color: var(--atlas-color-primary);
	border-radius: var(--atlas-radius-full);
	animation: aep-spin .7s linear infinite;
}

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

/* ── Panel de resultados (en flujo) ──────────────────────────────────────── */

.aep-panel {
	margin-top: var(--atlas-space-2);
	border: 1px solid var(--atlas-border);
	border-radius: var(--atlas-radius-lg);
	background: var(--atlas-surface);
	box-shadow: var(--atlas-shadow-2);
	overflow: hidden;
	animation: aep-reveal .12s ease-out;
}

@keyframes aep-reveal {
	from { opacity: 0; transform: translateY(-2px); }
	to   { opacity: 1; transform: none; }
}

.aep-panel-hidden {
	display: none;
}

.aep-list {
	max-height: 268px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* ── Fila ────────────────────────────────────────────────────────────────── */

.aep-row {
	display: flex;
	align-items: center;
	gap: var(--atlas-space-3);
	width: 100%;
	padding: var(--atlas-space-2) var(--atlas-space-3);
	border: 0;
	border-left: 2px solid transparent;
	border-bottom: 1px solid var(--atlas-border);
	background: var(--atlas-surface);
	text-align: left;
	cursor: pointer;
}

.aep-row:last-child {
	border-bottom: 0;
}

.aep-row:hover,
.aep-row-active {
	background: var(--atlas-surface-muted);
	border-left-color: var(--atlas-color-primary);
}

.aep-row:focus-visible {
	outline: 2px solid var(--atlas-border-focus);
	outline-offset: -2px;
}

.aep-avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--atlas-radius-full);
	background: var(--atlas-surface-sunken);
	color: var(--atlas-text-muted);
	font-size: .625rem;
	font-weight: 600;
	letter-spacing: .04em;
	overflow: hidden;
}

/* Assets: cuadrado redondeado en vez de círculo — no son caras. */
.aep-avatar-square {
	border-radius: var(--atlas-radius-sm);
	font-size: .875rem;
}

.aep-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Columna de identidad: título sobre subtítulo. Va en flex-column a propósito — son <span>, y sin
   esto se pintarían en la MISMA línea y el text-overflow no aplicaría (no funciona en inline). */
.aep-identity {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.aep-title {
	max-width: 100%;
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--atlas-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.aep-sub {
	max-width: 100%;
	font-size: .6875rem;
	line-height: 1.3;
	color: var(--atlas-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Columna clave: mono + cifras tabulares para que se lea en vertical. */
.aep-key {
	flex: 0 0 auto;
	max-width: 40%;
	font-family: var(--atlas-font-mono);
	font-size: .6875rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
	color: var(--atlas-text-secondary);
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.aep-dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: var(--atlas-radius-full);
	background: var(--atlas-text-faint);
}

.aep-dot-ok {
	background: var(--atlas-sev-ok);
}

.aep-dot-off {
	background: var(--atlas-sev-danger);
}

/* ── Estados (nunca una lista vacía muda) ────────────────────────────────── */

.aep-state {
	display: flex;
	align-items: center;
	gap: var(--atlas-space-2);
	padding: var(--atlas-space-4) var(--atlas-space-3);
	font-size: .75rem;
	color: var(--atlas-text-muted);
}

.aep-state-error {
	color: var(--atlas-sev-danger-text);
	background: var(--atlas-sev-danger-bg);
}

.aep-retry {
	margin-left: auto;
	border: 0;
	background: transparent;
	padding: 0;
	font-size: .75rem;
	font-weight: 600;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.aep-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--atlas-space-2);
	padding: var(--atlas-space-2);
	font-size: .6875rem;
	color: var(--atlas-text-faint);
}

/* ── Pie: contador + pistas de teclado ───────────────────────────────────── */

.aep-foot {
	display: flex;
	align-items: center;
	gap: var(--atlas-space-2);
	padding: var(--atlas-space-1) var(--atlas-space-3);
	border-top: 1px solid var(--atlas-border);
	background: var(--atlas-surface-muted);
	font-size: .625rem;
	color: var(--atlas-text-muted);
}

.aep-foot-count {
	font-family: var(--atlas-font-mono);
	font-variant-numeric: tabular-nums;
}

.aep-foot-hint {
	margin-left: auto;
	white-space: nowrap;
}

.aep-kbd {
	display: inline-block;
	min-width: 14px;
	padding: 0 3px;
	border: 1px solid var(--atlas-border-strong);
	border-radius: var(--atlas-radius-xs);
	background: var(--atlas-surface);
	font-family: var(--atlas-font-mono);
	font-size: .5625rem;
	line-height: 1.4;
	text-align: center;
	color: var(--atlas-text-secondary);
}

/* ── Selección confirmada ────────────────────────────────────────────────── */

.aep-selected {
	display: flex;
	align-items: center;
	gap: var(--atlas-space-3);
	margin-top: var(--atlas-space-2);
	padding: var(--atlas-space-2) var(--atlas-space-3);
	border: 1px solid var(--atlas-border);
	border-left: 2px solid var(--atlas-color-primary);
	border-radius: var(--atlas-radius-md);
	background: var(--atlas-surface-muted);
}

.aep-selected .aep-key {
	max-width: 45%;
}

@media (max-width: 480px) {
	.aep-key {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aep-panel {
		animation: none;
	}

	.aep-spin {
		animation-duration: 2s;
	}

	.aep-field {
		transition: none;
	}
}