/* ==========================================================================
   SIGNAL · appmock.css — UI de producto construida en HTML (sin screenshots)
   Escala sola con el contenedor: todo va en `em` y la raíz usa cqw.
   Contenedores válidos: .device-screen, .stage, .frame.cq (container-type).
   Sigue el tema de la página (usa los tokens semánticos).
   ========================================================================== */
.frame.cq { container-type: inline-size; aspect-ratio: 16 / 9.4; position: relative; }
.am { position: absolute; inset: 0; display: grid; grid-template-columns: 17em minmax(0, 1fr); font: 400 clamp(5px, 1.3cqw, 15px)/1.35 var(--f-body);
  color: var(--fg); background: var(--bg); letter-spacing: -.005em; text-align: left; }
.am * { box-sizing: border-box; }
.am svg.i { width: 1.15em; height: 1.15em; flex: none; }
.am-side { display: flex; flex-direction: column; gap: 1.1em; padding: 1.3em 1em; background: var(--bg-2); border-right: 1px solid var(--line); min-width: 0; }
.am-brand { display: flex; align-items: center; gap: .55em; font-weight: 700; font-size: 1.15em; letter-spacing: -.02em; }
.am-brand .am-logo { width: 1.7em; height: 1.7em; border-radius: .45em; background: radial-gradient(circle at 35% 35%, var(--sig-hi), var(--sig) 45%, var(--sig-2)); box-shadow: 0 0 1em var(--sig-a30); }
.am-brand i { font: 500 .6em/1 var(--f-mono); font-style: normal; color: var(--fg-3); }
.am-nav { display: grid; gap: .15em; }
.am-nav a { display: flex; align-items: center; gap: .6em; padding: .55em .7em; border-radius: .6em; color: var(--fg-2); font-size: .95em; white-space: nowrap; overflow: hidden; }
.am-nav a.on { background: var(--sig-a16); color: var(--fg); box-shadow: inset 0 0 0 1px var(--sig-a30); }
.am-nav a.on svg { color: var(--sig-text); }
.am-user { margin-top: auto; display: flex; align-items: center; gap: .6em; padding: .7em; border-radius: .8em; background: var(--tile); border: 1px solid var(--line); min-width: 0; }
.am-user b { display: block; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-user div span { display: block; font-size: .78em; color: var(--fg-3); }
.av { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; font: 700 .8em/1 var(--f-body); color: var(--on-sig); background: var(--sig); }
.av.b { background: var(--d3); color: #fff; } .av.c { background: var(--d2); color: #0b0c0e; } .av.d { background: var(--fg); color: var(--bg); }
.am-main { display: flex; flex-direction: column; gap: 1em; padding: 1.3em 1.5em; min-width: 0; overflow: hidden; }
.am-top { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.am-top h4 { margin: 0; font-size: 1.55em; font-weight: 650; letter-spacing: -.03em; }
.am-top p { margin: .15em 0 0; font-size: .85em; color: var(--fg-3); }
.am-actions { display: flex; align-items: center; gap: .5em; }
.am-seg { display: inline-flex; padding: .2em; gap: .15em; border-radius: 99em; background: var(--tile); border: 1px solid var(--line); }
.am-seg b { padding: .35em .8em; border-radius: 99em; font-size: .8em; font-weight: 600; color: var(--fg-3); }
.am-seg b.on { background: var(--fg); color: var(--bg); }
.am-btn { display: inline-flex; align-items: center; gap: .4em; padding: .5em .95em; border-radius: 99em; font-size: .85em; font-weight: 650; white-space: nowrap;
  background: var(--sig); color: var(--on-sig); }
.am-btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line-2); }
.am-kpis { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: .7em; }
.am-kpi { position: relative; padding: .85em .95em .6em; border-radius: .9em; background: var(--bg-2); border: 1px solid var(--line); min-width: 0; }
.am-kpi > span { display: block; font-size: .78em; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-kpi > b { display: block; margin-top: .25em; font-size: 1.65em; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.am-kpi > em { position: absolute; top: .8em; right: .8em; padding: .15em .45em; border-radius: 99em; font: 600 .7em/1.2 var(--f-body); font-style: normal; background: var(--sig-a16); color: var(--sig-text); }
.am-kpi > em.down { background: color-mix(in oklab, var(--alert) 14%, transparent); color: var(--alert-soft); }
.am-kpi .spark { display: block; width: 100%; height: 2.2em; margin-top: .3em; color: var(--sig-text); }
.am-body { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); gap: .8em; }
.am-body.cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.am-card { position: relative; min-width: 0; min-height: 0; overflow: hidden; padding: .9em 1em; border-radius: .9em; background: var(--bg-2); border: 1px solid var(--line); display: flex; flex-direction: column; }
.am-card > h5 { margin: 0 0 .6em; display: flex; align-items: center; justify-content: space-between; gap: .5em; font: 500 .72em/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.am-card > h5 i { font-style: normal; letter-spacing: 0; text-transform: none; font-family: var(--f-body); }
.am-chart { position: absolute; left: 1em; top: 2.3em; width: calc(100% - 2em); height: calc(100% - 3.2em); color: var(--sig-text); }
.frame.cq.wide { aspect-ratio: 16 / 7.6; }
.am-card:has(.am-axis) .am-chart { height: calc(100% - 4.6em); }
.am-axis { position: absolute; left: 1em; right: 1em; bottom: .7em; display: flex; justify-content: space-between; font-size: .72em; color: var(--fg-3); }
.am-axis.slots { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); text-align: center; }
.am-table { width: 100%; border-collapse: collapse; font-size: .82em; }
.am-table th { text-align: left; font-weight: 500; color: var(--fg-3); padding: .45em .5em; border-bottom: 1px solid var(--line); white-space: nowrap; }
.am-table td { padding: .55em .5em; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12em; }
.am-table td b { font-weight: 600; }
.am-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.st { display: inline-flex; align-items: center; gap: .35em; padding: .2em .55em; border-radius: 99em; font-size: .9em; font-weight: 600; background: var(--tile); color: var(--fg-2); }
.st::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: currentColor; }
.st.ok { background: var(--sig-a16); color: var(--sig-text); } .st.go { background: color-mix(in oklab, var(--d3) 16%, transparent); color: var(--d3); } .st.late { background: color-mix(in oklab, var(--alert) 14%, transparent); color: var(--alert-soft); }
.am-list { display: grid; gap: .45em; font-size: .85em; }
.am-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6em; align-items: center; padding: .45em 0; border-bottom: 1px solid var(--line); }
.am-list li:last-child { border-bottom: 0; }
.am-list b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-list li > div > span { display: block; font-size: .88em; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-list .r { font-weight: 650; font-variant-numeric: tabular-nums; }
.am-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; }
.am-person { display: grid; gap: .5em; padding: .9em; border-radius: .9em; background: var(--bg-2); border: 1px solid var(--line); min-width: 0; }
.am-person header { display: flex; align-items: center; gap: .55em; min-width: 0; }
.am-person header b { display: block; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-person header div span { display: block; font-size: .75em; color: var(--fg-3); }
.am-person .meter2 { height: .45em; border-radius: 99em; background: var(--line); overflow: hidden; }
.am-person .meter2 i { display: block; height: 100%; background: var(--grad-sig-bar); }
.am-person dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .3em; font-size: .78em; }
.am-person dt { color: var(--fg-3); } .am-person dd { margin: 0; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.am-map { position: relative; flex: 1; min-height: 0; border-radius: .7em; overflow: hidden; background: var(--bg); }
.am-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.am-foot { display: flex; justify-content: center; gap: 1.2em; padding-top: .3em; font-size: .75em; color: var(--fg-3); }
.am-foot span { display: inline-flex; align-items: center; gap: .35em; }
.am-foot span::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--d1); }
.am-foot span:nth-child(2)::before { background: var(--d2); } .am-foot span:nth-child(3)::before { background: var(--d3); } .am-foot span:nth-child(4)::before { background: var(--d4); }

/* --- versión teléfono (app del conductor / cliente) --- */
.amp { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .9em; padding: 2.9em 1.1em 1em; font: 400 clamp(5px, 4.1cqw, 17px)/1.35 var(--f-body); color: var(--fg); background: var(--bg); text-align: left; }
.amp svg.i { width: 1.2em; height: 1.2em; flex: none; }
.amp-status { position: absolute; top: .75em; left: 1.6em; right: 1.4em; display: flex; justify-content: space-between; font-size: .78em; font-weight: 650; }
.amp-head { display: flex; align-items: center; justify-content: space-between; }
.amp-head b { font-size: 1.35em; letter-spacing: -.03em; }
.amp-head div span { font-size: .8em; color: var(--fg-3); }
.amp-card { padding: .95em; border-radius: 1.1em; background: var(--bg-2); border: 1px solid var(--line); display: grid; gap: .35em; }
.amp-card small { font: 500 .66em/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sig-text); }
.amp-card b { font-size: 1.1em; letter-spacing: -.02em; }
.amp-card span { font-size: .82em; color: var(--fg-3); }
.amp-row { display: flex; justify-content: space-between; align-items: center; gap: .5em; font-size: .85em; }
.amp-map { position: relative; flex: 1; min-height: 6em; border-radius: 1.1em; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); }
.amp-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.amp-cta { display: grid; place-items: center; height: 3.1em; border-radius: 99em; font-weight: 700; background: var(--sig); color: var(--on-sig); animation: sig-pulse 1.6s ease-in-out infinite; }
.amp-tabs { display: flex; justify-content: space-around; padding-top: .55em; border-top: 1px solid var(--line); color: var(--fg-3); }
.amp-tabs .on { color: var(--sig-text); }
@media (prefers-reduced-motion: reduce) { .amp-cta { animation: none; } }