:root {
  --bg: #f2f2ef;
  --ink: #141414;
  --ink-2: #6f6f6a;
  --ink-3: #a3a39e;
  --ink-4: #cfcfca;
  --line: rgba(20, 20, 20, .08);
  --red: #b8123a;
  --red-soft: rgba(184, 18, 58, .09);
  --font: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  overscroll-behavior: none;
  /* El fondo se calienta con la aguja: app.js mezcla el papel con el rojo en --paper. */
  background: var(--paper, var(--bg));
  color: var(--ink);
  font-family: var(--font);
  font-feature-settings: 'tnum' 0;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

p,
h2,
ol {
  margin: 0;
  padding: 0;
}

ol {
  list-style: none;
}

/* Escenario fijo que se escala a la ventana, así la grabación siempre tiene el mismo encuadre. */
.stage {
  position: fixed;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  padding: 40px 56px 36px;
  display: grid;
  grid-template-columns: 880px 540px;
  grid-template-rows: 44px minmax(0, 1fr);
  grid-template-areas: "top top" "process outcome";
  justify-content: center;
  column-gap: 88px;
  row-gap: 28px;
  transform-origin: 0 0;
}

body.dropping .stage::after {
  content: '';
  position: absolute;
  inset: 20px;
  border: 2px dashed var(--ink-3);
  border-radius: 18px;
  pointer-events: none;
}

.alarm-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--ease);
}

body.alarm .alarm-bar {
  transform: scaleX(1);
}

/* Encabezado */

.top {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 64px;
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.brand-mark {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
}

.brand-core {
  fill: var(--red);
  stroke: none;
}

.brand-name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.015em;
}

.calls {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.call {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 19px;
  background: none;
  color: var(--ink-3);
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.call:hover {
  color: var(--ink-2);
}

.call.selected {
  color: var(--ink);
  background: var(--line);
}

.call:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.call-name {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* El punto guarda el resultado de la última lectura de cada llamada. */
.call-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px currentColor;
  opacity: .55;
}

.call[data-outcome="sin_senales"] .call-dot {
  box-shadow: inset 0 0 0 1.5px var(--ink-2);
  opacity: 1;
}

.call[data-outcome="revisar"] .call-dot {
  box-shadow: none;
  background: var(--ink);
  opacity: 1;
}

.call[data-outcome="alerta"] .call-dot {
  box-shadow: none;
  background: var(--red);
  opacity: 1;
}

.call[hidden] {
  display: none;
}

.call.mic svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* Mientras el micrófono está abierto el botón lo dice, en rojo y latiendo. */
.call.mic.live {
  color: var(--red);
}

.call.mic.live svg {
  animation: breathe 1.2s ease-in-out infinite;
}

.call-plus {
  font-size: 20px;
  line-height: 1;
}

.clock {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
  flex: none;
  font-size: 17px;
}

.status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
}

.status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
}

body.listening .status::before {
  background: var(--ink);
  animation: breathe 1.6s ease-in-out infinite;
}

body.alarm.listening .status::before {
  background: var(--red);
}

.time {
  min-width: 56px;
  text-align: right;
  font-feature-settings: 'tnum' 1;
  font-weight: 500;
}

@keyframes breathe {
  50% { opacity: .25; }
}

/* En espera: antes de elegir una llamada solo está Jev, en grande, con las llamadas debajo. */

body.idle .clock,
body.idle .process > :not(.notice),
body.idle .outcome {
  visibility: hidden;
}

.welcome {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 24px;
  pointer-events: none;
}

body.idle .welcome,
body.arriving .welcome {
  display: flex;
}

.welcome-eye {
  width: 216px;
  height: 216px;
  overflow: visible;
}

.welcome-eye .eye-ring {
  stroke-width: .62;
}

/* El ojo respira y cada tanto sale una onda del centro: está escuchando, a la espera. */
.welcome-eye .eye-core {
  fill: var(--ink);
  transform-box: fill-box;
  transform-origin: center;
  animation: standby 3.2s ease-in-out infinite;
}

.welcome-eye .eye-wave {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: sonar 3.2s cubic-bezier(.2, .6, .3, 1) infinite;
}

@keyframes standby {
  50% { transform: scale(.8); }
}

@keyframes sonar {
  0% { transform: scale(1); opacity: .45; }
  70%, 100% { transform: scale(3.6); opacity: 0; }
}

.welcome-title {
  margin-top: 44px;
  font-size: 120px;
  font-weight: 650;
  line-height: .9;
  letter-spacing: -.045em;
}

.welcome-state {
  margin-top: 18px;
  font-size: 28px;
  color: var(--ink-2);
}

.welcome .calls {
  margin-top: 64px;
  gap: 12px;
  overflow: visible;
  pointer-events: auto;
}

.welcome .call {
  height: 56px;
  padding: 0 28px;
  gap: 12px;
  border-radius: 28px;
  color: var(--ink);
  font-size: 21px;
  box-shadow: inset 0 0 0 1.5px var(--ink-4);
}

.welcome .call:hover {
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.welcome .call.mic svg {
  width: 18px;
  height: 18px;
}

.welcome .call-plus {
  font-size: 24px;
}

/* Todavía no hay resultados que mostrar en el punto de cada llamada. */
.welcome .call-dot {
  display: none;
}

/* Al empezar, el ojo grande vuela hasta el lugar de Jev; mientras tanto el ojo chico no se ve. */
body.arriving .reader .eye {
  visibility: hidden;
}

/* Las llamadas suben desde el centro: el encabezado no las recorta mientras vuelan. */
body.arriving .top .calls {
  overflow: visible;
}

body.arriving .welcome-title,
body.arriving .welcome-state {
  opacity: 0;
  transition: opacity .2s ease;
}

body.arriving .welcome-eye .eye-wave {
  visibility: hidden;
}

body.arriving .welcome-eye .eye-core {
  animation: none;
}

/* Conversación: quien llama a la izquierda, quien atiende a la derecha. */

.process {
  grid-area: process;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.talk {
  position: relative;
  min-height: 96px;
}

.lines {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  max-height: 340px;
  padding-bottom: 4px;
  overflow: hidden;
}

/* Si dos frases largas no entran, se corta lo más viejo, arriba, con un desvanecido. */
.lines.overflow {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 44px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 44px);
}

.line {
  position: relative;
  flex: none;
  display: flex;
  padding: 0 72px;
  transition: opacity .8s ease;
}

.line.atiende {
  justify-content: flex-end;
}

/* Sin transcripción no se sabe quién habla: las frases van sin margen para etiquetas. */
.line:not(.llama):not(.atiende) {
  padding-left: 0;
}

.line:not(.llama):not(.atiende) .text {
  max-width: 720px;
}

.who {
  position: absolute;
  top: 8px;
  left: 0;
  font-size: 14px;
  font-weight: 550;
  color: var(--ink-3);
}

.line.atiende .who {
  left: auto;
  right: 0;
}

.text {
  max-width: 620px;
  font-size: 25px;
  line-height: 1.4;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.line.atiende .text {
  max-width: 500px;
  text-align: right;
}

/* Gris mientras suena, tinta cuando Jev ya la leyó. El subrayado se dibuja palabra por palabra. */
.w,
.sp {
  color: var(--ink-2);
  padding-bottom: 6px;
  background-image: linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2.5px;
  transition: color .45s ease, opacity .22s ease, background-size var(--l, .3s) linear var(--d, 0s);
}

.w {
  opacity: 0;
}

.w.on {
  opacity: 1;
}

.w.note {
  font-style: italic;
  color: var(--ink-3);
}

/* La palabra queda vacía cuando sale volando hacia Jev; vuelve con tinta cuando Jev la clasificó. */
.w.taken {
  color: var(--ink-4);
  transition-duration: .12s, .22s, var(--l, .3s);
}

.w.read {
  color: var(--ink);
}

.w.note.read {
  color: var(--ink-3);
}

.w.flag,
.sp.flag {
  background-size: 100% 2.5px;
}

.line.past {
  opacity: .3;
}

.line.interim .text {
  color: var(--ink-3);
}

/* Marca al final de cada frase: esperando, leída sin eventos o con evento. */
.mark {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 10px;
  vertical-align: -2px;
}

.line.speaking .mark {
  opacity: 0;
}

.mark svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mark .tick {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
}

.mark .dot {
  fill: var(--red);
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
}

.mark .ring {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.6;
  opacity: 0;
}

.mark.wait .ring {
  opacity: 1;
  animation: breathe .8s ease-in-out infinite;
}

.mark.ok .tick {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .45s var(--ease);
}

.mark.flag .dot {
  transform: scale(1);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

.hint {
  position: absolute;
  left: 72px;
  bottom: 16px;
  font-size: 21px;
  color: var(--ink-3);
  transition: opacity .4s ease;
}

.hint kbd {
  display: inline-block;
  padding: 1px 10px 2px;
  border: 1.5px solid var(--ink-4);
  border-radius: 7px;
  font: inherit;
  font-size: 18px;
  color: var(--ink-2);
}

.hint.hidden {
  opacity: 0;
}

.notice {
  position: absolute;
  left: 72px;
  top: 0;
  max-width: 760px;
  font-size: 18px;
  color: var(--red);
}

/* En espera los avisos (por ejemplo, un audio que no se pudo subir) van centrados abajo. */
body.idle .stage .notice {
  position: fixed;
  left: 24px;
  right: 24px;
  top: auto;
  bottom: 72px;
  max-width: none;
  text-align: center;
}

/* Jev leyendo, debajo de la voz */

.reading {
  width: 100%;
}

/* Columna del resultado: medidor y eventos, centrados en vertical. */
.outcome {
  grid-area: outcome;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 44px;
  min-height: 0;
}

.reader {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 20px;
}

.eye {
  width: 64px;
  height: 64px;
  overflow: visible;
}

.eye-ring {
  fill: none;
  stroke: var(--ink-4);
  stroke-width: 1.5;
}

.eye-scan {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 34 148;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .25s ease;
}

.eye-core {
  fill: var(--ink);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .45s var(--ease), fill .4s ease;
}

.eye-tick {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
}

.eye.reading .eye-scan {
  opacity: 1;
  animation: spin .9s linear infinite;
}

.eye.reading .eye-core {
  transform: scale(.7);
}

.eye.ok .eye-core {
  transform: scale(0);
}

.eye.ok .eye-tick {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .5s var(--ease) .08s;
}

.eye.flag .eye-core,
body.alarm .eye .eye-core {
  fill: var(--red);
  transform: scale(1.9);
}

/* En alarma el ojo queda rojo: el tilde de "sin eventos" contradiría el aviso. */
body.alarm .eye.ok .eye-tick {
  stroke-dashoffset: 36;
}

.eye.flag .eye-ring,
body.alarm .eye .eye-ring {
  stroke: var(--red);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.reader-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.reader-title {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -.02em;
}

.reader-state {
  font-size: 17px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reader-latency {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.latency {
  font-size: 24px;
  font-weight: 550;
  font-feature-settings: 'tnum' 1;
}

.latency-note {
  font-size: 14px;
  color: var(--ink-3);
}

/* Lo que ve Jev en la última lectura: tres señales con su probabilidad, que ruedan al actualizarse. */
.readout {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 132px;
}

.row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  height: 40px;
  padding: 0 0 0 84px;
  position: relative;
  transition: opacity .3s ease;
}

.row-label {
  flex: 1;
  font-size: 19px;
  color: var(--ink-2);
  transition: color .4s ease;
}

.row::before {
  content: '';
  position: absolute;
  left: 64px;
  top: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  transform: scale(0);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}

.row.hit::before {
  transform: scale(1);
}

.row.hit .row-label {
  color: var(--ink);
}

.row.hit .row-num {
  color: var(--red);
}

.row-num {
  display: flex;
  align-items: baseline;
  font-size: 26px;
  font-weight: 550;
  color: var(--ink);
  transition: color .4s ease;
}

.pct {
  margin-left: 3px;
  font-size: .62em;
  font-weight: 500;
  opacity: .7;
}

.readout.waiting .row {
  opacity: .45;
}

.readout.waiting .odo-col:last-child .odo-reel {
  animation: roll .5s linear infinite;
}

@keyframes roll {
  from { transform: translateY(0); }
  to { transform: translateY(-10.2em); }
}

/* Contador de rodillo: cada dígito es una tira 0-9 que se desplaza. */
.odo {
  display: inline-flex;
}

.odo-col {
  display: inline-block;
  width: .6em;
  height: 1.02em;
  overflow: hidden;
  line-height: 1.02em;
  text-align: center;
  transition: opacity .3s ease, width .3s ease;
}

.odo-col.zero {
  width: 0;
  opacity: 0;
}

.odo-reel {
  display: block;
  transition: transform 1s var(--ease);
}

.odo-reel span {
  display: block;
  height: 1.02em;
}

/* Eventos detectados */

/* Alto fijo para seis eventos: la columna no se mueve cuando aparece uno nuevo. La lista aparece
   recién con el primer evento. */
.events {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}

.events.shown {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease;
}

.events-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  font-weight: 600;
}

.event-count {
  color: var(--ink-3);
  font-weight: 500;
  font-feature-settings: 'tnum' 1;
}

.event-list {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
  overflow: hidden;
  max-height: 258px;
}

.event {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: baseline;
  gap: 14px;
  height: 43px;
  padding: 8px 12px 0;
  margin: 0 -12px;
  border-radius: 10px;
  transition: background-color 1.6s ease;
}

.event.new {
  background: var(--red-soft);
  transition: none;
}

.event-time {
  font-size: 15px;
  color: var(--ink-3);
  font-feature-settings: 'tnum' 1;
}

.event-label {
  font-size: 19px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-num {
  display: flex;
  align-items: baseline;
  font-size: 19px;
  font-weight: 600;
  color: var(--red);
}

.event.info .event-label,
.event.info .event-num {
  color: var(--ink-2);
}

/* Veredicto: el dial solo dice confiable o no confiable. */

/* El veredicto encabeza el resultado: es lo primero que se lee de la llamada. */
.verdict {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.dial {
  width: 440px;
  height: 244px;
  overflow: visible;
}

.dial-track {
  fill: none;
  stroke: var(--ink-4);
  stroke-width: 1.5;
}

.dial-tick {
  stroke: var(--ink-3);
  stroke-width: 1.4;
}

.dial-tick.major {
  stroke: var(--ink-2);
  stroke-width: 2;
}

.dial-band {
  fill: none;
  stroke: var(--red);
  stroke-width: 6;
}

.dial-end {
  font-family: var(--font);
  font-size: 15px;
  fill: var(--ink-2);
}

.needle {
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
}

.pivot {
  fill: var(--ink);
}

.pivot-core {
  fill: var(--paper, var(--bg));
}

.verdict-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 104px;
  text-align: center;
}

.level {
  font-size: 36px;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--ink-3);
  transition: color .5s ease;
}

.level[data-level="sin_senales"] {
  color: var(--ink-2);
}

.level[data-level="revisar"] {
  color: var(--ink);
}

.level[data-level="alerta"] {
  color: var(--red);
}

.advice {
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink-2);
}

body.alarm .advice {
  font-size: 23px;
  font-weight: 600;
  color: var(--ink);
}

/* Tira de voz: la onda se entinta al sonar y la curva roja es la lectura acumulada de Jev. */

.strip {
  flex: none;
  height: 92px;
  margin-top: 8px;
}

.wave {
  display: block;
  width: 100%;
  height: 100%;
}

/* Verificación de Turnstile: solo aparece si Cloudflare necesita que la persona interactúe. */
.human {
  position: absolute;
  top: 104px;
  left: 50%;
  z-index: 8;
  transform: translateX(-50%);
  display: none;
}

.human.shown {
  display: block;
}

/* Firma */

.signature {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  margin: 0;
  font-size: 13px;
  letter-spacing: .02em;
  text-align: center;
  color: var(--ink-3);
}

/* Palabras en vuelo hacia Jev */

.flight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.ghost {
  position: absolute;
  font-size: 25px;
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: pre;
  transform-origin: center;
  will-change: transform, opacity;
}

.drop {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
}

/* Celular y ventanas angostas: en vez de achicar el escenario, la página ocupa la pantalla con tamaños
   pensados para leerse en la mano. Arriba la conversación y abajo Jev, el medidor y los eventos. */

body.compact {
  height: 100dvh;
}

body.compact .stage {
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  padding: 12px max(18px, calc(50vw - 300px)) 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

body.compact .process,
body.compact .outcome {
  display: contents;
}

body.compact .top {
  flex: none;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: auto;
}

body.compact .brand {
  gap: 10px;
}

body.compact .brand-mark {
  width: 20px;
  height: 20px;
}

body.compact .brand-name {
  font-size: 17px;
}

body.compact .clock {
  gap: 14px;
  font-size: 15px;
}

body.compact .time {
  min-width: 36px;
}

body.compact .top .calls {
  order: 3;
  width: calc(100% + 12px);
  margin-left: -12px;
  gap: 2px;
}

body.compact .top .call {
  height: 36px;
  padding: 0 12px;
  gap: 8px;
  border-radius: 18px;
  font-size: 15px;
}

/* En el encabezado del celular, subir y hablar quedan solo con su ícono. */
body.compact .top .call.add:not(.busy) .call-name,
body.compact .top .call.mic:not(.live) .call-name {
  display: none;
}

body.compact .talk {
  order: 1;
  flex: 1 1 0;
  min-height: 0;
  max-height: 360px;
  margin-top: 12px;
  overflow: hidden;
}

body.compact .lines {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 100%;
  gap: 14px;
}

body.compact .lines.overflow {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 32px);
}

body.compact .line {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 0;
}

body.compact .line.atiende {
  align-items: flex-end;
}

body.compact .who {
  position: static;
  font-size: 12px;
}

body.compact .text,
body.compact .line:not(.llama):not(.atiende) .text {
  max-width: 94%;
  font-size: 19px;
  line-height: 1.38;
}

body.compact .line.atiende .text {
  max-width: 84%;
}

body.compact .mark {
  width: 15px;
  height: 15px;
  margin-left: 7px;
}

body.compact .hint {
  left: 0;
  bottom: 4px;
  font-size: 16px;
}

body.compact .notice {
  position: static;
  order: 2;
  max-width: none;
  margin-top: 8px;
  font-size: 15px;
}

body.compact .notice:empty {
  display: none;
}

body.compact .strip {
  order: 3;
  height: 44px;
  margin-top: 10px;
}

/* `.outcome > .reading` y no `.reading`: el ojo también lleva la clase `reading` mientras lee. */
body.compact .outcome > .reading {
  order: 4;
  margin-top: 12px;
}

body.compact .reader {
  grid-template-columns: 46px 1fr auto;
  gap: 14px;
}

body.compact .eye {
  width: 46px;
  height: 46px;
}

body.compact .reader-title {
  font-size: 20px;
}

body.compact .reader-state {
  font-size: 15px;
}

body.compact .latency {
  font-size: 20px;
}

body.compact .latency-note {
  font-size: 12px;
}

body.compact .readout {
  display: none;
}

body.compact .verdict {
  order: 5;
  margin-top: 6px;
  gap: 2px;
}

body.compact .dial {
  width: clamp(220px, 34vh, 340px);
  width: clamp(220px, 34dvh, 340px);
  height: auto;
  aspect-ratio: 440 / 244;
}

/* Los extremos van centrados debajo de cada punta del arco, para que la aguja no los pise. */
body.compact .dial-end {
  font-size: 23px;
  text-anchor: middle;
}

body.compact .dial-end.low {
  transform: translate(11px, -2px);
}

body.compact .dial-end.high {
  transform: translate(-11px, -2px);
}

body.compact .dial-track {
  stroke-width: 2.2;
}

body.compact .dial-tick {
  stroke-width: 2;
}

body.compact .dial-tick.major {
  stroke-width: 2.8;
}

body.compact .dial-band {
  stroke-width: 9;
}

body.compact .needle {
  stroke-width: 5;
}

body.compact .verdict-text {
  gap: 4px;
  min-height: 52px;
}

body.compact .level {
  font-size: 27px;
}

body.compact .advice {
  font-size: 15px;
}

body.compact.alarm .advice {
  font-size: 18px;
}

body.compact .events {
  order: 6;
  min-height: 106px;
  margin-top: 12px;
  margin-bottom: auto;
}

body.compact .events-title {
  padding-bottom: 8px;
  font-size: 14px;
}

body.compact .event-list {
  max-height: 76px;
  padding-top: 4px;
}

body.compact .event {
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  height: 36px;
  padding: 8px 10px 0;
  margin: 0 -10px;
}

body.compact .event-time {
  font-size: 13px;
}

body.compact .event-label,
body.compact .event-num {
  font-size: 16px;
}

body.compact .signature {
  bottom: 6px;
  font-size: 11px;
}

body.compact .welcome {
  padding: 0 20px 40px;
}

body.compact .welcome-eye {
  width: 160px;
  height: 160px;
}

body.compact .welcome-eye .eye-ring {
  stroke-width: .8;
}

body.compact .welcome-title {
  margin-top: 30px;
  font-size: 72px;
}

body.compact .welcome-state {
  margin-top: 10px;
  font-size: 19px;
}

/* En el celular las llamadas van de a dos, todas del mismo ancho. */
body.compact .welcome .calls {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 340px;
  gap: 10px;
}

body.compact .welcome .call {
  justify-content: center;
  height: 52px;
  padding: 0 16px;
  font-size: 17px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}