/*
	Lollipop Studio — domain/lollipop.mng.studio/ui/ui.css
	Skin de rebranding.

	Paleta tomada del sistema real de lollipop.red:
		--brand   #d63032
		--brand-2 #be2c2c
		--ink     rgba(15,23,42,.92)   pizarra fria, no marron
		--muted   rgba(15,23,42,.62)

	ALCANCE: SOLO COLOR.
	Una version anterior tambien cambiaba tipografia y forma de los
	botones (Roboto 900, mayusculas, pildora). Eso rompia la identidad
	visual de la interfaz: en el ranking convivian botones capitalizados
	con otros en mayuscula, y el peso tipografico quedaba alto en todo.
	Un skin de dominio no deberia tocar tipografia ni geometria: para
	eso esta la base. Aca se cambian colores y el logo, nada mas.
--------------------------------------------------------------------- */

:root{
	--brand_rgb:214,48,50;
	--brand2_rgb:190,44,44;
	--ink_rgb:15,23,42;
	--ink_soft_rgb:71,85,105;
	--ok_rgb:34,155,106;
	--warn_rgb:201,146,42;
	--danger_rgb:143,29,29;

	--brand_logo:url('int/logo-studio.png');
	--brand_icon:url('int/icon-192.png');

	--fg:rgba(var(--ink_rgb),.92);
	--muted:rgba(var(--ink_rgb),.62);

	--bg-top:#ffffff;
	--bg-mid:#fdf4f4;
	--bg-bot:#ffffff;

	--glow-a:rgba(var(--brand_rgb),.04);
	--glow-b:rgba(var(--brand2_rgb),.03);

	/*	Opacas. Antes eran blancos al 86% y 78% sobre un fondo con
		degradado rosado: cuatro capas translucidas apiladas daban un
		gris parejo en toda la pantalla.	*/
	--surface:#ffffff;
	--surface-soft:#ffffff;

	--bd:rgba(var(--ink_rgb),.10);
	--shadow:0 18px 60px rgba(0,0,0,.10);
	--inset:0 1px 0 rgba(255,255,255,.92) inset;

	--accent:rgb(var(--brand2_rgb));
	--accent2:rgb(var(--brand_rgb));

	--focus:rgba(var(--brand_rgb),.40);
	--ring:rgba(var(--brand_rgb),.13);

	--field-bg:#ffffff;
	--field-fg:rgba(var(--ink_rgb),.92);
	--field-bd:rgba(var(--ink_rgb),.12);

	--ctl-bg:#ffffff;
	--ctl-bd:rgba(var(--ink_rgb),.12);
	--ctl-fg:rgba(var(--ink_rgb),.88);
	--ctl-muted:rgba(var(--ink_rgb),.62);

	--ring-bd:rgba(var(--brand_rgb),.30);

	--tg-bg:rgba(var(--ink_rgb),.06);
	--tg-bd:rgba(var(--ink_rgb),.10);
	--tg-fg:rgba(var(--ink_rgb),.84);
	--tg-hover-bg:#ffffff;
	--tg-hover-bd:rgba(var(--brand_rgb),.20);
	--tg-hover-fg:rgba(var(--ink_rgb),.92);
	--tg-on-bg:rgba(var(--brand_rgb),.09);
	--tg-on-bd:rgba(var(--brand_rgb),.26);
	--tg-on-fg:rgba(var(--brand2_rgb),.96);
}

html,
body{
	color-scheme:light;
}

body::before{
	background:
		radial-gradient(1040px 620px at 50% -12%, rgba(var(--brand_rgb),.10), transparent 62%),
		radial-gradient(720px 520px at 88% 14%, rgba(var(--brand2_rgb),.07), transparent 58%),
		linear-gradient(180deg, var(--bg-top), var(--bg-mid) 62%, var(--bg-bot));
}

/* ------------------------------------------------------------------
	marca
------------------------------------------------------------------ */
/*	El formulario alineado a la izquierda: centrado competia con el
	panel de marca, que ya tiene su texto abajo a la izquierda.	*/
#access-ui{
	text-align:left;
}

/*	Sobre el rojo del panel, el logo normal se pierde: va la version
	clara. Se declara acotado a #access para que el resto del sistema
	siga usando el de siempre.	*/
#access{
	--brand_logo:url("int/logo-studio-light.png");
}

#access .logo{
	height:7.6rem;
	margin:0 0 1.4rem 0;
	background:none;
}

#release .logo{
	height:6.6rem;
	margin:0 0 3rem 0;
	background:none;
}

#access .logo::before, #release .logo::before{
	content:"";
	display:block;
	width:100%;
	height:100%;
	background:var(--brand_logo) center/contain no-repeat;
}

/*	En el acceso el logo va pegado al margen, alineado con el nombre
	del estudio que esta al pie del panel.	*/
#access .logo::before{
	background-position:left center;
}

/*	El logo de la navegacion.
	Centrado y con aire propio: alineado a la izquierda y sin margen
	quedaba pegado al borde superior y sin relacion con la tarjeta del
	usuario que tiene debajo. El ancho se acota para que no llegue a
	los bordes de la columna.	*/
#nav .brand-logo{
	height:4.4rem;
	max-width:16rem;
	margin:1.6rem auto 2rem;
	background:var(--brand_logo) center/contain no-repeat;
}

/*	El panel de la modelo trae su acento fijo en azul (#315efb). El
	estudio lo redefine acá, igual que en el acceso: sin esto la
	pestaña activa y los detalles salían azules en un sistema que es
	rojo.	*/
/*	El panel de la modelo trae su acento por defecto en azul. Se
	redefine el triplete y de ahi salen todos los derivados: bordes,
	fondos suaves, la pestaña activa y las etiquetas.	*/
.mapp{
	--a_rgb:190 44 44;
	--a2_rgb:214 48 50;
}

.mapp .mlogo{
	background:var(--brand_icon) left/contain no-repeat;
	width:4rem;
}

/* ------------------------------------------------------------------
	login
	Misma imagen abstracta que usa la base, con el tono rotado del azul
	al rojo de marca (214 -> 359 grados). La geometria y la luz de la
	original quedan intactas.
------------------------------------------------------------------ */
#access::before{
	content:"";
	position:fixed;
	inset:0;
	z-index:-2;
	background:url("int/login-bg.jpg") center/cover no-repeat;
}

#access::after{
	content:"";
	position:fixed;
	inset:0;
	z-index:-1;
	pointer-events:none;
	background:radial-gradient(760px 320px at 50% 58%, rgba(var(--ink_rgb),.06), transparent 72%);
}

/*	El panel de marca y el boton toman `--a`, que la base del acceso
	lee de `--brand2_rgb`. Los degradados y sombras que habia aca eran
	del login anterior, con otra estructura, y ya no aplicaban.	*/

#access label{
	color:rgba(var(--ink_rgb),.70);
}

#access .input input{
	background:#ffffff;
	border-color:rgba(var(--ink_rgb),.14);
}

#access .foot a,
#access .footer a{
	color:rgba(var(--brand2_rgb),.94);
}

/* ------------------------------------------------------------------
	navegacion
------------------------------------------------------------------ */
#nav{
	--accent:214,48,50;
	--ink:15,23,42;
	background:
		radial-gradient(140% 90% at 10% 0%, rgba(var(--accent),.08), transparent 55%),
		radial-gradient(90% 70% at 100% 16%, rgba(190,44,44,.06), transparent 50%),
		linear-gradient(180deg, #ffffff, #fdf6f6);
	border-right:1px solid rgba(var(--ink),.08);
	box-shadow:0 18px 55px rgba(var(--ink),.07);
}

#nav .user{
	background:#ffffff;
	border-color:rgba(var(--ink),.08);
}

#nav .avatar{
	border-color:rgba(var(--ink),.10);
}

#nav #menu a:hover{
	background:rgba(var(--brand_rgb),.06);
	border-color:rgba(var(--brand_rgb),.14);
	color:rgba(var(--brand2_rgb),.96);
}

#nav #menu a.on,
#nav #menu a.active,
#nav #menu a.Selected{
	background:linear-gradient(180deg, rgba(var(--brand_rgb),.11), rgba(var(--brand2_rgb),.06));
	border-color:rgba(var(--brand_rgb),.20);
	color:rgba(var(--brand2_rgb),.98);
	box-shadow:0 10px 26px rgba(var(--ink_rgb),.06);
}

/* ------------------------------------------------------------------
	controles — solo color, sin tocar forma ni tipografia
------------------------------------------------------------------ */
.badge{
	border-color:rgba(var(--ink_rgb),.10);
	background:rgba(var(--ink_rgb),.05);
	color:rgba(var(--ink_rgb),.84);
}

.card{
	border-color:rgba(var(--ink_rgb),.09);
	background:var(--surface);
	box-shadow:0 18px 60px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.92) inset;
}

.card:hover{
	border-color:rgba(var(--brand_rgb),.16);
}

.btn{
	border-color:rgba(var(--ink_rgb),.12);
	background:var(--ctl-bg);
	color:var(--ctl-fg);
	box-shadow:0 1px 0 rgba(255,255,255,.24) inset, 0 10px 28px rgba(0,0,0,.06);
}

.btn.ghost{
	background:var(--surface);
}

.btn:focus,
.ui-icon:hover,
.combo .spot:focus,
.input input:focus,
.input select:focus,
.input textarea:focus,
input.input:focus,
select.input:focus,
textarea.input:focus{
	border-color:var(--ring-bd);
	box-shadow:0 0 0 4px var(--ring);
}

/*	El skin pintaba el primario con degradado pero no definia el hover,
	asi que en el rollover ganaba `.btn.primary:hover` de la base, que
	usa `background:var(--accent2)`, un color solido. Un degradado no
	interpola con un solido: la transicion de .12s no puede animar y
	el navegador salta de golpe. Sumado al `filter:brightness(1.08)`
	de la base, eso era el destello.

	Se resuelve dando al primario un color solido y dejando que la base
	haga el brillo en el hover. Un boton no necesita degradado.	*/
.btn.primary{
	color:#fff;
	background:rgb(var(--brand2_rgb));
	border-color:rgba(var(--brand2_rgb),.30);
	box-shadow:0 6px 16px rgba(var(--brand2_rgb),.18);
}

/*	--accent2 es lo que usa `.btn.primary:hover` de la base: apuntandolo
	al mismo color, el hover solo cambia el brillo y no el fondo.	*/
.btn.primary:hover{
	background:rgb(var(--brand2_rgb));
	border-color:rgba(var(--brand2_rgb),.40);
}

.btn.primary.off,
.btn.primary:disabled{
	color:rgba(255,255,255,.74);
	background:rgba(var(--brand2_rgb),.42);
	border-color:rgba(var(--brand2_rgb),.16);
	box-shadow:none;
}

/*	La marca es roja, asi que peligro no puede ser rojo brillante o se
	confunde con el primario. Granate oscuro y plano.	*/
.btn.danger{
	color:#fff;
	background:rgb(var(--danger_rgb));
	border-color:rgba(var(--danger_rgb),.86);
	box-shadow:0 10px 24px rgba(var(--danger_rgb),.22);
}

.btn.danger:hover{
	background:rgba(var(--danger_rgb),.92);
}

.ui-icon{
	border-color:rgba(var(--ink_rgb),.12);
	background:#fff;
	color:rgba(var(--ink_rgb),.72);
}

.combo::after{
	border-top-color:rgba(var(--ink_rgb),.60);
}

.ui-switch{
	border-color:rgba(var(--ink_rgb),.10);
	background:#ffffff;
}

.ui-switch .tx{
	color:rgba(var(--ink_rgb),.84);
}

.ui-switch .sw{
	border-color:rgba(var(--ink_rgb),.14);
	background:rgba(var(--ink_rgb),.10);
}

.ui-switch input:checked + .sw{
	background:rgba(var(--brand_rgb),.80);
	border-color:rgba(var(--brand2_rgb),.32);
}

/* ------------------------------------------------------------------
	dashboard
------------------------------------------------------------------ */
#dash #card-income{ --a:214 48 50; }
#dash #card-time{ --a:190 44 44; }
#dash #card-postulations{ --a:196 84 66; }
#dash #card-rooms{ --a:166 52 52; }
#dash #card-calendar{ --a:184 68 58; }
#dash #card-cases{ --a:201 146 42; }

/*	TRES NIVELES, TRES REGLAS.
	Estaban los tres en el mismo grupo de selectores, asi que cualquier
	cambio en el fondo se aplicaba por igual a la tarjeta, al grupo y a
	la celda. Al pasar las celdas a gris, las tarjetas tambien se
	volvieron grises: ese era el oscurecimiento.

	1 · la tarjeta es blanca y lleva el borde exterior	*/
#dash .card{
	border-color:rgba(var(--ink_rgb),.09);
	background:var(--surface);
}

/*	2 · el grupo interno solo agrupa: borde tenue, sin fondo	*/
#dash .box,
#dash .pane{
	border-color:rgba(var(--ink_rgb),.09);
	background:transparent;
}

/*	3 · la celda es lo unico con gris	*/
#dash .meta,
#dash .tile,
#dash .kpi,
#dash .item{
	border-color:transparent;
	background:rgba(var(--ink_rgb),.02);
}

/*	Las celdas secundarias van sin fondo propio: el gris lo pone el
	grupo `.facts` que las contiene. Si lo llevaran ellas tambien,
	quedaria gris sobre gris.	*/
#dash .facts{
	background:rgba(var(--ink_rgb),.025);
}

#dash .fact{
	border-color:transparent;
	background:transparent;
}

/*	`.meta > span` y no descendiente: varias celdas envuelven el
	numero en un span dentro del <b>, y con el selector descendiente
	ese numero tomaba el color de etiqueta.
	.mini y .mini-k quedan mas apagados: son calificadores del dato.	*/
#dash .hint,
#dash .muted,
#dash .meta > span,
#dash .tag,
#dash .pill{
	color:rgba(var(--ink_rgb),.62);
}

#dash .mini,
#dash .mini-k{
	color:rgba(var(--ink_rgb),.45);
}

/*	.tag y .pill tampoco llevan caja: no son accionables, son rotulos
	de unidad. El skin solo les da el tono.	*/
#dash .tag,
#dash .pill{
	border-color:transparent;
	background:transparent;
	color:rgba(var(--ink_rgb),.58);
}

/* ------------------------------------------------------------------
	postulaciones
------------------------------------------------------------------ */
#postulations .po-top,
#postulations .po-card2,
#postulations .po-search{
	border-color:rgba(var(--ink_rgb),.10);
}

#postulations .po-top{
	background:#ffffff;
	box-shadow:0 18px 60px rgba(0,0,0,.08);
}

#postulations .po-search,
#postulations .ui-date input[type="date"]{
	background:#ffffff;
}

#postulations .po-lbl,
#postulations .po-search .po-label{
	color:rgba(var(--ink_rgb),.46);
}

#postulations .ui-date input[type="date"]:focus{
	border-color:rgba(var(--brand_rgb),.34);
	box-shadow:0 0 0 4px rgba(var(--brand_rgb),.12);
}

#postulations .po-note{
	border-color:rgba(var(--ink_rgb),.10);
	background:#ffffff;
	color:rgba(var(--ink_rgb),.82);
}

#postulations .po-send{
	background:rgb(var(--brand2_rgb));
	border-color:rgba(var(--brand2_rgb),.26);
	color:#fff;
}

#postulations .po-send:hover{
	background:rgb(var(--brand_rgb));
}

/* ------------------------------------------------------------------
	operacion, equipo, timeline
------------------------------------------------------------------ */
#operation{
	--a:214 48 50;
}

#operation .op-pill.pr1{
	border-color:rgba(var(--brand_rgb),.28);
	background:linear-gradient(180deg, rgba(var(--brand_rgb),.12), rgba(var(--brand_rgb),.06));
	color:rgba(var(--brand2_rgb),.98);
}

#operation .op-card[aria-current="true"] .op-pill.pr1{
	border-color:rgba(var(--brand_rgb),.36);
	background:linear-gradient(180deg, rgba(var(--brand_rgb),.18), rgba(var(--brand_rgb),.08));
}

#team .tm-fpo{
	background:
		radial-gradient(520px 220px at 30% 20%, rgba(var(--brand_rgb),.13), transparent 60%),
		radial-gradient(420px 240px at 85% 40%, rgba(var(--brand2_rgb),.09), transparent 62%),
		linear-gradient(180deg, rgba(var(--ink_rgb),.04), rgba(var(--ink_rgb),.02));
}

#timeline .tl-media-box{
	background:
		radial-gradient(900px 320px at 30% 25%, rgba(var(--brand_rgb),.13), transparent 60%),
		radial-gradient(640px 360px at 85% 45%, rgba(var(--brand2_rgb),.09), transparent 62%),
		linear-gradient(180deg, #ffffff, #ffffff);
}

/* ------------------------------------------------------------------
	estados activos — reemplaza los azules de la base
------------------------------------------------------------------ */
#settings .st-chip.on,
#ranking .rk-chip.on,
#ranking .rk-ops .on,
#income .in-tab.on,
#income .in-chip.on,
#treasury .tr-chip.on,
#model .md-chip.on,
#model .md-tag.on,
#agenda .ag-chip.on{
	background:rgba(var(--brand_rgb),.09);
	border-color:rgba(var(--brand_rgb),.26);
	color:rgba(var(--brand2_rgb),.96);
}

/*	Solidos, no degradados: los modulos definen su propio hover con un
	color plano y la transicion no puede interpolar degradado a solido.	*/
#income .in-btn-primary,
#income .in-save,
#model .md-btn-primary,
#treasury .tr-btn-primary,
#agenda .ag-btn-primary,
#ark .up-btn-primary{
	background:rgb(var(--brand2_rgb));
	border-color:rgba(var(--brand2_rgb),.26);
	color:#fff;
}

#income .in-btn-primary:hover,
#income .in-save:hover,
#model .md-btn-primary:hover,
#treasury .tr-btn-primary:hover,
#agenda .ag-btn-primary:hover,
#ark .up-btn-primary:hover{
	background:rgb(var(--brand_rgb));
}

#income .in-tbl tbody tr:hover td,
#treasury .tr-table tbody tr:hover td,
#model .md-table tbody tr:hover td,
#ranking .rk-table tbody tr:hover td{
	background:rgba(var(--brand_rgb),.04);
}

#models .mo-item:hover,
#team .tm-item:hover,
#timeline .tl-card:hover,
#dash .item.is-link:hover{
	border-color:rgba(var(--brand_rgb),.22);
	background:#ffffff;
}

#income .in-q:focus,
#models .mo-search input:focus,
#team .tm-search input:focus,
#timeline .tl-search input:focus,
#agenda input:focus,
#treasury input:focus,
#treasury select:focus,
#treasury textarea:focus,
#income input:focus,
#income select:focus,
#income textarea:focus,
#settings input:focus,
#settings select:focus,
#settings textarea:focus,
#model input:focus,
#model select:focus,
#model textarea:focus{
	border-color:rgba(var(--brand_rgb),.26);
	box-shadow:0 0 0 4px rgba(var(--brand_rgb),.11);
}

.up{
	--accent:rgba(var(--brand2_rgb),.92);
}

.up.is-over{
	border-color:rgba(var(--brand_rgb),.55);
	box-shadow:0 0 0 4px rgba(var(--brand_rgb),.12);
}

/* ------------------------------------------------------------------
	liquidacion — fila de anticipos
------------------------------------------------------------------ */
#liq .liq-table tr.is-prepay td{
	color:rgba(var(--brand2_rgb),.96);
}

/* ------------------------------------------------------------------
	movil
------------------------------------------------------------------ */
@media (max-width:980px){
	#nav{
		border-right:0;
		border-bottom:1px solid rgba(var(--ink_rgb),.08);
	}

	#nav .brand-logo{
		height:3.6rem;
		margin:1.2rem auto 1.6rem;
	}
}

/*	Recordatorio de los dias de anticipo (sabados, domingos y
	festivos) bajo el tiempo de conexion (model-ctx/home.js). Discreto:
	mismo cuerpo que las notas de la tarjeta, en ambar suave.	*/
/*	Tres tiempos bajo "Tiempo de conexion" (home.js, lp_time): el total
	grande con su etiqueta, y debajo la barra partida con la quincena
	(azul) y el anticipo (ambar). Todo en una linea por lado: la
	tarjeta es angosta y nada debe partirse ni saltar al animarse.	*/
.mapp .mhome-time .mhome-time-amount{
	flex-wrap:nowrap;
}
.mapp .mhome-time .mhome-time-amount .num{
	font-variant-numeric:tabular-nums;
}
.mapp .mhome-time .mhome-time-amount small{
	font-size:10px;
	font-weight:600;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--mut2);
	white-space:nowrap;
}
.mapp .mhome-time-split{
	margin-top:14px;
}
.mapp .mhome-time-split .bar{
	display:flex;
	height:8px;
	border-radius:999px;
	overflow:hidden;
	background:rgb(var(--k_rgb) / .06);
}
.mapp .mhome-time-split .bar i{
	display:block;
	height:100%;
	background:#2563eb;
	transition:width .6s ease;
}
.mapp .mhome-time-split .bar i.ant{
	background:#d97706;
}
.mapp .mhome-time-split .legend{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	gap:12px;
	margin-top:8px;
}
.mapp .mhome-time-split .legend div{
	display:flex;
	flex-direction:column;
	gap:1px;
	min-width:0;
}
.mapp .mhome-time-split .legend span{
	font-size:10px;
	font-weight:600;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--mut2);
	white-space:nowrap;
}
.mapp .mhome-time-split .legend b{
	font-size:20px;
	line-height:1.15;
	font-weight:600;
	letter-spacing:-.02em;
	font-variant-numeric:tabular-nums;
	color:var(--fg);
	white-space:nowrap;
}
/*	La quincena (#mcx-home-time-q, mudada desde la cifra grande) hereda
	el tamano del renglon; la meta ("/ 45:00", #mcx-home-time-goal) va
	al lado, chica.	*/
.mapp .mhome-time-split .legend b span{
	font:inherit;
	letter-spacing:inherit;
	color:inherit;
}
.mapp .mhome-time-split .legend b small{
	margin-left:4px;
	font-size:12px;
	font-weight:600;
	letter-spacing:0;
	color:var(--mut2);
}
.mapp .mhome-time-split .legend .ant{
	text-align:right;
}
.mapp .mhome-time-split .legend .ant span,
.mapp .mhome-time-split .legend .ant b{
	color:#b45309;
}
.mapp .mhome-lp-weekend{
	margin-top:10px;
	padding:8px 12px;
	border-radius:12px;
	background:rgba(180,83,9,.08);
	color:#8a4b06;
	font-size:13px;
	line-height:1.45;
}
.mapp .mhome-lp-weekend b{
	color:inherit;
	font-weight:600;
}


/*	Tarjeta de tokens (model-ctx/home.php) — de "Te faltan" hacia abajo
	=================================================================
	Mas baja: los tres recuadros, una fila de datos con rotulo en vez
	de pildoras, y la calculadora en una sola fila. En el celular los
	tres recuadros siguen en fila (el portal los apila y la tarjeta se
	iba al doble de alto); para que quepa "10.000 tks" la unidad se
	achica.	*/
.mapp .mhome-income .mhome-mini-v small{
	font:inherit;
	letter-spacing:inherit;
	color:inherit;
}

/*	Fila de datos. Flex y no grid: las celdas que no aplican (anticipo,
	descuentos, "deberias ir" con la quincena cerrada) se ocultan y las
	demas se reparten el ancho.	*/
.mapp .mhome-income .lp-stats{
	margin-top:12px;
	display:flex;
	border-top:1px solid var(--bd);
	border-bottom:1px solid var(--bd);
}
.mapp .mhome-income .lp-stats > div{
	flex:1 1 0;
	min-width:0;
	padding:9px 0 9px 12px;
}
.mapp .mhome-income .lp-stats > div[hidden]{ display:none; }
.mapp .mhome-income .lp-stats > div:first-child{ padding-left:0; }
.mapp .mhome-income .lp-stats > div + div{ border-left:1px solid var(--bd); }
.mapp .mhome-income .lp-stats span{
	display:block;
	font-size:10px;
	font-weight:600;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--mut2);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.mapp .mhome-income .lp-stats b{
	display:block;
	margin-top:4px;
	font-size:14.5px;
	font-weight:600;
	letter-spacing:-.02em;
	color:var(--fg);
	white-space:nowrap;
	font-variant-numeric:tabular-nums;
}
.mapp .mhome.is-past #mcx-home-lp-should-c{ display:none; }

/*	Calculadora en una fila.	*/
.mapp .mhome-income .lp-calc{
	margin-top:14px;
	padding-top:12px;
	border-top:1px solid rgb(var(--k_rgb) / .08);
}
.mapp .mhome-income .lp-calc .mhome-calc-q{
	margin:0;
}
/*	Para que sirve, en una linea corta bajo el rotulo.	*/
.mapp .mhome-income .lp-calc-help{
	margin:4px 0 10px;
	font-size:12.5px;
	line-height:1.45;
	color:var(--mut2);
}
.mapp .mhome-income .lp-calc-go{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px;
}
.mapp .mhome-income .lp-calc-f{
	position:relative;
	display:inline-flex;
	align-items:center;
	width:116px;
	height:36px;
	border:1px solid var(--bd2);
	border-radius:var(--r-cell);
	background:rgb(var(--w_rgb));
	transition:border-color .16s ease;
}
.mapp .mhome-income .lp-calc-f:focus-within{ border-color:rgb(var(--a_rgb) / .45); }
/*	16px evita que iOS haga zoom al enfocar.	*/
.mapp .mhome-income .lp-calc-f input{
	width:100%;
	min-width:0;
	height:100%;
	padding:0 34px 0 10px;
	border:0;
	outline:0;
	background:transparent;
	font:inherit;
	font-size:16px;
	font-weight:600;
	font-variant-numeric:tabular-nums;
	color:var(--fg);
}
.mapp .mhome-income .lp-calc-f em{
	position:absolute;
	right:10px;
	font-style:normal;
	font-size:11.5px;
	font-weight:600;
	color:var(--mut2);
	pointer-events:none;
}
.mapp .mhome-income .lp-calc-arr{ color:rgb(var(--k_rgb) / .35); }
/*	El resultado va con su flecha, a la derecha; si no cabe en la
	fila, baja entero.	*/
.mapp .mhome-income .lp-calc-res{ display:inline-flex; align-items:center; gap:10px; margin-left:auto; }
.mapp .mhome-income #mcx-home-calc-cop{
	min-width:92px;
	text-align:right;
	font-size:17px;
	font-weight:600;
	letter-spacing:-.02em;
	font-variant-numeric:tabular-nums;
	white-space:nowrap;
	color:var(--fg);
}
/*	Horas: el numero es corto.	*/
.mapp .mhome-income .lp-calc-h{ width:76px; }
/*	El porcentaje con que sale el resultado, chico al lado.	*/
.mapp .mhome-income #mcx-home-calc-sub{
	font-size:12px;
	font-weight:600;
	color:var(--mut2);
	white-space:nowrap;
}

/*	"Si llegas a": una fila liviana por tramo; la de hoy, resaltada.	*/
.mapp .mhome-income .lp-tiers{ margin-top:14px; }
.mapp .mhome-income .lp-tiers[hidden]{ display:none; }
.mapp .mhome-income .lp-tiers-k{
	margin-bottom:4px;
	font-size:10px;
	font-weight:600;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--mut2);
}
.mapp .mhome-income .lp-tiers ol{
	margin:0;
	padding:0;
	list-style:none;
}
.mapp .mhome-income .lp-tiers li{
	display:grid;
	grid-template-columns:1fr auto auto;
	gap:18px;
	padding:5px 0;
	font-size:12.5px;
	color:var(--mut2);
	font-variant-numeric:tabular-nums;
}
.mapp .mhome-income .lp-tiers li + li{ border-top:1px solid var(--bd); }
.mapp .mhome-income .lp-tiers li b{
	min-width:92px;
	text-align:right;
	font-weight:500;
}
.mapp .mhome-income .lp-tiers li.on{
	font-weight:600;
	color:var(--fg);
}
.mapp .mhome-income .lp-tiers li.on b{ font-weight:600; }

@media (max-width:820px){
	.mapp .mhome-income .mhome-mini-grid{
		grid-template-columns:repeat(3, minmax(0, 1fr));
		gap:8px;
	}
	.mapp .mhome-income .mhome-mini{ padding:11px 10px; }
	.mapp .mhome-income .mhome-mini-v{
		margin-top:7px;
		font-size:18px;
	}
	.mapp .mhome-income .mhome-mini-v small{
		font-size:10.5px;
		font-weight:600;
		letter-spacing:0;
		color:var(--mut2);
	}

	/*	Dos por fila, sin separadores verticales (con celdas ocultas
		no se sabe cual queda a la izquierda).	*/
	.mapp .mhome-income .lp-stats{
		display:grid;
		grid-template-columns:1fr 1fr;
		column-gap:12px;
		border-top:0;
	}
	.mapp .mhome-income .lp-stats > div,
	.mapp .mhome-income .lp-stats > div + div{
		padding:9px 0;
		border-left:0;
		border-top:1px solid var(--bd);
	}

	.mapp .mhome-income .lp-calc-go{ gap:8px; }
	.mapp .mhome-income .lp-calc-f{ width:108px; }
	.mapp .mhome-income .lp-calc-h{ width:64px; }
	.mapp .mhome-income #mcx-home-calc-cop{
		min-width:0;
		font-size:16px;
	}
}


/*	Programa de referidas (model-ctx/home.php y home.js)
	=================================================================
	Tarjeta chica bajo la de tiempo. En escritorio la grilla de arriba
	pasa a dos filas: la foto y los tokens ocupan las dos, el tiempo la
	primera (estira) y referidas la segunda (a su alto). Bajo 1100px
	va al final de la fila de arriba, a todo el ancho: despues del
	tiempo.	*/
@media (min-width:1100px){
	.mapp .mhome-top{ grid-template-rows:minmax(0, 1fr) auto; }
	.mapp .mhome-top > .mhome-profile{ grid-column:1; grid-row:1 / span 2; }
	.mapp .mhome-top > .mhome-income{ grid-column:2; grid-row:1 / span 2; }
	.mapp .mhome-top > .mhome-time{ grid-column:3; grid-row:1; }
	.mapp .mhome-top > .lp-ref-card{ grid-column:3; grid-row:2; }
}
@media (max-width:1099px){
	.mapp .mhome-top > .lp-ref-card{ grid-column:1 / -1; order:1; }
}

.mapp .lp-ref-card{
	-webkit-appearance:none;
	appearance:none;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:6px;
	width:100%;
	padding:18px 22px;
	border-color:rgb(var(--a_rgb) / .2);
	background:
		linear-gradient(135deg, rgb(var(--a_rgb) / .11), rgb(var(--a2_rgb) / .02) 75%),
		rgb(var(--w_rgb) / .86);
	font:inherit;
	text-align:left;
	color:var(--fg);
	cursor:pointer;
	transition:border-color .16s ease, transform .16s ease;
}
.mapp .lp-ref-card:hover{
	border-color:rgb(var(--a_rgb) / .4);
	transform:translateY(-1px);
}
.mapp .lp-ref-card:focus-visible{
	outline:2px solid rgb(var(--a_rgb) / .55);
	outline-offset:2px;
}
.mapp .lp-ref-card .mhome-kicker{ color:rgb(var(--a_rgb)); }
.mapp .lp-ref-card-t{
	font-size:19px;
	line-height:1.2;
	font-weight:600;
	letter-spacing:-.025em;
}
.mapp .lp-ref-card-t b{
	font-weight:700;
	color:rgb(var(--a_rgb));
	white-space:nowrap;
}
.mapp .lp-ref-card-go{
	margin-top:2px;
	font-size:13px;
	font-weight:600;
	color:var(--mut2);
}
.mapp .lp-ref-card-go i{
	display:inline-block;
	font-style:normal;
	transition:transform .16s ease;
}
.mapp .lp-ref-card:hover .lp-ref-card-go i{ transform:translateX(3px); }
@media (prefers-reduced-motion:reduce){
	.mapp .lp-ref-card,
	.mapp .lp-ref-card-go i{ transition:none; }
	.mapp .lp-ref-card:hover{ transform:none; }
}

/*	En las Normas el total no es un bono mas: sin viñeta y con raya.	*/
.mapp .mstudio-doc .lp-ref-total{
	margin-top:8px;
	padding-top:8px;
	border-top:1px solid var(--bd);
	list-style:none;
}

/*	Ventana: un ui-modal (ui/base/ui.css) con los colores del portal.
	El cuerpo es el texto de las Normas (#lp-ref-doc): los rotulos
	(.lp-ref-k) van como kicker y los bonos como una linea de tiempo.	*/
.mapp .lp-ref-modal .ui-modal-card{
	display:flex;
	flex-direction:column;
	width:min(540px, calc(100vw - 32px));
	border-color:var(--bd);
	background:rgb(var(--w_rgb));
	color:var(--fg);
}
.mapp .lp-ref-modal .ui-modal-hd{ border-color:var(--bd); }
.mapp .lp-ref-modal .ui-modal-tt .h{ color:var(--fg); }
.mapp .lp-ref-modal .ui-modal-bd{
	flex:1 1 auto;
	min-height:0;
	max-height:none;
	font-size:14px;
	line-height:1.55;
	color:var(--fg);
}
.mapp .lp-ref-modal .ui-modal-bd p{ margin:0 0 12px; }
.mapp .lp-ref-modal .lp-ref-k{
	margin:18px 0 6px;
	font-size:11px;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--mut2);
}
.mapp .lp-ref-modal .lp-ref-k b{ font-weight:600; }
.mapp .lp-ref-modal ol{
	margin:0 0 12px;
	padding-left:20px;
}
.mapp .lp-ref-modal ol li{ margin:3px 0; }
.mapp .lp-ref-modal ol li::marker{ color:var(--mut2); font-weight:600; }
.mapp .lp-ref-modal ol:last-child{
	margin-bottom:0;
	font-size:13px;
	color:var(--mut);
}

.mapp .lp-ref-modal .lp-ref-say{
	padding:10px 12px;
	border-radius:12px;
	background:rgb(var(--a_rgb) / .07);
}
.mapp .lp-ref-modal .lp-ref-say b{
	font-weight:600;
	color:rgb(var(--a_rgb));
}

.mapp .lp-ref-modal .lp-ref-bonos{
	margin:0 0 12px;
	padding:0;
	list-style:none;
}
.mapp .lp-ref-modal .lp-ref-bonos li{
	position:relative;
	display:grid;
	grid-template-columns:92px minmax(0, 1fr);
	gap:12px;
	align-items:baseline;
	padding:7px 0 7px 20px;
}
.mapp .lp-ref-modal .lp-ref-bonos li::before{
	content:'';
	position:absolute;
	left:0;
	top:14px;
	width:9px;
	height:9px;
	border-radius:50%;
	background:rgb(var(--a_rgb));
}
.mapp .lp-ref-modal .lp-ref-bonos li::after{
	content:'';
	position:absolute;
	left:4px;
	top:23px;
	bottom:-14px;
	width:1px;
	background:rgb(var(--a_rgb) / .25);
}
.mapp .lp-ref-modal .lp-ref-bonos li:nth-last-child(2)::after{ display:none; }
.mapp .lp-ref-modal .lp-ref-bonos b{
	font-size:16px;
	font-weight:700;
	letter-spacing:-.02em;
	font-variant-numeric:tabular-nums;
	color:rgb(var(--a_rgb));
	white-space:nowrap;
}
.mapp .lp-ref-modal .lp-ref-bonos .lp-ref-total{
	margin-top:6px;
	padding-top:11px;
	border-top:1px solid var(--bd);
}
.mapp .lp-ref-modal .lp-ref-bonos .lp-ref-total::before,
.mapp .lp-ref-modal .lp-ref-bonos .lp-ref-total::after{ display:none; }
.mapp .lp-ref-modal .lp-ref-bonos .lp-ref-total b{ color:var(--fg); }
.mapp .lp-ref-modal .lp-ref-bonos .lp-ref-total span{
	font-weight:600;
	color:var(--mut);
}

.mapp .lp-ref-modal .ui-modal-ft{
	justify-content:space-between;
	border-color:var(--bd);
	background:transparent;
}
.mapp .lp-ref-modal .lp-ref-normas{
	font-size:13px;
	font-weight:600;
	color:var(--mut);
	text-decoration:underline;
	text-underline-offset:3px;
}
.mapp .lp-ref-wa{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	height:42px;
	padding:0 18px;
	border-radius:999px;
	background:#15803d;
	font-size:14px;
	font-weight:600;
	color:#fff;
	text-decoration:none;
	white-space:nowrap;
	transition:background .16s ease;
}
.mapp .lp-ref-wa:hover{ background:#166534; }
.mapp .lp-ref-wa svg{
	width:18px;
	height:18px;
	fill:none;
	stroke:currentColor;
	stroke-width:2;
	stroke-linejoin:round;
}

/*	Modo oscuro: el rojo de marca sobre fondo oscuro se aclara.	*/
html.dark .mapp .lp-ref-card .mhome-kicker,
html.dark .mapp .lp-ref-card-t b,
html.dark .mapp .lp-ref-modal .lp-ref-say b,
html.dark .mapp .lp-ref-modal .lp-ref-bonos b{ color:color-mix(in srgb, rgb(var(--a_rgb)) 55%, #fff); }
html.dark .mapp .lp-ref-modal .lp-ref-bonos .lp-ref-total b{ color:var(--fg); }

@media (max-width:560px){
	.mapp .lp-ref-modal{ padding:16px; }
	.mapp .lp-ref-modal .ui-modal-card{ max-height:calc(100dvh - 32px); }
	.mapp .lp-ref-modal .lp-ref-bonos li{ grid-template-columns:82px minmax(0, 1fr); gap:10px; }
	.mapp .lp-ref-modal .ui-modal-ft{
		flex-direction:column-reverse;
		align-items:stretch;
		gap:12px;
	}
	.mapp .lp-ref-modal .lp-ref-normas{ text-align:center; }
}