/* ===========================================================================
   FORMULARIOS
   Campos hundidos en la superficie: sombra interior arriba, no borde plano.
   =========================================================================== */

.campo{ margin-bottom: 16px; }

.campo > label,
.etiqueta{
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: 650;
	color: var(--texto-suave);
	letter-spacing: -.005em;
}

input[type=text],input[type=email],input[type=password],input[type=search],
input[type=number],input[type=date],input[type=time],input[type=tel],
select,textarea{
	width: 100%;
	height: 46px;
	padding: 0 15px;
	border: 1px solid var(--linea);
	border-radius: var(--radio-sm);
	background: var(--superficie-honda);
	box-shadow: inset 0 2px 6px rgba(0,0,0,.28);
	color: var(--texto);
	font: inherit;
	font-size: 14.5px;
	outline: none;
	transition: border-color var(--transicion), box-shadow var(--transicion), background var(--transicion);
}

textarea{ height:auto; min-height: 110px; padding: 13px 15px; line-height:1.55; resize: vertical; }

select{
	appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	cursor: pointer;
}

input:hover,select:hover,textarea:hover{ border-color: var(--linea-fuerte); }

input:focus,select:focus,textarea:focus{
	border-color: rgba(var(--marca-1-rgb), .62);
	background: rgba(0,0,0,.16);
	box-shadow: inset 0 2px 6px rgba(0,0,0,.22), 0 0 0 4px rgba(var(--marca-1-rgb), .16);
}

::placeholder{ color: var(--texto-tenue); opacity:1; }

input[aria-invalid="true"],
.campo--error input{
	border-color: rgba(var(--peligro-rgb), .6);
	box-shadow: inset 0 2px 6px rgba(0,0,0,.22), 0 0 0 4px rgba(var(--peligro-rgb), .14);
}

.campo-ayuda{ margin-top: 7px; font-size: 12.5px; color: var(--texto-tenue); }
.campo-error{ margin-top: 7px; font-size: 12.5px; color: var(--peligro); font-weight: 600; }

/* --- Campo con icono a la izquierda. --- */
.campo-icono{ position: relative; }
.campo-icono > .icono{
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--texto-tenue);
	pointer-events: none;
	transition: color var(--transicion);
}
.campo-icono input{ padding-left: 46px; }
.campo-icono input:focus ~ .icono{ color: var(--marca-1); }

.campo-icono .ver-clave{
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border-radius: var(--radio-xs);
	color: var(--texto-tenue);
	transition: all var(--transicion);
}
.campo-icono .ver-clave:hover{ color: var(--texto); background: var(--superficie-2); }

/* --- Casilla. --- */
.casilla{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: var(--texto-suave);
	cursor: pointer;
	user-select: none;
}
.casilla input{
	appearance: none;
	width: 19px; height: 19px;
	flex: 0 0 auto;
	margin: 0;
	border: 1px solid var(--linea-fuerte);
	border-radius: 6px;
	background: var(--superficie-honda);
	box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
	cursor: pointer;
	transition: all var(--transicion);
}
.casilla input:checked{
	border-color: transparent;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 6 3 3 5-6'/%3E%3C/svg%3E") center / 12px no-repeat,
		linear-gradient(135deg, var(--marca-1), var(--marca-2));
	box-shadow: 0 3px 10px rgba(var(--marca-1-rgb), .4);
}

/* --- Buscador de la barra superior. --- */
.buscador{ position: relative; width: min(340px, 100%); }
.buscador input{ height: 42px; padding-left: 44px; border-radius: var(--radio-pil); }
.buscador .icono{
	position:absolute; left:15px; top:50%;
	transform: translateY(-50%);
	color: var(--texto-tenue);
	pointer-events:none;
}

.ver-clave .icono[hidden]{ display: none; }