/* Conexia — Mockups visuales del producto (centralita, softphone, etc.)
   Adaptado de ideas/dist/centralita.css.
   Carga DESPUÉS de cx-design-v3.css. */

/* ═══════════════════════════════════════════════════════════
   DEMO SHOT — screenshot del producto como CTA al live demo
   (estilo ideas/ centralita.css)
   ═══════════════════════════════════════════════════════════ */

.demo-shot {
  display: block;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--cx3-surface);
  border: 1px solid var(--cx3-line);
  box-shadow: var(--cx3-shadow-lg);
  transition: transform .25s ease, box-shadow .25s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.demo-shot img { width: 100%; height: auto; display: block; }
.demo-shot.hero-shot { max-width: 480px; }
.demo-shot.hero-shot:hover { transform: translateY(-3px); box-shadow: var(--cx3-shadow-lg), 0 0 0 1px var(--cx3-accent-soft); }
.shot-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px 10px 14px;
  background: rgba(15, 15, 20, 0.85);
  color: #fff;
  border-radius: 999px;
  font-size: 13.5px; font-weight: 500;
  letter-spacing: -0.005em;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .2s;
  white-space: nowrap;
  font-family: var(--cx3-font);
}
.demo-shot.hero-shot:hover .shot-play { opacity: 1; }

.demo-shot.demo-shot-desktop { max-width: 560px; }
.demo-shot.demo-shot-mobile  { max-width: 280px; border-radius: 26px; padding: 0; }

/* ═══════════════════════════════════════════════════════════
   SOFTPHONE (PC mock) — usado en /servicios/centralita/centralita-virtual/
   ═══════════════════════════════════════════════════════════ */

.csof {
  width: 100%; max-width: 460px;
  background: var(--cx3-surface);
  border: 1px solid var(--cx3-line);
  border-radius: 16px;
  box-shadow: var(--cx3-shadow-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  font-family: var(--cx3-font);
}

.csof-chrome {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px;
  background: linear-gradient(180deg, #2a6df0, #1f56c2);
  color: #fff;
  font-size: 12px; font-weight: 500;
}
.csof-title { letter-spacing: 0.02em; }
.csof-actions { display: flex; gap: 6px; }
.csof-actions span {
  width: 12px; height: 12px;
  background: rgba(255,255,255,.28);
  border-radius: 3px; display: inline-block;
}

.csof-user {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  background: var(--cx3-surface);
  border-bottom: 1px solid var(--cx3-line);
}
.csof-av {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cx3-accent), color-mix(in oklab, var(--cx3-accent) 50%, #000));
  color: #fff; font-weight: 700; font-size: 13px;
  display: grid; place-items: center;
  flex: 0 0 auto;
  position: relative;
}
.csof-av.sm { width: 30px; height: 30px; font-size: 11px; }
.csof-av.cv-blue    { background: linear-gradient(135deg, #4A90E2, #2455F0); }
.csof-av.cv-amber   { background: linear-gradient(135deg, #F0A23B, #C97B17); }
.csof-av.cv-violet  { background: linear-gradient(135deg, #8E7CF0, #5B4FE6); }
.csof-av.cv-emerald { background: linear-gradient(135deg, #2BC07D, #0E9F6E); }
.csof-av.cv-coral   { background: linear-gradient(135deg, #FF8473, #F0573F); }
.csof-av.cv-slate   { background: linear-gradient(135deg, #8B92A6, #5C6478); }

.csof-user-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.csof-user-name { font-size: 13.5px; font-weight: 600; color: var(--cx3-ink-1); }
.csof-user-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--cx3-ok);
}

.csof-tabs {
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: linear-gradient(180deg, #2f74e5, #1f59c0);
  color: #fff;
}
.csof-tab {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 10px 4px;
  font-size: 11px;
  opacity: .85;
  cursor: pointer;
}
.csof-tab.active {
  background: rgba(255,255,255,.18);
  opacity: 1; font-weight: 600;
}
.csof-tab svg { color: #fff; width: 16px; height: 16px; }

.csof-search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--cx3-surface-2);
  border-bottom: 1px solid var(--cx3-line);
  font-size: 12.5px; color: var(--cx3-ink-3);
}
.csof-search svg { width: 14px; height: 14px; }

.csof-list {
  flex: 1;
  display: flex; flex-direction: column;
  background: var(--cx3-surface);
  min-height: 250px;
}
.csof-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid color-mix(in oklab, var(--cx3-line) 50%, transparent);
}
.csof-row:last-child { border-bottom: 0; }
.csof-row-name {
  font-size: 12.5px; font-weight: 500; color: var(--cx3-ink-1);
}
.csof-row-ext {
  font-size: 11px; color: var(--cx3-ink-3);
}
.csof-row-status {
  margin-left: auto;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 999px;
}
.csof-row-status.on { background: color-mix(in oklab, var(--cx3-ok) 14%, transparent); color: var(--cx3-ok); }
.csof-row-status.busy { background: color-mix(in oklab, #F0573F 14%, transparent); color: #F0573F; }
.csof-row-status.away { background: color-mix(in oklab, #E2A03F 14%, transparent); color: #E2A03F; }

.csof-bottom {
  padding: 10px 14px;
  background: var(--cx3-surface-2);
  border-top: 1px solid var(--cx3-line);
  font-size: 11.5px; color: var(--cx3-ink-3);
  display: flex; align-items: center; justify-content: space-between;
}

/* ═══════════════════════════════════════════════════════════
   PHONE MOCK (mobile) — para slide 4 home Omnia
   ═══════════════════════════════════════════════════════════ */

.cx3-phone-mock {
  width: 280px; height: 540px;
  background: #0F0F14;
  border-radius: 38px;
  padding: 8px;
  box-shadow: var(--cx3-shadow-lg);
  position: relative;
  font-family: var(--cx3-font);
}
.cx3-phone-mock::before {
  content: "";
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 22px;
  background: #0F0F14;
  border-radius: 0 0 16px 16px;
  z-index: 2;
}
.cx3-phone-screen {
  width: 100%; height: 100%;
  background: var(--cx3-surface);
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════
   VISUAL CARDS (mockups con barras animadas + chips)
   ═══════════════════════════════════════════════════════════ */

.cx3-vis-card {
  width: 100%;
  max-width: 520px;
  padding: 22px;
  background: var(--cx3-surface);
  border: 1px solid var(--cx3-line);
  border-radius: 22px;
  box-shadow: var(--cx3-shadow-lg);
  display: flex; flex-direction: column; gap: 14px;
  font-family: var(--cx3-font);
}
.cx3-vis-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.cx3-vis-eye {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cx3-ink-3);
}
.cx3-vis-big {
  font-family: var(--cx3-display);
  font-size: 32px; font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 4px;
  color: var(--cx3-ink-1);
}
.cx3-vis-mid {
  font-family: var(--cx3-display);
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cx3-ink-1);
  margin-top: 4px;
}
.cx3-vis-tile {
  background: var(--cx3-surface-2);
  border-radius: 14px;
  padding: 14px 16px;
}
.cx3-vis-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cx3-vis-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.cx3-vis-chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  margin-top: 6px;
}
.cx3-vis-chip.ok      { background: color-mix(in oklab, var(--cx3-ok) 16%, transparent); color: var(--cx3-ok); }
.cx3-vis-chip.amber   { background: color-mix(in oklab, #E2A03F 18%, transparent); color: #E2A03F; }
.cx3-vis-chip.sky     { background: color-mix(in oklab, #4A90E2 16%, transparent); color: #4A90E2; }
.cx3-vis-chip.violet  { background: var(--cx3-accent-soft); color: var(--cx3-accent); border: 1px solid color-mix(in oklab, var(--cx3-accent) 20%, transparent); }

.cx3-vis-bar {
  height: 6px; border-radius: 999px;
  background: color-mix(in oklab, var(--cx3-accent) 12%, var(--cx3-surface));
  overflow: hidden;
}
.cx3-vis-bar-fill {
  height: 100%; border-radius: 999px;
  background: var(--cx3-accent);
  transition: width .6s cubic-bezier(.2,.7,.2,1);
}