*{box-sizing:border-box}
body{
	margin:0;
	background:#f4f6fb;
	font-family:system-ui,Segoe UI;
}

.app{
	max-width:1100px;
	margin:0 auto;
	padding:24px;
}

.card{
	background:#fff;
	border-radius:14px;
	padding:20px;
	box-shadow:0 6px 20px rgba(0,0,0,.08);
}

h2{
	margin:0 0 12px;
	text-align:center;
}

input,textarea{
	width:100%;
	padding:10px;
	margin:4px 0;
	border-radius:8px;
	border:1px solid #ddd;
	font-size:15px;
}

/* Mostrar en mayúsculas (visual) para inputs y textarea (excepto date/number) */
input:not([type=date]):not([type=number]), textarea{
	text-transform:uppercase;
}

textarea{min-height:70px}

/* Ocultar flechas (spinners) en inputs number */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
	-webkit-appearance:none;
	margin:0;
}
input[type="number"]{
	-moz-appearance:textfield;
}

.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.col{display:flex;flex-direction:column}
.col input{height:44px}
.nav-row{display:flex;gap:10px;margin-top:10px}

@media (max-width:800px){
	.form-grid{grid-template-columns:1fr}
}

.row{
	display:flex;
	gap:10px;
	margin-top:10px;
}

button{
	flex:1;
	border:none;
	border-radius:8px;
	padding:12px;
	font-weight:600;
	font-size:15px;
	cursor:pointer;
}

.save{background:#2563eb;color:#fff}
.next{background:#10b981;color:#fff}

.ok,.err{
	display:none;
	padding:10px;
	border-radius:8px;
	margin-bottom:10px;
	text-align:center;
}

.ok{background:#dcfce7;color:#166534}
.err{background:#fee2e2;color:#991b1b}

footer{
	text-align:center;
	font-size:12px;
	opacity:.5;
	margin-top:10px;
}

.field-label{
	font-size:13px;
	color:#666;
	display:block;
	margin-top:4px;
}

/* Tooltip flotante (global) */
.tooltip-floating{
	position:fixed;
	left:0;
	top:0;
	transform:translateY(-6px);
	background:rgba(0,0,0,0.85);
	color:#fff;
	padding:8px 10px;
	border-radius:8px;
	font-size:13px;
	pointer-events:none;
	white-space:nowrap;
	z-index:1200;
	opacity:0;
	transition:opacity .12s ease, transform .12s ease;
}
.tooltip-floating.visible{opacity:1;transform:translateY(0)}

/* Visual para campos requeridos */
input[required], textarea[required]{
	border-color:#e11d48;
	box-shadow:0 0 0 3px rgba(225,29,72,0.06) inset;
}

input[required]:focus, textarea[required]:focus{
	outline:none;
	border-color:#e11d48;
	box-shadow:0 0 0 6px rgba(225,29,72,0.12);
}

.field-label.required::after{
	content:" *";
	color:#e11d48;
	margin-left:6px;
	font-weight:700;
}