/* =============================================================================
 *  Las llamadas, del lado de quien contesta
 *
 *  POR QUE ESTO ES UN ARCHIVO Y NO UN <style> DENTRO DE LA PAGINA
 *      Porque el sitio manda esta cabecera:
 *
 *          Content-Security-Policy: default-src 'self'; ...
 *
 *      «'self'» quiere decir «solo lo que venga de este mismo servidor COMO
 *      ARCHIVO». Un <style> escrito dentro del HTML no es un archivo, asi que
 *      el navegador LO BLOQUEA — y no avisa en la pagina: lo dice en la
 *      consola, que en un telefono no la ve nadie.
 *
 *      Resultado el 20 de agosto de 2026: la pantalla se veia sin estilos en
 *      el iPhone del dueño. El lo dijo tres veces —«no cargan bien los
 *      estilos»— y las tres se le contesto que si cargaban, porque las
 *      pruebas corrian contra un servidor local que NO manda esa cabecera.
 *
 *      La leccion no es sobre CSP. Es que un banco de pruebas que no sirve
 *      las mismas cabeceras que el servidor de verdad NO ESTA PROBANDO EL
 *      SISTEMA: esta probando otro parecido. Y todo lo que ese banco diga en
 *      verde vale exactamente lo que valga el parecido.
 *
 *      Por eso `pruebas/pantalla-en-telefono.js` manda ahora la politica real.
 * ========================================================================== */

/* =============================================================================
 *  ESTE LADO SE PARECE AL OTRO A PROPOSITO
 *
 *  Quien contesta y quien llama tienen que estar viendo LA MISMA llamada. Si
 *  aqui se llamara «línea 3» a lo que alli es «Un trabajo nuevo», o si el
 *  cronometro de aqui contara distinto que el de alli, cualquier conversacion
 *  sobre lo que esta pasando empezaria por ponerse de acuerdo en el vocabulario
 *  — y eso es justo lo que no se puede hacer cuando el audio se esta cayendo.
 *
 *  Asi que retrato, cronometro, mandos y colgar se ven igual. Lo unico que
 *  cambia es lo que solo tiene sentido de este lado: la lista de lo que esta
 *  sonando, y el boton de contestar.
 * ========================================================================== */
.telefono{
  background:#1B242D;color:#fff;border-radius:1.4rem;padding:1.4rem 1.2rem 1.2rem;
  text-align:center;margin:0 0 1.5rem;
}
.telefono[hidden]{display:none}
.telefono__reloj{color:#9AA5B1;font-size:.95rem;font-variant-numeric:tabular-nums;
                 min-height:1.4rem}
.telefono__retrato{
  width:5rem;height:5rem;border-radius:50%;margin:.7rem auto .8rem;
  display:grid;place-items:center;font-size:1.6rem;font-weight:600;color:#F59E0B;
  background:linear-gradient(160deg,#3E4C59,#243039);
  border:1px solid rgba(255,255,255,.13);
}
.telefono__quien{font-size:1.35rem;font-weight:600;margin:0}
.telefono__que{color:#9AA5B1;margin:.2rem 0 0;min-height:1.4rem}
.telefono__mandos{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;
                  margin:1.1rem 0 0}
.telefono__mando{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  color:#fff;border-radius:.8rem;padding:.6rem .9rem;cursor:pointer;font:inherit;
  font-size:.9rem;
}
.telefono__mando[aria-pressed="true"]{background:rgba(245,158,11,.2);color:#F59E0B}
.telefono__mando:disabled{opacity:.35;cursor:default}
.redondo{
  width:3.9rem;height:3.9rem;border-radius:50%;border:0;cursor:pointer;
  color:#fff;font-size:1.4rem;margin:1.1rem .55rem 0;
}
.redondo--verde{background:#22C55E}
.redondo--rojo{background:#DC2626}
.redondo:disabled{opacity:.35;cursor:default}

.problema{
  margin:1rem auto 0;padding:.8rem 1rem;border-radius:.8rem;max-width:24rem;
  text-align:left;font-size:.93rem;line-height:1.5;
  background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.45);color:#FDE9C8;
}
.problema strong{display:block;color:#F59E0B;margin-bottom:.15rem}

/* El chat. Mismos globos que del otro lado, con los colores invertidos: lo
   mío a la derecha, lo suyo a la izquierda — igual que allí, donde «lo mío»
   es lo contrario. */
.charla{display:flex;flex-direction:column;gap:.45rem;max-height:15rem;
        overflow-y:auto;margin:1rem 0 .7rem;text-align:left;padding:.2rem}
.globo{max-width:82%;padding:.55rem .8rem;border-radius:1rem;font-size:.95rem;
       line-height:1.45;word-wrap:break-word}
.globo--mio{align-self:flex-end;background:#15803D;border-bottom-right-radius:.3rem}
.globo--suyo{align-self:flex-start;background:#2C3945;border-bottom-left-radius:.3rem}
.charla .vacio{color:#9AA5B1;font-size:.9rem;text-align:center;padding:1rem}
.escribir{display:flex;gap:.45rem}
.escribir input{flex:1;padding:.7rem .85rem;border-radius:.8rem;font:inherit;
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.13);color:#fff}
.escribir button{padding:0 1rem;border-radius:.8rem;border:0;cursor:pointer;
  background:#F59E0B;color:#2A1A00;font:inherit;font-weight:600}

.entrante{
  display:flex;align-items:center;gap:.9rem;padding:.85rem 1rem;
  border:1px solid var(--linea,#E4E1DC);border-radius:.7rem;margin:0 0 .6rem;
}
.entrante__que{flex:1;min-width:0}
.entrante__que b{display:block}
.entrante__que span{color:#616E7C;font-size:.9rem}
/* Mientras suena, parpadea. Un teléfono que suena tiene que verse desde la
   otra punta de la habitación. */
.entrante--suena{animation:suena 1.4s ease-in-out infinite}
@keyframes suena{0%,100%{border-color:#E4E1DC}50%{border-color:#D97706}}
@media (prefers-reduced-motion:reduce){.entrante--suena{animation:none}}

/* --- la salida de un aviso ------------------------------------------------
   UN AVISO QUE SOLO DICE LO QUE FALLA DEJA AL DUEÑO CON EL PROBLEMA EN LA
   MANO. Cuando hay una forma de seguir adelante, va aquí: grande, tocable con
   el dedo y debajo del texto que la explica. */
.salida{
  display:block; width:100%; margin-top:.7rem;
  min-height:3rem; padding:.75rem 1rem;
  font:inherit; font-size:1rem; font-weight:600;
  color:#fff; background:#2f6b3f;
  border:none; border-radius:.6rem; cursor:pointer;
}
.salida:active{background:#255632}

/* --- llegó un mensaje mientras atendías ---------------------------------- */
/* Con el teléfono en la oreja la pantalla no se ve. La voz ya sonó y pudo
   perderse; esto es lo que queda al separar el teléfono. */
.escribir--llego{
  animation: llegoMensajeTaller 1s ease-in-out 3;
  border-radius:.5rem;
}
@keyframes llegoMensajeTaller{
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,0); }
  50%      { box-shadow: 0 0 0 .3rem rgba(217,119,6,.8); }
}
@media (prefers-reduced-motion: reduce){
  .escribir--llego{ animation:none; box-shadow:0 0 0 .3rem rgba(217,119,6,.8); }
}