/* =========================================================
   KINEMYX UI 0.8.0
========================================================= */

:root {
  --bg-main: #f3f6fa;
  --white: #ffffff;
  --dark-950: #070b10;
  --dark-900: #0b1118;
  --dark-850: #101822;
  --text-main: #101720;
  --text-secondary: #667589;
  --text-muted: #96a3b2;
  --blue: #1677ff;
  --blue-soft: #eaf3ff;
  --blue-border: #cfe1ff;
  --green: #18a66a;
  --green-soft: #eaf8f1;
  --green-border: #bee7d2;
  --amber: #d99114;
  --amber-soft: #fff6e5;
  --amber-border: #efd69d;
  --red: #d84c4c;
  --border: #dde5ed;
  --border-soft: #e9eef3;
  --shadow-sm: 0 5px 16px rgba(21, 37, 56, 0.05);
  --shadow-lg: 0 20px 55px rgba(9, 22, 38, 0.12);
  --radius-lg: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(circle at 8% 0%, rgba(22, 119, 255, 0.055), transparent 28%),
    linear-gradient(180deg, #f8fafc 0%, var(--bg-main) 100%);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* ACCESS */
.access-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 24px;
  overflow: hidden;
  background: linear-gradient(145deg, #05080d 0%, #081321 48%, #07101b 100%);
}
.access-background-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.28;
  pointer-events: none;
}
.access-glow-one { width: 380px; height: 380px; top: -130px; right: -100px; background: #1677ff; }
.access-glow-two { width: 320px; height: 320px; bottom: -130px; left: -130px; background: #0956bd; }
.access-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 430px;
  padding: 34px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 26px;
  background: rgba(12,20,30,.91);
  box-shadow: 0 30px 90px rgba(0,0,0,.42);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.access-brand { color: #fff; font-size: 34px; font-weight: 900; letter-spacing: 2.5px; }
.access-brand span { color: var(--blue); }
.access-brand-subtitle { margin-top: 8px; color: #8191a6; font-size: 8px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; }
.access-beta-badge {
  display: inline-block;
  margin-top: 26px;
  padding: 7px 10px;
  border: 1px solid rgba(22,119,255,.27);
  border-radius: 999px;
  background: rgba(22,119,255,.1);
  color: #65a8ff;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 1.1px;
}
.access-card h1 { margin: 18px 0 8px; color: #fff; font-size: 26px; }
.access-description { margin: 0 0 24px; color: #99a9bc; font-size: 12px; line-height: 1.55; }
.access-label { display: block; margin-top: 14px; color: #c5d0dd; font-size: 11px; font-weight: 700; }
.access-label input {
  width: 100%; min-height: 48px; margin-top: 7px; padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 11px; outline: none;
  background: rgba(255,255,255,.055); color: #fff; font: inherit; font-size: 16px;
}
.access-label input::placeholder { color: #647386; }
.password-wrapper { position: relative; }
.password-wrapper input { padding-right: 76px; }
.password-toggle {
  position: absolute; right: 7px; bottom: 6px; width: auto; min-height: 36px;
  padding: 5px 10px; border: 0; background: transparent; box-shadow: none;
  color: #6faeff; font-size: 10px;
}
.access-submit { width: 100%; min-height: 49px; margin-top: 22px; }
.access-status { min-height: 18px; margin-top: 12px; font-size: 10px; text-align: center; }
.access-status.error { padding: 9px; border-radius: 8px; background: rgba(216,76,76,.12); color: #ff9393; }
.access-status.success { color: #64dba1; }
.access-notice { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07); color: #718095; font-size: 8px; line-height: 1.55; }

/* HEADER */
header { width: 92%; max-width: 1450px; margin: 0 auto; padding: 28px 0 18px; }
.header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.brand { color: var(--dark-900); font-size: clamp(29px,4vw,39px); font-weight: 850; letter-spacing: 2.5px; }
.brand span { color: var(--blue); }
.subtitle { margin-top: 8px; color: var(--text-secondary); font-size: 10px; font-weight: 750; letter-spacing: 2.7px; text-transform: uppercase; }
.beta-badge { padding: 7px 10px; border: 1px solid var(--blue-border); border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 9px; font-weight: 850; }
.tester-chip { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text-secondary); font-size: 9px; }
.tester-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.logout-button { width: auto; min-height: 30px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: #fff; box-shadow: none; color: var(--text-secondary); font-size: 9px; }

/* GENERAL */
main { width: 92%; max-width: 1450px; margin: 0 auto; padding-bottom: 70px; }
.panel { padding: 24px; margin-bottom: 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.panel h2 { margin: 0 0 18px; font-size: clamp(20px,2.2vw,26px); font-weight: 800; }
.panel h3 { margin: 24px 0 12px; color: var(--text-secondary); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.section-eyebrow { margin-bottom: 7px; color: var(--blue); font-size: 9px; font-weight: 850; letter-spacing: 1.8px; text-transform: uppercase; }

button {
  min-height: 43px; padding: 10px 18px; border: 1px solid transparent; border-radius: 11px;
  background: var(--blue); color: #fff; font: inherit; font-size: 14px; font-weight: 750;
  cursor: pointer; box-shadow: 0 6px 14px rgba(22,119,255,.19);
}
button.secondary { background: #f3f6f9; color: #556477; border-color: #d9e1e9; box-shadow: none; }
button:disabled { opacity: .42; cursor: default; box-shadow: none; }
.buttons, .category-tabs, .exercise-selector { display: flex; flex-wrap: wrap; gap: 9px; }

.category-tabs { padding: 5px; margin-bottom: 14px; background: #f2f5f8; border: 1px solid var(--border); border-radius: 14px; }
.category-tabs button { flex: 1 1 180px; box-shadow: none; }
.exercise-selector { padding-top: 2px; }
.exercise-selector button { box-shadow: none; }

/* SETUP */
.setup-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 15px; }
.setup-header h2 { margin: 0; }
.setup-helper { padding: 7px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 9px; font-weight: 800; white-space: nowrap; }

.side-selector-panel { margin-bottom: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: #f8fafc; }
.side-selector-heading strong { display: block; color: var(--dark-900); font-size: 13px; font-weight: 800; }
.side-selector-heading small { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 9px; line-height: 1.4; }
.side-selector-buttons { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 11px; }
.side-choice { min-height: 39px; padding: 7px 8px; border: 1px solid var(--border); background: #fff; box-shadow: none; color: var(--text-secondary); font-size: 10px; font-weight: 800; }
.side-choice.active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.side-mode-help { margin-top: 9px; color: var(--text-secondary); font-size: 9px; line-height: 1.4; }

.setup-flow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.setup-step { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 88px; padding: 10px 7px; border: 1px solid var(--border); border-radius: 13px; background: #f7f9fc; text-align: center; }
.step-number { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 7px; border-radius: 50%; background: #e6ebf1; color: #738194; font-size: 12px; font-weight: 850; }
.step-copy strong { display: block; color: var(--dark-900); font-size: 11px; }
.step-copy small, .step-status { display: none; }
.setup-step.done { background: var(--green-soft); border-color: var(--green-border); }
.setup-step.done .step-number { background: var(--green); color: #fff; font-size: 0; }
.setup-step.done .step-number::after { content: "✓"; font-size: 14px; }
.setup-step.active { background: var(--blue-soft); border-color: var(--blue-border); }
.setup-step.active .step-number { background: var(--blue); color: #fff; }
.setup-step.pending { opacity: .58; }
.setup-step.warning-step { background: var(--amber-soft); border-color: var(--amber-border); opacity: 1; }

.position-tip { display: flex; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #f4f7fb; color: var(--text-secondary); font-size: 10px; line-height: 1.4; }
.tip-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); }

/* CAMERA */
.camera-section {
  display: grid;
  grid-template-columns: minmax(0,4fr) minmax(250px,1fr);
  align-items: start;
  gap: 14px;
  padding: 14px;
  margin-bottom: 16px;
  border-radius: 24px;
  background: linear-gradient(145deg,var(--dark-950),var(--dark-850));
  box-shadow: var(--shadow-lg);
}
.camera-column { min-width: 0; }
.camera-wrapper { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; border: 1px solid rgba(255,255,255,.06); border-radius: 17px; background: #020406; }
video { display: block; width: 100%; height: 100%; object-fit: contain; background: #020406; }
canvas { position: absolute; left: 0; top: 0; pointer-events: none; }

.position-guide { display: flex; align-items: flex-start; gap: 10px; width: 100%; margin-top: 9px; padding: 11px 13px; border: 1px solid var(--amber-border); border-radius: 12px; background: var(--amber-soft); color: #5e481b; }
.position-guide-dot { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: var(--amber); }
.position-guide-copy { min-width: 0; }
.position-guide-copy strong { display: block; color: #503d15; font-size: 11px; font-weight: 850; }
.position-guide-copy span { display: block; margin-top: 2px; color: #776332; font-size: 9px; line-height: 1.45; }
.position-guide.ready-guide { border-color: var(--green-border); background: var(--green-soft); }
.position-guide.ready-guide .position-guide-dot { background: var(--green); }
.position-guide.ready-guide .position-guide-copy strong { color: #116844; }
.position-guide.ready-guide .position-guide-copy span { color: #448267; }

.warning { width: 100%; margin-top: 7px; padding: 10px 13px; border: 1px solid var(--amber-border); border-radius: 11px; background: #fff3d7; color: #7c5711; font-size: 10px; font-weight: 800; line-height: 1.35; }

/* LIVE */
.live-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: #fff; }
.live-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 57px; padding: 10px 11px; border: 1px solid rgba(255,255,255,.06); border-radius: 13px; background: rgba(255,255,255,.045); }
.live-label { margin-bottom: 3px; color: #58a4ff; font-size: 8px; font-weight: 850; letter-spacing: 1.8px; }
.live-header > div > strong { color: #fff; font-size: 15px; font-weight: 850; }
.live-side-pill { flex: 0 0 auto; min-width: 76px; padding: 6px 8px; border: 1px solid rgba(22,119,255,.22); border-radius: 9px; background: rgba(22,119,255,.09); text-align: center; }
.live-side-pill small { display: block; color: #7294bb; font-size: 6px; font-weight: 800; }
.live-side-pill strong { display: block; margin-top: 2px; color: #80b7ff; font-size: 9px; font-weight: 850; }
.live-main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.live-secondary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.metric { min-width: 0; padding: 10px; border: 1px solid rgba(255,255,255,.055); border-radius: 11px; background: rgba(255,255,255,.047); }
.metric-primary { min-height: 67px; }
.metric-secondary { min-height: 58px; }
.metric small { display: block; margin-bottom: 4px; overflow: hidden; color: #8899ad; font-size: 7px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.metric strong { display: block; overflow: hidden; color: #fff; font-size: 17px; font-weight: 850; white-space: nowrap; text-overflow: ellipsis; }
.metric-secondary strong { font-size: 14px; }
.status { padding: 10px 11px; border: 1px solid rgba(22,119,255,.08); border-radius: 10px; background: rgba(22,119,255,.08); color: #b9d5ff; font-size: 9px; line-height: 1.45; }

/* CONFIG */
.config-shell, .feedback-panel { padding: 0; overflow: hidden; }
.config-details summary, .feedback-details > summary { padding: 20px 22px; list-style: none; cursor: pointer; }
.config-details summary { display: flex; justify-content: space-between; gap: 18px; }
.config-details summary::-webkit-details-marker, .feedback-details summary::-webkit-details-marker { display: none; }
.config-summary-copy strong, .feedback-summary-copy strong { display: block; font-size: 18px; }
.config-summary-copy small, .feedback-summary-copy small { display: block; margin-top: 5px; color: var(--text-secondary); font-size: 10px; }
.config-toggle { color: var(--blue); font-size: 10px; font-weight: 800; }
.config-hide { display: none; }
.config-details[open] .config-show { display: none; }
.config-details[open] .config-hide { display: inline; }
.config-content, .feedback-content { padding: 2px 22px 22px; border-top: 1px solid var(--border-soft); }

.settings-grid, .feedback-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 14px; }
label { display: block; color: var(--text-secondary); font-size: 12px; font-weight: 650; }
.label-title { color: inherit; font-size: inherit; }
label span { display: block; margin-top: 5px; color: var(--text-muted); font-size: 10px; }
input, select, textarea { width: 100%; min-height: 44px; margin-top: 7px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fbfcfe; color: var(--text-main); font: inherit; font-size: 15px; outline: none; }
textarea { min-height: 112px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22,119,255,.1); }

.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #e0e7ee; border-radius: 9px; background: #f6f8fb; }
.checks input { width: 16px; height: 16px; min-height: 0; margin: 0; }
.checks label span { display: inline; margin: 0; color: inherit; font-size: inherit; }

.config-note, .feedback-intro { margin-top: 16px; padding: 11px 12px; border-radius: 10px; background: #f5f8fc; color: var(--text-secondary); font-size: 10px; line-height: 1.5; }
.muted-note { margin-top: 8px; }

/* RESULTS */
.summary { padding: 14px 16px; margin-bottom: 16px; border: 1px solid #dce9fb; border-radius: 12px; background: linear-gradient(135deg,#f8fbff,#eff6ff); color: var(--text-secondary); font-size: 12px; line-height: 1.7; }
.summary strong { color: var(--dark-900); }
table { width: 100%; border-collapse: collapse; }
thead { background: #f7f9fc; }
th { padding: 11px 12px; border-bottom: 1px solid var(--border); color: #778699; font-size: 9px; font-weight: 800; text-align: center; text-transform: uppercase; }
td { padding: 12px; border-bottom: 1px solid #edf1f5; color: #344253; font-size: 12px; text-align: center; }
.pass { color: var(--green); font-weight: 850; }
.fail { color: var(--amber); font-weight: 850; }

/* FEEDBACK */
.feedback-details > summary { display: grid; grid-template-columns: 42px minmax(0,1fr) 28px; align-items: center; gap: 12px; }
.feedback-summary-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--blue-soft); }
.feedback-arrow { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f3f6f9; color: var(--blue); }
.feedback-message-label { margin-top: 14px; }
.optional { display: inline; margin: 0; }
.feedback-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.feedback-status { font-size: 10px; line-height: 1.4; }
.feedback-status.success { color: #117249; }
.feedback-status.error { color: var(--red); }

.app-footer { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; color: var(--text-muted); font-size: 9px; text-align: center; }

@media (max-width: 1000px) {
  .camera-section { grid-template-columns: minmax(0,2.5fr) minmax(220px,1fr); }
}

@media (max-width: 700px) {
  .access-gate { padding: 14px; }
  .access-card { padding: 27px 20px; border-radius: 22px; }
  .access-brand { font-size: 29px; }

  header { width: calc(100% - 24px); padding: 18px 0 12px; }
  .header-row { align-items: center; }
  .brand { font-size: 25px; }
  .subtitle { font-size: 7px; }
  .header-actions { max-width: 52%; gap: 5px; }
  .tester-chip { max-width: 120px; overflow: hidden; white-space: nowrap; }
  .beta-badge { font-size: 7px; }

  main { width: calc(100% - 16px); padding-bottom: 45px; }
  .panel { padding: 16px 14px; margin-bottom: 10px; border-radius: 17px; }
  .panel h2 { font-size: 19px; }

  .category-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .exercise-selector { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
  .exercise-selector button { padding: 7px 5px; font-size: 10px; }

  .side-selector-panel { padding: 11px; }
  .side-selector-buttons { gap: 5px; }
  .side-choice { min-height: 37px; padding: 5px 3px; font-size: 8px; }
  .setup-helper { font-size: 7px; }
  .setup-flow { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
  .setup-step { min-height: 68px; padding: 8px 3px; }
  .step-copy strong { font-size: 8px; }

  .camera-section { display: flex; flex-direction: column; gap: 9px; padding: 7px; border-radius: 18px; }
  .camera-column { width: 100%; }
  .camera-wrapper { width: min(100%,54vh); margin: 0 auto; aspect-ratio: 3/4; border-radius: 14px; }
  video { object-fit: contain; }

  .position-guide { width: min(100%,54vh); margin: 7px auto 0; padding: 10px 11px; }
  .position-guide-copy strong { font-size: 10px; }
  .position-guide-copy span { font-size: 8px; }
  .warning { width: min(100%,54vh); margin: 6px auto 0; padding: 9px 11px; font-size: 9px; }

  .live-panel { width: 100%; gap: 6px; }
  .live-header { min-height: 51px; padding: 8px 10px; }
  .live-header > div > strong { font-size: 13px; }
  .live-main-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
  .metric-primary { min-height: 58px; padding: 8px 5px; text-align: center; }
  .metric-primary small { font-size: 6px; }
  .metric-primary strong { font-size: 12px; }
  .live-secondary-grid { grid-template-columns: 1fr 1fr; gap: 5px; }
  .metric-secondary { min-height: 48px; padding: 7px 9px; }
  .metric-secondary strong { font-size: 13px; }
  .status { padding: 8px 10px; font-size: 8px; }

  .buttons { display: grid; grid-template-columns: 1fr 1fr; }
  button { width: 100%; font-size: 12px; }

  .config-shell, .feedback-panel { padding: 0 !important; }
  .config-details summary, .feedback-details > summary { padding: 16px; }
  .config-content, .feedback-content { padding: 1px 16px 17px; }
  .settings-grid, .feedback-grid { grid-template-columns: 1fr 1fr; gap: 10px 9px; }
  input, select, textarea { font-size: 16px; }
  .checks { display: grid; grid-template-columns: 1fr 1fr; }

  #movementResults thead, #jumpResults thead { display: none; }
  #movementResults tbody, #jumpResults tbody { display: grid; gap: 9px; }
  #movementResults tbody tr, #jumpResults tbody tr {
    display: block; width: 100%; padding: 3px 12px; border: 1px solid #e2e9f0;
    border-radius: 12px; background: #f8fafc;
  }
  #movementResults tbody td, #jumpResults tbody td {
    display: flex; align-items: center; justify-content: space-between; min-height: 40px;
    border-bottom: 1px solid #e8edf3; text-align: right;
  }
  #movementResults tbody td:last-child, #jumpResults tbody td:last-child { border-bottom: none; }
  #movementResults tbody td::before, #jumpResults tbody td::before {
    margin-right: 14px; color: #7a899a; font-size: 8px; font-weight: 800; text-transform: uppercase;
  }

  #movementResults tbody td:nth-child(1)::before { content: "Repetición"; }
  #movementResults tbody td:nth-child(2)::before { content: "Ángulo"; }
  #movementResults tbody td:nth-child(3)::before { content: "Excéntrica"; }
  #movementResults tbody td:nth-child(4)::before { content: "Concéntrica"; }
  #movementResults tbody td:nth-child(5)::before { content: "Estado"; }

  #jumpResults tbody td:nth-child(1)::before { content: "Intento"; }
  #jumpResults tbody td:nth-child(2)::before { content: "Altura estimada"; }
  #jumpResults tbody td:nth-child(3)::before { content: "Tiempo de vuelo"; }
  #jumpResults tbody td:nth-child(4)::before { content: "Protocolo"; }
  #jumpResults tbody td:nth-child(5)::before { content: "Profundidad"; }
  #jumpResults tbody td:nth-child(6)::before { content: "Potencia pico est."; }
  #jumpResults tbody td:nth-child(7)::before { content: "Estado"; }

  .feedback-actions { display: grid; grid-template-columns: 1fr; }
}

@media (max-width: 370px) {
  .settings-grid, .feedback-grid, .checks { grid-template-columns: 1fr; }
  .side-choice { font-size: 7px; }
  .live-main-grid { grid-template-columns: 1fr 1fr; }
}

/* 0.8.2 · Recuadro de estado de la serie (sobre la cámara) */
.series-badge { position: absolute; top: 10px; left: 50%; z-index: 3; max-width: calc(100% - 20px); padding: 7px 12px; border-radius: 10px; transform: translateX(-50%); font-size: 11px; font-weight: 850; letter-spacing: .5px; line-height: 1.3; text-align: center; pointer-events: none; box-shadow: 0 4px 18px rgba(0,0,0,.35); }
.series-badge.ready { background: var(--green); color: #fff; }
.series-badge.wait { border: 1px solid var(--amber); background: rgba(2,4,6,.80); color: #fff; }

/* 0.8.5 · Potencia relativa bajo la absoluta */
.cell-sub { display: block; margin-top: 2px; color: #7a899a; font-size: 10px; font-weight: 650; }
.cell-value { display: inline-block; text-align: inherit; }
/* 0.8.5 · Las etiquetas en mayúscula necesitan alto de línea para no recortar tildes (Ó, É, Á). */
.metric small, .live-side-pill small { line-height: 1.45; padding-top: 1px; }

/* =========================================================
   0.8.6 · Alto fijo de los textos que cambian en vivo
   Con la cámara activa, guía, aviso, estado y ayuda de lado
   cambian de texto varias veces por segundo. Si su alto cambia,
   todo lo que está debajo se desplaza y, en iPhone (Safari no
   compensa el scroll), la página "tiembla" al moverse por ella.
   Cada caja tiene ahora un alto fijo: máximo 2 líneas de texto.
========================================================= */
.warning { min-height: 38px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Aviso sin mensaje: ocupa su espacio pero no se ve (antes aparecía/desaparecía). */
.warning.is-idle { visibility: hidden; }

.position-guide { min-height: 62px; }
.position-guide-copy strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.position-guide-copy span {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; min-height: 2.9em;
}

.status {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; min-height: calc(2.9em + 22px);
}

.side-mode-help {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; min-height: 2.8em;
}

.buttons button { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

@media (max-width: 700px) {
  .warning { min-height: 33px; }
  .position-guide { min-height: 56px; }
  .status { min-height: calc(2.9em + 18px); }
}