/* Ilumina Auth Login — estilos */
:root {
	--ial-brown-dark: #48190D;
	--ial-brown-mid: #5E1C07;
	--ial-gray: #565656;
	--ial-border: #DDD7D4;
	--ial-cream: #F5EFE7;
}

.ial-plain {
	max-width: 480px;
	margin: 0 auto;
	background: none;
	box-shadow: none;
	border: none;
	accent-color: var(--ial-brown-dark);
	font-family: 'Inter', sans-serif;
}

.ial-heading {
	font-family: 'Inter', sans-serif;
	font-size: 32px;
	font-weight: 400;
	color: var(--ial-brown-dark);
	margin: 0 0 28px;
}

.ial-notice {
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 13px;
	margin-bottom: 18px;
	font-family: 'Inter', sans-serif;
}
.ial-notice-error {
	background: #FBEAEA;
	color: #8A2C1E;
	border: 1px solid #F0C3BC;
}
.ial-notice p { margin: 0 0 4px; }
.ial-notice p:last-child { margin-bottom: 0; }

.ial-panel { display: none; }
.ial-panel.is-active { display: block; }

.ial-label {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--ial-gray);
	margin: 18px 0 8px;
}

.ial-input {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 16px;
	border: 1px solid var(--ial-border);
	border-radius: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: var(--ial-brown-mid);
	background: transparent;
	box-shadow: none;
	outline: none;
}
.ial-input::placeholder { color: #b9aea8; }
.ial-input:focus {
	border-color: var(--ial-brown-mid);
	box-shadow: 0 0 0 2px rgba(94,28,7,0.12);
	outline: none;
}

.ial-pass-wrap { position: relative; }
.ial-pass-wrap .ial-input { padding-right: 44px; }
.ial-pass-toggle {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	color: var(--ial-brown-mid);
	display: flex;
	outline: none;
	box-shadow: none;
}
.ial-pass-toggle:focus,
.ial-pass-toggle:focus-visible { outline: none; box-shadow: none; }

.ial-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: var(--ial-gray);
	margin: 18px 0 4px;
}
.ial-remember input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--ial-brown-dark);
	outline: none;
	box-shadow: none;
}

.ial-btn-row {
	display: flex;
	gap: 14px;
	margin-top: 24px;
}

/* Botón principal (submit): fondo café, texto crema */
.ial-btn {
	flex: 1 1 0;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 700;
	padding: 13px 18px;
	border-radius: 8px;
	border: 1px solid var(--ial-brown-dark);
	cursor: pointer;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .15s ease, color .15s ease;
}
.ial-btn:focus,
.ial-btn:focus-visible { outline: 2px solid var(--ial-brown-mid); outline-offset: 2px; box-shadow: none; }

.ial-btn-solid {
	background: var(--ial-brown-dark);
	color: var(--ial-cream) !important;
}
.ial-btn-solid:hover {
	background: var(--ial-brown-mid);
	color: var(--ial-cream) !important;
}

/* Botón secundario (cambiar de vista): sin fondo, solo borde y texto café; en hover se rellena */
.ial-btn-outline {
	background: transparent;
	color: var(--ial-brown-dark) !important;
}
.ial-btn-outline:hover {
	background: var(--ial-brown-dark);
	color: var(--ial-cream) !important;
}

.ial-already-in { max-width: 420px; margin: 0 auto; text-align: center; font-family: 'Inter', sans-serif; }
.ial-already-text { color: var(--ial-gray); font-size: 15px; margin: 0 0 20px; }
.ial-already-in .ial-btn-row { margin-top: 0; }

@media (max-width: 480px) {
	.ial-btn-row { flex-direction: column; }
}

.ial-notice-info{background:#fdf1ea;border:1px solid #e9c9b8;color:#48190D;border-radius:8px;padding:12px 16px;margin-bottom:16px}
.ial-notice-info p{margin:0}
.ial-input[readonly]{opacity:.75;cursor:not-allowed}

.ial-forgot{margin:8px 0 0;font-size:14px}
.ial-forgot a{color:#48190D}