/**
 * Componente: Input (.vdp-input)
 * Patrón inspirado en shadcn/ui Input (base-nova).
 * @see https://ui.shadcn.com/docs/components/base/input
 */

.vdp-input,
input.vdp-input,
select.vdp-input,
textarea.vdp-input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--vdp-input-height, 44px);
	padding: var(--vdp-input-padding, 10px 12px);
	border: 1px solid var(--vdp-input-border, var(--vdp-line));
	border-radius: var(--vdp-input-radius, 8px);
	background: var(--vdp-input-bg, var(--vdp-paper));
	color: var(--vdp-ink);
	font-family: var(--vdp-font-ui);
	font-size: var(--vdp-text-body-sm);
	font-weight: var(--vdp-weight-regular);
	line-height: var(--vdp-lh-body);
	box-shadow: 0 1px 2px rgba(23, 23, 20, 0.04);
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		background-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

textarea.vdp-input {
	min-height: 96px;
	resize: vertical;
}

select.vdp-input {
	padding-right: 36px;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--vdp-muted) 50%),
		linear-gradient(135deg, var(--vdp-muted) 50%, transparent 50%);
	background-position:
		calc(100% - 18px) calc(50% - 2px),
		calc(100% - 12px) calc(50% - 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.vdp-input::placeholder {
	color: var(--vdp-muted);
	opacity: 1;
}

.vdp-input:hover:not(:disabled):not([aria-invalid="true"]) {
	border-color: color-mix(in srgb, var(--vdp-ink) 22%, var(--vdp-line));
}

.vdp-input:focus,
.vdp-input:focus-visible {
	border-color: var(--vdp-ink);
	outline: none;
	box-shadow:
		0 0 0 2px var(--vdp-paper),
		0 0 0 4px rgba(23, 23, 20, 0.12);
}

.vdp-input:disabled,
.vdp-input[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.55;
	background: color-mix(in srgb, var(--vdp-soft) 45%, var(--vdp-paper));
}

.vdp-input[aria-invalid="true"] {
	border-color: var(--vdp-color-error);
}

.vdp-input[aria-invalid="true"]:focus,
.vdp-input[aria-invalid="true"]:focus-visible {
	box-shadow:
		0 0 0 2px var(--vdp-paper),
		0 0 0 4px color-mix(in srgb, var(--vdp-color-error) 28%, transparent);
}

.vdp-input[type="file"] {
	padding: 8px 12px;
}

.vdp-input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 6px 12px;
	border: 1px solid var(--vdp-line);
	border-radius: 6px;
	background: var(--vdp-soft);
	color: var(--vdp-ink);
	font-family: var(--vdp-font-ui);
	font-size: var(--vdp-text-caption);
	font-weight: var(--vdp-weight-medium);
	cursor: pointer;
}