/* Don Héctor — oscuro, plano, sin glow. El color entra solo por tipo de nodo. */

:root {
  --fondo: #0d0f11;
  --superficie: rgba(255, 255, 255, 0.028);
  --superficie-alta: rgba(255, 255, 255, 0.055);
  --borde: rgba(255, 255, 255, 0.08);
  --borde-fuerte: rgba(255, 255, 255, 0.14);
  --texto: #d8dce0;
  --texto-medio: #979ea4;
  --tenue: #666d73;
  --etiqueta: #575d63;
  --acento: #c9a227;
  --alerta: #e0776a;
  --radio: 12px;
  --radio-chico: 8px;

  --tipo-nota: #d9dde1;
  --tipo-empleado: #7fb2f0;
  --tipo-cliente: #8bd6a8;
  --tipo-proveedor: #e8b465;
  --tipo-factura: #f0a3c0;
  --tipo-contrato: #b9a3f0;
  --tipo-empresa: #62b6c9;
  --tipo-soporte: #9aa1a7;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--fondo); color: var(--texto);
  font-family: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 13px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#lienzo { position: fixed; inset: 0; display: block; cursor: grab; }
#lienzo.arrastrando { cursor: grabbing; }

/* ---------- panel base ---------- */
.panel {
  position: fixed; z-index: 5;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  backdrop-filter: blur(14px);
}

.etiqueta {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--etiqueta); font-weight: 500;
}

/* ---------- marca ---------- */
#marca {
  position: fixed; top: 18px; left: 22px; z-index: 6;
  display: flex; align-items: center; gap: 9px;
}
#marca .punto { width: 6px; height: 6px; border-radius: 50%; background: var(--tipo-cliente); }
#marca .nombre {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--texto); font-weight: 500;
}
.insignia {
  font-size: 8.5px; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px;
  background: rgba(201, 162, 39, 0.13); color: var(--acento);
  border: 1px solid rgba(201, 162, 39, 0.22);
}
.insignia.gris { background: var(--superficie-alta); color: var(--tenue); border-color: var(--borde); }
.insignia.roja { background: rgba(224, 119, 106, 0.12); color: var(--alerta); border-color: rgba(224, 119, 106, 0.24); }

/* ---------- izquierda ---------- */
#izquierda { top: 52px; left: 14px; width: 246px; padding: 0; background: none; border: none; backdrop-filter: none; }
#izquierda > section {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 12px 13px; margin-bottom: 10px;
}
#inspector .vacio { color: var(--tenue); font-size: 12px; margin-top: 8px; }
#inspector h2 { font-size: 14px; margin: 8px 0 3px; font-weight: 500; letter-spacing: -0.01em; }
#inspector .meta { font-size: 10.5px; color: var(--tenue); margin-bottom: 9px; word-break: break-all; }
#inspector .cuerpo {
  font-size: 11.5px; color: var(--texto-medio); max-height: 190px; overflow-y: auto;
  white-space: pre-wrap; margin-top: 8px;
  border-top: 1px solid var(--borde); padding-top: 8px;
}
#vecinos { margin-top: 9px; }
#vecinos div {
  display: flex; align-items: center; gap: 7px; padding: 2.5px 0;
  font-size: 11.5px; color: var(--texto-medio); cursor: pointer;
}
#vecinos div:hover { color: var(--texto); }

#hubs .fila {
  display: flex; align-items: center; gap: 8px; padding: 3px 0;
  font-size: 11.5px; cursor: pointer; color: var(--texto-medio);
}
#hubs .fila:hover { color: var(--texto); }
#hubs .fila .n { margin-left: auto; color: var(--tenue); font-size: 10px; }
.bolita { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.nombre-corto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#ayuda { font-size: 9.5px; color: #43484d; padding: 0 4px; letter-spacing: 0.03em; }

/* ---------- derecha ---------- */
#derecha { top: 52px; right: 14px; width: 208px; padding: 12px 13px; }
#filtros .fila {
  display: flex; align-items: center; gap: 8px; padding: 3.5px 0;
  font-size: 11.5px; cursor: pointer; color: var(--texto-medio); user-select: none;
}
#filtros .fila:hover { color: var(--texto); }
#filtros .fila.apagada { opacity: 0.32; }
#filtros .fila .n { margin-left: auto; color: var(--tenue); font-size: 10px; }

#reactor-caja {
  position: fixed; right: 14px; z-index: 5; width: 208px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
#reactor { display: block; }
#estado-voz { font-size: 9px; text-transform: uppercase; letter-spacing: 0.17em; color: var(--tenue); }

/* ---------- abajo ---------- */
#abajo {
  left: 50%; transform: translateX(-50%); bottom: 20px;
  display: flex; align-items: center; gap: 9px; z-index: 6;
  background: none; border: none; backdrop-filter: none;
}
#barra-pregunta {
  display: flex; align-items: center; gap: 10px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 999px; padding: 9px 18px; width: 430px;
  backdrop-filter: blur(14px);
}
#barra-pregunta .etiqueta { flex: 0 0 auto; }
#pregunta {
  flex: 1; background: none; border: none; outline: none;
  color: var(--texto); font: inherit; font-size: 12.5px;
}
#pregunta::placeholder { color: #4e5459; font-style: italic; }

.boton {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--superficie); border: 1px solid var(--borde);
  color: var(--texto-medio); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(14px); padding: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.boton:hover { border-color: var(--borde-fuerte); color: var(--texto); }
.boton.activo { border-color: rgba(139, 214, 168, 0.4); color: var(--tipo-cliente); }
.boton svg { width: 15px; height: 15px; }

#niveles { display: flex; align-items: flex-end; gap: 2px; height: 15px; }
#niveles span {
  width: 2px; background: var(--tipo-cliente); border-radius: 1px;
  height: 2px; transition: height 0.07s linear;
}

/* ---------- respuesta ---------- */
#respuesta {
  right: 14px; bottom: 20px; width: 340px; z-index: 6;
  padding: 13px 14px; max-height: 46vh; overflow-y: auto; display: none;
}
#respuesta.visible { display: block; }
#dicho { font-size: 12.5px; color: var(--texto); margin: 7px 0 0; }
#subtitulo { font-size: 12px; color: var(--texto-medio); font-style: italic; margin-top: 6px; min-height: 0; }
#tarjeta { margin-top: 11px; border-top: 1px solid var(--borde); padding-top: 10px; }
#tarjeta h3 { font-size: 11px; margin: 0 0 7px; font-weight: 500; color: var(--texto); }
#tarjeta .nota { font-size: 10.5px; color: var(--tenue); margin-bottom: 8px; }
#tarjeta .item {
  font-size: 11px; color: var(--texto-medio); padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}
#tarjeta .item:last-child { border-bottom: none; }
#tarjeta .item .archivo { color: #565c61; font-size: 9.5px; display: block; margin-top: 2px; }
#tarjeta .item .marca { color: var(--alerta); }
#tarjeta pre {
  white-space: pre-wrap; font-family: inherit; font-size: 11px;
  color: var(--texto-medio); background: rgba(255,255,255,0.02);
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  padding: 9px; margin: 0;
}

#avisos { display: flex; gap: 7px; margin-left: 4px; }

/* ---------- cola de WhatsApp ---------- */
#cola {
  left: 14px; bottom: 20px; width: 340px; z-index: 6;
  padding: 12px 13px; max-height: 52vh; overflow-y: auto;
}

/* ---------- lo que hace solo ---------- */
/* Encima de la cola y de usuarios (z 6 y 7) porque se abre sobre ellos, y
   contra el borde izquierdo como los demás: sin esto cae en 0,0 y se monta
   sobre la marca. */
#tareas {
  left: 14px; bottom: 20px; width: 340px; z-index: 8;
  padding: 12px 13px; max-height: 76vh; overflow-y: auto;
}
#tareas .etiqueta { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
#tareas .etiqueta + .etiqueta,
#tareas-lista + .etiqueta { margin-top: 14px; }
#tareas .vacio { color: var(--tenue); font-size: 11.5px; line-height: 1.5; }
#tareas code {
  background: rgba(255,255,255,0.06); padding: 1px 4px; border-radius: 3px;
  font-size: 10.5px;
}

/* ---------- conexión del correo ---------- */
#correo {
  right: 14px; bottom: 20px; width: 268px; z-index: 6;
  padding: 12px 13px;
}
#correo .etiqueta { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
#correo-detalle {
  font-size: 11px; color: var(--texto-medio); line-height: 1.45;
  overflow-wrap: anywhere;
}
.boton-conectar {
  display: block; margin-top: 11px; padding: 8px 10px;
  text-align: center; text-decoration: none; cursor: pointer;
  font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--acento); background: rgba(201, 162, 39, 0.10);
  border: 1px solid rgba(201, 162, 39, 0.24); border-radius: 6px;
}
.boton-conectar:hover { background: rgba(201, 162, 39, 0.17); }
#cola .etiqueta { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
#cola-n { color: var(--acento); }
.pendiente {
  border-top: 1px solid var(--borde); padding: 9px 0 8px;
  font-size: 11px; color: var(--texto-medio);
}
.pendiente .de { color: var(--texto); font-size: 11.5px; }
.pendiente .motivo { color: var(--acento); font-size: 10px; margin: 3px 0 5px; }
.pendiente .recibido {
  color: var(--tenue); font-style: italic; font-size: 10.5px; margin-bottom: 5px;
}
.pendiente .borrador {
  background: rgba(255,255,255,0.025); border: 1px solid var(--borde);
  border-radius: var(--radio-chico); padding: 7px 8px; white-space: pre-wrap;
  color: var(--texto-medio);
}
.pendiente .acciones { display: flex; gap: 6px; margin-top: 7px; }
.pendiente button {
  font: inherit; font-size: 10px; padding: 3px 10px; border-radius: 999px;
  background: var(--superficie-alta); border: 1px solid var(--borde);
  color: var(--texto-medio); cursor: pointer;
}
.pendiente button:hover { border-color: var(--borde-fuerte); color: var(--texto); }
.pendiente button.enviar { color: var(--tipo-cliente); border-color: rgba(139,214,168,0.3); }
#cola .vacio { color: var(--tenue); font-size: 11.5px; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.09); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- subir documentos ---------- */
#soltar {
  margin-top: 9px; padding: 16px 10px; text-align: center; cursor: pointer;
  border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-chico);
  transition: border-color 0.15s, background 0.15s;
}
#soltar:hover { border-color: rgba(139, 214, 168, 0.35); }
#soltar.encima {
  border-color: var(--tipo-cliente); border-style: solid;
  background: rgba(139, 214, 168, 0.06);
}
#soltar p { margin: 0; font-size: 11.5px; color: var(--texto-medio); }
#soltar .tipos { font-size: 9.5px; color: #4e5459; display: block; margin-top: 3px; }
#subidos { margin-top: 8px; }
#subidos .doc {
  display: flex; align-items: center; gap: 7px; padding: 3px 0;
  font-size: 11px; color: var(--texto-medio);
}
#subidos .doc .peso { margin-left: auto; color: var(--tenue); font-size: 9.5px; }
#subidos .doc .quitar {
  color: var(--tenue); cursor: pointer; font-size: 13px; line-height: 1;
  padding: 0 2px; background: none; border: none;
}
#subidos .doc .quitar:hover { color: var(--alerta); }
#subidos .aviso { font-size: 10.5px; padding: 4px 0; }
#subidos .aviso.mal { color: var(--alerta); }
#subidos .aviso.bien { color: var(--tipo-cliente); }

/* ==========================================================================
   CELULAR
   Los cuatro paneles flotantes son de escritorio. En un telefono se montan
   unos sobre otros y el grafo queda inservible, asi que abajo de 768px el
   grafo pasa a ocupar toda la pantalla y los paneles se meten en una hoja
   que sube desde abajo, con pestanas.
   ========================================================================== */

#hoja, #pestanas, #tirador { display: none; }

@media (max-width: 768px) {
  html, body { font-size: 14px; }

  /* Los contenedores de escritorio dejan de posicionar: su contenido se
     traslada a la hoja desde app.js. */
  #izquierda, #derecha, #respuesta, #cola, #reactor-caja { display: none !important; }

  #marca {
    top: 0; left: 0; right: 0; padding: 10px 14px;
    background: rgba(13, 15, 17, 0.82); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--borde);
  }
  #marca .nombre { font-size: 12px; letter-spacing: 0.16em; }
  #avisos { overflow-x: auto; scrollbar-width: none; }
  #avisos::-webkit-scrollbar { display: none; }

  /* ---- la hoja ---- */
  #hoja {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 8;
    max-height: 82vh;
    background: rgba(16, 18, 21, 0.97);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--borde);
    border-radius: 18px 18px 0 0;
    transform: translateY(calc(100% - var(--asomo, 118px)));
    transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  #hoja.abierta { transform: translateY(0); }

  #tirador {
    display: block; padding: 9px 0 5px; cursor: grab;
    -webkit-tap-highlight-color: transparent;
  }
  #tirador::before {
    content: ''; display: block; width: 36px; height: 4px; margin: 0 auto;
    background: var(--borde-fuerte); border-radius: 2px;
  }

  /* ---- barra de accion: siempre visible, al alcance del pulgar ---- */
  #abajo {
    position: static; transform: none; width: 100%;
    padding: 4px 12px 10px; gap: 10px;
  }
  #barra-pregunta { width: auto; flex: 1; padding: 11px 16px; }
  #pregunta { font-size: 16px; }   /* 16px o iOS hace zoom al enfocar */

  #btn-micro {
    width: 58px; height: 58px; flex: 0 0 58px;
    background: var(--superficie-alta);
    border-color: var(--borde-fuerte);
  }
  #btn-micro svg { width: 24px; height: 24px; }
  #btn-micro.activo {
    background: rgba(139, 214, 168, 0.16);
    border-color: var(--tipo-cliente);
    transform: scale(1.06);
  }
  /* Los secundarios se van a la hoja: abajo solo lo que se usa a diario. */
  #btn-silencio, #btn-resumen, #btn-plan, #btn-memoria, #btn-cola, #niveles {
    display: none;
  }

  /* ---- pestanas ---- */
  #pestanas {
    display: flex; gap: 4px; padding: 0 12px 8px;
    overflow-x: auto; scrollbar-width: none;
  }
  #pestanas::-webkit-scrollbar { display: none; }
  #pestanas button {
    flex: 0 0 auto; font: inherit; font-size: 11px;
    padding: 7px 13px; border-radius: 999px;
    background: var(--superficie); border: 1px solid var(--borde);
    color: var(--tenue); cursor: pointer;
  }
  #pestanas button.activa {
    color: var(--texto); border-color: var(--borde-fuerte);
    background: var(--superficie-alta);
  }
  #pestanas button .punto-aviso {
    display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    background: var(--acento); margin-left: 5px; vertical-align: middle;
  }

  #contenido-hoja {
    overflow-y: auto; padding: 0 12px 14px;
    -webkit-overflow-scrolling: touch;
  }
  #contenido-hoja > * { display: none; }
  #contenido-hoja > .visible-hoja { display: block; }
  #contenido-hoja section,
  #contenido-hoja .panel {
    position: static !important; width: auto !important; max-height: none !important;
    background: none !important; border: none !important; padding: 0 !important;
    margin: 0 0 14px !important; backdrop-filter: none !important;
    transform: none !important; inset: auto !important;
  }
  #inspector .cuerpo { max-height: 40vh; }
  #soltar { padding: 26px 12px; }      /* mas grande: se toca con el dedo */

  /* Los botones secundarios, ahora dentro de la hoja */
  #acciones-hoja { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  #acciones-hoja button {
    font: inherit; font-size: 12px; padding: 9px 14px; border-radius: 999px;
    background: var(--superficie); border: 1px solid var(--borde);
    color: var(--texto-medio); cursor: pointer;
  }
  #acciones-hoja button:active { background: var(--superficie-alta); }

  #ayuda { display: none; }
}

/* Pantallas muy bajas en horizontal: la hoja no puede comerse todo. */
@media (max-width: 768px) and (max-height: 480px) {
  #hoja { max-height: 92vh; }
}

/* ---------- boton de enviar ---------- */
#btn-enviar {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--tenue); border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
#btn-enviar svg { width: 17px; height: 17px; }
#btn-enviar:hover { color: var(--texto); background: var(--superficie-alta); }
#btn-enviar.listo { color: var(--tipo-cliente); }

/* ---------- Don Héctor hablando ----------
   La onda se mueve con el AUDIO REAL que esta sonando, no con una animacion
   inventada: si la voz se corta, la onda se para sola y se nota. */
#onda { display: flex; align-items: center; gap: 3px; height: 16px; margin-top: 7px; }
#onda span {
  width: 3px; height: 3px; border-radius: 2px;
  background: var(--tipo-empleado);
  transition: height 0.08s linear;
}

/* Mientras habla, el panel respira con un borde tenue. Sin glow: solo un
   borde que cambia, en linea con el resto de la interfaz. */
#respuesta.hablando { border-color: rgba(127, 178, 240, 0.32); }
#marca .punto.hablando { animation: latir 1.1s ease-in-out infinite; }
@keyframes latir {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.7); opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  #marca .punto.hablando { animation: none; }
  #onda span { transition: none; }
}

@media (max-width: 768px) {
  #btn-enviar { width: 34px; height: 34px; }
  #btn-enviar svg { width: 20px; height: 20px; }
}

/* ---------- elegir la voz ---------- */
#elegir-voz { display: flex; gap: 5px; justify-content: center; margin-top: 7px; }
.voz {
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; cursor: pointer;
  background: var(--superficie-alta); color: var(--tenue);
  border: 1px solid var(--borde);
}
.voz:hover { color: var(--texto-medio); border-color: var(--borde-fuerte); }
.voz.puesta {
  background: rgba(201, 162, 39, 0.13); color: var(--acento);
  border-color: rgba(201, 162, 39, 0.24);
}


/* ---------- fotos adjuntas ---------- */
/* Las miniaturas van FLOTANDO encima de la barra, no dentro de la fila.
   Meterlas en el flujo obligaria a poner #abajo en columna, y eso apilaria
   verticalmente los botones redondos del microfono y los atajos. */
#fotos {
  position: absolute; bottom: 100%; left: 0; margin-bottom: 9px;
  display: flex; gap: 7px;
}
.foto {
  position: relative; width: 54px; height: 54px; border-radius: var(--radio-chico);
  overflow: hidden; border: 1px solid var(--borde); background: var(--superficie-alta);
}
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto .quitar {
  position: absolute; top: 2px; right: 2px; width: 17px; height: 17px;
  border-radius: 50%; border: none; cursor: pointer; padding: 0;
  background: rgba(13, 15, 17, 0.82); color: var(--texto);
  font-size: 13px; line-height: 1; display: flex; align-items: center;
  justify-content: center;
}
.foto .quitar:hover { background: var(--alerta); color: #0d0f11; }
#lienzo.soltando { outline: 2px dashed var(--acento); outline-offset: -12px; }


/* ---------- quién entra ---------- */
#usuarios {
  left: 14px; bottom: 20px; width: 288px; z-index: 7;
  padding: 13px 14px; max-height: 76vh; overflow-y: auto;
}
#lista-usuarios { margin: 9px 0 4px; }
.usuario {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.045); font-size: 11.5px;
}
.usuario:last-child { border-bottom: none; }
.usuario .quien { color: var(--texto); }
.usuario .cuenta { color: var(--tenue); font-size: 10.5px; }
.usuario .yo {
  font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--acento);
}
.usuario .fuera {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--tenue); font-size: 15px; line-height: 1; padding: 0 2px;
}
.usuario .fuera:hover { color: var(--alerta); }

.mini-form {
  margin-top: 13px; padding-top: 11px;
  border-top: 1px solid var(--borde);
  display: flex; flex-direction: column; gap: 6px;
}
.mini-form input {
  background: var(--superficie-alta); border: 1px solid var(--borde);
  border-radius: var(--radio-chico); padding: 7px 9px;
  color: var(--texto); font: inherit; font-size: 11.5px; outline: none;
}
.mini-form input:focus { border-color: rgba(201,162,39,0.45); }
.mini-form button {
  padding: 7px 10px; cursor: pointer; font: inherit; font-size: 11px;
  border-radius: var(--radio-chico);
  background: rgba(201,162,39,0.11); color: var(--acento);
  border: 1px solid rgba(201,162,39,0.26);
}
.mini-form button:hover { background: rgba(201,162,39,0.18); }
#usuarios .error { color: var(--alerta); font-size: 11px; margin: 10px 0 0; }

/* ==========================================================================
   Bienvenida: lo primero que se ve al abrir.
   ==========================================================================
   Aparece por encima de todo porque lo que dice —de dónde lee, qué le falta—
   es lo que hay que leer ANTES de preguntarle nada. Se cierra y no vuelve
   hasta que haya algo nuevo que decir.

   La animación entra por pasos, de arriba abajo, con un desfase por bloque:
   así se lee en el orden en que está escrito en vez de aparecer todo de golpe
   y obligar a buscar por dónde empezar. */

#bienvenida {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: rgba(6, 8, 10, 0.72);
  backdrop-filter: blur(6px);
  animation: bv-fondo .45s ease both;
  overflow-y: auto;
}
#bienvenida[hidden] { display: none; }

@keyframes bv-fondo { from { opacity: 0; } to { opacity: 1; } }

#bienvenida .panel-bv {
  width: min(46rem, 100%);
  background: #101316;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 1.6rem 1.7rem 1.4rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  animation: bv-entra .5s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes bv-entra {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Cada bloque entra un poco después que el anterior. El desfase lo pone el JS
   en --bv-i, para no cablear aquí cuántos bloques hay. */
#bienvenida .bloque-bv {
  animation: bv-sube .45s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: calc(.16s + var(--bv-i, 0) * .075s);
}

@keyframes bv-sube {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Quien pidió menos movimiento no pierde el contenido, solo el viaje. */
  #bienvenida, #bienvenida .panel-bv, #bienvenida .bloque-bv {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
  }
}

#bienvenida h2 {
  margin: 0 0 .1rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .01em;
}
#bienvenida .saludo {
  color: var(--texto);
  line-height: 1.55;
  margin: .5rem 0 1.1rem;
  font-size: .95rem;
}
#bienvenida .titulillo {
  color: var(--etiqueta);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 1.2rem 0 .5rem;
}
#bienvenida .fuente {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .38rem .1rem;
  border-bottom: 1px solid var(--borde);
  font-size: .82rem;
}
#bienvenida .fuente .que { color: var(--texto-medio); overflow-wrap: anywhere; }
#bienvenida .fuente .como { color: var(--tenue); white-space: nowrap; }
#bienvenida .fuente.mal .como { color: var(--alerta); }

/* Las opciones de alcance: tarjetas, no una lista de radios sueltos. Es un
   permiso, y se elige mejor cuando cada opción ocupa su propio bloque. */
#bienvenida .opciones-alcance { display: grid; gap: .45rem; }
#bienvenida .op {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .6rem .7rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  cursor: pointer;
  transition: border-color .16s, background .16s;
}
#bienvenida .op:hover { background: var(--superficie); }
#bienvenida .op.elegida { border-color: var(--acento); background: var(--superficie-alta); }
#bienvenida .op input { margin-top: .18rem; accent-color: var(--acento); }
#bienvenida .op .texto { font-size: .86rem; color: var(--texto); }
#bienvenida .op .aviso {
  display: block;
  margin-top: .2rem;
  font-size: .74rem;
  color: var(--alerta);
  line-height: 1.4;
}

#bienvenida textarea, #bienvenida input[type="text"] {
  width: 100%;
  margin-top: .5rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  color: var(--texto);
  font-family: inherit;
  font-size: .84rem;
  padding: .5rem .6rem;
  resize: vertical;
}

#bienvenida .pregunta-bv {
  margin-top: .3rem;
  padding: .8rem .9rem;
  border: 1px solid var(--borde-fuerte);
  border-left: 2px solid var(--acento);
  border-radius: var(--radio-chico);
  background: var(--superficie);
}
#bienvenida .pregunta-bv .dice { font-size: .88rem; color: var(--texto); line-height: 1.5; }

#bienvenida .botones-bv {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  margin-top: 1.3rem;
  flex-wrap: wrap;
}
#bienvenida button {
  font-family: inherit;
  font-size: .84rem;
  padding: .5rem .95rem;
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
}
#bienvenida button.principal {
  background: var(--acento);
  border-color: var(--acento);
  color: #17140a;
  font-weight: 600;
}
#bienvenida button:disabled { opacity: .5; cursor: default; }
#bienvenida .resultado-bv { font-size: .8rem; color: var(--tipo-cliente); margin-top: .6rem; }
#bienvenida .error-bv { font-size: .8rem; color: var(--alerta); margin-top: .6rem; }

/* ==========================================================================
   Mientras habla: la ventana late.
   ==========================================================================
   Un resplandor por dentro del borde, lento, que entra y sale. Se eligió esto
   y no un temblor de verdad porque una interfaz que se mueve marea, y esta se
   mira jornadas enteras: lo que se busca es notar que TE está hablando, no
   que la pantalla se rompió.

   Va en un pseudo-elemento fijo y con pointer-events:none para que no tape ni
   estorbe un solo clic de lo que hay debajo. */

body.hablando::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .35),
              inset 0 0 42px rgba(201, 162, 39, .13);
  animation: latido-hablando 1.9s ease-in-out infinite;
}

@keyframes latido-hablando {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}

/* Y el panel de la respuesta respira con él: es lo que se está leyendo
   mientras suena la voz, así que es donde el latido tiene sentido. */
body.hablando #respuesta {
  animation: respira-respuesta 1.9s ease-in-out infinite;
}

@keyframes respira-respuesta {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
  50%      { box-shadow: 0 0 22px 0 rgba(201, 162, 39, .12); }
}

@media (prefers-reduced-motion: reduce) {
  /* Quien pidió menos movimiento no lo ve latir: se queda un borde quieto,
     que sigue diciendo "está hablando" sin moverse. */
  body.hablando::after,
  body.hablando #respuesta { animation: none; }
  body.hablando::after { opacity: .6; }
}

/* El porqué de la pregunta: debajo y en chico. Dentro de la frase hacía
   preguntas de tres renglones que había que releer para entenderlas. */
#bienvenida .pregunta-bv .porque {
  margin-top: .3rem;
  font-size: .76rem;
  color: var(--tenue);
  line-height: 1.45;
}

/* Conectar un correo que no es de Microsoft. Ver `agent/correo.py`. */
#correo-otros { margin-top: .7rem; }
#correo-otros > summary {
  cursor: pointer; font-size: .86rem; opacity: .72; padding: .25rem 0;
}
#correo-otros > summary:hover { opacity: 1; }
.correo-forma { display: flex; flex-direction: column; gap: .55rem; margin-top: .6rem; }
.correo-forma label { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; opacity: .8; }
.correo-forma input, .correo-forma select {
  font: inherit; font-size: .9rem; padding: .4rem .55rem; border-radius: 6px;
  border: 1px solid rgba(127,127,127,.35); background: rgba(127,127,127,.08);
  color: inherit;
}
.correo-ayuda { font-size: .8rem; opacity: .75; margin: 0; line-height: 1.45; }
.correo-ayuda a { color: inherit; }
.correo-resultado { font-size: .84rem; margin: .1rem 0 0; line-height: 1.45; }
.correo-resultado.bien { color: #3fa06a; }
.correo-resultado.mal { color: #c9584e; }
.boton-texto {
  background: none; border: none; color: inherit; opacity: .6;
  font: inherit; font-size: .8rem; cursor: pointer; text-decoration: underline;
  padding: 0; text-align: left;
}