:root {

	/* COLORES */

	--interactive-01: #2a7aff;
	--interactive-02: #4d74d9;
	--interactive-03: #a8c1f8;
	--decorative-01: #b9e937;
	--ui-background: #121212;
	--ui-01: #1e1e1e;
	--ui-02: #242424;
	--ui-03: #3c3c3c;
	--ui-04: #5a5a5a;
	--ui-05: #6c6c6c;
	--ui-06: #8a8a8a;
	--ui-07: #a1a1a1;
	--ui-bavsa: #000042;
	--button-separator: #252d35;
	--text-01: #fff;
	--text-02: #B9B9B9;
	--text-03: #757575;
	--text-04: #4aa3ff;
	--text-05: #000;
	--loss: #f85149;
	--loss-10: rgba(248, 81, 73, 0.1);
	--error: #ff4d4f;
	--hover-error: rgba(255, 118, 127, 0.96);
	--error-light: #ffe3e5;
	--warning: rgb(255, 193, 7);
	--warning-01: #ffc857;
	--warning-light: #fff8d8;
	--profit: #14b37d;
	--profit-10: rgba(20, 179, 125, 0.1);
	--success: #198754;
	--success-light: #daffdd;
	--info: #5c9bd8;
	--info-light: #dceefe;
	--focus: #174ea6;
	--hover: #428eff;
	--hover-back: rgba(29, 106, 209, 0.1);
	--disabled-01: #8a8a8a;
	--disabled-02: #c6c6c6;
	--support-05: #dbe6ff;
	--support-01: #ff7043;
	--support-02: #6FCF97;
	--support-03: #64b5f6;
	--support-04: #9c4d97;
	--page-headers: #9ebeff;
	--page-background: #dbe6ff;
	--shadow-01: #1D262D40;

	/* TIPOGRAFIAS */

	/* Font Families */
	--font-family-primary: 'Roboto', sans-serif;

	/* Font Sizes */
	--font-size-xxlarge: 28px;
	--font-size-xlarge: 24px;
	--font-size-large: 18px;
	--font-size-medium: 16px;
	--font-size-small: 14px;
	--font-size-xsmall: 12px;
	--font-size-caption: 11px;

	/* Font Weights */
	--font-weight-bold: 700;
	--font-weight-semibold: 600;
	--font-weight-medium: 500;
	--font-weight-regular: 400;

	/* Line Heights */
	--line-height-xxlarge: 120%;
	--line-height-large: 150%;
	
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
  background: none;
  border: 0;
  color: inherit;
  /* cursor: default; */
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;

  
}

body {
    overflow-y: hidden;
    overflow-x: hidden;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background-color: var(--ui-background);
}

main {
    height: calc(100vh - 48px);
    width: calc(100vw - 3rem);
    padding: 0; 
    margin-left: 3.5rem !important;
    overflow-y: scroll !important;
    overflow-x: clip;
    overflow-clip-margin: 20px;
    flex-basis: 100%;
    color: #FAFAFA;
    background-color: var(--ui-background);
}

.contenedor-loader {
    background-color: rgba(0, 0, 0, 0.9);
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 10000;
}

#loader {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}



/* CLASES COLORES */

.color_interactive_01 {
    color: var(--interactive-01);
}

.color_interactive_02 {
    color: var(--interactive-02);
}

.color_interactive_03 {
    color: var(--interactive-03);
}

.color_decorative_01 {
    color: var(--decorative-01);
}

.color_ui_background {
    color: var(--ui-background);
}

.color_ui_01 {
    color: var(--ui-01);
}

.color_ui_02 {
    color: var(--ui-02);
}

.color_ui_03 {
    color: var(--ui-03);
}

.color_ui_04 {
    color: var(--ui-04);
}

.color_ui_05 {
    color: var(--ui-05);
}

.color_ui_06 {
    color: var(--ui-06);
}

.color_ui_07 {
    color: var(--ui-07);
}

.color_ui_bavsa {
    color: var(--ui-bavsa);
}

.color_button_separator {
    color: var(--button-separator);
}

.color_text_01 {
    color: var(--text-01);
}

.color_text_02 {
    color: var(--text-02);
}

.color_text_03 {
    color: var(--text-03);
}

.color_text_04 {
    color: var(--text-04);
}

.color_text_05 {
    color: var(--text-05);
}

.color_loss {
    color: var(--loss);
}

.color_loss_10 {
    color: var(--loss-10);
}

.color_error {
    color: var(--error);
}

.color_hover_error {
    color: var(--hover-error);
}

.color_error_light {
    color: var(--error-light);
}

.color_warning {
    color: var(--warning);
}

.color_warning_01 {
    color: var(--warning-01);
}

.color_warning_light {
    color: var(--warning-light);
}

.color_profit {
    color: var(--profit);
}

.color_profit_10 {
    color: var(--profit-10);
}

.color_success {
    color: var(--success);
}

.color_success_light {
    color: var(--success-light);
}

.color_info {
    color: var(--info);
}

.color_info_light {
    color: var(--info-light);
}

.color_focus {
    color: var(--focus);
}

.color_hover {
    color: var(--hover);
}

.color_hover_back {
    color: var(--hover-back);
}

.color_disabled_01 {
    color: var(--disabled-01);
}

.color_disabled_02 {
    color: var(--disabled-02);
}

.color_support_05 {
    color: var(--support-05);
}

.color_support_01 {
    color: var(--support-01);
}

.color_support_02 {
    color: var(--support-02);
}

.color_support_03 {
    color: var(--support-03);
}

.color_support_04 {
    color: var(--support-04);
}

.color_page_headers {
    color: var(--page-headers);
}

.color_page_background {
    color: var(--page-background);
}

.background_ui_background {
	background-color: var(--ui-background);
}

.background_ui_01 {
	background-color: var(--ui-01);
}

.background_ui_02 {
	background-color: var(--ui-02);
}

.background_ui_03 {
	background-color: var(--ui-03);
}

.background_warning{
	background-color: var(--warning);
}

.background_disabled_01{
	background-color: var(--disabled-01);
}

.background_interactive_01{
	background-color: var(--interactive-01);
}

.background_profit{
	background-color: var(--profit);
}

.background_error{
	background-color: var(--error);
}

/* CLASES TIPOGRAFICAS */

.xxlarge__bold {
	font-size: var(--font-size-xxlarge);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-xxlarge);
}

.xxlarge__medium {
	font-size: var(--font-size-xxlarge);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-xxlarge);
}

.xxlarge__regular {
	font-size: var(--font-size-xxlarge);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-xxlarge);
}

.xlarge__bold {
	font-size: var(--font-size-xlarge);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-xxlarge);
}

.xlarge__medium {
	font-size: var(--font-size-xlarge);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-xxlarge);
}

.xlarge__regular {
	font-size: var(--font-size-xlarge);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-xxlarge);
}

.large__bold {
	font-size: var(--font-size-large);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-large);
}

.large__medium {
	font-size: var(--font-size-large);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-large);
}

.large__regular {
	font-size: var(--font-size-large);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-large);
}

.medium__bold {
	font-size: var(--font-size-medium);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-large);
}

.medium__medium {
	font-size: var(--font-size-medium);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-large);
}

.medium__regular {
	font-size: var(--font-size-medium);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-large);
}

.small__bold {
	font-size: var(--font-size-small);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-large);
}

.small__medium {
	font-size: var(--font-size-small);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-large);
}

.small__regular {
	font-size: var(--font-size-small);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-large);
}

.xsmall__bold {
	font-size: var(--font-size-xsmall);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-large);
}

.xsmall__medium {
	font-size: var(--font-size-xsmall);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-large);
}

.xsmall__regular {
	font-size: var(--font-size-xsmall);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-large);
}



.caption__bold {
	font-size: var(--font-size-caption);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-large);
	vertical-align: middle;
}

.caption__medium {
	font-size: var(--font-size-caption);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-large);
	vertical-align: middle;
}

.caption__regular {
	font-size: var(--font-size-caption);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-large);
	vertical-align: middle;
}

/* Links */
.link__large {
	font-size: var(--font-size-medium);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-medium);
	text-decoration: underline;
	line-height: var(--line-height-large);
	cursor: pointer;
}

.link__medium {
	font-size: var(--font-size-small);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-medium);
	text-decoration: underline;
	line-height: var(--line-height-large);
	cursor: pointer;

}

.link__small {
	font-size: var(--font-size-xsmall);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-medium);
	text-decoration: underline;
	line-height: var(--line-height-large);
	cursor: pointer;

}

.border__radius__medium {
	border-radius: 8px;
}

.p__medium {
	padding: 8px;
}

.ps__regular {
	padding-left: 16px;
}

.p_regular {
	padding: 8px 16px;
}

.separador__vertical {
	width: 1px !important;
	height: 1rem !important;
	background-color: var(--button-separator);
	color: var(--button-separator);
	opacity: 1;
	/* margin-inline: 12px; */
}


/* ---------- COMPONENTES ---------- */

/* BEM --> Bloque__elemento--modificador */

/* BUTTONS */

	.boton{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		border-radius: 17px;
		padding: 8px 16px;
		border: none;
		white-space: nowrap
	}	
	.boton:disabled{
		cursor: not-allowed;
		pointer-events: none; 
	}

/* Buttons - SIZE */

	.boton__large {
		font-size: var(--font-size-medium);
		font-family: var(--font-family-primary);
		font-weight: var(--font-weight-semibold);
		line-height: var(--line-height-large);
		vertical-align: middle;

	}

	.boton__medium {
		font-size: var(--font-size-small);
		font-family: var(--font-family-primary);
		font-weight: var(--font-weight-semibold);
		line-height: var(--line-height-large);
		vertical-align: middle;

	}

	.boton__small {
		font-size: var(--font-size-xsmall);
		font-family: var(--font-family-primary);
		font-weight: var(--font-weight-semibold);
		line-height: var(--line-height-large);
		vertical-align: middle;

	}


/* Buttons STYLE */

	.boton__primario{
		color: var(--text-01);
		background-color: var(--interactive-01);
	}
	.boton__primario:hover{
		background-color: var(--hover);
	}
	.boton__primario:disabled{
		color: var(--disabled-01);
		background-color: var(--disabled-02);
	}
	.boton__primario--warning{
		background-color: var(--warning);
	}
	.boton__primario--warning:hover{
		background-color: var(--warning-01);
	}
	.boton__primario--danger{
		background-color: var(--error);
	}
	.boton__primario--danger:hover{
		background-color: var(--hover-error);
	}
	.boton__primario--loss{
		background-color: var(--loss);
	}
	.boton__primario--loss:hover{
		background-color: var(--loss-10);
	}
	.boton__primario--success{
		background-color: var(--success);
	}
	.boton__primario--success:hover{
		background-color: var(--support-02);
	}
	.boton__primario--profit{
		background-color: var(--profit);
	}
	.boton__primario--profit:hover{
		background-color: var(--profit-10);
	}
	.boton__secundario{
		color: var(--interactive-01);
		background-color: transparent;
		border: 1px solid var(--interactive-01)!important;
	}
	.boton__secundario:hover{
		background-color: var(--hover-back);

	}
	.boton__secundario:disabled{
		color: var(--disabled-01);
		background-color: transparent;
		border: 1px solid var(--disabled-01)!important;
	}

	.boton__terciario{
		color: var(--interactive-01);
		background-color: transparent;
		text-decoration: underline;
	}
	.boton__terciario:hover{
		cursor: pointer;
		background: var(--hover-back, rgba(29, 106, 209, 0.1));
	}
	.boton__terciario--rojo{
		color: var(--error);
	}

	.boton__terciario:disabled{
		background-color: transparent;
		color: var(--disabled-01);
	}

	.boton__especial {
		color: var(--interactive-03);
		background-color: transparent;
		border: 1px solid transparent;
		padding: 4px 8px;

	}
	.boton__especial:hover {
		color: var(--hover);
		border: 1px solid var(--hover, #428eff);

	}
	.boton__especial:disabled {
		color: var(--disabled-02);
		background-color: transparent;
	}
	.boton__especial.active {
		color: var(--text-01);
		background-color: var(--interactive-01);
	}

	.boton__chip {
		align-self: stretch;
		border-radius: 40px;
		border-radius: 40px;
		border: 1px solid var(--color-button-separator, #252d35);
		background-color: transparent;
		color: var(--text-01);
	}

	.boton__chip:hover {
		cursor: pointer;
		color: var(--hover);
		border: 1px solid var(--hover, #428eff);
		background: var(--hover-back, rgba(29, 106, 209, 0.1));
	}

	.boton__chip.active {
		color: var(--text-01);
		background: var(--interactive-01, #2a7aff);
	}

	.boton__icono{
		background-color: transparent;
	}
	.boton__icono:hover{
		border-radius: .5rem;
		background-color: var(--hover-back);
		color: var(--interactive-01);

	}
	.boton__icono.active{
		border-radius: .5rem;
		background-color: var(--hover-back);
		color: var(--interactive-01);
		/* icono fill */
	}

	.pointer{
		cursor: pointer;
	}
/* ICONS en tabla*/

.icono-tabla .trash-icon {
	fill: var(--error);
}
/* disabled */
.icono-tabla.disabled .trash-icon {
	fill: var(--disabled-01);
}

.icono-tabla .info-icon {
	fill: var(--info);
}
/* disabled */
.icono-tabla.disabled .info-icon {
	fill: var(--disabled-01);
}

.icono-tabla .pencil-icon {
	fill: var(--interactive-01);
}
/* disabled */
.icono-tabla.disabled .pencil-icon {
	fill: var(--disabled-01);
}

/* CARD */

.card {
	/* height: 400px; */
	background-color: var(--ui-01);
	border-radius: 1rem;
	padding: 1rem;
}

.card .cuadrante {
	background-color: var(--ui-02);
	/* margin-top: 1rem; */
	padding: 1rem;
	border-radius: 8px;
	gap: 12px;
}


/* INPUTS - inputs */

.datalist-cotizaciones label {
	color: var(--ui-01);
}

.datalist-alarma label {
	background-color: var(--ui-01);
}

.datalist-modal label {
	background-color: var(--ui-01);
}

.search-ticker-tabla label {
	background-color: var(--ui-background);
}

.search-ticker-tabla input {
	background-color: var(--ui-background);
}

.search-ticker-tabla input:-webkit-autofill,
.search-ticker-tabla input:-webkit-autofill:hover, 
.search-ticker-tabla input:-webkit-autofill:focus,
.search-ticker-tabla input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px var(--ui-background) inset !important;
	-webkit-text-fill-color: var(--text-01) !important;
}

.mostrar {
    display: block;
}

section.mostrar {
    height: calc(100vh - 68px);
}

.ocultar {
    display: none!important;
}

.disabled {
	pointer-events: none;
	opacity: 0.5;
}

/* --------------
SCROLL 
---------------*/

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    border: 1px solid var(--ui-02);
    background-clip: content-box;
    background-color: rgba(0, 0, 0, .5)
}

/* TOOLTIP */

:has(> .custom-tooltip){
	position: relative;
}

/* abajo por defecto */
.custom-tooltip { 
	position: absolute;
	user-select: none;
	pointer-events:none;
    width: max-content;
    /* max-width: 200px; */
    background-color: var(--ui-background);
    color: var(--text-01);
    padding: .25rem .5rem;
    border-radius: .5rem;
    position: absolute;
	z-index: 6000;
    top: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

/* Flecha del tooltip apuntando hacia arriba */
.custom-tooltip::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
	margin-left: -.5rem;
    border-width: .5rem;
    border-style: solid;
    border-color: transparent transparent var(--ui-background) transparent;
}

/* tooltip arriba */
.custom-tooltip.arriba {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: .5rem;
}

/* Flecha del tooltip apuntando hacia abajo */
.custom-tooltip.arriba::after {
    top: 100%;
    border-color: var(--ui-background) transparent transparent transparent;
}

.custom-tooltip.derecha {
    bottom: auto;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
}

/* Flecha del tooltip apuntando hacia derecha */
.custom-tooltip.derecha::after {
	top: 50% ;
	left: -7px !important;
	margin-top: -8px !important;
	border-color: transparent var(--ui-background) transparent transparent !important;

}

.tooltip-container:hover .custom-tooltip {
    visibility: visible;
    opacity: 1;
}

.bg-tooltip-03 {
    background-color: var(--ui-03);
}

.bg-tooltip-03::after {
    border-color: transparent transparent var(--ui-03) transparent;
}

.fs-0{
	font-size: 0;
}body{
	margin: 0;
}

.main-auth{
	height: 100%!important;
	width: 100%!important;
	margin-left: 0!important;
}

/* Reset de inputs para chrome */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: var(--text-01) !important;
    caret-color: var(--text-03) !important;
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-size-adjust: none;
    /* font-size: inherit !important; */
    background-image: none !important;
    filter: none !important;
}



.auth-container {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 20px;
	background: url('../img/background-login.png') no-repeat center center;
	background-size: cover;
}

.auth-content {
	width: 100%;
	max-width: 500px;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 76px;
}

.auth-form-container {
	width: 100%;
	background: #002C394D;
	border-radius: 1rem;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	position:relative;
}

.auth-form-container .beta {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background-color: var(--hover-back);
	border-radius: .5rem;
	padding: 3px .5rem;
	display: flex;
	gap:0.25rem;
	align-items: center;	
}

.auth-logo {
	max-height: 60px;
	width: auto;
}

.auth-form{
	gap: 2rem;
	display: flex;
	flex-direction: column;
}

.form-group-float {
    position: relative;
}
        
.label-float {
    position: absolute;
    top: -0.5rem;
    left: 1rem;
    padding: 0 0.25rem;
    margin: 0;
    background: #000D36;
    color: var(--text-02);
    z-index: 2;
}

.form-control-float {
    all:unset;
    max-width: -webkit-fill-available;
    background-color: transparent !important;
    border: 1px solid var(--button-separator);
    border-radius: 1rem;
    width: 100%;
    height: 3rem;
    line-height: 6ex;
    padding: 0.25rem 0.25rem 0.25rem 1rem;
    font-size: var(--font-size-small);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-large);
	color: var(--text-01);
	max-width: -moz-available;

}
        
.form-control-float::placeholder {
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: var(--text-03);

} 


.form-control-float:active {
    outline: none;
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.5);

}

.form-control-float:focus {
    outline: none;
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.5);

}

        
.error-container{
    background-color: var(--shadow-01);
    padding: 0.25rem 1rem;
    border-radius: 0.5rem;
    gap: 0.5rem;
    border-left: 4px solid var(--error);
}

.auth-secondary-logo {
	position: absolute;
	left: 1.5rem;
	bottom: 1.5rem;
	height: 28px;
	width: auto;
	z-index: 2;
}

.auth-secondary-logo span {
	vertical-align: bottom;
	padding-right: .75rem;
}
.auth-secondary-logo img{
	max-width: 70px;

}

.mensaje-pass-container{
	background-color: var(--hover-back);
	border-radius: 1rem;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap:0.5rem;

}

.mensaje-pass-container .validaciones{
	padding: 0 1rem;
	/* display: grid;
    grid-template-columns: repeat(2, 1fr); 
    column-gap: 2rem; 
    row-gap: 0.25rem;
    align-items: start; */

	display: flex;
    flex-wrap: wrap; 
    gap: 4px 32px; 
}

.validaciones_item{
	font-size: var(--font-size-small);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-large);
	color: var(--text-02);
	flex: 1 0 calc(50% - 16px);
    
}

.validaciones_item:last-child {
    width: 100%; 
}

input[type=number].no-spinner {
	-moz-appearance: textfield;
}
input[type=number].no-spinner::-webkit-outer-spin-button,
input[type=number].no-spinner::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
	.auth-content {
		gap: 50px;
	}
	
	.auth-form-container {
		padding: 1.5rem;
		gap: 1.5rem;
	}
	
	.auth-logo {
		max-height: 50px;
	}
}

@media (max-width: 576px) {
	.auth-content {
		gap: 40px;
	}
	
	.auth-form-container {
		padding: 1.25rem;
		gap: 1.25rem;
	}
	
	.auth-secondary-logo {
		left: 1rem;
		bottom: 1rem;
		height: 35px;
	}
}.modal-container.svelte-1f7o3a4{background:var(--ui-background);padding:2rem;border-radius:1rem;display:flex;flex-direction:column;gap:2rem}.input-codigo.svelte-1f7o3a4{box-shadow:none;height:50px;width:48px;background-color:transparent;font-family:poppins;font-weight:500;font-size:20px;line-height:100%;text-align:center;border-radius:.5rem;border:solid 2px var(--disabled-01);color:var(--text-01)}.x-close.svelte-1f7o3a4{content:"" !important;background-image:url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.75 5.25L5.25 18.75" stroke="%232A7AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.75 18.75L5.25 5.25" stroke="%232A7AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;background-repeat:no-repeat;background-position:center;background-size:contain;width:2rem;height:2rem;display:inline-block}.nuevo-codigo-container.svelte-1f7o3a4{background-color:var(--ui-02);padding:0.25rem 1rem;border-radius:0.5rem;gap:0.5rem;border-left:4px solid var(--success)}