/* ****************************************
   *************** / :ROOT ****************
   **************************************** */

/*
Lista de selectores que se permite utilizar para superar la precedencia de la forma antigua de css:
(A posteriori, va a ser necesario quitarlos para seguir con la nueva implementacion)

- #form


*/




/*
Escala 10–90:

- 10 -> máximo contraste (texto fuerte / íconos)
- 20 -> alto contraste
- 30 -> énfasis medio (bordes, hover)
- 40 -> énfasis leve
- 50 -> color base (referencia)
- 60 -> superficie
- 70 -> superficie suave
- 80 -> fondo suave
- 90 -> mínimo contraste (casi fondo)

Regla:
- siempre sube contraste, nunca cambia el "color semántico"
*/

:root {
    /* NEUTRAL: color base (gama blanco/negro) */
    --c-neutral-10: #111111;
    --c-neutral-20: #2e2e2e;
    --c-neutral-30: #525252;
    --c-neutral-40: #757575;
    --c-neutral-50: #9e9e9e;
    --c-neutral-60: #c2c2c2;
    --c-neutral-70: #e0e0e0;
    --c-neutral-80: #f0f0f0;
    --c-neutral-90: #fafafa;
	
	/* PRIMARY: color principal de marca (acciones clave, CTAs) */
    --c-primary-10: #010611;
    --c-primary-20: #151f2f;
    --c-primary-30: #2c394b;
    --c-primary-40: #414f64;
    --c-primary-50: #4e5d74;
    --c-primary-60: #5c6b81;
    --c-primary-70: #758399;
    --c-primary-80: #94a2b6;
    --c-primary-90: #bac6d9;

    /* SECONDARY: soporte visual (menos protagonismo que primary) */
    --c-secondary-10: #425c15;
    --c-secondary-20: #5f7f2e;
    --c-secondary-30: #7aa043;
    --c-secondary-40: #91bb55;
    --c-secondary-50: #a0cc61;
    --c-secondary-60: #b0db76;
    --c-secondary-70: #cdf697;
    --c-secondary-80: #e8ffb9;
    --c-secondary-90: #ebffc2;

    /* ACCENT: destacar elementos específicos (links, foco, detalles) */
    --c-accent-10: #002323;
    --c-accent-20: #004242;
    --c-accent-30: #005f5f;
    --c-accent-40: #127878;
    --c-accent-50: #228888;
    --c-accent-60: #3c9696;
    --c-accent-70: #5fafae;
    --c-accent-80: #87cecd;
    --c-accent-90: #b4f2f1;

    /* NEON: alto impacto visual (alerts visuales, foco extremo) */
    --c-neon-10: #005800;
    --c-neon-20: #007d00;
    --c-neon-30: #079e0f;
    --c-neon-40: #24bb26;
    --c-neon-50: #32cd32;
    --c-neon-60: #51dc4e;
    --c-neon-70: #7af675;
    --c-neon-80: #a8ffa1;
    --c-neon-90: #bcffb5;
}

:root {
    /* HIGHLIGHT: destacar visualmente (NO es estado, es énfasis) */
    --c-highlight-10: #001c58;
    --c-highlight-20: #003b84;
    --c-highlight-30: #1657ac;
    --c-highlight-40: #296fcd;
    --c-highlight-50: #357fe3;
    --c-highlight-60: #498ff0;
    --c-highlight-70: #68aaff;
    --c-highlight-80: #8fcbff;
    --c-highlight-90: #bcf2ff;

    /* MUTED: menor relevancia (texto secundario, deshabilitado) */
    --c-muted-10: #202020;
    --c-muted-20: #3d3d3d;
    --c-muted-30: #585858;
    --c-muted-40: #707070;
    --c-muted-50: #7f7f7f;
    --c-muted-60: #8e8e8e;
    --c-muted-70: #a7a7a7;
    --c-muted-80: #c7c7c7;
    --c-muted-90: #ededed;

	/* COMPLETED: proceso finalizado (no necesariamente exitoso) */
    --c-completed-10: #4a006c;
    --c-completed-20: #71009a;
    --c-completed-30: #9408c4;
    --c-completed-40: #b228e8;
    --c-completed-50: #c537ff;
    --c-completed-60: #d352ff;
    --c-completed-70: #ea78ff;
    --c-completed-80: #ffa2ff;
    --c-completed-90: #ffd1ff;

    /* SUCCESS: resultado positivo confirmado */
    --c-success-10: #003400;
    --c-success-20: #005600;
    --c-success-30: #007600;
    --c-success-40: #009115;
    --c-success-50: #10a223;
    --c-success-60: #36b13d;
    --c-success-70: #5fca60;
    --c-success-80: #8ae989;
    --c-success-90: #baffb8;

    /* WARNING: posible problema */
    --c-warning-10: #524a00;
    --c-warning-20: #746b00;
    --c-warning-30: #948900;
    --c-warning-40: #aea300;
    --c-warning-50: #bfb306;
    --c-warning-60: #cec339;
    --c-warning-70: #e7de67;
    --c-warning-80: #ffff97;
    --c-warning-90: #ffffa9;

    /* REVIEW: requiere atención humana (nivel intermedio real) */
    --c-review-10: #754200;
    --c-review-20: #9e6000;
    --c-review-30: #c37c00;
    --c-review-40: #e39407;
    --c-review-50: #f7a31a;
    --c-review-60: #ffb441;
    --c-review-70: #ffd16d;
    --c-review-80: #fff099;
    --c-review-90: #fff2a7;

    /* DANGER: problema confirmado / crítico */
    --c-danger-10: #610000;
    --c-danger-20: #900000;
    --c-danger-30: #bb0000;
    --c-danger-40: #df1b0e;
    --c-danger-50: #f62c1d;
    --c-danger-60: #ff4a38;
    --c-danger-70: #ff705c;
    --c-danger-80: #ff9b85;
    --c-danger-90: #ffcab4;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	height: 100%;
}

body {
	font-family: Inter, "Segoe UI", system-ui, sans-serif;
	color: var(--c-neutral-10);
	-webkit-font-smoothing: antialiased;
}

/* Contenedor de la página: imagen a la izquierda y formulario a la derecha */
.page {
	display: flex;
	height: 100%;
}

[class^=cil-] {
	font-size: 18px;
	display: inline-block;
}

/* Panel izquierdo */
.art {
	flex: 1.25;
	position: relative;
	overflow: hidden;
	background: var(--c-primary-10);
}

/* Foto de fondo (img/login.background.jpg) */
.art .photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

/* Imagen generada (la mancha). Con foto queda escondida encima, hasta que se elige con el switch. */
.art .blob {
	position: absolute;
	inset: 0;
	background: var(--blob-img, none) center / cover no-repeat;
	transition: opacity .9s;
}

.art.has-photo .blob {
	opacity: 0;
	pointer-events: none;
}

.login-blob .art.has-photo .blob {
	opacity: 1;
	pointer-events: auto;
}

/* Con la mancha elegida la foto no se ve. Al cambiar con el switch se esconde recién cuando la mancha
   terminó de aparecer. */
.login-blob .art.has-photo .photo {
	visibility: hidden;
	transition: visibility 0s 1.5s;
}

.art canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition: opacity .9s;
}

.art .grain {
	mix-blend-mode: overlay;
	opacity: .06;
}

.shade,
.flash {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

.shade {
	background: radial-gradient(120% 90% at 50% 50%, transparent 55%, color-mix(in srgb, var(--c-neutral-10) 35%, transparent));
}

.flash {
	opacity: 0;
	background: radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, var(--c-neutral-90) 32%, transparent), color-mix(in srgb, var(--c-neutral-90) 8%, transparent) 60%, transparent);
}

.flash.rayo {
	animation: rayo 1.1s ease-out;
}

@keyframes rayo {
	5% {
		opacity: .9;
	}
	12% {
		opacity: .1;
	}
	18% {
		opacity: .6;
	}
	26% {
		opacity: .05;
	}
	40% {
		opacity: .8;
	}
	100% {
		opacity: 0;
	}
}

/* Juego escondido (login-game.js): el destello se puede tocar y, mientras se juega, el cursor es la nave. */
.art.destello {
	cursor: pointer;
}

.art.jugando {
	cursor: none;
}

/* Juegos en los que el mouse marca el rumbo (Tron): el cursor se ve, como una cruz. */
.art.jugando.con-mouse {
	cursor: crosshair;
}

/* Mientras el juego está en pantalla, el switch foto / mancha no aparece. */
.art.juego .artSwitch {
	display: none;
}

.art canvas.game {
	z-index: 1;
	transition: opacity .4s;
}

/* Barra de pruebas (login-art.jsp): día, clima y juego elegidos a mano. Oculta salvo en desarrollo:
   login.js le agrega la clase dev si mGlobal.isDev. */
.pruebas {
	display: none;
	position: fixed;
	left: 12px;
	bottom: 12px;
	z-index: 10;
	gap: 6px;
	padding: 6px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--c-neutral-10) 55%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.pruebas.dev {
	display: flex;
}

.pruebas select {
	font: inherit;
	font-size: 12px;
	padding: 4px 6px;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, var(--c-neutral-90) 30%, transparent);
	background: var(--c-neutral-90);
	color: var(--c-neutral-10);
	cursor: pointer;
}

/* Regenerar e información: escondidos por ahora (para mostrarlos va display: flex). */
.ctrls {
	position: absolute;
	left: 28px;
	bottom: 28px;
	z-index: 2;
	display: none;
	gap: 10px;
}

/* Switch foto / mancha: invisible del todo, aparece solo al pasar el mouse por encima. */
.artSwitch {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	padding: 12px;
	border: 0;
	background: none;
	cursor: pointer;
	opacity: 0;
	transition: opacity .3s;
}

.artSwitch:hover,
.artSwitch:focus-visible {
	opacity: 1;
}

/* Lugar del switch: login.js elige al azar uno de 8 en cada carga (data-pos). Las esquinas son tl,
   tr, br y bl; los medios de cada lado, t, r, b y l. Sin data-pos queda abajo a la derecha. */
.artSwitch[data-pos="tl"],
.artSwitch[data-pos="t"],
.artSwitch[data-pos="tr"] {
	top: 16px;
	bottom: auto;
}

.artSwitch[data-pos="l"],
.artSwitch[data-pos="r"] {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

.artSwitch[data-pos="tl"],
.artSwitch[data-pos="l"],
.artSwitch[data-pos="bl"] {
	left: 16px;
	right: auto;
}

.artSwitch[data-pos="t"],
.artSwitch[data-pos="b"] {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}

.artSwitch .track {
	display: block;
	position: relative;
	width: 76px;
	height: 42px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--c-neutral-90) 30%, transparent);
	background: color-mix(in srgb, var(--c-neutral-10) 35%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--c-neutral-10) 25%, transparent);
	transition: background .3s;
}

.artSwitch .knob {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-neutral-90);
	color: var(--c-primary-30);
	transition: transform .3s;
}

.artSwitch .knob i {
	font-size: 17px;
}

.artSwitch[aria-pressed="true"] .track {
	background: color-mix(in srgb, var(--c-primary-50) 70%, transparent);
}

.artSwitch[aria-pressed="true"] .knob {
	transform: translateX(34px);
}

.pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 44px;
	min-width: 44px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--c-neutral-90) 25%, transparent);
	background: color-mix(in srgb, var(--c-neutral-90) 12%, transparent);
	color: var(--c-neutral-90);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--c-neutral-10) 25%, transparent);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s;
}

.pill:hover {
	background: color-mix(in srgb, var(--c-neutral-90) 20%, transparent);
}

#info {
	padding: 0;
}

.pill i {
	transition: transform .6s;
}

.spin i {
	transform: rotate(-360deg);
}

/* Formulario */
.side {
	width: 600px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding: 56px 90px;
}

/* El margen automático centra el formulario y, si es más alto que la pantalla, deja hacer scroll */
.form {
	width: 100%;
	margin: auto 0;
}

.logo {
	width: 210px;
	display: block;
	margin: 0 0 40px -6px;
}

h1 {
	font-size: 28px;
	margin: 0 0 30px;
}

.lbl {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-neutral-20);
	margin-bottom: 8px;
}

.lbl a {
	font-weight: 500;
	color: var(--c-primary-50);
	text-decoration: none;
}

.field {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 50px;
	padding: 0 8px 0 16px;
	margin-bottom: 20px;
	border: 1px solid var(--c-neutral-70);
	border-radius: 12px;
	background: var(--c-neutral-90);
	color: var(--c-neutral-50);
}

.field:focus-within {
	border-color: var(--c-primary-50);
	background: transparent;
	color: var(--c-primary-50);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary-50) 14%, transparent);
}

.field input {
	flex: 1;
	height: 100%;
	border: 0;
	outline: 0;
	background: none;
	font: inherit;
	font-size: 15px;
	color: var(--c-neutral-10);
}

.eye {
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--c-neutral-40);
	display: grid;
	place-items: center;
	cursor: pointer;
}

.eye.on {
	color: var(--c-primary-50);
}

.ck {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--c-neutral-20);
	margin: 4px 0 26px;
	cursor: pointer;
}

.ck input {
	position: absolute;
	opacity: 0;
}

.ck .box {
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: 1.5px solid var(--c-neutral-60);
	display: grid;
	place-items: center;
	color: transparent;
}

.ck .box i {
	font-size: 12px;
}

.btn i,
.mclose i {
	font-size: 16px;
}

.ck input:checked + .box {
	background: var(--c-primary-50);
	border-color: var(--c-primary-50);
	color: var(--c-neutral-90);
}

.error {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: -6px 0 18px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--c-danger-90);
	color: var(--c-danger-30);
	font-size: 13.5px;
}

.success {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--c-success-90);
	color: var(--c-success-30);
	font-size: 13.5px;
}

.hint {
	margin: -16px 0 26px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-neutral-30);
}

/* Lista de mensajes de Mojito (mojito2:messagelist) */
div[data-control="messageList"] .mojito-messagelist-div.hidden {
	display: none;
}

div[data-control="messageList"] .mojito-messagelist-div > div {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 13.5px;
	cursor: pointer;
}

div[data-control="messageList"] .mojito-messagelist-div ul {
	flex: 1;
	margin: 0;
	padding: 0;
	list-style: none;
}

div[data-control="messageList"] .mojito-messagelist-div > div > i {
	display: none;
}

div[data-control="messageList"] .mojito-messagelist-error-div {
	background: var(--c-danger-90);
	color: var(--c-danger-30);
}

div[data-control="messageList"] .mojito-messagelist-warning-div {
	background: var(--c-warning-90);
	color: var(--c-warning-30);
}

div[data-control="messageList"] .mojito-messagelist-success-div,
div[data-control="messageList"] .mojito-messagelist-info-div {
	background: var(--c-success-90);
	color: var(--c-success-30);
}

.links {
	margin-top: 18px;
	text-align: center;
	font-size: 13.5px;
}

.links a {
	color: var(--c-primary-50);
	text-decoration: none;
	font-weight: 500;
}

.copyright {
	margin-top: 32px;
	text-align: center;
	font-size: 12px;
	color: var(--c-neutral-50);
}

.btn {
	width: 100%;
	height: 52px;
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	color: var(--c-neutral-90);
	background: linear-gradient(90deg, var(--c-primary-60), var(--c-primary-70));
	box-shadow: 0 10px 24px color-mix(in srgb, var(--c-primary-50) 32%, transparent);
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

/* Modal */
.modal {
	position: fixed;
	inset: 0;
	z-index: 9;
	display: grid;
	place-items: center;
	padding: 20px;
	background: color-mix(in srgb, var(--c-primary-10) 45%, transparent);
	backdrop-filter: blur(6px);
}

.modal[hidden] {
	display: none;
}

.mcard {
	position: relative;
	max-width: 520px;
	background: var(--c-neutral-90);
	border-radius: 20px;
	padding: 34px 36px 30px;
	box-shadow: 0 30px 80px color-mix(in srgb, var(--c-primary-10) 40%, transparent);
}

.mclose {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 10px;
	background: var(--c-neutral-80);
	display: grid;
	place-items: center;
	cursor: pointer;
}

.mcard h2 {
	margin: 0 40px 8px 0;
	font-size: 21px;
}

.mcard p {
	margin: 0;
	color: var(--c-neutral-30);
	font-size: 13.5px;
	line-height: 1.55;
}

.mcard > p {
	margin-bottom: 22px;
	font-size: 14px;
}

.mitem {
	display: flex;
	gap: 16px;
	padding: 16px 0;
	border-top: 1px solid var(--c-neutral-80);
}

.mico {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--c-primary-90);
	color: var(--c-primary-50);
	display: grid;
	place-items: center;
	flex: none;
}

.mico i {
	font-size: 20px;
}

.mitem h3 {
	margin: 2px 0 4px;
	font-size: 15px;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.chips span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--c-neutral-30);
	padding: 4px 9px 4px 7px;
	border-radius: 999px;
	background: var(--c-neutral-80);
	border: 1px solid transparent;
}

.chips b {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.chips i {
	font-size: 15px;
	color: var(--c-primary-50);
}

.chips .hoy {
	background: var(--c-neutral-90);
	border-color: var(--c-primary-80);
	color: var(--c-neutral-10);
	font-weight: 600;
}

@media (max-width: 960px) {
	.art {
		display: none;
	}

	.side {
		width: 100%;
		padding: 32px 20px;
	}

	.form {
		max-width: 420px;
	}
}