/* Mobile-first: el vendedor cotiza desde el teléfono. Sin framework. */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, sans-serif; color: #1a2330; background: #f5f6f8; }
.container { max-width: 60rem; margin: 0 auto; padding: 1rem; }

.topbar { background: #16324f; color: #fff; }
.topbar__nav { max-width: 60rem; margin: 0 auto; padding: .6rem 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.topbar__brand { color: #fff; font-weight: 700; text-decoration: none; }
.topbar__links { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.topbar__links a { color: #d6e3f0; text-decoration: none; }
.linklike { background: none; border: none; color: #d6e3f0; cursor: pointer; font: inherit; padding: 0; }

.flash { padding: .6rem .9rem; border-radius: .4rem; }
.flash--notice { background: #e2f4e5; color: #17632a; }
.flash--alert { background: #fbe4e4; color: #922; }

h1 { font-size: 1.35rem; } h2 { font-size: 1.1rem; margin-top: 1.4rem; }

.card { background: #fff; border: 1px solid #e2e6ec; border-radius: .5rem; padding: 1rem; margin-bottom: .8rem; }
.card a { color: #16324f; text-decoration: none; font-weight: 600; }
.card__meta { color: #5a6a7c; font-size: .85rem; margin-top: .25rem; }

.badge { display: inline-block; padding: .1rem .55rem; border-radius: 1rem; font-size: .75rem; font-weight: 600; }
.badge--created { background: #e8eef7; color: #16324f; }
.badge--accepted { background: #e2f4e5; color: #17632a; }
.badge--in_production { background: #fdf1dc; color: #8a5a00; }

form .field { margin-bottom: .9rem; }
form label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .25rem; }
form input[type=text], form input[type=email], form input[type=password], form input[type=number],
form input[type=date], form select, form textarea {
  width: 100%; padding: .55rem .6rem; border: 1px solid #c4ccd6; border-radius: .4rem; font-size: 1rem; background: #fff;
}
form .field--inline { display: flex; gap: .5rem; align-items: center; }
form .field--inline label { margin: 0; font-weight: 400; }
.btn { display: inline-block; background: #16324f; color: #fff; border: none; border-radius: .4rem; padding: .65rem 1.1rem; font-size: 1rem; cursor: pointer; text-decoration: none; }
.btn--secondary { background: #5a6a7c; }
.btn--small { padding: .3rem .7rem; font-size: .85rem; }

.errors { background: #fbe4e4; color: #922; border-radius: .4rem; padding: .7rem .9rem; margin-bottom: 1rem; }
.errors ul { margin: .3rem 0 0; padding-left: 1.2rem; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid #e2e6ec; font-size: .9rem; white-space: nowrap; }
th { background: #eef1f5; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #44536a; }
td.num, th.num { text-align: right; }

.tier-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
.grid-2 { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; }
.grid-3 { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr 1fr; }

.auth { max-width: 22rem; margin: 3rem auto; }
.auth h1 { text-align: center; }

.metrics { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .metrics { grid-template-columns: repeat(3, 1fr); } }
.metric { background: #fff; border: 1px solid #e2e6ec; border-radius: .5rem; padding: 1rem; }
.metric b { display: block; font-size: 1.4rem; }

.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1rem 0; }