:root {
  /* 2026-07-14: antes tenia un teal fijo (#3aada8) que no pegaba con el
     tema del sitio (coral/verde) ni cambiaba en modo infantil. Ahora usa
     las mismas variables de tema.css_vars que ya inyecta temas/context_
     processors.py - se adapta solo a modo normal e infantil sin tocar
     este archivo cada vez que cambie el tema. */
  --tr-color: var(--t-accent, #3aada8);
  --tr-color-dim: var(--t-accent-hover, #2f8f8b);
  --tr-radius: var(--t-radius, 16px);
  --tr-shadow: 0 8px 32px rgba(0,0,0,.18);
}

/* Mismo hueco donde vivía #cb-btn (Dogyngo) - ver chatbot-v3.css, oculto. */
#traductor-btn {
  position: fixed;
  bottom: 40px;
  right: 24px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--tr-color);
  border: none;
  cursor: pointer;
  font-size: 28px;
  box-shadow: var(--tr-shadow);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s;
}
#traductor-btn:hover { transform: scale(1.08); }

#traductor-box {
  position: fixed;
  bottom: 128px;
  right: 24px;
  width: 320px;
  max-height: calc(100vh - 160px);
  background: #fff;
  border-radius: var(--tr-radius);
  box-shadow: var(--tr-shadow);
  z-index: 9999;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
#traductor-box.traductor-open { display: flex; }

#traductor-header {
  background: var(--tr-color);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: .95rem;
}
.traductor-controles { display: flex; gap: 6px; }
.traductor-controles button {
  background: rgba(255,255,255,.18);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .95rem;
}
.traductor-controles button:hover { background: rgba(255,255,255,.3); }
#traductor-sonido.traductor-sonido--off { opacity: .65; }

#traductor-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

#traductor-idioma-lbl {
  font-size: .8rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 8px;
}
#traductor-idioma {
  flex: 1;
  padding: .4rem .5rem;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  font-size: .85rem;
}

#traductor-mic {
  align-self: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--tr-color);
  border: none;
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  transition: transform .15s;
}
#traductor-mic:hover { transform: scale(1.05); }
#traductor-mic:disabled { opacity: .55; cursor: default; }
#traductor-mic.traductor-mic--grabando {
  animation: traductorPulso 1s ease-in-out infinite;
  background: var(--t-accent2, #e0554f);
}
@keyframes traductorPulso {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--t-accent2, #e0554f) 50%, transparent); }
  50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--t-accent2, #e0554f) 0%, transparent); }
}

#traductor-estado {
  text-align: center;
  font-size: .82rem;
  color: #64748b;
  margin: 0;
  min-height: 1.2em;
}

#traductor-resultado {
  background: #f8fafc;
  border-radius: 10px;
  padding: .75rem .9rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#traductor-original { margin: 0; font-size: .85rem; color: #64748b; }
#traductor-traduccion { margin: 0; font-size: 1rem; font-weight: 700; color: #0f172a; }
#traductor-repetir {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--tr-color);
  color: var(--tr-color);
  border-radius: 8px;
  padding: .35rem .7rem;
  font-size: .8rem;
  cursor: pointer;
}
#traductor-repetir:hover { background: rgba(58,173,168,.1); }

@media (max-width: 480px) {
  #traductor-box { right: 12px; left: 12px; width: auto; bottom: 112px; }
  #traductor-btn { right: 12px; bottom: 28px; }
}

@media (prefers-color-scheme: dark) {
  #traductor-box { background: #1e293b; }
  #traductor-traduccion { color: #f1f5f9; }
  #traductor-resultado { background: #0f172a; }
}