@import "GeneXusUnanimo.UnanimoWeb.css";
@import "GeneXusReporting.QueryViewerWeb.css";
@import "General.UI.PortalAbonadosVCC_Tokens.css";


@layer General.UI.PortalAbonadosVCC {
/* [gx-css-import ignore - start] */
 
/* [gx-css-import ignore - end] */
/* [gx-css-user-controls - start] */
/* [gx-css-user-controls - end] */
html, body 
{
	font-size : var(--fontsizes_xl);
	background-color : var(--colors_background-page);
	font-family : var(--fonts_primary-regular);
	color : var(--colors_texto);
}
.header__logo 
{
	margin-top : 10px;
	margin-left : 10px;
	max-width : 20%;
	height : auto;
}
.header__logo2 
{
	margin-top : 10px;
	margin-right : 10px;
	height : auto;
}
.banner 
{
	display : block;
	max-width : 100%;
	max-height : 500px;
	object-fit : cover;
}
.header__masterpage 
{
	font-size : var(--fontsizes_l);
	color : #FFFFFF;
}
.header__title 
{
	font-family : var(--fonts_primary-bold);
	font-size : var(--fontsizes_xl);
	letter-spacing : 0.25px;
	line-height : 32px;
	color : #251E27;
	display : grid;
	margin-bottom : 30px;
}
.HeaderContainer 
{
	min-height : 5rem;
	margin-bottom : var(--spacing_stack-xxl);
	background-color : var(--colors_primary);
	box-shadow : 0 4px 12px rgba(0,0,0,0.1);
	--colors_header-separator-bg : #313A5D;
}
.HeaderContainer::before, .HeaderContainer::after 
{
	content : none;
}
.LoginCard 
{
	background-color : #FFFFFF;
	border-radius : 16px;
	box-shadow : 0px 8px 24px rgba(0, 0, 0, 0.06);
	padding : 40px;
	margin : 40px auto;
	max-width : 450px;
	border : 1px solid rgba(0,0,0,0.05);
}
.ContentCard 
{
	background-color : #FFFFFF;
	border-radius : 16px;
	box-shadow : 0px 4px 16px rgba(0, 0, 0, 0.04);
	padding : 32px;
	margin-bottom : 40px;
	border : 1px solid rgba(0,0,0,0.05);
	width : 100%;
	overflow-x : auto;
}
.SidebarCard 
{
	background-color : #FFFFFF;
	border-radius : 16px;
	box-shadow : 0px 4px 16px rgba(0, 0, 0, 0.04);
	border : 1px solid rgba(0,0,0,0.05);
	padding : 16px 0;
	margin-bottom : 24px;
	overflow : hidden;
}
.Attribute 
{
	min-height : 44px;
	max-width : 100%;
	font-family : var(--fonts_primary-regular);
	font-size : var(--fontsizes_s);
	padding-inline-start : 16px;
	padding-inline-end : 16px;
	border-width : 1px;
	border-style : solid;
	border-color : #D1D5DB;
	color : var(--colors_texto);
	background-color : #FAFAFA;
	border-radius : 8px;
	transition : all 0.2s ease-in-out;
}
.AttributeFocusedClass 
{
	border-color : var(--colors_border-focus);
	background-color : #FFFFFF;
	box-shadow : 0 0 0 3px rgba(14, 124, 124, 0.15);
	outline : none;
}
.ROAttribute2 
{
	height : 28px;
	max-width : 100%;
	font-family : var(--fonts_primary-regular);
	font-size : var(--fontsizes_s);
	border-width : 1px;
	border-color : var(--colors_gray04);
	border-radius : var(--radius_l);
	padding-inline-start : 0px;
	padding-inline-end : 0px;
	color : var(--colors_on-background);
	background-color : transparent;
	overflow-wrap : anywhere;
	border-style : none;
	font-weight : 500;
}
.attribute-label 
{
	font-size : var(--fontsizes_s);
	font-family : var(--fonts_primary-regular);
	color : var(--colors_gris);
	font-weight : normal;
	font-style : normal;
	padding-block-start : 4px;
}
.CheckBox 
{
	min-height : 44px;
	font-family : var(--fonts_primary-regular);
	font-size : var(--fontsizes_s);
	background-color : transparent;
	border : none;
	height : 28px;
	max-width : 100%;
	font-family : var(--fonts_primary-regular);
	font-size : var(--fontsizes_s);
	padding-inline-start : var(--spacing_inset-s);
	padding-inline-end : var(--spacing_inset-s);
	border-style : none;
	color : var(--colors_on-background);
	background-color : var(--colors_attribute-bg);
	border-radius : var(--radius_l);
}
.gx-checkbox-wrapper > input 
{
	margin-inline-start : 0px;
}
input[type="checkbox"] 
{
	-webkit-appearance : none;
	appearance : none;
	margin-top : 8px;
	margin-left : 15px;
}
input[type="checkbox"]:hover 
{
	cursor : pointer;
}
input[type="checkbox"]:focus 
{
	outline : none;
}
input[type="checkbox"]:focus:after 
{
	border-width : 2px;
}
input[type="checkbox"]:after 
{
	content : '';
	display : inline-block;
	vertical-align : text-top;
	width : 16px;
	height : 16px;
	margin-right : 10px;
	background : transparent;
	border-color : var(--colors_gray04);
	border-style : solid;
	border-width : var(--borders_extra-small);
	border-radius : var(--radius_m);
	background-color : var(--colors_attribute-bg);
}
input[type="checkbox"]:disabled:after 
{
	background-color : var(--colors_on-disabled);
}
.gx-checkbox-wrapper input[checked]:after 
{
	border-color : var(--colors_border-primary-enabled);
}
.gx-checkbox-wrapper input[checked]:before 
{
	content : "";
	display : inline-block;
	width : 5px;
	height : 9.5px;
	border-style : solid;
	border-color : var(--colors_primary-enabled);
	border-top-width : 0;
	border-inline-end-width : 2px;
	border-bottom-width : 2px;
	border-inline-start-width : 0;
	transform : rotate(45deg);
	-webkit-transform : rotate(45deg);
	-ms-transform : rotate(45deg);
	border-radius : 0px;
	margin-top : 0px;
	margin-inline-end : 15px;
	margin-inline-start : 5px;
	margin-bottom : 5px;
	inset-inline-start : .5px;
	top : 2px;
	position : absolute;
}
.gx-checkbox-wrapper 
{
	background-color : transparent;
	border : none;
	padding : 0;
	padding-top : var(--spacing_stack-s);
}
.gx-grid input[type="checkbox"][checked]::after 
{
	clip-path : polygon(21% 40%, 21% 40%, 8% 54%, 25% 68%, 36% 77%, 47% 65%, 48% 64%, 64% 47%, 75% 35%, 93% 13%, 81% 4%, 36% 54%);
	width : 12px;
	height : 12px;
	background-color : var(--colors_primary-enabled);
	position : relative;
	top : 2px;
	inset-inline-start : 1px;
}
.gx-grid input[type="checkbox"][checked] 
{
	border : solid var(--borders_extra-small) var(--colors_primary-enabled);
	border-radius : var(--radius_m);
	width : 16px;
	height : 16px;
}
.gx-grid input[type="checkbox"]:disabled 
{
	background-color : var(--colors_on-disabled);
}
[data-gx-checkbox-title] 
{
	margin-inline-start : 37px;
}
.UsuarioActual 
{
	min-height : 28px;
	font-family : var(--fonts_primary-regular);
	font-size : var(--fontsizes_s);
	border-color : var(--colors_gray04);
	color : #FEFEFE;
	background-color : transparent;
	border-radius : var(--radius_l);
	text-align : right;
}
.Button 
{
	padding : 12px 24px;
	border-radius : 12px;
	white-space : normal;
	min-height : 48px;
	min-width : 120px;
	background-color : var(--colors_azul);
	font-size : var(--fontsizes_s);
	font-family : var(--fonts_primary-semibold);
	color : var(--colors_alt-surface);
	border : none;
	margin-top : 20px;
	cursor : pointer;
	transition : background-color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease;
	box-shadow : 0 4px 6px rgba(0,0,0,0.1);
	display : inline-flex;
	align-items : center;
	justify-content : center;
}
.Button:hover 
{
	background-color : #313a5d;
	transform : translateY(-2px);
	box-shadow : 0 6px 12px rgba(0,0,0,0.15);
}
.Button:active 
{
	transform : translateY(0);
	box-shadow : 0 2px 4px rgba(0,0,0,0.1);
}
.BtnEnter 
{
	line-height : var(--spacing_line-height-l);
	height : 28px;
	padding-inline-start : var(--spacing_inset-m);
	padding-inline-end : var(--spacing_inset-m);
	text-transform : uppercase;
	padding : 12px 24px;
	border-radius : 12px;
	white-space : normal;
	min-height : 48px;
	min-width : 120px;
	background-color : var(--colors_azul);
	font-size : var(--fontsizes_s);
	font-family : var(--fonts_primary-semibold);
	color : var(--colors_alt-surface);
	border : none;
	margin-top : 20px;
	cursor : pointer;
	transition : background-color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease;
	box-shadow : 0 4px 6px rgba(0,0,0,0.1);
	display : inline-flex;
	align-items : center;
	justify-content : center;
	width : 100%;
}
.BtnEnter:hover 
{
	background-color : #2C2D3F;
	transform : translateY(-2px);
	box-shadow : 0 6px 12px rgba(0,0,0,0.15);
}
.BtnCancel 
{
	height : 28px;
	line-height : var(--spacing_line-height-l);
	margin-inline-start : var(--spacing_inline-m);
	margin-inline-end : var(--spacing_inline-m);
	padding : 12px 24px;
	border-radius : 12px;
	white-space : normal;
	min-height : 48px;
	min-width : 120px;
	font-size : var(--fontsizes_s);
	font-family : var(--fonts_primary-semibold);
	margin-top : 20px;
	cursor : pointer;
	transition : background-color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease;
	display : inline-flex;
	align-items : center;
	justify-content : center;
	background-color : transparent;
	color : var(--colors_texto);
	border : 1px solid #D1D5DB;
	box-shadow : none;
	margin-left : 10px;
}
.BtnCancel:hover 
{
	background-color : #F3F4F6;
	transform : translateY(-2px);
	color : var(--colors_primary);
	box-shadow : none;
}
div.ActionGroup:first-child 
{
	margin-top : 24px;
}
.GroupTitle 
{
	color : var(--colors_on-background);
	font-family : var(--fonts_primary-bold);
	font-size : var(--fontsizes_l);
	letter-spacing : var(--spacing_letter-spacing-s);
	width : 100%;
	height : 0px;
	padding : 0;
	margin-bottom : var(--spacing_stack-l);
	border : 0;
}
.ComboBox 
{
	min-height : 44px;
	font-size : var(--fontsizes_s);
	padding-inline-start : 16px;
	padding-inline-end : 16px;
	border-color : #D1D5DB;
	color : var(--colors_texto);
	background-color : #FAFAFA;
	border-radius : 8px;
	border-width : 1px;
	border-style : solid;
	transition : all 0.2s ease;
}
.ch-sidebar 
{
	--first-list-font-size : var(--fontsizes_s);
	--title-font-family : var(--fonts_primary-regular);
	--menu-background-color : #FFFFFF;
	--text-color : var(--colors_texto);
	--item-hover-color : var(--colors_grid-hover);
	--item-active-color : rgba(14, 124, 124, 0.1);
	--first-list-icon-color : var(--colors_azul);
	--first-list-arrow-color : var(--colors_gris);
	--indicator-color : var(--colors_azul);
	--scrollbar-track : transparent;
	--title-text-transform : uppercase;
}
.TextblockExito 
{
	color : var(--colors_verde);
	font-family : var(--fonts_primary-regular);
	font-size : var(--fontsizes_l);
}
.GridTitle 
{
	font-weight : normal;
}
.dropdown 
{
	position : relative;
	height : 32px;
}
.dd-username 
{
	color : #FEFEFE;
	font-family : var(--fonts_primary-regular);
	font-size : var(--fontsizes_s);
	letter-spacing : 0.25px;
	text-align : center;
}
.expandible-container 
{
	margin-inline-start : 0px;
	width : calc(100% - 274px);
	transition : margin-inline-start .3s,width .2s ease-out;
}
.Table 
{
	text-align : left;
}
.TablePie 
{
	background-color : #C61315;
	width : 100%;
}
.TextoPie 
{
	height : 28px;
	max-width : 100%;
	border-width : 1px;
	border-color : var(--colors_gray04);
	border-radius : var(--radius_l);
	padding-inline-start : 0px;
	padding-inline-end : 0px;
	background-color : transparent;
	overflow-wrap : anywhere;
	border-style : none;
	font-family : var(--fonts_primary-regular);
	font-size : var(--fontsizes_s);
	font-weight : 400;
	color : #FFFFFF;
	text-align : center;
}
.form__cell, .form__cell-advanced 
{
	padding-block : 16px;
	padding-inline-start : 15px;
	border-collapse : collapse;
	border-color : #E5E7EB;
	border-bottom-style : none;
	border-bottom-width : 1px;
}
.Grid 
{
	width : 100%;
	border-collapse : separate;
	border-spacing : 0;
	margin-top : 16px;
	font-family : var(--fonts_primary-regular);
	font-size : var(--fontsizes_s);
}
.Grid th 
{
	background-color : var(--colors_grid-header-bg);
	color : var(--colors_gris);
	font-family : var(--fonts_primary-semibold);
	font-weight : 600;
	text-transform : uppercase;
	font-size : var(--fontsizes_xs);
	letter-spacing : 0.5px;
	padding : 16px;
	border-bottom : 2px solid var(--colors_grid-border);
	text-align : left;
}
.Grid th:first-child 
{
	border-top-left-radius : 8px;
}
.Grid th:last-child 
{
	border-top-right-radius : 8px;
}
.Grid td 
{
	padding : 8px 10px;
	border-bottom : 1px solid var(--colors_grid-border);
	color : var(--colors_texto);
	vertical-align : middle;
	transition : background-color 0.2s ease;
}
.Grid tbody tr:hover td 
{
	background-color : var(--colors_grid-hover);
}
.Grid td a, .Grid td span.Attribute[data-gx-link], .Grid td .Attribute 
{
	color : 085555;
	font-weight : 500;
	text-decoration : none;
	transition : color 0.2s ease;
	cursor : pointer;
}
.Grid td a:hover, .Grid td span.Attribute[data-gx-link]:hover 
{
	color : #313A5D;
	text-decoration : underline;
}
input.Attribute:focus, textarea.Attribute:focus, select.Attribute:focus, .Attribute>A:focus 
{
	border-color : var(--colors_border-focus);
	background-color : #FFFFFF;
	box-shadow : 0 0 0 3px rgba(14, 124, 124, 0.15);
	outline : none;
}
.Attribute[data-gx-readonly] 
{
	height : 28px;
	max-width : 100%;
	font-family : var(--fonts_primary-regular);
	font-size : var(--fontsizes_s);
	border-width : 1px;
	border-color : var(--colors_gray04);
	border-radius : var(--radius_l);
	padding-inline-start : 0px;
	padding-inline-end : 0px;
	color : var(--colors_on-background);
	background-color : transparent;
	overflow-wrap : anywhere;
	border-style : none;
	font-weight : 500;
}
.gx-label.AttributeLabel 
{
	font-size : var(--fontsizes_s);
	font-family : var(--fonts_primary-regular);
	color : var(--colors_gris);
	font-weight : normal;
	font-style : normal;
	padding-block-start : 4px;
}
input.CheckBox:focus, textarea.CheckBox:focus, select.CheckBox:focus, .CheckBox>A:focus 
{
	border-color : var(--colors_border-focus);
	background-color : #FFFFFF;
	box-shadow : 0 0 0 3px rgba(14, 124, 124, 0.15);
	outline : none;
}
.CheckBox[data-gx-readonly] 
{
	height : 28px;
	max-width : 100%;
	font-family : var(--fonts_primary-regular);
	font-size : var(--fontsizes_s);
	border-width : 1px;
	border-color : var(--colors_gray04);
	border-radius : var(--radius_l);
	padding-inline-start : 0px;
	padding-inline-end : 0px;
	color : var(--colors_on-background);
	background-color : transparent;
	overflow-wrap : anywhere;
	border-style : none;
	font-weight : 500;
}
.gx-label.CheckBoxLabel 
{
	font-size : var(--fontsizes_s);
	font-family : var(--fonts_primary-regular);
	color : var(--colors_gris);
	font-weight : normal;
	font-style : normal;
	padding-block-start : 4px;
}
.gx-label.ROAttribute2Label 
{
	font-size : var(--fontsizes_s);
	font-family : var(--fonts_primary-regular);
	color : var(--colors_gris);
	font-weight : normal;
	font-style : normal;
	padding-block-start : 4px;
}
.ROAttribute2[data-gx-readonly] 
{
	height : 28px;
	max-width : 100%;
	font-family : var(--fonts_primary-regular);
	font-size : var(--fontsizes_s);
	border-width : 1px;
	border-color : var(--colors_gray04);
	border-radius : var(--radius_l);
	padding-inline-start : 0px;
	padding-inline-end : 0px;
	color : var(--colors_on-background);
	background-color : transparent;
	overflow-wrap : anywhere;
	border-style : none;
}
input.ROAttribute2:focus, textarea.ROAttribute2:focus, select.ROAttribute2:focus, .ROAttribute2>A:focus 
{
	border-color : var(--colors_border-focus);
	background-color : #FFFFFF;
	box-shadow : 0 0 0 3px rgba(14, 124, 124, 0.15);
	outline : none;
}
.BtnEnter:focus 
{
}
.BtnEnter:active 
{
}
.BtnEnter:hover 
{
}
.BtnCancel:focus 
{
}
.BtnCancel:active 
{
}
.BtnCancel:hover 
{
}
input.TextoPie:focus, textarea.TextoPie:focus, select.TextoPie:focus, .TextoPie>A:focus 
{
	border-color : var(--colors_border-focus);
	background-color : #FFFFFF;
	box-shadow : 0 0 0 3px rgba(14, 124, 124, 0.15);
	outline : none;
}
.TextoPie[data-gx-readonly] 
{
	height : 28px;
	max-width : 100%;
	font-family : var(--fonts_primary-regular);
	font-size : var(--fontsizes_s);
	border-width : 1px;
	border-color : var(--colors_gray04);
	border-radius : var(--radius_l);
	padding-inline-start : 0px;
	padding-inline-end : 0px;
	color : var(--colors_on-background);
	background-color : transparent;
	overflow-wrap : anywhere;
	border-style : none;
}
.gx-label.TextoPieLabel 
{
	font-size : var(--fontsizes_s);
	font-family : var(--fonts_primary-regular);
	color : var(--colors_gris);
	font-weight : normal;
	font-style : normal;
	padding-block-start : 4px;
}


@media (max-width: 3000px)
{
	.HeaderContainer 
	{
		padding : 0.5rem;
	}
	.header__logo 
	{
		max-width : 180px;
	}
	.header__masterpage 
	{
		font-size : 1.2rem;
	}
}


@media (max-width: 768px)
{
	.HeaderContainer 
	{
		padding : 0.5rem;
	}
	.header__logo 
	{
		max-width : 135px;
	}
	.header__masterpage 
	{
		font-size : 0.8rem;
	}
}


@media (max-width: 480px)
{
	.HeaderContainer 
	{
		padding : 0.5rem;
	}
	.header__logo 
	{
		max-width : 90px;
	}
	.header__masterpage 
	{
		font-size : 0.7rem;
	}
}

}