/* 						CLASES DE COLORES								 */

:root {

	--color-phantom-tooltip: black;
	--color-textPhantom-tooltip: white;
	--color-phantom: white;
	--color-danger-LimitPTS: var(--color-danger-S360);
	--color-activeGrag: #1e7e34;
	--color-containMessage: #016275;

	&[data-theme='light'] {
		--color-active-Grag: #c7b693;
		--color-phantom: white;
		--color-phantom-tooltip: black;
		--color-textPhantom-tooltip: white;
		-color-danger-LimitPTS: var(--color-danger-S360);
		--color-activeGrag: #1e7e34;
		--color-containMessage: #016275;
	}
	&[data-theme='dark'] {
		--color-active-Grag: #c7b693;
		--color-phantom: #c7d3df;
		--color-phantom-tooltip: #c7d3df;
		--color-textPhantom-tooltip: black;
		--color-danger-LimitPTS: #821018;
		--color-activeGrag: #1e7e34;
		--color-containMessage: #016275;
	}
}


.basic-input{

	& *{
		font-family: 'Libre Franklin';
	}


	border: 1px solid var(--color-border-S360);
	border-radius: var(--border-radius-S360);
	height: 30px;
	width: 100%;
	display: flex;
	align-items: center;
	user-select: none;
	cursor:text;

	.cuerpo {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		cursor: inherit;
		& input {
			border: none;
			outline: none;
			width: 100%;
			height: fit-content;
			background-color: var(--background-S360) !important;
			font-size: var(--font-size-normal-S360);
			color: var(--color-text-S360);
			padding: 9px 5px 0px 8px;
			cursor: inherit;

			&::-webkit-inner-spin-button,
			&::-webkit-outer-spin-button {
				-webkit-appearance: none;
				margin: 0; /* opcional */
			}
		}

		& label {
			width: 100%;
			font-size: var(--font-size-normal-S360);
			background-color: transparent;
			white-space: nowrap;
			overflow: hidden;
			color: var(--color-text-S360);
			padding-left: 8px;
			text-overflow: ellipsis;
			cursor: inherit;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			transition: 0.08s ease all;
		}
	}

	position: relative;

	& .contenIconsInput {

		gap: 4px; /* Space between icons */
		position: absolute;
		right: -1px;
		width: 18px;
		display: flex;
		margin-top: 5px;

		& span {
			color: var(--color-border-S360);
			cursor: pointer;
		}

		& i {
			color: var(--color-border-S360);
			cursor: pointer;
		}

		& .material-symbols-outlined{
			font-size: 19px;
		}

		& .containeMessage{
			color: var(--color-containMessage) !important;
		}

		& .activedGrag{
			color: var(--color-activeGrag) !important;
		}
	}

	& .info_limites{
		position: absolute;
		background: #bdbbbb;
		right: -1px;
		width: 18px;
		border-radius: 0 4px 4px 0;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 30px;
	}

	&.colorInLimitsYellow{
		border: solid 2px var(--color-warning-S360) !important;
	}

	& .backgroundInLimitsYellow{
		background-color: var(--color-warning-S360) !important;
	}

	& .colorTextInLimitsYellow{
		color: var(--color-warning-S360) !important;
	}

	&.colorOutLimitsE{
		border: solid 2px var(--color-danger-LimitPTS) !important;
	}

	& .backgroundOutLimitsE{
		background-color: var(--color-danger-LimitPTS) !important;
	}

	& .colorTextOutLimitsE{
		color: var(--color-danger-LimitPTS) !important;
	}

	&.colorInLimitsGreen{
		border: solid 2px var(--color-success-S360) !important;
	}

	& .backgroundInLimitsGreen{
		background-color: var(--color-success-S360) !important;
	}

	& .colorTextInLimitsGreen{
		color: var(--color-success-S360) !important;
	}
}

.basic-input--focus{
	border: 1px solid var(--suite-primary-S360) ;
}

.basic-input--filled{
	& .cuerpo{
		& input{
			display: block;
		}
		& label{
			color: var(--color-text-secundary-S360);
			font-size: var(--font-size-small-S360);
			font-weight: var(--font-weight-small-S360);
			top: 0%;
			left: 50%;
			transform: translate(-50%, 0%);
		}
	}
}

.basic-input--disabled{
	border: 1px solid var(--color-border-S360);
	border-color: var(--color-border-S360);
	background-color:var(--background-disabled-secundary-S360);
	cursor: not-allowed;
	& .cuerpo{
		cursor: inherit;
		& input{
			cursor: inherit;
			color: var(--color-text-disabled-S360);
			background-color: transparent !important;
		}

		& label{
			cursor: inherit;
			color: var(--color-text-disabled-S360) ;
		}
	}

	& .block-icon{
		font-size: small;
		color:  var(--color-text-disabled-S360);
		padding-right: 10px;
	}
}

.basic-input--error{
	border-color: var(--color-error-S360);

	& .error-icon{
		color: var(--color-error-S360);
		padding-right: 10px;
		font-size: small;
		font-variation-settings: "FILL" 1;
	}

	& label {
		color: var(--color-error-S360)!important;
	}
}

.basic-input--focus.basic-input--error{
	& label{
		color:var(--color-error-S360) ;
	}
}

/* 						POPOVER INPUT								 */
.popover-opc{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1060;
	display: block;
	max-width: 276px;
	font-family: 'Libre Franklin';
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	text-align: start;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	word-break: normal;
	white-space: normal;
	word-spacing: normal;
	line-break: auto;
	font-size: var(--font-size-normal-S360);
	word-wrap: break-word;
	background-color: var(--color-phantom);
	background-clip: padding-box;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: .3rem;

	&.bs-popover-auto[x-placement^=right], &.bs-popover-right {
		margin-left: .5rem;
	}

	& .fade {
		transition: opacity .15s linear;
	}

	&.bs-popover-auto[x-placement^=right]>.arrow, &.bs-popover-right>.arrow {
		left: calc(-.5rem - 1px);
		width: .5rem;
		height: 1rem;
		margin: .3rem 0;
	}

	& .arrow {
		position: absolute;
		display: block;
		width: 1rem;
		height: .5rem;
		margin: 0 .3rem;
	}

	& .popover_limites {
		padding: 4px;
		text-align: center;
	}

	& .popover-body {
		padding: .5rem .75rem;
		color: #212529;
	}

	& .popover_description {
		background: var(--color-phantom);
		position: absolute;
		border: 1px solid rgba(0, 0, 0, .2);
		border-radius: 0.3rem;
		width: max-content;
		max-width: 240px;
		line-height: 1.2;
		margin-top: 2px;
	}

	/********************** ESTILOS COLORES RANGOS *************************/
	& .popover_description div:nth-child(1) {
		font-weight: 500;
		font-size: 14px;
	}

	& .popover_description div:nth-child(2) {
		font-style: italic;
		font-weight: 500;
	}

	& .borde_superior{
		border-radius: 4px 4px 0 0;
	}

	& .borde_inferior{
		border-radius: 0px 0px 4px 4px;
	}

	& .popover_limites{
		padding: 4px;
		text-align: center;
	}

	& .info_limites{
		transition: background-color 0.3s;
		display: none;
	}

	& .limite_amarillo,
	& .limite_verde,
	& .limite_rojo{
		text-align: center;
		display: flex;
		font-size: 12px;
		color: white;
		margin-bottom: 1px;
	}

	& .limite_amarillo{
		background-color: #daac22;
	}

	& .limite_verde{
		background-color: #28a745;
	}

	& .limite_rojo{
		background-color: var(--color-danger-LimitPTS)
	}

	& .limite_amarillo div.title_limits,
	& .limite_verde div.title_limits,
	& .limite_rojo div.title_limits{
		width: 50px;
		font-weight: 600;
	}

	& .limite_amarillo div:not(.title_limits),
	& .limite_verde div:not(.title_limits),
	& .limite_rojo div:not(.title_limits){
		padding: 0 12px;
	}


}