:root {
  background: #faf3e7;
  --orange: #ff5a00;
  --accent: #a83800;
  --border: #e8ded0;
  --muted: #5d5550;
}
.shell { grid-template-columns: 230px minmax(0, 1fr); }
.shell > aside { background: #202020; color: #fff8f0; border: 0; padding: 1.6rem 1rem; }
.shell > aside .brand { color: #fff8f0; text-align: center; font-size: 2rem; }
.shell > aside .eyebrow { color: #f2dbcb; text-align: center; letter-spacing: .2em; }
.brand-pin { display: block; width: 54px; height: 65px; margin: 0 auto .4rem; }
nav button { display: flex; align-items: center; gap: .8rem; padding: .8rem; color: #fff8f0; }
nav button[aria-current] { color: #231004; background: #ff792d; border-color: #ff792d; }
nav button:hover:not([aria-current]) { background: #34302d; }
nav button:focus-visible { outline-color: #ffa371; }
.nav-icon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.75; flex: none; }
.main { width: min(100%, 1520px); }
.mobevem-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 230px;
  margin-bottom: 1.1rem;
  padding: clamp(1.15rem, 4vw, 3rem);
  border-radius: 22px;
  color: white;
  background: #b83c00;
}
.mobevem-hero::before, .mobevem-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.mobevem-hero::before {
  left: 28%;
  z-index: -2;
  background: url("banner-mobevem.webp") center 24% / cover no-repeat;
}
.mobevem-hero::after {
  z-index: -1;
  background: linear-gradient(90deg, #b83c00 0%, #b83c00 25%, #b83c00e8 36%, #b83c0000 66%);
}
.hero-copy { max-width: 50%; }
.hero-title { font-size: clamp(2.05rem, 4.6vw, 4rem); font-weight: 900; letter-spacing: -.045em; line-height: 1.03; }
.hero-subtitle { margin-top: .55rem; font-weight: 650; }
.hero-cities { display: inline-block; margin-top: .9rem; padding: .3rem .85rem; border-radius: 100px; background: #581d00b8; font-weight: 750; }
.main > header { align-items: center; }
.main > header h1 { font-size: clamp(1.45rem, 3vw, 2rem); }
.card { border-radius: 17px; box-shadow: 0 2px 5px #4424000a; }
.metric { border-top: 0; background: #fffdf9; }
.metric strong { color: #2b1a11; }
#metrics .metric { position: relative; padding-left: 4rem; }
#metrics .metric::before { position: absolute; left: 1.15rem; top: 1.2rem; border-radius: 12px; width: 2rem; height: 2rem; display: grid; place-items: center; background: #ffebdd; color: #933100; font-weight: 800; }
#metrics .metric:nth-child(1)::before { content: "…"; }
#metrics .metric:nth-child(2)::before { content: "✓"; }
#metrics .metric:nth-child(3)::before { content: "+"; }
th { background: #faf2e5; }
#drivers .toolbar { display: grid; grid-template-columns: minmax(145px, 1fr) minmax(160px, 230px) auto; }
#driver-heading { grid-column: 1; }
#drivers .search { grid-column: 2; grid-row: 1; }
#drivers .search input { width: 100%; }
#driver-city-label { grid-column: 3; grid-row: 1; gap: 0; font-size: .83rem; color: var(--muted); }
#driver-city { font-size: 1rem; color: #191a1b; }
.filters button[aria-pressed="true"] { background: #ff792d; color: #231004; border-color: #ff792d; }
@media (max-width: 850px) {
  .shell { grid-template-columns: 180px minmax(0, 1fr); }
  #drivers .toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  #driver-heading { grid-column: 1 / -1; }
  #drivers .search { grid-column: 1; grid-row: 2; }
  #driver-city-label { grid-column: 2; grid-row: 2; }
}
@media (max-width: 700px) {
  .shell > aside { padding: .7rem 1rem; }
  .shell > aside .brand { text-align: left; font-size: 1.5rem; }
  .shell > aside .eyebrow { text-align: left; }
  .brand-pin { display: inline-block; vertical-align: middle; width: 25px; height: 29px; margin: 0 .35rem 0 0; }
  nav { gap: .2rem; }
  nav button { padding: .48rem; gap: .25rem; }
  .nav-icon { width: 1rem; height: 1rem; }
  .mobevem-hero { min-height: 190px; }
  #metrics .metric { padding-left: .85rem; }
  #metrics .metric::before { display: none; }
}
@media (max-width: 440px) {
  .mobevem-hero { min-height: 255px; align-items: start; }
  .mobevem-hero::before { inset: 20% 0 0; background-position: center 57%; }
  .mobevem-hero::after { background: linear-gradient(180deg, #a63700 0%, #a63700 21%, #a63700cc 43%, #a6370000 76%); }
  .hero-copy { max-width: none; }
  .hero-title { font-size: 1.9rem; }
  .hero-cities { margin-top: .5rem; }
  #drivers .toolbar { display: flex; align-items: stretch; }
}

/* MobeVem: modo compacto */
:root { font-size: 14px; }
.shell { grid-template-columns: 190px minmax(0, 1fr); }
.shell > aside { padding: .9rem .75rem; }
.shell > aside .brand { font-size: 1.5rem; }
.brand-pin { width: 30px; height: 36px; }
nav { margin-top: 1rem; gap: .2rem; }
nav button { padding: .5rem .65rem; }
.main { padding: .8rem 1rem; }

.mobevem-hero {
  min-height: 124px;
  padding: .85rem 1.3rem;
  margin-bottom: .65rem;
  border-radius: 14px;
}
.mobevem-hero::before { background-position: center 24%; }
.hero-copy { max-width: 55%; }
.hero-title { font-size: clamp(1.6rem, 2.7vw, 2.45rem); }
.hero-subtitle { margin-top: .2rem; }
.hero-cities { margin-top: .4rem; padding: .15rem .55rem; font-size: .85rem; }

.main > header h1 { font-size: 1.45rem; }
#subtitle { margin-top: .1rem; }
.card { padding: .7rem; }
.metrics { margin: .6rem 0; gap: .55rem; }
.metric strong { font-size: 1.25rem; line-height: 1.25; }
#metrics .metric { padding-left: 3.2rem; }
#metrics .metric::before { left: .65rem; top: .65rem; }
#drivers, #clients, #reports { margin-top: .6rem; }
h2 { font-size: 1.05rem; }
.toolbar, .filters { gap: .4rem; }
.filters, .scroll { margin-top: .45rem; }
button, input, textarea, select { padding: .34rem .55rem; }
.search input { padding-left: 2.25rem; }
td, th { padding: .4rem .55rem; }
.badge { padding: .12rem .4rem; }

@media (max-width: 700px) {
  .main { padding: .65rem; }
  .shell > aside .brand { text-align: left; }
  .brand-pin { width: 22px; height: 26px; margin: 0 .35rem 0 0; }
  nav { margin-top: .5rem; }
  nav button { padding: .4rem .5rem; }
  .hero-copy { max-width: 75%; }
  #metrics .metric { padding-left: .7rem; }
}
@media (max-width: 440px) {
  .mobevem-hero { min-height: 145px; }
  .hero-copy { max-width: 85%; }
}