/**
 * Buscador de instrucciones DGT — estilos. Mobile-first, reutiliza los
 * design tokens del child theme (--tp-*) con valores de respaldo, mismo
 * espíritu que asistente-medidas-vehiculo/public/css/frontend.css.
 */

.ld-container {
	--ld-radius: var(--tp-radius-lg, 12px);
	--ld-line: var(--tp-line, #E7E9F0);
	--ld-ink: var(--tp-ink, #07090F);
	--ld-ink-2: var(--tp-ink-2, #3D4354);
	--ld-paper: var(--tp-paper, #FCFCFD);
	--ld-paper-2: var(--tp-paper-2, #F5F6F9);
	--ld-accent: var(--tp-blue, #2563EB);
	--ld-accent-dark: var(--tp-blue-dark, #1D4ED8);
	--ld-success-bg: var(--tp-success-bg, #dcfce7);
	--ld-success-text: var(--tp-success-text, #166534);

	font-family: var(--tp-font-ui, Inter, system-ui, sans-serif);
	color: var(--ld-ink);
	max-width: 100%;
}

.ld-container * {
	box-sizing: border-box;
}

.ld-toolbar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 14px;
}

.ld-search-wrap {
	position: relative;
}

.ld-search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ld-ink-2);
	pointer-events: none;
}

.ld-search-input {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px 10px 38px;
	border: 1px solid var(--ld-line);
	border-radius: var(--tp-radius-md, 8px);
	font-size: 0.95rem;
	background: var(--ld-paper);
	color: var(--ld-ink);
}

.ld-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ld-select {
	/* min-width:0 es imprescindible: por defecto un <select> dentro de un
	   flex item usa min-width:auto (tamaño de contenido), así que una
	   opción larga (p.ej. una categoría larga) puede forzar overflow
	   horizontal en móvil aunque el contenedor tenga flex-wrap:wrap.
	   Detectado con Playwright a 375/390px (Fase C5/B21). */
	flex: 1 1 140px;
	min-width: 0;
	max-width: 100%;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid var(--ld-line);
	border-radius: var(--tp-radius-md, 8px);
	background: var(--ld-paper);
	color: var(--ld-ink);
	font-size: 0.88rem;
}

.ld-btn-clear {
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid var(--ld-line);
	border-radius: var(--tp-radius-md, 8px);
	background: transparent;
	color: var(--ld-ink-2);
	font-size: 0.85rem;
	cursor: pointer;
}

.ld-meta-row {
	margin-bottom: 8px;
	font-size: 0.82rem;
	color: var(--ld-ink-2);
}

.ld-results {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ld-no-results,
.ld-error {
	padding: 20px;
	text-align: center;
	color: var(--ld-ink-2);
	background: var(--ld-paper-2);
	border-radius: var(--tp-radius-md, 8px);
}

/* --- Resultado: card apilada en mobile, sin tablas horizontales --- */

.ld-row {
	border: 1px solid var(--ld-line);
	border-radius: var(--tp-radius-md, 8px);
	background: var(--ld-paper);
	padding: 14px 16px;
}

.ld-row-main {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 6px;
}

.ld-row-code {
	font-weight: 600;
	font-family: var(--tp-font-mono, monospace);
	font-size: 0.92rem;
}

.ld-row-date {
	font-size: 0.82rem;
	color: var(--ld-ink-2);
	white-space: nowrap;
}

.ld-row-subject {
	margin: 0 0 8px;
	font-size: 0.92rem;
	line-height: 1.45;
}

.ld-row-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.ld-tag {
	font-size: 0.72rem;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--ld-paper-2);
	color: var(--ld-ink-2);
}

.ld-tag-status {
	background: var(--ld-success-bg);
	color: var(--ld-success-text);
}

.ld-row-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ld-btn {
	min-height: 44px;
	padding: 8px 14px;
	border-radius: var(--tp-radius-md, 8px);
	border: 1px solid var(--ld-line);
	background: var(--ld-paper);
	color: var(--ld-ink);
	font-size: 0.85rem;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ld-btn-primary {
	background: var(--ld-accent);
	border-color: var(--ld-accent-dark);
	color: #fff;
}

.ld-btn-toggle-docs {
	align-self: flex-start;
}

.ld-docs-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 6px;
	padding-top: 10px;
	border-top: 1px dashed var(--ld-line);
}

.ld-docs-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ld-docs-item-label {
	font-size: 0.85rem;
	color: var(--ld-ink-2);
}

.ld-doc-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ld-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 16px;
}

.ld-page-info {
	font-size: 0.85rem;
	color: var(--ld-ink-2);
}

.ld-disclaimer-bar {
	margin-top: 18px;
	padding: 10px 12px;
	border: 1px solid var(--ld-line);
	border-radius: var(--tp-radius-sm, 6px);
	background: var(--ld-paper-2);
}

.ld-disclaimer-text {
	margin: 0;
	font-size: 0.78rem;
	color: var(--ld-ink-2);
}

.ld-disclaimer-warning {
	margin: 6px 0 0;
	font-size: 0.78rem;
	color: var(--tp-warning-text, #854d0e);
}

.ld-skeleton {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ld-skeleton-row {
	height: 84px;
	border-radius: var(--tp-radius-md, 8px);
	background: linear-gradient(90deg, var(--ld-paper-2) 25%, var(--ld-line) 37%, var(--ld-paper-2) 63%);
	background-size: 400% 100%;
	animation: ld-skeleton-loading 1.4s ease infinite;
}

@keyframes ld-skeleton-loading {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.ld-skeleton-row {
		animation: none;
	}
}

/* --- >= 640px: fila con más aire, botones en línea --- */
@media (min-width: 640px) {
	.ld-toolbar {
		flex-direction: row;
		align-items: center;
	}
	.ld-search-wrap {
		flex: 1 1 auto;
	}
	.ld-row-actions {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.ld-doc-links {
		flex-direction: row;
	}
}

/* --- >= 900px: cabecera de fila tipo "tabla" (grid, no <table>) --- */
@media (min-width: 900px) {
	.ld-row {
		display: grid;
		grid-template-columns: 160px 110px 1fr 200px auto;
		align-items: center;
		gap: 14px;
		padding: 12px 18px;
	}
	.ld-row-main {
		display: contents;
	}
	.ld-row-code {
		grid-column: 1;
	}
	.ld-row-date {
		grid-column: 2;
	}
	.ld-row-subject {
		grid-column: 3;
		margin: 0;
	}
	.ld-row-tags {
		grid-column: 4;
		margin: 0;
		flex-direction: column;
		align-items: flex-start;
	}
	.ld-row-actions {
		grid-column: 5;
	}
}