/*
 * Login del webmail con el diseño de los sistemas de administración (DAMAGAS/EVO): tarjeta flotante
 * de dos columnas sobre un cielo animado. Identidad Integral Byte (naranja #F57C00 -> dorado #FED136).
 * Solo lo carga templates/login.html. Los campos los genera Roundcube dentro de una tabla
 * (td.title / td.input); aquí se convierten en bloques apilados.
 */

body.ib-login {
	margin: 0;
	min-height: 100vh;
	font-family: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
	font-size: 15px;
	color: #1e293b;
	background: #dce6f0;
	-webkit-font-smoothing: antialiased;
}

body.ib-login * {
	box-sizing: border-box;
}

#ibl-cielo {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	display: block;
}

/* ===== Tarjeta ===== */
.ibl-tarjeta {
	position: relative;
	z-index: 1;
	display: flex;
	width: calc(100% - 32px);
	max-width: 1100px;
	min-height: 600px;
	height: 86vh;
	max-height: 760px;
	margin: 7vh auto;
	border-radius: 24px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
}

/* ===== Columna del formulario ===== */
.ibl-columna-form {
	flex: 0 0 42%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 2.5rem;
	background: #fff;
}

.ibl-form {
	width: 100%;
	max-width: 360px;
}

.ibl-marca {
	text-align: center;
	margin-bottom: 2.25rem;
}

/* Logos en imagen (exportados a 2x; generador: generar_logos_login_webmail.py):
   Integral Byte arriba y, como secundario, Web·Mail en el estilo de Flux·Lector, en violeta */
.ibl-logo,
.ibl-producto {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

.ibl-producto {
	margin-top: 0.35rem;
}

/* Tabla de Roundcube -> campos apilados */
body.ib-login form table,
body.ib-login form tbody,
body.ib-login form tr,
body.ib-login form td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
}

body.ib-login form tr {
	margin-bottom: 1.25rem;
}

body.ib-login form td.title {
	margin-bottom: 0.4rem;
	text-align: left;
}

body.ib-login form td.title label {
	font-size: 0.92rem;
	font-weight: 500;
	color: #1e293b;
}

body.ib-login form td.input {
	position: relative;
}

body.ib-login #rcmloginuser,
body.ib-login #rcmloginpwd,
body.ib-login #rcmloginhost {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 12px 16px 12px 46px;
	font-family: inherit;
	font-size: 1rem;
	color: #1e293b;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: 16px center;
	background-size: 18px 18px;
	box-shadow: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

body.ib-login #rcmloginpwd {
	padding-right: 46px;
}

body.ib-login #rcmloginuser {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E");
}

body.ib-login #rcmloginpwd {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}

body.ib-login #rcmloginuser::placeholder,
body.ib-login #rcmloginpwd::placeholder {
	color: #a8b3c2;
}

body.ib-login #rcmloginuser:focus,
body.ib-login #rcmloginpwd:focus,
body.ib-login #rcmloginhost:focus {
	outline: none;
	border-color: #f57c00;
	box-shadow: 0 0 0 3px rgba(245, 124, 0, 0.2);
}

/* Mostrar/ocultar contraseña */
.ibl-ojo {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	background: transparent no-repeat center / 20px 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.ibl-ojo.ibl-ojo-abierto {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 6.1A10 10 0 0 1 12 6c6.5 0 10 6 10 6a17 17 0 0 1-3.2 3.9M6.6 6.6C3.8 8.4 2 12 2 12s3.5 7 10 7a9.8 9.8 0 0 0 4.4-1'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
}

.ibl-ojo:hover {
	background-color: #f1f5f9;
}

.ibl-ojo:focus-visible {
	outline: 2px solid #f57c00;
	outline-offset: 1px;
}

/* Botón principal */
body.ib-login p.formbuttons {
	margin: 1.75rem 0 0;
	text-align: center;
}

body.ib-login #rcmloginsubmit {
	width: 100%;
	margin: 0;
	padding: 14px 20px;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 600;
	color: #1e293b;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(100deg, #f57c00 0%, #fed136 100%);
	box-shadow: 0 6px 16px -6px rgba(245, 124, 0, 0.6);
	text-shadow: none;
	cursor: pointer;
	transition: transform 0.1s, box-shadow 0.2s, filter 0.2s;
}

body.ib-login #rcmloginsubmit:hover:not(:disabled) {
	transform: scale(1.02);
	filter: brightness(1.04);
	box-shadow: 0 10px 20px -8px rgba(245, 124, 0, 0.7);
}

body.ib-login #rcmloginsubmit:active:not(:disabled) {
	transform: scale(0.98);
}

body.ib-login #rcmloginsubmit:focus-visible {
	outline: 3px solid rgba(245, 124, 0, 0.35);
	outline-offset: 2px;
}

body.ib-login #rcmloginsubmit:disabled {
	opacity: 0.65;
	cursor: wait;
}

/* Mensajes de Roundcube (error de acceso, "Cargando…") */
.ibl-mensajes {
	min-height: 2.75rem;
	margin-top: 1rem;
	text-align: center;
}

body.ib-login #message div {
	display: inline-block;
	padding: 8px 14px;
	font-size: 0.9rem;
	font-weight: 500;
	border-radius: 8px;
	background-image: none;
}

/* larry agrega un icono con un sprite (:after); aquí no se usa */
body.ib-login #message div:after,
body.ib-login #message div:before {
	display: none;
}

body.ib-login #message div.error {
	color: #b91c1c;
	background-color: #fef2f2;
}

body.ib-login #message div.warning {
	color: #92400e;
	background-color: #fffbeb;
}

body.ib-login #message div.confirmation {
	color: #166534;
	background-color: #f0fdf4;
}

body.ib-login #message div.loading {
	color: #64748b;
	background-color: #f8fafc;
}

body.ib-login .noscriptwarning {
	color: #b91c1c;
	font-weight: 600;
}

.ibl-copy {
	margin-top: 1.5rem;
	text-align: center;
	font-size: 0.82rem;
	color: #94a3b8;
}

.ibl-copy a {
	color: #b35500;
}

/* ===== Columna de marca ===== */
.ibl-columna-marca {
	flex: 1 1 58%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4rem 3.5rem;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(ellipse at 80% 15%, rgba(245, 124, 0, 0.28) 0%, rgba(245, 124, 0, 0) 55%),
		radial-gradient(ellipse at 10% 95%, rgba(254, 209, 54, 0.14) 0%, rgba(254, 209, 54, 0) 50%),
		#1c1c1c;
}

/* Monograma IB grande y tenue de fondo (imagen) */
.ibl-columna-marca::before {
	content: "";
	position: absolute;
	right: 2.5rem;
	bottom: -2rem;
	width: 340px;
	height: 300px;
	background: url(images/ib_monograma_login.png) no-repeat right bottom / contain;
	opacity: 0.08;
	pointer-events: none;
}

.ibl-marca-contenido {
	position: relative;
	max-width: 480px;
}

.ibl-titulo {
	margin: 0 0 2rem;
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.25;
	color: #fed136;
	background: linear-gradient(100deg, #f57c00, #fed136);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.ibl-beneficios {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ibl-beneficios li {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1.5rem;
	font-size: 1.1rem;
	font-weight: 300;
	line-height: 1.5;
	color: #f0f4fa;
}

.ibl-check {
	flex: 0 0 24px;
	height: 24px;
	margin-top: 1px;
	background: no-repeat center / 24px 24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23F57C00'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%231c1c1c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ===== Responsivo ===== */
@media (max-width: 900px) {
	.ibl-tarjeta {
		flex-direction: column;
		height: auto;
		max-height: none;
		min-height: 0;
		margin: 16px auto;
		border-radius: 18px;
	}

	.ibl-columna-form {
		flex: 0 0 auto;
		padding: 2.5rem 1.5rem;
	}

	.ibl-columna-marca {
		flex: 0 0 auto;
		padding: 2.25rem 1.5rem;
	}

	.ibl-titulo {
		font-size: 1.5rem;
		margin-bottom: 1.25rem;
	}

	.ibl-beneficios li {
		font-size: 1rem;
		margin-bottom: 1rem;
	}

	.ibl-columna-marca::before {
		width: 180px;
		height: 160px;
		right: 1rem;
		bottom: -1rem;
	}
}

@media (max-width: 480px) {
	.ibl-logo {
		width: 210px;
	}

	.ibl-producto {
		width: 143px;
	}

	.ibl-columna-form {
		padding: 2rem 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.ib-login #rcmloginsubmit,
	body.ib-login #rcmloginuser,
	body.ib-login #rcmloginpwd {
		transition: none;
	}
}