@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');

:root { font-family: Montserrat, sans-serif; color: #2b211b; background: #fff; }
body { margin: 0; }
.topbar { background: #000; height: 70px; margin: 0 10px; }
.topbar img { height: 70px; }
.topbar span { color: white; display: inline-block; font-size: 25px; margin: 20px; vertical-align: top; }
#app { padding: 0 10px; }
.layout { display: block; }
.panel { background: #fff; border: 2px solid #e7b55d; border-radius: 5px; box-shadow: none; padding: 14px; }
.login-card { background: #fff; border-radius: 10px; box-shadow: 0 4px 8px #0003; max-width: 400px; padding: 2rem; text-align: center; width: 100%; }
.login-card h2 { color: #333; margin-bottom: 1.5rem; }
.form-group { margin-bottom: 1rem; }
.btn-login { width: 100%; }
h1, h2 { margin-top: 0; }
label { color: #555; display: block; font-size: 14px; font-weight: 700; margin: 15px 0; text-align: left; }
input, select { background: white; border: 1px solid #ddd; border-radius: 5px; font: inherit; font-size: 16px; margin-top: 7px; outline: none; padding: .8rem; transition: border-color .3s; width: 100%; }
input:focus, select:focus { border-color: #2a5298; }
button { background: #f9f9f9; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; margin: 4px; padding: 6px 8px; }
button:hover, button.selected { background: #dba85d; border-color: #75421f; }
.controls .panel > * { max-width: none; }
.controls { font-size: 16px; }
.controls .panel h1 { display: none; }
.choice { margin: 2px 0; padding: 0; }
.choice:not(.gallery-choice) { white-space: nowrap; }
.choice span { color: #2b211b; display: inline; font-size: 16px; font-weight: 400; }
.type-choice > span { display: block; }
.type-buttons { white-space: nowrap; }
.split { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.gallery-choice button { display: block; width: 215px; }
.inputs-row { display: block; }
.inputs-row label { display: inline; font-size: 16px; font-weight: 400; margin: 0; }
.inputs-row input { display: inline-block; padding: 3px; width: 4em; }
.discount-row, .percentages-row { align-items: center; display: flex; gap: 2px; white-space: nowrap; }
.discount-row input { margin: 0; padding: 3px; width: 4em; }
.percentages-row input { margin: 0; padding: 3px; width: 2em; }
.summary { margin: 5px; min-height: 240px; padding: 0; }
.summary h2 { font-size: 1.17em; margin: 5px 0; }
.preview { height: 130px; position: relative; width: 310px; }
.urnas { height: 130px; position: absolute; width: 220px; }
.urnas img { height: 150px; max-width: 150px; object-fit: contain; position: absolute; top: -30px; width: auto; }
.urnas img:nth-child(1) { left: 0; }
.urnas img:nth-child(2) { left: 45px; }
.urnas img:nth-child(3) { left: 90px; }
.urnas img:nth-child(4) { left: 135px; }
.urnas img:nth-child(5) { left: 180px; }
.urnas img:nth-child(6) { left: 225px; }
.urnas img:nth-child(7) { left: 270px; }
.urnas img:nth-child(8) { left: 315px; }
.tapagrande { border: 2px solid gray; border-radius: 5px; display: inline-flex; flex-direction: column; height: 80px; justify-content: center; left: 240px; padding: 10px 0; position: absolute; text-align: center; top: 0; width: 80px; }
.tapagrande strong { font-size: 60px; line-height: 60px; margin: 10px; }
.position-label, .front-label { left: 0; position: absolute; top: 130px; }
.front-label { top: 150px; }
.Travertino { background: #c98e4f; }
.Onix { background: #f2d975; }
.resumen-table { border-collapse: collapse; font-size: .9rem; margin: 1rem 0; text-align: left; width: 100%; }
.resumen-table td { border: 1px solid #ccc; padding: .5rem; }
.resumen-table tr:nth-child(2n) { background: #f9f9f9; }
.summary dl { display: grid; gap: 0; grid-template-columns: 1fr auto; margin: 26px 0; }
.summary dt, .summary dd { border-bottom: 1px solid #eadfd3; margin: 0; padding: 11px 0; }
.summary dd { font-weight: 700; text-align: right; }
.summary .total { color: #75421f; font-size: 1.1rem; }
.availability { max-width: 450px; }
.payment { margin: 5px; max-width: none; padding: 0; }
.payment h3 { margin: 5px 0; }
.small-row { color: gray; font-size: 12px; }
.payment input { display: inline-block; margin: 0; width: 9em; }
.payment button { margin: 4px 2px; }
.payment-investment { margin: 5px 0; }
.payment-investment span, .payment-row > span:last-child { color: #2b211b; }
.payment-row { align-items: center; display: flex; gap: 8px; margin: 5px 0; }
.payment-row > span:first-child { min-width: 88px; }
.payment-row > strong { margin-left: auto; min-width: 82px; text-align: right; }
.down-payment-buttons { display: flex; flex-wrap: nowrap; }
.down-payment-buttons input { width: 7em; }
.payment hr { border: 0; border-top: 2px solid #555; margin: 12px 0; }
.error { color: red; font-size: 14px; margin-top: 1rem; }
.logout { display: block; margin: 24px auto; }
@media (max-width: 600px) {
	.topbar { height: 56px; margin: 0 5px; }
	.topbar img { height: 56px; }
	.topbar span { font-size: 18px; margin: 16px 10px; }
	#app { padding: 0 5px; }
	button { font-size: 13px; margin: 3px 2px; padding: 5px 6px; }
	.controls { font-size: 14px; }
	.choice span, .inputs-row label { font-size: 14px; }
	.gallery-choice button { width: 215px; }
	.summary { min-height: 220px; }
	.summary h2 { font-size: 1em; }
	.preview { overflow: hidden; transform: none; width: 100%; }
	.urnas { transform: scale(.72); transform-origin: left top; }
	.tapagrande { left: 180px; transform: scale(.8); transform-origin: left top; }
	.availability { max-width: 100%; overflow-x: auto; }
	.resumen-table { font-size: .78rem; }
	.payment { margin: 5px 0; overflow-x: auto; }
	.payment-row { flex-wrap: wrap; font-size: 13px; gap: 4px; }
	.payment-row > span:first-child { min-width: 80px; }
	.payment-row > strong { min-width: 70px; }
	.down-payment-buttons button { font-size: 12px; padding: 4px; }
	.down-payment-buttons { flex-shrink: 1; flex-wrap: wrap; }
}