/* ============================================================
   Call Harmony — Pantallas de llamada
   ------------------------------------------------------------
   Vídeo, voz y chat comparten esta maqueta: el escenario ocupa
   todo, los mandos flotan encima y el resto es cronología.
   Cárgala después de ch.css.
   ============================================================ */

/* ── El escenario ─────────────────────────────────────────── */
.escena {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--e-6) var(--e-6) var(--e-8);
}

/* La barra de arriba: quién está, cuánto llevan, si se graba */
.escena__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e-3);
}

.escena__quien {
  font-family: var(--display);
  font-size: 1.375rem;
  color: var(--tinta);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.escena__meta {
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--tinta-4);
}

/* El reloj: cifras de ancho fijo o la caja tiembla cada segundo */
.contador {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--tinta);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* La marca de grabación. Late despacio: tiene que verse, no alarmar. */
.grabando {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-3);
  border: 1px solid rgba(201, 112, 95, 0.32);
  border-radius: 999px;
  background: rgba(201, 112, 95, 0.09);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ladrillo);
  white-space: nowrap;
}

.grabando::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: latido 2.4s ease-in-out infinite;
}

@keyframes latido {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ── El marco de vídeo ────────────────────────────────────── */
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--filo);
  border-radius: var(--r-lg);
  background: #14100a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta-4);
  font-size: 0.9375rem;
}

.video-frame video,
.video-frame iframe,
.video-frame > div {
  width: 100%;
  height: 100%;
}

/* ── La maqueta de vídeo propia ────────────────────────────────
   videoService.js y videollamada_tarotista.html no usan la
   interfaz de Daily: crean los <video> a mano (modo callObject) y
   los colocan ellos. Esos estilos vivían en línea desde JS, con
   medidas fijas — el recuadro propio media 200×150 px pasara lo
   que pasara. En un móvil de 360 px eso es más de medio ancho, y
   por eso tapaba al otro participante.

   Aquí sí pueden depender del tamaño de pantalla y de la
   orientación, cosa que un `style.cssText` no puede hacer.
   Los selectores llevan el contenedor delante porque
   `.video-frame video` (más arriba) fuerza 100%×100% y ganaría. */
.daily-custom-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Transparente para que se vea el fondo de .video-frame: antes eran
     dos negros distintos (#1a1a1a sobre #14100a) y el corte se notaba. */
  background: transparent;
}

.daily-custom-container .video-remoto {
  width: 100%;
  height: 100%;
  /* `contain` y no `cover`: en una lectura no se recorta a nadie ni se
     dejan las cartas fuera de plano. La contrapartida es que una cámara
     apaisada deja franjas arriba y abajo en una pantalla vertical; van
     sin fondo propio para que sean el marco y no un bloque negro. */
  object-fit: contain;
  background: transparent;
}

.daily-custom-container .video-local {
  position: absolute;
  right: clamp(8px, 2.5%, 20px);
  bottom: clamp(8px, 2.5%, 20px);
  z-index: 10;
  /* Proporcional al marco y con tope por los dos lados: en el
     móvil deja de comerse el ancho, en escritorio no se dispara. */
  width: clamp(84px, 24%, 180px);
  height: auto;
  aspect-ratio: 4 / 3;
  /* `cover` aquí sí: recortar la miniatura propia no importa, y
     quita las franjas negras que quedaban dentro del marco
     dorado cuando la cámara no daba justo esa proporción. */
  object-fit: cover;
  border: 2px solid var(--oro);
  border-radius: var(--r-md);
  background: #000;
}

/* El móvil en vertical graba en vertical: con 4/3 la miniatura
   salía casi toda recortada. */
@media (orientation: portrait) and (max-width: 719px) {
  .daily-custom-container .video-local {
    aspect-ratio: 3 / 4;
    width: clamp(72px, 22%, 120px);
  }
}

.daily-custom-container .video-espera {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  max-width: 80%;
  color: #fff;
  /* 20px fijos se salían del marco en pantallas estrechas */
  font-size: clamp(0.95rem, 3.5vw, 1.25rem);
  text-align: center;
}

@media (max-width: 719px) {
  /* En vertical el 16:9 deja el vídeo diminuto */
  .video-frame { aspect-ratio: 3 / 4; }

  .escena {
    padding: var(--e-4) var(--e-4) var(--e-6);
    /* En iPhone el indicador de inicio se come la última fila */
    padding-bottom: max(var(--e-6), env(safe-area-inset-bottom));
  }
}

/* ── Móvil: manda el alto, no la proporción ────────────────────
   Con `aspect-ratio: 3/4` fijo el escenario mide lo que mida,
   sin relación con la pantalla: el vídeo queda encajonado entre
   franjas negras y los mandos se van por debajo del borde
   inferior, donde los tapa la barra de Safari.

   La unidad es `svh` a propósito. `vh` en iOS mide el viewport
   SIN las barras del navegador, así que 100vh es más alto que lo
   que realmente se ve mientras la barra está puesta — de ahí que
   "Finalizar sesión" quedara cortado. `svh` mide el viewport con
   las barras VISIBLES, que es el caso peor: lo que entre ahí no
   lo tapa nada.

   El vídeo pasa a `flex: 1` para quedarse con el hueco que
   sobre tras la barra superior y los mandos, en vez de imponer
   su propia altura. Va dentro de @supports porque `svh` es
   reciente; donde no exista se queda el 3/4 de siempre. */
@supports (height: 1svh) {
  @media (max-width: 719px) {
    .escena {
      min-height: calc(100svh - var(--ch-height));
    }

    .video-frame {
      aspect-ratio: auto;
      flex: 1 1 auto;
      /* Suelo para que no se aplaste si el teclado o una barra
         de mensajes recortan el alto disponible. */
      min-height: 44svh;
    }
  }
}

/* ── Los mandos ───────────────────────────────────────────── */
.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-2);
}

.controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: var(--e-2) var(--e-5, 20px);
  border: 1px solid var(--filo-suave);
  border-radius: var(--r-sm);
  background: var(--carta);
  color: var(--tinta-2);
  font-family: var(--texto);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.18s var(--paso),
    border-color 0.18s var(--paso),
    color 0.18s var(--paso);
}

.controls button:hover:not(:disabled) {
  background: var(--carta-alzada);
  border-color: var(--filo);
  color: var(--tinta);
}

.controls button:disabled {
  color: var(--tinta-4);
  cursor: not-allowed;
}

/* Apagado: el estado se ve, no hay que acordarse */
.controls button.apagado {
  border-color: rgba(201, 112, 95, 0.35);
  background: rgba(201, 112, 95, 0.1);
  color: var(--ladrillo);
}

/* Colgar es irreversible: se separa del resto y se lee en rojo */
.controls .end-call {
  margin-left: var(--e-4);
  border-color: rgba(201, 112, 95, 0.45);
  background: rgba(201, 112, 95, 0.14);
  color: var(--ladrillo);
}

.controls .end-call:hover:not(:disabled) {
  background: rgba(201, 112, 95, 0.24);
  border-color: var(--ladrillo);
  color: var(--ladrillo);
}

.controls .report-btn {
  margin-left: auto;
  background: transparent;
  color: var(--tinta-4);
}

.controls .report-btn:hover {
  color: var(--ocre);
}

@media (max-width: 719px) {
  .controls .end-call,
  .controls .report-btn { margin-left: 0; }
  .controls button { flex: 1 1 auto; }

  /* En escritorio colgar queda a 222 px del botón de al lado. Al
     pasar a móvil, `margin-left: 0` dejaba los cuatro botones
     iguales y en rejilla: colgar acababa a 8 px de "Reportar", con
     el dedo, en mitad de una sesión que se cobra por minuto. Un
     roce y se acabó la lectura.

     Así que aquí no son cuatro botones iguales. Micrófono y cámara
     —lo que se toca a menudo— comparten la primera fila. Reportar
     baja a su propia línea, callado. Y colgar va al final, solo y
     con un hueco por delante que ningún otro control tiene. */
  .controls .report-btn {
    order: 2;
    flex-basis: 100%;
    border-color: transparent;
  }

  .controls .end-call {
    order: 3;
    flex-basis: 100%;
    /* El hueco ES la protección: doble que el gap normal */
    margin-top: var(--e-4);
  }
}


/* ── La ficha de la sesión ────────────────────────────────── */
.info-panel {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  padding: var(--e-4);
  border: 1px solid var(--filo-suave);
  border-radius: var(--r-md);
  background: var(--carta);
  font-size: 0.875rem;
  color: var(--tinta-2);
}

.info-panel b {
  display: block;
  margin-bottom: 1px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-4);
}

/* ── La antesala ──────────────────────────────────────────── */
.antesala {
  position: relative;
  overflow: hidden;
  /* `svh` por lo mismo que en .escena: en iOS `vh` mide el viewport
     sin las barras del navegador, así que el botón de entrar caía
     por debajo del borde visible. Se deja `vh` de reserva para
     navegadores sin svh. */
  min-height: calc(100vh - var(--ch-height, 64px));
  min-height: calc(100svh - var(--ch-height, 64px));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-12) var(--e-6);
  text-align: center;
  background:
    radial-gradient(32rem 24rem at 50% 16%, rgba(212, 175, 55, 0.09), transparent 70%),
    radial-gradient(42rem 32rem at 50% 0%, rgba(74, 54, 99, 0.28), transparent 72%);
}

.antesala__roseta {
  top: 50%;
  left: 50%;
  width: min(140vw, 820px);
  transform: translate(-50%, -50%);
  opacity: 0.14;
  animation: girar-lento 120s linear infinite;
}

@keyframes girar-lento {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.antesala__caja { position: relative; max-width: 440px; }
.antesala h2 { margin: var(--e-4) 0 var(--e-3); }
.antesala p { color: var(--tinta-3); }

/* ── Avisos flotantes ─────────────────────────────────────── */
#toast,
#mensajeInicio {
  position: fixed;
  left: 50%;
  bottom: var(--e-6);
  transform: translateX(-50%);
  z-index: 1300;
  max-width: min(92vw, 460px);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--filo);
  border-radius: var(--r-sm);
  background: var(--carta-alzada);
  color: var(--tinta);
  font-size: 0.875rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--paso);
}

#mensajeInicio { display: none; }

/* ── El modal de reporte ──────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--e-6);
  overflow-y: auto;
  background: rgba(15, 11, 6, 0.82);
  backdrop-filter: blur(3px);
}

.modal-overlay.active { display: flex; }

.modal-overlay .modal {
  width: 100%;
  max-width: 460px;
  margin: auto;
  padding: var(--e-8);
  border: 1px solid var(--filo-vivo);
  border-radius: var(--r-lg);
  background: var(--carta);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  margin-bottom: var(--e-6);
}

.modal-title { font-size: 1.5rem; }

.close-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--tinta-3);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s var(--paso), color 0.18s var(--paso);
}

.close-btn:hover { background: var(--bano-luz); color: var(--tinta); }

.modal-overlay .form-group { margin-bottom: var(--e-4); }

.form-label {
  display: block;
  margin-bottom: var(--e-2);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.form-input,
.form-textarea {
  width: 100%;
  min-height: 46px;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--filo-suave);
  border-radius: var(--r-sm);
  background: var(--hueco);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.5;
}

.form-textarea { min-height: 130px; resize: vertical; }

.form-input:focus,
.form-textarea:focus { outline: none; border-color: var(--oro); }

.form-input::placeholder,
.form-textarea::placeholder { color: var(--tinta-4); }

.char-count {
  display: block;
  margin-top: var(--e-1);
  font-size: 0.75rem;
  text-align: right;
  color: var(--tinta-4);
  font-variant-numeric: tabular-nums;
}

.button-group { display: flex; gap: var(--e-3); margin-top: var(--e-8); }
.button-group .btn { flex: 1; }

/* Modificadores sobre el .btn de ch.css */
.btn-cancel {
  border-color: var(--filo-suave);
  background: transparent;
  color: var(--tinta-2);
}
.btn-cancel:hover { background: var(--bano-luz); color: var(--tinta); }

.btn-submit {
  border-color: var(--oro);
  background: var(--oro);
  color: #1d1608;
}
.btn-submit:hover { background: var(--llama); border-color: var(--llama); color: #1d1608; }

/* Los mensajes que inyecta el script en #messageContainer */
.message {
  padding: var(--e-3) var(--e-4);
  margin-bottom: var(--e-4);
  border: 1px solid var(--filo-suave);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: var(--bano-luz);
  font-size: 0.9375rem;
}

.message.success { border-left-color: var(--salvia); color: var(--tinta-2); }
.message.error { border-left-color: var(--ladrillo); color: var(--tinta-2); }

@media (prefers-reduced-motion: reduce) {
  .antesala__roseta,
  .grabando::before { animation: none; }
}

/* ============================================================
   Pantallas del tarotista: mesa con la ficha del cliente al lado
   ============================================================ */
.mesa-tarotista {
  display: grid;
  gap: var(--e-6);
  align-items: start;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--e-6);
}

@media (min-width: 960px) {
  .mesa-tarotista {
    grid-template-columns: 280px 1fr;
    gap: var(--e-8);
  }
}

/* La ficha del cliente: lo que el tarotista mira antes de saludar */
.panel-datos {
  padding: var(--e-6);
  border: 1px solid var(--filo);
  border-radius: var(--r-md);
  background: var(--carta);
}

.panel-datos h3 {
  margin-bottom: var(--e-4);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--filo-suave);
  font-size: 1.125rem;
}

.panel-datos > div {
  margin-bottom: var(--e-4);
  font-size: 0.9375rem;
  color: var(--tinta-2);
  overflow-wrap: anywhere;
}

.panel-datos b {
  display: block;
  margin-bottom: 1px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-4);
}

/* El motivo es lo único que hay que leer entero */
.panel-datos .motivo {
  padding: var(--e-3);
  border-left: 2px solid var(--filo-vivo);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--bano-luz);
}

.panel-datos .grabacion {
  margin: 0;
  padding-top: var(--e-4);
  border-top: 1px solid var(--filo-suave);
  font-size: 0.8125rem;
  color: var(--tinta-4);
}

@media (min-width: 960px) {
  .panel-datos { position: sticky; top: calc(var(--ch-height, 68px) + var(--e-6)); }
}

/* El testigo de grabación: el script lo muestra con display = "flex" */
#recording-indicator {
  position: fixed;
  top: calc(var(--ch-height, 64px) + var(--e-3));
  right: var(--e-6);
  z-index: 1100;
  display: none;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border: 1px solid rgba(201, 112, 95, 0.35);
  border-radius: 999px;
  background: rgba(41, 26, 22, 0.92);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ladrillo);
}

#recording-indicator::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: latido 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #recording-indicator::before { animation: none; }
}

/* ── El móvil girado ───────────────────────────────────────────
   Un móvil en horizontal mide 844×390: pasa de largo el corte de
   719 px, así que se le trataba como a un escritorio y el vídeo
   salía en 16/9. Medido antes de esto: 465 px de alto de vídeo en
   una pantalla de 390 —el 119%—, y "Finalizar sesión" a 424 px de
   scroll, fuera de alcance justo cuando hace falta.

   El corte no puede ser sólo de ancho. En una videollamada lo que
   escasea es el ALTO, y un móvil girado es corto, no estrecho: de
   ahí `max-height` + `orientation` en vez de otro `max-width`.

   Va al final del fichero a propósito: son anulaciones, y en CSS
   con la misma especificidad gana la última. La primera versión
   estaba antes de `.info-panel { display: grid }` y ese `grid`
   la pisaba — el panel seguía ocupando alto. */
@media (orientation: landscape) and (max-height: 560px) {
  /* La cabecera se lleva 64 de los 390 px de alto: durante una
     llamada eso es pantalla que le falta a la cara del otro, y
     navegar a otra página es justo lo que no se quiere hacer.
     El `:has` lo limita a las pantallas de llamada. */
  body:has(.escena) .ch-header { display: none; }
  body.ch-offset:has(.escena) { padding-top: 0; }

  .escena {
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    padding-bottom: max(var(--e-3), env(safe-area-inset-bottom));
  }

  /* La frase de bienvenida sobra cuando no hay alto. El aviso de
     grabación y el reloj se quedan: no son decoración. */
  .escena__meta { display: none; }
  .escena__quien { font-size: 1rem; }

  /* `flex: 1 1 0` y no `1 1 auto`: con base `auto` el tamaño de
     partida es el del contenido, y el <video> aporta su tamaño
     natural (1280×720 → 455 px de alto). Con base 0 el vídeo se
     adapta al hueco en vez de imponerlo.

     El marco se queda con la proporción del vídeo en vez de
     ocupar todo el ancho: con 812 px de marco para 441 de
     imagen sobraban 371 px de caja negra a los lados. Ahora el
     alto lo reparte flex y el ancho sale de ese alto, centrado. */
  .video-frame {
    aspect-ratio: 16 / 9;
    flex: 1 1 0;
    min-height: 0;
    width: auto;
    max-width: 100%;
    align-self: center;
  }

  /* Los datos de la sesión son de consulta, no de la llamada:
     estorban cuando cada píxel de alto cuenta. */
  .info-panel { display: none; }

  /* Con sitio de sobra a lo ancho, los mandos vuelven a una sola
     fila y colgar recupera su separación lateral. */
  .controls button { flex: 0 1 auto; }
  .controls .report-btn { order: 0; flex-basis: auto; margin-left: auto; }
  .controls .end-call { order: 0; flex-basis: auto; margin-top: 0; margin-left: var(--e-4); }
}

/* `height` y no `min-height`: para repartir el hueco, el contenedor
   flex necesita un alto definido. Con `min-height` puede crecer, y
   entonces no sobra nada que repartir. */
@supports (height: 1svh) {
  @media (orientation: landscape) and (max-height: 560px) {
    /* Sin restar la cabecera: en horizontal ya no está */
    .escena { height: 100svh; min-height: 0; }
  }
}