/* ===== Inputs ===== */
		.field{
			width:100%;
			padding: 10px 12px;
			border-radius: 14px;
			border: 1px solid rgba(255,255,255,0.10);
			background: rgba(255,255,255,0.06);
			color: var(--text);
			outline:none;
			transition: 0.18s ease;
			font-size:13px;
		}
		.field:focus{
			border-color: rgba(79,124,255,0.35);
			box-shadow: 0 0 0 4px rgba(79,124,255,0.10);
		}

		.select{
			appearance:none;
			background-image:
				linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.6) 50%),
				linear-gradient(135deg, rgba(255,255,255,0.6) 50%, transparent 50%);
			background-position:
				calc(100% - 18px) calc(50% - 2px),
				calc(100% - 12px) calc(50% - 2px);
			background-size: 6px 6px, 6px 6px;
			background-repeat:no-repeat;
			padding-right: 36px;
		}

/* =========================================================
	 BADGES
	 ========================================================= */
.badge{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:6px 12px;
	border-radius:999px;
	font-size:13px;
	font-weight:600;
	border:1px solid rgba(255,255,255,0.10);
	background: rgba(255,255,255,0.04);
	color: rgba(255,255,255,0.92);
}

/* bolita */
.badge i{
	width:10px;
	height:10px;
	border-radius:99px;
	background: rgba(255,255,255,0.35);
	box-shadow: 0 0 0 2px rgba(0,0,0,0.25);
}

.badge.liquidado i{ background: var(--liquidado); }
.badge.pagando i{ background: var(--pagando); }
.badge.dudas i{ background: var(--dudas); }
.badge.conflicto i{ background: var(--conflicto); }
.badge.negociacion i{ background: var(--negociacion); }

.badge.porliquidar{
	background: rgba(163, 255, 18, 0.14);
	border-color: rgba(163, 255, 18, 0.35);
}
.badge.porliquidar i{ background: var(--porliquidar); }

		/* ===== Switch ===== */
		.switch{
			display:inline-flex;
			align-items:center;
			gap:10px;
			user-select:none;
			cursor:pointer;
		}
		.switch input{ display:none; }
		.switch .track{
			width:44px; height:26px;
			border-radius:999px;
			background: rgba(255,255,255,0.12);
			border:1px solid rgba(255,255,255,0.12);
			position:relative;
			transition: 0.18s ease;
		}
		.switch .thumb{
			width:20px; height:20px;
			border-radius:999px;
			background: rgba(255,255,255,0.85);
			position:absolute;
			top:50%;
			left:3px;
			transform: translateY(-50%);
			transition: 0.18s ease;
		}
		.switch input:checked + .track{
			background: rgba(32,201,151,0.18);
			border-color: rgba(32,201,151,0.28);
		}
		.switch input:checked + .track .thumb{
			left: 21px;
			background: white;
		}
		.switch span{
			font-size:13px;
			color: var(--muted);
		}



/* ===== Radio ===== */
.radio-group{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}

.radio{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding: 11px 11px;
	border-radius: 999px;
	border:1px solid var(--border);
	background: rgba(0,0,0,.25);
	cursor:pointer;
	user-select:none;
	font-size:13px;
	color: var(--muted);
	transition: 0.18s ease;
}

.radio:hover{
	background: rgba(255,255,255,0.07);
	border-color: rgba(255,255,255,0.14);
}

.radio input{ display:none; }

.radio .ball{
	width:14px; height:14px;
	border-radius:99px;
	border:2px solid rgba(255,255,255,0.35);
	position:relative;
	transition: 0.18s ease;
}

/* bolita interior */
.radio .ball::after{
	content:"";
	width:8px; height:8px;
	border-radius:99px;
	background: transparent;
	position:absolute;
	top:50%; left:50%;
	transform: translate(-50%, -50%);
	transition: 0.18s ease;
}

/* ===== checked general ===== */
.radio input:checked + .ball{ border-color: rgba(255,255,255,0.85); }

.radio input:checked + .ball::after{ background: rgba(255,255,255,0.95); }

.radio input:checked ~ .txt{ color: var(--text); }

/* ===== colores por estatus (ball) ===== */
.radio .ball.pagando{ --c: var(--pagando); }
.radio .ball.liquidado{ --c: var(--liquidado); }
.radio .ball.negociacion{ --c: var(--negociacion); }
.radio .ball.dudas{ --c: var(--dudas); }
.radio .ball.conflicto{ --c: var(--conflicto); }

/* ===== checked con color (ball + glow) ===== */
.radio input:checked + .ball.pagando{ border-color: var(--pagando); }
.radio input:checked + .ball.pagando::after{ background: var(--pagando); }

.radio input:checked + .ball.liquidado{ border-color: var(--liquidado); }
.radio input:checked + .ball.liquidado::after{ background: var(--liquidado); }

.radio input:checked + .ball.negociacion{ border-color: var(--negociacion); }
.radio input:checked + .ball.negociacion::after{ background: var(--negociacion); }

.radio input:checked + .ball.dudas{ border-color: var(--dudas); }
.radio input:checked + .ball.dudas::after{ background: var(--dudas); }

.radio input:checked + .ball.conflicto{ border-color: var(--conflicto); }
.radio input:checked + .ball.conflicto::after{ background: var(--conflicto); }

/* ===== opcional: resaltar el botón completo cuando esté checked ===== */
.radio:has(input:checked){
	border-color: rgba(91,124,250,.55);
	box-shadow: 0 0 0 4px rgba(91,124,250,.12);
}


		.form-grid{
			display:grid;
			grid-template-columns: 1fr 1fr;
			gap: 12px;
		}
		.form-row label{
			display:block;
			font-size:12px;
			color: var(--muted);
			margin-bottom:6px;
			font-weight:700;
		}

.radio-group-vertical{
	display:flex;
	flex-direction:column;
	gap:6px;
}

/* label */
.radio-basic{
	display:flex;
	align-items:center;
	gap:10px;

	padding: 8px 10px;
	border-radius: 999px;

	cursor:pointer;
	user-select:none;

	font-size:13px;
	color: var(--muted);

	transition: background .18s ease, color .18s ease;
}

.radio-basic:hover{
	background: rgba(255,255,255,0.07);
}

/* ocultamos el input real */
.radio-basic input{
	position:absolute;
	opacity:0;
	pointer-events:none;
}

/* el bullet */
.radio-basic .ball{
	width:14px;
	height:14px;
	border-radius:999px;

	border:2px solid rgba(255,255,255,0.30);
	position:relative;
	flex: 0 0 auto;

	transition: border-color .18s ease, transform .18s ease;
}

/* bolita interior */
.radio-basic .ball::after{
	content:"";
	width:8px;
	height:8px;
	border-radius:999px;

	background: transparent;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%) scale(0);

	transition: transform .18s ease, background .18s ease;
}

.radio-basic .txt{
	line-height: 1.15;
	transition: color .18s ease;
}

/* ===== CHECKED ===== */
.radio-basic input:checked + .ball{
	border-color: rgba(255,255,255,0.85);
}

.radio-basic input:checked + .ball::after{
	background: rgba(255,255,255,0.95);
	transform: translate(-50%, -50%) scale(1);
}

.radio-basic input:checked ~ .txt{
	color: var(--text);
	font-weight: 600;
}

/* ===== FOCUS (teclado) ===== */
.radio-basic input:focus-visible + .ball{
	outline: 2px solid rgba(255,255,255,0.35);
	outline-offset: 3px;
}




input,
select,
textarea{
	width:100%;
	padding:9px 12px;
	border-radius:14px;
	border:1px solid var(--border);
	background: rgba(0,0,0,.25);
	color: var(--text);
	outline:none;
	transition: border .18s ease, box-shadow .18s ease;
}

input:focus,
select:focus,
textarea:focus{
	border-color: rgba(91,124,250,.55);
	box-shadow: 0 0 0 4px rgba(91,124,250,.12);
}

select{
	cursor:pointer;
}

textarea{
	min-height: 20px;
	resize: vertical;
}



/* ===== BASIC (sin padding, sin fondo, sin borde) ===== */
input.basic,
select.basic,
textarea.basic{
	width:100%;
	padding:0;
	border:0;
	border-radius:0;
	background:transparent;
	color:inherit;
	outline:none;
	box-shadow:none;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
}

/* opcional: que no meta glow al hacer focus */
input.basic:focus,
select.basic:focus,
textarea.basic:focus{
	border:0;
	box-shadow:none;
}