/* voice-consola.css — EL DISPOSITIVO. La cara del webphone de ForHosting/VOICE,
   compartida por el panel de VOICE y por el panel de iNTELIGENCIA VIVA.
   ═══════════════════════════════════════════════════════════════════════════

   POR QUÉ EXISTE (2026-08-20). Larry lo probó y dijo que «el look es de niño de
   campamento y ni de broma parece el potente dispositivo que espera la gente de
   ForHosting.com/VOICE». Tenía razón: era un rectángulo oscuro con botones
   redondeados, sin jerarquía, sin estado y sin nada que se moviera con la voz.

   El lenguaje es el de `/voice` desde el rediseño del 2026-08-17 —sala de
   control: lienzo casi negro, grano, acento lima— y aquí se lleva a un objeto
   que se sostiene en la mano: bisel, pantalla con brillo propio, teclas con
   hueco y luz, y medidores que se mueven de verdad.

   TRES REGLAS, y ninguna es de gusto:

   1. **Todo cuelga de `.vk`.** Esta hoja la cargan dos paneles con marcas
      distintas; una regla suelta repintaría la bandeja de IV o el panel de
      VOICE. El prefijo `vk-` es del dispositivo, no del sitio.
   2. **Los colores vivos son variables.** `--vk-luz` es el acento (lima en
      VOICE) y se puede sobreescribir desde fuera con una línea. El resto del
      objeto es gris de instrumento y NO cambia: un teléfono no se repinta
      entero por cambiar de cliente.
   3. **El movimiento se apaga con `prefers-reduced-motion`.** Un medidor que
      late y un anillo que gira son información, pero para quien pidió que las
      cosas no se muevan son un problema — y esto vive en la pantalla de alguien
      ocho horas.

   NO hay imágenes ni fuentes: el bisel, el brillo y el grano son gradientes.
   Una llamada entrante no puede esperar a que baje un PNG. */

.vk {
  --vk-luz: #b8ff4a;            /* el acento; lo sobreescribe quien la monta */
  --vk-luz-ink: #0d1a04;
  --vk-caja: #0b100e;
  --vk-caja2: #141b18;
  --vk-borde: rgba(232, 240, 231, .10);
  --vk-borde2: rgba(232, 240, 231, .18);
  --vk-txt: #e8f0e7;
  --vk-txt2: #93a29a;
  --vk-mal: #ff5a4e;
  --vk-ok: #35d07f;
  --vk-espera: #ffc247;
  inline-size: 100%;
  max-inline-size: 348px;
  color: var(--vk-txt);
  font-variant-numeric: tabular-nums;
}

/* ── el cuerpo: un objeto, no una caja ──────────────────────────────────────
   Tres capas de sombra: el hueco donde se apoya, el volumen y el bisel claro de
   arriba. Es lo que hace que se lea como aparato y no como <div>. */
.vk-cuerpo {
  position: relative;
  border-radius: 26px;
  padding: 16px 16px 18px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, .07), transparent 60%),
    linear-gradient(180deg, var(--vk-caja2), var(--vk-caja) 42%, #070b09);
  box-shadow:
    0 40px 70px -32px rgba(0, 0, 0, .9),
    0 2px 0 rgba(255, 255, 255, .06) inset,
    0 0 0 1px rgba(0, 0, 0, .6);
  isolation: isolate;
}
/* Grano finísimo, el mismo recurso que la landing de VOICE: quita el plano
   plástico de los degradados sin costar una petición. */
.vk-cuerpo::after {
  content: ""; position: absolute; inset: 0; border-radius: 26px; pointer-events: none;
  opacity: .22; mix-blend-mode: overlay; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.5'/></svg>");
}
.vk-cuerpo > * { position: relative; z-index: 1 }

/* ── cabecera: quién soy y en qué estado está la línea ───────────────────── */
.vk-cab { display: flex; align-items: center; gap: 10px; margin-block-end: 12px }
.vk-quien { flex: 1; min-inline-size: 0 }
.vk-ext { font-size: 1.02rem; font-weight: 700; letter-spacing: .01em }
.vk-nombre {
  display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vk-txt2); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* La luz de estado: un punto con halo, como el testigo de un equipo de audio. */
.vk-luz {
  inline-size: 9px; block-size: 9px; border-radius: 50%; flex: none;
  background: #55605a; box-shadow: 0 0 0 0 transparent;
}
.vk-luz[data-e="registrado"] { background: var(--vk-ok); box-shadow: 0 0 10px 1px rgba(53, 208, 127, .55) }
.vk-luz[data-e="conectando"] { background: var(--vk-espera); animation: vkLate 1s ease-in-out infinite }
.vk-luz[data-e="fallo"] { background: var(--vk-mal); box-shadow: 0 0 10px 1px rgba(255, 90, 78, .5) }
@keyframes vkLate { 50% { opacity: .35 } }
.vk-salir {
  border: 1px solid var(--vk-borde2); background: transparent; color: var(--vk-txt2);
  border-radius: 999px; padding: 5px 11px; font: inherit; font-size: .72rem; cursor: pointer;
}
.vk-salir:hover { color: var(--vk-txt); border-color: var(--vk-txt2) }

/* ── la pantalla ─────────────────────────────────────────────────────────── */
.vk-pantalla {
  border-radius: 16px; padding: 13px 15px 12px; min-block-size: 104px;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  background: linear-gradient(180deg, #060a08, #040705);
  border: 1px solid rgba(0, 0, 0, .6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05), 0 10px 24px -18px #000 inset;
}
.vk-linea1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px }
.vk-estado {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 800;
  color: var(--vk-txt2);
}
.vk-estado[data-v="en_llamada"] { color: var(--vk-luz) }
.vk-estado[data-v="sonando"], .vk-estado[data-v="marcando"] { color: var(--vk-espera) }
.vk-estado[data-v="entrante"] { color: var(--vk-ok) }
.vk-crono { font-size: .78rem; color: var(--vk-txt2); font-weight: 600 }
.vk-num {
  inline-size: 100%; background: transparent; border: 0; padding: 0; color: var(--vk-txt);
  font: inherit; font-size: 1.62rem; font-weight: 700; letter-spacing: .03em;
}
.vk-num::placeholder { color: rgba(232, 240, 231, .22); font-weight: 500; font-size: 1.02rem; letter-spacing: .02em }
.vk-num:focus { outline: 0 }
.vk-num[readonly] { cursor: default }

/* Los dos medidores. Sin llamada están apagados y ocupan su sitio: un elemento
   que aparece y desaparece hace saltar el teclado entero. */
.vk-vu { display: grid; gap: 4px; margin-block-start: 2px }
.vk-vu-fila { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 8px }
.vk-vu-et { font-size: .72rem; line-height: 1; opacity: .5; cursor: default }
.vk-vu-barra { block-size: 4px; border-radius: 3px; background: rgba(232, 240, 231, .09); overflow: hidden }
.vk-vu-in {
  block-size: 100%; inline-size: 0%; border-radius: 3px;
  background: linear-gradient(90deg, var(--vk-ok), var(--vk-luz) 70%, #ffe14a);
  transition: inline-size 90ms linear;
}
.vk-vu[data-mudo="1"] .vk-vu-fila:first-child .vk-vu-in { background: var(--vk-mal) }

/* ── la línea de salida ──────────────────────────────────────────────────── */
.vk-linea-sel { display: grid; gap: 4px; margin-block-start: 11px }
.vk-linea-sel > span { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--vk-txt2); font-weight: 800 }
.vk-sel {
  inline-size: 100%; padding: 8px 10px; font: inherit; font-size: .86rem; font-weight: 600;
  color: var(--vk-txt); background: rgba(232, 240, 231, .05);
  border: 1px solid var(--vk-borde); border-radius: 11px; cursor: pointer;
}
.vk-sel:focus-visible { outline: 2px solid var(--vk-luz); outline-offset: 1px }
.vk-sel option { color: #0b100e }

/* ── el teclado: teclas con hueco, no botones ───────────────────────────── */
.vk-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 13px 0 }
.vk-tecla {
  padding: 10px 0 8px; border-radius: 13px; cursor: pointer; font: inherit; text-align: center;
  color: var(--vk-txt); font-size: 1.24rem; font-weight: 600; line-height: 1.05;
  border: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 3px 8px -4px #000;
  transition: transform 60ms ease, background 120ms ease;
}
.vk-tecla span { display: block; font-size: .5rem; letter-spacing: .18em; color: rgba(232, 240, 231, .38); font-weight: 800; min-block-size: .8em }
.vk-tecla:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)) }
.vk-tecla:active { transform: translateY(1px); background: var(--vk-luz); color: var(--vk-luz-ink); border-color: var(--vk-luz) }
.vk-tecla:active span { color: rgba(13, 26, 4, .55) }

/* ── acciones principales ────────────────────────────────────────────────── */
.vk-botones { display: grid; gap: 8px }
.vk-b {
  inline-size: 100%; border: 0; border-radius: 999px; padding: 13px 18px; cursor: pointer;
  font: inherit; font-size: .96rem; font-weight: 800; letter-spacing: .01em;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.vk-b[hidden] { display: none }
.vk-b:disabled { opacity: .4; cursor: not-allowed }
.vk-llamar { background: var(--vk-luz); color: var(--vk-luz-ink) }
.vk-llamar:hover:not(:disabled) { filter: brightness(1.08) }
.vk-contestar { background: var(--vk-ok); color: #04150c }
/* La entrante late: es lo único de la pantalla que pide una acción AHORA. */
.vk-contestar { animation: vkPulso 1.1s ease-in-out infinite }
.vk-colgar { background: var(--vk-mal); color: #fff }
@keyframes vkPulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, .5) }
  70% { box-shadow: 0 0 0 12px rgba(53, 208, 127, 0) }
}

/* ── acciones de llamada ─────────────────────────────────────────────────── */
.vk-acciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-block-start: 9px }
.vk-acciones[hidden] { display: none }
.vk-acc {
  border: 1px solid var(--vk-borde); background: rgba(232, 240, 231, .05); color: var(--vk-txt);
  border-radius: 11px; padding: 8px 4px; font: inherit; font-size: .7rem; font-weight: 700; cursor: pointer;
  display: grid; gap: 3px; justify-items: center; line-height: 1.15;
}
.vk-acc:hover:not(:disabled) { background: rgba(232, 240, 231, .1) }
.vk-acc[aria-pressed="true"] { background: var(--vk-luz); color: var(--vk-luz-ink); border-color: var(--vk-luz) }
.vk-acc:disabled { opacity: .35; cursor: not-allowed }
.vk-acc[hidden] { display: none }
.vk-acc-i { font-size: .95rem; line-height: 1 }

/* ── el cajón: transferir, recientes, audio ─────────────────────────────── */
.vk-cajon { margin-block-start: 12px; border-block-start: 1px solid var(--vk-borde); padding-block-start: 10px }
.vk-cajon > summary {
  cursor: pointer; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--vk-txt2); font-weight: 800; list-style: none;
}
.vk-cajon > summary::-webkit-details-marker { display: none }
.vk-cajon > summary::before { content: "▸ "; color: var(--vk-luz) }
.vk-cajon[open] > summary::before { content: "▾ " }
.vk-cajon-cuerpo { display: grid; gap: 7px; margin-block-start: 9px }
.vk-cajon label { display: grid; gap: 3px; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--vk-txt2); font-weight: 800 }
.vk-cajon select { inline-size: 100%; background: rgba(232, 240, 231, .05); color: var(--vk-txt); font: inherit; font-size: .8rem; border: 1px solid var(--vk-borde); border-radius: 10px; padding: 7px 9px }
.vk-cajon select option { color: #0b100e }

/* Una fila de la lista (compañeros, recientes). Todo el bloque es pulsable. */
.vk-fila {
  display: flex; align-items: center; gap: 9px; inline-size: 100%; text-align: start;
  padding: 7px 8px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.vk-fila:hover { background: rgba(232, 240, 231, .06); border-color: var(--vk-borde) }
.vk-fila-txt { flex: 1; min-inline-size: 0 }
.vk-fila-tit { font-size: .84rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.vk-fila-sub { font-size: .68rem; color: var(--vk-txt2) }
.vk-punto { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #55605a; flex: none }
.vk-punto[data-e="not_inuse"] { background: var(--vk-ok) }
.vk-punto[data-e="inuse"], .vk-punto[data-e="busy"] { background: var(--vk-mal) }
.vk-punto[data-e="ringing"], .vk-punto[data-e="ringinuse"] { background: var(--vk-espera); animation: vkLate .9s steps(2) infinite }
.vk-flecha { font-size: .8rem; color: var(--vk-txt2); flex: none }
.vk-flecha[data-d="entrante"] { color: var(--vk-ok) }
.vk-flecha[data-d="perdida"] { color: var(--vk-mal) }
.vk-vacio { color: var(--vk-txt2); font-size: .76rem; padding: 6px 2px }
.vk-nota { margin-block-start: 11px; color: rgba(232, 240, 231, .4); font-size: .68rem; line-height: 1.45 }

/* ── conectar ────────────────────────────────────────────────────────────── */
.vk-entrar { display: grid; gap: 11px }
.vk-entrar h2 { margin: 0; font-size: 1.05rem; font-weight: 800 }
.vk-lead { margin: 0; color: var(--vk-txt2); font-size: .84rem; line-height: 1.5 }

@media (prefers-reduced-motion: reduce) {
  .vk-luz, .vk-contestar, .vk-punto { animation: none !important }
  .vk-vu-in, .vk-tecla { transition: none !important }
}