/* Grúas Torres — Uploader con arrastrar y soltar (sin dependencias) */

.gt-uploader {
	position: relative;
}

/* Input nativo accesible pero fuera de vista (el label sigue enfocándolo). */
.gt-uploader-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Zona de arrastre. */
.gt-uploader-zone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 8px;
	padding: 26px 18px;
	border: 2px dashed #cdd3d1;
	border-radius: 10px;
	background: var(--color-light);
	color: var(--color-text);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.gt-uploader-zone:hover {
	border-color: var(--color-green);
	background: rgba(30, 122, 70, 0.04);
}
.gt-uploader.is-dragover .gt-uploader-zone {
	border-color: var(--color-green);
	border-style: solid;
	background: rgba(30, 122, 70, 0.08);
	box-shadow: 0 0 0 3px rgba(30, 122, 70, 0.12);
}
.gt-uploader-input:focus + .gt-uploader-zone {
	border-color: var(--color-green);
	box-shadow: 0 0 0 3px rgba(30, 122, 70, 0.15);
}

.gt-uploader-icon {
	width: 34px;
	height: 34px;
	color: var(--color-green);
}
.gt-uploader-text {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}
.gt-uploader-text b {
	color: var(--color-green);
	font-weight: 700;
}
.gt-uploader-hint {
	font-size: 12px;
	color: #8a8f8e;
}

/* Archivo seleccionado. */
.gt-uploader-file {
	display: none;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid #d8d8d8;
	border-radius: 10px;
	background: var(--color-white);
}
.gt-uploader.has-file .gt-uploader-zone { display: none; }
.gt-uploader.has-file .gt-uploader-file { display: flex; }

.gt-uploader-file-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: rgba(30, 122, 70, 0.1);
	color: var(--color-green);
}
.gt-uploader-file-icon svg { width: 22px; height: 22px; }
.gt-uploader-file-meta {
	flex: 1;
	min-width: 0;
}
.gt-uploader-file-name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gt-uploader-file-size {
	font-size: 12px;
	color: #8a8f8e;
}
.gt-uploader-remove {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 8px;
	background: var(--color-light);
	color: #6b706f;
	font-size: 18px;
	line-height: 1;
	transition: background 0.15s ease, color 0.15s ease;
}
.gt-uploader-remove:hover { background: #f3d6d3; color: #b3261e; }

/* Estado de error de validación. */
.gt-uploader.is-invalid .gt-uploader-zone {
	border-color: #b3261e;
	background: rgba(179, 38, 30, 0.04);
}
.gt-uploader-error {
	display: none;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
	color: #b3261e;
}
.gt-uploader.is-invalid .gt-uploader-error { display: block; }